@nonnux/world-swap 0.1.0

package/src/client.js

@@ -0,0 +1,851 @@
+'use client';
+
+// @nonnux/world-swap
+// Drop-in swap card for World App mini apps. Tailwind-styled.
+//
+// Usage:
+//   import { SwapCard } from '@nonnux/world-swap';
+//   <SwapCard walletUser={user} Button={Button} />
+//
+// All config is optional and falls back to the nonnux / World Chain defaults.
+// Requires a quote API route (see @nonnux/world-swap/server) mounted at
+// `${apiBasePath}/quote` (default: /api/swap/quote).
+
+import { useState, useEffect, useCallback } from 'react';
+import { MiniKit } from '@worldcoin/minikit-js';
+import { ethers } from 'ethers';
+
+import {
+  DEFAULT_TOKENS,
+  DEFAULT_CONTRACTS,
+  DEFAULT_RPC_URL,
+  DEFAULT_EXPLORER_URL,
+} from './defaults.js';
+
+// ---------------------------------------------------------------------------
+// ABIs
+// ---------------------------------------------------------------------------
+const SWAP_ABI_DIRECT = [
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenIn', type: 'address' },
+      { internalType: 'address', name: 'tokenOut', type: 'address' },
+      { internalType: 'uint256', name: 'amountIn', type: 'uint256' },
+      { internalType: 'uint256', name: 'minAmountOut', type: 'uint256' },
+    ],
+    name: 'executeSwap',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+];
+
+const SWAP_ABI_V3 = [
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenIn', type: 'address' },
+      { internalType: 'address', name: 'tokenOut', type: 'address' },
+      { internalType: 'uint256', name: 'amountIn', type: 'uint256' },
+      { internalType: 'uint256', name: 'minAmountOut', type: 'uint256' },
+      { internalType: 'uint24', name: 'poolFee', type: 'uint24' },
+    ],
+    name: 'executeSwap',
+    outputs: [{ internalType: 'uint256', name: 'amountOut', type: 'uint256' }],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+];
+
+const SWAP_ABI_MULTIHOP = [
+  {
+    inputs: [
+      { internalType: 'address[]', name: 'path', type: 'address[]' },
+      { internalType: 'uint256', name: 'amountIn', type: 'uint256' },
+      { internalType: 'uint256', name: 'minAmountOut', type: 'uint256' },
+    ],
+    name: 'executeSwapMultiHop',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+];
+
+const SWAP_ABI_ROUTER = [
+  {
+    inputs: [
+      { internalType: 'address', name: 'tokenIn', type: 'address' },
+      { internalType: 'address', name: 'tokenOut', type: 'address' },
+      { internalType: 'uint256', name: 'amountIn', type: 'uint256' },
+      { internalType: 'uint256', name: 'minAmountOut', type: 'uint256' },
+      { internalType: 'uint24', name: 'v3FeeTierOverride', type: 'uint24' },
+    ],
+    name: 'swap',
+    outputs: [{ internalType: 'uint256', name: 'amountOut', type: 'uint256' }],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+];
+
+const TRANSFER_ABI = [
+  {
+    inputs: [
+      { internalType: 'address', name: 'to', type: 'address' },
+      { internalType: 'uint256', name: 'amount', type: 'uint256' },
+    ],
+    name: 'transfer',
+    outputs: [{ internalType: 'bool', name: '', type: 'bool' }],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+];
+
+const ERC20_ABI = ['function balanceOf(address) view returns (uint256)'];
+
+// ---------------------------------------------------------------------------
+// Storage helpers
+// ---------------------------------------------------------------------------
+const loadFromStorage = (key, defaultValue) => {
+  if (typeof window === 'undefined') return defaultValue;
+  try {
+    const stored = localStorage.getItem(key);
+    if (stored === null) return defaultValue;
+    return JSON.parse(stored);
+  } catch {
+    return defaultValue;
+  }
+};
+
+const saveToStorage = (key, value) => {
+  if (typeof window === 'undefined') return;
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    /* ignore storage errors */
+  }
+};
+
+// ---------------------------------------------------------------------------
+// Balance formatting
+// ---------------------------------------------------------------------------
+const formatBalance = (balance) => {
+  const num = parseFloat(balance);
+  if (isNaN(num) || num === 0) return '0';
+
+  if (num >= 1000000) {
+    const val = num / 1000000;
+    if (val >= 100) return val.toFixed(0) + 'M';
+    if (val >= 10) return val.toFixed(1) + 'M';
+    return val.toFixed(2) + 'M';
+  }
+
+  if (num >= 1000) {
+    const val = num / 1000;
+    if (val >= 100) return val.toFixed(0) + 'k';
+    if (val >= 10) return val.toFixed(1) + 'k';
+    return val.toFixed(2) + 'k';
+  }
+
+  if (num >= 100) return num.toFixed(0);
+  if (num >= 10) return num.toFixed(1);
+  if (num >= 1) return num.toFixed(2);
+
+  const log = Math.floor(Math.log10(Math.abs(num)));
+  const decimals = Math.min(-log + 1, 18);
+  return num.toFixed(decimals);
+};
+
+// ---------------------------------------------------------------------------
+// Inline icons (no external icon dependency)
+// ---------------------------------------------------------------------------
+const ShuffleIcon = ({ className }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5" />
+  </svg>
+);
+
+const TokenIcon = ({ token, size = 24, ImageComponent }) => {
+  const [imgError, setImgError] = useState(false);
+
+  useEffect(() => {
+    setImgError(false);
+  }, [token.symbol]);
+
+  if (imgError || !token.icon) {
+    return <span style={{ fontSize: size * 0.9 }}>{token.emoji || '🪙'}</span>;
+  }
+
+  const Img = ImageComponent || 'img';
+
+  return (
+    <Img
+      key={token.symbol}
+      src={token.icon}
+      alt={token.symbol}
+      width={size}
+      height={size}
+      className="rounded-full object-cover"
+      onError={() => setImgError(true)}
+    />
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+/**
+ * @param {Object}   props
+ * @param {Object}   props.walletUser     Connected user ({ address }). Null = "connect wallet" state.
+ * @param {Function} props.Button         Button component to render the swap CTA.
+ * @param {Array}    [props.tokens]       Token list (defaults to nonnux ecosystem).
+ * @param {Object}   [props.contracts]    Contract address overrides (merged with defaults).
+ * @param {string}   [props.rpcUrl]       JSON-RPC URL for balance reads.
+ * @param {string}   [props.apiBasePath]  Base path of the quote API (default /api/swap).
+ * @param {string}   [props.explorerUrl]  Block explorer base URL.
+ * @param {*}        [props.ImageComponent] Image component (e.g. next/image). Defaults to <img>.
+ * @param {string}   [props.storagePrefix] localStorage key prefix (avoid cross-app collisions).
+ * @param {string}   [props.title]        Header title (default "Swap").
+ */
+export function SwapCard({
+  walletUser,
+  Button,
+  tokens = DEFAULT_TOKENS,
+  contracts: contractsProp,
+  rpcUrl = DEFAULT_RPC_URL,
+  apiBasePath = '/api/swap',
+  explorerUrl = DEFAULT_EXPLORER_URL,
+  ImageComponent,
+  storagePrefix = 'world_swap',
+  title = 'Swap',
+}) {
+  const contracts = { ...DEFAULT_CONTRACTS, ...(contractsProp || {}) };
+  const SUPPORTED_TOKENS = tokens;
+
+  const STORAGE_KEYS = {
+    SLIPPAGE: `${storagePrefix}_slippage`,
+    TOKEN_IN: `${storagePrefix}_token_in`,
+    TOKEN_OUT: `${storagePrefix}_token_out`,
+  };
+
+  const [tokenInIndex, setTokenInIndex] = useState(0);
+  const [tokenOutIndex, setTokenOutIndex] = useState(1);
+  const [slippage, setSlippage] = useState(5);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const [showTokenInDropdown, setShowTokenInDropdown] = useState(false);
+  const [showTokenOutDropdown, setShowTokenOutDropdown] = useState(false);
+  const [amountIn, setAmountIn] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingQuote, setIsLoadingQuote] = useState(false);
+  const [isLoadingBalance, setIsLoadingBalance] = useState(false);
+  const [swapResult, setSwapResult] = useState(null);
+  const [quote, setQuote] = useState(null);
+  const [showSettings, setShowSettings] = useState(false);
+  const [tokenInBalance, setTokenInBalance] = useState('0');
+
+  const tokenIn = SUPPORTED_TOKENS[tokenInIndex];
+  const tokenOut = SUPPORTED_TOKENS[tokenOutIndex];
+
+  const tokenInVersion = tokenIn.poolVersion || 'v2';
+  const tokenOutVersion = tokenOut.poolVersion || 'v2';
+
+  // Special case: tokens that share a direct V3 pool with WLD.
+  const isDirectV3WithWLD =
+    (tokenIn.symbol === 'SUSHI' && tokenOut.symbol === 'WLD') ||
+    (tokenIn.symbol === 'WLD' && tokenOut.symbol === 'SUSHI');
+
+  // Pick the contract + mode for this pair.
+  let SWAP_CONTRACT_ADDRESS;
+  let swapMode; // 'v2' | 'v3' | 'router'
+
+  if (isDirectV3WithWLD) {
+    SWAP_CONTRACT_ADDRESS = contracts.swapV3;
+    swapMode = 'v3';
+  } else if (tokenInVersion === 'v3' || tokenOutVersion === 'v3') {
+    if (contracts.swapRouter && contracts.swapRouter !== '0x0000000000000000000000000000000000000000') {
+      SWAP_CONTRACT_ADDRESS = contracts.swapRouter;
+      swapMode = 'router';
+    } else {
+      SWAP_CONTRACT_ADDRESS = contracts.swapV3;
+      swapMode = 'v3';
+    }
+  } else {
+    SWAP_CONTRACT_ADDRESS = contracts.swapV2;
+    swapMode = 'v2';
+  }
+
+  SWAP_CONTRACT_ADDRESS = ethers.getAddress(SWAP_CONTRACT_ADDRESS);
+
+  // -------------------------------------------------------------------------
+  // Load persisted prefs
+  // -------------------------------------------------------------------------
+  useEffect(() => {
+    const savedSlippage = loadFromStorage(STORAGE_KEYS.SLIPPAGE, 5);
+    const savedTokenIn = loadFromStorage(STORAGE_KEYS.TOKEN_IN, 0);
+    const savedTokenOut = loadFromStorage(STORAGE_KEYS.TOKEN_OUT, 1);
+
+    const validTokenIn = savedTokenIn >= 0 && savedTokenIn < SUPPORTED_TOKENS.length ? savedTokenIn : 0;
+    const validTokenOut = savedTokenOut >= 0 && savedTokenOut < SUPPORTED_TOKENS.length ? savedTokenOut : 1;
+
+    setSlippage(savedSlippage);
+    setTokenInIndex(validTokenIn);
+    setTokenOutIndex(validTokenOut !== validTokenIn ? validTokenOut : validTokenIn === 0 ? 1 : 0);
+    setIsInitialized(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (isInitialized) saveToStorage(STORAGE_KEYS.SLIPPAGE, slippage);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slippage, isInitialized]);
+
+  useEffect(() => {
+    if (isInitialized) saveToStorage(STORAGE_KEYS.TOKEN_IN, tokenInIndex);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tokenInIndex, isInitialized]);
+
+  useEffect(() => {
+    if (isInitialized) saveToStorage(STORAGE_KEYS.TOKEN_OUT, tokenOutIndex);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tokenOutIndex, isInitialized]);
+
+  // -------------------------------------------------------------------------
+  // Load balance
+  // -------------------------------------------------------------------------
+  const loadBalance = useCallback(async () => {
+    if (!walletUser?.address || !isInitialized) return;
+    setIsLoadingBalance(true);
+    try {
+      const provider = new ethers.JsonRpcProvider(rpcUrl);
+      const contract = new ethers.Contract(tokenIn.address, ERC20_ABI, provider);
+      const balance = await contract.balanceOf(walletUser.address);
+      setTokenInBalance(ethers.formatUnits(balance, tokenIn.decimals));
+    } catch (error) {
+      console.error('[world-swap] Balance error:', error);
+      setTokenInBalance('0');
+    } finally {
+      setIsLoadingBalance(false);
+    }
+  }, [walletUser, tokenIn, isInitialized, rpcUrl]);
+
+  useEffect(() => {
+    loadBalance();
+  }, [loadBalance]);
+
+  // -------------------------------------------------------------------------
+  // Fetch quote
+  // -------------------------------------------------------------------------
+  const fetchQuote = useCallback(async () => {
+    if (!amountIn || parseFloat(amountIn) <= 0) {
+      setQuote(null);
+      return;
+    }
+
+    setIsLoadingQuote(true);
+
+    try {
+      const response = await fetch(`${apiBasePath}/quote`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          token_in: tokenIn.symbol,
+          token_out: tokenOut.symbol,
+          token_in_address: tokenIn.address,
+          token_out_address: tokenOut.address,
+          amount_in: parseFloat(amountIn),
+        }),
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        setQuote(result.quote);
+        setSwapResult(null);
+      } else {
+        setQuote(null);
+        if (result.error === 'NO_LIQUIDITY') {
+          setSwapResult({
+            success: false,
+            message: `⚠️ No liquidity for ${tokenIn.symbol}/${tokenOut.symbol}`,
+          });
+        }
+      }
+    } catch (error) {
+      console.error('[world-swap] Quote error:', error);
+      setQuote(null);
+    } finally {
+      setIsLoadingQuote(false);
+    }
+  }, [amountIn, tokenIn, tokenOut, apiBasePath]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (amountIn && parseFloat(amountIn) > 0) fetchQuote();
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [amountIn, tokenIn, tokenOut, fetchQuote]);
+
+  // -------------------------------------------------------------------------
+  // Swap transaction
+  // -------------------------------------------------------------------------
+  const handleSwap = async () => {
+    if (!walletUser?.address || !amountIn || parseFloat(amountIn) <= 0) {
+      setSwapResult({ success: false, message: 'Please enter a valid amount' });
+      return;
+    }
+
+    if (!quote) {
+      setSwapResult({ success: false, message: 'Please wait for price quote' });
+      return;
+    }
+
+    if (parseFloat(amountIn) > parseFloat(tokenInBalance)) {
+      setSwapResult({
+        success: false,
+        message: `Insufficient balance. You have ${formatBalance(tokenInBalance)} ${tokenIn.symbol}`,
+      });
+      return;
+    }
+
+    setIsLoading(true);
+    setSwapResult(null);
+
+    try {
+      const amountInWei = ethers.parseUnits(amountIn.toString(), tokenIn.decimals);
+
+      const externalTax = tokenIn.externalTaxPercent || 0;
+      const effectiveSlippage = slippage + externalTax;
+      const minAmountOut = quote.amount_out * (1 - effectiveSlippage / 100);
+      const minAmountOutWei = ethers.parseUnits(minAmountOut.toFixed(tokenOut.decimals), tokenOut.decimals);
+
+      const tokenInAddress = ethers.getAddress(tokenIn.address);
+      const tokenOutAddress = ethers.getAddress(tokenOut.address);
+
+      const isMultiHop = quote.route_type === 'multi-hop' && quote.path && quote.path.length > 2;
+
+      let swapTransaction;
+
+      if (isMultiHop && swapMode === 'v2') {
+        const pathAddresses = quote.path.map((addr) => ethers.getAddress(addr));
+        swapTransaction = {
+          address: SWAP_CONTRACT_ADDRESS,
+          abi: SWAP_ABI_MULTIHOP,
+          functionName: 'executeSwapMultiHop',
+          args: [pathAddresses, amountInWei.toString(), minAmountOutWei.toString()],
+        };
+      } else if (swapMode === 'router') {
+        const poolFee = quote.v3_fee_tier || tokenIn.v3FeeTier || tokenOut.v3FeeTier || 10000;
+        swapTransaction = {
+          address: SWAP_CONTRACT_ADDRESS,
+          abi: SWAP_ABI_ROUTER,
+          functionName: 'swap',
+          args: [tokenInAddress, tokenOutAddress, amountInWei.toString(), minAmountOutWei.toString(), poolFee],
+        };
+      } else if (swapMode === 'v3') {
+        const poolFee = quote.v3_fee_tier || tokenIn.v3FeeTier || tokenOut.v3FeeTier || 10000;
+        swapTransaction = {
+          address: SWAP_CONTRACT_ADDRESS,
+          abi: SWAP_ABI_V3,
+          functionName: 'executeSwap',
+          args: [tokenInAddress, tokenOutAddress, amountInWei.toString(), minAmountOutWei.toString(), poolFee],
+        };
+      } else {
+        swapTransaction = {
+          address: SWAP_CONTRACT_ADDRESS,
+          abi: SWAP_ABI_DIRECT,
+          functionName: 'executeSwap',
+          args: [tokenInAddress, tokenOutAddress, amountInWei.toString(), minAmountOutWei.toString()],
+        };
+      }
+
+      const payload = {
+        transaction: [
+          {
+            address: tokenInAddress,
+            abi: TRANSFER_ABI,
+            functionName: 'transfer',
+            args: [SWAP_CONTRACT_ADDRESS, amountInWei.toString()],
+          },
+          swapTransaction,
+        ],
+      };
+
+      const result = await MiniKit.commandsAsync.sendTransaction(payload);
+
+      if (result.finalPayload?.status === 'error') {
+        throw new Error(result.finalPayload?.error_code || 'Transaction failed');
+      }
+
+      const txHash = result.finalPayload?.transaction_id || result.finalPayload?.transactionId || null;
+
+      setSwapResult({
+        success: true,
+        message: `🎉 Swap successful! You received ~${formatBalance(quote.amount_out)} ${tokenOut.symbol}`,
+        txHash,
+      });
+
+      setAmountIn('');
+      setQuote(null);
+      setTimeout(loadBalance, 3000);
+    } catch (error) {
+      console.error('[world-swap] Error:', error);
+      setSwapResult({ success: false, message: error.message || 'Swap failed' });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // -------------------------------------------------------------------------
+  // Handlers
+  // -------------------------------------------------------------------------
+  const handleSwapDirection = () => {
+    const tempIndex = tokenInIndex;
+    setTokenInIndex(tokenOutIndex);
+    setTokenOutIndex(tempIndex);
+    setAmountIn('');
+    setQuote(null);
+    setSwapResult(null);
+  };
+
+  const handleSelectTokenIn = (index) => {
+    if (index === tokenOutIndex) setTokenOutIndex(tokenInIndex);
+    setTokenInIndex(index);
+    setShowTokenInDropdown(false);
+    setAmountIn('');
+    setQuote(null);
+  };
+
+  const handleSelectTokenOut = (index) => {
+    if (index === tokenInIndex) setTokenInIndex(tokenOutIndex);
+    setTokenOutIndex(index);
+    setShowTokenOutDropdown(false);
+    setQuote(null);
+  };
+
+  const handleSetMax = () => {
+    if (parseFloat(tokenInBalance) > 0) setAmountIn(tokenInBalance);
+  };
+
+  const handleSlippageChange = (newSlippage) => setSlippage(newSlippage);
+
+  const closeAllDropdowns = () => {
+    setShowTokenInDropdown(false);
+    setShowTokenOutDropdown(false);
+  };
+
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+  if (!walletUser) {
+    return (
+      <div className="text-center">
+        <div className="flex justify-between items-center mb-4">
+          <div>
+            <div className="flex items-center justify-center gap-2 mb-4">
+              <ShuffleIcon className="w-6 h-6 text-orange-400" />
+              <h2 className="text-xl font-bold text-orange-400">Swap Tokens</h2>
+            </div>
+          </div>
+        </div>
+        <p className="text-gray-400">Connect your wallet to swap</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-sm mx-auto px-2">
+      {/* Header */}
+      <div className="flex justify-between items-center mb-4">
+        <div>
+          <div className="flex items-center justify-center gap-2 mb-4">
+            <ShuffleIcon className="w-6 h-6 text-orange-400" />
+            <h2 className="text-xl font-bold text-orange-400">{title}</h2>
+          </div>
+        </div>
+        <button
+          onClick={() => setShowSettings(!showSettings)}
+          className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
+        >
+          ⚙️
+        </button>
+      </div>
+
+      {/* Balance */}
+      <div className="mb-3 bg-purple-900/30 rounded-xl p-2 border border-purple-700/50">
+        <div className="flex justify-between items-center">
+          <span className="text-gray-400 text-xs">Your {tokenIn.symbol}:</span>
+          {isLoadingBalance ? (
+            <span className="text-gray-400 text-sm">Loading...</span>
+          ) : (
+            <span className="text-orange-400 font-bold text-sm">
+              {formatBalance(tokenInBalance)} {tokenIn.symbol}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Settings */}
+      {showSettings && (
+        <div className="mb-3 bg-gray-800/50 rounded-xl p-3 border border-gray-700">
+          <div className="flex justify-between items-center">
+            <span className="text-gray-400 text-xs">Slippage</span>
+            <div className="flex gap-1 flex-wrap justify-end">
+              {[1, 3, 5, 10, 15, 20].map((s) => (
+                <button
+                  key={s}
+                  onClick={() => handleSlippageChange(s)}
+                  className={`px-2 py-1 rounded text-xs ${slippage === s ? 'bg-blue-500 text-white' : 'bg-gray-700 text-gray-300'}`}
+                >
+                  {s}%
+                </button>
+              ))}
+            </div>
+          </div>
+          <p className="text-gray-500 text-xs mt-2">Current: {slippage}% ✓ saved</p>
+        </div>
+      )}
+
+      {/* Result */}
+      {swapResult && (
+        <div
+          className={`mb-3 p-3 rounded-xl text-sm ${
+            swapResult.success
+              ? 'bg-green-500/20 text-green-400 border border-green-500/50'
+              : 'bg-red-500/20 text-red-400 border border-red-500/50'
+          }`}
+        >
+          <p>{swapResult.message}</p>
+          {swapResult.txHash && (
+            <a
+              href={`${explorerUrl}/tx/${swapResult.txHash}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs underline opacity-70 mt-1 block"
+            >
+              View on explorer →
+            </a>
+          )}
+        </div>
+      )}
+
+      {/* FROM */}
+      <div className="bg-gray-800/50 rounded-xl p-3 border border-gray-700">
+        <div className="flex justify-between items-center mb-1">
+          <label className="text-gray-400 text-xs">You Pay</label>
+          <button
+            onClick={handleSetMax}
+            disabled={isLoading || parseFloat(tokenInBalance) === 0}
+            className="text-xs text-purple-400 hover:text-purple-300 disabled:opacity-50"
+          >
+            MAX
+          </button>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowTokenOutDropdown(false);
+                setShowTokenInDropdown(!showTokenInDropdown);
+              }}
+              disabled={isLoading}
+              className={`flex items-center gap-2 bg-gradient-to-r ${tokenIn.gradient} px-3 py-2 rounded-lg transition-all hover:opacity-90 disabled:opacity-50`}
+            >
+              <TokenIcon token={tokenIn} size={24} ImageComponent={ImageComponent} />
+              <span className="text-white font-bold text-sm">{tokenIn.symbol}</span>
+              <span className="text-white/60 text-xs">▼</span>
+            </button>
+
+            {showTokenInDropdown && (
+              <>
+                <div className="fixed inset-0 z-40" onClick={closeAllDropdowns} />
+                <div className="absolute top-full left-0 mt-2 bg-gray-800 border border-gray-700 rounded-xl shadow-xl z-50 min-w-[200px] overflow-hidden">
+                  {SUPPORTED_TOKENS.map((token, index) => (
+                    <button
+                      key={token.symbol}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSelectTokenIn(index);
+                      }}
+                      className={`w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 transition-colors ${
+                        index === tokenInIndex ? 'bg-gray-700' : ''
+                      }`}
+                    >
+                      <TokenIcon token={token} size={32} ImageComponent={ImageComponent} />
+                      <div className="text-left flex-1">
+                        <p className="text-white font-semibold text-sm">{token.symbol}</p>
+                        <p className="text-gray-400 text-xs">{token.name}</p>
+                      </div>
+                      {index === tokenInIndex && <span className="text-green-400">✓</span>}
+                    </button>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+
+          <input
+            type="number"
+            placeholder="0.0"
+            value={amountIn}
+            onChange={(e) => setAmountIn(e.target.value)}
+            disabled={isLoading}
+            step="0.000001"
+            min="0"
+            className="flex-1 min-w-0 bg-transparent text-white text-right text-xl font-mono focus:outline-none"
+          />
+        </div>
+      </div>
+
+      {/* Swap direction */}
+      <div className="flex justify-center relative z-20 h-0">
+        <button
+          onClick={handleSwapDirection}
+          disabled={isLoading}
+          className="bg-gray-700 hover:bg-gray-600 p-4 rounded-full border-4 border-gray-900 transition-all hover:scale-110 disabled:opacity-50 shadow-lg -translate-y-1/2 flex items-center justify-center"
+        >
+          <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+          </svg>
+        </button>
+      </div>
+
+      {/* TO */}
+      <div className="mb-3 bg-gray-800/50 rounded-xl p-3 border border-gray-700">
+        <div className="flex justify-between items-center mb-1">
+          <label className="text-gray-400 text-xs">You Receive</label>
+          {quote && quote.price_impact > 1 && (
+            <span className={`text-xs ${quote.price_impact > 5 ? 'text-red-400' : 'text-yellow-400'}`}>
+              {quote.price_impact.toFixed(1)}% impact
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowTokenInDropdown(false);
+                setShowTokenOutDropdown(!showTokenOutDropdown);
+              }}
+              disabled={isLoading}
+              className={`flex items-center gap-2 bg-gradient-to-r ${tokenOut.gradient} px-3 py-2 rounded-lg transition-all hover:opacity-90 disabled:opacity-50`}
+            >
+              <TokenIcon token={tokenOut} size={24} ImageComponent={ImageComponent} />
+              <span className="text-white font-bold text-sm">{tokenOut.symbol}</span>
+              <span className="text-white/60 text-xs">▼</span>
+            </button>
+
+            {showTokenOutDropdown && (
+              <>
+                <div className="fixed inset-0 z-40" onClick={closeAllDropdowns} />
+                <div className="absolute top-full left-0 mt-2 bg-gray-800 border border-gray-700 rounded-xl shadow-xl z-50 min-w-[200px] overflow-hidden">
+                  {SUPPORTED_TOKENS.map((token, index) => (
+                    <button
+                      key={token.symbol}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSelectTokenOut(index);
+                      }}
+                      className={`w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 transition-colors ${
+                        index === tokenOutIndex ? 'bg-gray-700' : ''
+                      }`}
+                    >
+                      <TokenIcon token={token} size={32} ImageComponent={ImageComponent} />
+                      <div className="text-left flex-1">
+                        <p className="text-white font-semibold text-sm">{token.symbol}</p>
+                        <p className="text-gray-400 text-xs">{token.name}</p>
+                      </div>
+                      {index === tokenOutIndex && <span className="text-green-400">✓</span>}
+                    </button>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+
+          <div className="flex-1 text-right">
+            {isLoadingQuote ? (
+              <span className="text-gray-400 text-xl animate-pulse">...</span>
+            ) : quote ? (
+              <span className="text-white text-xl font-mono">{formatBalance(quote.amount_out)}</span>
+            ) : (
+              <span className="text-gray-500 text-xl">0.0</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Swap button */}
+      <div className="w-full justify-center">
+        <Button
+          onClick={handleSwap}
+          disabled={isLoading || !amountIn || parseFloat(amountIn) <= 0 || !quote || isLoadingQuote}
+        >
+          {isLoading ? (
+            <span className="flex items-center justify-center gap-2">⏳ Swapping...</span>
+          ) : isLoadingQuote ? (
+            <span className="flex items-center justify-center gap-2">⏳ Loading...</span>
+          ) : !quote ? (
+            'Enter amount'
+          ) : (
+            <span className="flex items-center justify-center gap-2">
+              <ShuffleIcon className="w-5 h-5" /> Swap {tokenIn.symbol} → {tokenOut.symbol}
+            </span>
+          )}
+        </Button>
+      </div>
+
+      {/* Quote details */}
+      {quote && (
+        <div className="mb-3 bg-gray-800/30 rounded-lg p-2 text-xs space-y-1">
+          <div className="flex justify-between text-gray-400">
+            <span>Rate</span>
+            <span>
+              1 {tokenIn.symbol} = {formatBalance(quote.rate)} {tokenOut.symbol}
+            </span>
+          </div>
+          <div className="flex justify-between text-gray-400">
+            <span>Fee ({quote.platform_fee_percent}%)</span>
+            <span>
+              -{formatBalance(quote.platform_fee)} {tokenIn.symbol}
+            </span>
+          </div>
+          {tokenIn.externalTaxPercent > 0 && (
+            <div className="flex justify-between text-yellow-400">
+              <span>⚠️ Token tax ({tokenIn.externalTaxPercent}%)</span>
+              <span>
+                -{formatBalance((parseFloat(amountIn) * tokenIn.externalTaxPercent) / 100)} {tokenIn.symbol}
+              </span>
+            </div>
+          )}
+          <div className="flex justify-between text-gray-400">
+            <span>Slippage</span>
+            <span>
+              {slippage}%{tokenIn.externalTaxPercent > 0 ? ` + ${tokenIn.externalTaxPercent}% tax` : ''}
+            </span>
+          </div>
+          <div className="flex justify-between text-gray-400">
+            <span>Min. received</span>
+            <span>
+              {formatBalance(quote.amount_out * (1 - (slippage + (tokenIn.externalTaxPercent || 0)) / 100))}{' '}
+              {tokenOut.symbol}
+            </span>
+          </div>
+          {swapMode !== 'v2' && quote.v3_fee_tier && (
+            <div className="flex justify-between text-blue-400">
+              <span>Pool fee tier</span>
+              <span>{quote.v3_fee_tier / 10000}%</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Refresh */}
+      <button onClick={loadBalance} className="w-full mt-2 text-gray-500 hover:text-gray-300 text-xs py-1">
+        🔄 Refresh balance
+      </button>
+    </div>
+  );
+}
+
+export default SwapCard;