[SDK] Add error tracking for payment execution failures (#8486)

Author: joaquim-verges

.changeset/fifty-moons-punch.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix getWalletBalance with native token address

packages/thirdweb/src/react/core/hooks/useStepExecutor.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackPayEvent } from "../../../analytics/track/pay.js";
 import type { status as OnrampStatus } from "../../../bridge/OnrampStatus.js";
 import { ApiError } from "../../../bridge/types/Errors.js";
 import type {
@@ -9,6 +10,7 @@ import type { Status } from "../../../bridge/types/Status.js";
 import { getCachedChain } from "../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { waitForReceipt } from "../../../transaction/actions/wait-for-tx-receipt.js";
+import { stringify } from "../../../utils/json.js";
 import { waitForCallsReceipt } from "../../../wallets/eip5792/wait-for-calls-receipt.js";
 import type { Account, Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { WindowAdapter } from "../adapters/WindowAdapter.js";
@@ -481,6 +483,22 @@ export function useStepExecutor(
       return;
     }
 
+    trackPayEvent({
+      client,
+      event: `ub:ui:execution:start`,
+      toChainId:
+        preparedQuote.steps[preparedQuote.steps.length - 1]?.destinationToken
+          .chainId,
+      toToken:
+        preparedQuote.steps[preparedQuote.steps.length - 1]?.destinationToken
+          .address,
+      fromToken: preparedQuote.steps[0]?.originToken.address,
+      chainId: preparedQuote.steps[0]?.destinationToken.chainId,
+      amountWei: preparedQuote.steps[0]?.originAmount?.toString(),
+      walletAddress: wallet?.getAccount()?.address,
+      walletType: wallet?.id,
+    });
+
     setExecutionState("executing");
     setError(undefined);
     const completedStatusResults: CompletedStatusResult[] = [];
@@ -625,9 +643,41 @@ export function useStepExecutor(
         if (onComplete) {
           onComplete(completedStatusResults);
         }
+
+        trackPayEvent({
+          client,
+          event: `ub:ui:execution:success`,
+          toChainId:
+            preparedQuote.steps[preparedQuote.steps.length - 1]
+              ?.destinationToken.chainId,
+          toToken:
+            preparedQuote.steps[preparedQuote.steps.length - 1]
+              ?.destinationToken.address,
+          fromToken: preparedQuote.steps[0]?.originToken.address,
+          chainId: preparedQuote.steps[0]?.destinationToken.chainId,
+          amountWei: preparedQuote.steps[0]?.originAmount?.toString(),
+          walletAddress: wallet?.getAccount()?.address,
+          walletType: wallet?.id,
+        });
       }
     } catch (err) {
       console.error("Error executing payment", err);
+      trackPayEvent({
+        client,
+        error: err instanceof Error ? err.message : stringify(err),
+        event: `ub:ui:execution:error`,
+        toChainId:
+          preparedQuote.steps[preparedQuote.steps.length - 1]?.destinationToken
+            .chainId,
+        toToken:
+          preparedQuote.steps[preparedQuote.steps.length - 1]?.destinationToken
+            .address,
+        fromToken: preparedQuote.steps[0]?.originToken.address,
+        chainId: preparedQuote.steps[0]?.destinationToken.chainId,
+        amountWei: preparedQuote.steps[0]?.originAmount?.toString(),
+        walletAddress: wallet?.getAccount()?.address,
+        walletType: wallet?.id,
+      });
       if (err instanceof ApiError) {
         setError(err);
       } else {
@@ -655,6 +705,7 @@ export function useStepExecutor(
     executeOnramp,
     onComplete,
     preparedQuote,
+    client,
   ]);
 
   // Start execution

packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx

@@ -122,6 +122,7 @@ export function QuoteLoader({
             : undefined,
         toChainId: destinationToken.chainId,
         toToken: destinationToken.address,
+        walletAddress: sender,
       });
       return true;
     },

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -108,6 +108,8 @@ export function PaymentDetails({
             preparedQuote.type === "transfer"
               ? preparedQuote.intent.tokenAddress
               : preparedQuote.intent.destinationTokenAddress,
+          walletAddress: paymentMethod.payerWallet?.getAccount()?.address,
+          walletType: paymentMethod.payerWallet?.id,
         });
       }
       return true;

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -136,6 +136,8 @@ export function PaymentSelection({
         event: "payment_selection",
         toChainId: destinationToken.chainId,
         toToken: destinationToken.address,
+        walletAddress: payerWallet?.getAccount()?.address,
+        walletType: payerWallet?.id,
       });
       return true;
     },

packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx

@@ -73,6 +73,7 @@ export function SuccessScreen({
           fromToken: preparedQuote.intent.originTokenAddress,
           toChainId: preparedQuote.intent.destinationChainId,
           toToken: preparedQuote.intent.destinationTokenAddress,
+          walletAddress: preparedQuote.intent.sender,
         });
       }
       if (preparedQuote.type === "transfer") {
@@ -83,6 +84,7 @@ export function SuccessScreen({
           fromToken: preparedQuote.intent.tokenAddress,
           toChainId: preparedQuote.intent.chainId,
           toToken: preparedQuote.intent.tokenAddress,
+          walletAddress: preparedQuote.intent.sender,
         });
       }
       queryClient.invalidateQueries({

packages/thirdweb/src/wallets/utils/getWalletBalance.ts

@@ -10,6 +10,7 @@ import { getContract } from "../../contract/contract.js";
 import type { GetBalanceResult } from "../../extensions/erc20/read/getBalance.js";
 import { eth_getBalance } from "../../rpc/actions/eth_getBalance.js";
 import { getRpcClient } from "../../rpc/rpc.js";
+import { getAddress } from "../../utils/address.js";
 import { toTokens } from "../../utils/units.js";
 
 export type GetWalletBalanceOptions = {
@@ -44,7 +45,10 @@ export async function getWalletBalance(
 ): Promise<GetBalanceResult> {
   const { address, client, chain, tokenAddress } = options;
   // erc20 case
-  if (tokenAddress && tokenAddress !== NATIVE_TOKEN_ADDRESS) {
+  if (
+    tokenAddress &&
+    getAddress(tokenAddress) !== getAddress(NATIVE_TOKEN_ADDRESS)
+  ) {
     // load balanceOf dynamically to avoid circular dependency
     const { getBalance } = await import(
       "../../extensions/erc20/read/getBalance.js"