thirdweb 5.108.1 → 5.108.2

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

@@ -12,7 +12,10 @@ import {
   radius,
   spacing,
 } from "../../../core/design-system/index.js";
-import type { BridgePrepareRequest } from "../../../core/hooks/useBridgePrepare.js";
+import type {
+  BridgePrepareRequest,
+  BridgePrepareResult,
+} from "../../../core/hooks/useBridgePrepare.js";
 import {
   type CompletedStatusResult,
   useStepExecutor,
@@ -62,6 +65,11 @@ interface StepRunnerProps {
    * Called when user clicks the back button
    */
   onBack?: () => void;
+
+  /**
+   * Prepared quote to use
+   */
+  preparedQuote: BridgePrepareResult;
 }
 
 export function StepRunner({
@@ -74,6 +82,7 @@ export function StepRunner({
   onCancel,
   onBack,
   autoStart,
+  preparedQuote,
 }: StepRunnerProps) {
   const theme = useCustomTheme();
 
@@ -94,8 +103,8 @@ export function StepRunner({
     onComplete: (completedStatuses: CompletedStatusResult[]) => {
       onComplete(completedStatuses);
     },
-    request,
     wallet,
+    preparedQuote,
     windowAdapter,
   });
 

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

@@ -89,6 +89,7 @@ export function TransactionPayment({
     client,
     transaction: uiOptions.transaction,
     wallet,
+    currency: uiOptions.currency,
   });
 
   // We can't use useWalletBalance here because erc20Value is a possibly async value

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

@@ -0,0 +1,344 @@
+import { useState } from "react";
+import { defineChain } from "../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
+import type { PurchaseData } from "../../../../../pay/types.js";
+import {
+  CustomThemeProvider,
+  useCustomTheme,
+} from "../../../../core/design-system/CustomThemeProvider.js";
+import {
+  fontSize,
+  radius,
+  spacing,
+  type Theme,
+} from "../../../../core/design-system/index.js";
+import { EmbedContainer } from "../../ConnectWallet/Modal/ConnectEmbed.js";
+import { Container } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { type BuyOrOnrampPrepareResult, BuyWidget } from "../BuyWidget.js";
+import { SwapWidget } from "../swap-widget/SwapWidget.js";
+import type { SwapPreparedQuote } from "../swap-widget/types.js";
+
+/**
+ * Props for the `BridgeWidget` component.
+ */
+export type BridgeWidgetProps = {
+  /**
+   * A client is the entry point to the thirdweb SDK. It is required for all other actions.
+   * You can create a client using the `createThirdwebClient` function. Refer to the
+   * [Creating a Client](https://portal.thirdweb.com/typescript/v5/client) documentation for more information.
+   *
+   * You must provide a `clientId` or `secretKey` in order to initialize a client. Pass `clientId` for client-side usage and `secretKey` for server-side usage.
+   *
+   * @example
+   * ```ts
+   * import { createThirdwebClient } from "thirdweb";
+   *
+   * const client = createThirdwebClient({
+   *   clientId: "<your_client_id>",
+   * });
+   * ```
+   */
+  client: ThirdwebClient;
+
+  /**
+   * Set the theme for the widget. By default it is set to `"dark"`.
+   *
+   * Theme can be set to either `"dark"`, `"light"` or a custom theme object.
+   * You can also import [`lightTheme`](https://portal.thirdweb.com/references/typescript/v5/lightTheme)
+   * or [`darkTheme`](https://portal.thirdweb.com/references/typescript/v5/darkTheme) from `thirdweb/react`
+   * to use the default themes as base and override parts of it.
+   *
+   * @example
+   * ```ts
+   * import { lightTheme } from "thirdweb/react";
+   *
+   * const customTheme = lightTheme({
+   *   colors: { modalBg: "red" },
+   * });
+   * ```
+   */
+  theme?: "light" | "dark" | Theme;
+
+  /**
+   * Whether to show thirdweb branding in the widget.
+   * @default true
+   */
+  showThirdwebBranding?: boolean;
+
+  /**
+   * The currency to use for fiat pricing in the widget.
+   * @default "USD"
+   */
+  currency?: SupportedFiatCurrency;
+
+  /**
+   * Configuration for the Swap tab. This mirrors {@link SwapWidget} options where applicable.
+   */
+  swap?: {
+    /** Optional class name applied to the Swap tab content container. */
+    className?: string;
+    /** Optional style overrides applied to the Swap tab content container. */
+    style?: React.CSSProperties;
+    /** Callback invoked when a swap is successful. */
+    onSuccess?: (quote: SwapPreparedQuote) => void;
+    /** Callback invoked when an error occurs during swapping. */
+    onError?: (error: Error, quote: SwapPreparedQuote) => void;
+    /** Callback invoked when the user cancels the swap. */
+    onCancel?: (quote: SwapPreparedQuote) => void;
+    /** Callback invoked when the user disconnects the active wallet. */
+    onDisconnect?: () => void;
+    /**
+     * Whether to persist token selections to localStorage so that revisits pre-select last used tokens.
+     * Prefill values take precedence over persisted selections.
+     * @default true
+     */
+    persistTokenSelections?: boolean;
+    /**
+     * Prefill initial buy/sell token selections. If `tokenAddress` is not provided, the native token will be used.
+     *
+     * @example
+     * ### Set an ERC20 token as the buy token
+     * ```tsx
+     * <BridgeWidget
+     *   client={client}
+     *   buy={{ amount: "0.1", chainId: 8453 }}
+     *   swap={{
+     *     prefill: {
+     *       buyToken: {
+     *         chainId: 8453,
+     *         tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
+     *       },
+     *     },
+     *   }}
+     * />
+     * ```
+     *
+     * ### Set a native token as the sell token
+     * ```tsx
+     * <BridgeWidget
+     *   client={client}
+     *   buy={{ amount: "0.1", chainId: 8453 }}
+     *   swap={{
+     *     prefill: {
+     *       sellToken: { chainId: 8453 },
+     *     },
+     *   }}
+     * />
+     * ```
+     */
+    prefill?: {
+      /** Buy token selection. If `tokenAddress` is omitted, the native token will be used. */
+      buyToken?: {
+        tokenAddress?: string;
+        chainId: number;
+        /** Optional human-readable amount to prefill for buy. */
+        amount?: string;
+      };
+      /** Sell token selection. If `tokenAddress` is omitted, the native token will be used. */
+      sellToken?: {
+        tokenAddress?: string;
+        chainId: number;
+        /** Optional human-readable amount to prefill for sell. */
+        amount?: string;
+      };
+    };
+  };
+
+  /**
+   * Configuration for the Buy tab. This mirrors {@link BuyWidget} options where applicable.
+   */
+  buy: {
+    /**
+     * The amount to buy (as a decimal string), e.g. "1.5" for 1.5 tokens.
+     */
+    amount: string; // TODO - make it optional
+    /**
+     * The chain the accepted token is on.
+     */
+    chainId: number; // TODO - make it optional
+    /**
+     * Address of the token to buy. Leave undefined for the native token, or use 0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE.
+     */
+    tokenAddress?: string;
+    /** Custom label for the main action button. */
+    buttonLabel?: string;
+    /** Callback triggered when the user cancels the purchase. */
+    onCancel?: (quote: BuyOrOnrampPrepareResult | undefined) => void;
+    /** Callback triggered when the purchase encounters an error. */
+    onError?: (
+      error: Error,
+      quote: BuyOrOnrampPrepareResult | undefined,
+    ) => void;
+    /** Callback triggered when the purchase is successful. */
+    onSuccess?: (quote: BuyOrOnrampPrepareResult) => 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. */
+    country?: string;
+    /** Preset fiat amounts to display in the UI. Defaults to [5, 10, 20]. */
+    presetOptions?: [number, number, number];
+    /** Arbitrary data to be included in returned status and webhook events. */
+    purchaseData?: PurchaseData;
+  };
+};
+
+/**
+ * A combined widget for swapping or buying tokens with cross-chain support.
+ *
+ * This component renders two tabs – "Swap" and "Buy" – and orchestrates the appropriate flow
+ * by composing {@link SwapWidget} and {@link BuyWidget} under the hood.
+ *
+ * - The Swap tab enables token-to-token swaps (including cross-chain).
+ * - The Buy tab enables purchasing a specific token; by default, it uses card onramp in this widget.
+ *
+ * @param props - Props of type {@link BridgeWidgetProps} to configure the BridgeWidget component.
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * <BridgeWidget
+ *   client={client}
+ *   currency="USD"
+ *   theme="dark"
+ *   showThirdwebBranding
+ *   buy={{
+ *     // Buy 0.1 native tokens on Base
+ *     amount: "0.1",
+ *     chainId: 8453,
+ *   }}
+ * />
+ * ```
+ *
+ * ### Prefill swap tokens and configure buy
+ * ```tsx
+ * <BridgeWidget
+ *   client={client}
+ *   swap={{
+ *     prefill: {
+ *       buyToken: {
+ *         // Base USDC
+ *         chainId: 8453,
+ *         tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
+ *       },
+ *       sellToken: {
+ *         // Polygon native token (MATIC)
+ *         chainId: 137,
+ *       },
+ *     },
+ *   }}
+ *   buy={{
+ *     amount: "100",
+ *     chainId: 8453,
+ *     tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
+ *     buttonLabel: "Buy USDC",
+ *   }}
+ * />
+ * ```
+ *
+ * @bridge
+ */
+export function BridgeWidget(props: BridgeWidgetProps) {
+  const [tab, setTab] = useState<"swap" | "buy">("swap");
+
+  return (
+    <CustomThemeProvider theme={props.theme}>
+      <EmbedContainer
+        modalSize="compact"
+        style={{
+          borderRadius: radius.xl,
+        }}
+      >
+        <Container
+          px="md"
+          py="md"
+          flex="row"
+          gap="xs"
+          borderColor="borderColor"
+          style={{
+            borderBottomWidth: 1,
+            borderBottomStyle: "dashed",
+          }}
+        >
+          <TabButton isActive={tab === "swap"} onClick={() => setTab("swap")}>
+            Swap
+          </TabButton>
+          <TabButton isActive={tab === "buy"} onClick={() => setTab("buy")}>
+            Buy
+          </TabButton>
+        </Container>
+
+        {tab === "swap" && (
+          <SwapWidget
+            client={props.client}
+            prefill={props.swap?.prefill}
+            className={props.swap?.className}
+            showThirdwebBranding={props.showThirdwebBranding}
+            currency={props.currency}
+            theme={props.theme}
+            onSuccess={props.swap?.onSuccess}
+            onError={props.swap?.onError}
+            onCancel={props.swap?.onCancel}
+            onDisconnect={props.swap?.onDisconnect}
+            persistTokenSelections={props.swap?.persistTokenSelections}
+            style={{
+              border: "none",
+              ...props.swap?.style,
+            }}
+          />
+        )}
+        {tab === "buy" && (
+          <BuyWidget
+            client={props.client}
+            amount={props.buy.amount}
+            showThirdwebBranding={props.showThirdwebBranding}
+            chain={defineChain(props.buy.chainId)}
+            currency={props.currency}
+            theme={props.theme}
+            title="" // Keep it empty string to hide the title
+            tokenAddress={props.buy.tokenAddress as `0x${string}` | undefined}
+            buttonLabel={props.buy.buttonLabel}
+            className={props.buy.className}
+            country={props.buy.country}
+            onCancel={props.buy.onCancel}
+            onError={props.buy.onError}
+            onSuccess={props.buy.onSuccess}
+            presetOptions={props.buy.presetOptions}
+            purchaseData={props.buy.purchaseData}
+            paymentMethods={["card"]}
+            style={{
+              border: "none",
+            }}
+          />
+        )}
+      </EmbedContainer>
+    </CustomThemeProvider>
+  );
+}
+
+function TabButton(props: {
+  isActive: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  const theme = useCustomTheme();
+  return (
+    <Button
+      variant="secondary"
+      onClick={props.onClick}
+      style={{
+        borderRadius: radius.full,
+        fontSize: fontSize.sm,
+        fontWeight: 500,
+        paddingInline: spacing["md+"],
+        paddingBlock: spacing.sm,
+        border: `1px solid ${
+          props.isActive ? theme.colors.secondaryText : theme.colors.borderColor
+        }`,
+      }}
+    >
+      {props.children}
+    </Button>
+  );
+}

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

@@ -210,6 +210,7 @@ const TransactionOverViewCompact = (props: {
     client: props.client,
     transaction: props.uiOptions.transaction,
     wallet: props.paymentMethod.payerWallet,
+    currency: props.uiOptions.currency,
   });
 
   if (!txInfo.data) {

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

@@ -1,6 +1,8 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, 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";
 import type { ThirdwebClient } from "../../../../../client/client.js";
@@ -241,6 +243,17 @@ 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"],
+  });
+
   return (
     <SwapWidgetContainer
       theme={props.theme}
@@ -435,6 +448,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
       <StepRunner
         title="Processing Swap"
         autoStart={true}
+        preparedQuote={screen.preparedQuote}
         client={props.client}
         onBack={() => {
           setScreen({

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import type { Chain as BridgeChain } from "../../../../../bridge/index.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import {
@@ -53,7 +53,22 @@ export function SelectBridgeChainUI(
   },
 ) {
   const [search, setSearch] = useState("");
-  const filteredChains = props.chains.filter((chain) => {
+  const [initiallySelectedChain] = useState(props.selectedChain);
+
+  // put the initially selected chain first
+  const sortedChains = useMemo(() => {
+    if (initiallySelectedChain) {
+      return [
+        initiallySelectedChain,
+        ...props.chains.filter(
+          (chain) => chain.chainId !== initiallySelectedChain.chainId,
+        ),
+      ];
+    }
+    return props.chains;
+  }, [props.chains, initiallySelectedChain]);
+
+  const filteredChains = sortedChains.filter((chain) => {
     return chain.name.toLowerCase().includes(search.toLowerCase());
   });
 

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

@@ -37,7 +37,7 @@ import { tokenAmountFormatter } from "./utils.js";
  * @internal
  */
 type SelectTokenUIProps = {
-  onBack: () => void;
+  onClose: () => void;
   client: ThirdwebClient;
   selectedToken: TokenSelection | undefined;
   setSelectedToken: (token: TokenSelection) => void;
@@ -182,6 +182,7 @@ function SelectTokenUI(
     });
   }, [otherTokens]);
 
+  // desktop
   if (!isMobile) {
     return (
       <Container
@@ -205,7 +206,10 @@ function SelectTokenUI(
         </LeftContainer>
         <Container flex="column" relative scrollY>
           <TokenSelectionScreen
-            onSelectToken={props.setSelectedToken}
+            onSelectToken={(token) => {
+              props.setSelectedToken(token);
+              props.onClose();
+            }}
             isMobile={false}
             selectedToken={props.selectedToken}
             isFetching={props.isFetching}
@@ -226,7 +230,10 @@ function SelectTokenUI(
   if (screen === "select-token") {
     return (
       <TokenSelectionScreen
-        onSelectToken={props.setSelectedToken}
+        onSelectToken={(token) => {
+          props.setSelectedToken(token);
+          props.onClose();
+        }}
         selectedToken={props.selectedToken}
         isFetching={props.isFetching}
         ownedTokens={props.ownedTokens}
@@ -581,8 +588,10 @@ function TokenSelectionScreen(props: {
                   client={props.client}
                   onSelect={props.onSelectToken}
                   isSelected={
-                    props.selectedToken?.tokenAddress.toLowerCase() ===
-                    token.address.toLowerCase()
+                    !!props.selectedToken &&
+                    props.selectedToken.tokenAddress.toLowerCase() ===
+                      token.address.toLowerCase() &&
+                    token.chainId === props.selectedToken.chainId
                   }
                 />
               ))}

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

@@ -235,20 +235,16 @@ export function SwapUI(props: SwapUIProps) {
         {modalState.screen === "select-buy-token" && (
           <SelectToken
             activeWalletInfo={props.activeWalletInfo}
-            onBack={() =>
+            onClose={() => {
               setModalState((v) => ({
                 ...v,
                 isOpen: false,
-              }))
-            }
+              }));
+            }}
             client={props.client}
             selectedToken={props.buyToken}
             setSelectedToken={(token) => {
               props.setBuyToken(token);
-              setModalState((v) => ({
-                ...v,
-                isOpen: false,
-              }));
               // if buy token is same as sell token, unset sell token
               if (
                 props.sellToken &&
@@ -264,20 +260,16 @@ export function SwapUI(props: SwapUIProps) {
 
         {modalState.screen === "select-sell-token" && (
           <SelectToken
-            onBack={() =>
+            onClose={() => {
               setModalState((v) => ({
                 ...v,
                 isOpen: false,
-              }))
-            }
+              }));
+            }}
             client={props.client}
             selectedToken={props.sellToken}
             setSelectedToken={(token) => {
               props.setSellToken(token);
-              setModalState((v) => ({
-                ...v,
-                isOpen: false,
-              }));
               // if sell token is same as buy token, unset buy token
               if (
                 props.buyToken &&

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -479,6 +479,8 @@ export const EmbedContainer = /* @__PURE__ */ StyledDiv<{
     lineHeight: "normal",
     overflow: "hidden",
     position: "relative",
-    width: modalSize === "compact" ? modalMaxWidthCompact : modalMaxWidthWide,
+    width: "100vw",
+    maxWidth:
+      modalSize === "compact" ? modalMaxWidthCompact : modalMaxWidthWide,
   };
 });

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

@@ -0,0 +1,72 @@
+import { createThirdwebClient } from "../client/client.js";
+import type { SupportedFiatCurrency } from "../pay/convert/type.js";
+import type { PurchaseData } from "../pay/types.js";
+import {
+  darkTheme,
+  lightTheme,
+  type Theme,
+  type ThemeOverrides,
+} from "../react/core/design-system/index.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";
+
+// Note: do not use SwapWidgetProps or BuyWidgetProps references here to keep the output for bridge-widget.d.ts as simple as possible
+// Note: these props will be configured buy user in a <script> tag, so they need to be as simple as possible and can not rely on utils like `darkTheme`, `createThirdwebClient` etc..
+// For example, instead of having for a `Chain` prop, use `chainId` instead
+
+export type BridgeWidgetScriptProps = {
+  clientId: string;
+  theme?: "light" | "dark" | ({ type: "light" | "dark" } & ThemeOverrides);
+  showThirdwebBranding?: boolean;
+  currency?: SupportedFiatCurrency;
+  swap?: {
+    className?: string;
+    style?: React.CSSProperties;
+    onSuccess?: (quote: SwapPreparedQuote) => void;
+    onError?: (error: Error, quote: SwapPreparedQuote) => void;
+    onCancel?: (quote: SwapPreparedQuote) => void;
+    onDisconnect?: () => void;
+    persistTokenSelections?: boolean;
+    prefill?: {
+      buyToken?: {
+        tokenAddress?: string;
+        chainId: number;
+        amount?: string;
+      };
+      sellToken?: {
+        tokenAddress?: string;
+        chainId: number;
+        amount?: string;
+      };
+    };
+  };
+  buy: {
+    amount: string; // TODO - make it optional
+    chainId: number; // TODO - make it optional
+    tokenAddress?: string;
+    buttonLabel?: string;
+    onCancel?: (quote: BuyOrOnrampPrepareResult | undefined) => void;
+    onError?: (
+      error: Error,
+      quote: BuyOrOnrampPrepareResult | undefined,
+    ) => void;
+    onSuccess?: (quote: BuyOrOnrampPrepareResult) => void;
+    className?: string;
+    country?: string;
+    presetOptions?: [number, number, number];
+    purchaseData?: PurchaseData;
+  };
+};
+
+export function BridgeWidgetScript(props: BridgeWidgetScriptProps) {
+  const client = createThirdwebClient({ clientId: props.clientId });
+  const themeObj: Theme | "light" | "dark" | undefined =
+    typeof props.theme === "object"
+      ? props.theme.type === "dark"
+        ? darkTheme(props.theme)
+        : lightTheme(props.theme)
+      : props.theme;
+
+  return <BridgeWidget {...props} theme={themeObj} client={client} />;
+}

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

@@ -0,0 +1,17 @@
+import { type Container, createRoot } from "react-dom/client";
+import { ThirdwebProvider } from "../react/web/providers/thirdweb-provider.js";
+import {
+  BridgeWidgetScript,
+  type BridgeWidgetScriptProps,
+} from "./bridge-widget-script.js";
+
+// Note: This file is built as a UMD module with globalName "BridgeWidget"
+// This will be available as a global function called `BridgeWidget.render`
+
+export function render(element: Container, props: BridgeWidgetScriptProps) {
+  createRoot(element).render(
+    <ThirdwebProvider>
+      <BridgeWidgetScript {...props} />
+    </ThirdwebProvider>,
+  );
+}