thirdweb 5.108.5 → 5.108.7

package/src/stories/Bridge/PaymentDetails.stories.tsx

@@ -1,10 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import type { Theme } from "../../react/core/design-system/index.js";
-import type { PaymentMethod } from "../../react/core/machines/paymentMachine.js";
-import {
-  PaymentDetails,
-  type PaymentDetailsProps,
-} from "../../react/web/ui/Bridge/payment-details/PaymentDetails.js";
+import { PaymentDetails } from "../../react/web/ui/Bridge/payment-details/PaymentDetails.js";
+import type { PaymentMethod } from "../../react/web/ui/Bridge/types.js";
 import { stringify } from "../../utils/json.js";
 import { ModalThemeWrapper, storyClient } from "../utils.js";
 import {
@@ -17,7 +13,6 @@ import {
   simpleBuyQuote,
   simpleOnrampQuote,
   TRANSACTION_UI_OPTIONS,
-  USDC,
 } from "./fixtures.js";
 
 const fiatPaymentMethod: PaymentMethod = {
@@ -63,324 +58,92 @@ const ethCryptoPaymentMethod: PaymentMethod = JSON.parse(
   }),
 );
 
-// Props interface for the wrapper component
-interface PaymentDetailsWithThemeProps extends PaymentDetailsProps {
-  theme: "light" | "dark" | Theme;
-}
-
-// Wrapper component to provide theme context
-const PaymentDetailsWithTheme = (props: PaymentDetailsWithThemeProps) => {
-  const { theme, ...componentProps } = props;
-  return (
-    <ModalThemeWrapper theme={theme}>
-      <PaymentDetails {...componentProps} />
-    </ModalThemeWrapper>
-  );
-};
-
-const meta = {
+const meta: Meta<typeof PaymentDetails> = {
   args: {
     onBack: () => {},
     onConfirm: () => {},
     onError: (error) => console.error("Error:", error),
     preparedQuote: simpleOnrampQuote,
-    theme: "dark",
-    uiOptions: {
-      destinationToken: USDC,
+    modeInfo: {
       mode: "fund_wallet",
     },
-  },
-  argTypes: {
-    onBack: { action: "back clicked" },
-    onConfirm: { action: "route confirmed" },
-    onError: { action: "error occurred" },
-    theme: {
-      control: "select",
-      description: "Theme for the component",
-      options: ["light", "dark"],
+    currency: "USD",
+    metadata: {
+      title: undefined,
+      description: undefined,
     },
+    client: storyClient,
+    confirmButtonLabel: undefined,
   },
-  component: PaymentDetailsWithTheme,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Route preview screen that displays prepared quote details, fees, estimated time, and transaction steps for user confirmation.",
-      },
-    },
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  title: "Bridge/PaymentDetails",
-} satisfies Meta<typeof PaymentDetailsWithTheme>;
+  decorators: [
+    (Story) => (
+      <ModalThemeWrapper>
+        <Story />
+      </ModalThemeWrapper>
+    ),
+  ],
+  component: PaymentDetails,
+  title: "Bridge/screens/PaymentDetails",
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const OnrampSimple: Story = {
   args: {
-    client: storyClient,
     paymentMethod: fiatPaymentMethod,
     preparedQuote: simpleOnrampQuote,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Simple onramp quote with no extra steps - direct fiat to crypto.",
-      },
-    },
-  },
-};
-
-export const OnrampSimpleLight: Story = {
-  args: {
-    client: storyClient,
-    paymentMethod: fiatPaymentMethod,
-    preparedQuote: simpleOnrampQuote,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Simple onramp quote with no extra steps (light theme).",
-      },
-    },
   },
 };
 
 export const OnrampSimpleDirectPayment: Story = {
   args: {
-    client: storyClient,
-    paymentMethod: fiatPaymentMethod,
-    preparedQuote: simpleOnrampQuote,
-    theme: "dark",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.credits,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Simple onramp quote with no extra steps - direct fiat to crypto.",
-      },
-    },
-  },
-};
-
-export const OnrampSimpleLightDirectPayment: Story = {
-  args: {
-    client: storyClient,
     paymentMethod: fiatPaymentMethod,
     preparedQuote: simpleOnrampQuote,
-    theme: "light",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.concertTicket,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Simple onramp quote with no extra steps (light theme).",
-      },
-    },
+    ...DIRECT_PAYMENT_UI_OPTIONS.credits,
   },
 };
 
 export const OnrampWithSwaps: Story = {
   args: {
-    client: storyClient,
-    paymentMethod: fiatPaymentMethod,
-    preparedQuote: onrampWithSwapsQuote,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Onramp quote with 2 additional swap steps after the fiat purchase.",
-      },
-    },
-  },
-};
-
-export const OnrampWithSwapsLight: Story = {
-  args: {
-    client: storyClient,
     paymentMethod: fiatPaymentMethod,
     preparedQuote: onrampWithSwapsQuote,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Onramp quote with 2 additional swap steps (light theme).",
-      },
-    },
   },
 };
 
 export const BuySimple: Story = {
   args: {
-    client: storyClient,
-    paymentMethod: ethCryptoPaymentMethod,
-    preparedQuote: simpleBuyQuote,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Simple buy quote with a single transaction (no approval needed).",
-      },
-    },
-  },
-};
-
-export const BuySimpleLight: Story = {
-  args: {
-    client: storyClient,
     paymentMethod: ethCryptoPaymentMethod,
     preparedQuote: simpleBuyQuote,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Simple buy quote with a single transaction (light theme).",
-      },
-    },
   },
 };
 
 export const BuySimpleDirectPayment: Story = {
   args: {
-    client: storyClient,
     paymentMethod: ethCryptoPaymentMethod,
     preparedQuote: simpleBuyQuote,
-    theme: "dark",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Simple buy quote with a single transaction (no approval needed).",
-      },
-    },
-  },
-};
-
-export const BuySimpleLightDirectPayment: Story = {
-  args: {
-    client: storyClient,
-    paymentMethod: ethCryptoPaymentMethod,
-    preparedQuote: simpleBuyQuote,
-    theme: "light",
-    uiOptions: DIRECT_PAYMENT_UI_OPTIONS.subscription,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Simple buy quote with a single transaction (light theme).",
-      },
-    },
+    ...DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
   },
 };
 
 export const BuyWithLongText: Story = {
   args: {
-    client: storyClient,
     paymentMethod: ethCryptoPaymentMethod,
     preparedQuote: longTextBuyQuote,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story: "Simple buy quote with a single transaction (light theme).",
-      },
-    },
   },
 };
 
 export const BuyWithApproval: Story = {
   args: {
-    client: storyClient,
-    paymentMethod: cryptoPaymentMethod,
-    preparedQuote: buyWithApprovalQuote,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Buy quote requiring both approval and buy transactions in a single step.",
-      },
-    },
-  },
-};
-
-export const BuyWithApprovalLight: Story = {
-  args: {
-    client: storyClient,
     paymentMethod: cryptoPaymentMethod,
     preparedQuote: buyWithApprovalQuote,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story: "Buy quote with approval and buy transactions (light theme).",
-      },
-    },
   },
 };
 
 export const BuyComplex: Story = {
   args: {
-    client: storyClient,
-    paymentMethod: ethCryptoPaymentMethod,
-    preparedQuote: complexBuyQuote,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Complex buy quote with 3 steps, each requiring approval and execution transactions across multiple chains.",
-      },
-    },
-  },
-};
-
-export const BuyComplexLight: Story = {
-  args: {
-    client: storyClient,
     paymentMethod: ethCryptoPaymentMethod,
     preparedQuote: complexBuyQuote,
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Complex multi-step buy quote spanning multiple chains (light theme).",
-      },
-    },
   },
 };
 
