thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

package/dist/esm/stories/Bridge/FundWallet.stories.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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";
+// Wrapper component to provide theme context
+const FundWalletWithTheme = (props) => {
+    const { theme, ...componentProps } = props;
+    return (_jsx(ModalThemeWrapper, { theme: theme, children: _jsx(FundWallet, { ...componentProps }) }));
+};
+const meta = {
+    title: "Bridge/FundWallet",
+    component: FundWalletWithTheme,
+    parameters: {
+        layout: "centered",
+        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.",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    args: {
+        uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
+        client: storyClient,
+        onContinue: (amount, token, receiverAddress) => {
+            alert(`Continue with ${amount} ${token.symbol} to ${receiverAddress}`);
+        },
+        receiverAddress: RECEIVER_ADDRESSES.primary,
+        theme: "dark",
+    },
+    argTypes: {
+        theme: {
+            control: "select",
+            options: ["light", "dark"],
+            description: "Theme for the component",
+        },
+        onContinue: { action: "continue clicked" },
+        uiOptions: {
+            description: "UI configuration for fund wallet mode",
+        },
+        receiverAddress: {
+            description: "Optional receiver address (defaults to connected wallet)",
+        },
+    },
+};
+export default meta;
+export const Light = {
+    args: {
+        theme: "light",
+        uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
+        receiverAddress: undefined,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Default fund wallet interface in light theme with ETH token.",
+            },
+        },
+    },
+};
+export const Dark = {
+    args: {
+        theme: "dark",
+        uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
+        receiverAddress: undefined,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Default fund wallet interface in dark theme with ETH token.",
+            },
+        },
+    },
+};
+export const WithInitialAmount = {
+    args: {
+        theme: "dark",
+        uiOptions: FUND_WALLET_UI_OPTIONS.ethWithAmount,
+        receiverAddress: RECEIVER_ADDRESSES.secondary,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Fund wallet with pre-filled amount and specified receiver address.",
+            },
+        },
+    },
+};
+export const WithInitialAmountLight = {
+    args: {
+        theme: "light",
+        uiOptions: FUND_WALLET_UI_OPTIONS.ethWithAmount,
+        receiverAddress: RECEIVER_ADDRESSES.secondary,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Light theme version with pre-filled amount and receiver address.",
+            },
+        },
+    },
+};
+export const USDCToken = {
+    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 = {
+    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 = {
+    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 = {
+    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.",
+            },
+        },
+    },
+};
+//# sourceMappingURL=FundWallet.stories.js.map

package/dist/esm/stories/Bridge/FundWallet.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FundWallet.stories.js","sourceRoot":"","sources":["../../../../src/stories/Bridge/FundWallet.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/stories/Bridge/PaymentDetails.stories.js

