thirdweb 5.99.2 → 5.100.0-nightly-713ebe0a2d6d8a409e41ce0f0317fc34b1f221bb-20250520000414

package/src/pay/buyWithCrypto/getTransfer.ts

@@ -1,17 +1,13 @@
-import type { Hash } from "viem";
+import { Value } from "ox";
+import * as ox__AbiFunction from "ox/AbiFunction";
+import { Transfer } from "../../bridge/index.js";
 import { getCachedChain } from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../constants/addresses.js";
+import { getContract } from "../../contract/contract.js";
+import { decimals } from "../../extensions/erc20/read/decimals.js";
 import type { PrepareTransactionOptions } from "../../transaction/prepare-transaction.js";
-import type { Address } from "../../utils/address.js";
-import { getClientFetch } from "../../utils/fetch.js";
-import { stringify } from "../../utils/json.js";
-import { getPayBuyWithCryptoTransferEndpoint } from "../utils/definitions.js";
-import type {
-  QuoteApprovalInfo,
-  QuotePaymentToken,
-  QuoteTokenInfo,
-  QuoteTransactionRequest,
-} from "./commonTypes.js";
+import type { QuoteApprovalInfo, QuotePaymentToken } from "./commonTypes.js";
 
 /**
  * The parameters for [`getBuyWithCryptoTransfer`](https://portal.thirdweb.com/references/typescript/v5/getBuyWithCryptoTransfer) function
@@ -66,21 +62,6 @@ export type GetBuyWithCryptoTransferParams = {
   feePayer?: "sender" | "receiver";
 };
 
-/**
- * @buyCrypto
- */
-type BuyWithCryptoTransferResponse = {
-  quoteId: string;
-  transactionRequest: QuoteTransactionRequest;
-  approval?: QuoteApprovalInfo;
-  fromAddress: string;
-  toAddress: string;
-  token: QuoteTokenInfo;
-  paymentToken: QuotePaymentToken;
-  processingFee: QuotePaymentToken;
-  estimatedGasCostUSDCents: number;
-};
-
 /**
  * @buyCrypto
  */
