thirdweb 5.108.15 → 5.109.1-nightly-b1a780832ed97d80399a650beab537a89c628278-20251018000336

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

@@ -6,6 +6,7 @@ import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { TokenWithPrices } from "../../../../bridge/index.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
 import type { PurchaseData } from "../../../../pay/types.js";
 import type { Address } from "../../../../utils/address.js";
@@ -28,7 +29,11 @@ import connectLocaleEn from "../ConnectWallet/locale/en.js";
 import { EmbedContainer } from "../ConnectWallet/Modal/ConnectEmbed.js";
 import { DynamicHeight } from "../components/DynamicHeight.js";
 import { ErrorBanner } from "./ErrorBanner.js";
-import { FundWallet } from "./FundWallet.js";
+import {
+  type AmountSelection,
+  FundWallet,
+  type SelectedToken,
+} from "./FundWallet.js";
 import { PaymentDetails } from "./payment-details/PaymentDetails.js";
 import { PaymentSelection } from "./payment-selection/PaymentSelection.js";
 import { SuccessScreen } from "./payment-success/SuccessScreen.js";
@@ -158,7 +163,10 @@ export type BuyWidgetProps = {
   /**
    * Callback triggered when the purchase is successful.
    */
-  onSuccess?: (quote: BuyOrOnrampPrepareResult) => void;
+  onSuccess?: (data: {
+    quote: BuyOrOnrampPrepareResult;
+    statuses: CompletedStatusResult[];
+  }) => void;
 
   /**
    * Callback triggered when the purchase encounters an error.
@@ -454,6 +462,22 @@ function BridgeWidgetContent(
     [props.onCancel],
   );
 
+  const [amountSelection, setAmountSelection] = useState<AmountSelection>({
+    type: "token",
+    value: props.amount ?? "",
+  });
+
+  const [selectedToken, setSelectedToken] = useState<SelectedToken>(() => {
+    if (!props.chain?.id) {
+      return undefined;
+    }
+
+    return {
+      chainId: props.chain.id,
+      tokenAddress: props.tokenAddress || NATIVE_TOKEN_ADDRESS,
+    };
+  });
+
   if (screen.id === "1:buy-ui" || !activeWalletInfo) {
     return (
       <FundWallet
@@ -479,11 +503,10 @@ function BridgeWidgetContent(
         }}
         buttonLabel={props.buttonLabel}
         currency={props.currency}
-        initialSelection={{
-          tokenAddress: props.tokenAddress,
-          chainId: props.chain?.id,
-          amount: props.amount,
-        }}
+        selectedToken={selectedToken}
+        setSelectedToken={setSelectedToken}
+        amountSelection={amountSelection}
+        setAmountSelection={setAmountSelection}
       />
     );
   }
@@ -616,7 +639,10 @@ function BridgeWidgetContent(
             screen.preparedQuote.type === "buy" ||
             screen.preparedQuote.type === "onramp"
           ) {
-            props.onSuccess?.(screen.preparedQuote);
+            props.onSuccess?.({
+              quote: screen.preparedQuote,
+              statuses: completedStatuses,
+            });
           }
           setScreen({
             id: "6:success",

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

@@ -170,7 +170,10 @@ export type CheckoutWidgetProps = {
   /**
    * Callback triggered when the purchase is successful.
    */
-  onSuccess?: (quote: BridgePrepareResult) => void;
+  onSuccess?: (data: {
+    quote: BridgePrepareResult;
+    statuses: CompletedStatusResult[];
+  }) => void;
 
   /**
    * Callback triggered when the purchase encounters an error.
@@ -660,7 +663,10 @@ function CheckoutWidgetContent(
           handleCancel(screen.preparedQuote);
         }}
         onComplete={(completedStatuses) => {
-          props.onSuccess?.(screen.preparedQuote);
+          props.onSuccess?.({
+            quote: screen.preparedQuote,
+            statuses: completedStatuses,
+          });
           setScreen({
             id: "6:success",
             preparedQuote: screen.preparedQuote,

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

@@ -4,7 +4,6 @@ import { ArrowDownIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { TokenWithPrices } from "../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import {
   getFiatSymbol,
   type SupportedFiatCurrency,
@@ -86,11 +85,10 @@ type FundWalletProps = {
    */
   showThirdwebBranding: boolean;
 
-  initialSelection: {
-    tokenAddress: string | undefined;
-    chainId: number | undefined;
-    amount: string | undefined;
-  };
+  selectedToken: SelectedToken | undefined;
+  setSelectedToken: (token: SelectedToken | undefined) => void;
+  amountSelection: AmountSelection;
+  setAmountSelection: (amountSelection: AmountSelection) => void;
 
   /**
    * The currency to use for the payment.
@@ -116,14 +114,14 @@ type FundWalletProps = {
   };
 };
 
-type SelectedToken =
+export type SelectedToken =
   | {
       chainId: number;
       tokenAddress: string;
     }
   | undefined;
 
-type AmountSelection =
+export type AmountSelection =
   | {
       type: "usd";
       value: string;
@@ -134,10 +132,6 @@ type AmountSelection =
     };
 
 export function FundWallet(props: FundWalletProps) {
-  const [amountSelection, setAmountSelection] = useState<AmountSelection>({
-    type: "token",
-    value: props.initialSelection.amount ?? "",
-  });
   const theme = useCustomTheme();
   const activeWalletInfo = useActiveWalletInfo();
   const receiver =
@@ -154,20 +148,9 @@ export function FundWallet(props: FundWalletProps) {
         checksumAddress(activeWalletInfo?.activeAccount?.address)
       : true);
 
-  const [selectedToken, setSelectedToken] = useState<SelectedToken>(() => {
-    if (!props.initialSelection.chainId) {
-      return undefined;
-    }
-
-    return {
-      chainId: props.initialSelection.chainId,
-      tokenAddress: props.initialSelection.tokenAddress || NATIVE_TOKEN_ADDRESS,
-    };
-  });
-
   const tokenQuery = useTokenQuery({
-    tokenAddress: selectedToken?.tokenAddress,
-    chainId: selectedToken?.chainId,
+    tokenAddress: props.selectedToken?.tokenAddress,
+    chainId: props.selectedToken?.chainId,
     client: props.client,
   });
 
@@ -175,8 +158,8 @@ export function FundWallet(props: FundWalletProps) {
     tokenQuery.data?.type === "success" ? tokenQuery.data.token : undefined;
 
   const tokenBalanceQuery = useTokenBalance({
-    chainId: selectedToken?.chainId,
-    tokenAddress: selectedToken?.tokenAddress,
+    chainId: props.selectedToken?.chainId,
+    tokenAddress: props.selectedToken?.tokenAddress,
     client: props.client,
     walletAddress: activeWalletInfo?.activeAccount?.address,
   });
@@ -222,14 +205,15 @@ export function FundWallet(props: FundWalletProps) {
           transform: "none",
         }}
         setOpen={(v) => setIsTokenSelectionOpen(v)}
+        autoFocusCrossIcon={false}
       >
         <SelectToken
           activeWalletInfo={activeWalletInfo}
           onClose={() => setIsTokenSelectionOpen(false)}
           client={props.client}
-          selectedToken={selectedToken}
+          selectedToken={props.selectedToken}
           setSelectedToken={(token) => {
-            setSelectedToken(token);
+            props.setSelectedToken(token);
             setIsTokenSelectionOpen(false);
           }}
         />
@@ -240,11 +224,11 @@ export function FundWallet(props: FundWalletProps) {
         <TokenSection
           title={actionLabel}
           presetOptions={props.presetOptions}
-          amountSelection={amountSelection}
-          setAmount={setAmountSelection}
+          amountSelection={props.amountSelection}
+          setAmount={props.setAmountSelection}
           activeWalletInfo={activeWalletInfo}
           selectedToken={
-            selectedToken
+            props.selectedToken
               ? {
                   data:
                     tokenQuery.data?.type === "success"
@@ -310,7 +294,7 @@ export function FundWallet(props: FundWalletProps) {
 
             const fiatPricePerToken = destinationToken.prices[props.currency];
             const { tokenValue } = getAmounts(
-              amountSelection,
+              props.amountSelection,
               fiatPricePerToken,
             );
 

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

@@ -1,4 +1,6 @@
+import { useQuery } from "@tanstack/react-query";
 import { useState } 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";
@@ -13,6 +15,7 @@ import {
   spacing,
   type Theme,
 } from "../../../../core/design-system/index.js";
+import type { CompletedStatusResult } from "../../../../core/hooks/useStepExecutor.js";
 import { EmbedContainer } from "../../ConnectWallet/Modal/ConnectEmbed.js";
 import { Container } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
@@ -82,7 +85,10 @@ export type BridgeWidgetProps = {
     /** Optional style overrides applied to the Swap tab content container. */
     style?: React.CSSProperties;
     /** Callback invoked when a swap is successful. */
-    onSuccess?: (quote: SwapPreparedQuote) => void;
+    onSuccess?: (data: {
+      quote: SwapPreparedQuote;
+      statuses: CompletedStatusResult[];
+    }) => void;
     /** Callback invoked when an error occurs during swapping. */
     onError?: (error: Error, quote: SwapPreparedQuote) => void;
     /** Callback invoked when the user cancels the swap. */
@@ -172,7 +178,10 @@ export type BridgeWidgetProps = {
       quote: BuyOrOnrampPrepareResult | undefined,
     ) => void;
     /** Callback triggered when the purchase is successful. */
-    onSuccess?: (quote: BuyOrOnrampPrepareResult) => void;
+    onSuccess?: (data: {
+      quote: BuyOrOnrampPrepareResult;
+      statuses: CompletedStatusResult[];
+    }) => void;
     /** Optional class name applied to the Buy tab content container. */
     className?: string;
     /** The user's ISO 3166 alpha-2 country code. Used to determine onramp provider support. */
@@ -242,6 +251,17 @@ 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"],
+  });
+
   return (
     <CustomThemeProvider theme={props.theme}>
       <EmbedContainer

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

@@ -11,6 +11,7 @@ export function SearchInput(props: {
   value: string;
   onChange: (value: string) => void;
   placeholder: string;
+  autoFocus?: boolean;
 }) {
   return (
     <div
@@ -41,6 +42,7 @@ export function SearchInput(props: {
           paddingLeft: "44px",
         }}
         onChange={(e) => props.onChange(e.target.value)}
+        autoFocus={props.autoFocus}
       />
     </div>
   );

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

@@ -145,7 +145,10 @@ export type SwapWidgetProps = {
   /**
    * Callback to be called when the swap is successful.
    */
-  onSuccess?: (quote: SwapPreparedQuote) => void;
+  onSuccess?: (data: {
+    quote: SwapPreparedQuote;
+    statuses: CompletedStatusResult[];
+  }) => void;
   /**
    * Callback to be called when user encounters an error when swapping.
    */
@@ -465,7 +468,10 @@ function SwapWidgetContent(
         }}
         onCancel={() => props.onCancel?.(screen.preparedQuote)}
         onComplete={(completedStatuses) => {
-          props.onSuccess?.(screen.preparedQuote);
+          props.onSuccess?.({
+            quote: screen.preparedQuote,
+            statuses: completedStatuses,
+          });
           setScreen({
             ...screen,
             id: "4:success",

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

@@ -496,6 +496,7 @@ function TokenSelectionScreen(props: {
               value={props.search}
               onChange={props.setSearch}
               placeholder="Search by token or address"
+              autoFocus={!props.isMobile}
             />
           </Container>
 

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

@@ -204,6 +204,7 @@ export function SwapUI(props: SwapUIProps) {
     <Container p="md">
       <Modal
         hide={false}
+        autoFocusCrossIcon={false}
         className="tw-modal__swap-widget"
         size={isMobile ? "compact" : "wide"}
         title="Select Token"

package/src/react/web/ui/components/Modal.tsx

@@ -41,6 +41,7 @@ export const Modal: React.FC<{
   title: string;
   hide?: boolean;
   crossContainerStyles?: React.CSSProperties;
+  autoFocusCrossIcon?: boolean;
 }> = (props) => {
   const [open, setOpen] = useState(props.open);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -143,7 +144,15 @@ export const Modal: React.FC<{
                   }}
                 >
                   <Dialog.Close asChild>
-                    <IconButton aria-label="Close" autoFocus type="button">
+                    <IconButton
+                      aria-label="Close"
+                      autoFocus={
+                        props.autoFocusCrossIcon === undefined
+                          ? true
+                          : props.autoFocusCrossIcon
+                      }
+                      type="button"
+                    >
                       <Cross2Icon
                         height={iconSize.md}
                         style={{

package/src/script-exports/bridge-widget-script.tsx

@@ -7,6 +7,7 @@ import {
   type Theme,
   type ThemeOverrides,
 } from "../react/core/design-system/index.js";
+import type { CompletedStatusResult } from "../react/core/hooks/useStepExecutor.js";
 import type { BuyOrOnrampPrepareResult } from "../react/web/ui/Bridge/BuyWidget.js";
 import { BridgeWidget } from "../react/web/ui/Bridge/bridge-widget/bridge-widget.js";
 import type { SwapPreparedQuote } from "../react/web/ui/Bridge/swap-widget/types.js";
@@ -23,7 +24,10 @@ export type BridgeWidgetScriptProps = {
   swap?: {
     className?: string;
     style?: React.CSSProperties;
-    onSuccess?: (quote: SwapPreparedQuote) => void;
+    onSuccess?: (data: {
+      quote: SwapPreparedQuote;
+      statuses: CompletedStatusResult[];
+    }) => void;
     onError?: (error: Error, quote: SwapPreparedQuote) => void;
     onCancel?: (quote: SwapPreparedQuote) => void;
     onDisconnect?: () => void;
@@ -51,7 +55,10 @@ export type BridgeWidgetScriptProps = {
       error: Error,
       quote: BuyOrOnrampPrepareResult | undefined,
     ) => void;
-    onSuccess?: (quote: BuyOrOnrampPrepareResult) => void;
+    onSuccess?: (data: {
+      quote: BuyOrOnrampPrepareResult;
+      statuses: CompletedStatusResult[];
+    }) => void;
     className?: string;
     country?: string;
     presetOptions?: [number, number, number];

package/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx

@@ -1,27 +1,18 @@
 import type { Meta } from "@storybook/react";
-import { BridgeWidgetScript } from "../../../script-exports/bridge-widget-script.js";
+import {
+  BridgeWidgetScript,
+  type BridgeWidgetScriptProps,
+} from "../../../script-exports/bridge-widget-script.js";
 import { storyClient } from "../../utils.js";
 
 const meta: Meta<typeof BridgeWidgetScript> = {
   title: "Bridge/BridgeWidgetScript",
-  parameters: {
-    layout: "centered",
-  },
-  decorators: [
-    (Story) => {
-      return (
-        <div>
-          <Story />
-        </div>
-      );
-    },
-  ],
 };
 export default meta;
 
 export function BasicUsage() {
   return (
-    <BridgeWidgetScript
+    <Variant
       clientId={storyClient.clientId}
       buy={{ chainId: 8453, amount: "0.1" }}
     />
@@ -30,7 +21,7 @@ export function BasicUsage() {
 
 export function LightTheme() {
   return (
-    <BridgeWidgetScript
+    <Variant
       clientId={storyClient.clientId}
       theme="light"
       buy={{ chainId: 8453, amount: "0.1" }}
@@ -40,7 +31,7 @@ export function LightTheme() {
 
 export function CurrencySet() {
   return (
-    <BridgeWidgetScript
+    <Variant
       clientId={storyClient.clientId}
       currency="JPY"
       buy={{ chainId: 8453, amount: "0.1" }}
@@ -50,7 +41,7 @@ export function CurrencySet() {
 
 export function NoThirdwebBranding() {
   return (
-    <BridgeWidgetScript
+    <Variant
       clientId={storyClient.clientId}
       theme="light"
       buy={{ chainId: 8453, amount: "0.1" }}
@@ -61,7 +52,7 @@ export function NoThirdwebBranding() {
 
 export function CustomTheme() {
   return (
-    <BridgeWidgetScript
+    <Variant
       clientId={storyClient.clientId}
       buy={{ chainId: 8453, amount: "0.1" }}
       theme={{
@@ -77,3 +68,19 @@ export function CustomTheme() {
     />
   );
 }
+
+function Variant(props: BridgeWidgetScriptProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <BridgeWidgetScript {...props} theme="dark" />
+      <BridgeWidgetScript {...props} theme="light" />
+    </div>
+  );
+}

package/src/stories/Bridge/Swap/SwapWidget.Prefill.stories.tsx

@@ -1,19 +1,19 @@
 import type { Meta } from "@storybook/react-vite";
 import { NATIVE_TOKEN_ADDRESS } from "../../../constants/addresses.js";
-import { SwapWidget } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
+import {
+  SwapWidget,
+  type SwapWidgetProps,
+} from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
 import { storyClient } from "../../utils.js";
 
 const meta = {
-  parameters: {
-    layout: "centered",
-  },
   title: "Bridge/Swap/SwapWidget/Prefill",
 } satisfies Meta<typeof SwapWidget>;
 export default meta;
 
 export function Buy_NativeToken() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         buyToken: {
@@ -26,7 +26,7 @@ export function Buy_NativeToken() {
 
 export function Buy_Base_USDC() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         buyToken: {
@@ -40,7 +40,7 @@ export function Buy_Base_USDC() {
 
 export function Buy_NativeToken_With_Amount() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         buyToken: {
@@ -55,7 +55,7 @@ export function Buy_NativeToken_With_Amount() {
 
 export function Sell_NativeToken() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         sellToken: {
@@ -82,7 +82,7 @@ export function Sell_Base_USDC() {
 
 export function Sell_NativeToken_With_Amount() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         sellToken: {
@@ -97,7 +97,7 @@ export function Sell_NativeToken_With_Amount() {
 
 export function Buy_And_Sell_NativeToken() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         // base native token
@@ -114,3 +114,19 @@ export function Buy_And_Sell_NativeToken() {
     />
   );
 }
+
+function Variant(props: SwapWidgetProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <SwapWidget {...props} theme="dark" />
+      <SwapWidget {...props} theme="light" />
+    </div>
+  );
+}

package/src/stories/Bridge/Swap/SwapWidget.stories.tsx

@@ -1,22 +1,13 @@
 import type { Meta } from "@storybook/react";
 import { lightTheme } from "../../../react/core/design-system/index.js";
-import { SwapWidget } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
+import {
+  SwapWidget,
+  type SwapWidgetProps,
+} from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
 import { storyClient } from "../../utils.js";
 
 const meta: Meta<typeof SwapWidget> = {
-  parameters: {
-    layout: "centered",
-  },
   title: "Bridge/Swap/SwapWidget",
-  decorators: [
-    (Story) => {
-      return (
-        <div>
-          <Story />
-        </div>
-      );
-    },
-  ],
 };
 export default meta;
 
@@ -26,7 +17,7 @@ export function BasicUsage() {
 
 export function CurrencySet() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       currency="JPY"
       persistTokenSelections={false}
@@ -36,7 +27,7 @@ export function CurrencySet() {
 
 export function LightMode() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       currency="JPY"
       theme="light"
@@ -47,7 +38,7 @@ export function LightMode() {
 
 export function NoThirdwebBranding() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       currency="JPY"
       showThirdwebBranding={false}
@@ -58,7 +49,7 @@ export function NoThirdwebBranding() {
 
 export function CustomTheme() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       currency="JPY"
       persistTokenSelections={false}
@@ -74,3 +65,19 @@ export function CustomTheme() {
     />
   );
 }
+
+function Variant(props: SwapWidgetProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <SwapWidget {...props} theme="dark" />
+      <SwapWidget {...props} theme="light" />
+    </div>
+  );
+}

package/src/stories/BuyWidget.stories.tsx

@@ -9,9 +9,6 @@ import {
 import { storyClient } from "./utils.js";
 
 const meta = {
-  parameters: {
-    layout: "centered",
-  },
   title: "Bridge/Buy/BuyWidget",
 } satisfies Meta<typeof BuyWidget>;
 export default meta;
@@ -143,7 +140,14 @@ export function LargeAmount() {
 
 function Variant(props: BuyWidgetProps) {
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "40px" }}>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
       <BuyWidget {...props} theme="dark" />
       <BuyWidget {...props} theme="light" />
     </div>