thirdweb 5.108.5 → 5.108.7

package/src/stories/Bridge/BridgeOrchestrator.stories.tsx

@@ -1,298 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import type { Theme } from "../../react/core/design-system/index.js";
-import {
-  BridgeOrchestrator,
-  type BridgeOrchestratorProps,
-} from "../../react/web/ui/Bridge/BridgeOrchestrator.js";
-import { ModalThemeWrapper, storyClient } from "../utils.js";
-import {
-  DIRECT_PAYMENT_UI_OPTIONS,
-  FUND_WALLET_UI_OPTIONS,
-  TRANSACTION_UI_OPTIONS,
-} from "./fixtures.js";
-
-/**
- * BridgeOrchestrator is the main orchestrator component for the Bridge payment flow.
- * It manages the complete state machine navigation between different screens and
- * handles the coordination of payment methods, routes, and execution.
- */
-
-// Props interface for the wrapper component
-interface BridgeOrchestratorWithThemeProps extends BridgeOrchestratorProps {
-  theme: "light" | "dark" | Theme;
-}
-
-// Wrapper component to provide theme context
-const BridgeOrchestratorWithTheme = (
-  props: BridgeOrchestratorWithThemeProps,
-) => {
-  const { theme, ...componentProps } = props;
-  return (
-    <ModalThemeWrapper theme={theme}>
-      <BridgeOrchestrator {...componentProps} />
-    </ModalThemeWrapper>
-  );
-};
-
-const meta = {
-  args: {
-    client: storyClient,
-    onCancel: () => {},
-    onComplete: () => {},
-    onError: (error) => console.error("Bridge error:", error),
-    theme: "dark",
-    uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
-    country: "US",
-  },
-  argTypes: {
-    onCancel: { action: "flow cancelled" },
-    onComplete: { action: "flow completed" },
-    onError: { action: "error occurred" },
-    presetOptions: {
-      control: "object",
-      description: "Quick buy options",
-    },
-    theme: {
-      control: "select",
-      description: "Theme for the component",
-      options: ["light", "dark"],
-    },
-  },
-  component: BridgeOrchestratorWithTheme,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "**BridgeOrchestrator** is the main orchestrator component that manages the complete Bridge payment flow using XState FSM.\n\n" +
-          "## Features\n" +
-          "- **State Machine Navigation**: Uses XState v5 for predictable state transitions\n" +
-          "- **Payment Method Selection**: Supports wallet and fiat payment methods\n" +
-          "- **Route Preview**: Shows detailed transaction steps and fees\n" +
-          "- **Step Execution**: Real-time progress tracking\n" +
-          "- **Error Handling**: Comprehensive error states with retry functionality\n" +
-          "- **Theme Support**: Works with both light and dark themes\n\n" +
-          "## State Flow\n" +
-          "1. **Resolve Requirements** → 2. **Method Selection** → 3. **Quote** → 4. **Preview** → 5. **Prepare** → 6. **Execute** → 7. **Success**\n\n" +
-          "Each state can transition to the **Error** state, which provides retry functionality.",
-      },
-    },
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-  title: "Bridge/BridgeOrchestrator",
-} satisfies Meta<typeof BridgeOrchestratorWithTheme>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Default BridgeOrchestrator in light theme.
- */
-export const Light: Story = {
-  args: {
-    connectLocale: undefined,
-    connectOptions: undefined,
-    onCancel: undefined,
-    onComplete: undefined,
-    onError: undefined,
-    paymentLinkId: undefined,
-    presetOptions: undefined,
-    purchaseData: undefined,
-    receiverAddress: undefined,
-    theme: "light",
-    uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-  },
-};
-
-/**
- * BridgeOrchestrator in dark theme.
- */
-export const Dark: Story = {
-  args: {
-    connectLocale: undefined,
-    connectOptions: undefined,
-    onCancel: undefined,
-    onComplete: undefined,
-    onError: undefined,
-    paymentLinkId: undefined,
-    presetOptions: undefined,
-    purchaseData: undefined,
-    receiverAddress: undefined,
-    theme: "dark",
-    uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
-/**
- * Direct payment mode for purchasing a specific product/service.
- */
-export const DirectPayment: Story = {
-  args: {
-    connectLocale: undefined,
-    connectOptions: undefined,
-    onCancel: undefined,
-    onComplete: undefined,
-    onError: undefined,
-    paymentLinkId: undefined,
-    presetOptions: undefined,
-    purchaseData: undefined,
-    receiverAddress: undefined,
-    theme: "dark",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Direct payment mode shows a product purchase interface with the item image, price, seller address, and network information. The user can connect their wallet and proceed with the payment.",
-      },
-    },
-  },
-};
-
-/**
- * Direct payment mode in light theme.
- */
-export const DirectPaymentLight: Story = {
-  args: {
-    connectLocale: undefined,
-    connectOptions: undefined,
-    onCancel: undefined,
-    onComplete: undefined,
-    onError: undefined,
-    paymentLinkId: undefined,
-    presetOptions: undefined,
-    purchaseData: undefined,
-    receiverAddress: undefined,
-    theme: "light",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.concertTicket,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Light theme version of direct payment mode, showing a different product example with USDC payment.",
-      },
-    },
-  },
-};
-
-/**
- * Transaction mode showing a complex contract interaction.
- */
-export const Transaction: Story = {
-  args: {
-    connectLocale: undefined,
-    connectOptions: undefined,
-    onCancel: undefined,
-    onComplete: undefined,
-    onError: undefined,
-    paymentLinkId: undefined,
-    presetOptions: undefined,
-    purchaseData: undefined,
-    receiverAddress: undefined,
-    theme: "dark",
-    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Transaction mode showing a complex contract interaction (claimTo function) with function name extraction from contract ABI and detailed cost breakdown.",
-      },
-    },
-  },
-};
-
-/**
- * Transaction mode in light theme showing an ERC20 token transfer.
- */
-export const TransactionLight: Story = {
-  args: {
-    connectLocale: undefined,
-    connectOptions: undefined,
-    onCancel: undefined,
-    onComplete: undefined,
-    onError: undefined,
-    paymentLinkId: undefined,
-    presetOptions: undefined,
-    purchaseData: undefined,
-    receiverAddress: undefined,
-    theme: "light",
-    uiOptions: TRANSACTION_UI_OPTIONS.erc20Transfer,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Light theme version of transaction mode showing an ERC20 token transfer with proper token amount formatting and USD conversion.",
-      },
-    },
-  },
-};
-
-/**
- * Transaction mode in light theme showing an ERC20 token transfer.
- */
-export const TransactionJPYCurrency: Story = {
-  args: {
-    connectLocale: undefined,
-    connectOptions: undefined,
-    onCancel: undefined,
-    onComplete: undefined,
-    onError: undefined,
-    paymentLinkId: undefined,
-    presetOptions: undefined,
-    purchaseData: undefined,
-    receiverAddress: undefined,
-    theme: "light",
-    uiOptions: {
-      ...TRANSACTION_UI_OPTIONS.erc20Transfer,
-      currency: "JPY",
-    },
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Light theme version of transaction mode showing an ERC20 token transfer with proper token amount formatting and USD conversion.",
-      },
-    },
-  },
-};
-
-export const CustompresetOptions: Story = {
-  args: {
-    connectLocale: undefined,
-    connectOptions: undefined,
-    onCancel: undefined,
-    onComplete: undefined,
-    onError: undefined,
-    paymentLinkId: undefined,
-    presetOptions: [1, 2, 3],
-    purchaseData: undefined,
-    receiverAddress: undefined,
-    theme: "dark",
-    uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Fund wallet mode with custom quick options showing ETH with [1, 2, 3] preset amounts.",
-      },
-    },
-  },
-};

