thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.1-nightly-bb09e20bcb1662c088bf8b61486df7d0d92da8d0-20250618000421

package/src/react/core/hooks/useBridgeRoutes.ts

@@ -0,0 +1,75 @@
+import { useQuery } from "@tanstack/react-query";
+import { routes } from "../../../bridge/Routes.js";
+import type { routes as RoutesTypes } from "../../../bridge/Routes.js";
+import { ApiError } from "../../../bridge/types/Errors.js";
+import { mapBridgeError } from "../errors/mapBridgeError.js";
+
+/**
+ * Parameters for the useBridgeRoutes hook
+ */
+export type UseBridgeRoutesParams = RoutesTypes.Options & {
+  /**
+   * Whether to enable the query. Useful for conditional fetching.
+   * @default true
+   */
+  enabled?: boolean;
+};
+
+/**
+ * Hook that fetches available bridge routes with caching and retry logic
+ *
+ * @param params - Parameters for fetching routes including client and filter options
+ * @returns React Query result with routes data, loading state, and error handling
+ *
+ * @example
+ * ```tsx
+ * const { data: routes, isLoading, error } = useBridgeRoutes({
+ *   client: thirdwebClient,
+ *   originChainId: 1,
+ *   destinationChainId: 137,
+ *   originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE"
+ * });
+ * ```
+ */
+export function useBridgeRoutes(params: UseBridgeRoutesParams) {
+  const { enabled = true, ...routeParams } = params;
+
+  return useQuery({
+    queryKey: [
+      "bridge-routes",
+      {
+        originChainId: routeParams.originChainId,
+        originTokenAddress: routeParams.originTokenAddress,
+        destinationChainId: routeParams.destinationChainId,
+        destinationTokenAddress: routeParams.destinationTokenAddress,
+        maxSteps: routeParams.maxSteps,
+        sortBy: routeParams.sortBy,
+        limit: routeParams.limit,
+        offset: routeParams.offset,
+      },
+    ],
+    queryFn: () => routes(routeParams),
+    enabled: enabled && !!routeParams.client,
+    staleTime: 5 * 60 * 1000, // 5 minutes - routes are relatively stable
+    gcTime: 10 * 60 * 1000, // 10 minutes garbage collection
+    retry: (failureCount, error) => {
+      // Handle both ApiError and generic Error instances
+      if (error instanceof ApiError) {
+        const bridgeError = mapBridgeError(error);
+
+        // Don't retry on client-side errors (4xx)
+        if (
+          bridgeError.statusCode &&
+          bridgeError.statusCode >= 400 &&
+          bridgeError.statusCode < 500
+        ) {
+          return false;
+        }
+      }
+
+      // Retry up to 3 times for server errors or network issues
+      return failureCount < 3;
+    },
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), // Exponential backoff, max 30s
+  });
+}

package/src/react/core/hooks/usePaymentMethods.ts

