thirdweb 5.102.7-nightly-9f6c1a4820e37428dec6427cf77a12ab463f119d-20250616000412 → 5.103.0

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

@@ -0,0 +1,430 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransactionContractInteractionLight = exports.TransactionContractInteraction = exports.TransactionERC20TransferLight = exports.TransactionERC20Transfer = exports.TransactionEthTransferLight = exports.TransactionEthTransfer = exports.BuyComplexLight = exports.BuyComplex = exports.BuyWithApprovalLight = exports.BuyWithApproval = exports.BuyWithLongText = exports.BuySimpleLightDirectPayment = exports.BuySimpleDirectPayment = exports.BuySimpleLight = exports.BuySimple = exports.OnrampWithSwapsLight = exports.OnrampWithSwaps = exports.OnrampSimpleLightDirectPayment = exports.OnrampSimpleDirectPayment = exports.OnrampSimpleLight = exports.OnrampSimple = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PaymentDetails_js_1 = require("../../react/web/ui/Bridge/payment-details/PaymentDetails.js");
+const json_js_1 = require("../../utils/json.js");
+const utils_js_1 = require("../utils.js");
+const fixtures_js_1 = require("./fixtures.js");
+const fiatPaymentMethod = {
+    type: "fiat",
+    currency: "USD",
+    onramp: "coinbase",
+    payerWallet: fixtures_js_1.STORY_MOCK_WALLET,
+};
+const cryptoPaymentMethod = JSON.parse((0, json_js_1.stringify)({
+    type: "wallet",
+    payerWallet: fixtures_js_1.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((0, json_js_1.stringify)({
+    type: "wallet",
+    payerWallet: fixtures_js_1.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 ((0, jsx_runtime_1.jsx)(utils_js_1.ModalThemeWrapper, { theme: theme, children: (0, jsx_runtime_1.jsx)(PaymentDetails_js_1.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: fixtures_js_1.simpleOnrampQuote,
+        onConfirm: () => { },
+        onBack: () => { },
+        onError: (error) => console.error("Error:", error),
+        theme: "dark",
+        uiOptions: {
+            mode: "fund_wallet",
+            destinationToken: fixtures_js_1.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" },
+    },
+};
+exports.default = meta;
+exports.OnrampSimple = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.simpleOnrampQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Simple onramp quote with no extra steps - direct fiat to crypto.",
+            },
+        },
+    },
+};
+exports.OnrampSimpleLight = {
+    args: {
+        theme: "light",
+        preparedQuote: fixtures_js_1.simpleOnrampQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Simple onramp quote with no extra steps (light theme).",
+            },
+        },
+    },
+};
+exports.OnrampSimpleDirectPayment = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.simpleOnrampQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: utils_js_1.storyClient,
+        uiOptions: fixtures_js_1.DIRECT_PAYMENT_UI_OPTIONS.credits,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Simple onramp quote with no extra steps - direct fiat to crypto.",
+            },
+        },
+    },
+};
+exports.OnrampSimpleLightDirectPayment = {
+    args: {
+        theme: "light",
+        preparedQuote: fixtures_js_1.simpleOnrampQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: utils_js_1.storyClient,
+        uiOptions: fixtures_js_1.DIRECT_PAYMENT_UI_OPTIONS.concertTicket,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Simple onramp quote with no extra steps (light theme).",
+            },
+        },
+    },
+};
+exports.OnrampWithSwaps = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.onrampWithSwapsQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Onramp quote with 2 additional swap steps after the fiat purchase.",
+            },
+        },
+    },
+};
+exports.OnrampWithSwapsLight = {
+    args: {
+        theme: "light",
+        preparedQuote: fixtures_js_1.onrampWithSwapsQuote,
+        paymentMethod: fiatPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Onramp quote with 2 additional swap steps (light theme).",
+            },
+        },
+    },
+};
+exports.BuySimple = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Simple buy quote with a single transaction (no approval needed).",
+            },
+        },
+    },
+};
+exports.BuySimpleLight = {
+    args: {
+        theme: "light",
+        preparedQuote: fixtures_js_1.simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Simple buy quote with a single transaction (light theme).",
+            },
+        },
+    },
+};
+exports.BuySimpleDirectPayment = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+        uiOptions: fixtures_js_1.DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Simple buy quote with a single transaction (no approval needed).",
+            },
+        },
+    },
+};
+exports.BuySimpleLightDirectPayment = {
+    args: {
+        theme: "light",
+        preparedQuote: fixtures_js_1.simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+        uiOptions: fixtures_js_1.DIRECT_PAYMENT_UI_OPTIONS.subscription,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Simple buy quote with a single transaction (light theme).",
+            },
+        },
+    },
+};
+exports.BuyWithLongText = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.longTextBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Simple buy quote with a single transaction (light theme).",
+            },
+        },
+    },
+};
+exports.BuyWithApproval = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.buyWithApprovalQuote,
+        paymentMethod: cryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Buy quote requiring both approval and buy transactions in a single step.",
+            },
+        },
+    },
+};
+exports.BuyWithApprovalLight = {
+    args: {
+        theme: "light",
+        preparedQuote: fixtures_js_1.buyWithApprovalQuote,
+        paymentMethod: cryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Buy quote with approval and buy transactions (light theme).",
+            },
+        },
+    },
+};
+exports.BuyComplex = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.complexBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Complex buy quote with 3 steps, each requiring approval and execution transactions across multiple chains.",
+            },
+        },
+    },
+};
+exports.BuyComplexLight = {
+    args: {
+        theme: "light",
+        preparedQuote: fixtures_js_1.complexBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Complex multi-step buy quote spanning multiple chains (light theme).",
+            },
+        },
+    },
+};
+// ========== TRANSACTION MODE STORIES ========== //
+exports.TransactionEthTransfer = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+        uiOptions: fixtures_js_1.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.",
+            },
+        },
+    },
+};
+exports.TransactionEthTransferLight = {
+    args: {
+        theme: "light",
+        preparedQuote: fixtures_js_1.simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+        uiOptions: fixtures_js_1.TRANSACTION_UI_OPTIONS.ethTransfer,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Light theme version of transaction mode for ETH transfer with detailed payment overview.",
+            },
+        },
+    },
+};
+exports.TransactionERC20Transfer = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.simpleBuyQuote,
+        paymentMethod: cryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+        uiOptions: fixtures_js_1.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.",
+            },
+        },
+    },
+};
+exports.TransactionERC20TransferLight = {
+    args: {
+        theme: "light",
+        preparedQuote: fixtures_js_1.simpleBuyQuote,
+        paymentMethod: cryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+        uiOptions: fixtures_js_1.TRANSACTION_UI_OPTIONS.erc20Transfer,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Light theme version of ERC20 token transfer transaction mode with payment details.",
+            },
+        },
+    },
+};
+exports.TransactionContractInteraction = {
+    args: {
+        theme: "dark",
+        preparedQuote: fixtures_js_1.simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+        uiOptions: fixtures_js_1.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.",
+            },
+        },
+    },
+};
+exports.TransactionContractInteractionLight = {
+    args: {
+        theme: "light",
+        preparedQuote: fixtures_js_1.simpleBuyQuote,
+        paymentMethod: ethCryptoPaymentMethod,
+        client: utils_js_1.storyClient,
+        uiOptions: fixtures_js_1.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/cjs/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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"}

package/dist/cjs/stories/Bridge/PaymentSelection.stories.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LargeAmount = exports.DifferentDestinationToken = exports.WithBackButtonLight = exports.WithBackButton = exports.Dark = exports.Light = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PaymentSelection_js_1 = require("../../react/web/ui/Bridge/payment-selection/PaymentSelection.js");
+const en_js_1 = require("../../react/web/ui/ConnectWallet/locale/en.js");
+const utils_js_1 = require("../utils.js");
+const fixtures_js_1 = require("./fixtures.js");
+// Wrapper component to provide theme context
+const PaymentSelectionWithTheme = (props) => {
+    const { theme, ...componentProps } = props;
+    return ((0, jsx_runtime_1.jsx)(utils_js_1.ModalThemeWrapper, { theme: theme, children: (0, jsx_runtime_1.jsx)(PaymentSelection_js_1.PaymentSelection, { ...componentProps }) }));
+};
+const meta = {
+    title: "Bridge/PaymentSelection",
+    component: PaymentSelectionWithTheme,
+    parameters: {
+        layout: "centered",
+        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.",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    args: {
+        destinationToken: fixtures_js_1.USDC,
+        client: utils_js_1.storyClient,
+        onPaymentMethodSelected: (_paymentMethod) => { },
+        onError: (error) => console.error("Error:", error),
+        theme: "dark",
+        destinationAmount: "1",
+        connectLocale: en_js_1.default,
+    },
+    argTypes: {
+        theme: {
+            control: "select",
+            options: ["light", "dark"],
+            description: "Theme for the component",
+        },
+        destinationToken: {
+            description: "The target token to bridge to",
+        },
+        destinationAmount: {
+            description: "Amount of destination token to bridge",
+        },
+        onPaymentMethodSelected: {
+            action: "payment method selected",
+            description: "Called when user selects a wallet token or fiat provider",
+        },
+        onError: {
+            action: "error occurred",
+            description: "Called when an error occurs during the flow",
+        },
+        onBack: {
+            action: "back clicked",
+            description: "Called when user wants to go back (only shown in Step 1)",
+        },
+        connectLocale: {
+            description: "Locale for connecting wallets",
+        },
+    },
+};
+exports.default = meta;
+exports.Light = {
+    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.",
+            },
+        },
+    },
+};
+exports.Dark = {
+    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.",
+            },
+        },
+    },
+};
+exports.WithBackButton = {
+    args: {
+        theme: "dark",
+        onBack: () => { },
+    },
+    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.",
+            },
+        },
+    },
+};
+exports.WithBackButtonLight = {
+    args: {
+        theme: "light",
+        onBack: () => { },
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Light theme version with back button functionality. Demonstrates the navigation flow between steps.",
+            },
+        },
+    },
+};
+exports.DifferentDestinationToken = {
+    args: {
+        theme: "dark",
+        destinationToken: fixtures_js_1.UNI,
+    },
+    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.",
+            },
+        },
+    },
+};
+exports.LargeAmount = {
+    args: {
+        theme: "dark",
+        destinationAmount: "1000",
+    },
+    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.",
+            },
+        },
+    },
+};
+//# sourceMappingURL=PaymentSelection.stories.js.map