@@ -388,114 +151,36 @@ export const BuyComplexLight: Story = {
 
 export const TransactionEthTransfer: Story = {
   args: {
-    client: storyClient,
-    paymentMethod: ethCryptoPaymentMethod,
-    preparedQuote: simpleBuyQuote,
-    theme: "dark",
-    uiOptions: TRANSACTION_UI_OPTIONS.ethTransfer,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Transaction mode showing ETH transfer payment details with function name and contract information displayed in the PaymentDetails screen.",
-      },
-    },
-  },
-};
-
-export const TransactionEthTransferLight: Story = {
-  args: {
-    client: storyClient,
     paymentMethod: ethCryptoPaymentMethod,
     preparedQuote: simpleBuyQuote,
-    theme: "light",
-    uiOptions: TRANSACTION_UI_OPTIONS.ethTransfer,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Light theme version of transaction mode for ETH transfer with detailed payment overview.",
-      },
+    modeInfo: {
+      mode: "transaction",
+      transaction: TRANSACTION_UI_OPTIONS.ethTransfer.transaction,
     },
+    ...TRANSACTION_UI_OPTIONS.ethTransfer,
   },
 };
 
 export const TransactionERC20Transfer: Story = {
   args: {
-    client: storyClient,
-    paymentMethod: cryptoPaymentMethod,
-    preparedQuote: simpleBuyQuote,
-    theme: "dark",
-    uiOptions: TRANSACTION_UI_OPTIONS.erc20Transfer,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Transaction mode for ERC20 token transfer showing token details and transfer function in payment preview.",
-      },
-    },
-  },
-};
-
-export const TransactionERC20TransferLight: Story = {
-  args: {
-    client: storyClient,
     paymentMethod: cryptoPaymentMethod,
     preparedQuote: simpleBuyQuote,
-    theme: "light",
-    uiOptions: TRANSACTION_UI_OPTIONS.erc20Transfer,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Light theme version of ERC20 token transfer transaction mode with payment details.",
-      },
+    modeInfo: {
+      mode: "transaction",
+      transaction: TRANSACTION_UI_OPTIONS.erc20Transfer.transaction,
     },
+    ...TRANSACTION_UI_OPTIONS.erc20Transfer,
   },
 };
 
 export const TransactionContractInteraction: Story = {
   args: {
-    client: storyClient,
-    paymentMethod: ethCryptoPaymentMethod,
-    preparedQuote: simpleBuyQuote,
-    theme: "dark",
-    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Transaction mode for complex contract interaction (claimTo function) showing detailed contract information and function details in payment preview.",
-      },
-    },
-  },
-};
-
-export const TransactionContractInteractionLight: Story = {
-  args: {
-    client: storyClient,
     paymentMethod: ethCryptoPaymentMethod,
     preparedQuote: simpleBuyQuote,
-    theme: "light",
-    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Light theme version of contract interaction transaction mode with comprehensive payment details.",
-      },
+    modeInfo: {
+      mode: "transaction",
+      transaction: TRANSACTION_UI_OPTIONS.contractInteraction.transaction,
     },
+    ...TRANSACTION_UI_OPTIONS.contractInteraction,
   },
 };

