thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

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

@@ -0,0 +1,137 @@
+import {
+  type MockedFunction,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
+import { routes } from "../../../bridge/Routes.js";
+import { ApiError } from "../../../bridge/types/Errors.js";
+import type { Route } from "../../../bridge/types/Route.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import type { UseBridgeRoutesParams } from "./useBridgeRoutes.js";
+
+// Mock the Bridge routes function
+vi.mock("../../../bridge/Routes.js", () => ({
+  routes: vi.fn(),
+}));
+
+const mockRoutes = routes as MockedFunction<typeof routes>;
+
+// Mock client
+const mockClient = { clientId: "test" } as ThirdwebClient;
+
+// Mock route data
+const mockRouteData: Route[] = [
+  {
+    originToken: {
+      chainId: 1,
+      address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+      symbol: "ETH",
+      name: "Ethereum",
+      decimals: 18,
+      priceUsd: 2000.0,
+    },
+    destinationToken: {
+      chainId: 137,
+      address: "0x7ceB23fD6bC0adD59E62ac25578270cFf1b9f619",
+      symbol: "WETH",
+      name: "Wrapped Ethereum",
+      decimals: 18,
+      priceUsd: 2000.0,
+    },
+  },
+];
+
+describe("useBridgeRoutes", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should export correct hook parameters type", () => {
+    // Type-only test to verify UseBridgeRoutesParams interface
+    const params: UseBridgeRoutesParams = {
+      client: mockClient,
+      originChainId: 1,
+      destinationChainId: 137,
+      enabled: true,
+    };
+
+    expect(params).toBeDefined();
+    expect(params.client).toBe(mockClient);
+    expect(params.originChainId).toBe(1);
+    expect(params.destinationChainId).toBe(137);
+    expect(params.enabled).toBe(true);
+  });
+
+  it("should handle different parameter combinations", () => {
+    const fullParams: UseBridgeRoutesParams = {
+      client: mockClient,
+      originChainId: 1,
+      originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+      destinationChainId: 137,
+      destinationTokenAddress: "0x7ceB23fD6bC0adD59E62ac25578270cFf1b9f619",
+      maxSteps: 3,
+      sortBy: "popularity",
+      limit: 10,
+      offset: 0,
+      enabled: false,
+    };
+
+    expect(fullParams).toBeDefined();
+    expect(fullParams.sortBy).toBe("popularity");
+    expect(fullParams.maxSteps).toBe(3);
+    expect(fullParams.limit).toBe(10);
+    expect(fullParams.offset).toBe(0);
+  });
+
+  it("should have optional enabled parameter defaulting to true", () => {
+    const paramsWithoutEnabled: UseBridgeRoutesParams = {
+      client: mockClient,
+      originChainId: 1,
+      destinationChainId: 137,
+    };
+
+    expect(paramsWithoutEnabled.enabled).toBeUndefined(); // Should be optional
+  });
+
+  it("should validate that Bridge.routes would be called with correct parameters", async () => {
+    const testParams = {
+      client: mockClient,
+      originChainId: 1,
+      destinationChainId: 137,
+      originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE" as const,
+    };
+
+    // Mock the routes function to return our test data
+    mockRoutes.mockResolvedValue(mockRouteData);
+
+    // Directly call the routes function to verify it works with our parameters
+    const result = await routes(testParams);
+
+    expect(mockRoutes).toHaveBeenCalledWith(testParams);
+    expect(result).toEqual(mockRouteData);
+  });
+
+  it("should handle API errors properly", async () => {
+    const apiError = new ApiError({
+      code: "INVALID_INPUT",
+      message: "Invalid parameters",
+      statusCode: 400,
+    });
+
+    mockRoutes.mockRejectedValue(apiError);
+
+    try {
+      await routes({
+        client: mockClient,
+        originChainId: 1,
+        destinationChainId: 137,
+      });
+    } catch (error) {
+      expect(error).toBe(apiError);
+      expect(error).toBeInstanceOf(ApiError);
+    }
+  });
+});

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.test.ts

