feat(swap-ui): implement bridge routes alongside swap routes

src/hooks/useBridgeFees.ts

@@ -36,7 +36,8 @@ export function useBridgeFees(
   externalProjectId?: string,
   _recipientAddress?: string,
   isUniversalSwap?: boolean,
-  universalSwapQuote?: UniversalSwapQuote
+  universalSwapQuote?: UniversalSwapQuote,
+  enabled: boolean = true
 ) {
   const didUniversalSwapLoad = isUniversalSwap && !!universalSwapQuote;
   const bridgeInputTokenSymbol = didUniversalSwapLoad
@@ -87,7 +88,7 @@ export function useBridgeFees(
         ? getBridgeFeesWithExternalProjectId(externalProjectIdToQuery, feeArgs)
         : getBridgeFees(feeArgs);
     },
-    enabled: Boolean(amount.gt(0)),
+    enabled: enabled && Boolean(amount.gt(0)),
     refetchInterval: 5000,
     retry: (_, error) => {
       if (

src/hooks/useBridgeLimits.ts

@@ -27,15 +27,18 @@ export function useBridgeLimits(
   fromChainId?: ChainId,
   toChainId?: ChainId,
   isUniversalSwap?: boolean,
-  universalSwapQuote?: UniversalSwapQuote
+  universalSwapQuote?: UniversalSwapQuote,
+  enabled: boolean = true
 ) {
-  const enabled = !!(
-    inputTokenSymbol &&
-    outputTokenSymbol &&
-    fromChainId &&
-    toChainId &&
-    (isUniversalSwap ? !!universalSwapQuote : true)
-  );
+  const queryEnabled =
+    enabled &&
+    !!(
+      inputTokenSymbol &&
+      outputTokenSymbol &&
+      fromChainId &&
+      toChainId &&
+      (isUniversalSwap ? !!universalSwapQuote : true)
+    );
   const didUniversalSwapLoad = isUniversalSwap && !!universalSwapQuote;
   const bridgeInputTokenSymbol = didUniversalSwapLoad
     ? universalSwapQuote.steps.bridge.tokenIn.symbol
@@ -78,7 +81,7 @@ export function useBridgeLimits(
         toChainIdToQuery
       );
     },
-    enabled,
+    enabled: queryEnabled,
     refetchInterval: 300_000, // 5 minutes
   });
   return {

src/hooks/useTokenInput.ts

@@ -1,13 +1,14 @@
 import { useCallback, useEffect, useState } from "react";
 import { BigNumber, utils } from "ethers";
 import { convertTokenToUSD, convertUSDToToken } from "utils";
-import { EnrichedToken } from "views/SwapAndBridge/components/ChainTokenSelector/ChainTokenSelectorModal";
+
 import { formatUnitsWithMaxFractions } from "utils";
+import { TokenWithBalance } from "views/SwapAndBridge/hooks/useSwapAndBridgeTokens";
 
 export type UnitType = "usd" | "token";
 
 type UseTokenInputProps = {
-  token: EnrichedToken | null;
+  token: TokenWithBalance | null;
   setAmount: (amount: BigNumber | null) => void;
   expectedAmount: string | undefined;
   shouldUpdate: boolean;

src/utils/token.ts

@@ -1,5 +1,5 @@
 import { BigNumber, ethers } from "ethers";
-import { LifiToken } from "hooks/useAvailableCrosschainRoutes";
+import { LifiToken } from "views/SwapAndBridge/hooks/useAvailableCrosschainRoutes";
 
 import {
   getProvider,
@@ -12,7 +12,7 @@
 import { SwapToken } from "utils/serverless-api/types";
 import { TokenInfo } from "constants/tokens";
 import {
   CHAIN_IDs,
   chainsWithUsdt0Enabled,
   getToken,
   tokenTable,

src/views/Bridge/hooks/useTransferQuote.ts

@@ -26,13 +26,14 @@ export function useTransferQuote(
   amount: BigNumber,
   swapSlippage: number,
   fromAddress?: string,
-  toAddress?: string
+  toAddress?: string,
+  isEnabled: boolean = true
 ) {
   const [initialQuoteTime, setInitialQuoteTime] = useState<
     number | undefined
   >();
-  const isSwapRoute = selectedRoute.type === "swap";
-  const isUniversalSwapRoute = selectedRoute.type === "universal-swap";
+  const isSwapRoute = selectedRoute?.type === "swap";
+  const isUniversalSwapRoute = selectedRoute?.type === "universal-swap";
   const swapQuoteQuery = useSwapQuoteQuery({
     // Setting `swapTokenSymbol` to undefined will disable the query
     swapTokenSymbol: isSwapRoute ? selectedRoute.swapTokenSymbol : undefined,
@@ -72,17 +73,24 @@ export function useTransferQuote(
     selectedRoute.externalProjectId,
     toAddress,
     isUniversalSwapRoute,
-    universalSwapQuoteQuery.data
+    universalSwapQuoteQuery.data,
+    isEnabled
   );
   const limitsQuery = useBridgeLimits(
     selectedRoute.fromTokenSymbol,
     selectedRoute.toTokenSymbol,
     selectedRoute.fromChain,
     selectedRoute.toChain,
     isUniversalSwapRoute,
-    universalSwapQuoteQuery.data
+    universalSwapQuoteQuery.data,
+    isEnabled
+  );
+  const usdPriceQuery = useCoingeckoPrice(
+    selectedRoute.l1TokenAddress,
+    "usd",
+    undefined,
+    isEnabled
   );
-  const usdPriceQuery = useCoingeckoPrice(selectedRoute.l1TokenAddress, "usd");
 
   const transferQuoteQuery = useQuery({
     queryKey: [
@@ -100,7 +108,8 @@ export function useTransferQuote(
       selectedRoute.type,
     ],
     enabled: Boolean(
-      feesQuery.fees &&
+      isEnabled &&
+        feesQuery.fees &&
         limitsQuery.limits &&
         usdPriceQuery.data?.price &&
         // If it's a swap route, we also need to wait for the swap quote to be fetched

src/views/SwapAndBridge/components/ChainTokenSelector/ChainTokenSelectorModal.tsx

@@ -2,7 +2,7 @@
 import styled from "@emotion/styled";
 import { Searchbar } from "./Searchbar";
 import TokenMask from "assets/mask/token-mask-corner.svg";
-import { LifiToken } from "hooks/useAvailableCrosschainRoutes";
+import { LifiToken } from "views/SwapAndBridge/hooks/useAvailableCrosschainRoutes";
 import {
   CHAIN_IDs,
   ChainInfo,
@@ -22,11 +22,13 @@
 import { ReactComponent as WarningIcon } from "assets/icons/warning_triangle.svg";
 import { ReactComponent as LinkExternalIcon } from "assets/icons/arrow-up-right-boxed.svg";
 import AllChainsIcon from "assets/chain-logos/all-swap-chain.png";
-import { useEnrichedCrosschainBalances } from "hooks/useEnrichedCrosschainBalances";
 import useCurrentBreakpoint from "hooks/useCurrentBreakpoint";
-import { BigNumber } from "ethers";
 import { Text, TokenImage } from "components";
 import { useHotkeys } from "react-hotkeys-hook";
+import {
+  useSwapAndBridgeTokens,
+  TokenWithBalance,
+} from "views/SwapAndBridge/hooks/useSwapAndBridgeTokens";
 
 const popularChains = [
   CHAIN_IDs.MAINNET,
@@ -53,27 +55,21 @@
   all: ChainData[];
 };
 
-export type EnrichedToken = LifiToken & {
-  balance: BigNumber;
-  balanceUsd: number;
-  routeSource: "bridge" | "swap";
-};
-
-type EnrichedTokenWithReachability = EnrichedToken & {
+type TokenWithBalanceWithReachability = TokenWithBalance & {
   isUnreachable: boolean;
 };
 
 type DisplayedTokens = {
-  popular: EnrichedTokenWithReachability[];
-  all: EnrichedTokenWithReachability[];
+  popular: TokenWithBalanceWithReachability[];
+  all: TokenWithBalanceWithReachability[];
 };
 
 type Props = {
-  onSelect: (token: EnrichedToken) => void;
-  onSelectOtherToken?: (token: EnrichedToken | null) => void; // Callback to reset the other selector
+  onSelect: (token: TokenWithBalance) => void;
+  onSelectOtherToken?: (token: TokenWithBalance | null) => void; // Callback to reset the other selector
   isOriginToken: boolean;
-  currentToken?: EnrichedToken | null; // The currently selected token we're changing from
-  otherToken?: EnrichedToken | null; // The currently selected token on the other side
+  currentToken?: TokenWithBalance | null; // The currently selected token we're changing from
+  otherToken?: TokenWithBalance | null; // The currently selected token on the other side
   displayModal: boolean;
   setDisplayModal: (displayModal: boolean) => void;
 };
@@ -87,7 +83,17 @@
   currentToken,
   otherToken,
 }: Props) {
-  const crossChainRoutes = useEnrichedCrosschainBalances();
+  const { data: crossChainRoutes } = useSwapAndBridgeTokens(
+    isOriginToken
+      ? {
+          outputToken: otherToken,
+          isInput: true,
+        }
+      : {
+          inputToken: otherToken,
+          isOutput: true,
+        }
+  );
   const { isMobile } = useCurrentBreakpoint();
 
   const [selectedChain, setSelectedChain] = useState<number | null>(
@@ -107,33 +113,32 @@
   }, [displayModal, currentToken]);
 
   const displayedTokens = useMemo(() => {
-    let tokens = selectedChain ? (crossChainRoutes[selectedChain] ?? []) : [];
+    let tokens = selectedChain ? (crossChainRoutes?.[selectedChain] ?? []) : [];
 
     if (tokens.length === 0 && selectedChain === null) {
-      tokens = Object.values(crossChainRoutes).flatMap((t) => t);
+      tokens = Object.values(crossChainRoutes ?? {}).flatMap((t) => t);
     }
 
     // Enrich tokens with route source information and unreachable flag
-    const enrichedTokens = tokens.map((token) => {
+    // The hook (useSwapAndBridgeTokens) already handles all unreachability logic:
+    // - Same chain check (input tokens on same chain as output, or output tokens on same chain as input)
+    // - Bridge-only check (swap-only tokens when output is bridge-only)
+    const TokenWithBalances = tokens.map((token) => {
       // Find the corresponding token in crossChainRoutes to get route source
       const routeToken = crossChainRoutes?.[token.chainId]?.find(
         (rt) => rt.address.toLowerCase() === token.address.toLowerCase()
       );
 
-      // Token is unreachable if otherToken exists and is from the same chain
-      const isUnreachable = otherToken
-        ? token.chainId === otherToken.chainId
-        : false;
-
       return {
         ...token,
-        routeSource: routeToken?.routeSource || "bridge", // Default to bridge if not found
-        isUnreachable,
+        routeSource: routeToken?.routeSource || token.routeSource || ["bridge"], // Use token's routeSource if available, otherwise default to bridge
+        // Use the hook's isUnreachable value directly - it handles all cases
+        isUnreachable: token.isUnreachable ?? false,
       };
     });
 
     // Filter by search first
-    const filteredTokens = enrichedTokens.filter((t) => {
+    const filteredTokens = TokenWithBalances.filter((t) => {
       if (tokenSearch === "") {
         return true;
       }
@@ -152,7 +157,7 @@
     });
 
     // Sort function that prioritizes tokens with balance, then by balance amount, then alphabetically
-    const sortTokens = (tokens: EnrichedTokenWithReachability[]) => {
+    const sortTokens = (tokens: TokenWithBalanceWithReachability[]) => {
       return tokens.sort((a, b) => {
         // Sort by token balance - tokens with balance go to top
         const aHasTokenBalance = a.balance.gt(0);
@@ -261,7 +266,7 @@
       popular: popularChainsData,
       all: allChainsData,
     } as DisplayedChains;
   }, [chainSearch, crossChainRoutes, otherToken]);
 
   return isMobile ? (
     <MobileModal
@@ -334,8 +339,8 @@
   displayedChains: DisplayedChains;
   displayedTokens: DisplayedTokens;
   onChainSelect: (chainId: number | null) => void;
-  onTokenSelect: (token: EnrichedToken) => void;
-  onSelectOtherToken?: (token: EnrichedToken | null) => void;
+  onTokenSelect: (token: TokenWithBalance) => void;
+  onSelectOtherToken?: (token: TokenWithBalance | null) => void;
 }) => {
   return (
     <Modal
@@ -414,8 +419,8 @@
   displayedChains: DisplayedChains;
   displayedTokens: DisplayedTokens;
   onChainSelect: (chainId: number | null) => void;
-  onTokenSelect: (token: EnrichedToken) => void;
-  onSelectOtherToken?: (token: EnrichedToken | null) => void;
+  onTokenSelect: (token: TokenWithBalance) => void;
+  onSelectOtherToken?: (token: TokenWithBalance | null) => void;
 }) => {
   return (
     <Modal
@@ -453,7 +458,7 @@
 
 // Mobile Layout Component - 2-step process
 const MobileLayout = ({
   isOriginToken,
   mobileStep,
   selectedChain,
   chainSearch,
@@ -477,8 +482,8 @@
   displayedChains: DisplayedChains;
   displayedTokens: DisplayedTokens;
   onChainSelect: (chainId: number | null) => void;
-  onTokenSelect: (token: EnrichedToken) => void;
-  onSelectOtherToken?: (token: EnrichedToken | null) => void;
+  onTokenSelect: (token: TokenWithBalance) => void;
+  onSelectOtherToken?: (token: TokenWithBalance | null) => void;
   onModalClose: () => void;
 }) => {
   const chainSearchInputRef = useRef<HTMLInputElement>(null);
@@ -638,8 +643,8 @@
   displayedChains: DisplayedChains;
   displayedTokens: DisplayedTokens;
   onChainSelect: (chainId: number | null) => void;
-  onTokenSelect: (token: EnrichedToken) => void;
-  onSelectOtherToken?: (token: EnrichedToken | null) => void;
+  onTokenSelect: (token: TokenWithBalance) => void;
+  onSelectOtherToken?: (token: TokenWithBalance | null) => void;
   onModalClose: () => void;
 }) => {
   const chainSearchInputRef = useRef<HTMLInputElement>(null);
@@ -851,7 +856,7 @@
   tabIndex,
   warningMessage,
 }: {
-  token: EnrichedTokenWithReachability;
+  token: TokenWithBalanceWithReachability;
   isSelected: boolean;
   onClick: () => void;
   warningMessage: string;