slippage stuff
This commit is contained in:
@@ -19,6 +19,9 @@ export function SwapForm() {
|
|||||||
const [selectedToToken, setSelectedToToken] = useState<TokenDetails | null>(null);
|
const [selectedToToken, setSelectedToToken] = useState<TokenDetails | null>(null);
|
||||||
const [isFromDropdownOpen, setIsFromDropdownOpen] = useState(false);
|
const [isFromDropdownOpen, setIsFromDropdownOpen] = useState(false);
|
||||||
const [isToDropdownOpen, setIsToDropdownOpen] = useState(false);
|
const [isToDropdownOpen, setIsToDropdownOpen] = useState(false);
|
||||||
|
const [slippage, setSlippage] = useState<number>(0.5); // Default 0.5%
|
||||||
|
const [customSlippage, setCustomSlippage] = useState<string>('');
|
||||||
|
const [isCustomSlippage, setIsCustomSlippage] = useState(false);
|
||||||
const fromDropdownRef = useRef<HTMLDivElement>(null);
|
const fromDropdownRef = useRef<HTMLDivElement>(null);
|
||||||
const toDropdownRef = useRef<HTMLDivElement>(null);
|
const toDropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
@@ -47,6 +50,19 @@ export function SwapForm() {
|
|||||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// Calculate and log limit price when amount or slippage changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (fromAmount && parseFloat(fromAmount) > 0) {
|
||||||
|
const amount = parseFloat(fromAmount);
|
||||||
|
const slippagePercent = isCustomSlippage ? parseFloat(customSlippage) || 0 : slippage;
|
||||||
|
const limitPrice = amount * (1 + slippagePercent / 100);
|
||||||
|
console.log('Limit Price:', limitPrice);
|
||||||
|
console.log('From Amount:', amount);
|
||||||
|
console.log('Slippage %:', slippagePercent);
|
||||||
|
console.log('Additional Amount from Slippage:', limitPrice - amount);
|
||||||
|
}
|
||||||
|
}, [fromAmount, slippage, customSlippage, isCustomSlippage]);
|
||||||
|
|
||||||
const handleSwap = () => {
|
const handleSwap = () => {
|
||||||
// Swap logic will be implemented later
|
// Swap logic will be implemented later
|
||||||
console.log('Swap clicked');
|
console.log('Swap clicked');
|
||||||
@@ -192,6 +208,51 @@ export function SwapForm() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Slippage Tolerance */}
|
||||||
|
<div className="space-y-3 pt-2">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<label className="text-sm font-medium">Slippage Tolerance</label>
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{isCustomSlippage ? customSlippage || '0' : slippage}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 flex-wrap">
|
||||||
|
{[0.1, 0.2, 0.3, 1, 2, 3].map((percent) => (
|
||||||
|
<Button
|
||||||
|
key={percent}
|
||||||
|
variant={!isCustomSlippage && slippage === percent ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
setSlippage(percent);
|
||||||
|
setIsCustomSlippage(false);
|
||||||
|
}}
|
||||||
|
className="flex-1 min-w-[60px]"
|
||||||
|
>
|
||||||
|
{percent}%
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
<div className="flex-1 min-w-[80px] relative">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Custom"
|
||||||
|
value={customSlippage}
|
||||||
|
onChange={(e) => {
|
||||||
|
setCustomSlippage(e.target.value);
|
||||||
|
setIsCustomSlippage(true);
|
||||||
|
}}
|
||||||
|
onFocus={() => setIsCustomSlippage(true)}
|
||||||
|
className={`h-9 pr-6 ${isCustomSlippage ? 'border-primary' : ''}`}
|
||||||
|
step="0.01"
|
||||||
|
/>
|
||||||
|
{isCustomSlippage && (
|
||||||
|
<span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
|
||||||
|
%
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Swap Button */}
|
{/* Swap Button */}
|
||||||
<Button
|
<Button
|
||||||
className="w-full h-14 text-lg"
|
className="w-full h-14 text-lg"
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ export function useGetAllTokens(offset: number = 0, limit: number = 100) {
|
|||||||
|
|
||||||
// Get chain ID and contract address
|
// Get chain ID and contract address
|
||||||
const chainId = await publicClient.getChainId();
|
const chainId = await publicClient.getChainId();
|
||||||
const address = chainInfo[chainId.toString()]?.IPartyPlanner;
|
const address = (chainInfo as Record<string, { IPartyPlanner: string; IPartyPoolViewer: string }>)[chainId.toString()]?.IPartyPlanner;
|
||||||
|
|
||||||
if (!address) {
|
if (!address) {
|
||||||
setError('IPartyPlanner contract not found for current chain');
|
setError('IPartyPlanner contract not found for current chain');
|
||||||
@@ -43,7 +43,7 @@ export function useGetAllTokens(offset: number = 0, limit: number = 100) {
|
|||||||
|
|
||||||
// Call getAllTokens function
|
// Call getAllTokens function
|
||||||
const result = await publicClient.readContract({
|
const result = await publicClient.readContract({
|
||||||
address,
|
address: address as `0x${string}`,
|
||||||
abi: IPartyPlannerABI,
|
abi: IPartyPlannerABI,
|
||||||
functionName: 'getAllTokens',
|
functionName: 'getAllTokens',
|
||||||
args: [BigInt(offset), BigInt(limit)],
|
args: [BigInt(offset), BigInt(limit)],
|
||||||
|
|||||||
Reference in New Issue
Block a user