thirdweb 5.96.5-nightly-c137dd653c3640874f3cc953f4514c51f08c1ae9-20250429000412 → 5.96.6

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

@@ -1,4 +1,5 @@
 import { useContext } from "react";
+import { randomBytesHex } from "../../../../utils/random.js";
 import {
   type SendTransactionConfig,
   type ShowModalData,
@@ -106,6 +107,7 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
     setRootEl(
       <TransactionModal
         title={payModal?.metadata?.name || "Transaction"}
+        txId={randomBytesHex()}
         tx={data.tx}
         onComplete={data.sendTx}
         onClose={() => {

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

@@ -1,5 +1,6 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useMemo, useState } from "react";
+import { trackPayEvent } from "../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../chains/types.js";
 import { getCachedChain } from "../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
@@ -895,6 +896,15 @@ function MainScreen(props: {
                       backScreen: { id: "main" },
                     });
                   }
+                  trackPayEvent({
+                    event: "choose_payment_method_fund_wallet_mode",
+                    client,
+                    walletAddress: payerAccount.address,
+                    toChainId: toChain.id,
+                    toToken: isNativeToken(toToken)
+                      ? undefined
+                      : toToken.address,
+                  });
                 }}
               >
                 Continue

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

@@ -250,6 +250,8 @@ export function DirectPaymentModeScreen(props: {
               client,
               walletAddress: payerAccount.address,
               walletType: activeWallet?.id,
+              toChainId: paymentInfo.chain.id,
+              toToken: paymentInfo.token?.address,
             });
             onContinue(totalCost, paymentInfo.chain, token);
           }}

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

@@ -193,7 +193,7 @@ export function TransactionModeScreen(props: {
                   Insufficient Funds
                 </Text>
                 <Text size="xs" center multiline>
-                  Select another token or pay with a debit card.
+                  Select another token or pay with card.
                 </Text>
               </div>
             )}