@@ -0,0 +1,427 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PaymentDetails, } from "../../react/web/ui/Bridge/payment-details/PaymentDetails.js";
+import { stringify } from "../../utils/json.js";
+import { ModalThemeWrapper, storyClient } from "../utils.js";
+import { DIRECT_PAYMENT_UI_OPTIONS, STORY_MOCK_WALLET, TRANSACTION_UI_OPTIONS, USDC, buyWithApprovalQuote, complexBuyQuote, longTextBuyQuote, onrampWithSwapsQuote, simpleBuyQuote, simpleOnrampQuote, } from "./fixtures.js";
+const fiatPaymentMethod = {
+    type: "fiat",
+    currency: "USD",
+    onramp: "coinbase",
+    payerWallet: STORY_MOCK_WALLET,
+};
+const cryptoPaymentMethod = JSON.parse(stringify({
+    type: "wallet",
+    payerWallet: STORY_MOCK_WALLET,
+    balance: 100000000n,
+    originToken: {
+        chainId: 1,
+        address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+        name: "USD Coin",
+        symbol: "USDC",
+        decimals: 6,
+        priceUsd: 1.0,
+        iconUri: "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
+    },
+}));
+const ethCryptoPaymentMethod = JSON.parse(stringify({
+    type: "wallet",
+    payerWallet: STORY_MOCK_WALLET,
+    balance: 1000000000000000000n,
+    originToken: {
+        chainId: 1,
+        address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+        name: "Ethereum",
+        symbol: "ETH",
+        decimals: 18,
+        priceUsd: 2500.0,
+        iconUri: "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
+    },
+}));
+// Wrapper component to provide theme context
+const PaymentDetailsWithTheme = (props) => {
+    const { theme, ...componentProps } = props;
+    return (_jsx(ModalThemeWrapper, { theme: theme, children: _jsx(PaymentDetails, { ...componentProps }) }));
+};
+const meta = {
+    title: "Bridge/PaymentDetails",
+    component: PaymentDetailsWithTheme,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "Route preview screen that displays prepared quote details, fees, estimated time, and transaction steps for user confirmation.",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    args: {
+        preparedQuote: simpleOnrampQuote,
+        onConfirm: () => { },
+        onBack: () => { },
+        onError: (error) => console.error("Error:", error),
+        theme: "dark",
+        uiOptions: {
+            mode: "fund_wallet",
+            destinationToken: USDC,
+        },
+    },
+    argTypes: {
+        theme: {
+            control: "select",
+            options: ["light", "dark"],
+            description: "Theme for the component",
+        },
+        onConfirm: { action: "route confirmed" },
+        onBack: { action: "back clicked" },
+        onError: { action: "error occurred" },
+    },
+};
+export default meta;
+export const OnrampSimple = {
+    args: {
+        theme: "dark",
+        preparedQuote: simpleOnrampQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Simple onramp quote with no extra steps - direct fiat to crypto.",
+            },
+        },
+    },
+};
+export const OnrampSimpleLight = {
+    args: {
+        theme: "light",
+        preparedQuote: simpleOnrampQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Simple onramp quote with no extra steps (light theme).",
+            },
+        },
+    },
+};
+export const OnrampSimpleDirectPayment = {
+    args: {
+        theme: "dark",
+        preparedQuote: simpleOnrampQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: storyClient,
+        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 = {
+    args: {
+        theme: "light",
+        preparedQuote: simpleOnrampQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: storyClient,
+        uiOptions: DIRECT_PAYMENT_UI_OPTIONS.concertTicket,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Simple onramp quote with no extra steps (light theme).",
+            },
+        },
+    },
+};
+export const OnrampWithSwaps = {
+    args: {
+        theme: "dark",
+        preparedQuote: onrampWithSwapsQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Onramp quote with 2 additional swap steps after the fiat purchase.",
+            },
+        },
+    },
+};
+export const OnrampWithSwapsLight = {
+    args: {
+        theme: "light",
+        preparedQuote: onrampWithSwapsQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Onramp quote with 2 additional swap steps (light theme).",
+            },
+        },
+    },
+};
+export const BuySimple = {
+    args: {
+        theme: "dark",
+        preparedQuote: simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Simple buy quote with a single transaction (no approval needed).",
+            },
+        },
+    },
+};
+export const BuySimpleLight = {
+    args: {
+        theme: "light",
+        preparedQuote: simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Simple buy quote with a single transaction (light theme).",
+            },
+        },
+    },
+};
+export const BuySimpleDirectPayment = {
+    args: {
+        theme: "dark",
+        preparedQuote: simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+        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 = {
+    args: {
+        theme: "light",
+        preparedQuote: simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+        uiOptions: DIRECT_PAYMENT_UI_OPTIONS.subscription,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Simple buy quote with a single transaction (light theme).",
+            },
+        },
+    },
+};
+export const BuyWithLongText = {
+    args: {
+        theme: "dark",
+        preparedQuote: longTextBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Simple buy quote with a single transaction (light theme).",
+            },
+        },
+    },
+};
+export const BuyWithApproval = {
+    args: {
+        theme: "dark",
+        preparedQuote: buyWithApprovalQuote,
+        paymentMethod: cryptoPaymentMethod,
+        client: storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Buy quote requiring both approval and buy transactions in a single step.",
+            },
+        },
+    },
+};
+export const BuyWithApprovalLight = {
+    args: {
+        theme: "light",
+        preparedQuote: buyWithApprovalQuote,
+        paymentMethod: cryptoPaymentMethod,
+        client: storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Buy quote with approval and buy transactions (light theme).",
+            },
+        },
+    },
+};
+export const BuyComplex = {
+    args: {
+        theme: "dark",
+        preparedQuote: complexBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+    },
+    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 = {
+    args: {
+        theme: "light",
+        preparedQuote: complexBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Complex multi-step buy quote spanning multiple chains (light theme).",
+            },
+        },
+    },
+};
+// ========== TRANSACTION MODE STORIES ========== //
+export const TransactionEthTransfer = {
+    args: {
+        theme: "dark",
+        preparedQuote: simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+        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 = {
+    args: {
+        theme: "light",
+        preparedQuote: simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+        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.",
+            },
+        },
+    },
+};
+export const TransactionERC20Transfer = {
+    args: {
+        theme: "dark",
+        preparedQuote: simpleBuyQuote,
+        paymentMethod: cryptoPaymentMethod,
+        client: storyClient,
+        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 = {
+    args: {
+        theme: "light",
+        preparedQuote: simpleBuyQuote,
+        paymentMethod: cryptoPaymentMethod,
+        client: storyClient,
+        uiOptions: TRANSACTION_UI_OPTIONS.erc20Transfer,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Light theme version of ERC20 token transfer transaction mode with payment details.",
+            },
+        },
+    },
+};
+export const TransactionContractInteraction = {
+    args: {
+        theme: "dark",
+        preparedQuote: simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+        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 = {
+    args: {
+        theme: "light",
+        preparedQuote: simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: storyClient,
+        uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Light theme version of contract interaction transaction mode with comprehensive payment details.",
+            },
+        },
+    },
+};
+//# sourceMappingURL=PaymentDetails.stories.js.map

package/dist/esm/stories/Bridge/PaymentDetails.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentDetails.stories.js","sourceRoot":"","sources":["../../../../src/stories/Bridge/PaymentDetails.stories.tsx"],"names":[],"mappings":"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"}