@@ -126,50 +107,137 @@ export async function getBuyWithCryptoTransfer(
   params: GetBuyWithCryptoTransferParams,
 ): Promise<BuyWithCryptoTransfer> {
   try {
-    const clientFetch = getClientFetch(params.client);
-
-    const response = await clientFetch(getPayBuyWithCryptoTransferEndpoint(), {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: stringify({
-        fromAddress: params.fromAddress,
-        toAddress: params.toAddress,
-        chainId: params.chainId,
-        tokenAddress: params.tokenAddress,
-        amount: params.amount,
-        purchaseData: params.purchaseData,
-        feePayer: params.feePayer,
-      }),
+    const tokenContract = getContract({
+      address: params.tokenAddress,
+      chain: getCachedChain(params.chainId),
+      client: params.client,
+    });
+    const tokenDecimals =
+      tokenContract.address.toLowerCase() === NATIVE_TOKEN_ADDRESS
+        ? 18
+        : await decimals({
+            contract: tokenContract,
+          });
+    const amount = Value.from(params.amount, tokenDecimals);
+    const quote = await Transfer.prepare({
+      chainId: params.chainId,
+      tokenAddress: params.tokenAddress,
+      amount,
+      sender: params.fromAddress,
+      receiver: params.toAddress,
+      client: params.client,
+      feePayer: params.feePayer,
     });
 
-    if (!response.ok) {
-      const errorObj = await response.json();
-      if (errorObj && "error" in errorObj) {
-        throw errorObj;
-      }
-      throw new Error(`HTTP error! status: ${response.status}`);
+    const firstStep = quote.steps[0];
+    if (!firstStep) {
+      throw new Error(
+        "This quote is incompatible with getBuyWithCryptoTransfer. Please use Bridge.Transfer.prepare instead.",
+      );
     }
 
-    const data: BuyWithCryptoTransferResponse = (await response.json()).result;
+    const approvalTxs = firstStep.transactions.filter(
+      (tx) => tx.action === "approval",
+    );
+    if (approvalTxs.length > 1) {
+      throw new Error(
+        "This quote is incompatible with getBuyWithCryptoTransfer. Please use Bridge.Transfer.prepare instead.",
+      );
+    }
+    const approvalTx = approvalTxs[0];
+
+    let approvalData: QuoteApprovalInfo | undefined;
+    if (approvalTx) {
+      const abiFunction = ox__AbiFunction.from([
+        "function approve(address spender, uint256 amount)",
+      ]);
+      const [spender, amount] = ox__AbiFunction.decodeData(
+        abiFunction,
+        approvalTx.data,
+      );
+      approvalData = {
+        chainId: firstStep.originToken.chainId,
+        tokenAddress: firstStep.originToken.address,
+        spenderAddress: spender,
+        amountWei: amount.toString(),
+      };
+    }
+
+    const txs = firstStep.transactions.filter((tx) => tx.action !== "approval");
+    if (txs.length > 1) {
+      throw new Error(
+        "This quote is incompatible with getBuyWithCryptoTransfer. Please use Bridge.Transfer.prepare instead.",
+      );
+    }
+    const tx = txs[0];
+    if (!tx) {
+      throw new Error(
+        "This quote is incompatible with getBuyWithCryptoTransfer. Please use Bridge.Transfer.prepare instead.",
+      );
+    }
 
     const transfer: BuyWithCryptoTransfer = {
       transactionRequest: {
-        chain: getCachedChain(data.transactionRequest.chainId),
-        client: params.client,
-        data: data.transactionRequest.data as Hash,
-        to: data.transactionRequest.to as Address,
-        value: BigInt(data.transactionRequest.value),
+        ...tx,
         extraGas: 50000n, // extra gas buffer
       },
-      approvalData: data.approval,
-      fromAddress: data.fromAddress,
-      toAddress: data.toAddress,
-      paymentToken: data.paymentToken,
-      processingFee: data.processingFee,
-      estimatedGasCostUSDCents: data.estimatedGasCostUSDCents,
+      approvalData,
+      fromAddress: params.fromAddress,
+      toAddress: params.toAddress,
+      paymentToken: {
+        token: {
+          tokenAddress: firstStep.originToken.address,
+          chainId: firstStep.originToken.chainId,
+          decimals: firstStep.originToken.decimals,
+          symbol: firstStep.originToken.symbol,
+          name: firstStep.originToken.name,
+          priceUSDCents: firstStep.originToken.priceUsd * 100,
+        },
+        amountWei: quote.originAmount.toString(),
+        amount: Value.format(
+          quote.originAmount,
+          firstStep.originToken.decimals,
+        ).toString(),
+        amountUSDCents:
+          Number(
+            Value.format(quote.originAmount, firstStep.originToken.decimals),
+          ) *
+          firstStep.originToken.priceUsd *
+          100,
+      },
+      processingFee: {
+        token: {
+          tokenAddress: firstStep.originToken.address,
+          chainId: firstStep.originToken.chainId,
+          decimals: firstStep.originToken.decimals,
+          symbol: firstStep.originToken.symbol,
+          name: firstStep.originToken.name,
+          priceUSDCents: firstStep.originToken.priceUsd * 100,
+        },
+        amountWei:
+          params.feePayer === "sender"
+            ? (quote.originAmount - quote.destinationAmount).toString()
+            : "0",
+        amount:
+          params.feePayer === "sender"
+            ? Value.format(
+                quote.originAmount - quote.destinationAmount,
+                firstStep.originToken.decimals,
+              ).toString()
+            : "0",
+        amountUSDCents:
+          params.feePayer === "sender"
+            ? Number(
+                Value.format(
+                  quote.originAmount - quote.destinationAmount,
+                  firstStep.originToken.decimals,
+                ),
+              ) *
+              firstStep.originToken.priceUsd *
+              100
+            : 0,
+      },
+      estimatedGasCostUSDCents: 0,
       client: params.client,
     };
 

package/src/pay/utils/definitions.ts

@@ -7,26 +7,6 @@ const getPayBaseUrl = () => {
     : `https://${payDomain}`;
 };
 
-/**
- * Endpoint to get the status of a "Buy with Crypto" quote.
- * @internal
- */
-export const getPayBuyWithCryptoStatusUrl = () =>
-  `${getPayBaseUrl()}/buy-with-crypto/status/v1`;
-/**
- * Endpoint to get "Buy with Crypto" quote.
- * @internal
- */
-export const getPayBuyWithCryptoQuoteEndpoint = () =>
-  `${getPayBaseUrl()}/buy-with-crypto/quote/v1`;
-
-/**
- * Endpoint to get "Buy with Crypto" transfer.
- * @internal
- */
-export const getPayBuyWithCryptoTransferEndpoint = () =>
-  `${getPayBaseUrl()}/buy-with-crypto/transfer/v1`;
-
 /**
  * Endpoint to get a "Buy with Fiat" quote.
  * @internal
@@ -55,20 +35,6 @@ export const getPayBuyWithFiatHistoryEndpoint = () =>
 export const getPayBuyWithCryptoHistoryEndpoint = () =>
   `${getPayBaseUrl()}/buy-with-crypto/history/v1`;
 
-/**
- * Endpoint to get a list of supported destination chains and tokens for thirdweb pay.
- * @internal
- */
-export const getPaySupportedDestinations = () =>
-  `${getPayBaseUrl()}/destination-tokens/v1`;
-
-/**
- * Endpoint to get a list of supported source chains + tokens for thirdweb pay.
- * @internal
- */
-export const getPaySupportedSources = () =>
-  `${getPayBaseUrl()}/buy-with-crypto/source-tokens/v1`;
-
 /**
  * Endpoint to get buy history for a given wallet address.
  * This includes both "Buy with Crypto" and "Buy with Fiat" transactions.

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -1,5 +1,6 @@
 import { type UseMutationResult, useMutation } from "@tanstack/react-query";
 import { trackPayEvent } from "../../../../analytics/track/pay.js";
+import * as Bridge from "../../../../bridge/index.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
@@ -14,7 +15,6 @@ import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { getTokenBalance } from "../../../../wallets/utils/getTokenBalance.js";
 import { getWalletBalance } from "../../../../wallets/utils/getWalletBalance.js";
-import { fetchBuySupportedDestinations } from "../../../web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.js";
 import type { LocaleId } from "../../../web/ui/types.js";
 import type { Theme } from "../../design-system/index.js";
 import type { SupportedTokens } from "../../utils/defaultTokens.js";
@@ -179,22 +179,26 @@ export function useSendTransactionCore(args: {
 
         (async () => {
           try {
-            const [_nativeValue, _erc20Value, supportedDestinations] =
-              await Promise.all([
-                resolvePromisedValue(tx.value),
-                resolvePromisedValue(tx.erc20Value),
-                fetchBuySupportedDestinations(tx.client).catch((err) => {
-                  trackPayEvent({
-                    client: tx.client,
-                    walletAddress: account.address,
-                    walletType: wallet?.id,
-                    toChainId: tx.chain.id,
-                    event: "pay_transaction_modal_pay_api_error",
-                    error: err?.message,
-                  });
-                  return null;
-                }),
-              ]);
+            const [_nativeValue, _erc20Value] = await Promise.all([
+              resolvePromisedValue(tx.value),
+              resolvePromisedValue(tx.erc20Value),
+            ]);
+
+            const supportedDestinations = await Bridge.routes({
+              client: tx.client,
+              destinationChainId: tx.chain.id,
+              destinationTokenAddress: _erc20Value?.tokenAddress,
+            }).catch((err) => {
+              trackPayEvent({
+                client: tx.client,
+                walletAddress: account.address,
+                walletType: wallet?.id,
+                toChainId: tx.chain.id,
+                event: "pay_transaction_modal_pay_api_error",
+                error: err?.message,
+              });
+              return null;
+            });
 
             if (!supportedDestinations) {
               // could not fetch supported destinations, just send the tx
@@ -202,21 +206,7 @@ export function useSendTransactionCore(args: {
               return;
             }
 
-            if (
-              !supportedDestinations
-                .map((x) => x.chain.id)
-                .includes(tx.chain.id) ||
-              (_erc20Value &&
-                !supportedDestinations.some(
-                  (x) =>
-                    x.chain.id === tx.chain.id &&
-                    x.tokens.find(
-                      (t) =>
-                        t.address.toLowerCase() ===
-                        _erc20Value.tokenAddress.toLowerCase(),
-                    ),
-                ))
-            ) {
+            if (supportedDestinations.length === 0) {
               trackPayEvent({
                 client: tx.client,
                 walletAddress: account.address,
@@ -224,7 +214,11 @@ export function useSendTransactionCore(args: {
                 toChainId: tx.chain.id,
                 toToken: _erc20Value?.tokenAddress || undefined,
                 event: "pay_transaction_modal_chain_token_not_supported",
-                error: `chain ${tx.chain.id} ${_erc20Value ? `/ token ${_erc20Value?.tokenAddress}` : ""} not supported`,
+                error: JSON.stringify({
+                  chain: tx.chain.id,
+                  token: _erc20Value?.tokenAddress,
+                  message: "chain/token not supported",
+                }),
               });
               // chain/token not supported, just send the tx
               sendTx();

package/src/react/web/ui/ConnectWallet/TransactionsScreen.tsx

@@ -11,13 +11,9 @@ import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js"
 import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
 import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
 import { Spacer } from "../components/Spacer.js";
-import Tabs from "../components/Tabs.js";
 import { Container, Line, ModalHeader } from "../components/basic.js";
 import { ButtonLink } from "../components/buttons.js";
-import { CoinsIcon } from "./icons/CoinsIcon.js";
-import { FundsIcon } from "./icons/FundsIcon.js";
 import type { ConnectLocale } from "./locale/types.js";
-import { PayTxHistoryList } from "./screens/Buy/pay-transactions/BuyTxHistory.js";
 import { TxDetailsScreen } from "./screens/Buy/pay-transactions/TxDetailsScreen.js";
 import type { TxStatusInfo } from "./screens/Buy/pay-transactions/useBuyTransactionsToShow.js";
 import type { PayerInfo } from "./screens/Buy/types.js";
@@ -37,7 +33,7 @@ export function TransactionsScreen(props: {
   locale: ConnectLocale;
   client: ThirdwebClient;
 }) {
-  const [activeTab, setActiveTab] = useState("Transactions");
+  // const [activeTab, setActiveTab] = useState("Transactions");
   // For now, you can only select pay transactions (purcahses)
   const [selectedTx, setSelectedTx] = useState<TxStatusInfo | null>(null);
 
@@ -84,42 +80,40 @@ export function TransactionsScreen(props: {
         }}
       >
         <Spacer y="md" />
-        <Tabs
-          options={[
-            {
+        {/* <Tabs */}
+        {/* options={[ */}
+        {/* { 
               label: (
                 <span className="flex gap-2">
                   <CoinsIcon size={iconSize.sm} /> Transactions
                 </span>
               ),
               value: "Transactions",
-            },
-            {
-              label: (
-                <span className="flex gap-2">
-                  <FundsIcon size={iconSize.sm} /> Purchases
-                </span>
-              ),
-              value: "Purchases",
-            },
-          ]}
-          selected={activeTab}
-          onSelect={setActiveTab}
-        >
-          {activeTab === "Purchases" && (
-            <PayTxHistoryList
-              client={props.client}
-              onSelectTx={setSelectedTx}
-            />
-          )}
-          {activeTab === "Transactions" && (
-            <WalletTransactionHistory
-              locale={props.locale}
-              client={props.client}
-              address={payer.account.address}
-            />
-          )}
-        </Tabs>
+            // },
+            // TODO (UB): add back in once we have a way to show purchases with new service
+            // {
+            //   label: (
+            //     <span className="flex gap-2">
+            //       <FundsIcon size={iconSize.sm} /> Purchases
+            //     </span>
+            //   ),
+            //   value: "Purchases",
+            // },
+          // ]}
+          // selected={activeTab}
+          // onSelect={setActiveTab}
+        {/* > */}
+        {/* {activeTab === "Purchases" && ( */}
+        {/* <PayTxHistoryList client={props.client} onSelectTx={setSelectedTx} /> */}
+        {/* )} */}
+        {/* {activeTab === "Transactions" && ( */}
+        <WalletTransactionHistory
+          locale={props.locale}
+          client={props.client}
+          address={payer.account.address}
+        />
+        {/* })} */}
+        {/* </Tabs> */}
       </Container>
       <Line />
       <Container p="lg">

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -436,7 +436,9 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         tokenList={(
           (toChain?.id ? destinationSupportedTokens[toChain.id] : undefined) ||
           []
-        ).filter((x) => x.address !== NATIVE_TOKEN_ADDRESS)}
+        ).filter(
+          (x) => x.address.toLowerCase() !== NATIVE_TOKEN_ADDRESS.toLowerCase(),
+        )}
         onTokenSelect={(tokenInfo) => {
           setToToken(tokenInfo);
           goBack();

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

@@ -1,17 +1,5 @@
-import { type UseQueryOptions, useQueries } from "@tanstack/react-query";
-import { useState, useSyncExternalStore } from "react";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import {
-  type ValidBuyWithCryptoStatus,
-  getBuyWithCryptoStatus,
-} from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import {
-  type ValidBuyWithFiatStatus,
-  getBuyWithFiatStatus,
-} from "../../../../../../../pay/buyWithFiat/getStatus.js";
-import { useBuyHistory } from "../../../../../../core/hooks/pay/useBuyHistory.js";
-import { useActiveAccount } from "../../../../../../core/hooks/wallets/useActiveAccount.js";
-import { pendingTransactions } from "../swap/pendingSwapTx.js";
+import type { ValidBuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
+import type { ValidBuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 
 export type TxStatusInfo =
   | {
@@ -22,170 +10,3 @@ export type TxStatusInfo =
       type: "fiat";
       status: ValidBuyWithFiatStatus;
     };
-
-export function useBuyTransactionsToShow(client: ThirdwebClient) {
-  const account = useActiveAccount();
-  const [pageIndex, setPageIndex] = useState(0);
-  const txStatusList: TxStatusInfo[] = [];
-  const PAGE_SIZE = 10;
-
-  const buyHistory = useBuyHistory(
-    {
-      walletAddress: account?.address || "",
-      start: pageIndex * PAGE_SIZE,
-      count: PAGE_SIZE,
-      client,
-    },
-    {
-      refetchInterval: 10 * 1000, // 10 seconds
-    },
-  );
-
-  const pendingTxStoreValue = useSyncExternalStore(
-    pendingTransactions.subscribe,
-    pendingTransactions.getValue,
-  );
-
-  const pendingStatusQueries = useQueries<
-    UseQueryOptions<TxStatusInfo | null>[]
-  >({
-    queries: pendingTxStoreValue.map((tx) => {
-      return {
-        queryKey: ["pending-tx-status", tx],
-        queryFn: async () => {
-          if (tx.type === "swap") {
-            const swapStatus = await getBuyWithCryptoStatus({
-              client: client,
-              transactionHash: tx.txHash,
-              chainId: tx.chainId,
-            });
-
-            if (
-              swapStatus.status === "NOT_FOUND" ||
-              swapStatus.status === "NONE"
-            ) {
-              return null;
-            }
-
-            return {
-              type: "swap",
-              status: swapStatus,
-            };
-          }
-
-          const fiatStatus = await getBuyWithFiatStatus({
-            client: client,
-            intentId: tx.intentId,
-          });
-
-          if (
-            fiatStatus.status === "NOT_FOUND" ||
-            fiatStatus.status === "NONE"
-          ) {
-            return null;
-          }
-
-          return {
-            type: "fiat",
-            status: fiatStatus,
-          };
-        },
-        refetchInterval: 10 * 1000, // 10 seconds
-      };
-    }),
-  });
-
-  if (pendingStatusQueries.length > 0 && pageIndex === 0) {
-    for (const query of pendingStatusQueries) {
-      if (query.data) {
-        const txStatusInfo = query.data;
-
-        // if already present in endpoint - don't add it
-        if (buyHistory.data) {
-          if (txStatusInfo.type === "swap") {
-            const isPresent = buyHistory.data.page.find((tx) => {
-              if (
-                "buyWithCryptoStatus" in tx &&
-                tx.buyWithCryptoStatus.status !== "NOT_FOUND"
-              ) {
-                return (
-                  tx.buyWithCryptoStatus.source?.transactionHash ===
-                  txStatusInfo.status.source?.transactionHash
-                );
-              }
-              return false;
-            });
-
-            if (!isPresent) {
-              txStatusList.push(txStatusInfo);
-            }
-          }
-
-          if (txStatusInfo.type === "fiat") {
-            const isPresent = buyHistory.data.page.find((tx) => {
-              if (
-                "buyWithFiatStatus" in tx &&
-                tx.buyWithFiatStatus.status !== "NOT_FOUND"
-              ) {
-                return (
-                  tx.buyWithFiatStatus.intentId === txStatusInfo.status.intentId
-                );
-              }
-              return false;
-            });
-
-            if (!isPresent) {
-              txStatusList.push(txStatusInfo);
-            }
-          }
-        } else {
-          // if no buy history available for this walllet - add without duplicate check
-          txStatusList.push(txStatusInfo);
-        }
-      }
-    }
-  }
-
-  if (buyHistory.data) {
-    for (const tx of buyHistory.data.page) {
-      if ("buyWithCryptoStatus" in tx) {
-        if (
-          tx.buyWithCryptoStatus.status !== "NOT_FOUND" &&
-          tx.buyWithCryptoStatus.status !== "NONE"
-        ) {
-          txStatusList.push({
-            type: "swap",
-            status: tx.buyWithCryptoStatus,
-          });
-        }
-      } else {
-        if (
-          tx.buyWithFiatStatus.status !== "NOT_FOUND" &&
-          tx.buyWithFiatStatus.status !== "NONE"
-        ) {
-          txStatusList.push({
-            type: "fiat",
-            status: tx.buyWithFiatStatus,
-          });
-        }
-      }
-    }
-  }
-
-  const hidePagination =
-    !buyHistory.data ||
-    (buyHistory.data && !buyHistory.data.hasNextPage && pageIndex === 0);
-
-  return {
-    pageIndex,
-    setPageIndex,
-    txInfosToShow: txStatusList,
-    hidePagination,
-    isLoading: buyHistory.isLoading,
-    pagination: buyHistory.data
-      ? {
-          hasNextPage: buyHistory.data.hasNextPage,
-        }
-      : undefined,
-  };
-}

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) {