thirdweb 5.115.0-nightly-9e43da4ec0f88f32e988e445257fb518454c4c81-20251203000341 → 5.115.1

package/src/react/web/ui/Bridge/CheckoutWidget.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { TokenWithPrices } from "../../../../bridge/index.js";
 import type { Chain } from "../../../../chains/types.js";
@@ -335,18 +334,17 @@ function CheckoutWidgetContentWrapper(props: CheckoutWidgetProps) {
     client: props.client,
   });
 
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        client: props.client,
-        event: "ub:ui:checkout_widget:render",
-        toChainId: props.chain.id,
-        toToken: props.tokenAddress,
-      });
-      return true;
-    },
-    queryKey: ["checkout_widget:render"],
-  });
+  const hasFiredRenderEvent = useRef(false);
+  useEffect(() => {
+    if (hasFiredRenderEvent.current) return;
+    hasFiredRenderEvent.current = true;
+    trackPayEvent({
+      client: props.client,
+      event: "ub:ui:checkout_widget:render",
+      toChainId: props.chain.id,
+      toToken: props.tokenAddress,
+    });
+  }, [props.client, props.chain.id, props.tokenAddress]);
 
   // if branding is disabled for widget, disable it for connect options too
   const connectOptions = useMemo(() => {
@@ -522,6 +520,12 @@ function CheckoutWidgetContent(
         buttonLabel={props.buttonLabel}
         // others
         onContinue={(destinationAmount, destinationToken, receiverAddress) => {
+          trackPayEvent({
+            client: props.client,
+            event: "payment_selection",
+            toChainId: destinationToken.chainId,
+            toToken: destinationToken.address,
+          });
           setScreen({
             id: "2:methodSelection",
             destinationAmount,
@@ -556,6 +560,20 @@ function CheckoutWidgetContent(
           handleError(error, undefined);
         }}
         onPaymentMethodSelected={(paymentMethod) => {
+          trackPayEvent({
+            chainId:
+              paymentMethod.type === "wallet"
+                ? paymentMethod.originToken.chainId
+                : undefined,
+            client: props.client,
+            event: "ub:ui:loading_quote:direct_payment",
+            fromToken:
+              paymentMethod.type === "wallet"
+                ? paymentMethod.originToken.address
+                : undefined,
+            toChainId: screen.destinationToken.chainId,
+            toToken: screen.destinationToken.address,
+          });
           setScreen({
             ...screen,
             id: "3:load-quote",
@@ -589,6 +607,35 @@ function CheckoutWidgetContent(
           handleError(error, undefined);
         }}
         onQuoteReceived={(preparedQuote, request) => {
+          if (
+            preparedQuote.type === "buy" ||
+            preparedQuote.type === "sell" ||
+            preparedQuote.type === "transfer"
+          ) {
+            trackPayEvent({
+              chainId:
+                preparedQuote.type === "transfer"
+                  ? preparedQuote.intent.chainId
+                  : preparedQuote.intent.originChainId,
+              client: props.client,
+              event: "payment_details",
+              fromToken:
+                preparedQuote.type === "transfer"
+                  ? preparedQuote.intent.tokenAddress
+                  : preparedQuote.intent.originTokenAddress,
+              toChainId:
+                preparedQuote.type === "transfer"
+                  ? preparedQuote.intent.chainId
+                  : preparedQuote.intent.destinationChainId,
+              toToken:
+                preparedQuote.type === "transfer"
+                  ? preparedQuote.intent.tokenAddress
+                  : preparedQuote.intent.destinationTokenAddress,
+              walletAddress:
+                screen.paymentMethod.payerWallet?.getAccount()?.address,
+              walletType: screen.paymentMethod.payerWallet?.id,
+            });
+          }
           setScreen({
             ...screen,
             id: "4:preview",

package/src/react/web/ui/Bridge/ErrorBanner.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { CrossCircledIcon } from "@radix-ui/react-icons";
-import { useQuery } from "@tanstack/react-query";
+import { useEffect, useRef } from "react";
 import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
@@ -38,17 +38,16 @@ export function ErrorBanner({
 
   const { userMessage } = useBridgeError({ error });
 
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        client,
-        error: error.message,
-        event: "ub:ui:error",
-      });
-      return true;
-    },
-    queryKey: ["error_banner", userMessage],
-  });
+  const hasFiredErrorEvent = useRef(false);
+  useEffect(() => {
+    if (hasFiredErrorEvent.current) return;
+    hasFiredErrorEvent.current = true;
+    trackPayEvent({
+      client,
+      error: error.message,
+      event: "ub:ui:error",
+    });
+  }, [client, error.message]);
 
   return (
     <Container flex="column" fullHeight gap="md" p="md">

package/src/react/web/ui/Bridge/QuoteLoader.tsx

@@ -1,7 +1,5 @@
 "use client";
-import { useQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
-import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Token } from "../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { PurchaseData } from "../../../../pay/types.js";
@@ -92,7 +90,7 @@ export function QuoteLoader({
   purchaseData,
   paymentLinkId,
   feePayer,
-  mode,
+  mode: _mode,
 }: QuoteLoaderProps) {
   const request: BridgePrepareRequest = getBridgeParams({
     amount,
@@ -107,27 +105,6 @@ export function QuoteLoader({
   });
   const prepareQuery = useBridgePrepare(request);
 
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        chainId:
-          paymentMethod.type === "wallet"
-            ? paymentMethod.originToken.chainId
-            : undefined,
-        client,
-        event: `ub:ui:loading_quote:${mode}`,
-        fromToken:
-          paymentMethod.type === "wallet"
-            ? paymentMethod.originToken.address
-            : undefined,
-        toChainId: destinationToken.chainId,
-        toToken: destinationToken.address,
-      });
-      return true;
-    },
-    queryKey: ["loading_quote", paymentMethod.type],
-  });
-
   // Handle successful quote
   useEffect(() => {
     if (prepareQuery.data) {

package/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { TokenWithPrices } from "../../../../bridge/index.js";
 import type { Chain } from "../../../../chains/types.js";
@@ -349,18 +349,17 @@ type TransactionQueryResult =
     };
 
 export function TransactionWidgetContentWrapper(props: TransactionWidgetProps) {
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        chainId: props.transaction.chain.id,
-        client: props.client,
-        event: "ub:ui:transaction_widget:render",
-        toToken: props.tokenAddress,
-      });
-      return true;
-    },
-    queryKey: ["transaction_widget:render"],
-  });
+  const hasFiredRenderEvent = useRef(false);
+  useEffect(() => {
+    if (hasFiredRenderEvent.current) return;
+    hasFiredRenderEvent.current = true;
+    trackPayEvent({
+      chainId: props.transaction.chain.id,
+      client: props.client,
+      event: "ub:ui:transaction_widget:render",
+      toToken: props.tokenAddress,
+    });
+  }, [props.client, props.transaction.chain.id, props.tokenAddress]);
 
   const localQuery = useConnectLocale(props.locale || "en_US");
 
@@ -573,6 +572,12 @@ function TransactionWidgetContent(
         }}
         connectOptions={props.connectOptions}
         onContinue={(destinationAmount, destinationToken, receiverAddress) => {
+          trackPayEvent({
+            client: props.client,
+            event: "payment_selection",
+            toChainId: destinationToken.chainId,
+            toToken: destinationToken.address,
+          });
           setScreen({
             id: "buy:1.methodSelection",
             destinationAmount,
@@ -618,6 +623,20 @@ function TransactionWidgetContent(
           handleError(error);
         }}
         onPaymentMethodSelected={(paymentMethod) => {
+          trackPayEvent({
+            chainId:
+              paymentMethod.type === "wallet"
+                ? paymentMethod.originToken.chainId
+                : undefined,
+            client: props.client,
+            event: "ub:ui:loading_quote:transaction",
+            fromToken:
+              paymentMethod.type === "wallet"
+                ? paymentMethod.originToken.address
+                : undefined,
+            toChainId: screen.destinationToken.chainId,
+            toToken: screen.destinationToken.address,
+          });
           setScreen({
             ...screen,
             id: "buy:2.load-quote",
@@ -651,6 +670,35 @@ function TransactionWidgetContent(
           handleError(error);
         }}
         onQuoteReceived={(preparedQuote, request) => {
+          if (
+            preparedQuote.type === "buy" ||
+            preparedQuote.type === "sell" ||
+            preparedQuote.type === "transfer"
+          ) {
+            trackPayEvent({
+              chainId:
+                preparedQuote.type === "transfer"
+                  ? preparedQuote.intent.chainId
+                  : preparedQuote.intent.originChainId,
+              client: props.client,
+              event: "payment_details",
+              fromToken:
+                preparedQuote.type === "transfer"
+                  ? preparedQuote.intent.tokenAddress
+                  : preparedQuote.intent.originTokenAddress,
+              toChainId:
+                preparedQuote.type === "transfer"
+                  ? preparedQuote.intent.chainId
+                  : preparedQuote.intent.destinationChainId,
+              toToken:
+                preparedQuote.type === "transfer"
+                  ? preparedQuote.intent.tokenAddress
+                  : preparedQuote.intent.destinationTokenAddress,
+              walletAddress:
+                screen.paymentMethod.payerWallet?.getAccount()?.address,
+              walletType: screen.paymentMethod.payerWallet?.id,
+            });
+          }
           setScreen({
             ...screen,
             id: "buy:3.preview",

package/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useEffect, useRef } from "react";
 import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
@@ -27,17 +27,17 @@ export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps) {
 
   const { data: chainMetadata } = useChainMetadata(chain);
 
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        chainId: chain.id,
-        client,
-        event: "ub:ui:unsupported_token",
-        fromToken: tokenAddress,
-      });
-    },
-    queryKey: ["unsupported_token"],
-  });
+  const hasFiredUnsupportedEvent = useRef(false);
+  useEffect(() => {
+    if (hasFiredUnsupportedEvent.current) return;
+    hasFiredUnsupportedEvent.current = true;
+    trackPayEvent({
+      chainId: chain.id,
+      client,
+      event: "ub:ui:unsupported_token",
+      fromToken: tokenAddress,
+    });
+  }, [chain.id, client, tokenAddress]);
 
   if (chainMetadata?.testnet) {
     return (

package/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx

@@ -1,5 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
@@ -251,16 +250,15 @@ export type BridgeWidgetProps = {
 export function BridgeWidget(props: BridgeWidgetProps) {
   const [tab, setTab] = useState<"swap" | "buy">("swap");
 
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        client: props.client,
-        event: "ub:ui:bridge_widget:render",
-      });
-      return true;
-    },
-    queryKey: ["bridge_widget:render"],
-  });
+  const hasFiredRenderEvent = useRef(false);
+  useEffect(() => {
+    if (hasFiredRenderEvent.current) return;
+    hasFiredRenderEvent.current = true;
+    trackPayEvent({
+      client: props.client,
+      event: "ub:ui:bridge_widget:render",
+    });
+  }, [props.client]);
 
   return (
     <CustomThemeProvider theme={props.theme}>

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

@@ -1,7 +1,5 @@
 "use client";
-import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
@@ -82,39 +80,6 @@ export function PaymentDetails({
     }
   };
 
-  useQuery({
-    queryFn: () => {
-      if (
-        preparedQuote.type === "buy" ||
-        preparedQuote.type === "sell" ||
-        preparedQuote.type === "transfer"
-      ) {
-        trackPayEvent({
-          chainId:
-            preparedQuote.type === "transfer"
-              ? preparedQuote.intent.chainId
-              : preparedQuote.intent.originChainId,
-          client,
-          event: "payment_details",
-          fromToken:
-            preparedQuote.type === "transfer"
-              ? preparedQuote.intent.tokenAddress
-              : preparedQuote.intent.originTokenAddress,
-          toChainId:
-            preparedQuote.type === "transfer"
-              ? preparedQuote.intent.chainId
-              : preparedQuote.intent.destinationChainId,
-          toToken:
-            preparedQuote.type === "transfer"
-              ? preparedQuote.intent.tokenAddress
-              : preparedQuote.intent.destinationTokenAddress,
-        });
-      }
-      return true;
-    },
-    queryKey: ["payment_details", preparedQuote.type],
-  });
-
   const chainsQuery = useChainsQuery(
     preparedQuote.steps.flatMap((s) => [
       defineChain(s.originToken.chainId),

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

@@ -1,8 +1,7 @@
 "use client";
-import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { trackPayEvent } from "../../../../../analytics/track/pay.js";
-import type { Token } from "../../../../../bridge/types/Token.js";
+import type { TokenWithPrices } from "../../../../../bridge/types/Token.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
@@ -27,7 +26,7 @@ type PaymentSelectionProps = {
   /**
    * The destination token to bridge to
    */
-  destinationToken: Token;
+  destinationToken: TokenWithPrices;
 
   /**
    * The destination amount to bridge
@@ -129,19 +128,6 @@ export function PaymentSelection({
 
   const [currentStep, setCurrentStep] = useState<Step>(initialStep);
 
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        client,
-        event: "payment_selection",
-        toChainId: destinationToken.chainId,
-        toToken: destinationToken.address,
-      });
-      return true;
-    },
-    queryKey: ["payment_selection"],
-  });
-
   const payerWallet =
     currentStep.type === "tokenSelection"
       ? currentStep.selectedWallet
@@ -174,6 +160,10 @@ export function PaymentSelection({
   };
 
   const handleWalletSelected = (wallet: Wallet) => {
+    trackPayEvent({
+      client,
+      event: "ub:ui:token_selection",
+    });
     setCurrentStep({ selectedWallet: wallet, type: "tokenSelection" });
   };
 
@@ -182,6 +172,10 @@ export function PaymentSelection({
   };
 
   const handleFiatSelected = () => {
+    trackPayEvent({
+      client,
+      event: "ub:ui:fiat_provider_selection",
+    });
     setCurrentStep({ type: "fiatProviderSelection" });
   };
 

package/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx

@@ -47,10 +47,7 @@ function PaymentMethodTokenRow({
 }: PaymentMethodTokenRowProps) {
   const theme = useCustomTheme();
 
-  const displayOriginAmount = paymentMethod.quote.originAmount;
-  const hasEnoughBalance = displayOriginAmount
-    ? paymentMethod.balance >= displayOriginAmount
-    : false;
+  const hasEnoughBalance = paymentMethod.hasEnoughBalance;
   const currencyPrice = paymentMethod.originToken.prices[currency || "USD"];
 
   return (

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

@@ -1,7 +1,7 @@
 "use client";
 import { CheckIcon } from "@radix-ui/react-icons";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useRef, useState } from "react";
 import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { WindowAdapter } from "../../../../core/adapters/WindowAdapter.js";
@@ -63,41 +63,43 @@ export function SuccessScreen({
   const [viewState, setViewState] = useState<ViewState>("success");
   const queryClient = useQueryClient();
 
-  useQuery({
-    queryFn: () => {
-      if (preparedQuote.type === "buy" || preparedQuote.type === "sell") {
-        trackPayEvent({
-          chainId: preparedQuote.intent.originChainId,
-          client: client,
-          event: "ub:ui:success_screen",
-          fromToken: preparedQuote.intent.originTokenAddress,
-          toChainId: preparedQuote.intent.destinationChainId,
-          toToken: preparedQuote.intent.destinationTokenAddress,
-        });
-      }
-      if (preparedQuote.type === "transfer") {
-        trackPayEvent({
-          chainId: preparedQuote.intent.chainId,
-          client: client,
-          event: "ub:ui:success_screen",
-          fromToken: preparedQuote.intent.tokenAddress,
-          toChainId: preparedQuote.intent.chainId,
-          toToken: preparedQuote.intent.tokenAddress,
-        });
-      }
-      queryClient.invalidateQueries({
-        queryKey: ["bridge/v1/wallets"],
+  const hasFiredSuccessEvent = useRef(false);
+  useEffect(() => {
+    if (hasFiredSuccessEvent.current) return;
+    hasFiredSuccessEvent.current = true;
+
+    if (preparedQuote.type === "buy" || preparedQuote.type === "sell") {
+      trackPayEvent({
+        chainId: preparedQuote.intent.originChainId,
+        client: client,
+        event: "ub:ui:success_screen",
+        fromToken: preparedQuote.intent.originTokenAddress,
+        toChainId: preparedQuote.intent.destinationChainId,
+        toToken: preparedQuote.intent.destinationTokenAddress,
+        walletAddress: preparedQuote.intent.sender,
       });
-      queryClient.invalidateQueries({
-        queryKey: ["walletBalance"],
+    }
+    if (preparedQuote.type === "transfer") {
+      trackPayEvent({
+        chainId: preparedQuote.intent.chainId,
+        client: client,
+        event: "ub:ui:success_screen",
+        fromToken: preparedQuote.intent.tokenAddress,
+        toChainId: preparedQuote.intent.chainId,
+        toToken: preparedQuote.intent.tokenAddress,
+        walletAddress: preparedQuote.intent.sender,
       });
-      queryClient.invalidateQueries({
-        queryKey: ["payment-methods"],
-      });
-      return true;
-    },
-    queryKey: ["success_screen", preparedQuote.type],
-  });
+    }
+    queryClient.invalidateQueries({
+      queryKey: ["bridge/v1/wallets"],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["walletBalance"],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["payment-methods"],
+    });
+  }, [client, preparedQuote, queryClient]);
 
   if (viewState === "detail") {
     return (

package/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import type { Buy, Sell } from "../../../../../bridge/index.js";
 import type { TokenWithPrices } from "../../../../../bridge/types/Token.js";
@@ -246,16 +245,15 @@ export type SwapWidgetProps = {
  * @bridge
  */
 export function SwapWidget(props: SwapWidgetProps) {
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        client: props.client,
-        event: "ub:ui:swap_widget:render",
-      });
-      return true;
-    },
-    queryKey: ["swap_widget:render"],
-  });
+  const hasFiredRenderEvent = useRef(false);
+  useEffect(() => {
+    if (hasFiredRenderEvent.current) return;
+    hasFiredRenderEvent.current = true;
+    trackPayEvent({
+      client: props.client,
+      event: "ub:ui:swap_widget:render",
+    });
+  }, [props.client]);
 
   return (
     <SwapWidgetContainer
@@ -401,6 +399,17 @@ function SwapWidgetContent(
         amountSelection={amountSelection}
         setAmountSelection={setAmountSelection}
         onSwap={(data) => {
+          trackPayEvent({
+            chainId: data.result.intent.originChainId,
+            client: props.client,
+            event: "payment_details",
+            fromToken: data.result.intent.originTokenAddress,
+            toChainId: data.result.intent.destinationChainId,
+            toToken: data.result.intent.destinationTokenAddress,
+            walletAddress:
+              activeWalletInfo?.activeWallet?.getAccount()?.address,
+            walletType: activeWalletInfo?.activeWallet?.id,
+          });
           setScreen({
             id: "2:preview",
             buyToken: data.buyToken,
@@ -442,6 +451,7 @@ function SwapWidgetContent(
           balance: screen.sellTokenBalance,
           originToken: screen.sellToken,
           action: screen.mode,
+          hasEnoughBalance: true,
         }}
         preparedQuote={screen.preparedQuote}
         currency={props.currency}

package/src/react/web/ui/Bridge/types.ts

@@ -37,7 +37,8 @@ export type PaymentMethod =
       payerWallet: Wallet;
       originToken: TokenWithPrices;
       balance: bigint;
-      quote: Quote;
+      quote?: Quote;
+      hasEnoughBalance: boolean;
     }
   | {
       type: "fiat";

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.115.0-nightly-9e43da4ec0f88f32e988e445257fb518454c4c81-20251203000341";
+export const version = "5.115.1";

package/src/wallets/eip5792/wait-for-calls-receipt.ts

@@ -94,8 +94,9 @@ export function waitForCallsReceipt(
             resolve(result);
             return;
           }
-        } catch {
-          // noop, we'll try again on the next blocks
+        } catch (error) {
+          // we'll try again on the next blocks
+          console.error("waitForCallsReceipt error", error);
         }
       },
     });