package/dist/cjs/stories/Bridge/PaymentSelection.stories.js.map

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

package/dist/cjs/stories/Bridge/StepRunner.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dark = exports.Light = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StepRunner_js_1 = require("../../react/web/ui/Bridge/StepRunner.js");
+const utils_js_1 = require("../utils.js");
+const fixtures_js_1 = require("./fixtures.js");
+// Mock window adapter
+const mockWindowAdapter = {
+    open: async (_url) => { },
+};
+// Wrapper component to provide theme context
+const StepRunnerWithTheme = (props) => {
+    const { theme, ...componentProps } = props;
+    return ((0, jsx_runtime_1.jsx)(utils_js_1.ModalThemeWrapper, { theme: theme, children: (0, jsx_runtime_1.jsx)(StepRunner_js_1.StepRunner, { ...componentProps }) }));
+};
+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: fixtures_js_1.STORY_MOCK_WALLET,
+        client: utils_js_1.storyClient,
+        windowAdapter: mockWindowAdapter,
+        onComplete: (_completedStatuses) => { },
+        onError: (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" },
+    },
+};
+exports.default = meta;
+exports.Light = {
+    args: {
+        theme: "light",
+        request: fixtures_js_1.simpleBuyRequest,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+    },
+};
+exports.Dark = {
+    args: {
+        theme: "dark",
+        request: fixtures_js_1.simpleBuyRequest,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+    },
+};
+//# sourceMappingURL=StepRunner.stories.js.map