slippage stuff

src/components/swap-form.tsx

@@ -19,6 +19,9 @@ export function SwapForm() {
   const [selectedToToken, setSelectedToToken] = useState<TokenDetails | null>(null);
   const [isFromDropdownOpen, setIsFromDropdownOpen] = 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 toDropdownRef = useRef<HTMLDivElement>(null);
 
@@ -47,6 +50,19 @@ export function SwapForm() {
     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 = () => {
     // Swap logic will be implemented later
     console.log('Swap clicked');
@@ -192,6 +208,51 @@ export function SwapForm() {
           </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 */}
         <Button
           className="w-full h-14 text-lg"