thirdweb 5.99.3 → 5.100.0

package/src/pay/convert/fiatToCrypto.test.ts

@@ -1,10 +1,12 @@
 import { describe, expect, it, vi } from "vitest";
 import { TEST_CLIENT } from "~test/test-clients.js";
-import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
 import { base } from "../../chains/chain-definitions/base.js";
 import { ethereum } from "../../chains/chain-definitions/ethereum.js";
 import { sepolia } from "../../chains/chain-definitions/sepolia.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../constants/addresses.js";
+import {
+  NATIVE_TOKEN_ADDRESS,
+  ZERO_ADDRESS,
+} from "../../constants/addresses.js";
 import { convertFiatToCrypto } from "./fiatToCrypto.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("Pay: fiatToCrypto", () => {
@@ -84,13 +86,13 @@ describe.runIf(process.env.TW_SECRET_KEY)("Pay: fiatToCrypto", () => {
     await expect(
       convertFiatToCrypto({
         chain: base,
-        to: TEST_ACCOUNT_A.address,
+        to: ZERO_ADDRESS,
         fromAmount: 1,
         from: "USD",
         client: TEST_CLIENT,
       }),
     ).rejects.toThrowError(
-      `Error: ${TEST_ACCOUNT_A.address} on chainId: ${base.id} is not a valid contract address.`,
+      `Error: ${ZERO_ADDRESS} on chainId: ${base.id} is not a valid contract address.`,
     );
   });
   it("should throw if response is not OK", async () => {

package/src/pay/utils/commonTypes.ts

@@ -19,4 +19,4 @@ export type PayOnChainTransactionDetails = {
 
 export type FiatProvider = (typeof FiatProviders)[number];
 
-export const FiatProviders = ["COINBASE", "STRIPE", "TRANSAK", "KADO"] as const;
+export const FiatProviders = ["COINBASE", "STRIPE", "TRANSAK"] as const;

package/src/pay/utils/definitions.ts

@@ -7,40 +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
- */
-export const getPayBuyWithFiatQuoteEndpoint = () =>
-  `${getPayBaseUrl()}/buy-with-fiat/quote/v1`;
-
-/**
- * Endpoint to get the status of a "Buy with Fiat" transaction status.
- * @internal
- */
-export const getPayBuyWithFiatStatusEndpoint = () =>
-  `${getPayBaseUrl()}/buy-with-fiat/status/v1`;
-
 /**
  * Endpoint to get history of "Buy with Fiat" transactions for given wallet address.
  * @internal
@@ -55,20 +21,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/pay/useBuyWithFiatStatus.ts

@@ -51,9 +51,7 @@ export function useBuyWithFiatStatus(
       const data = query.state.data as BuyWithFiatStatus;
       const status = data?.status;
       if (
-        status === "ON_RAMP_TRANSFER_FAILED" ||
         status === "PAYMENT_FAILED" ||
-        status === "CRYPTO_SWAP_COMPLETED" ||
         // onRampToken and toToken being the same means there is no additional swap step
         (status === "ON_RAMP_TRANSFER_COMPLETED" &&
           data?.quote.toToken.chainId === data?.quote.onRampToken.chainId &&

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";
@@ -104,6 +104,7 @@ export type SendTransactionConfig = {
 };
 
 export type ShowModalData = {
+  mode: "buy" | "deposit";
   tx: PreparedTransaction;
   sendTx: () => void;
   rejectTx: (reason: Error) => void;
@@ -179,57 +180,10 @@ 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;
-                }),
-              ]);
-
-            if (!supportedDestinations) {
-              // could not fetch supported destinations, just send the tx
-              sendTx();
-              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(),
-                    ),
-                ))
-            ) {
-              trackPayEvent({
-                client: tx.client,
-                walletAddress: account.address,
-                walletType: wallet?.id,
-                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`,
-              });
-              // chain/token not supported, just send the tx
-              sendTx();
-              return;
-            }
+            const [_nativeValue, _erc20Value] = await Promise.all([
+              resolvePromisedValue(tx.value),
+              resolvePromisedValue(tx.erc20Value),
+            ]);
 
             const nativeValue = _nativeValue || 0n;
             const erc20Value = _erc20Value?.amountWei || 0n;
@@ -262,7 +216,54 @@ export function useSendTransactionCore(args: {
               (nativeCost > 0n && nativeBalance.value < nativeCost);
 
             if (shouldShowModal) {
+              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 ||
+                supportedDestinations.length === 0
+              ) {
+                // not a supported destination -> show deposit screen
+                trackPayEvent({
+                  client: tx.client,
+                  walletAddress: account.address,
+                  walletType: wallet?.id,
+                  toChainId: tx.chain.id,
+                  toToken: _erc20Value?.tokenAddress || undefined,
+                  event: "pay_transaction_modal_chain_token_not_supported",
+                  error: JSON.stringify({
+                    chain: tx.chain.id,
+                    token: _erc20Value?.tokenAddress,
+                    message: "chain/token not supported",
+                  }),
+                });
+
+                showPayModal({
+                  mode: "deposit",
+                  tx,
+                  sendTx,
+                  rejectTx: reject,
+                  resolveTx: resolve,
+                });
+                return;
+              }
+
+              // chain is supported, show buy mode
               showPayModal({
+                mode: "buy",
                 tx,
                 sendTx,
                 rejectTx: reject,

package/src/react/core/utils/wallet.ts

@@ -244,6 +244,21 @@ export function hasSponsoredTransactionsEnabled(wallet: Wallet | undefined) {
         sponsoredTransactionsEnabled = smartOptions.gasless;
       }
     }
+    if (options?.executionMode) {
+      const execMode = options.executionMode;
+      if (execMode.mode === "EIP4337") {
+        const smartOptions = execMode.smartAccount;
+        if (smartOptions && "sponsorGas" in smartOptions) {
+          sponsoredTransactionsEnabled = smartOptions.sponsorGas;
+        }
+        if (smartOptions && "gasless" in smartOptions) {
+          sponsoredTransactionsEnabled = smartOptions.gasless;
+        }
+      }
+      if (execMode.mode === "EIP7702") {
+        sponsoredTransactionsEnabled = execMode.sponsorGas || false;
+      }
+    }
   }
   return sponsoredTransactionsEnabled;
 }

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -121,6 +121,7 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
         localeId={payModal?.locale || "en_US"}
         supportedTokens={payModal?.supportedTokens}
         theme={payModal?.theme || "dark"}
+        modalMode={data.mode}
         payOptions={{
           buyWithCrypto: payModal?.buyWithCrypto,
           buyWithFiat: payModal?.buyWithFiat,

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
-import { useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { formatExplorerAddressUrl } from "../../../../utils/url.js";
 import { iconSize } from "../../../core/design-system/index.js";
@@ -11,21 +10,13 @@ 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";
 import { WalletTransactionHistory } from "./screens/WalletTransactionHistory.js";
 import type { WalletDetailsModalScreen } from "./screens/types.js";
 
-//
-
 /**
  * @internal
  */
@@ -37,10 +28,6 @@ export function TransactionsScreen(props: {
   locale: ConnectLocale;
   client: ThirdwebClient;
 }) {
-  const [activeTab, setActiveTab] = useState("Transactions");
-  // For now, you can only select pay transactions (purcahses)
-  const [selectedTx, setSelectedTx] = useState<TxStatusInfo | null>(null);
-
   const activeChain = useActiveWalletChain();
   const activeWallet = useActiveWallet();
   const activeAccount = useActiveAccount();
@@ -55,21 +42,6 @@ export function TransactionsScreen(props: {
     return <LoadingScreen />;
   }
 
-  if (selectedTx) {
-    return (
-      <TxDetailsScreen
-        title={props.title}
-        client={props.client}
-        statusInfo={selectedTx}
-        onBack={() => setSelectedTx(null)}
-        onDone={() => setSelectedTx(null)}
-        payer={payer}
-        transactionMode={false}
-        isEmbed={false}
-      />
-    );
-  }
-
   return (
     <Container animate="fadein">
       <Container p="lg">
@@ -84,42 +56,11 @@ export function TransactionsScreen(props: {
         }}
       >
         <Spacer y="md" />
-        <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>
+        <WalletTransactionHistory
+          locale={props.locale}
+          client={props.client}
+          address={payer.account.address}
+        />
       </Container>
       <Line />
       <Container p="lg">

package/src/react/web/ui/ConnectWallet/locale/en.ts

@@ -68,7 +68,7 @@ const connectLocaleEn: ConnectLocale = {
   },
   receiveFundsScreen: {
     title: "Receive Funds",
-    instruction: "Copy the wallet address to send funds to this wallet",
+    instruction: "Copy the address to send funds to this wallet",
   },
   sendFundsScreen: {
     title: "Send Funds",

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();