thirdweb 5.108.6 → 5.108.8

package/src/stories/Bridge/StepRunner.stories.tsx

@@ -1,11 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import type { ThirdwebClient } from "../../client/client.js";
-import type { WindowAdapter } from "../../react/core/adapters/WindowAdapter.js";
-import type { Theme } from "../../react/core/design-system/index.js";
-import type { BridgePrepareRequest } from "../../react/core/hooks/useBridgePrepare.js";
 import type { CompletedStatusResult } from "../../react/core/hooks/useStepExecutor.js";
+import { webWindowAdapter } from "../../react/web/adapters/WindowAdapter.js";
 import { StepRunner } from "../../react/web/ui/Bridge/StepRunner.js";
-import type { Wallet } from "../../wallets/interfaces/wallet.js";
 import { ModalThemeWrapper, storyClient } from "../utils.js";
 import {
   STORY_MOCK_WALLET,
@@ -13,80 +9,37 @@ import {
   simpleBuyRequest,
 } from "./fixtures.js";
 
-// Mock window adapter
-const mockWindowAdapter: WindowAdapter = {
-  open: async (_url: string) => {},
-};
-
-// Props interface for the wrapper component
-interface StepRunnerWithThemeProps {
-  request: BridgePrepareRequest;
-  wallet: Wallet;
-  client: ThirdwebClient;
-  windowAdapter: WindowAdapter;
-  onComplete: (completedStatuses: CompletedStatusResult[]) => void;
-  onError: (error: Error) => void;
-  onCancel?: () => void;
-  onBack?: () => void;
-  theme: "light" | "dark" | Theme;
-}
-
-// Wrapper component to provide theme context
-const StepRunnerWithTheme = (props: StepRunnerWithThemeProps) => {
-  const { theme, ...componentProps } = props;
-  return (
-    <ModalThemeWrapper theme={theme}>
-      <StepRunner {...componentProps} preparedQuote={simpleBuyQuote} />
-    </ModalThemeWrapper>
-  );
-};
-
-const meta = {
+const meta: Meta<typeof StepRunner> = {
   args: {
     client: storyClient,
     onCancel: () => {},
     onComplete: (_completedStatuses: CompletedStatusResult[]) => {},
-    onError: (error: Error) => console.error("Error:", error),
-    theme: "dark",
     wallet: STORY_MOCK_WALLET,
-    windowAdapter: mockWindowAdapter,
-  },
-  argTypes: {
-    onCancel: { action: "execution cancelled" },
-    onComplete: { action: "execution completed" },
-    onError: { action: "error occurred" },
-    theme: {
-      control: "select",
-      description: "Theme for the component",
-      options: ["light", "dark"],
-    },
+    windowAdapter: webWindowAdapter,
+    title: undefined,
+    autoStart: true,
+    onBack: undefined,
+    preparedQuote: simpleBuyQuote,
   },
-  component: StepRunnerWithTheme,
+  component: StepRunner,
+  decorators: [
+    (Story) => (
+      <ModalThemeWrapper>
+        <Story />
+      </ModalThemeWrapper>
+    ),
+  ],
   parameters: {
     layout: "centered",
   },
-  title: "Bridge/StepRunner",
-} satisfies Meta<typeof StepRunnerWithTheme>;
+  title: "Bridge/screens/StepRunner",
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Light: Story = {
-  args: {
-    request: simpleBuyRequest,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-  },
-};
-
-export const Dark: Story = {
+export const Basic: Story = {
   args: {
     request: simpleBuyRequest,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
   },
 };

package/src/stories/Bridge/SuccessScreen.stories.tsx

@@ -1,19 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { stringify } from "viem";
-import type { Theme } from "../../react/core/design-system/index.js";
 import type { CompletedStatusResult } from "../../react/core/hooks/useStepExecutor.js";
 import { webWindowAdapter } from "../../react/web/adapters/WindowAdapter.js";
-import {
-  SuccessScreen,
-  type SuccessScreenProps,
-} from "../../react/web/ui/Bridge/payment-success/SuccessScreen.js";
+import { SuccessScreen } from "../../react/web/ui/Bridge/payment-success/SuccessScreen.js";
 import { ModalThemeWrapper, storyClient } from "../utils.js";
-import {
-  FUND_WALLET_UI_OPTIONS,
-  simpleBuyQuote,
-  simpleOnrampQuote,
-  TRANSACTION_UI_OPTIONS,
-} from "./fixtures.js";
+import { simpleBuyQuote, simpleOnrampQuote } from "./fixtures.js";
 
 const mockBuyCompletedStatuses: CompletedStatusResult[] = JSON.parse(
   stringify([
@@ -75,164 +66,64 @@ const mockOnrampCompletedStatuses: CompletedStatusResult[] = JSON.parse(
   ]),
 );
 
-// Props interface for the wrapper component
-interface SuccessScreenWithThemeProps extends SuccessScreenProps {
-  theme: "light" | "dark" | Theme;
-}
-
-// Wrapper component to provide theme context
-const SuccessScreenWithTheme = (props: SuccessScreenWithThemeProps) => {
-  const { theme, ...componentProps } = props;
-  return (
-    <ModalThemeWrapper theme={theme}>
-      <SuccessScreen {...componentProps} />
-    </ModalThemeWrapper>
-  );
-};
-
-const meta = {
+const meta: Meta<typeof SuccessScreen> = {
   args: {
     completedStatuses: mockBuyCompletedStatuses,
     onDone: () => {},
     preparedQuote: simpleBuyQuote,
-    theme: "dark",
-    uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
+    showContinueWithTx: false,
     windowAdapter: webWindowAdapter,
-  },
-  argTypes: {
-    onDone: { action: "success screen closed" },
-    theme: {
-      control: "select",
-      description: "Theme for the component",
-      options: ["light", "dark"],
-    },
-  },
-  component: SuccessScreenWithTheme,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Success screen that displays completion confirmation with transaction summary, payment details, and action buttons for next steps. Includes animated success icon and detailed transaction view.",
-      },
-    },
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  title: "Bridge/SuccessScreen",
-} satisfies Meta<typeof SuccessScreenWithTheme>;
+    client: storyClient,
+    hasPaymentId: false,
+  },
+  component: SuccessScreen,
+  decorators: [
+    (Story) => (
+      <ModalThemeWrapper>
+        <Story />
+      </ModalThemeWrapper>
+    ),
+  ],
+  title: "Bridge/screens/SuccessScreen",
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    client: storyClient,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
-export const DefaultLight: Story = {
-  args: {
-    client: storyClient,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-  },
+export const Basic: Story = {
+  args: {},
 };
 
 export const OnrampPayment: Story = {
   args: {
-    client: storyClient,
-    completedStatuses: mockOnrampCompletedStatuses,
-    preparedQuote: simpleOnrampQuote,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Success screen for onramp payments showing payment ID that can be copied to clipboard.",
-      },
-    },
-  },
-};
-
-export const OnrampPaymentLight: Story = {
-  args: {
-    client: storyClient,
     completedStatuses: mockOnrampCompletedStatuses,
     preparedQuote: simpleOnrampQuote,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
   },
 };
 
 export const ComplexPayment: Story = {
   args: {
-    client: storyClient,
-    completedStatuses: [
-      ...mockOnrampCompletedStatuses,
-      ...mockBuyCompletedStatuses,
-    ],
-    preparedQuote: simpleOnrampQuote,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Success screen for onramp payments showing payment ID that can be copied to clipboard.",
-      },
-    },
-  },
-};
-
-export const ComplexPaymentLight: Story = {
-  args: {
-    client: storyClient,
     completedStatuses: [
       ...mockOnrampCompletedStatuses,
       ...mockBuyCompletedStatuses,
     ],
     preparedQuote: simpleOnrampQuote,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
   },
 };
 
 export const TransactionPayment: Story = {
   args: {
-    client: storyClient,
     completedStatuses: mockBuyCompletedStatuses,
     preparedQuote: simpleBuyQuote,
-    theme: "light",
-    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
+    showContinueWithTx: true,
   },
 };
 
 export const PaymentId: Story = {
   args: {
-    client: storyClient,
     completedStatuses: mockBuyCompletedStatuses,
     hasPaymentId: true,
     preparedQuote: simpleBuyQuote,
-    theme: "light",
-    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
+    showContinueWithTx: true,
   },
 };