@@ -356,6 +356,9 @@ export function TransactionModeScreen(props: {
               client,
               walletAddress: payerAccount.address,
               walletType: activeWallet?.id,
+              toChainId: payUiOptions.transaction.chain.id,
+              toToken: transactionCostAndData.token.address,
+              amountWei: totalCostWei.toString(),
             });
             onContinue(
               toTokens(totalCostWei, transactionCostAndData.decimals),

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx

@@ -1,5 +1,6 @@
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
+import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
@@ -177,7 +178,7 @@ export function FiatScreenContent(props: {
       )}
 
       <Container flex="column" gap="sm">
-        <Text size="sm">Pay with a debit card</Text>
+        <Text size="sm">Pay with card</Text>
         <div>
           <PayWithCreditCard
             isLoading={fiatQuoteQuery.isLoading}
@@ -274,7 +275,17 @@ export function FiatScreenContent(props: {
           data-disabled={disableSubmit}
           disabled={disableSubmit}
           fullWidth
-          onClick={handleSubmit}
+          onClick={() => {
+            trackPayEvent({
+              event: "confirm_onramp_quote",
+              client: client,
+              walletAddress: payer.account.address,
+              walletType: payer.wallet.id,
+              toChainId: toChain.id,
+              toToken: isNativeToken(toToken) ? undefined : toToken.address,
+            });
+            handleSubmit();
+          }}
           gap="xs"
         >
           {fiatQuoteQuery.isLoading ? (

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/OnRampScreen.tsx

@@ -398,6 +398,9 @@ function useOnRampScreenState(props: {
         client: props.client,
         walletAddress: props.payer.account.address,
         walletType: props.payer.wallet.id,
+        toChainId: props.quote.onRampToken.token.chainId,
+        toToken: props.quote.onRampToken.token.tokenAddress,
+        amountWei: props.quote.onRampToken.amountWei,
       });
       setPopupWindow(popup);
       addPendingTx({
@@ -679,11 +682,10 @@ function useSwapMutation(props: {
           walletAddress: account.address,
           walletType: props.payer.wallet.id,
           fromToken: quote.swapDetails.fromToken.tokenAddress,
-          fromAmount: quote.swapDetails.fromAmountWei,
-          toToken: quote.swapDetails.toToken.tokenAddress,
-          toAmount: quote.swapDetails.toAmountWei,
           chainId: quote.swapDetails.fromToken.chainId,
-          dstChainId: quote.swapDetails.toToken.chainId,
+          amountWei: quote.swapDetails.fromAmountWei,
+          toToken: quote.swapDetails.toToken.tokenAddress,
+          toChainId: quote.swapDetails.toToken.chainId,
         });
 
         const transaction = approve({
@@ -705,11 +707,10 @@ function useSwapMutation(props: {
           walletAddress: account.address,
           walletType: props.payer.wallet.id,
           fromToken: quote.swapDetails.fromToken.tokenAddress,
-          fromAmount: quote.swapDetails.fromAmountWei,
+          amountWei: quote.swapDetails.fromAmountWei,
           toToken: quote.swapDetails.toToken.tokenAddress,
-          toAmount: quote.swapDetails.toAmountWei,
           chainId: quote.swapDetails.fromToken.chainId,
-          dstChainId: quote.swapDetails.toToken.chainId,
+          toChainId: quote.swapDetails.toToken.chainId,
         });
       }
 
@@ -719,11 +720,10 @@ function useSwapMutation(props: {
         walletAddress: account.address,
         walletType: props.payer.wallet.id,
         fromToken: quote.swapDetails.fromToken.tokenAddress,
-        fromAmount: quote.swapDetails.fromAmountWei,
+        amountWei: quote.swapDetails.fromAmountWei,
         toToken: quote.swapDetails.toToken.tokenAddress,
-        toAmount: quote.swapDetails.toAmountWei,
         chainId: quote.swapDetails.fromToken.chainId,
-        dstChainId: quote.swapDetails.toToken.chainId,
+        toChainId: quote.swapDetails.toToken.chainId,
       });
       const tx = quote.transactionRequest;
       let _swapTx: WaitForReceiptOptions;
@@ -754,11 +754,10 @@ function useSwapMutation(props: {
         walletAddress: account.address,
         walletType: props.payer.wallet.id,
         fromToken: quote.swapDetails.fromToken.tokenAddress,
-        fromAmount: quote.swapDetails.fromAmountWei,
+        amountWei: quote.swapDetails.fromAmountWei,
         toToken: quote.swapDetails.toToken.tokenAddress,
-        toAmount: quote.swapDetails.toAmountWei,
+        toChainId: quote.swapDetails.toToken.chainId,
         chainId: quote.swapDetails.fromToken.chainId,
-        dstChainId: quote.swapDetails.toToken.chainId,
       });
 
       // do not add pending tx if the swap is part of fiat flow

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

@@ -220,11 +220,10 @@ export function SwapConfirmationScreen(props: {
                     walletAddress: account.address,
                     walletType: wallet.id,
                     fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                    fromAmount: props.quote.swapDetails.fromAmountWei,
+                    amountWei: props.quote.swapDetails.fromAmountWei,
                     toToken: props.quote.swapDetails.toToken.tokenAddress,
-                    toAmount: props.quote.swapDetails.toAmountWei,
+                    toChainId: props.quote.swapDetails.toToken.chainId,
                     chainId: props.quote.swapDetails.fromToken.chainId,
-                    dstChainId: props.quote.swapDetails.toToken.chainId,
                   });
 
                   const transaction = approve({
@@ -250,11 +249,10 @@ export function SwapConfirmationScreen(props: {
                     walletAddress: account.address,
                     walletType: wallet.id,
                     fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                    fromAmount: props.quote.swapDetails.fromAmountWei,
+                    amountWei: props.quote.swapDetails.fromAmountWei,
                     toToken: props.quote.swapDetails.toToken.tokenAddress,
-                    toAmount: props.quote.swapDetails.toAmountWei,
+                    toChainId: props.quote.swapDetails.toToken.chainId,
                     chainId: props.quote.swapDetails.fromToken.chainId,
-                    dstChainId: props.quote.swapDetails.toToken.chainId,
                   });
 
                   setStep("swap");
@@ -275,11 +273,10 @@ export function SwapConfirmationScreen(props: {
                     walletAddress: account.address,
                     walletType: wallet.id,
                     fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                    fromAmount: props.quote.swapDetails.fromAmountWei,
+                    amountWei: props.quote.swapDetails.fromAmountWei,
                     toToken: props.quote.swapDetails.toToken.tokenAddress,
-                    toAmount: props.quote.swapDetails.toAmountWei,
+                    toChainId: props.quote.swapDetails.toToken.chainId,
                     chainId: props.quote.swapDetails.fromToken.chainId,
-                    dstChainId: props.quote.swapDetails.toToken.chainId,
                   });
                   const tx = props.quote.transactionRequest;
                   let _swapTx: WaitForReceiptOptions;
@@ -317,11 +314,10 @@ export function SwapConfirmationScreen(props: {
                     walletAddress: account.address,
                     walletType: wallet.id,
                     fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                    fromAmount: props.quote.swapDetails.fromAmountWei,
+                    amountWei: props.quote.swapDetails.fromAmountWei,
                     toToken: props.quote.swapDetails.toToken.tokenAddress,
-                    toAmount: props.quote.swapDetails.toAmountWei,
+                    toChainId: props.quote.swapDetails.toToken.chainId,
                     chainId: props.quote.swapDetails.fromToken.chainId,
-                    dstChainId: props.quote.swapDetails.toToken.chainId,
                   });
 
                   // do not add pending tx if the swap is part of fiat flow

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

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
+import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
@@ -316,7 +317,7 @@ export function SwapScreenContent(props: {
               Insufficient Funds
             </Text>
             <Text size="xs" center multiline>
-              Select another token or pay with a debit card.
+              Select another token or pay with card.
             </Text>
           </div>
         )}
@@ -369,6 +370,18 @@ export function SwapScreenContent(props: {
           onClick={async () => {
             if (!disableContinue) {
               showSwapFlow();
+              trackPayEvent({
+                event: "confirm_swap_quote",
+                client: client,
+                walletAddress: payer.account.address,
+                walletType: payer.wallet.id,
+                chainId: fromChain.id,
+                fromToken: isNativeToken(fromToken)
+                  ? undefined
+                  : fromToken.address,
+                toChainId: toChain.id,
+                toToken: isNativeToken(toToken) ? undefined : toToken.address,
+              });
             }
           }}
           gap="xs"

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

@@ -5,6 +5,7 @@ import {
   Cross2Icon,
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
+import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
@@ -27,6 +28,7 @@ import {
   useChainName,
 } from "../../../../../../core/hooks/others/useChainQuery.js";
 import { useActiveAccount } from "../../../../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../../../../core/hooks/wallets/useActiveWallet.js";
 import { useConnectedWallets } from "../../../../../../core/hooks/wallets/useConnectedWallets.js";
 import { useDisconnect } from "../../../../../../core/hooks/wallets/useDisconnect.js";
 import type {
@@ -73,6 +75,7 @@ export function TokenSelectorScreen(props: {
 }) {
   const connectedWallets = useConnectedWallets();
   const activeAccount = useActiveAccount();
+  const activeWallet = useActiveWallet();
   const chainInfo = useChainMetadata(props.toChain);
   const theme = useCustomTheme();
 
@@ -233,7 +236,21 @@ export function TokenSelectorScreen(props: {
                 balances={balances}
                 client={props.client}
                 address={address}
-                onClick={props.onSelectToken}
+                onClick={(wallet, token, chain) => {
+                  trackPayEvent({
+                    event: "choose_payment_method_token",
+                    client: props.client,
+                    walletAddress: activeAccount?.address,
+                    walletType: activeWallet?.id,
+                    chainId: chain.id,
+                    fromToken: isNativeToken(token) ? undefined : token.address,
+                    toToken: isNativeToken(props.toToken)
+                      ? undefined
+                      : props.toToken.address,
+                    toChainId: props.toChain.id,
+                  });
+                  props.onSelectToken(wallet, token, chain);
+                }}
               />
             );
           })}
@@ -241,7 +258,19 @@ export function TokenSelectorScreen(props: {
           <Button
             variant="secondary"
             fullWidth
-            onClick={props.onConnect}
+            onClick={() => {
+              trackPayEvent({
+                event: "choose_payment_method_another_wallet",
+                client: props.client,
+                walletAddress: activeAccount?.address,
+                walletType: activeWallet?.id,
+                toChainId: props.toChain.id,
+                toToken: isNativeToken(props.toToken)
+                  ? undefined
+                  : props.toToken.address,
+              });
+              props.onConnect();
+            }}
             bg="tertiaryBg"
             style={{
               border: `1px solid ${theme.colors.borderColor}`,
@@ -265,7 +294,19 @@ export function TokenSelectorScreen(props: {
             <Button
               variant="secondary"
               fullWidth
-              onClick={props.onPayWithFiat}
+              onClick={() => {
+                trackPayEvent({
+                  event: "choose_payment_method_with_card",
+                  client: props.client,
+                  walletAddress: activeAccount?.address,
+                  walletType: activeWallet?.id,
+                  toChainId: props.toChain.id,
+                  toToken: isNativeToken(props.toToken)
+                    ? undefined
+                    : props.toToken.address,
+                });
+                props.onPayWithFiat();
+              }}
               bg="tertiaryBg"
               style={{
                 border: `1px solid ${theme.colors.borderColor}`,
@@ -281,7 +322,7 @@ export function TokenSelectorScreen(props: {
               >
                 <CardStackIcon width={iconSize.md} height={iconSize.md} />
                 <Text size="sm" color="primaryText">
-                  Pay with a debit card
+                  Pay with card
                 </Text>
               </Container>
             </Button>

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

@@ -1,6 +1,7 @@
 import { CheckCircledIcon } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
+import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
@@ -309,6 +310,14 @@ export function TransferConfirmationScreen(
                     }),
                   }),
                 ]);
+                trackPayEvent({
+                  client: props.client,
+                  walletAddress: payer.account.address,
+                  walletType: payer.wallet.id,
+                  toChainId: chain.id,
+                  toToken: isNativeToken(token) ? undefined : token.address,
+                  event: "transfer_confirmation_success_transaction_mode",
+                });
                 // its the last step before the transaction, so propagate onPurchaseSuccess here
                 props.onSuccess?.(
                   transferBuyWithCryptoQuote({
@@ -353,6 +362,14 @@ export function TransferConfirmationScreen(
                     BigInt(transferResponse.approvalData.amountWei)
                   ) {
                     setStep("approve");
+                    trackPayEvent({
+                      client: props.client,
+                      walletAddress: payer.account.address,
+                      walletType: payer.wallet.id,
+                      toChainId: chain.id,
+                      toToken: isNativeToken(token) ? undefined : token.address,
+                      event: "prompt_transfer_approval",
+                    });
                     const transaction = approve({
                       contract: getContract({
                         client: client,
@@ -372,9 +389,26 @@ export function TransferConfirmationScreen(
                       account: props.payer.account,
                       transaction,
                     });
+                    trackPayEvent({
+                      client: props.client,
+                      walletAddress: payer.account.address,
+                      walletType: payer.wallet.id,
+                      toChainId: chain.id,
+                      toToken: isNativeToken(token) ? undefined : token.address,
+                      event: "transfer_approval_success",
+                    });
                   }
                 }
 
+                trackPayEvent({
+                  client: props.client,
+                  walletAddress: payer.account.address,
+                  walletType: payer.wallet.id,
+                  toChainId: chain.id,
+                  toToken: isNativeToken(token) ? undefined : token.address,
+                  event: "prompt_transfer_confirmation",
+                });
+
                 setStep("transfer");
                 // execute the transfer
                 const transaction = transferResponse.transactionRequest;
@@ -385,6 +419,15 @@ export function TransferConfirmationScreen(
                 // switches to the status polling screen
                 setTransactionHash(tx.transactionHash);
                 setStatus({ id: "idle" });
+
+                trackPayEvent({
+                  client: props.client,
+                  walletAddress: payer.account.address,
+                  walletType: payer.wallet.id,
+                  toChainId: chain.id,
+                  toToken: isNativeToken(token) ? undefined : token.address,
+                  event: "transfer_confirmation_success",
+                });
               }
               // biome-ignore lint/suspicious/noExplicitAny: catch multiple errors
             } catch (e: any) {

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

@@ -7,6 +7,7 @@ import {
   getPaySupportedSources,
 } from "../../../../../../../pay/utils/definitions.js";
 import { getClientFetch } from "../../../../../../../utils/fetch.js";
+import { stringify } from "../../../../../../../utils/json.js";
 import { withCache } from "../../../../../../../utils/promise/withCache.js";
 
 type Response = {
@@ -44,7 +45,16 @@ export async function fetchBuySupportedDestinations(
       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 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,

package/src/react/web/ui/TransactionButton/TransactionModal.tsx

@@ -4,6 +4,7 @@ import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised-value.js";
 import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../core/hooks/connection/ConnectButtonProps.js";
@@ -19,6 +20,7 @@ import { ExecutingTxScreen } from "./ExecutingScreen.js";
 
 type ModalProps = {
   title: string;
+  txId: string;
   onComplete: () => void;
   onClose: () => void;
   client: ThirdwebClient;
@@ -35,8 +37,8 @@ export function TransactionModal(props: ModalProps) {
   const wallet = useActiveWallet();
 
   useQuery({
-    queryKey: ["transaction-modal-event"],
-    queryFn: () => {
+    queryKey: ["transaction-modal-event", props.txId],
+    queryFn: async () => {
       if (!account || !wallet) {
         throw new Error(); // never happens, because enabled is false
       }
@@ -44,7 +46,10 @@ export function TransactionModal(props: ModalProps) {
         client: props.client,
         walletAddress: account.address,
         walletType: wallet.id,
-        dstChainId: props.tx.chain.id,
+        toChainId: props.tx.chain.id,
+        toToken: props.tx.erc20Value
+          ? (await resolvePromisedValue(props.tx.erc20Value))?.tokenAddress
+          : undefined,
         event: "open_pay_transaction_modal",
       });
 

package/src/react/web/utils/errors.ts

@@ -29,6 +29,6 @@ export function getErrorMessage(err: any): ApiError {
     code: "UNABLE_TO_GET_PRICE_QUOTE",
     title: "Failed to Find Quote",
     message:
-      "We couldn't get a quote for this token pair. Select another token or pay with a debit card.",
+      "We couldn't get a quote for this token pair. Select another token or pay with card.",
   };
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.96.5-nightly-c137dd653c3640874f3cc953f4514c51f08c1ae9-20250429000412";
+export const version = "5.96.6";