[MNY-210] SDK: export a script to render BridgeEmbed

Author: MananTank

packages/thirdweb/package.json

@@ -65,6 +65,7 @@
     "@types/prompts": "2.4.9",
     "@types/qrcode": "1.5.5",
     "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
     "@viem/anvil": "0.0.10",
     "@vitejs/plugin-react": "^4.6.0",
     "@vitest/coverage-v8": "3.2.4",
@@ -89,6 +90,7 @@
     "sharp": "^0.34.2",
     "size-limit": "11.2.0",
     "storybook": "9.0.15",
+    "tsup": "^8.5.0",
     "typedoc": "0.27.9",
     "typedoc-better-json": "0.9.4",
     "typescript": "5.8.3",
@@ -323,7 +325,8 @@
   "scripts": {
     "bench": "vitest -c ./test/vitest.config.ts bench",
     "bench:compare": "bun run ./benchmarks/run.ts",
-    "build": "pnpm clean && pnpm build:types && pnpm build:cjs && pnpm build:esm",
+    "build": "pnpm clean && pnpm build:types && pnpm build:cjs && pnpm build:esm && pnpm build:tsup",
+    "build:tsup": "tsup",
     "build-storybook": "storybook build",
     "build:cjs": "tsc --noCheck --project ./tsconfig.build.json --module commonjs --outDir ./dist/cjs --verbatimModuleSyntax false && printf '{\"type\":\"commonjs\"}' > ./dist/cjs/package.json",
     "build:esm": "tsc --noCheck --project ./tsconfig.build.json --module es2020 --outDir ./dist/esm && printf '{\"type\": \"module\",\"sideEffects\":false}' > ./dist/esm/package.json",

packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx

@@ -0,0 +1,178 @@
+import { useState } from "react";
+import { defineChain } from "../../../../../chains/utils.js";
+import { createThirdwebClient } from "../../../../../client/client.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
+import {
+  CustomThemeProvider,
+  useCustomTheme,
+} from "../../../../core/design-system/CustomThemeProvider.js";
+import {
+  darkTheme,
+  fontSize,
+  lightTheme,
+  radius,
+  spacing,
+  type ThemeOverrides,
+} 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 { BuyWidget, type BuyWidgetProps } from "../BuyWidget.js";
+import { SwapWidget, type SwapWidgetProps } from "../swap-widget/SwapWidget.js";
+
+// 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 BridgeWidgetProps = {
+  clientId: string;
+  theme?: "light" | "dark" | ({ type: "light" | "dark" } & ThemeOverrides);
+  showThirdwebBranding?: boolean;
+  currency?: SupportedFiatCurrency;
+  swap?: {
+    className?: string;
+    style?: React.CSSProperties;
+    onSuccess?: SwapWidgetProps["onSuccess"];
+    onError?: SwapWidgetProps["onError"];
+    onCancel?: SwapWidgetProps["onCancel"];
+    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?: BuyWidgetProps["onCancel"];
+    onError?: BuyWidgetProps["onError"];
+    onSuccess?: BuyWidgetProps["onSuccess"];
+    className?: string;
+    country?: string;
+    presetOptions?: BuyWidgetProps["presetOptions"];
+    purchaseData?: BuyWidgetProps["purchaseData"];
+  };
+};
+
+export function BridgeWidget(props: BridgeWidgetProps) {
+  const [tab, setTab] = useState<"swap" | "buy">("swap");
+  const client = createThirdwebClient({ clientId: props.clientId });
+  const themeObj =
+    props.theme === undefined
+      ? "dark"
+      : typeof props.theme === "object"
+        ? props.theme.type === "dark"
+          ? darkTheme(props.theme)
+          : lightTheme(props.theme)
+        : props.theme;
+
+  return (
+    <CustomThemeProvider theme={themeObj}>
+      <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={client}
+            prefill={props.swap?.prefill}
+            className={props.swap?.className}
+            showThirdwebBranding={props.showThirdwebBranding}
+            currency={props.currency}
+            theme={themeObj}
+            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={client}
+            amount={props.buy.amount}
+            showThirdwebBranding={props.showThirdwebBranding}
+            chain={defineChain(props.buy.chainId)}
+            currency={props.currency}
+            theme={themeObj}
+            title="" // Keep it empty string to hide the title
+            tokenAddress={props.buy.tokenAddress as `0x${string}`}
+            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>
+  );
+}

