[MNY-338] Add filters when fetching chains in chain selection ui

Author: MananTank

packages/thirdweb/src/bridge/Chains.ts

@@ -54,12 +54,30 @@ import { ApiError } from "./types/Errors.js";
  */
 export async function chains(options: chains.Options): Promise<chains.Result> {
   const { client } = options;
-
   return withCache(
     async () => {
       const clientFetch = getClientFetch(client);
       const url = new URL(`${getThirdwebBaseUrl("bridge")}/v1/chains`);
 
+      if (options.testnet) {
+        url.searchParams.set("testnet", options.testnet.toString());
+      }
+
+      // set type or originChainId or destinationChainId
+      if ("type" in options && options.type) {
+        url.searchParams.set("type", options.type);
+      } else if ("originChainId" in options && options.originChainId) {
+        url.searchParams.set("originChainId", options.originChainId.toString());
+      } else if (
+        "destinationChainId" in options &&
+        options.destinationChainId
+      ) {
+        url.searchParams.set(
+          "destinationChainId",
+          options.destinationChainId.toString(),
+        );
+      }
+
       const response = await clientFetch(url.toString());
       if (!response.ok) {
         const errorJson = await response.json();
@@ -75,7 +93,7 @@ export async function chains(options: chains.Options): Promise<chains.Result> {
       return data;
     },
     {
-      cacheKey: "bridge-chains",
+      cacheKey: `bridge-chains-${JSON.stringify(options)}`,
       cacheTime: 1000 * 60 * 60 * 1, // 1 hours
     },
   );
@@ -95,7 +113,32 @@ export declare namespace chains {
   type Options = {
     /** Your thirdweb client */
     client: ThirdwebClient;
-  };
+
+    /**
+     * If true, returns only testnet chains. Defaults to false.
+     */
+    testnet?: boolean;
+  } & (
+    | {
+        /**
+         * setting type=origin: Returns all chains that can be used as origin,
+         * setting type=destination: Returns all chains that can be used as destination
+         */
+        type?: "origin" | "destination";
+      }
+    | {
+        /**
+         * setting originChainId=X: Returns destination chains reachable from chain X
+         */
+        originChainId?: number;
+      }
+    | {
+        /**
+         * setting destinationChainId=X: Returns origin chains reachable from chain X
+         */
+        destinationChainId?: number;
+      }
+  );
 
   /**
    * Result returned from fetching supported bridge chains.

packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx

@@ -49,7 +49,7 @@ import { WithHeader } from "./common/WithHeader.js";
 import { useActiveWalletInfo } from "./swap-widget/hooks.js";
 import { SelectToken } from "./swap-widget/select-token-ui.js";
 import type { ActiveWalletInfo } from "./swap-widget/types.js";
-import { useBridgeChains } from "./swap-widget/use-bridge-chains.js";
+import { useBridgeChain } from "./swap-widget/use-bridge-chains.js";
 
 type FundWalletProps = {
   /**
@@ -211,6 +211,11 @@ export function FundWallet(props: FundWalletProps) {
         autoFocusCrossIcon={false}
       >
         <SelectToken
+          type="buy"
+          selections={{
+            buyChainId: props.selectedToken?.chainId,
+            sellChainId: undefined,
+          }}
           activeWalletInfo={activeWalletInfo}
           onClose={() => setIsTokenSelectionOpen(false)}
           client={props.client}
@@ -403,11 +408,11 @@ function TokenSection(props: {
   presetOptions: [number, number, number];
 }) {
   const theme = useCustomTheme();
-  const chainQuery = useBridgeChains(props.client);
-  const chain = chainQuery.data?.find(
-    (chain) => chain.chainId === props.selectedToken?.data?.chainId,
-  );
-
+  const chainQuery = useBridgeChain({
+    chainId: props.selectedToken?.data?.chainId,
+    client: props.client,
+  });
+  const chain = chainQuery.data;
   const fiatPricePerToken = props.selectedToken?.data?.prices[props.currency];
 
   const { fiatValue, tokenValue } = getAmounts(

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx

@@ -366,7 +366,7 @@ function SwapWidgetContent(
   }, [buyToken, sellToken, isPersistEnabled]);
 
   // preload requests
-  useBridgeChains(props.client);
+  useBridgeChains({ client: props.client });
 
   // if wallet suddenly disconnects, show screen 1
   if (screen.id === "1:swap-ui" || !activeWalletInfo) {

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx

@@ -15,7 +15,7 @@ import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Text } from "../../components/text.js";
 import { SearchInput } from "./SearchInput.js";
-import { useBridgeChains } from "./use-bridge-chains.js";
+import { useBridgeChainsWithFilters } from "./use-bridge-chains.js";
 import { cleanedChainName } from "./utils.js";
 
 type SelectBuyTokenProps = {
@@ -24,13 +24,23 @@ type SelectBuyTokenProps = {
   onSelectChain: (chain: BridgeChain) => void;
   selectedChain: BridgeChain | undefined;
   isMobile: boolean;
+  type: "buy" | "sell";
+  selections: {
+    buyChainId: number | undefined;
+    sellChainId: number | undefined;
+  };
 };
 
 /**
  * @internal
  */
 export function SelectBridgeChain(props: SelectBuyTokenProps) {
-  const chainQuery = useBridgeChains(props.client);
+  const chainQuery = useBridgeChainsWithFilters({
+    client: props.client,
+    type: props.type,
+    buyChainId: props.selections.buyChainId,
+    sellChainId: props.selections.sellChainId,
+  });
 
   return (
     <SelectBridgeChainUI
@@ -126,7 +136,7 @@ export function SelectBridgeChainUI(
         {props.isPending &&
           new Array(20).fill(0).map(() => (
             // biome-ignore lint/correctness/useJsxKeyInIterable: ok
-            <ChainButtonSkeleton />
+            <ChainButtonSkeleton isMobile={props.isMobile} />
           ))}
 
         {filteredChains.length === 0 && !props.isPending && (
@@ -148,18 +158,24 @@ export function SelectBridgeChainUI(
   );
 }
 
-function ChainButtonSkeleton() {
+function ChainButtonSkeleton(props: { isMobile: boolean }) {
+  const iconSizeValue = props.isMobile ? iconSize.lg : iconSize.md;
   return (
     <div
       style={{
         display: "flex",
         alignItems: "center",
         gap: spacing.sm,
-        padding: `${spacing.sm} ${spacing.sm}`,
+        padding: props.isMobile
+          ? `${spacing.sm} ${spacing.sm}`
+          : `${spacing.xs} ${spacing.xs}`,
       }}
     >
-      <Skeleton height={`${iconSize.lg}px`} width={`${iconSize.lg}px`} />
-      <Skeleton height={fontSize.md} width="160px" />
+      <Skeleton height={`${iconSizeValue}px`} width={`${iconSizeValue}px`} />
+      <Skeleton
+        height={props.isMobile ? fontSize.md : fontSize.sm}
+        width="160px"
+      />
     </div>
   );
 }

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx

@@ -26,7 +26,7 @@ import { SearchInput } from "./SearchInput.js";
 import { SelectChainButton } from "./SelectChainButton.js";
 import { SelectBridgeChain } from "./select-chain.js";
 import type { ActiveWalletInfo, TokenSelection } from "./types.js";
-import { useBridgeChains } from "./use-bridge-chains.js";
+import { useBridgeChainsWithFilters } from "./use-bridge-chains.js";
 import {
   type TokenBalance,
   useTokenBalances,
@@ -43,6 +43,11 @@ type SelectTokenUIProps = {
   selectedToken: TokenSelection | undefined;
   setSelectedToken: (token: TokenSelection) => void;
   activeWalletInfo: ActiveWalletInfo | undefined;
+  type: "buy" | "sell";
+  selections: {
+    buyChainId: number | undefined;
+    sellChainId: number | undefined;
+  };
 };
 
 function findChain(chains: BridgeChain[], activeChainId: number | undefined) {
@@ -58,7 +63,13 @@ const INITIAL_LIMIT = 100;
  * @internal
  */
 export function SelectToken(props: SelectTokenUIProps) {
-  const chainQuery = useBridgeChains(props.client);
+  const chainQuery = useBridgeChainsWithFilters({
+    client: props.client,
+    type: props.type,
+    buyChainId: props.selections.buyChainId,
+    sellChainId: props.selections.sellChainId,
+  });
+
   const [search, _setSearch] = useState("");
   const debouncedSearch = useDebouncedValue(search, 500);
   const [limit, setLimit] = useState(INITIAL_LIMIT);
@@ -146,6 +157,11 @@ function SelectTokenUI(
     selectedToken: TokenSelection | undefined;
     setSelectedToken: (token: TokenSelection) => void;
     showMore: (() => void) | undefined;
+    type: "buy" | "sell";
+    selections: {
+      buyChainId: number | undefined;
+      sellChainId: number | undefined;
+    };
   },
 ) {
   const isMobile = useIsMobile();
@@ -203,6 +219,8 @@ function SelectTokenUI(
       >
         <LeftContainer>
           <SelectBridgeChain
+            type={props.type}
+            selections={props.selections}
             onBack={() => setScreen("select-token")}
             client={props.client}
             isMobile={false}
@@ -269,6 +287,8 @@ function SelectTokenUI(
           setScreen("select-token");
         }}
         selectedChain={props.selectedChain}
+        type={props.type}
+        selections={props.selections}
       />
     );
   }
@@ -467,16 +487,16 @@ function TokenSelectionScreen(props: {
       </Container>
 
       {!props.selectedChain && (
-        <div
+        <Container
+          flex="column"
+          center="both"
+          expand
           style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
             minHeight: "300px",
           }}
         >
           <Spinner color="secondaryText" size="xl" />
-        </div>
+        </Container>
       )}
 
       {props.selectedChain && (