thirdweb 5.100.0-nightly-713ebe0a2d6d8a409e41ce0f0317fc34b1f221bb-20250520000414 → 5.100.1

package/src/pay/buyWithFiat/getStatus.ts

@@ -1,10 +1,9 @@
+import { status as onrampStatus } from "../../bridge/OnrampStatus.js";
 import type { ThirdwebClient } from "../../client/client.js";
-import { getClientFetch } from "../../utils/fetch.js";
 import type {
   PayOnChainTransactionDetails,
   PayTokenInfo,
 } from "../utils/commonTypes.js";
-import { getPayBuyWithFiatStatusEndpoint } from "../utils/definitions.js";
 
 /**
  * Parameters for the [`getBuyWithFiatStatus`](https://portal.thirdweb.com/references/typescript/v5/getBuyWithFiatStatus) function
@@ -25,11 +24,6 @@ export type GetBuyWithFiatStatusParams = {
   intentId: string;
 };
 
-export type ValidBuyWithFiatStatus = Exclude<
-  BuyWithFiatStatus,
-  { status: "NOT_FOUND" }
->;
-
 /**
  * The returned object from [`getBuyWithFiatStatus`](https://portal.thirdweb.com/references/typescript/v5/getBuyWithFiatStatus) function
  *
@@ -50,28 +44,13 @@ export type BuyWithFiatStatus =
        * - `NONE` - No status
        * - `PENDING_PAYMENT` - Payment is not done yet in the on-ramp provider
        * - `PAYMENT_FAILED` - Payment failed in the on-ramp provider
-       * - `PENDING_ON_RAMP_TRANSFER` - Payment is done but the on-ramp provider is yet to transfer the tokens to the user's wallet
-       * - `ON_RAMP_TRANSFER_IN_PROGRESS` - On-ramp provider is transferring the tokens to the user's wallet
        * - `ON_RAMP_TRANSFER_COMPLETED` - On-ramp provider has transferred the tokens to the user's wallet
-       * - `ON_RAMP_TRANSFER_FAILED` - On-ramp provider failed to transfer the tokens to the user's wallet
-       * - `CRYPTO_SWAP_REQUIRED` - On-ramp provider has sent the tokens to the user's wallet but a swap is required to convert it to the desired token
-       * - `CRYPTO_SWAP_IN_PROGRESS` - Swap is in progress
-       * - `CRYPTO_SWAP_COMPLETED` - Swap is completed and the user has received the desired token
-       * - `CRYPTO_SWAP_FALLBACK` - Swap failed and the user has received a fallback token which is not the desired token
        */
       status:
         | "NONE"
         | "PENDING_PAYMENT"
         | "PAYMENT_FAILED"
-        | "PENDING_ON_RAMP_TRANSFER"
-        | "ON_RAMP_TRANSFER_IN_PROGRESS"
-        | "ON_RAMP_TRANSFER_COMPLETED"
-        | "ON_RAMP_TRANSFER_FAILED"
-        | "CRYPTO_SWAP_REQUIRED"
-        | "CRYPTO_SWAP_COMPLETED"
-        | "CRYPTO_SWAP_FALLBACK"
-        | "CRYPTO_SWAP_IN_PROGRESS"
-        | "CRYPTO_SWAP_FAILED";
+        | "ON_RAMP_TRANSFER_COMPLETED";
       /**
        * The wallet address to which the desired tokens are sent to
        */
@@ -171,7 +150,6 @@ export type BuyWithFiatStatus =
  * })
  *
  * // when the fiatStatus.status is "ON_RAMP_TRANSFER_COMPLETED" - the process is complete
