adding token from pool logic and updating ABIs to support new smart contracts

src/components/swap-form.tsx

@@ -7,7 +7,7 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { ArrowDownUp, ChevronDown } from 'lucide-react';
 import { useAccount } from 'wagmi';
-import { useTokenDetails, type TokenDetails } from '@/hooks/usePartyPlanner';
+import { useTokenDetails, useGetPoolsByToken, type TokenDetails } from '@/hooks/usePartyPlanner';
 import { formatUnits } from 'viem';
 
 export function SwapForm() {
@@ -28,6 +28,9 @@ export function SwapForm() {
   // Use the custom hook to get all token details with a single batched RPC call
   const { tokenDetails, loading, error } = useTokenDetails(address);
 
+  // Get available tokens for the selected "from" token
+  const { availableTokens } = useGetPoolsByToken(selectedFromToken?.address);
+
   // Trigger the hook to fetch data when address is available
   useEffect(() => {
     if (tokenDetails) {
@@ -165,12 +168,14 @@ export function SwapForm() {
               value={toAmount}
               onChange={(e) => setToAmount(e.target.value)}
               className="text-2xl h-16"
+              disabled={!selectedFromToken}
             />
             <div className="relative min-w-[160px]" ref={toDropdownRef}>
               <Button
                 variant="secondary"
                 className="w-full h-16 justify-between"
                 onClick={() => setIsToDropdownOpen(!isToDropdownOpen)}
+                disabled={!selectedFromToken}
               >
                 {selectedToToken ? (
                   <span className="font-medium">{selectedToToken.symbol}</span>
@@ -181,25 +186,36 @@ export function SwapForm() {
               </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>
-                    ))
+                  {availableTokens && availableTokens.length > 0 && tokenDetails ? (
+                    // Filter tokenDetails to only show tokens in availableTokens
+                    tokenDetails
+                      .filter((token) =>
+                        availableTokens.some((availToken) =>
+                          availToken.toLowerCase() === token.address.toLowerCase()
+                        )
+                      )
+                      .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>
+                      ))
+                  ) : selectedFromToken ? (
+                    <div className="px-4 py-3 text-sm text-muted-foreground">
+                      {loading ? 'Loading available tokens...' : 'No tokens available for swap'}
+                    </div>
                   ) : (
                     <div className="px-4 py-3 text-sm text-muted-foreground">
-                      {loading ? 'Loading tokens...' : 'No tokens available'}
+                      Select a token in "You Pay" first
                     </div>
                   )}
                 </div>