thirdweb 5.108.5 → 5.108.7

package/src/stories/Bridge/FundWallet.stories.tsx

@@ -1,227 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import type { Theme } from "../../react/core/design-system/index.js";
-import type { FundWalletProps } from "../../react/web/ui/Bridge/FundWallet.js";
-import { FundWallet } from "../../react/web/ui/Bridge/FundWallet.js";
-import { ModalThemeWrapper, storyClient } from "../utils.js";
-import { FUND_WALLET_UI_OPTIONS, RECEIVER_ADDRESSES } from "./fixtures.js";
-
-// Props interface for the wrapper component
-interface FundWalletWithThemeProps extends FundWalletProps {
-  theme: "light" | "dark" | Theme;
-}
-
-// Wrapper component to provide theme context
-const FundWalletWithTheme = (props: FundWalletWithThemeProps) => {
-  const { theme, ...componentProps } = props;
-  return (
-    <ModalThemeWrapper theme={theme}>
-      <FundWallet {...componentProps} />
-    </ModalThemeWrapper>
-  );
-};
-
-const meta = {
-  args: {
-    client: storyClient,
-    onContinue: (amount, token, receiverAddress) => {
-      alert(`Continue with ${amount} ${token.symbol} to ${receiverAddress}`);
-    },
-    receiverAddress: RECEIVER_ADDRESSES.primary,
-    theme: "dark",
-    uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
-  },
-  argTypes: {
-    onContinue: { action: "continue clicked" },
-    receiverAddress: {
-      description: "Optional receiver address (defaults to connected wallet)",
-    },
-    theme: {
-      control: "select",
-      description: "Theme for the component",
-      options: ["light", "dark"],
-    },
-    uiOptions: {
-      description: "UI configuration for fund wallet mode",
-    },
-  },
-  component: FundWalletWithTheme,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "FundWallet component allows users to specify the amount they want to add to their wallet. This is the first screen in the fund_wallet flow before method selection.\n\n" +
-          "## Features\n" +
-          "- **Token Selection**: Choose from different tokens (ETH, USDC, UNI)\n" +
-          "- **Amount Input**: Enter custom amount or use quick options\n" +
-          "- **Receiver Address**: Optional receiver address (defaults to connected wallet)\n" +
-          "- **Quick Options**: Preset amounts for faster selection\n" +
-          "- **Theme Support**: Works with both light and dark themes\n\n" +
-          "This component now accepts uiOptions directly to configure the destination token, initial amount, and quick options.",
-      },
-    },
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  title: "Bridge/FundWallet",
-} satisfies Meta<typeof FundWalletWithTheme>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Light: Story = {
-  args: {
-    receiverAddress: undefined,
-    theme: "light",
-    uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Default fund wallet interface in light theme with ETH token.",
-      },
-    },
-  },
-};
-
-export const Dark: Story = {
-  args: {
-    receiverAddress: undefined,
-    theme: "dark",
-    uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story: "Default fund wallet interface in dark theme with ETH token.",
-      },
-    },
-  },
-};
-
-export const WithInitialAmount: Story = {
-  args: {
-    receiverAddress: RECEIVER_ADDRESSES.secondary,
-    theme: "dark",
-    uiOptions: FUND_WALLET_UI_OPTIONS.ethWithAmount,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Fund wallet with pre-filled amount and specified receiver address.",
-      },
-    },
-  },
-};
-
-export const WithInitialAmountLight: Story = {
-  args: {
-    receiverAddress: RECEIVER_ADDRESSES.secondary,
-    theme: "light",
-    uiOptions: FUND_WALLET_UI_OPTIONS.ethWithAmount,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Light theme version with pre-filled amount and receiver address.",
-      },
-    },
-  },
-};
-
-export const USDCToken: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story: "Fund wallet configured for USDC token with initial amount.",
-      },
-    },
-  },
-};
-
-export const USDCTokenLight: Story = {
-  args: {
-    theme: "light",
-    uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Light theme version for USDC token funding.",
-      },
-    },
-  },
-};
-
-export const LargeAmount: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: FUND_WALLET_UI_OPTIONS.uniLarge,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Fund wallet with UNI token and large pre-filled amount to test formatting.",
-      },
-    },
-  },
-};
-
-export const LargeAmountLight: Story = {
-  args: {
-    theme: "light",
-    uiOptions: FUND_WALLET_UI_OPTIONS.uniLarge,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Light theme version with UNI token and large amount.",
-      },
-    },
-  },
-};
-
-export const CustomButtonLabel: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: FUND_WALLET_UI_OPTIONS.customButton,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Example showcasing custom button label functionality. The button shows 'Add Funds Now' instead of the default 'Buy [amount] [symbol]' text.",
-      },
-    },
-  },
-};
-
-export const CustomButtonLabelLight: Story = {
-  args: {
-    theme: "light",
-    uiOptions: FUND_WALLET_UI_OPTIONS.customButton,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Light theme version with custom button label 'Add Funds Now'.",
-      },
-    },
-  },
-};

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

@@ -1,202 +0,0 @@
-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 = {
-  args: {
-    client: storyClient,
-    onExecuteTransaction: () => {},
-    onContinue: (_amount, _token, _receiverAddress) => {},
-    theme: "dark",
-    uiOptions: TRANSACTION_UI_OPTIONS.ethTransfer,
-  },
-  argTypes: {
-    onContinue: {
-      action: "continue clicked",
-      description: "Called when user continues with the transaction",
-    },
-    theme: {
-      control: "select",
-      description: "Theme for the component",
-      options: ["light", "dark"],
-    },
-    uiOptions: {
-      description:
-        "UI configuration for transaction mode including prepared transaction",
-    },
-  },
-  component: TransactionPaymentWithTheme,
-  parameters: {
-    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.",
-      },
-    },
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  title: "Bridge/TransactionPayment",
-} satisfies Meta<typeof TransactionPaymentWithTheme>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const EthereumTransfer: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: TRANSACTION_UI_OPTIONS.ethTransfer,
-  },
-  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: {
-    theme: "light",
-    uiOptions: TRANSACTION_UI_OPTIONS.ethTransfer,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Simple ETH transfer transaction in light theme with skeleton loading support.",
-      },
-    },
-  },
-};
-
-export const ERC20TokenTransfer: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: TRANSACTION_UI_OPTIONS.erc20Transfer,
-  },
-  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: {
-    theme: "light",
-    uiOptions: TRANSACTION_UI_OPTIONS.erc20Transfer,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "ERC20 token transaction in light theme with enhanced formatting.",
-      },
-    },
-  },
-};
-
-export const ContractInteraction: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
-  },
-  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: {
-    theme: "light",
-    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Contract interaction transaction in light theme with enhanced UX and skeleton loading.",
-      },
-    },
-  },
-};
-
-export const CustomButtonLabel: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: TRANSACTION_UI_OPTIONS.customButton,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Example showcasing custom button label functionality. The button shows 'Execute Now' instead of the default 'Execute [functionName]' text.",
-      },
-    },
-  },
-};
-
-export const CustomButtonLabelLight: Story = {
-  args: {
-    theme: "light",
-    uiOptions: TRANSACTION_UI_OPTIONS.customButton,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Light theme version with custom button label 'Execute Now'.",
-      },
-    },
-  },
-};