thirdweb 5.96.5 → 5.96.7-nightly-e23f53bd786b871fd0ba0c9154da7280cc4a8817-20250501202025

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/version.ts

@@ -1 +1 @@
-export const version = "5.96.5";
+export const version = "5.96.7-nightly-e23f53bd786b871fd0ba0c9154da7280cc4a8817-20250501202025";