package/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  TransactionWidget,
+  type TransactionWidgetProps,
+} from "../../../react/web/ui/Bridge/TransactionWidget.js";
+import { storyClient } from "../../utils.js";
+import { TRANSACTION_UI_OPTIONS } from "../fixtures.js";
+
+const meta: Meta<typeof StoryVariant> = {
+  args: {
+    client: storyClient,
+    onSuccess: () => {},
+    onError: () => {},
+    onCancel: () => {},
+    currency: "USD",
+    ...TRANSACTION_UI_OPTIONS.ethTransfer,
+  },
+  component: StoryVariant,
+  title: "Bridge/Transaction/TransactionWidget",
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const EthereumTransfer: Story = {
+  args: {
+    ...TRANSACTION_UI_OPTIONS.ethTransfer,
+  },
+};
+
+export const ERC20TokenTransfer: Story = {
+  args: {
+    ...TRANSACTION_UI_OPTIONS.erc20Transfer,
+  },
+};
+
+export const ContractInteraction: Story = {
+  args: {
+    ...TRANSACTION_UI_OPTIONS.contractInteraction,
+  },
+};
+
+export const CustomButtonLabel: Story = {
+  args: {
+    ...TRANSACTION_UI_OPTIONS.customButton,
+  },
+};
+
+function StoryVariant(props: TransactionWidgetProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <TransactionWidget {...props} theme="dark" />
+      <TransactionWidget {...props} theme="light" />
+    </div>
+  );
+}

