thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

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

@@ -0,0 +1,109 @@
+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 { 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, 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} />
+    </ModalThemeWrapper>
+  );
+};
+
+const meta = {
+  title: "Bridge/StepRunner",
+  component: StepRunnerWithTheme,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "**StepRunner** executes prepared route steps sequentially, showing real-time progress and transaction status.\n\n" +
+          "## Features\n" +
+          "- **Real Execution**: Uses useStepExecutor hook for actual transaction processing\n" +
+          "- **Progress Tracking**: Visual progress bar and step-by-step status updates\n" +
+          "- **Error Handling**: Retry functionality for failed transactions\n" +
+          "- **Transaction Batching**: Optimizes multiple transactions when possible\n" +
+          "- **Onramp Support**: Handles fiat-to-crypto onramp flows\n\n" +
+          "## Props\n" +
+          "- `steps`: Array of RouteStep objects from Bridge.prepare()\n" +
+          "- `wallet`: Connected wallet for transaction signing\n" +
+          "- `client`: ThirdwebClient instance\n" +
+          "- `windowAdapter`: Platform-specific window/URL handler\n" +
+          "- `onramp`: Optional onramp configuration\n\n" +
+          "## Integration\n" +
+          "This component is typically used within the BridgeOrchestrator after route preparation.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    wallet: STORY_MOCK_WALLET,
+    client: storyClient,
+    windowAdapter: mockWindowAdapter,
+    onComplete: (_completedStatuses: CompletedStatusResult[]) => {},
+    onError: (error: Error) => console.error("Error:", error),
+    onCancel: () => {},
+    theme: "dark",
+  },
+  argTypes: {
+    theme: {
+      control: "select",
+      options: ["light", "dark"],
+      description: "Theme for the component",
+    },
+    onComplete: { action: "execution completed" },
+    onError: { action: "error occurred" },
+    onCancel: { action: "execution cancelled" },
+  },
+} satisfies Meta<typeof StepRunnerWithTheme>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Light: Story = {
+  args: {
+    theme: "light",
+    request: simpleBuyRequest,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};
+
+export const Dark: Story = {
+  args: {
+    theme: "dark",
+    request: simpleBuyRequest,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};

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

@@ -0,0 +1,217 @@
+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 { ModalThemeWrapper } from "../utils.js";
+import {
+  FUND_WALLET_UI_OPTIONS,
+  TRANSACTION_UI_OPTIONS,
+  simpleBuyQuote,
+  simpleOnrampQuote,
+} from "./fixtures.js";
+
+const mockBuyCompletedStatuses: CompletedStatusResult[] = JSON.parse(
+  stringify([
+    {
+      type: "buy",
+      status: "COMPLETED",
+      paymentId: "payment-12345",
+      originAmount: 1000000000000000000n,
+      destinationAmount: 100000000n,
+      originChainId: 1,
+      destinationChainId: 1,
+      originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+      destinationTokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+      originToken: {
+        chainId: 1,
+        address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+        symbol: "ETH",
+        name: "Ethereum",
+        decimals: 18,
+        priceUsd: 2500,
+      },
+      destinationToken: {
+        chainId: 1,
+        address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+        symbol: "USDC",
+        name: "USD Coin",
+        decimals: 6,
+        priceUsd: 1,
+      },
+      sender: "0xa3841994009B4fEabb01ebcC62062F9E56F701CD",
+      receiver: "0xa3841994009B4fEabb01ebcC62062F9E56F701CD",
+      transactions: [
+        {
+          chainId: 1,
+          transactionHash:
+            "0x1234567890abcdef1234567890abcdef12345678901234567890abcdef123456",
+        },
+      ],
+    },
+  ]),
+);
+
+const mockOnrampCompletedStatuses: CompletedStatusResult[] = JSON.parse(
+  stringify([
+    {
+      type: "onramp",
+      status: "COMPLETED",
+      transactions: [
+        {
+          chainId: 137,
+          transactionHash:
+            "0xabcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890",
+        },
+      ],
+      purchaseData: {
+        orderId: "stripe-order-abc123",
+      },
+    },
+  ]),
+);
+
+// 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 = {
+  title: "Bridge/SuccessScreen",
+  component: SuccessScreenWithTheme,
+  parameters: {
+    layout: "centered",
+    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.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    preparedQuote: simpleBuyQuote,
+    completedStatuses: mockBuyCompletedStatuses,
+    onDone: () => {},
+    theme: "dark",
+    windowAdapter: webWindowAdapter,
+    uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
+  },
+  argTypes: {
+    theme: {
+      control: "select",
+      options: ["light", "dark"],
+      description: "Theme for the component",
+    },
+    onDone: { action: "success screen closed" },
+  },
+} satisfies Meta<typeof SuccessScreenWithTheme>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    theme: "dark",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+export const DefaultLight: Story = {
+  args: {
+    theme: "light",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};
+
+export const OnrampPayment: Story = {
+  args: {
+    theme: "dark",
+    preparedQuote: simpleOnrampQuote,
+    completedStatuses: mockOnrampCompletedStatuses,
+  },
+  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: {
+    theme: "light",
+    preparedQuote: simpleOnrampQuote,
+    completedStatuses: mockOnrampCompletedStatuses,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};
+
+export const ComplexPayment: Story = {
+  args: {
+    theme: "dark",
+    preparedQuote: simpleOnrampQuote,
+    completedStatuses: [
+      ...mockOnrampCompletedStatuses,
+      ...mockBuyCompletedStatuses,
+    ],
+  },
+  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: {
+    theme: "light",
+    preparedQuote: simpleOnrampQuote,
+    completedStatuses: [
+      ...mockOnrampCompletedStatuses,
+      ...mockBuyCompletedStatuses,
+    ],
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};
+
+export const TransactionPayment: Story = {
+  args: {
+    theme: "light",
+    preparedQuote: simpleBuyQuote,
+    completedStatuses: mockBuyCompletedStatuses,
+    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};

package/src/stories/Bridge/TransactionPayment.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  TransactionPayment,
+  type TransactionPaymentProps,
+} from "../../react/web/ui/Bridge/TransactionPayment.js";
+import { ModalThemeWrapper, storyClient } from "../utils.js";
+import { TRANSACTION_UI_OPTIONS } from "./fixtures.js";
+
+// Props interface for the wrapper component
+interface TransactionPaymentWithThemeProps extends TransactionPaymentProps {
+  theme: "light" | "dark";
+}
+
+// Wrapper component to provide theme context
+const TransactionPaymentWithTheme = (
+  props: TransactionPaymentWithThemeProps,
+) => {
+  const { theme, ...componentProps } = props;
+
+  return (
+    <ModalThemeWrapper theme={theme}>
+      <div style={{ width: "400px" }}>
+        <TransactionPayment {...componentProps} />
+      </div>
+    </ModalThemeWrapper>
+  );
+};
+
+const meta = {
+  title: "Bridge/TransactionPayment",
+  component: TransactionPaymentWithTheme,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Transaction payment component that displays detailed transaction information including contract details, function names, transaction costs, and network fees.\n\n" +
+          "## Features\n" +
+          "- **Contract Information**: Shows contract name and clickable address\n" +
+          "- **Function Detection**: Extracts function names from transaction data using ABI\n" +
+          "- **Cost Calculation**: Displays transaction value and USD equivalent\n" +
+          "- **Network Fees**: Shows estimated gas costs with token amounts\n" +
+          "- **Chain Details**: Network name and logo with proper formatting\n" +
+          "- **Skeleton Loading**: Comprehensive loading states matching final layout\n\n" +
+          "This component now accepts uiOptions directly to configure the transaction and metadata. Supports both native token and ERC20 token transactions with proper function name extraction.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    uiOptions: TRANSACTION_UI_OPTIONS.ethTransfer,
+    client: storyClient,
+    onContinue: (_amount, _token, _receiverAddress) => {},
+    theme: "dark",
+  },
+  argTypes: {
+    theme: {
+      control: "select",
+      options: ["light", "dark"],
+      description: "Theme for the component",
+    },
+    onContinue: {
+      action: "continue clicked",
+      description: "Called when user continues with the transaction",
+    },
+    uiOptions: {
+      description:
+        "UI configuration for transaction mode including prepared transaction",
+    },
+  },
+} satisfies Meta<typeof TransactionPaymentWithTheme>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const EthereumTransfer: Story = {
+  args: {
+    uiOptions: TRANSACTION_UI_OPTIONS.ethTransfer,
+    theme: "dark",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Simple ETH transfer transaction showing native token value and network fees with USD conversion. Demonstrates function name extraction from contract ABI.",
+      },
+    },
+  },
+};
+
+export const EthereumTransferLight: Story = {
+  args: {
+    uiOptions: TRANSACTION_UI_OPTIONS.ethTransfer,
+    theme: "light",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story:
+          "Simple ETH transfer transaction in light theme with skeleton loading support.",
+      },
+    },
+  },
+};
+
+export const ERC20TokenTransfer: Story = {
+  args: {
+    uiOptions: TRANSACTION_UI_OPTIONS.erc20Transfer,
+    theme: "dark",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "ERC20 token transaction showing token amount, USD value, and proper formatting using real token data. Displays transfer function details.",
+      },
+    },
+  },
+};
+
+export const ERC20TokenTransferLight: Story = {
+  args: {
+    uiOptions: TRANSACTION_UI_OPTIONS.erc20Transfer,
+    theme: "light",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story:
+          "ERC20 token transaction in light theme with enhanced formatting.",
+      },
+    },
+  },
+};
+
+export const ContractInteraction: Story = {
+  args: {
+    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
+    theme: "dark",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Complex contract interaction showing function name extraction from ABI (claimTo), cost calculation, and network details with proper currency formatting.",
+      },
+    },
+  },
+};
+
+export const ContractInteractionLight: Story = {
+  args: {
+    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
+    theme: "light",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story:
+          "Contract interaction transaction in light theme with enhanced UX and skeleton loading.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { defineChain } from "../../chains/utils.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";
+
+// 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 = {
+  title: "Bridge/UnsupportedTokenScreen",
+  component: UnsupportedTokenScreenWithTheme,
+  parameters: {
+    layout: "centered",
+    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.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    chain: defineChain(1), // Ethereum mainnet
+    theme: "dark",
+  },
+  argTypes: {
+    theme: {
+      control: "select",
+      options: ["light", "dark"],
+      description: "Theme for the component",
+    },
+  },
+} satisfies Meta<typeof UnsupportedTokenScreenWithTheme>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TokenNotSupported: Story = {
+  args: {
+    theme: "dark",
+    chain: defineChain(1), // 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 Universal Bridge on a mainnet chain.",
+      },
+    },
+  },
+};
+
+export const TokenNotSupportedLight: Story = {
+  args: {
+    theme: "light",
+    chain: defineChain(1), // 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 Universal Bridge on a mainnet chain (light theme).",
+      },
+    },
+  },
+};
+
+export const TestnetNotSupported: Story = {
+  args: {
+    theme: "dark",
+    chain: defineChain(11155111), // Sepolia testnet - will show error state
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story:
+          "Shows the error state when trying to use the Universal Bridge on a testnet chain (Sepolia in this example).",
+      },
+    },
+  },
+};
+
+export const TestnetNotSupportedLight: Story = {
+  args: {
+    theme: "light",
+    chain: defineChain(11155111), // Sepolia testnet - will show error state
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+    docs: {
+      description: {
+        story:
+          "Shows the error state when trying to use the Universal Bridge on a testnet chain (Sepolia in this example, light theme).",
+      },
+    },
+  },
+};