@xswap-link/sdk 0.9.6 → 0.9.8

package/src/context/SwapProvider.tsx

@@ -13,7 +13,6 @@ import {
   Token,
   TokenOption,
   TokenPrices,
-  Transaction,
   Web3Environment,
 } from "@src/models";
 import {
@@ -27,11 +26,13 @@ import {
   getBalanceOf,
   humanReadableToWei,
   isServer,
+  resolveTokenAddress,
   safeBigNumberFrom,
+  sortChains,
   weiToHumanReadable,
 } from "@src/utils";
 import BigNumberJS from "bignumber.js";
-import { BigNumber, constants, ethers } from "ethers";
+import { BigNumber, constants } from "ethers";
 import {
   createContext,
   Dispatch,
@@ -45,10 +46,14 @@ import {
   useState,
 } from "react";
 import { Config, useAccount } from "wagmi";
-import { useHistory } from "./HistoryProvider";
 import { mapToValidPath } from "@src/utils/validation";
 
 type Tab = "Swap" | "History" | "Settings";
+
+type ChainOption = Chain & {
+  disabled: boolean;
+};
+
 type SwapContext = {
   bridgeUI: boolean;
   integrationConfig: Partial<TxConfigFormPayload>;
@@ -64,6 +69,8 @@ type SwapContext = {
   setSrcChain: Dispatch<SetStateAction<Chain | undefined>>;
   srcChainTokensOptions: TokenOption[];
   srcChainOtherTokensOptions: TokenOption[];
+  srcChainOptions: ChainOption[];
+  dstChainOptions: ChainOption[];
   tokenPrices: TokenPrices;
   srcToken: Token | undefined;
   setSrcToken: Dispatch<SetStateAction<Token | undefined>>;
@@ -85,8 +92,6 @@ type SwapContext = {
   dstValueWei: string;
   dstValueUsd: string | null;
   dstValueMin: string;
-  lastTx: Transaction | undefined;
-  setLastTxHash: Dispatch<SetStateAction<string>>;
   expressDelivery: boolean;
   setExpressDelivery: Dispatch<SetStateAction<boolean>>;
   infiniteApproval: boolean;
@@ -101,6 +106,7 @@ type SwapContext = {
   srcTokenBalanceInfo: string;
   isFetchingRoute: boolean;
   isFetchingBalance: boolean;
+  isFetchingBalances: boolean;
   isExpressDeliveryActive: boolean;
   quoteRoute: () => Promise<void>;
   refreshBalance: () => void;
@@ -146,7 +152,6 @@ const init: SwapContext = {
   dstValueWei: "",
   dstValueUsd: null,
   dstValueMin: "",
-  lastTx: undefined,
   expressDelivery: true,
   infiniteApproval: true,
   slippage: "1.5",
@@ -155,6 +160,7 @@ const init: SwapContext = {
   srcTokenBalanceWei: "",
   srcTokenBalanceInfo: "-",
   isFetchingBalance: false,
+  isFetchingBalances: false,
   isFetchingRoute: false,
   isExpressDeliveryActive: true,
   setTab: functionNotImplemented,
@@ -164,7 +170,6 @@ const init: SwapContext = {
   setSrcToken: functionNotImplemented,
   setDstToken: functionNotImplemented,
   setSrcValue: functionNotImplemented,
-  setLastTxHash: functionNotImplemented,
   setExpressDelivery: functionNotImplemented,
   setInfiniteApproval: functionNotImplemented,
   setSlippage: functionNotImplemented,
@@ -176,6 +181,8 @@ const init: SwapContext = {
   bridgeTokensDictionary: null,
   onConnectWallet: functionNotImplemented,
   hasOnConnectWalletCallback: false,
+  srcChainOptions: [],
+  dstChainOptions: [],
 };
 
 const swapContext = createContext(init);
@@ -194,61 +201,47 @@ export const SwapProvider = ({
   wagmiConfig,
   overlay,
 }: Props) => {
+  // =============================================================================
+  // Hooks
+  // =============================================================================
   const { address, chainId: walletChainId } = useAccount();
+
+  // =============================================================================
+  // State
+  // =============================================================================
+  const [isInitialStateSet, setIsInitialStateSet] = useState(false);
+  // Settings
   const [tab, setTab] = useState(init.tab);
   const [error, setError] = useState(init.error);
   const [expressDelivery, setExpressDelivery] = useState(init.expressDelivery);
+  const [slippage, setSlippage] = useState(init.slippage);
   const [infiniteApproval, setInfiniteApproval] = useState(
     init.infiniteApproval,
   );
-  const srcTokenLocked = useMemo(
-    () => !!integrationConfig?.srcTokenLocked,
-    [integrationConfig?.srcTokenLocked],
-  );
-  const dstTokenLocked = useMemo(
-    () => !!integrationConfig?.dstTokenLocked,
-    [integrationConfig?.dstTokenLocked],
-  );
-  const srcChainLocked = useMemo(
-    () => !!integrationConfig?.srcChainLocked,
-    [integrationConfig?.srcChainLocked],
-  );
-  const dstChainLocked = useMemo(
-    () => !!integrationConfig?.dstChainLocked,
-    [integrationConfig?.dstChainLocked],
-  );
-
-  const bridgeUI = useMemo(
-    () => !!integrationConfig.bridge,
-    [integrationConfig.bridge],
-  );
-
-  const [slippage, setSlippage] = useState(init.slippage);
+  // Chains
   const [srcChain, setSrcChain] = useState(init.srcChain);
   const [dstChain, setDstChain] = useState(init.dstChain);
   const [feeToken, setFeeToken] = useState(init.feeToken);
+  // Tokens
   const [srcToken, setSrcToken] = useState(init.srcToken);
   const [dstToken, setDstToken] = useState(init.dstToken);
+  const [tokenPrices, setTokenPrices] = useState(init.tokenPrices);
+  const [tokenBalances, setTokenBalances] = useState<
+    Record<string, Record<string, string>>
+  >({});
+  const [bridgeTokens, setBridgeTokens] = useState<BridgeToken[]>([]);
+  // Values
   const [srcValue, setSrcValue] = useState(init.srcValue);
-
-  const [isFetchingBalance, setIsFetchingBalance] = useState(
-    init.isFetchingBalance,
-  );
   const [srcTokenBalanceWei, setSrcTokenBalanceWei] = useState(
     init.srcTokenBalanceWei,
   );
-  const [isFetchingRoute, setFetchingRoute] = useState(init.isFetchingRoute);
-  const [route, setRoute] = useState(init.route);
-
-  const [lastTxHash, setLastTxHash] = useState("");
-
+  // Chains and Token options for pickers
   const [srcChainTokensOptions, setSrcChainTokensOptions] = useState(
     init.srcChainTokensOptions,
   );
   const [dstChainTokensOptions, setDstChainTokensOptions] = useState(
     init.dstChainTokensOptions,
   );
-  const [tokenPrices, setTokenPrices] = useState(init.tokenPrices);
   const [srcChainOtherTokensOptions, setSrcChainOtherTokensOptions] = useState(
     init.srcChainOtherTokensOptions,
   );
@@ -256,24 +249,62 @@ export const SwapProvider = ({
     init.dstChainOtherTokensOptions,
   );
 
+  const [srcChainOptions, setSrcChainOptions] = useState<ChainOption[]>([]);
+  const [dstChainOptions, setDstChainOptions] = useState<ChainOption[]>([]);
+  // Loaders
+  const [isFetchingBalance, setIsFetchingBalance] = useState(
+    init.isFetchingBalance,
+  );
+  const [isFetchingBalances, setIsFetchingBalances] = useState(
+    init.isFetchingBalances,
+  );
+  const [isFetchingRoute, setFetchingRoute] = useState(init.isFetchingRoute);
+  // Route and tx data
+  const [route, setRoute] = useState(init.route);
+
+  // =============================================================================
+  // Refs
+  // =============================================================================
+
   const routeAbortController = useRef<AbortController | null>(null);
   const refreshSelectedTokenBalanceNonce = useRef(crypto.randomUUID());
 
-  const { history } = useHistory();
+  // =============================================================================
+  // Memoized Values
+  // =============================================================================
 
-  const [tokenBalances, setTokenBalances] = useState<
-    Record<string, Record<string, string>>
-  >({});
+  // useMemo: determines if the source token is locked based on integration config.
+  const srcTokenLocked = useMemo(
+    () => !!integrationConfig?.srcTokenLocked,
+    [integrationConfig?.srcTokenLocked],
+  );
+  // useMemo: determines if the destination token is locked based on integration config.
+  const dstTokenLocked = useMemo(
+    () => !!integrationConfig?.dstTokenLocked,
+    [integrationConfig?.dstTokenLocked],
+  );
+  // useMemo: determines if the destination chain is locked from integration config.
+  const dstChainLocked = useMemo(
+    () => !!integrationConfig?.dstChainLocked,
+    [integrationConfig?.dstChainLocked],
+  );
+  // useMemo: determines if the source chain is locked from integration config.
+  const srcChainLocked = useMemo(
+    () => !!integrationConfig?.srcChainLocked,
+    [integrationConfig?.srcChainLocked],
+  );
+  // useMemo: sets a flag to indicate if the bridge UI is enabled based on integration config.
+  const bridgeUI = useMemo(
+    () => !!integrationConfig.bridge,
+    [integrationConfig.bridge],
+  );
 
-  useEffect(() => {
-    if (supportedChains.length > 0) {
-      const chainIds = supportedChains.map((chain) => chain.chainId);
-      getPrices({ chainId: chainIds }).then((prices) => {
-        setTokenPrices(prices);
-      });
-    }
-  }, [supportedChains]);
+  // useMemo: determines if a wallet connection callback exists.
+  const hasOnConnectWalletCallback = useMemo(() => {
+    return !!(integrationConfig.onConnectWallet || window.xPayOnConnectWallet);
+  }, [integrationConfig.onConnectWallet]);
 
+  // useMemo: merges supported chain tokens with custom tokens from localStorage.
   const supportedTokens: Record<string, Record<string, Token>> = useMemo(() => {
     const customTokens = !isServer
       ? JSON.parse(localStorage.getItem("custom-tokens") || "{}")
@@ -287,14 +318,14 @@ export const SwapProvider = ({
     supportedChains.forEach((chain) => {
       chainIdToTokenAddressToData[chain.chainId] = {};
       chain.tokens.forEach((token) => {
-        // @ts-expect-error TODO
-        chainIdToTokenAddressToData[chain.chainId][token.address] = token;
+        chainIdToTokenAddressToData[chain.chainId]![token.address] = token;
       });
     });
     return deepMergeObjects(chainIdToTokenAddressToData, customTokens);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [supportedChains]);
 
+  // useMemo: creates a mapping from each chain ID to available token options sorted by token priority.
   const chainToTokenOptionsMap = useMemo(() => {
     const tempChainToTokenOptionsMap: Record<string, TokenOption[]> = {};
     Object.entries(supportedTokens).forEach(([chainId, chainData]) => {
@@ -313,108 +344,43 @@ export const SwapProvider = ({
     return tempChainToTokenOptionsMap;
   }, [supportedTokens]);
 
-  const [bridgeTokens, setBridgeTokens] = useState<BridgeToken[]>([]);
-  useEffect(() => {
-    (async () => {
-      const data = await getBridgeTokens();
-      setBridgeTokens(data);
-    })();
-  }, []);
-
+  // useMemo: constructs a dictionary mapping tokens across chains for bridging based on bridgeTokens data.
   const bridgeTokensDictionary = useMemo(() => {
-    const result: BridgeTokensDictionary = {};
-
-    for (const dict of bridgeTokens) {
-      const [chainId0, address0] = Object.entries(dict)[0]!;
-      const [chainId1, address1] = Object.entries(dict)[1]!;
-      if (!result[chainId0]) {
-        result[chainId0] = {};
-      }
-      if (!result[chainId0][address0]) {
-        result[chainId0][address0] = {};
+    // If there are no bridge tokens, return null directly.
+    if (!bridgeTokens || bridgeTokens.length === 0) return null;
+
+    const dictionary: BridgeTokensDictionary = {};
+    // Helper to add a mapping from one token to its counterpart.
+    const addMapping = (
+      chainIdFrom: string,
+      tokenAddressFrom: string,
+      chainIdTo: string,
+      tokenAddressTo: string,
+    ) => {
+      if (!dictionary[chainIdFrom]) {
+        dictionary[chainIdFrom] = {};
       }
-      result[chainId0][address0][chainId1] = address1;
-      if (!result[chainId1]) {
-        result[chainId1] = {};
+      if (!dictionary[chainIdFrom][tokenAddressFrom]) {
+        dictionary[chainIdFrom][tokenAddressFrom] = {};
       }
-      if (!result[chainId1][address1]) {
-        result[chainId1][address1] = {};
+      dictionary[chainIdFrom][tokenAddressFrom][chainIdTo] = tokenAddressTo;
+    };
+    // Process each token pair from bridgeTokens.
+    for (const tokenPair of bridgeTokens) {
+      const entries = Object.entries(tokenPair);
+      if (entries.length !== 2) {
+        // Skip invalid token pairs.
+        continue;
       }
-      result[chainId1][address1][chainId0] = address0;
-    }
+      const [chainId0, address0] = entries[0]!;
+      const [chainId1, address1] = entries[1]!;
 
-    if (Object.keys(result).length) {
-      return result;
+      addMapping(chainId0, address0, chainId1, address1);
+      addMapping(chainId1, address1, chainId0, address0);
     }
-
-    return null;
+    return Object.keys(dictionary).length > 0 ? dictionary : null;
   }, [bridgeTokens]);
-
-  const getTokenOptions = useCallback(
-    (chainId: string | undefined) => {
-      if (!chainId) {
-        return [];
-      }
-
-      if (bridgeTokensDictionary && bridgeUI) {
-        if (!chainToTokenOptionsMap[chainId]) {
-          return [];
-        }
-
-        return chainToTokenOptionsMap[chainId].filter((tokenData) => {
-          const supportedTokensAddresses = Object.keys(
-            bridgeTokensDictionary[chainId] || {},
-          );
-
-          return supportedTokensAddresses.includes(tokenData.address);
-        });
-      }
-
-      return chainToTokenOptionsMap[chainId] || [];
-    },
-    [bridgeTokensDictionary, bridgeUI, chainToTokenOptionsMap],
-  );
-
-  const srcTokenBalanceInfo = useMemo(() => {
-    if (!srcToken || !srcTokenBalanceWei || !address) {
-      return "";
-    }
-
-    if (safeBigNumberFrom(srcTokenBalanceWei).eq(0)) {
-      return "0";
-    }
-
-    const fullHumanReadableBalance = weiToHumanReadable({
-      amount: srcTokenBalanceWei,
-      decimals: srcToken.decimals,
-      precisionFractionalPlaces: srcToken.decimals,
-    });
-
-    if (new BigNumberJS(fullHumanReadableBalance).lt("0.00001")) {
-      return "<0.00001";
-    }
-
-    // Shortened to cut non-significant decimals
-    return weiToHumanReadable({
-      amount: srcTokenBalanceWei,
-      decimals: srcToken.decimals,
-      precisionFractionalPlaces: 5,
-    });
-  }, [srcToken, srcTokenBalanceWei]);
-
-  const lastTx = useMemo(() => {
-    return history?.find(({ hash }) => hash === lastTxHash);
-  }, [history, lastTxHash]);
-
-  const srcValueWei = useMemo(
-    () =>
-      humanReadableToWei({
-        amount: srcValue,
-        decimals: srcToken?.decimals || 18,
-      }),
-    [srcToken?.decimals, srcValue],
-  );
-
+  // useMemo: calculates the USD value for the source token amount using the current token prices.
   const srcValueUsd = useMemo(() => {
     if (
       srcToken &&
@@ -430,6 +396,16 @@ export const SwapProvider = ({
     }
     return null;
   }, [tokenPrices, srcToken, srcValue, srcChain]);
+  // useMemo: converts the source token value from human-readable format to Wei.
+  const srcValueWei = useMemo(
+    () =>
+      humanReadableToWei({
+        amount: srcValue,
+        decimals: srcToken?.decimals || 18,
+      }),
+    [srcToken?.decimals, srcValue],
+  );
+  // useMemo: converts the estimated output amount from the route to a human-readable destination token value.
   const dstValue = useMemo(
     () =>
       weiToHumanReadable({
@@ -440,6 +416,7 @@ export const SwapProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [route],
   );
+  // useMemo: converts the human-readable destination value back to Wei using the destination token's decimals.
   const dstValueWei = useMemo(
     () =>
       humanReadableToWei({
@@ -448,6 +425,7 @@ export const SwapProvider = ({
       }),
     [dstToken?.decimals, dstValue],
   );
+  // useMemo: calculates the USD value for the destination token amount using the token prices.
   const dstValueUsd = useMemo(() => {
     if (
       dstToken &&
@@ -463,6 +441,7 @@ export const SwapProvider = ({
     }
     return null;
   }, [tokenPrices, dstToken, dstValue, dstChain]);
+  // useMemo: computes the minimum destination token value in human-readable format from route data.
   const dstValueMin = useMemo(
     () =>
       weiToHumanReadable({
@@ -473,7 +452,7 @@ export const SwapProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [route],
   );
-
+  // useMemo: checks if express delivery is enabled and if the route includes a non-zero express delivery fee.
   const isExpressDeliveryActive = useMemo(
     () =>
       expressDelivery &&
@@ -481,12 +460,72 @@ export const SwapProvider = ({
       BigNumber.from(route.xSwapFees?.expressDeliveryFee || "0").gt("0"),
     [expressDelivery, route],
   );
-
+  // useMemo: indicates whether asynchronous data is loaded based on the presence of supported chains.
   const isAsyncDataLoaded = useMemo(
-    () => supportedChains.length > 0,
-    [supportedChains],
+    () => supportedChains.length > 0 && bridgeTokens.length > 0,
+    [supportedChains, bridgeTokens],
   );
+  // useMemo: computes a formatted balance string for the source token based on its balance in Wei.
+  const srcTokenBalanceInfo = useMemo(() => {
+    if (!srcToken || !srcTokenBalanceWei || !address) {
+      return "";
+    }
+
+    if (safeBigNumberFrom(srcTokenBalanceWei).eq(0)) {
+      return "0";
+    }
+
+    const fullHumanReadableBalance = weiToHumanReadable({
+      amount: srcTokenBalanceWei,
+      decimals: srcToken.decimals,
+      precisionFractionalPlaces: srcToken.decimals,
+    });
+
+    if (new BigNumberJS(fullHumanReadableBalance).lt("0.00001")) {
+      return "<0.00001";
+    }
 
+    // Shortened to cut non-significant decimals
+    return weiToHumanReadable({
+      amount: srcTokenBalanceWei,
+      decimals: srcToken.decimals,
+      precisionFractionalPlaces: 5,
+    });
+  }, [srcToken, srcTokenBalanceWei]);
+
+  // =============================================================================
+  // Callbacks
+  // =============================================================================
+
+  // returns available token options for a given chain, filtering by bridge support if bridge UI is enabled.
+  // NOTE: This function does not handle any of the filtering
+  const getTokenOptions = useCallback(
+    (chainId: string | undefined) => {
+      if (!chainId) {
+        return [];
+      }
+
+      // swap
+      if (!bridgeUI) {
+        return chainToTokenOptionsMap[chainId] || [];
+      }
+
+      // bridge
+      if (!chainToTokenOptionsMap[chainId] || !bridgeTokensDictionary) {
+        return [];
+      }
+
+      const supportedTokensAddresses = Object.keys(
+        bridgeTokensDictionary[chainId] || {},
+      );
+
+      return chainToTokenOptionsMap[chainId].filter((tokenData) =>
+        supportedTokensAddresses.includes(tokenData.address),
+      );
+    },
+    [bridgeTokensDictionary, bridgeUI, chainToTokenOptionsMap],
+  );
+  // fetches and sets the route quote using the current input parameters, aborting any previous request.
   const quoteRoute = useCallback(async () => {
     if (
       !srcChain ||
@@ -550,59 +589,139 @@ export const SwapProvider = ({
     srcToken,
     srcValueWei,
   ]);
+  // refreshes and updates the balance of the source token using its RPC URL.
+  const refreshBalance = useCallback(async () => {
+    if (
+      !address ||
+      !srcChain?.publicRpcUrls[0] ||
+      !srcToken ||
+      !srcToken?.address
+    ) {
+      return;
+    }
+
+    const nonce = crypto.randomUUID();
+    refreshSelectedTokenBalanceNonce.current = nonce;
+
+    setIsFetchingBalance(true);
+
+    const balance = await getBalanceOf(
+      address,
+      srcToken.address,
+      srcChain?.publicRpcUrls[0],
+    );
 
+    if (nonce !== refreshSelectedTokenBalanceNonce.current) {
+      return;
+    }
+
+    setSrcTokenBalanceWei(
+      humanReadableToWei({
+        amount: balance,
+        decimals: srcToken.decimals,
+      }),
+    );
+
+    setIsFetchingBalance(false);
+  }, [address, srcChain, srcToken]);
+  // retrieves token details for a given token address and chain from supported tokens mapping. (including imported tokens)
+  const findTokenDataByAddressAndChain = useCallback(
+    (tokenAddress: string, chainId: string): Token | undefined => {
+      return supportedTokens[chainId]?.[tokenAddress];
+    },
+    [supportedTokens],
+  );
+  // triggers the wallet connection process.
+  const onConnectWallet = useCallback(() => {
+    if (integrationConfig.onConnectWallet) {
+      integrationConfig.onConnectWallet();
+    } else if (window.xPayOnConnectWallet) {
+      window.xPayOnConnectWallet();
+    }
+  }, [integrationConfig]);
+
+  // =============================================================================
+  // Effects
+  // =============================================================================
+
+  // fetches token prices for supported chains once they are loaded.
+  useEffect(() => {
+    if (supportedChains.length > 0) {
+      const chainIds = supportedChains.map((chain) => chain.chainId);
+      getPrices({ chainId: chainIds }).then((prices) => {
+        setTokenPrices(prices);
+      });
+    }
+  }, [supportedChains]);
+  // fetches and sets bridge tokens on component mount.
+  useEffect(() => {
+    (async () => {
+      const data = await getBridgeTokens();
+      setBridgeTokens(data);
+    })();
+  }, []);
+  // recalculates the route quote when its dependency changes.
   useEffect(() => {
     quoteRoute();
   }, [quoteRoute]);
-
+  // calls refreshBalance to update source token balance on mount or when refreshBalance changes.
+  useEffect(() => {
+    refreshBalance();
+  }, [refreshBalance]);
+  // fetches user all token balances when a wallet address is available and supported chains are loaded.
   useEffect(() => {
     if (address && supportedChains.length > 0) {
+      setIsFetchingBalances(true);
       getBalances({ walletAddress: address }).then((balances) => {
         setTokenBalances(balances);
+        setIsFetchingBalances(false);
       });
     }
   }, [address, supportedChains.length]);
+  // sets the fee token from the source chain's tokens by selecting the native token (AddressZero).
+  useEffect(() => {
+    setFeeToken(
+      srcChain?.tokens.find(
+        ({ address }) =>
+          address.toLowerCase() === constants.AddressZero.toLowerCase(),
+      ),
+    );
+  }, [srcChain]);
 
+  // =============================================================================
+  // useEffects responsible for providing token and chain options
+  // =============================================================================
+
+  // updates token options for source and destination chains and other networks, incorporating balance info.
   useEffect(() => {
     (async () => {
-      // source chain
+      const isSingleChainSelected = dstChain?.chainId === srcChain?.chainId;
+      // source chain options
       const srcTokenOptions: TokenOption[] = getTokenOptions(
         srcChain?.chainId,
       ).filter(({ symbol }) =>
-        dstChain?.chainId === srcChain?.chainId
-          ? symbol !== dstToken?.symbol
-          : true,
+        isSingleChainSelected ? symbol !== dstToken?.symbol : true,
       );
       setSrcChainTokensOptions(srcTokenOptions);
-
-      // destination chain
+      // destination chain options
       const dstTokenOptions: TokenOption[] = getTokenOptions(
         dstChain?.chainId,
       ).filter(({ symbol }) =>
-        dstChain?.chainId === srcChain?.chainId
-          ? symbol !== srcToken?.symbol
-          : true,
+        isSingleChainSelected ? symbol !== srcToken?.symbol : true,
       );
       setDstChainTokensOptions(dstTokenOptions);
-
-      // other source networks
+      // token options from other source networks
       const srcOtherTokenOptions: TokenOption[] = [];
       const srcOtherChains = supportedChains.filter(
-        ({ chainId, web3Environment, swapSupported, bridgeSupported }) => {
-          if (
-            chainId === srcChain?.chainId ||
-            web3Environment !== Web3Environment.MAINNET
-          ) {
-            return false;
-          }
-
-          if (bridgeUI) {
-            return bridgeSupported;
-          } else {
-            return swapSupported;
-          }
-        },
+        ({ chainId, web3Environment, swapSupported, bridgeSupported }) =>
+          // same chain
+          chainId !== srcChain?.chainId &&
+          // not mainnet
+          web3Environment === Web3Environment.MAINNET &&
+          // bridgeUI and supported for bridge or !bridgeUI and supported for swap
+          ((bridgeUI && bridgeSupported) || (!bridgeUI && swapSupported)),
       );
+      // create token options from other source networks and filter out the destination token
       for (const { chainId } of srcOtherChains) {
         srcOtherTokenOptions.push(
           ...getTokenOptions(chainId).filter(({ symbol }) =>
@@ -611,15 +730,22 @@ export const SwapProvider = ({
         );
       }
       setSrcChainOtherTokensOptions(srcOtherTokenOptions);
-
-      // other destination networks
+      // token options from other destination networks
       const dstOtherTokenOptions: TokenOption[] = [];
       const dstOtherChains = supportedChains.filter(
-        ({ chainId, web3Environment, swapSupported }) =>
+        ({ chainId, web3Environment, swapSupported, bridgeSupported }) =>
           chainId !== dstChain?.chainId &&
+          // not mainnet
           web3Environment === Web3Environment.MAINNET &&
-          swapSupported,
+          // bridgeUI and supported for bridge as destination or !bridgeUI and supported for swap as destination
+          ((bridgeUI &&
+            bridgeSupported &&
+            srcChain?.supportedDstForBridge?.includes(chainId)) ||
+            (!bridgeUI &&
+              swapSupported &&
+              srcChain?.supportedDstForSwap?.includes(chainId))),
       );
+      // create token options from other destination networks and filter out the source token
       for (const { chainId } of dstOtherChains) {
         dstOtherTokenOptions.push(
           ...getTokenOptions(chainId).filter(({ symbol }) =>
@@ -628,7 +754,7 @@ export const SwapProvider = ({
         );
       }
       setDstChainOtherTokensOptions(dstOtherTokenOptions);
-
+      // add balances to the token options
       const addBalances = (tokenOptions: TokenOption[]) => {
         return tokenOptions.map((token) => ({
           ...token,
@@ -637,7 +763,6 @@ export const SwapProvider = ({
           ),
         }));
       };
-
       setSrcChainTokensOptions(addBalances(srcTokenOptions));
       setDstChainTokensOptions(addBalances(dstTokenOptions));
       setSrcChainOtherTokensOptions(addBalances(srcOtherTokenOptions));
@@ -654,68 +779,108 @@ export const SwapProvider = ({
     tokenBalances,
   ]);
 
-  const refreshBalance = useCallback(async () => {
-    if (!address || !srcChain?.publicRpcUrls[0] || !srcToken) {
-      return;
-    }
-
-    const nonce = crypto.randomUUID();
-    refreshSelectedTokenBalanceNonce.current = nonce;
+  // updates the source and destination chain options based on network support and bridge configurations.
+  useEffect(() => {
+    const baseChains = supportedChains.filter(
+      ({ web3Environment, swapSupported, bridgeSupported }) =>
+        web3Environment === Web3Environment.MAINNET &&
+        ((bridgeUI && bridgeSupported) || (!bridgeUI && swapSupported)),
+    );
+    // Determine disabled source chains for bridge UI. For swap, the source chains are all the supported chains.
+    let sourceChainsDisabled: string[] = [];
+    // If we block any bridge source chain, we need to have dstChain and dstToken selected, otherwise we allow to pick any source chain.
+    if (bridgeUI && dstChain && dstToken && bridgeTokensDictionary) {
+      // Find chains that have tokens available for the selected destination chain
+      const chainsWithTokensForDestination = baseChains.filter(
+        ({ chainId }) => {
+          const bridgeTokens = bridgeTokensDictionary[chainId] || {};
+          return Object.values(bridgeTokens).some(
+            (targetChains) => targetChains[dstChain.chainId],
+          );
+        },
+      );
 
-    setIsFetchingBalance(true);
+      // Disable chains that don't have tokens available for the destination
+      sourceChainsDisabled = baseChains
+        .filter(
+          (chain) =>
+            !chainsWithTokensForDestination.some(
+              (availableChain) => availableChain.chainId === chain.chainId,
+            ),
+        )
+        .map((chain) => chain.chainId);
+    }
 
-    const balance = await getBalanceOf(
-      address,
-      srcToken.address,
-      srcChain?.publicRpcUrls[0],
-    );
+    // Determine disabled destination chains.
+    const destinationChainsDisabled = new Set<string>();
 
-    if (nonce !== refreshSelectedTokenBalanceNonce.current) {
-      return;
+    // If there is a source chain, we need to disable the destination chains that are not supported for the source chain.
+    if (srcChain) {
+      baseChains
+        .filter((chain) =>
+          bridgeUI
+            ? !srcChain.supportedDstForBridge?.includes(chain.chainId)
+            : !srcChain.supportedDstForSwap?.includes(chain.chainId),
+        )
+        .forEach((chain) => destinationChainsDisabled.add(chain.chainId));
     }
 
-    setSrcTokenBalanceWei(
-      humanReadableToWei({
-        amount: balance,
-        decimals: srcToken.decimals,
-      }),
-    );
+    // If there is no source token, we need to disable the chains without any supported tokens.
+    if (bridgeUI && srcChain && bridgeTokensDictionary && !srcToken) {
+      const srcChainTokens = bridgeTokensDictionary[srcChain.chainId];
+      if (!srcChainTokens) {
+        // If source chain has no bridge tokens, disable all destination chains
 
-    setIsFetchingBalance(false);
-  }, [address, srcChain, srcToken]);
+        baseChains.forEach((chain) =>
+          destinationChainsDisabled.add(chain.chainId),
+        );
+      } else {
+        // Disable chains that have no tokens available from the source chain
+        baseChains
+          .filter((chain) => {
+            // Check if any token on source chain can bridge to this destination chain
+            return !Object.values(srcChainTokens).some(
+              (targetChains) => targetChains[chain.chainId],
+            );
+          })
+          .forEach((chain) => destinationChainsDisabled.add(chain.chainId));
+      }
+    }
 
-  const findTokenDataByAddressAndChain = useCallback(
-    (tokenAddress: string, chainId: string): Token | undefined => {
-      return supportedTokens[chainId]?.[tokenAddress];
-    },
-    [supportedTokens],
-  );
+    // If there is a source token, we need to disable the chains that don't have tokens available for the source token.
+    if (bridgeUI && srcChain && bridgeTokensDictionary && srcToken) {
+      const availableChains =
+        bridgeTokensDictionary[srcChain.chainId]?.[srcToken.address];
+      baseChains
 
-  useEffect(() => {
-    refreshBalance();
-  }, [refreshBalance]);
+        .filter((chain) => !availableChains?.[chain.chainId])
+        .forEach((chain) => destinationChainsDisabled.add(chain.chainId));
+    }
 
-  useEffect(() => {
-    setFeeToken(
-      srcChain?.tokens.find(
-        ({ address }) =>
-          address.toLowerCase() === constants.AddressZero.toLowerCase(),
-      ),
-    );
-  }, [srcChain]);
+    setSrcChainOptions(sortChains(baseChains, sourceChainsDisabled));
+    setDstChainOptions(sortChains(baseChains, [...destinationChainsDisabled]));
+  }, [
+    supportedChains,
+    bridgeUI,
+    srcChain,
+    srcToken,
+    dstChain,
+    dstToken,
+    bridgeTokensDictionary,
+  ]);
 
-  // Add new state to track initial setup
-  const [isInitialStateSet, setIsInitialStateSet] = useState(false);
+  // =============================================================================
+  // useEffects responsible for state updates and validations
+  // =============================================================================
 
+  // sets the initial source chain based on the wallet's chain ID if not already initialized.
   useEffect(() => {
-    // apply wallet chain only after initial state is set
     if (!walletChainId || !isInitialStateSet || integrationConfig?.srcChainId) {
       return;
     }
     const initSrcChain = supportedChains.find(
       ({ chainId }) => chainId === `${walletChainId}`,
     );
-
     if (initSrcChain) {
       setSrcChain(initSrcChain);
     }
@@ -726,10 +891,12 @@ export const SwapProvider = ({
     integrationConfig?.srcChainId,
   ]);
 
+  // resets source and destination tokens and chains when bridgeUI changes and initial state is not yet set.
   useEffect(() => {
-    if (isInitialStateSet) {
+    if (!isInitialStateSet) {
       return;
     }
+
     setSrcToken(undefined);
     setDstToken(undefined);
     setSrcChain(undefined);
@@ -738,9 +905,8 @@ export const SwapProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bridgeUI]);
 
+  // This useEffect runs just once in full. It initializes source and destination chains and tokens based on integration config, wallet, and default values, then marks initial state as set.
   useEffect(() => {
-    // Skip if initial state was already set or wait if supported chains are not loaded yet
-
     if (
       isInitialStateSet ||
       !supportedChains ||
@@ -750,70 +916,54 @@ export const SwapProvider = ({
       return;
     }
 
-    let srcTokenAddress = integrationConfig.srcTokenAddr;
-    let dstTokenAddress = integrationConfig.dstTokenAddr;
-    // is it a valid eth address? if not try to find it by symbol / tokenId
-    if (srcTokenAddress && !ethers.utils.isAddress(srcTokenAddress)) {
-      srcTokenAddress = supportedChains
-        .find((chain) => chain.chainId === integrationConfig?.srcChainId)
-        ?.tokens.find(
-          (token) => token.tokenId === integrationConfig?.srcTokenAddr,
-        )
-        ?.address?.toLowerCase();
-    }
-
-    if (dstTokenAddress && !ethers.utils.isAddress(dstTokenAddress)) {
-      dstTokenAddress = supportedChains
-        .find((chain) => chain.chainId === integrationConfig?.dstChainId)
-        ?.tokens.find(
-          (token) => token.tokenId === integrationConfig?.dstTokenAddr,
-        )
-        ?.address?.toLowerCase();
-    }
-
-    const searchedChainId =
-      // currently set chain
+    // find chains
+    const searchedSrcChainId =
       srcChain ||
-      // chain set by the integrator
       integrationConfig?.srcChainId ||
-      // wallet chain
       (walletChainId ? `${walletChainId}` : undefined) ||
-      // default chain
       (bridgeUI ? undefined : DEFAULT_SOURCE_CHAIN_ID);
 
     const initSrcChain = supportedChains.find(
-      ({ chainId }) => chainId === searchedChainId,
+      ({ chainId }) => chainId === searchedSrcChainId,
     );
 
+    const searchedDstChainId =
+      dstChain ||
+      integrationConfig?.dstChainId ||
+      (bridgeUI ? undefined : DEFAULT_DESTINATION_CHAIN_ID);
+
+    const initDstChain = supportedChains.find(
+      ({ chainId }) => chainId === searchedDstChainId,
+    );
+
+    // find tokens
+    let initDstToken: Token | undefined;
     let initSrcToken: Token | undefined;
+
+    const srcTokenAddress = resolveTokenAddress(
+      integrationConfig.srcTokenAddr,
+      integrationConfig?.srcChainId,
+      supportedChains,
+    );
+    const dstTokenAddress = resolveTokenAddress(
+      integrationConfig.dstTokenAddr,
+      integrationConfig?.dstChainId,
+      supportedChains,
+    );
+
     if (initSrcChain) {
       initSrcToken = initSrcChain.tokens.find(
         ({ address }) =>
           address.toLowerCase() === srcTokenAddress?.toLowerCase(),
       );
     }
-
-    let initDstChain: Chain | undefined = bridgeUI
-      ? undefined
-      : supportedChains.find(
-          ({ chainId }) => chainId === DEFAULT_DESTINATION_CHAIN_ID,
-        );
-
-    // if integrator set it, use it
-    if (integrationConfig.dstChainId) {
-      initDstChain = supportedChains.find(
-        ({ chainId }) => chainId === integrationConfig.dstChainId,
-      );
-    }
-
-    let initDstToken: Token | undefined;
     if (initDstChain) {
       initDstToken = initDstChain.tokens.find(
         ({ address }) => address.toLowerCase() === dstTokenAddress,
       );
     }
 
-    // the values here should not be from state but from the code above
+    // validate the initial state
     const { source, target } = mapToValidPath({
       source: { chain: initSrcChain, token: initSrcToken },
       target: { chain: initDstChain, token: initDstToken },
@@ -821,7 +971,6 @@ export const SwapProvider = ({
       supportedChains,
       bridgeTokensDictionary,
     });
-
     setSrcChain(source.chain);
     setDstChain(target.chain);
     setSrcToken(source.token);
@@ -840,7 +989,7 @@ export const SwapProvider = ({
     isInitialStateSet,
     bridgeTokensDictionary,
   ]);
-
+  // syncs current chain and token selections with the valid path computed from current state.
   useEffect(() => {
     if (
       !bridgeTokensDictionary ||
@@ -857,20 +1006,23 @@ export const SwapProvider = ({
       supportedChains,
       bridgeTokensDictionary,
     });
-
     if (source.chain?.chainId !== srcChain?.chainId) {
       setSrcChain(source.chain);
     }
-
     if (target.chain?.chainId !== dstChain?.chainId) {
       setDstChain(target.chain);
     }
-
-    if (source.token?.address !== srcToken?.address) {
+    if (
+      source.token?.address !== srcToken?.address ||
+      source.token?.name !== srcToken?.name
+    ) {
       setSrcToken(source.token);
     }
 
-    if (target.token?.address !== dstToken?.address) {
+    if (
+      target.token?.address !== dstToken?.address ||
+      target.token?.name !== dstToken?.name
+    ) {
       setDstToken(target.token);
     }
   }, [
@@ -881,9 +1033,13 @@ export const SwapProvider = ({
     bridgeUI,
     supportedChains,
     bridgeTokensDictionary,
+    isInitialStateSet,
   ]);
-
+  // notifies integration or global callback when the destination chain changes.
   useEffect(() => {
+    if (!isInitialStateSet) {
+      return;
+    }
     if (integrationConfig.onDstChainChange) {
       integrationConfig.onDstChainChange(dstChain?.chainId);
     } else if (window.xPayOnDstChainChange) {
@@ -891,8 +1047,11 @@ export const SwapProvider = ({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [integrationConfig.onDstChainChange, dstChain]);
-
+  // notifies integration or global callback when the destination token changes.
   useEffect(() => {
+    if (!isInitialStateSet) {
+      return;
+    }
     const token = dstToken
       ? { address: dstToken.address.toLowerCase(), symbol: dstToken.tokenId }
       : undefined;
@@ -904,8 +1063,11 @@ export const SwapProvider = ({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [integrationConfig.onDstTokenChange, dstToken]);
-
+  // notifies integration or global callback when the source chain changes.
   useEffect(() => {
+    if (!isInitialStateSet) {
+      return;
+    }
     if (integrationConfig.onSrcChainChange) {
       integrationConfig.onSrcChainChange(srcChain?.chainId);
     } else if (window.xPayOnSrcChainChange) {
@@ -913,8 +1075,11 @@ export const SwapProvider = ({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [integrationConfig.onSrcChainChange, srcChain]);
-
+  // notifies integration or global callback when the source token changes.
   useEffect(() => {
+    if (!isInitialStateSet) {
+      return;
+    }
     const token = srcToken
       ? { address: srcToken.address.toLowerCase(), symbol: srcToken.tokenId }
       : undefined;
@@ -927,18 +1092,6 @@ export const SwapProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [integrationConfig.onSrcTokenChange, srcToken]);
 
-  const onConnectWallet = useCallback(() => {
-    if (integrationConfig.onConnectWallet) {
-      integrationConfig.onConnectWallet();
-    } else if (window.xPayOnConnectWallet) {
-      window.xPayOnConnectWallet();
-    }
-  }, [integrationConfig]);
-
-  const hasOnConnectWalletCallback = useMemo(() => {
-    return !!(integrationConfig.onConnectWallet || window.xPayOnConnectWallet);
-  }, [integrationConfig.onConnectWallet]);
-
   return (
     <swapContext.Provider
       value={{
@@ -956,6 +1109,8 @@ export const SwapProvider = ({
         setSrcChain,
         srcChainTokensOptions,
         srcChainOtherTokensOptions,
+        srcChainOptions,
+        dstChainOptions,
         tokenPrices,
         dstChain,
         setDstChain,
@@ -973,8 +1128,6 @@ export const SwapProvider = ({
         dstValueWei,
         dstValueUsd,
         dstValueMin,
-        lastTx,
-        setLastTxHash,
         expressDelivery,
         setExpressDelivery,
         infiniteApproval,
@@ -989,6 +1142,7 @@ export const SwapProvider = ({
         srcTokenBalanceInfo,
         isFetchingRoute,
         isFetchingBalance,
+        isFetchingBalances,
         isExpressDeliveryActive,
         quoteRoute,
         refreshBalance,