package/src/stories/Bridge/PaymentSelection.stories.tsx

@@ -1,178 +1,50 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import type { Theme } from "../../react/core/design-system/index.js";
-import {
-  PaymentSelection,
-  type PaymentSelectionProps,
-} from "../../react/web/ui/Bridge/payment-selection/PaymentSelection.js";
+import { PaymentSelection } from "../../react/web/ui/Bridge/payment-selection/PaymentSelection.js";
 import en from "../../react/web/ui/ConnectWallet/locale/en.js";
 import { ModalThemeWrapper, storyClient } from "../utils.js";
-import { UNI, USDC } from "./fixtures.js";
+import { USDC } from "./fixtures.js";
 
-// Props interface for the wrapper component
-interface PaymentSelectionWithThemeProps extends PaymentSelectionProps {
-  theme: "light" | "dark" | Theme;
-}
-
-// Wrapper component to provide theme context
-const PaymentSelectionWithTheme = (props: PaymentSelectionWithThemeProps) => {
-  const { theme, ...componentProps } = props;
-  return (
-    <ModalThemeWrapper theme={theme}>
-      <PaymentSelection {...componentProps} />
-    </ModalThemeWrapper>
-  );
-};
-
-const meta = {
+const meta: Meta<typeof PaymentSelection> = {
   args: {
     client: storyClient,
+    onBack: () => {
+      alert("Back");
+    },
     connectLocale: en,
     destinationAmount: "1",
     destinationToken: USDC,
     onError: (error) => console.error("Error:", error),
-    onPaymentMethodSelected: (_paymentMethod) => {},
-    theme: "dark",
+    onPaymentMethodSelected: () => {},
     country: "US",
-  },
-  argTypes: {
-    connectLocale: {
-      description: "Locale for connecting wallets",
-    },
-    destinationAmount: {
-      description: "Amount of destination token to bridge",
-    },
-    destinationToken: {
-      description: "The target token to bridge to",
-    },
-    onBack: {
-      action: "back clicked",
-      description: "Called when user wants to go back (only shown in Step 1)",
-    },
-    onError: {
-      action: "error occurred",
-      description: "Called when an error occurs during the flow",
-    },
-    onPaymentMethodSelected: {
-      action: "payment method selected",
-      description: "Called when user selects a wallet token or fiat provider",
-    },
-    theme: {
-      control: "select",
-      description: "Theme for the component",
-      options: ["light", "dark"],
-    },
-  },
-  component: PaymentSelectionWithTheme,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Payment method selection screen with a 2-step flow:\n\n" +
-          "**Step 1:** Choose payment method - shows connected wallets, connect wallet option, and pay with fiat option\n\n" +
-          "**Step 2a:** If wallet selected - shows available origin tokens for bridging to the destination token (fetches real routes data from the Bridge API)\n\n" +
-          "**Step 2b:** If fiat selected - shows onramp provider options (Coinbase, Stripe, Transak)\n\n" +
-          "The component intelligently manages wallet context and provides proper error handling for each step.",
-      },
-    },
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  title: "Bridge/PaymentSelection",
-} satisfies Meta<typeof PaymentSelectionWithTheme>;
+    connectOptions: undefined,
+    currency: "USD",
+    paymentMethods: ["crypto", "card"],
+    receiverAddress: "0x0000000000000000000000000000000000000000",
+    feePayer: undefined,
+    supportedTokens: undefined,
+  },
+  decorators: [
+    (Story) => (
+      <ModalThemeWrapper>
+        <Story />
+      </ModalThemeWrapper>
+    ),
+  ],
+  component: PaymentSelection,
+  title: "Bridge/screens/PaymentSelection",
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Light: Story = {
-  args: {
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Light theme version showing the initial wallet selection step. Click on a connected wallet to see token selection, or click 'Pay with Fiat' to see provider selection.",
-      },
-    },
-  },
-};
-
-export const Dark: Story = {
+export const OnlyCryptoMethodEnabled: Story = {
   args: {
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Dark theme version of the payment selection flow. The component starts with wallet selection and provides navigation through the 2-step process.",
-      },
-    },
-  },
-};
-
-export const WithBackButton: Story = {
-  args: {
-    onBack: () => {},
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Version with a back button in the header. The back behavior changes based on the current step - Step 1 calls onBack, Steps 2a/2b return to Step 1.",
-      },
-    },
-  },
-};
-
-export const WithBackButtonLight: Story = {
-  args: {
-    onBack: () => {},
-    theme: "light",
-  },
-  parameters: {
-    backgrounds: { default: "light" },
-    docs: {
-      description: {
-        story:
-          "Light theme version with back button functionality. Demonstrates the navigation flow between steps.",
-      },
-    },
+    paymentMethods: ["crypto"],
   },
 };
 
-export const DifferentDestinationToken: Story = {
+export const OnlyFiatMethodEnabled: Story = {
   args: {
-    destinationToken: UNI,
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Example with a different destination token (UNI). This will show different available origin tokens in Step 2a when a wallet is selected.",
-      },
-    },
-  },
-};
-
-export const LargeAmount: Story = {
-  args: {
-    destinationAmount: "1000",
-    theme: "dark",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-    docs: {
-      description: {
-        story:
-          "Example with a larger destination amount (1000 USDC). This may affect which origin tokens are available based on user balances.",
-      },
-    },
+    paymentMethods: ["card"],
   },
 };