- * // when the fiatStatus.status is "CRYPTO_SWAP_REQUIRED" - start the swap process
  * ```
  * @deprecated
  * @buyCrypto
@@ -179,26 +157,107 @@ export type BuyWithFiatStatus =
 export async function getBuyWithFiatStatus(
   params: GetBuyWithFiatStatusParams,
 ): Promise<BuyWithFiatStatus> {
-  try {
-    const queryParams = new URLSearchParams({
-      intentId: params.intentId,
-    });
+  const result = await onrampStatus({
+    id: params.intentId,
+    client: params.client,
+  });
 
-    const queryString = queryParams.toString();
-    const url = `${getPayBuyWithFiatStatusEndpoint()}?${queryString}`;
+  return toBuyWithFiatStatus({ intentId: params.intentId, result });
+}
 
-    const response = await getClientFetch(params.client)(url);
+////////////////////////////////////////////////////////////////////////////////
+// Helpers
+////////////////////////////////////////////////////////////////////////////////
 
-    if (!response.ok) {
-      const error = await response.text().catch(() => null);
-      throw new Error(
-        `HTTP error! status: ${response.status} - ${response.statusText}: ${error || "unknown error"}`,
-      );
-    }
+function toBuyWithFiatStatus(args: {
+  intentId: string;
+  result: Awaited<ReturnType<typeof onrampStatus>>;
+}): BuyWithFiatStatus {
+  const { intentId, result } = args;
+
+  // Map status constants from the Bridge.Onramp.status response to BuyWithFiatStatus equivalents.
+  const STATUS_MAP: Record<
+    typeof result.status,
+    "NONE" | "PENDING_PAYMENT" | "PAYMENT_FAILED" | "ON_RAMP_TRANSFER_COMPLETED"
+  > = {
+    CREATED: "PENDING_PAYMENT",
+    PENDING: "PENDING_PAYMENT",
+    FAILED: "PAYMENT_FAILED",
+    COMPLETED: "ON_RAMP_TRANSFER_COMPLETED",
+  } as const;
+
+  const mappedStatus = STATUS_MAP[result.status];
+
+  return buildPlaceholderStatus({
+    intentId,
+    status: mappedStatus,
+    purchaseData: result.purchaseData,
+  });
+}
+
+function buildPlaceholderStatus(args: {
+  intentId: string;
+  status:
+    | "NONE"
+    | "PENDING_PAYMENT"
+    | "PAYMENT_FAILED"
+    | "ON_RAMP_TRANSFER_COMPLETED";
+  purchaseData?: unknown;
+}): BuyWithFiatStatus {
+  const { intentId, status, purchaseData } = args;
+
+  // Build a minimal—but type-complete—object that satisfies BuyWithFiatStatus.
+  const emptyToken: PayTokenInfo = {
+    chainId: 0,
+    tokenAddress: "",
+    decimals: 18,
+    priceUSDCents: 0,
+    name: "",
+    symbol: "",
+  };
+
+  type BuyWithFiatStatusWithData = Exclude<
+    BuyWithFiatStatus,
+    { status: "NOT_FOUND" }
+  >;
+
+  const quote: BuyWithFiatStatusWithData["quote"] = {
+    estimatedOnRampAmount: "0",
+    estimatedOnRampAmountWei: "0",
+
+    estimatedToTokenAmount: "0",
+    estimatedToTokenAmountWei: "0",
+
+    fromCurrency: {
+      amount: "0",
+      amountUnits: "USD",
+      decimals: 2,
+      currencySymbol: "USD",
+    },
+    fromCurrencyWithFees: {
+      amount: "0",
+      amountUnits: "USD",
+      decimals: 2,
+      currencySymbol: "USD",
+    },
+    onRampToken: emptyToken,
+    toToken: emptyToken,
+    estimatedDurationSeconds: 0,
+    createdAt: new Date().toISOString(),
+  } as BuyWithFiatStatusWithData["quote"];
+
+  // The source/destination fields can only be filled accurately when extra context is returned
+  // by the API. Since Bridge.Onramp.status doesn't yet provide these details, we omit them for
+  // now (they are optional).
+
+  const base: Exclude<BuyWithFiatStatus, { status: "NOT_FOUND" }> = {
+    intentId,
+    status,
+    toAddress: "",
+    fromAddress: "",
+    quote,
+    purchaseData: purchaseData as object | undefined,
+  };
 
-    return (await response.json()).result;
-  } catch (error) {
-    console.error("Fetch error:", error);
-    throw new Error(`Fetch failed: ${error}`);
-  }
+  return base;
 }

package/src/pay/convert/cryptoToFiat.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 { convertCryptoToFiat } from "./cryptoToFiat.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("Pay: crypto-to-fiat", () => {
@@ -49,7 +51,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("Pay: crypto-to-fiat", () => {
     expect(data.result).toBe(0);
   });
 
-  it("should throw error for testnet chain (because testnets are not supported", async () => {
+  it("should throw error for testnet chain (because testnets are not supported)", async () => {
     await expect(
       convertCryptoToFiat({
         chain: sepolia,
@@ -81,13 +83,13 @@ describe.runIf(process.env.TW_SECRET_KEY)("Pay: crypto-to-fiat", () => {
     await expect(
       convertCryptoToFiat({
         chain: base,
-        fromTokenAddress: TEST_ACCOUNT_A.address,
+        fromTokenAddress: ZERO_ADDRESS,
         fromAmount: 1,
         to: "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/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,20 +7,6 @@ const getPayBaseUrl = () => {
     : `https://${payDomain}`;
 };
 
-/**
- * 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

package/src/react/core/hooks/auth/useSiweAuth.ts

@@ -97,7 +97,7 @@ export function useSiweAuth(
         import("../../../../auth/core/sign-login-payload.js"),
       ]);
 
-      if (payload.chain_id) {
+      if (payload.chain_id && Number(payload.chain_id) !== chain.id) {
         await activeWallet.switchChain(
           getCachedChain(Number(payload.chain_id)),
         );

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

@@ -104,6 +104,7 @@ export type SendTransactionConfig = {
 };
 
 export type ShowModalData = {
+  mode: "buy" | "deposit";
   tx: PreparedTransaction;
   sendTx: () => void;
   rejectTx: (reason: Error) => void;
@@ -184,47 +185,6 @@ export function useSendTransactionCore(args: {
               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
-              sendTx();
-              return;
-            }
-
-            if (supportedDestinations.length === 0) {
-              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",
-                }),
-              });
-              // chain/token not supported, just send the tx
-              sendTx();
-              return;
-            }
-
             const nativeValue = _nativeValue || 0n;
             const erc20Value = _erc20Value?.amountWei || 0n;
 
@@ -256,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";
@@ -14,14 +13,10 @@ import { Spacer } from "../components/Spacer.js";
 import { Container, Line, ModalHeader } from "../components/basic.js";
 import { ButtonLink } from "../components/buttons.js";
 import type { ConnectLocale } from "./locale/types.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
  */
@@ -33,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();
@@ -51,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">
@@ -80,40 +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",
-            // },
-            // 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/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",