package/src/stories/Bridge/DirectPayment.stories.tsx

@@ -1,256 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import type { Theme } from "../../react/core/design-system/index.js";
-import {
-  DirectPayment,
-  type DirectPaymentProps,
-} from "../../react/web/ui/Bridge/DirectPayment.js";
-import { ModalThemeWrapper, storyClient } from "../utils.js";
-import { DIRECT_PAYMENT_UI_OPTIONS } from "./fixtures.js";
-
-// Props interface for the wrapper component
-interface DirectPaymentWithThemeProps extends DirectPaymentProps {
-  theme: "light" | "dark" | Theme;
-}
-
-// Wrapper component to provide theme context
-const DirectPaymentWithTheme = (props: DirectPaymentWithThemeProps) => {
-  const { theme, ...componentProps } = props;
-  return (
-    <ModalThemeWrapper theme={theme}>
-      <DirectPayment {...componentProps} />
-    </ModalThemeWrapper>
-  );
-};
-
-const meta = {
-  args: {
-    client: storyClient,
-    onContinue: (_amount, _token, _receiverAddress) => {},
-    theme: "dark",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
-  },
-  argTypes: {
-    onContinue: {
-      action: "continue clicked",
-      description: "Called when user continues with the payment",
-    },
-    theme: {
-      control: "select",
-      description: "Theme for the component",
-      options: ["light", "dark"],
-    },
-    uiOptions: {
-      description:
-        "UI configuration for direct payment mode including payment info and metadata",
-    },
-  },
-  component: DirectPaymentWithTheme,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "DirectPayment component displays a product/service purchase interface with payment details.\n\n" +
-          "## Features\n" +
-          "- **Product Display**: Shows product name, image, and pricing\n" +
-          "- **Payment Details**: Token amount, network information, and seller address\n" +
-          "- **Wallet Integration**: Connect button or continue with active wallet\n" +
-          "- **Responsive Design**: Adapts to different screen sizes and themes\n" +
-          "- **Fee Configuration**: Support for sender or receiver paying fees\n\n" +
-          "This component is used in the 'direct_payment' mode of BridgeOrchestrator for purchasing specific items or services. It now accepts uiOptions directly to configure payment info and metadata.",
-      },
-    },
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  title: "Bridge/DirectPayment",
-} satisfies Meta<typeof DirectPaymentWithTheme>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const DigitalArt: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Example of purchasing a digital art NFT with ETH payment. Shows the product image, pricing in ETH, and seller information with sender paying fees.",
-      },
-    },
-  },
-};
-
-export const DigitalArtLight: Story = {
-  args: {
-    theme: "light",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Light theme version of the digital art purchase interface.",
-      },
-    },
-  },
-};
-
-export const ConcertTicket: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.concertTicket,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Example of purchasing a concert ticket with USDC payment. Shows different product type, stable token pricing, and receiver paying fees.",
-      },
-    },
-  },
-};
-
-export const ConcertTicketLight: Story = {
-  args: {
-    theme: "light",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.concertTicket,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Light theme version of the concert ticket purchase.",
-      },
-    },
-  },
-};
-
-export const SubscriptionService: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.subscription,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Example of a subscription service payment with detailed description. Shows how the component works for recurring service payments with comprehensive product information.",
-      },
-    },
-  },
-};
-
-export const SubscriptionServiceLight: Story = {
-  args: {
-    theme: "light",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.subscription,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Light theme version of subscription service payment with full description text.",
-      },
-    },
-  },
-};
-
-export const PhysicalProduct: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.sneakers,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Example of purchasing physical products with crypto payments. Shows how the component adapts to different product types with ETH payment.",
-      },
-    },
-  },
-};
-
-export const PhysicalProductLight: Story = {
-  args: {
-    theme: "light",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.sneakers,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Light theme version of physical product purchase.",
-      },
-    },
-  },
-};
-
-export const NoImage: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.credits,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Example of purchasing digital credits without product image. Shows how the component handles text-only products with description fallback.",
-      },
-    },
-  },
-};
-
-export const NoImageLight: Story = {
-  args: {
-    theme: "light",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.credits,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Light theme version of credits purchase without image.",
-      },
-    },
-  },
-};
-
-export const CustomButtonLabel: Story = {
-  args: {
-    theme: "dark",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.customButton,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Example showcasing custom button label functionality. The button shows 'Purchase Now' instead of the default 'Buy Now' text.",
-      },
-    },
-  },
-};
-
-export const CustomButtonLabelLight: Story = {
-  args: {
-    theme: "light",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.customButton,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Light theme version with custom button label 'Purchase Now'.",
-      },
-    },
-  },
-};