@@ -0,0 +1,336 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import { createElement } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { routes } from "../../../bridge/Routes.js";
+import type { Token } from "../../../bridge/types/Token.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import { usePaymentMethods } from "./usePaymentMethods.js";
+
+// Mock the routes API
+vi.mock("../../../bridge/Routes.js", () => ({
+  routes: vi.fn(),
+}));
+
+const mockRoutes = vi.mocked(routes);
+
+// Mock data
+const mockDestinationToken: Token = {
+  chainId: 1,
+  address: "0xA0b86a33E6441aA7A6fbEEc9bb27e5e8bc3b8eD7",
+  decimals: 6,
+  symbol: "USDC",
+  name: "USD Coin",
+  priceUsd: 1.0,
+};
+
+const mockClient = {
+  clientId: "test-client-id",
+} as ThirdwebClient;
+
+const mockRouteData = [
+  {
+    originToken: {
+      chainId: 1,
+      address: "0xA0b86a33E6441aA7A6fbEEc9bb27e5e8bc3b8eD7",
+      decimals: 18,
+      symbol: "ETH",
+      name: "Ethereum",
+      priceUsd: 2000,
+    },
+    destinationToken: mockDestinationToken,
+    steps: [],
+  },
+  {
+    originToken: {
+      chainId: 137,
+      address: "0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174",
+      decimals: 6,
+      symbol: "USDC",
+      name: "USD Coin",
+      priceUsd: 1.0,
+    },
+    destinationToken: mockDestinationToken,
+    steps: [],
+  },
+  {
+    originToken: {
+      chainId: 42161,
+      address: "0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8",
+      decimals: 6,
+      symbol: "USDC",
+      name: "USD Coin",
+      priceUsd: 1.0,
+    },
+    destinationToken: mockDestinationToken,
+    steps: [],
+  },
+];
+
+// Test wrapper component
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return ({ children }: { children: React.ReactNode }) =>
+    createElement(QueryClientProvider, { client: queryClient }, children);
+};
+
+describe("usePaymentMethods", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should require destinationToken and client parameters", () => {
+    const wrapper = createWrapper();
+
+    const { result } = renderHook(
+      () =>
+        usePaymentMethods({
+          destinationToken: mockDestinationToken,
+          destinationAmount: "1",
+          client: mockClient,
+        }),
+      { wrapper },
+    );
+
+    expect(result.current).toBeDefined();
+    expect(result.current.isLoading).toBe(true);
+  });
+
+  it("should fetch routes and transform data correctly", async () => {
+    mockRoutes.mockResolvedValueOnce(mockRouteData);
+    const wrapper = createWrapper();
+
+    const { result } = renderHook(
+      () =>
+        usePaymentMethods({
+          destinationToken: mockDestinationToken,
+          destinationAmount: "1",
+          client: mockClient,
+        }),
+      { wrapper },
+    );
+
+    // Initially loading
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.data).toEqual([]);
+
+    // Wait for query to resolve
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    // Should have transformed data
+    expect(result.current.data).toHaveLength(4); // 3 wallet methods + 1 fiat method
+
+    const walletMethod = result.current.data[0];
+    expect(walletMethod?.type).toBe("wallet");
+    if (walletMethod?.type === "wallet") {
+      expect(walletMethod.originToken).toEqual(mockRouteData[0]?.originToken);
+    }
+
+    const fiatMethod = result.current.data[3];
+    expect(fiatMethod?.type).toBe("fiat");
+    if (fiatMethod?.type === "fiat") {
+      expect(fiatMethod.currency).toBe("USD");
+    }
+  });
+
+  it("should call routes API with correct parameters", async () => {
+    mockRoutes.mockResolvedValueOnce(mockRouteData);
+    const wrapper = createWrapper();
+
+    renderHook(
+      () =>
+        usePaymentMethods({
+          destinationToken: mockDestinationToken,
+          destinationAmount: "1",
+          client: mockClient,
+        }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(mockRoutes).toHaveBeenCalledWith({
+        client: mockClient,
+        destinationChainId: mockDestinationToken.chainId,
+        destinationTokenAddress: mockDestinationToken.address,
+        sortBy: "popularity",
+        limit: 50,
+      });
+    });
+  });
+
+  it("should handle empty routes data", async () => {
+    mockRoutes.mockResolvedValueOnce([]);
+    const wrapper = createWrapper();
+
+    const { result } = renderHook(
+      () =>
+        usePaymentMethods({
+          destinationToken: mockDestinationToken,
+          destinationAmount: "1",
+          client: mockClient,
+        }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    // Should only have fiat method when no routes
+    expect(result.current.data).toHaveLength(1);
+    expect(result.current.data[0]).toEqual({
+      type: "fiat",
+      currency: "USD",
+    });
+  });
+
+  it("should handle API errors gracefully", async () => {
+    const mockError = new Error("API Error");
+    mockRoutes.mockRejectedValueOnce(mockError);
+    const wrapper = createWrapper();
+
+    const { result } = renderHook(
+      () =>
+        usePaymentMethods({
+          destinationToken: mockDestinationToken,
+          destinationAmount: "1",
+          client: mockClient,
+        }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(result.current.error).toBeTruthy();
+    expect(result.current.data).toEqual([]);
+  });
+
+  it("should deduplicate origin tokens", async () => {
+    // Mock data with duplicate origin tokens
+    const firstRoute = mockRouteData[0];
+    if (!firstRoute) {
+      throw new Error("Mock data is invalid");
+    }
+
+    const mockDataWithDuplicates = [
+      ...mockRouteData,
+      {
+        originToken: firstRoute.originToken, // Duplicate ETH
+        destinationToken: mockDestinationToken,
+        steps: [],
+      },
+    ];
+
+    mockRoutes.mockResolvedValueOnce(mockDataWithDuplicates);
+    const wrapper = createWrapper();
+
+    const { result } = renderHook(
+      () =>
+        usePaymentMethods({
+          destinationToken: mockDestinationToken,
+          destinationAmount: "1",
+          client: mockClient,
+        }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    // Should still have only 4 methods (3 unique wallet + 1 fiat)
+    expect(result.current.data).toHaveLength(4);
+
+    // Check that ETH only appears once
+    const walletMethods = result.current.data.filter(
+      (m) => m.type === "wallet",
+    );
+    const ethMethods = walletMethods.filter(
+      (m) => m.type === "wallet" && m.originToken?.symbol === "ETH",
+    );
+    expect(ethMethods).toHaveLength(1);
+  });
+
+  it("should always include fiat payment option", async () => {
+    mockRoutes.mockResolvedValueOnce(mockRouteData);
+    const wrapper = createWrapper();
+
+    const { result } = renderHook(
+      () =>
+        usePaymentMethods({
+          destinationToken: mockDestinationToken,
+          destinationAmount: "1",
+          client: mockClient,
+        }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    const fiatMethods = result.current.data.filter((m) => m.type === "fiat");
+    expect(fiatMethods).toHaveLength(1);
+    expect(fiatMethods[0]).toEqual({
+      type: "fiat",
+      currency: "USD",
+    });
+  });
+
+  it("should have correct query key for caching", async () => {
+    mockRoutes.mockResolvedValueOnce(mockRouteData);
+    const wrapper = createWrapper();
+
+    const { result } = renderHook(
+      () =>
+        usePaymentMethods({
+          destinationToken: mockDestinationToken,
+          destinationAmount: "1",
+          client: mockClient,
+        }),
+      { wrapper },
+    );
+
+    // The hook should use a query key that includes chain ID and token address
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(mockRoutes).toHaveBeenCalledTimes(1);
+  });
+
+  it("should provide refetch functionality", async () => {
+    mockRoutes.mockResolvedValueOnce(mockRouteData);
+    const wrapper = createWrapper();
+
+    const { result } = renderHook(
+      () =>
+        usePaymentMethods({
+          destinationToken: mockDestinationToken,
+          destinationAmount: "1",
+          client: mockClient,
+        }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(typeof result.current.refetch).toBe("function");
+  });
+});