package/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta } from "@storybook/react";
+import { base } from "../../../chains/chain-definitions/base.js";
+import { sepolia } from "../../../chains/chain-definitions/sepolia.js";
+import { useActiveAccount } from "../../../react/core/hooks/wallets/useActiveAccount.js";
+import { useSendTransaction } from "../../../react/web/hooks/transaction/useSendTransaction.js";
+import { ConnectButton } from "../../../react/web/ui/ConnectWallet/ConnectButton.js";
+import { Button } from "../../../react/web/ui/components/buttons.js";
+import { Spinner } from "../../../react/web/ui/components/Spinner.js";
+import {
+  type PreparedTransaction,
+  prepareTransaction,
+} from "../../../transaction/prepare-transaction.js";
+import { toWei } from "../../../utils/units.js";
+import { storyClient } from "../../utils.js";
+
+const meta: Meta<typeof Variant> = {
+  component: Variant,
+  title: "Bridge/Transaction/useSendTransaction",
+};
+export default meta;
+
+const sendBase = prepareTransaction({
+  chain: base,
+  client: storyClient,
+  to: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425",
+  value: toWei("100"),
+});
+
+// using an unsupported chain to popup deposit screen
+const sendSepolia = prepareTransaction({
+  chain: sepolia,
+  client: storyClient,
+  to: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425",
+  value: toWei("100"),
+});
+
+export const BuyAndExecuteTx = {
+  args: {
+    transaction: sendBase,
+  },
+};
+
+export const DepositAndExecuteTx = {
+  args: {
+    transaction: sendSepolia,
+  },
+};
+
+function Variant(props: { transaction: PreparedTransaction }) {
+  const sendTx = useSendTransaction();
+  const account = useActiveAccount();
+
+  if (!account) {
+    return <ConnectButton client={storyClient} />;
+  }
+  return (
+    <Button
+      variant="primary"
+      gap="xs"
+      onClick={() => {
+        sendTx.mutate(props.transaction);
+      }}
+    >
+      {sendTx.isPending && <Spinner size="sm" />}
+      Execute
+    </Button>
+  );
+}

