thirdweb 5.115.0 → 5.115.2

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,41 +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,
-          walletAddress: paymentMethod.payerWallet?.getAccount()?.address,
-          walletType: paymentMethod.payerWallet?.id,
-        });
-      }
-      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,21 +128,6 @@ export function PaymentSelection({
 
   const [currentStep, setCurrentStep] = useState<Step>(initialStep);
 
-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        client,
-        event: "payment_selection",
-        toChainId: destinationToken.chainId,
-        toToken: destinationToken.address,
-        walletAddress: payerWallet?.getAccount()?.address,
-        walletType: payerWallet?.id,
-      });
-      return true;
-    },
-    queryKey: ["payment_selection"],
-  });
-
   const payerWallet =
     currentStep.type === "tokenSelection"
       ? currentStep.selectedWallet
@@ -176,6 +160,10 @@ export function PaymentSelection({
   };
 
   const handleWalletSelected = (wallet: Wallet) => {
+    trackPayEvent({
+      client,
+      event: "ub:ui:token_selection",
+    });
     setCurrentStep({ selectedWallet: wallet, type: "tokenSelection" });
   };
 
@@ -184,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,43 +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,
-          walletAddress: preparedQuote.intent.sender,
-        });
-      }
-      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: ["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 { 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";
@@ -17,7 +16,6 @@ import { webWindowAdapter } from "../../../adapters/WindowAdapter.js";
 import { EmbedContainer } from "../../ConnectWallet/Modal/ConnectEmbed.js";
 import { DynamicHeight } from "../../components/DynamicHeight.js";
 import { ErrorBanner } from "../ErrorBanner.js";
-import { PaymentDetails } from "../payment-details/PaymentDetails.js";
 import { SuccessScreen } from "../payment-success/SuccessScreen.js";
 import { StepRunner } from "../StepRunner.js";
 import { useActiveWalletInfo } from "./hooks.js";
@@ -246,16 +244,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
@@ -366,19 +363,6 @@ function SwapWidgetContent(
   // preload requests
   useBridgeChains(props.client);
 
-  const handleError = useCallback(
-    (error: Error, quote: SwapPreparedQuote) => {
-      console.error(error);
-      props.onError?.(error, quote);
-      setScreen({
-        id: "error",
-        preparedQuote: quote,
-        error,
-      });
-    },
-    [props.onError],
-  );
-
   // if wallet suddenly disconnects, show screen 1
   if (screen.id === "1:swap-ui" || !activeWalletInfo) {
     return (
@@ -402,7 +386,7 @@ function SwapWidgetContent(
         setAmountSelection={setAmountSelection}
         onSwap={(data) => {
           setScreen({
-            id: "2:preview",
+            id: "3:execute",
             buyToken: data.buyToken,
             sellToken: data.sellToken,
             sellTokenBalance: data.sellTokenBalance,
@@ -416,42 +400,6 @@ function SwapWidgetContent(
     );
   }
 
-  if (screen.id === "2:preview") {
-    return (
-      <PaymentDetails
-        metadata={{
-          title: "Review Swap",
-          description: undefined,
-        }}
-        confirmButtonLabel="Swap"
-        client={props.client}
-        onBack={() => {
-          setScreen({ id: "1:swap-ui" });
-        }}
-        onConfirm={() => {
-          setScreen({
-            ...screen,
-            id: "3:execute",
-          });
-        }}
-        onError={(error) => handleError(error, screen.preparedQuote)}
-        paymentMethod={{
-          quote: screen.quote,
-          type: "wallet",
-          payerWallet: activeWalletInfo.activeWallet,
-          balance: screen.sellTokenBalance,
-          originToken: screen.sellToken,
-          action: screen.mode,
-        }}
-        preparedQuote={screen.preparedQuote}
-        currency={props.currency}
-        modeInfo={{
-          mode: "fund_wallet",
-        }}
-      />
-    );
-  }
-
   if (screen.id === "3:execute") {
     return (
       <StepRunner
@@ -462,8 +410,7 @@ function SwapWidgetContent(
         onBack={() => {
           setScreen({
             ...screen,
-            id: "2:preview",
-            sellTokenBalance: screen.sellTokenBalance,
+            id: "1:swap-ui",
           });
         }}
         onCancel={() => props.onCancel?.(screen.preparedQuote)}

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";
+export const version = "5.115.2";