@@ -0,0 +1,203 @@
+import { useQuery } from "@tanstack/react-query";
+import { routes } from "../../../bridge/Routes.js";
+import type { Token } from "../../../bridge/types/Token.js";
+import { getCachedChain } from "../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import { isInsightEnabled } from "../../../insight/common.js";
+import { getOwnedTokens } from "../../../insight/get-tokens.js";
+import { toTokens } from "../../../utils/units.js";
+import type { Wallet } from "../../../wallets/interfaces/wallet.js";
+import type { PaymentMethod } from "../machines/paymentMachine.js";
+import { useActiveWallet } from "./wallets/useActiveWallet.js";
+
+type OwnedTokenWithQuote = {
+  originToken: Token;
+  balance: bigint;
+  originAmount: bigint;
+};
+
+/**
+ * Hook that returns available payment methods for BridgeEmbed
+ * Fetches real routes data based on the destination token
+ *
+ * @param options - Configuration options
+ * @param options.destinationToken - The destination token to find routes for
+ * @param options.client - ThirdwebClient for API calls
+ * @returns Available payment methods with route data
+ *
+ * @example
+ * ```tsx
+ * const { data: paymentMethods, isLoading, error } = usePaymentMethods({
+ *   destinationToken,
+ *   client
+ * });
+ * ```
+ */
+export function usePaymentMethods(options: {
+  destinationToken: Token;
+  destinationAmount: string;
+  client: ThirdwebClient;
+  payerWallet?: Wallet;
+  includeDestinationToken?: boolean;
+}) {
+  const {
+    destinationToken,
+    destinationAmount,
+    client,
+    payerWallet,
+    includeDestinationToken,
+  } = options;
+  const localWallet = useActiveWallet(); // TODO (bridge): get all connected wallets
+  const wallet = payerWallet || localWallet;
+
+  const routesQuery = useQuery({
+    queryKey: [
+      "bridge-routes",
+      destinationToken.chainId,
+      destinationToken.address,
+      destinationAmount,
+      payerWallet?.getAccount()?.address,
+      includeDestinationToken,
+    ],
+    queryFn: async (): Promise<PaymentMethod[]> => {
+      if (!wallet) {
+        throw new Error("No wallet connected");
+      }
+      const allRoutes = await routes({
+        client,
+        destinationChainId: destinationToken.chainId,
+        destinationTokenAddress: destinationToken.address,
+        sortBy: "popularity",
+        includePrices: true,
+        maxSteps: 3,
+        limit: 100, // Get top 100 most popular routes
+      });
+
+      const allOriginTokens = includeDestinationToken
+        ? [destinationToken, ...allRoutes.map((route) => route.originToken)]
+        : allRoutes.map((route) => route.originToken);
+
+      // 1. Resolve all unique chains in the supported token map
+      const uniqueChains = Array.from(
+        new Set(allOriginTokens.map((t) => t.chainId)),
+      );
+
+      // 2. Check insight availability once per chain
+      const insightSupport = await Promise.all(
+        uniqueChains.map(async (c) => ({
+          chain: getCachedChain(c),
+          enabled: await isInsightEnabled(getCachedChain(c)),
+        })),
+      );
+      const insightEnabledChains = insightSupport.filter((c) => c.enabled);
+
+      // 3. ERC-20 balances for insight-enabled chains (batched 5 chains / call)
+      let owned: OwnedTokenWithQuote[] = [];
+      let page = 0;
+      const limit = 100;
+
+      while (true) {
+        const batch = await getOwnedTokens({
+          ownerAddress: wallet.getAccount()?.address || "",
+          chains: insightEnabledChains.map((c) => c.chain),
+          client,
+          queryOptions: {
+            limit,
+            page,
+            metadata: "false",
+          },
+        });
+
+        if (batch.length === 0) {
+          break;
+        }
+
+        // find matching origin token in allRoutes
+        const tokensWithBalance = batch
+          .map((b) => ({
+            originToken: allOriginTokens.find(
+              (t) =>
+                t.address.toLowerCase() === b.tokenAddress.toLowerCase() &&
+                t.chainId === b.chainId,
+            ),
+            balance: b.value,
+            originAmount: 0n,
+          }))
+          .filter((t) => !!t.originToken) as OwnedTokenWithQuote[];
+
+        owned = [...owned, ...tokensWithBalance];
+        page += 1;
+      }
+
+      const requiredDollarAmount =
+        Number.parseFloat(destinationAmount) * destinationToken.priceUsd;
+
+      // sort by dollar balance descending
+      owned.sort((a, b) => {
+        const aDollarBalance =
+          Number.parseFloat(toTokens(a.balance, a.originToken.decimals)) *
+          a.originToken.priceUsd;
+        const bDollarBalance =
+          Number.parseFloat(toTokens(b.balance, b.originToken.decimals)) *
+          b.originToken.priceUsd;
+        return bDollarBalance - aDollarBalance;
+      });
+
+      const suitableOriginTokens: OwnedTokenWithQuote[] = [];
+
+      for (const b of owned) {
+        if (b.originToken && b.balance > 0n) {
+          const dollarBalance =
+            Number.parseFloat(toTokens(b.balance, b.originToken.decimals)) *
+            b.originToken.priceUsd;
+          if (b.originToken.priceUsd && dollarBalance < requiredDollarAmount) {
+            continue;
+          }
+
+          if (
+            includeDestinationToken &&
+            b.originToken.address.toLowerCase() ===
+              destinationToken.address.toLowerCase() &&
+            b.originToken.chainId === destinationToken.chainId
+          ) {
+            // add same token to the front of the list
+            suitableOriginTokens.unshift({
+              balance: b.balance,
+              originAmount: 0n,
+              originToken: b.originToken,
+            });
+            continue;
+          }
+
+          suitableOriginTokens.push({
+            balance: b.balance,
+            originAmount: 0n,
+            originToken: b.originToken,
+          });
+        }
+      }
+
+      const transformedRoutes = [
+        ...suitableOriginTokens.map((s) => ({
+          type: "wallet" as const,
+          payerWallet: wallet,
+          originToken: s.originToken,
+          balance: s.balance,
+        })),
+      ];
+      return transformedRoutes;
+    },
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    refetchOnWindowFocus: false,
+    enabled: !!wallet,
+  });
+
+  return {
+    data: routesQuery.data || [],
+    isLoading: routesQuery.isLoading,
+    error: routesQuery.error,
+    isError: routesQuery.isError,
+    isSuccess: routesQuery.isSuccess,
+    refetch: routesQuery.refetch,
+  };
+}