thirdweb 5.108.6 → 5.108.8

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

@@ -41,9 +41,9 @@ export type BridgeWidgetScriptProps = {
       };
     };
   };
-  buy: {
-    amount: string; // TODO - make it optional
-    chainId: number; // TODO - make it optional
+  buy?: {
+    amount?: string;
+    chainId?: number;
     tokenAddress?: string;
     buttonLabel?: string;
     onCancel?: (quote: BuyOrOnrampPrepareResult | undefined) => void;

package/src/script-exports/readme.md

@@ -21,10 +21,6 @@ Add the script in document head and the element where you want to render the bri
   BridgeWidget.render(node, {
     clientId: "your-client-id",
     theme: "dark",
-    buy: {
-      chainId: 8453,
-      amount: "0.1",
-    },
   });
 </script>
 ```
@@ -41,10 +37,6 @@ Add the script in document head and the element where you want to render the bri
         modalBg: "red",
       },
     },
-    buy: {
-      chainId: 8453,
-      amount: "0.1",
-    },
   });
 </script>
 ```
@@ -66,6 +58,7 @@ Add the script in document head and the element where you want to render the bri
     buy: {
       chainId: 8453,
       amount: "0.1",
+      tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
     },
   });
 </script>

package/src/stories/Bridge/CheckoutWidget.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { polygon } from "../../chains/chain-definitions/polygon.js";
+import { defineChain } from "../../chains/utils.js";
+import {
+  CheckoutWidget,
+  type CheckoutWidgetProps,
+} from "../../react/web/ui/Bridge/CheckoutWidget.js";
+import { storyClient } from "../utils.js";
+import { DIRECT_PAYMENT_UI_OPTIONS } from "./fixtures.js";
+
+const meta = {
+  args: {
+    client: storyClient,
+    onCancel: () => {},
+    onError: () => {},
+    onSuccess: () => {},
+    currency: "USD",
+  },
+  component: StoryVariant,
+  title: "Bridge/Checkout/CheckoutWidget",
+} satisfies Meta<typeof StoryVariant>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DigitalArt: Story = {
+  args: {
+    amount: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.paymentInfo.amount,
+    chain: defineChain(
+      DIRECT_PAYMENT_UI_OPTIONS.digitalArt.paymentInfo.token.chainId,
+    ),
+    seller: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.paymentInfo.sellerAddress,
+    name: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.metadata?.title,
+    description: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.metadata?.description,
+    image: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.metadata?.image,
+    buttonLabel: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.buttonLabel,
+  },
+};
+
+export const DigitalArtJPCurrency: Story = {
+  args: {
+    amount: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.paymentInfo.amount,
+    chain: defineChain(
+      DIRECT_PAYMENT_UI_OPTIONS.digitalArt.paymentInfo.token.chainId,
+    ),
+    currency: "JPY",
+    seller: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.paymentInfo.sellerAddress,
+    name: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.metadata?.title,
+    description: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.metadata?.description,
+    image: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.metadata?.image,
+    buttonLabel: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.buttonLabel,
+  },
+};
+
+export const ConcertTicket: Story = {
+  args: {
+    amount: DIRECT_PAYMENT_UI_OPTIONS.concertTicket.paymentInfo.amount,
+    chain: defineChain(
+      DIRECT_PAYMENT_UI_OPTIONS.concertTicket.paymentInfo.token.chainId,
+    ),
+    seller: DIRECT_PAYMENT_UI_OPTIONS.concertTicket.paymentInfo.sellerAddress,
+    name: DIRECT_PAYMENT_UI_OPTIONS.concertTicket.metadata?.title,
+    description: DIRECT_PAYMENT_UI_OPTIONS.concertTicket.metadata?.description,
+    image: DIRECT_PAYMENT_UI_OPTIONS.concertTicket.metadata?.image,
+    buttonLabel: DIRECT_PAYMENT_UI_OPTIONS.concertTicket.buttonLabel,
+  },
+};
+
+export const SubscriptionService: Story = {
+  args: {
+    amount: DIRECT_PAYMENT_UI_OPTIONS.subscription.paymentInfo.amount,
+    chain: defineChain(
+      DIRECT_PAYMENT_UI_OPTIONS.subscription.paymentInfo.token.chainId,
+    ),
+    seller: DIRECT_PAYMENT_UI_OPTIONS.subscription.paymentInfo.sellerAddress,
+    name: DIRECT_PAYMENT_UI_OPTIONS.subscription.metadata?.title,
+    description: DIRECT_PAYMENT_UI_OPTIONS.subscription.metadata?.description,
+    image: DIRECT_PAYMENT_UI_OPTIONS.subscription.metadata?.image,
+    buttonLabel: DIRECT_PAYMENT_UI_OPTIONS.subscription.buttonLabel,
+  },
+};
+
+export const PhysicalProduct: Story = {
+  args: {
+    amount: DIRECT_PAYMENT_UI_OPTIONS.sneakers.paymentInfo.amount,
+    chain: defineChain(
+      DIRECT_PAYMENT_UI_OPTIONS.sneakers.paymentInfo.token.chainId,
+    ),
+    seller: DIRECT_PAYMENT_UI_OPTIONS.sneakers.paymentInfo.sellerAddress,
+    name: DIRECT_PAYMENT_UI_OPTIONS.sneakers.metadata?.title,
+    description: DIRECT_PAYMENT_UI_OPTIONS.sneakers.metadata?.description,
+    image: DIRECT_PAYMENT_UI_OPTIONS.sneakers.metadata?.image,
+    buttonLabel: DIRECT_PAYMENT_UI_OPTIONS.sneakers.buttonLabel,
+  },
+};
+
+export const NoImage: Story = {
+  args: {
+    amount: DIRECT_PAYMENT_UI_OPTIONS.credits.paymentInfo.amount,
+    chain: defineChain(
+      DIRECT_PAYMENT_UI_OPTIONS.credits.paymentInfo.token.chainId,
+    ),
+    seller: DIRECT_PAYMENT_UI_OPTIONS.credits.paymentInfo.sellerAddress,
+    name: DIRECT_PAYMENT_UI_OPTIONS.credits.metadata?.title,
+    description: DIRECT_PAYMENT_UI_OPTIONS.credits.metadata?.description,
+    image: DIRECT_PAYMENT_UI_OPTIONS.credits.metadata?.image,
+    buttonLabel: DIRECT_PAYMENT_UI_OPTIONS.credits.buttonLabel,
+  },
+};
+
+export const CustomButtonLabel: Story = {
+  args: {
+    amount: DIRECT_PAYMENT_UI_OPTIONS.customButton.paymentInfo.amount,
+    chain: defineChain(
+      DIRECT_PAYMENT_UI_OPTIONS.customButton.paymentInfo.token.chainId,
+    ),
+    seller: DIRECT_PAYMENT_UI_OPTIONS.customButton.paymentInfo.sellerAddress,
+    name: DIRECT_PAYMENT_UI_OPTIONS.customButton.metadata?.title,
+    description: DIRECT_PAYMENT_UI_OPTIONS.customButton.metadata?.description,
+    image: DIRECT_PAYMENT_UI_OPTIONS.customButton.metadata?.image,
+    buttonLabel: DIRECT_PAYMENT_UI_OPTIONS.customButton.buttonLabel,
+  },
+};
+
+export const SmallAmount: Story = {
+  args: {
+    amount: "0.01",
+    chain: polygon,
+    seller: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425",
+  },
+};
+
+function StoryVariant(props: CheckoutWidgetProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <CheckoutWidget {...props} theme="dark" />
+      <CheckoutWidget {...props} theme="light" />
+    </div>
+  );
+}

