thirdweb 5.99.3 → 5.100.0

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx

@@ -13,50 +13,14 @@ import {
   useChainExplorers,
   useChainName,
 } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { useBuyWithCryptoStatus } from "../../../../../../core/hooks/pay/useBuyWithCryptoStatus.js";
 import { Spacer } from "../../../../components/Spacer.js";
-import { Container, Line, ModalHeader } from "../../../../components/basic.js";
+import { Container, Line } from "../../../../components/basic.js";
 import { ButtonLink } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { WalletRow } from "../swap/WalletRow.js";
 import { TokenInfoRow } from "./TokenInfoRow.js";
 import { type StatusMeta, getBuyWithCryptoStatusMeta } from "./statusMeta.js";
 
-export function SwapDetailsScreen(props: {
-  status: ValidBuyWithCryptoStatus;
-  onBack: () => void;
-  client: ThirdwebClient;
-}) {
-  const { status: initialStatus, client } = props;
-  const statusQuery = useBuyWithCryptoStatus(
-    initialStatus.source?.transactionHash
-      ? {
-          client: client,
-          transactionHash: initialStatus.source.transactionHash,
-          chainId: initialStatus.source.token.chainId,
-        }
-      : undefined,
-  );
-
-  const status: ValidBuyWithCryptoStatus =
-    (statusQuery.data?.status !== "NOT_FOUND" ? statusQuery.data : undefined) ||
-    initialStatus;
-
-  return (
-    <Container>
-      <Container p="lg">
-        <ModalHeader title="Transaction Details" onBack={props.onBack} />
-      </Container>
-
-      <Line />
-
-      <Container p="lg">
-        <SwapTxDetailsTable type="status" status={status} client={client} />
-      </Container>
-    </Container>
-  );
-}
-
 type SwapTxDetailsData = {
   fromToken: {
     chainId: number;

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/statusMeta.test.ts

@@ -1,10 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
-import {
-  getBuyWithCryptoStatusMeta,
-  getBuyWithFiatStatusMeta,
-} from "./statusMeta.js";
+import { getBuyWithCryptoStatusMeta } from "./statusMeta.js";
 
 describe("getBuyWithCryptoStatusMeta", () => {
   it('returns "Unknown" for NOT_FOUND status', () => {
@@ -82,93 +78,3 @@ describe("getBuyWithCryptoStatusMeta", () => {
     });
   });
 });
-
-describe("getBuyWithFiatStatusMeta", () => {
-  it('returns "Incomplete" for CRYPTO_SWAP_FALLBACK status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "CRYPTO_SWAP_FALLBACK",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Incomplete",
-      color: "danger",
-      step: 2,
-      progressStatus: "partialSuccess",
-    });
-  });
-
-  it('returns "Pending" for CRYPTO_SWAP_IN_PROGRESS status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "CRYPTO_SWAP_IN_PROGRESS",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Pending",
-      color: "accentText",
-      loading: true,
-      step: 2,
-      progressStatus: "pending",
-    });
-  });
-
-  it('returns "Pending" for PENDING_ON_RAMP_TRANSFER status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "PENDING_ON_RAMP_TRANSFER",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Pending",
-      color: "accentText",
-      loading: true,
-      step: 1,
-      progressStatus: "pending",
-    });
-  });
-
-  it('returns "Completed" for ON_RAMP_TRANSFER_COMPLETED status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "ON_RAMP_TRANSFER_COMPLETED",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Completed",
-      color: "success",
-      loading: true,
-      step: 1,
-      progressStatus: "completed",
-    });
-  });
-
-  it('returns "Action Required" for CRYPTO_SWAP_REQUIRED status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "CRYPTO_SWAP_REQUIRED",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Action Required",
-      color: "accentText",
-      step: 2,
-      progressStatus: "actionRequired",
-    });
-  });
-
-  it('returns "Failed" for PAYMENT_FAILED status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      status: "PAYMENT_FAILED",
-    } as BuyWithFiatStatus);
-    expect(result).toEqual({
-      status: "Failed",
-      color: "danger",
-      step: 1,
-      progressStatus: "failed",
-    });
-  });
-
-  it('returns "Unknown" for unhandled status', () => {
-    const result = getBuyWithFiatStatusMeta({
-      // @ts-ignore
-      status: "UNKNOWN_STATUS",
-    });
-    expect(result).toEqual({
-      status: "Unknown",
-      color: "secondaryText",
-      step: 1,
-      progressStatus: "unknown",
-    });
-  });
-});

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/statusMeta.ts

