using viem for the uniswap quote and hiding the component since its not ready

src/components/swap-form.tsx

@@ -6,17 +6,19 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { ArrowDownUp, ChevronDown, Settings, CheckCircle, XCircle, Loader2 } from 'lucide-react';
-import { useAccount } from 'wagmi';
+import { useAccount, useChainId } from 'wagmi';
 import { useTokenDetails, useGetPoolsByToken, type TokenDetails } from '@/hooks/usePartyPlanner';
 import { useSwapAmounts, useSwap, selectBestSwapRoute, type ActualSwapAmounts } from '@/hooks/usePartyPool';
 import { formatUnits, parseUnits } from 'viem';
 import { SwapReviewModal } from './swap-review-modal';
+import UniswapQuote from './uniswap-quote';
 
 type TransactionStatus = 'idle' | 'pending' | 'success' | 'error';
 
 export function SwapForm() {
   const { t } = useTranslation();
   const { isConnected, address } = useAccount();
+  const chainId = useChainId();
   const [fromAmount, setFromAmount] = useState('');
   const [toAmount, setToAmount] = useState('');
   const [selectedFromToken, setSelectedFromToken] = useState<TokenDetails | null>(null);
@@ -404,6 +406,19 @@ export function SwapForm() {
           </div>
         )}
 
