Adding logic to get token info and remove swap counter that's not needed anymore

src/components/swap-form.tsx

@@ -1,18 +1,51 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, useRef } 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 } from 'lucide-react';
+import { ArrowDownUp, ChevronDown } from 'lucide-react';
 import { useAccount } from 'wagmi';
+import { useTokenDetails, type TokenDetails } from '@/hooks/usePartyPlanner';
+import { formatUnits } from 'viem';
 
 export function SwapForm() {
   const { t } = useTranslation();
-  const { isConnected } = useAccount();
+  const { isConnected, address } = useAccount();
   const [fromAmount, setFromAmount] = useState('');
   const [toAmount, setToAmount] = useState('');
+  const [selectedFromToken, setSelectedFromToken] = useState<TokenDetails | null>(null);
+  const [selectedToToken, setSelectedToToken] = useState<TokenDetails | null>(null);
+  const [isFromDropdownOpen, setIsFromDropdownOpen] = useState(false);
+  const [isToDropdownOpen, setIsToDropdownOpen] = useState(false);
+  const fromDropdownRef = useRef<HTMLDivElement>(null);
+  const toDropdownRef = useRef<HTMLDivElement>(null);
+
+  // Use the custom hook to get all token details with a single batched RPC call
+  const { tokenDetails, loading, error } = useTokenDetails(address);
+
+  // Trigger the hook to fetch data when address is available
+  useEffect(() => {
+    if (tokenDetails) {
+      console.log('Token details loaded in swap-form');
+    }
+  }, [tokenDetails]);
+
+  // Close dropdowns when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (fromDropdownRef.current && !fromDropdownRef.current.contains(event.target as Node)) {
+        setIsFromDropdownOpen(false);
+      }
+      if (toDropdownRef.current && !toDropdownRef.current.contains(event.target as Node)) {
+        setIsToDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
 
   const handleSwap = () => {
     // Swap logic will be implemented later
@@ -35,7 +68,9 @@ export function SwapForm() {
         <div className="space-y-2">
           <div className="flex justify-between text-sm">
             <label className="text-muted-foreground">{t('swap.youPay')}</label>
-            <span className="text-muted-foreground">{t('swap.balance')}: 0.00</span>
+            <span className="text-muted-foreground">
+              {t('swap.balance')}: {selectedFromToken ? formatUnits(selectedFromToken.balance, selectedFromToken.decimals) : '0.00'}
+            </span>
           </div>
           <div className="flex gap-2">
             <Input
@@ -45,9 +80,45 @@ export function SwapForm() {
               onChange={(e) => setFromAmount(e.target.value)}
               className="text-2xl h-16"
             />
-            <Button variant="secondary" className="min-w-[120px]">
-              {t('swap.selectToken')}
-            </Button>
+            <div className="relative min-w-[160px]" ref={fromDropdownRef}>
+              <Button
+                variant="secondary"
+                className="w-full h-16 justify-between"
+                onClick={() => setIsFromDropdownOpen(!isFromDropdownOpen)}
+              >
+                {selectedFromToken ? (
+                  <span className="font-medium">{selectedFromToken.symbol}</span>
+                ) : (
+                  t('swap.selectToken')
+                )}
+                <ChevronDown className="h-4 w-4 ml-2" />
+              </Button>
+              {isFromDropdownOpen && (
+                <div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
+                  {tokenDetails && tokenDetails.length > 0 ? (
+                    tokenDetails.map((token) => (
+                      <button
+                        key={token.address}
+                        className="w-full px-4 py-3 text-left hover:bg-accent focus:bg-accent focus:outline-none flex items-center justify-between"
+                        onClick={() => {
+                          setSelectedFromToken(token);
+                          setIsFromDropdownOpen(false);
+                        }}
+                      >
+                        <span className="font-medium">{token.symbol}</span>
+                        <span className="text-sm text-muted-foreground">
+                          {formatUnits(token.balance, token.decimals)}
+                        </span>
+                      </button>
+                    ))
+                  ) : (
+                    <div className="px-4 py-3 text-sm text-muted-foreground">
+                      {loading ? 'Loading tokens...' : 'No tokens available'}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
         </div>
 
@@ -67,7 +138,9 @@ export function SwapForm() {
         <div className="space-y-2">
           <div className="flex justify-between text-sm">
             <label className="text-muted-foreground">{t('swap.youReceive')}</label>
-            <span className="text-muted-foreground">{t('swap.balance')}: 0.00</span>
+            <span className="text-muted-foreground">
+              {t('swap.balance')}: {selectedToToken ? formatUnits(selectedToToken.balance, selectedToToken.decimals) : '0.00'}
+            </span>
           </div>
           <div className="flex gap-2">
             <Input
@@ -77,9 +150,45 @@ export function SwapForm() {
               onChange={(e) => setToAmount(e.target.value)}
               className="text-2xl h-16"
             />
-            <Button variant="secondary" className="min-w-[120px]">
-              {t('swap.selectToken')}
-            </Button>
+            <div className="relative min-w-[160px]" ref={toDropdownRef}>
+              <Button
+                variant="secondary"
+                className="w-full h-16 justify-between"
+                onClick={() => setIsToDropdownOpen(!isToDropdownOpen)}
+              >
+                {selectedToToken ? (
+                  <span className="font-medium">{selectedToToken.symbol}</span>
+                ) : (
+                  t('swap.selectToken')
+                )}
+                <ChevronDown className="h-4 w-4 ml-2" />
+              </Button>
+              {isToDropdownOpen && (
+                <div className="absolute z-50 w-full mt-2 bg-popover border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
+                  {tokenDetails && tokenDetails.length > 0 ? (
+                    tokenDetails.map((token) => (
+                      <button
+                        key={token.address}
+                        className="w-full px-4 py-3 text-left hover:bg-accent focus:bg-accent focus:outline-none flex items-center justify-between"
+                        onClick={() => {
+                          setSelectedToToken(token);
+                          setIsToDropdownOpen(false);
+                        }}
+                      >
+                        <span className="font-medium">{token.symbol}</span>
+                        <span className="text-sm text-muted-foreground">
+                          {formatUnits(token.balance, token.decimals)}
+                        </span>
+                      </button>
+                    ))
+                  ) : (
+                    <div className="px-4 py-3 text-sm text-muted-foreground">
+                      {loading ? 'Loading tokens...' : 'No tokens available'}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
         </div>