package/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx

@@ -1,58 +1,25 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { defineChain } from "../../chains/utils.js";
-import { createThirdwebClient } from "../../client/client.js";
-import type { Theme } from "../../react/core/design-system/index.js";
-import {
-  UnsupportedTokenScreen,
-  type UnsupportedTokenScreenProps,
-} from "../../react/web/ui/Bridge/UnsupportedTokenScreen.js";
-import { ModalThemeWrapper } from "../utils.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../constants/addresses.js";
+import { UnsupportedTokenScreen } from "../../react/web/ui/Bridge/UnsupportedTokenScreen.js";
+import { ModalThemeWrapper, storyClient } from "../utils.js";
 
-const TEST_CLIENT = createThirdwebClient({ clientId: "test" });
-
-// Props interface for the wrapper component
-interface UnsupportedTokenScreenWithThemeProps
-  extends UnsupportedTokenScreenProps {
-  theme: "light" | "dark" | Theme;
-}
-
-// Wrapper component to provide theme context
-const UnsupportedTokenScreenWithTheme = (
-  props: UnsupportedTokenScreenWithThemeProps,
-) => {
-  const { theme, ...componentProps } = props;
-  return (
-    <ModalThemeWrapper theme={theme}>
-      <UnsupportedTokenScreen {...componentProps} />
-    </ModalThemeWrapper>
-  );
-};
-
-const meta = {
+const meta: Meta<typeof UnsupportedTokenScreen> = {
   args: {
-    chain: defineChain(1), // Ethereum mainnet
-    theme: "dark",
-  },
-  argTypes: {
-    theme: {
-      control: "select",
-      description: "Theme for the component",
-      options: ["light", "dark"],
-    },
-  },
-  component: UnsupportedTokenScreenWithTheme,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Screen displayed when a token is being indexed or when using an unsupported testnet. Shows loading state for indexing tokens or error state for testnets.",
-      },
-    },
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  title: "Bridge/UnsupportedTokenScreen",
-} satisfies Meta<typeof UnsupportedTokenScreenWithTheme>;
+    client: storyClient,
+    chain: defineChain(1),
+    tokenAddress: NATIVE_TOKEN_ADDRESS,
+  },
+  component: UnsupportedTokenScreen,
+  title: "Bridge/screens/UnsupportedTokenScreen",
+  decorators: [
+    (Story) => (
+      <ModalThemeWrapper>
+        <Story />
+      </ModalThemeWrapper>
+    ),
+  ],
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -60,67 +27,11 @@ type Story = StoryObj<typeof meta>;
 export const TokenNotSupported: Story = {
   args: {
     chain: defineChain(1),
-    client: TEST_CLIENT,
-    theme: "dark", // Ethereum mainnet - will show indexing spinner
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Shows the loading state when a token is being indexed by the Bridge on a mainnet chain.",
-      },
-    },
-  },
-};
-
-export const TokenNotSupportedLight: Story = {
-  args: {
-    chain: defineChain(1),
-    client: TEST_CLIENT,
-    theme: "light", // Ethereum mainnet - will show indexing spinner
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Shows the loading state when a token is being indexed by the Bridge on a mainnet chain (light theme).",
-      },
-    },
   },
 };
 
 export const TestnetNotSupported: Story = {
   args: {
-    chain: defineChain(11155111),
-    client: TEST_CLIENT,
-    theme: "dark", // Sepolia testnet - will show error state
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Shows the error state when trying to use the Bridge on a testnet chain (Sepolia in this example).",
-      },
-    },
-  },
-};
-
-export const TestnetNotSupportedLight: Story = {
-  args: {
-    chain: defineChain(11155111),
-    client: TEST_CLIENT,
-    theme: "light", // Sepolia testnet - will show error state
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Shows the error state when trying to use the Bridge on a testnet chain (Sepolia in this example, light theme).",
-      },
-    },
+    chain: defineChain(11155111), // Sepolia testnet
   },
 };