[wip] adding swap amount conversion to the swam-form

src/components/swap-form.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { ArrowDownUp, ChevronDown } from 'lucide-react';
 import { useAccount } from 'wagmi';
-import { useTokenDetails, useGetPoolsByToken, type TokenDetails } from '@/hooks/usePartyPlanner';
+import { useTokenDetails, useGetPoolsByToken, type TokenDetails, type AvailableToken } from '@/hooks/usePartyPlanner';
+import { useSwapAmounts } from '@/hooks/usePartyPool';
 import { formatUnits } from 'viem';
 
 export function SwapForm() {
@@ -31,13 +32,47 @@ export function SwapForm() {
   // Get available tokens for the selected "from" token
   const { availableTokens } = useGetPoolsByToken(selectedFromToken?.address);
 
+  // Only calculate swap amounts when both tokens are selected
+  // Use useMemo to prevent creating a new array reference on every render
+  const filteredAvailableTokens = useMemo(() => {
+    if (selectedFromToken && selectedToToken && availableTokens) {
+      return availableTokens.filter(token =>
+        token.address.toLowerCase() === selectedToToken.address.toLowerCase()
+      );
+    }
+    return null;
+  }, [selectedFromToken, selectedToToken, availableTokens]);
+
+  // Calculate swap amounts for the selected token pair only
+  const { swapAmounts } = useSwapAmounts(
+    filteredAvailableTokens,
+    fromAmount,
+    selectedFromToken?.decimals || 18
+  );
+
   // Trigger the hook to fetch data when address is available
   useEffect(() => {
     if (tokenDetails) {
-      console.log('Token details loaded in swap-form');
+      // console.log('Token details loaded in swap-form');
     }
   }, [tokenDetails]);
 
+  // Log swap amounts only once when user selects the "to" token
+  useEffect(() => {
+    if (swapAmounts && swapAmounts.length > 0 && selectedFromToken && selectedToToken) {
+      console.log('Swap amounts for', selectedFromToken.symbol, '→', selectedToToken.symbol, ':', swapAmounts);
+    }
+  }, [selectedToToken]); // Only fires when selectedToToken changes
+
+  // Update "You Receive" amount when swap calculation completes
+  useEffect(() => {
+    if (swapAmounts && swapAmounts.length > 0 && selectedToToken) {
+      const swapResult = swapAmounts[0]; // Get the first (and should be only) result
+      const formattedAmount = formatUnits(swapResult.amountOut, selectedToToken.decimals);
+      setToAmount(formattedAmount);
+    }
+  }, [swapAmounts, selectedToToken]);
+
   // Close dropdowns when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -191,7 +226,7 @@ export function SwapForm() {
                     tokenDetails
                       .filter((token) =>
                         availableTokens.some((availToken) =>
-                          availToken.toLowerCase() === token.address.toLowerCase()
+                          availToken.address.toLowerCase() === token.address.toLowerCase()
                         )
                       )
                       .map((token) => (