+        {/*/!* Uniswap Quote - Hidden (under construction) *!/*/}
+        {/*{false && fromAmount && selectedFromToken && selectedToToken && (*/}
+        {/*  <UniswapQuote*/}
+        {/*    amountIn={fromAmount}*/}
+        {/*    tokenInAddress={selectedFromToken.address}*/}
+        {/*    tokenOutAddress={selectedToToken.address}*/}
+        {/*    tokenInDecimals={selectedFromToken.decimals}*/}
+        {/*    tokenOutDecimals={selectedToToken.decimals}*/}
+        {/*    tokenOutSymbol={selectedToToken.symbol}*/}
+        {/*    chainId={chainId || 1}*/}
+        {/*  />*/}
+        {/*)}*/}
+
         {/* Gas Estimate, Slippage, and Fees */}
         {isConnected && fromAmount && toAmount && (
           <div className="px-4 py-2 bg-muted/30 rounded-lg space-y-2">

src/components/uniswap-quote.tsx

@@ -0,0 +1,248 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { parseUnits, formatUnits } from 'viem';
+
+interface UniswapQuoteProps {
+  amountIn: string;
+  tokenInAddress: string | null;
+  tokenOutAddress: string | null;
+  tokenInDecimals: number;
+  tokenOutDecimals: number;
+  tokenOutSymbol: string;
+  chainId: number;
+}
+
+interface TokenPrices {
+  [key: string]: number;
+}
+
+export default function UniswapQuote({
+  amountIn,
+  tokenInAddress,
+  tokenOutAddress,
+  tokenInDecimals,
+  tokenOutDecimals,
+  tokenOutSymbol,
+  chainId
+}: UniswapQuoteProps) {
+  const [quote, setQuote] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [prices, setPrices] = useState<TokenPrices | null>(null);
+
+  // Only show on mainnet
+  if (chainId !== 1) {
+    return null;
+  }
+
+  // Don't fetch quote if tokens aren't selected
+  if (!tokenInAddress || !tokenOutAddress) {
+    return null;
+  }
+
+  // Fetch token prices from CoinGecko using contract addresses
+  useEffect(() => {
+    if (!tokenInAddress || !tokenOutAddress) return;
+
+    const fetchPrices = async () => {
+      try {
+        // Fetch both token prices separately using the correct endpoint
+        const [tokenInResponse, tokenOutResponse] = await Promise.all([
+          fetch(`https://api.coingecko.com/api/v3/simple/token_price/ethereum?contract_addresses=${tokenInAddress}&vs_currencies=usd`),
+          fetch(`https://api.coingecko.com/api/v3/simple/token_price/ethereum?contract_addresses=${tokenOutAddress}&vs_currencies=usd`)
+        ]);
+
+        const tokenInData = await tokenInResponse.json();
+        const tokenOutData = await tokenOutResponse.json();
+
+        const tokenInPrice = tokenInData[tokenInAddress.toLowerCase()]?.usd || 0;
+        const tokenOutPrice = tokenOutData[tokenOutAddress.toLowerCase()]?.usd || 0;
+
+        setPrices({
+          tokenIn: tokenInPrice,
+          tokenOut: tokenOutPrice
+        });
+
+        console.log('Token prices:', { tokenInPrice, tokenOutPrice, tokenInData, tokenOutData });
+      } catch (err) {
+        console.error('Failed to fetch prices:', err);
+      }
+    };
+
+    fetchPrices();
+    // Refresh prices every 30 seconds
+    const interval = setInterval(fetchPrices, 30000);
+    return () => clearInterval(interval);
+  }, [tokenInAddress, tokenOutAddress]);
+
+  const getQuote = async () => {
+    if (!amountIn || parseFloat(amountIn) <= 0) {
+      setError('Please enter a valid amount');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      // Convert amount to smallest unit based on token decimals using viem
+      const amountInSmallestUnit = parseUnits(amountIn, tokenInDecimals).toString();
+
+      const response = await fetch('https://api.uniswap.org/v2/quote', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Origin': 'https://app.uniswap.org'
+        },
+        body: JSON.stringify({
+          amount: amountInSmallestUnit,
+          tokenIn: tokenInAddress,
+          tokenInChainId: chainId,
+          tokenOut: tokenOutAddress,
+          tokenOutChainId: chainId,
+          type: 'EXACT_INPUT',
+          configs: [
+            {
+              protocols: ['V2', 'V3', 'V4'],
+              enableUniversalRouter: true,
+              routingType: 'CLASSIC'
+            }
+          ]
+        })
+      });
+
+      if (!response.ok) throw new Error('Failed to fetch quote');
+
+      const data = await response.json();
+      console.log('Uniswap Quote:', data);
+      setQuote(data);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatTokenAmount = (amount: string) => {
+    const formatted = formatUnits(BigInt(amount), tokenOutDecimals);
+    return parseFloat(formatted).toLocaleString('en-US', {
+      maximumFractionDigits: tokenOutDecimals >= 18 ? 0 : 6
+    });
+  };
+
+  const getQuoteAmount = () => {
+    if (!quote) return '0';
+    // Handle nested quote structure
+    return quote.quote?.quote || quote.quote || '0';
+  };
+
+  const calculateCostBreakdown = () => {
+    if (!quote || !prices || !prices.tokenIn) return null;
+
+    const tokenAmount = parseFloat(amountIn);
+    const tradeValueUSD = tokenAmount * prices.tokenIn;
+
+    // Access nested quote object
+    const quoteData = quote.quote || quote;
+
+    // 1. Gas Cost
+    const gasCostUSD = parseFloat(quoteData.gasUseEstimateUSD || '0');
+
+    // 2. Uniswap UX Fee (0.25%)
+    const uniswapFeePercent = 0.25;
+    const uniswapFeeUSD = (uniswapFeePercent / 100) * tradeValueUSD;
+
+    const totalCostUSD = gasCostUSD + uniswapFeeUSD;
+
+    console.log('Cost breakdown calc:', {
+      gasCostUSD,
+      uniswapFeeUSD,
+      totalCostUSD,
+      tradeValueUSD,
+      quoteData
+    });
+
+    return {
+      gasCostUSD,
+      uniswapFeePercent,
+      uniswapFeeUSD,
+      totalCostUSD,
+      tradeValueUSD
+    };
+  };
+
+  const costBreakdown = calculateCostBreakdown();
+
+  return (
+    <div className="w-full max-w-md p-4">
+      <button
+        onClick={getQuote}
+        disabled={loading}
+        className="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white font-semibold py-2 px-4 rounded"
+      >
+        {loading ? 'Getting Quote...' : 'Get Quote'}
+      </button>
+
+      {error && (
+        <div className="mt-3 p-3 bg-red-50 text-red-700 rounded text-sm">
+          {error}
+        </div>
+      )}
+
+      {quote && costBreakdown && (
+        <div className="mt-4 space-y-3">
+          <div className="p-3 bg-gray-50 rounded">
+            <div className="text-sm text-gray-600">You Get ({tokenOutSymbol})</div>
+            <div className="text-xl font-bold">
+              {formatTokenAmount(getQuoteAmount())}
+            </div>
+          </div>
+
+          {/* Total Costs Breakdown */}
+          <div className="p-4 bg-blue-50 rounded-lg space-y-3">
+            <h3 className="font-semibold text-lg text-gray-800">Total Costs Breakdown</h3>
+
+            {/* 1. Gas Cost */}
+            <div className="space-y-1">
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-medium text-gray-700">1. Gas Cost (Network Fee)</span>
+                <span className="text-sm font-bold text-gray-900">
+                  ${costBreakdown.gasCostUSD.toFixed(2)} USD
+                </span>
+              </div>
+            </div>
+
+            {/* 2. Uniswap UX Fee */}
+            <div className="space-y-1">
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-medium text-gray-700">2. Uniswap UX Fee</span>
+                <span className="text-sm font-bold text-gray-900">
+                  {costBreakdown.uniswapFeePercent}%
+                </span>
+              </div>
+              <div className="text-xs text-gray-600 pl-4">
+                ${costBreakdown.uniswapFeeUSD.toFixed(2)} USD
+              </div>
+            </div>
+
+            {/* Total */}
+            <div className="pt-2 border-t border-gray-300">
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-bold text-gray-800">Total Estimated Cost</span>
+                <span className="text-base font-bold text-red-600">
+                  ${costBreakdown.totalCostUSD.toFixed(2)} USD
+                </span>
+              </div>
+            </div>
+
+            {/* Trade Value Reference */}
+            <div className="text-xs text-gray-500 text-center pt-1">
+              Trade Value: ${costBreakdown.tradeValueUSD.toFixed(2)} USD
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}