thirdweb 5.102.7-nightly-9f6c1a4820e37428dec6427cf77a12ab463f119d-20250616000412 → 5.103.0

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

@@ -0,0 +1,226 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "../../react/core/design-system/CustomThemeProvider.js";
+import { BridgeOrchestrator, } 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";
+// Wrapper component to provide theme context
+const BridgeOrchestratorWithTheme = (props) => {
+    const { theme, ...componentProps } = props;
+    return (_jsx(ModalThemeWrapper, { theme: theme, children: _jsx(BridgeOrchestrator, { ...componentProps }) }));
+};
+const meta = {
+    title: "Bridge/BridgeOrchestrator",
+    component: BridgeOrchestratorWithTheme,
+    parameters: {
+        layout: "fullscreen",
+        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.",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    args: {
+        client: storyClient,
+        uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
+        onComplete: () => { },
+        onError: (error) => console.error("Bridge error:", error),
+        onCancel: () => { },
+        theme: "dark",
+    },
+    argTypes: {
+        theme: {
+            control: "select",
+            options: ["light", "dark"],
+            description: "Theme for the component",
+        },
+        presetOptions: {
+            control: "object",
+            description: "Quick buy options",
+        },
+        onComplete: { action: "flow completed" },
+        onError: { action: "error occurred" },
+        onCancel: { action: "flow cancelled" },
+    },
+};
+export default meta;
+/**
+ * Default BridgeOrchestrator in light theme.
+ */
+export const Light = {
+    args: {
+        theme: "light",
+        uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
+        presetOptions: undefined,
+        onComplete: undefined,
+        onError: undefined,
+        onCancel: undefined,
+        receiverAddress: undefined,
+        connectOptions: undefined,
+        connectLocale: undefined,
+        purchaseData: undefined,
+        paymentLinkId: undefined,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+    },
+};
+/**
+ * BridgeOrchestrator in dark theme.
+ */
+export const Dark = {
+    args: {
+        theme: "dark",
+        uiOptions: FUND_WALLET_UI_OPTIONS.usdcDefault,
+        presetOptions: undefined,
+        onComplete: undefined,
+        onError: undefined,
+        onCancel: undefined,
+        receiverAddress: undefined,
+        connectOptions: undefined,
+        connectLocale: undefined,
+        purchaseData: undefined,
+        paymentLinkId: undefined,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+    },
+};
+/**
+ * Direct payment mode for purchasing a specific product/service.
+ */
+export const DirectPayment = {
+    args: {
+        theme: "dark",
+        uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
+        presetOptions: undefined,
+        onComplete: undefined,
+        onError: undefined,
+        onCancel: undefined,
+        receiverAddress: undefined,
+        connectOptions: undefined,
+        connectLocale: undefined,
+        purchaseData: undefined,
+        paymentLinkId: undefined,
+    },
+    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 = {
+    args: {
+        theme: "light",
+        uiOptions: DIRECT_PAYMENT_UI_OPTIONS.concertTicket,
+        presetOptions: undefined,
+        onComplete: undefined,
+        onError: undefined,
+        onCancel: undefined,
+        receiverAddress: undefined,
+        connectOptions: undefined,
+        connectLocale: undefined,
+        purchaseData: undefined,
+        paymentLinkId: undefined,
+    },
+    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 = {
+    args: {
+        theme: "dark",
+        uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
+        presetOptions: undefined,
+        onComplete: undefined,
+        onError: undefined,
+        onCancel: undefined,
+        receiverAddress: undefined,
+        connectOptions: undefined,
+        connectLocale: undefined,
+        purchaseData: undefined,
+        paymentLinkId: undefined,
+    },
+    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 = {
+    args: {
+        theme: "light",
+        uiOptions: TRANSACTION_UI_OPTIONS.erc20Transfer,
+        presetOptions: undefined,
+        onComplete: undefined,
+        onError: undefined,
+        onCancel: undefined,
+        receiverAddress: undefined,
+        connectOptions: undefined,
+        connectLocale: undefined,
+        purchaseData: undefined,
+        paymentLinkId: undefined,
+    },
+    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 = {
+    args: {
+        theme: "dark",
+        uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault,
+        presetOptions: [1, 2, 3],
+        onComplete: undefined,
+        onError: undefined,
+        onCancel: undefined,
+        receiverAddress: undefined,
+        connectOptions: undefined,
+        connectLocale: undefined,
+        purchaseData: undefined,
+        paymentLinkId: undefined,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+        docs: {
+            description: {
+                story: "Fund wallet mode with custom quick options showing ETH with [1, 2, 3] preset amounts.",
+            },
+        },
+    },
+};
+//# sourceMappingURL=BridgeOrchestrator.stories.js.map

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

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

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

@@ -0,0 +1,191 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DirectPayment, } from "../../react/web/ui/Bridge/DirectPayment.js";
+import { ModalThemeWrapper, storyClient } from "../utils.js";
+import { DIRECT_PAYMENT_UI_OPTIONS } from "./fixtures.js";
+// Wrapper component to provide theme context
+const DirectPaymentWithTheme = (props) => {
+    const { theme, ...componentProps } = props;
+    return (_jsx(ModalThemeWrapper, { theme: theme, children: _jsx(DirectPayment, { ...componentProps }) }));
+};
+const meta = {
+    title: "Bridge/DirectPayment",
+    component: DirectPaymentWithTheme,
+    parameters: {
+        layout: "centered",
+        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.",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    args: {
+        client: storyClient,
+        uiOptions: DIRECT_PAYMENT_UI_OPTIONS.digitalArt,
+        onContinue: (_amount, _token, _receiverAddress) => { },
+        theme: "dark",
+    },
+    argTypes: {
+        theme: {
+            control: "select",
+            options: ["light", "dark"],
+            description: "Theme for the component",
+        },
+        onContinue: {
+            action: "continue clicked",
+            description: "Called when user continues with the payment",
+        },
+        uiOptions: {
+            description: "UI configuration for direct payment mode including payment info and metadata",
+        },
+    },
+};
+export default meta;
+export const DigitalArt = {
+    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 = {
+    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 = {
+    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 = {
+    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 = {
+    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 = {
+    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 = {
+    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 = {
+    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 = {
+    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 = {
+    args: {
+        theme: "light",
+        uiOptions: DIRECT_PAYMENT_UI_OPTIONS.credits,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+        docs: {
+            description: {
+                story: "Light theme version of credits purchase without image.",
+            },
+        },
+    },
+};
+//# sourceMappingURL=DirectPayment.stories.js.map

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

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

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

@@ -0,0 +1,150 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorBanner } from "../../react/web/ui/Bridge/ErrorBanner.js";
+import { ModalThemeWrapper } from "../utils.js";
+const mockNetworkError = new Error("Network connection failed. Please check your internet connection and try again.");
+const mockUserRejectedError = new Error("Transaction was rejected by user.");
+const mockInsufficientFundsError = new Error("Insufficient funds to complete this transaction.");
+const mockGenericError = new Error("An unexpected error occurred.");
+// Wrapper component to provide theme context
+const ErrorBannerWithTheme = (props) => {
+    const { theme, ...componentProps } = props;
+    return (_jsx(ModalThemeWrapper, { theme: theme, children: _jsx(ErrorBanner, { ...componentProps }) }));
+};
+const meta = {
+    title: "Bridge/ErrorBanner",
+    component: ErrorBannerWithTheme,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "Error banner component that displays user-friendly error messages with retry functionality and optional cancel action.",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    args: {
+        error: mockNetworkError,
+        onRetry: () => { },
+        onCancel: () => { },
+        theme: "dark",
+    },
+    argTypes: {
+        theme: {
+            control: "select",
+            options: ["light", "dark"],
+            description: "Theme for the component",
+        },
+        onRetry: { action: "retry clicked" },
+        onCancel: { action: "cancel clicked" },
+    },
+};
+export default meta;
+export const Light = {
+    args: {
+        theme: "light",
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+    },
+};
+export const Dark = {
+    args: {
+        theme: "dark",
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+    },
+};
+export const NetworkError = {
+    args: {
+        theme: "dark",
+        error: mockNetworkError,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+    },
+};
+export const NetworkErrorLight = {
+    args: {
+        theme: "light",
+        error: mockNetworkError,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+    },
+};
+export const UserRejectedError = {
+    args: {
+        theme: "dark",
+        error: mockUserRejectedError,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+    },
+};
+export const UserRejectedErrorLight = {
+    args: {
+        theme: "light",
+        error: mockUserRejectedError,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+    },
+};
+export const InsufficientFundsError = {
+    args: {
+        theme: "dark",
+        error: mockInsufficientFundsError,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+    },
+};
+export const InsufficientFundsErrorLight = {
+    args: {
+        theme: "light",
+        error: mockInsufficientFundsError,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+    },
+};
+export const WithoutCancelButton = {
+    args: {
+        theme: "dark",
+        error: mockGenericError,
+        onCancel: undefined,
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+    },
+};
+export const WithoutCancelButtonLight = {
+    args: {
+        theme: "light",
+        error: mockGenericError,
+        onCancel: undefined,
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+    },
+};
+export const EmptyMessage = {
+    args: {
+        theme: "dark",
+        error: new Error(""),
+    },
+    parameters: {
+        backgrounds: { default: "dark" },
+    },
+};
+export const EmptyMessageLight = {
+    args: {
+        theme: "light",
+        error: new Error(""),
+    },
+    parameters: {
+        backgrounds: { default: "light" },
+    },
+};
+//# sourceMappingURL=ErrorBanner.stories.js.map

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

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