@@ -1,5 +1,4 @@
 import type { BuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import type { Theme } from "../../../../../../core/design-system/index.js";
 
 export type StatusMeta = {
@@ -74,73 +73,5 @@ export type FiatStatusMeta = {
     | "completed"
     | "failed"
     | "actionRequired"
-    | "partialSuccess"
     | "unknown";
 };
-export function getBuyWithFiatStatusMeta(
-  fiatStatus: BuyWithFiatStatus,
-): FiatStatusMeta {
-  const status = fiatStatus.status;
-
-  switch (status) {
-    case "CRYPTO_SWAP_FALLBACK": {
-      return {
-        status: "Incomplete",
-        color: "danger",
-        step: 2,
-        progressStatus: "partialSuccess",
-      };
-    }
-
-    case "CRYPTO_SWAP_IN_PROGRESS":
-    case "PENDING_ON_RAMP_TRANSFER":
-    case "ON_RAMP_TRANSFER_IN_PROGRESS":
-    case "PENDING_PAYMENT": {
-      return {
-        status: "Pending",
-        color: "accentText",
-        loading: true,
-        step: status === "CRYPTO_SWAP_IN_PROGRESS" ? 2 : 1,
-        progressStatus: "pending",
-      };
-    }
-
-    case "ON_RAMP_TRANSFER_COMPLETED":
-    case "CRYPTO_SWAP_COMPLETED": {
-      return {
-        status: "Completed", // Is this actually completed though?
-        color: "success",
-        loading: true,
-        step: status === "CRYPTO_SWAP_COMPLETED" ? 2 : 1,
-        progressStatus: "completed",
-      };
-    }
-
-    case "CRYPTO_SWAP_FAILED":
-    case "CRYPTO_SWAP_REQUIRED": {
-      return {
-        status: "Action Required",
-        color: "accentText",
-        step: 2,
-        progressStatus: "actionRequired",
-      };
-    }
-
-    case "PAYMENT_FAILED":
-    case "ON_RAMP_TRANSFER_FAILED": {
-      return {
-        status: "Failed",
-        color: "danger",
-        step: 1,
-        progressStatus: "failed",
-      };
-    }
-  }
-
-  return {
-    status: "Unknown",
-    color: "secondaryText",
-    step: 1,
-    progressStatus: "unknown",
-  };
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx

@@ -43,7 +43,9 @@ export function WalletRow(props: {
     client,
     address,
   });
-  const addressOrENS = ensNameQuery.data || shortenAddress(address);
+  const addressOrENS = address
+    ? ensNameQuery.data || shortenAddress(address)
+    : "";
   return (
     <Container flex="row" style={{ justifyContent: "space-between" }}>
       <Container flex="row" center="y" gap="sm" color="secondaryText">

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/fetchBalancesForWallet.tsx

@@ -214,7 +214,7 @@ async function fetchBalancesForWallet({
               chain.id === toChain.id
                 ? !(
                     mode === "fund_wallet" && account.address === accountAddress
-                  )
+                  ) && balance.value > 0n
                 : balance.value > 0n;
 
             if (include) {

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/pendingSwapTx.ts

@@ -11,9 +11,7 @@ type PendingTxInfo =
       intentId: string;
     };
 
-export const pendingTransactions = /* @__PURE__ */ createStore<PendingTxInfo[]>(
-  [],
-);
+const pendingTransactions = /* @__PURE__ */ createStore<PendingTxInfo[]>([]);
 
 /**
  * @internal

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.ts

@@ -1,28 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
+import { Address as ox__Address } from "ox";
+import * as Bridge from "../../../../../../../bridge/index.js";
 import type { Chain } from "../../../../../../../chains/types.js";
-import { defineChain } from "../../../../../../../chains/utils.js";
+import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import {
-  getPaySupportedDestinations,
-  getPaySupportedSources,
-} from "../../../../../../../pay/utils/definitions.js";
-import { getClientFetch } from "../../../../../../../utils/fetch.js";
-import { stringify } from "../../../../../../../utils/json.js";
+import type { Address } from "../../../../../../../utils/address.js";
 import { withCache } from "../../../../../../../utils/promise/withCache.js";
 
-type Response = {
-  result: Array<{
-    chainId: number;
-    tokens: Array<{
-      address: string;
-      buyWithCryptoEnabled: boolean;
-      buyWithFiatEnabled: boolean;
-      name: string;
-      symbol: string;
-    }>;
-  }>;
-};
-
 export type SupportedChainAndTokens = Array<{
   chain: Chain;
   tokens: Array<{
@@ -35,35 +19,73 @@ export type SupportedChainAndTokens = Array<{
   }>;
 }>;
 
-export async function fetchBuySupportedDestinations(
-  client: ThirdwebClient,
-  isTestMode?: boolean,
-): Promise<SupportedChainAndTokens> {
+async function fetchBuySupportedDestinations({
+  client,
+  originChainId,
+  originTokenAddress,
+}: {
+  client: ThirdwebClient;
+  originChainId?: number;
+  originTokenAddress?: Address;
+}): Promise<SupportedChainAndTokens> {
   return withCache(
     async () => {
-      const fetchWithHeaders = getClientFetch(client);
-      const res = await fetchWithHeaders(
-        `${getPaySupportedDestinations()}${isTestMode ? "?isTestMode=true" : ""}`,
-      );
-      if (!res.ok) {
-        const error = await res.text();
-        throw new Error(`Failed to fetch supported destinations: ${error}`);
+      const routes = await Bridge.routes({
+        client,
+        originChainId,
+        originTokenAddress,
+        maxSteps: 1,
+        sortBy: "popularity",
+        limit: 1000000,
+      });
+      const tokens = new Set<string>();
+      const chains = new Set<number>();
+      const destinationTokens: Record<
+        number,
+        Array<{
+          address: Address;
+          buyWithCryptoEnabled: boolean;
+          buyWithFiatEnabled: boolean;
+          name: string;
+          symbol: string;
+          icon?: string;
+        }>
+      > = [];
+      for (const route of routes) {
+        const key = `${route.destinationToken.chainId}:${route.destinationToken.address}`;
+        if (!tokens.has(key)) {
+          tokens.add(key);
+          if (!chains.has(route.destinationToken.chainId)) {
+            chains.add(route.destinationToken.chainId);
+          }
+          const existing = destinationTokens[route.destinationToken.chainId];
+          if (!existing) {
+            destinationTokens[route.destinationToken.chainId] = [];
+          }
+          destinationTokens[route.destinationToken.chainId] = [
+            ...(existing || []),
+            {
+              address: ox__Address.checksum(
+                route.destinationToken.address,
+              ) as Address,
+              // We support both options for all tokens
+              buyWithCryptoEnabled: true,
+              buyWithFiatEnabled: true,
+              name: route.destinationToken.name,
+              symbol: route.destinationToken.symbol,
+              icon: route.destinationToken.iconUri,
+            },
+          ];
+        }
       }
-      const data = (await res.json()) as Response;
-      if (!data.result) {
-        throw new Error(
-          `Failed to parse supported destinations: ${data ? stringify(data) : undefined}`,
-        );
-      }
-      return data.result.map((item) => ({
-        chain: defineChain({
-          id: item.chainId,
-        }),
-        tokens: item.tokens,
+
+      return [...chains].map((chainId) => ({
+        chain: getCachedChain(chainId),
+        tokens: destinationTokens[chainId] || [],
       }));
     },
     {
-      cacheKey: "destination-tokens",
+      cacheKey: `buy-supported-destinations-${originChainId}:${originTokenAddress}`,
       cacheTime: 5 * 60 * 1000,
     },
   );
@@ -74,12 +96,12 @@ export async function fetchBuySupportedDestinations(
  */
 export function useBuySupportedDestinations(
   client: ThirdwebClient,
-  isTestMode?: boolean,
+  _isTestMode?: boolean,
 ) {
   return useQuery({
     queryKey: ["destination-tokens", client],
     queryFn: async () => {
-      return fetchBuySupportedDestinations(client, isTestMode);
+      return fetchBuySupportedDestinations({ client });
     },
   });
 }
@@ -92,26 +114,59 @@ export function useBuySupportedSources(options: {
   return useQuery({
     queryKey: ["source-tokens", options],
     queryFn: async () => {
-      const fetchWithHeaders = getClientFetch(options.client);
-      const baseUrl = getPaySupportedSources();
+      const routes = await Bridge.routes({
+        client: options.client,
+        destinationChainId: options.destinationChainId,
+        destinationTokenAddress: options.destinationTokenAddress,
+        maxSteps: 1,
+        sortBy: "popularity",
+        limit: 50,
+      });
 
-      const url = new URL(baseUrl);
-      url.searchParams.append(
-        "destinationChainId",
-        options.destinationChainId.toString(),
-      );
-      url.searchParams.append(
-        "destinationTokenAddress",
-        options.destinationTokenAddress,
-      );
+      const tokens = new Set<string>();
+      const chains = new Set<number>();
+      const originTokens: Record<
+        number,
+        Array<{
+          address: Address;
+          buyWithCryptoEnabled: boolean;
+          buyWithFiatEnabled: boolean;
+          name: string;
+          symbol: string;
+          icon?: string;
+        }>
+      > = [];
+      for (const route of routes) {
+        const key = `${route.originToken.chainId}:${route.originToken.address}`;
+        if (!tokens.has(key)) {
+          tokens.add(key);
+          if (!chains.has(route.originToken.chainId)) {
+            chains.add(route.originToken.chainId);
+          }
+          const existing = originTokens[route.originToken.chainId];
+          if (!existing) {
+            originTokens[route.originToken.chainId] = [];
+          }
+          originTokens[route.originToken.chainId] = [
+            ...(existing || []),
+            {
+              address: ox__Address.checksum(
+                route.originToken.address,
+              ) as Address,
+              // We support both options for all tokens
+              buyWithCryptoEnabled: true,
+              buyWithFiatEnabled: true,
+              name: route.originToken.name,
+              symbol: route.originToken.symbol,
+              icon: route.originToken.iconUri,
+            },
+          ];
+        }
+      }
 
-      const res = await fetchWithHeaders(url.toString());
-      const data = (await res.json()) as Response;
-      return data.result.map((item) => ({
-        chain: defineChain({
-          id: item.chainId,
-        }),
-        tokens: item.tokens,
+      return [...chains].map((chainId) => ({
+        chain: getCachedChain(chainId),
+        tokens: originTokens[chainId] || [],
       }));
     },
   });