package/src/stories/Bridge/ErrorBanner.stories.tsx

@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { createThirdwebClient } from "../../client/client.js";
-import type { Theme } from "../../react/core/design-system/index.js";
 import { ErrorBanner } from "../../react/web/ui/Bridge/ErrorBanner.js";
-import { ModalThemeWrapper } from "../utils.js";
+import { ModalThemeWrapper, storyClient } from "../utils.js";
 
 const mockNetworkError = new Error(
   "Network connection failed. Please check your internet connection and try again.",
@@ -13,135 +11,41 @@ const mockInsufficientFundsError = new Error(
 );
 const mockGenericError = new Error("An unexpected error occurred.");
 
-// Props interface for the wrapper component
-interface ErrorBannerWithThemeProps {
-  error: Error;
-  onRetry: () => void;
-  onCancel?: () => void;
-  theme: "light" | "dark" | Theme;
-}
-
-// Wrapper component to provide theme context
-const ErrorBannerWithTheme = (props: ErrorBannerWithThemeProps) => {
-  const { theme, ...componentProps } = props;
-  return (
-    <ModalThemeWrapper theme={theme}>
-      <ErrorBanner
-        client={createThirdwebClient({ clientId: "test" })}
-        {...componentProps}
-      />
-    </ModalThemeWrapper>
-  );
-};
-
-const meta = {
+const meta: Meta<typeof ErrorBanner> = {
   args: {
-    error: mockNetworkError,
     onCancel: () => {},
     onRetry: () => {},
-    theme: "dark",
+    client: storyClient,
   },
-  argTypes: {
-    onCancel: { action: "cancel clicked" },
-    onRetry: { action: "retry clicked" },
-    theme: {
-      control: "select",
-      description: "Theme for the component",
-      options: ["light", "dark"],
-    },
-  },
-  component: ErrorBannerWithTheme,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Error banner component that displays user-friendly error messages with retry functionality and optional cancel action.",
-      },
-    },
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  title: "Bridge/ErrorBanner",
-} satisfies Meta<typeof ErrorBannerWithTheme>;
+  component: ErrorBanner,
+  decorators: [
+    (Story) => (
+      <ModalThemeWrapper>
+        <Story />
+      </ModalThemeWrapper>
+    ),
+  ],
+  title: "Bridge/screens/ErrorBanner",
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Light: Story = {
-  args: {
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-  },
-};
-
-export const Dark: Story = {
-  args: {
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
 export const NetworkError: Story = {
   args: {
     error: mockNetworkError,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
-export const NetworkErrorLight: Story = {
-  args: {
-    error: mockNetworkError,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
   },
 };
 
 export const UserRejectedError: Story = {
   args: {
     error: mockUserRejectedError,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
-export const UserRejectedErrorLight: Story = {
-  args: {
-    error: mockUserRejectedError,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
   },
 };
 
 export const InsufficientFundsError: Story = {
   args: {
     error: mockInsufficientFundsError,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
-export const InsufficientFundsErrorLight: Story = {
-  args: {
-    error: mockInsufficientFundsError,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
   },
 };
 
@@ -149,40 +53,11 @@ export const WithoutCancelButton: Story = {
   args: {
     error: mockGenericError,
     onCancel: undefined,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
-export const WithoutCancelButtonLight: Story = {
-  args: {
-    error: mockGenericError,
-    onCancel: undefined,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
   },
 };
 
 export const EmptyMessage: Story = {
   args: {
     error: new Error(""),
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
-export const EmptyMessageLight: Story = {
-  args: {
-    error: new Error(""),
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
   },
 };