packages/thirdweb/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,
   };
 });

packages/thirdweb/src/script-exports/bridge-widget.tsx

@@ -0,0 +1,16 @@
+import { type Container, createRoot } from "react-dom/client";
+import { ThirdwebProvider } from "../react/web/providers/thirdweb-provider.js";
+import {
+  BridgeWidget,
+  type BridgeWidgetProps,
+} from "../react/web/ui/Bridge/bridge-widget/bridge-widget.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: BridgeWidgetProps) {
+  createRoot(element).render(
+    <ThirdwebProvider>
+      <BridgeWidget {...props} />
+    </ThirdwebProvider>,
+  );
+}

packages/thirdweb/src/script-exports/readme.md

@@ -0,0 +1,72 @@
+# Bridge Widget
+
+Add the script in document head and the element where you want to render the bridge widget in your page
+
+```html
+<!-- add the bridge-widget script in the head of the document, it adds the `BridgeWidget` global variable to the window object -->
+<script src="https://unpkg.com/thirdweb/scripts/bridge-widget.js"></script>
+
+<!-- add a unique id to an element where you want to render the bridge widget -->
+<div id="bridge-widget"></div>
+```
+
+### Basic Usage
+
+```html
+<script>
+  // get the element where you want to render the bridge widget
+  const node = document.getElementById("bridge-widget");
+
+  // render the widget
+  BridgeWidget.render(node, {
+    clientId: "your-client-id",
+    theme: "dark",
+    buy: {
+      chainId: 8453,
+      amount: "0.1",
+    },
+  });
+</script>
+```
+
+### Custom Theme
+
+```html
+<script>
+  BridgeWidget.render(node, {
+    clientId: "your-client-id",
+    theme: {
+      type: "dark",
+      colors: {
+        modalBg: "red",
+      },
+    },
+    buy: {
+      chainId: 8453,
+      amount: "0.1",
+    },
+  });
+</script>
+```
+
+### Customizing Swap UI
+
+```html
+<script>
+  BridgeWidget.render(node, {
+    clientId: "your-client-id",
+    swap: {
+      prefill: {
+        buyToken: {
+          chainId: 8453,
+          tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
+        },
+      },
+    },
+    buy: {
+      chainId: 8453,
+      amount: "0.1",
+    },
+  });
+</script>
+```

packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta } from "@storybook/react";
+import { BridgeWidget } from "../../../react/web/ui/Bridge/bridge-widget/bridge-widget.js";
+import { storyClient } from "../../utils.js";
+
+const meta: Meta<typeof BridgeWidget> = {
+  title: "Bridge/BridgeWidget",
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+export default meta;
+
+export function BasicUsage() {
+  return (
+    <BridgeWidget
+      clientId={storyClient.clientId}
+      buy={{ chainId: 8453, amount: "0.1" }}
+    />
+  );
+}
+
+export function LightTheme() {
+  return (
+    <BridgeWidget
+      clientId={storyClient.clientId}
+      theme="light"
+      buy={{ chainId: 8453, amount: "0.1" }}
+    />
+  );
+}
+
+export function CurrencySet() {
+  return (
+    <BridgeWidget
+      clientId={storyClient.clientId}
+      currency="JPY"
+      buy={{ chainId: 8453, amount: "0.1" }}
+    />
+  );
+}
+
+export function NoThirdwebBranding() {
+  return (
+    <BridgeWidget
+      clientId={storyClient.clientId}
+      theme="light"
+      buy={{ chainId: 8453, amount: "0.1" }}
+      showThirdwebBranding={false}
+    />
+  );
+}
+
+export function CustomTheme() {
+  return (
+    <BridgeWidget
+      clientId={storyClient.clientId}
+      buy={{ chainId: 8453, amount: "0.1" }}
+      theme={{
+        type: "light",
+        colors: {
+          modalBg: "#FFFFF0",
+          tertiaryBg: "#DBE4C9",
+          borderColor: "#8AA624",
+          secondaryText: "#3E3F29",
+          accentText: "#E43636",
+        },
+      }}
+    />
+  );
+}