thirdweb 5.102.7-nightly-9f6c1a4820e37428dec6427cf77a12ab463f119d-20250616000412 → 5.103.0

package/dist/cjs/react/web/ui/Bridge/StepRunner.js

@@ -0,0 +1,179 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepRunner = StepRunner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_icons_1 = require("@radix-ui/react-icons");
+const utils_js_1 = require("../../../../chains/utils.js");
+const CustomThemeProvider_js_1 = require("../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../core/design-system/index.js");
+const useStepExecutor_js_1 = require("../../../core/hooks/useStepExecutor.js");
+const ChainName_js_1 = require("../components/ChainName.js");
+const Spacer_js_1 = require("../components/Spacer.js");
+const Spinner_js_1 = require("../components/Spinner.js");
+const basic_js_1 = require("../components/basic.js");
+const buttons_js_1 = require("../components/buttons.js");
+const text_js_1 = require("../components/text.js");
+function StepRunner({ request, wallet, client, windowAdapter, onComplete, onCancel, onBack, autoStart, }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    // Use the real step executor hook
+    const { currentStep, progress, executionState, onrampStatus, steps, error, start, cancel, retry, } = (0, useStepExecutor_js_1.useStepExecutor)({
+        request,
+        wallet,
+        client,
+        windowAdapter,
+        autoStart,
+        onComplete: (completedStatuses) => {
+            onComplete(completedStatuses);
+        },
+    });
+    const handleCancel = () => {
+        cancel();
+        if (onCancel) {
+            onCancel();
+        }
+    };
+    const handleRetry = () => {
+        retry();
+    };
+    const getStepStatus = (stepIndex) => {
+        if (!currentStep || !steps) {
+            // Not started yet
+            return stepIndex === 0 ? (error ? "failed" : "pending") : "pending";
+        }
+        const currentStepIndex = steps.findIndex((step) => step === currentStep);
+        if (stepIndex < currentStepIndex)
+            return "completed";
+        if (stepIndex === currentStepIndex && executionState === "executing")
+            return "executing";
+        if (stepIndex === currentStepIndex && error)
+            return "failed";
+        if (stepIndex === currentStepIndex &&
+            executionState === "idle" &&
+            progress === 100)
+            return "completed";
+        return "pending";
+    };
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case "completed":
+                return ((0, jsx_runtime_1.jsx)(react_icons_1.CheckIcon, { width: index_js_1.iconSize.sm, height: index_js_1.iconSize.sm, color: theme.colors.accentButtonText }));
+            case "executing":
+                return (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: "sm", color: "accentButtonText" });
+            case "failed":
+                return ((0, jsx_runtime_1.jsx)(react_icons_1.Cross1Icon, { width: index_js_1.iconSize.sm, height: index_js_1.iconSize.sm, color: "white" }));
+            default:
+                return ((0, jsx_runtime_1.jsx)(react_icons_1.ClockIcon, { width: index_js_1.iconSize.sm, height: index_js_1.iconSize.sm, color: theme.colors.primaryText }));
+        }
+    };
+    const getStepBackgroundColor = (status) => {
+        switch (status) {
+            case "completed":
+                return theme.colors.tertiaryBg;
+            case "executing":
+                return theme.colors.tertiaryBg;
+            case "failed":
+                return theme.colors.tertiaryBg;
+            default:
+                return theme.colors.tertiaryBg;
+        }
+    };
+    const getIconBackgroundColor = (status) => {
+        switch (status) {
+            case "completed":
+                return theme.colors.success;
+            case "executing":
+                return theme.colors.accentButtonBg;
+            case "failed":
+                return theme.colors.danger;
+            default:
+                return theme.colors.borderColor;
+        }
+    };
+    const getStepDescription = (step) => {
+        const { originToken, destinationToken } = step;
+        // If tokens are the same, it's likely a bridge operation
+        if (originToken.chainId !== destinationToken.chainId) {
+            return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "3xs", children: [(0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "sm", color: "primaryText", children: ["Bridge ", originToken.symbol, " to", " "] }), (0, jsx_runtime_1.jsx)(ChainName_js_1.ChainName, { chain: getDestinationChain(request), size: "sm", client: client, short: true, color: "primaryText" })] }));
+        }
+        // If different tokens on same chain, it's a swap
+        if (originToken.symbol !== destinationToken.symbol) {
+            return ((0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "sm", color: "primaryText", children: ["Swap ", originToken.symbol, " to ", destinationToken.symbol] }));
+        }
+        // Fallback to step number
+        return ((0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", children: "Process transaction" }));
+    };
+    const getStepStatusText = (status) => {
+        switch (status) {
+            case "executing":
+                return "Processing...";
+            case "completed":
+                return "Completed";
+            case "pending":
+                return "Waiting...";
+            case "failed":
+                return "Failed";
+            default:
+                return "Unknown";
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", fullHeight: true, p: "lg", children: [(0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { title: "Processing Payment", onBack: onBack }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "sm", children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", style: { flex: 1 }, children: "Progress" }), (0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "sm", color: "primaryText", children: [progress, "%"] })] }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { style: {
+                                    width: "100%",
+                                    height: "8px",
+                                    backgroundColor: theme.colors.tertiaryBg,
+                                    border: `1px solid ${theme.colors.borderColor}`,
+                                    borderRadius: "4px",
+                                    overflow: "hidden",
+                                }, children: (0, jsx_runtime_1.jsx)(basic_js_1.Container, { style: {
+                                        width: `${progress}%`,
+                                        height: "100%",
+                                        backgroundColor: error
+                                            ? theme.colors.danger
+                                            : theme.colors.accentButtonBg,
+                                        transition: "width 0.3s ease",
+                                    }, children: (0, jsx_runtime_1.jsx)(text_js_1.Text, {}) }) })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "sm", children: [request.type === "onramp" && onrampStatus ? ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "md", style: {
+                                    alignItems: "center",
+                                    padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                                    borderRadius: index_js_1.radius.md,
+                                    backgroundColor: getStepBackgroundColor(onrampStatus),
+                                    border: `1px solid ${theme.colors.borderColor}`,
+                                }, children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { center: "both", flex: "row", style: {
+                                            width: `${index_js_1.iconSize.lg}px`,
+                                            height: `${index_js_1.iconSize.lg}px`,
+                                            borderRadius: "50%",
+                                            backgroundColor: getIconBackgroundColor(onrampStatus),
+                                            color: theme.colors.primaryButtonText,
+                                            flexShrink: 0,
+                                        }, children: getStatusIcon(onrampStatus) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "3xs", style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", children: "TEST" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", color: "secondaryText", children: getStepStatusText(onrampStatus) })] })] })) : null, steps?.map((step, index) => {
+                                const status = getStepStatus(index);
+                                return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "md", style: {
+                                        alignItems: "center",
+                                        padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                                        borderRadius: index_js_1.radius.md,
+                                        backgroundColor: getStepBackgroundColor(status),
+                                        border: `1px solid ${theme.colors.borderColor}`,
+                                    }, children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { center: "both", flex: "row", style: {
+                                                width: `${index_js_1.iconSize.lg}px`,
+                                                height: `${index_js_1.iconSize.lg}px`,
+                                                borderRadius: "50%",
+                                                backgroundColor: getIconBackgroundColor(status),
+                                                color: theme.colors.primaryButtonText,
+                                                flexShrink: 0,
+                                            }, children: getStatusIcon(status) }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "3xs", style: { flex: 1 }, children: [getStepDescription(step), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", color: "secondaryText", children: getStepStatusText(status) })] })] }, `${step.originToken.chainId}-${step.destinationToken.chainId}-${index}`));
+                            })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "xs", color: "secondaryText", center: true, children: ["Keep this window open until all", (0, jsx_runtime_1.jsx)("br", {}), " transactions are complete."] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), error ? ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", gap: "md", children: (0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "primary", fullWidth: true, onClick: handleRetry, children: "Retry" }) })) : executionState === "idle" && progress === 0 ? ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "accent", fullWidth: true, onClick: start, children: "Start Transaction" })) : executionState === "executing" ||
+                        executionState === "auto-starting" ? ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "secondary", fullWidth: true, onClick: handleCancel, children: "Cancel Transaction" })) : null] })] }));
+}
+function getDestinationChain(request) {
+    switch (request.type) {
+        case "onramp":
+            return (0, utils_js_1.defineChain)(request.chainId);
+        case "buy":
+        case "sell":
+            return (0, utils_js_1.defineChain)(request.destinationChainId);
+        case "transfer":
+            return (0, utils_js_1.defineChain)(request.chainId);
+        default:
+            throw new Error("Invalid quote type");
+    }
+}
+//# sourceMappingURL=StepRunner.js.map

package/dist/cjs/react/web/ui/Bridge/StepRunner.js.map

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

package/dist/cjs/react/web/ui/Bridge/TransactionPayment.js

@@ -0,0 +1,117 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransactionPayment = TransactionPayment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const address_js_1 = require("../../../../utils/address.js");
+const CustomThemeProvider_js_1 = require("../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../core/design-system/index.js");
+const useChainQuery_js_1 = require("../../../core/hooks/others/useChainQuery.js");
+const useTransactionDetails_js_1 = require("../../../core/hooks/useTransactionDetails.js");
+const useActiveAccount_js_1 = require("../../../core/hooks/wallets/useActiveAccount.js");
+const ConnectButton_js_1 = require("../ConnectWallet/ConnectButton.js");
+const PoweredByTW_js_1 = require("../ConnectWallet/PoweredByTW.js");
+const ChainName_js_1 = require("../components/ChainName.js");
+const Spacer_js_1 = require("../components/Spacer.js");
+const basic_js_1 = require("../components/basic.js");
+const buttons_js_1 = require("../components/buttons.js");
+const text_js_1 = require("../components/text.js");
+const TokenAndChain_js_1 = require("./common/TokenAndChain.js");
+const WithHeader_js_1 = require("./common/WithHeader.js");
+function TransactionPayment({ uiOptions, client, onContinue, connectOptions, }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    const activeAccount = (0, useActiveAccount_js_1.useActiveAccount)();
+    // Get chain metadata for native currency symbol
+    const chainMetadata = (0, useChainQuery_js_1.useChainMetadata)(uiOptions.transaction.chain);
+    // Use the extracted hook for transaction details
+    const transactionDataQuery = (0, useTransactionDetails_js_1.useTransactionDetails)({
+        transaction: uiOptions.transaction,
+        client,
+    });
+    const contractName = transactionDataQuery.data?.contractMetadata?.name || "Unknown Contract";
+    const functionName = transactionDataQuery.data?.functionInfo?.functionName || "Contract Call";
+    const isLoading = transactionDataQuery.isLoading || chainMetadata.isLoading;
+    const buttonLabel = `Execute ${functionName}`;
+    // Skeleton component for loading state
+    const SkeletonRow = ({ width = "100%" }) => ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
+            justifyContent: "space-between",
+            alignItems: "center",
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    width: "30%",
+                    height: "16px",
+                    backgroundColor: theme.colors.skeletonBg,
+                    borderRadius: index_js_1.spacing.xs,
+                } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    width,
+                    height: "16px",
+                    backgroundColor: theme.colors.skeletonBg,
+                    borderRadius: index_js_1.spacing.xs,
+                } })] }));
+    const SkeletonHeader = () => ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", gap: "3xs", style: {
+            justifyContent: "space-between",
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    width: "80px",
+                    height: "32px",
+                    backgroundColor: theme.colors.skeletonBg,
+                    borderRadius: index_js_1.spacing.xs,
+                } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    width: "120px",
+                    height: "24px",
+                    backgroundColor: theme.colors.skeletonBg,
+                    borderRadius: index_js_1.spacing.sm,
+                } })] }));
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsxs)(WithHeader_js_1.WithHeader, { uiOptions: uiOptions, defaultTitle: "Transaction", client: client, children: [(0, jsx_runtime_1.jsx)(SkeletonHeader, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(SkeletonRow, { width: "60%" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsx)(SkeletonRow, { width: "40%" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsx)(SkeletonRow, { width: "50%" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsx)(SkeletonRow, { width: "45%" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsx)(SkeletonRow, { width: "55%" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        width: "100%",
+                        height: "48px",
+                        backgroundColor: theme.colors.skeletonBg,
+                        borderRadius: index_js_1.spacing.md,
+                    } }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(PoweredByTW_js_1.PoweredByThirdweb, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(WithHeader_js_1.WithHeader, { uiOptions: uiOptions, defaultTitle: "Transaction", client: client, children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", gap: "3xs", style: {
+                    justifyContent: "space-between",
+                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xl", color: "primaryText", weight: 700, children: transactionDataQuery.data?.usdValueDisplay ||
+                            transactionDataQuery.data?.txCostDisplay }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "secondaryText", style: {
+                            fontFamily: "monospace",
+                            textAlign: "right",
+                            backgroundColor: theme.colors.tertiaryBg,
+                            padding: `${index_js_1.spacing.xs} ${index_js_1.spacing.sm}`,
+                            borderRadius: index_js_1.spacing.sm,
+                        }, children: functionName })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Contract" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", children: contractName })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Address" }), (0, jsx_runtime_1.jsx)("a", { href: `https://thirdweb.com/${uiOptions.transaction.chain.id}/${uiOptions.transaction.to}`, target: "_blank", rel: "noopener noreferrer", style: {
+                            color: theme.colors.accentText,
+                            textDecoration: "none",
+                            fontFamily: "monospace",
+                            fontSize: index_js_1.fontSize.sm,
+                        }, children: (0, address_js_1.shortenAddress)(uiOptions.transaction.to) })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Network" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "3xs", center: "y", children: [(0, jsx_runtime_1.jsx)(TokenAndChain_js_1.ChainIcon, { chain: uiOptions.transaction.chain, size: "xs", client: client }), (0, jsx_runtime_1.jsx)(ChainName_js_1.ChainName, { chain: uiOptions.transaction.chain, client: client, size: "sm", color: "primaryText", short: true, style: {
+                                    fontFamily: "monospace",
+                                } })] })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" }), transactionDataQuery.data?.txCostDisplay && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                        }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Cost" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", style: {
+                                    fontFamily: "monospace",
+                                }, children: transactionDataQuery.data?.txCostDisplay })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xs" })] })), transactionDataQuery.data?.gasCostDisplay && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                        }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Network fees" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", style: {
+                                    fontFamily: "monospace",
+                                }, children: transactionDataQuery.data?.gasCostDisplay })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" })] })), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), activeAccount ? ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "primary", fullWidth: true, onClick: () => {
+                    if (transactionDataQuery.data?.tokenInfo) {
+                        onContinue(transactionDataQuery.data.totalCost, transactionDataQuery.data.tokenInfo, (0, address_js_1.getAddress)(activeAccount.address));
+                    }
+                }, style: {
+                    padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                    fontSize: index_js_1.fontSize.md,
+                }, children: buttonLabel })) : ((0, jsx_runtime_1.jsx)(ConnectButton_js_1.ConnectButton, { client: client, theme: theme, connectButton: {
+                    label: buttonLabel,
+                }, ...connectOptions })), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(PoweredByTW_js_1.PoweredByThirdweb, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" })] }));
+}
+//# sourceMappingURL=TransactionPayment.js.map

package/dist/cjs/react/web/ui/Bridge/TransactionPayment.js.map

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

package/dist/cjs/react/web/ui/Bridge/TransactionWidget.js

@@ -0,0 +1,179 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransactionWidget = TransactionWidget;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_query_1 = require("@tanstack/react-query");
+const addresses_js_1 = require("../../../../constants/addresses.js");
+const prepare_transaction_js_1 = require("../../../../transaction/prepare-transaction.js");
+const address_js_1 = require("../../../../utils/address.js");
+const json_js_1 = require("../../../../utils/json.js");
+const CustomThemeProvider_js_1 = require("../../../core/design-system/CustomThemeProvider.js");
+const ConnectEmbed_js_1 = require("../ConnectWallet/Modal/ConnectEmbed.js");
+const getConnectLocale_js_1 = require("../ConnectWallet/locale/getConnectLocale.js");
+const DynamicHeight_js_1 = require("../components/DynamicHeight.js");
+const Spinner_js_1 = require("../components/Spinner.js");
+const BridgeOrchestrator_js_1 = require("./BridgeOrchestrator.js");
+const UnsupportedTokenScreen_js_1 = require("./UnsupportedTokenScreen.js");
+/**
+ * Widget a prebuilt UI for purchasing a specific token.
+ *
+ * @param props - Props of type [`TransactionWidgetProps`](https://portal.thirdweb.com/references/typescript/v5/TransactionWidgetProps) to configure the TransactionWidget component.
+ *
+ * @example
+ * ### Default configuration
+ *
+ * By default, the `TransactionWidget` component will allows users to fund their wallets with crypto or fiat on any of the supported chains..
+ *
+ * ```tsx
+ * <TransactionWidget
+ *   client={client}
+ *   transaction={prepareTransaction({
+ *     to: "0x...",
+ *     chain: ethereum,
+ *     client: client,
+ *     value: toUnits("0.001", 18),
+ *   })}
+ *  />
+ * ```
+ *
+ * ### Enable/Disable payment methods
+ *
+ * You can use `disableOnramps` to prevent the use of onramps in the widget.
+ *
+ * ```tsx
+ * <TransactionWidget
+ *   client={client}
+ *   transaction={prepareTransaction({
+ *     to: "0x...",
+ *     chain: ethereum,
+ *     client: client,
+ *     value: toUnits("0.001", 18),
+ *   })}
+ *   disableOnramps
+ *  />
+ * ```
+ *
+ * ### Customize the UI
+ *
+ * You can customize the UI of the `TransactionWidget` component by passing a custom theme object to the `theme` prop.
+ *
+ * ```tsx
+ * <TransactionWidget
+ *   client={client}
+ *   transaction={prepareTransaction({
+ *     to: "0x...",
+ *     chain: ethereum,
+ *     client: client,
+ *     value: toUnits("0.001", 18),
+ *   })}
+ *   theme={darkTheme({
+ *     colors: {
+ *       modalBg: "red",
+ *     },
+ *   })}
+ * />
+ * ```
+ *
+ * Refer to the [`Theme`](https://portal.thirdweb.com/references/typescript/v5/Theme) type for more details.
+ *
+ * ### Update the Title
+ *
+ * You can update the title of the widget by passing a `title` prop to the `TransactionWidget` component.
+ *
+ * ```tsx
+ * <TransactionWidget
+ *   transaction={prepareTransaction({
+ *     to: "0x...",
+ *     chain: ethereum,
+ *     client: client,
+ *     value: toUnits("0.001", 18),
+ *   })}
+ *   client={client}
+ *   title="Transaction ETH"
+ * />
+ * ```
+ *
+ * ### Configure the wallet connection
+ *
+ * You can customize the wallet connection flow by passing a `connectOptions` object to the `TransactionWidget` component.
+ *
+ * ```tsx
+ * <TransactionWidget
+ *   client={client}
+ *   transaction={prepareTransaction({
+ *     to: "0x...",
+ *     chain: ethereum,
+ *     client: client,
+ *     value: toUnits("0.001", 18),
+ *   })}
+ *   connectOptions={{
+ *     connectModal: {
+ *       size: 'compact',
+ *       title: "Sign in",
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * Refer to the [`TransactionWidgetConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/TransactionWidgetConnectOptions) type for more details.
+ *
+ * @bridge
+ * @beta
+ * @react
+ */
+function TransactionWidget(props) {
+    const localeQuery = (0, getConnectLocale_js_1.useConnectLocale)(props.locale || "en_US");
+    const theme = props.theme || "dark";
+    const bridgeDataQuery = (0, react_query_1.useQuery)({
+        queryKey: ["bridgeData", (0, json_js_1.stringify)(props)],
+        queryFn: async () => {
+            const transaction = (0, prepare_transaction_js_1.prepareTransaction)({
+                ...props.transaction,
+                erc20Value: props.amount
+                    ? {
+                        amountWei: props.amount,
+                        tokenAddress: (0, address_js_1.checksumAddress)(props.tokenAddress || addresses_js_1.NATIVE_TOKEN_ADDRESS),
+                    }
+                    : props.transaction.erc20Value,
+            });
+            return {
+                type: "success",
+                data: {
+                    mode: "transaction",
+                    metadata: {
+                        title: props.title,
+                        description: props.description,
+                        image: props.image,
+                    },
+                    transaction,
+                },
+            };
+        },
+    });
+    let content = null;
+    if (!localeQuery.data || bridgeDataQuery.isLoading) {
+        content = ((0, jsx_runtime_1.jsx)("div", { style: {
+                minHeight: "350px",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+            }, children: (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: "xl", color: "secondaryText" }) }));
+    }
+    else if (bridgeDataQuery.data?.type === "unsupported_token") {
+        // Show unsupported token screen
+        content = (0, jsx_runtime_1.jsx)(UnsupportedTokenScreen_js_1.UnsupportedTokenScreen, { chain: bridgeDataQuery.data.chain });
+    }
+    else if (bridgeDataQuery.data?.type === "success") {
+        // Show normal bridge orchestrator
+        content = ((0, jsx_runtime_1.jsx)(BridgeOrchestrator_js_1.BridgeOrchestrator, { client: props.client, uiOptions: bridgeDataQuery.data.data, connectOptions: props.connectOptions, connectLocale: localeQuery.data, purchaseData: props.purchaseData, paymentLinkId: props.paymentLinkId, onComplete: () => {
+                props.onSuccess?.();
+            }, onError: (err) => {
+                props.onError?.(err);
+            }, onCancel: () => {
+                props.onCancel?.();
+            }, presetOptions: props.presetOptions, receiverAddress: undefined }));
+    }
+    return ((0, jsx_runtime_1.jsx)(CustomThemeProvider_js_1.CustomThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(ConnectEmbed_js_1.EmbedContainer, { modalSize: "compact", style: props.style, className: props.className, children: (0, jsx_runtime_1.jsx)(DynamicHeight_js_1.DynamicHeight, { children: content }) }) }));
+}
+//# sourceMappingURL=TransactionWidget.js.map

package/dist/cjs/react/web/ui/Bridge/TransactionWidget.js.map

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

package/dist/cjs/react/web/ui/Bridge/UnsupportedTokenScreen.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnsupportedTokenScreen = UnsupportedTokenScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_js_1 = require("../../../core/design-system/index.js");
+const useChainQuery_js_1 = require("../../../core/hooks/others/useChainQuery.js");
+const AccentFailIcon_js_1 = require("../ConnectWallet/icons/AccentFailIcon.js");
+const Spacer_js_1 = require("../components/Spacer.js");
+const basic_js_1 = require("../components/basic.js");
+const text_js_1 = require("../components/text.js");
+/**
+ * Screen displayed when a specified token is not supported by the Bridge API
+ * @internal
+ */
+function UnsupportedTokenScreen(props) {
+    const { chain } = props;
+    const { data: chainMetadata } = (0, useChainQuery_js_1.useChainMetadata)(chain);
+    if (chainMetadata?.testnet) {
+        return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { animate: "fadein", flex: "column", center: "both", style: { minHeight: "350px" }, children: [(0, jsx_runtime_1.jsx)(AccentFailIcon_js_1.AccentFailIcon, { size: index_js_1.iconSize["3xl"] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { center: true, color: "primaryText", size: "lg", weight: 600, children: "Testnet Not Supported" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { center: true, color: "secondaryText", size: "sm", style: { maxWidth: "280px", lineHeight: 1.5 }, children: "The Universal Bridge does not support testnets at this time." })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { animate: "fadein", flex: "column", center: "both", style: { minHeight: "350px" }, children: [(0, jsx_runtime_1.jsx)(AccentFailIcon_js_1.AccentFailIcon, { size: index_js_1.iconSize["3xl"] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { center: true, color: "primaryText", size: "lg", weight: 600, children: "Token Not Supported" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { center: true, color: "secondaryText", size: "sm", style: { maxWidth: "280px", lineHeight: 1.5 }, children: "This token or chain is not supported by the Universal Bridge." })] }));
+}
+//# sourceMappingURL=UnsupportedTokenScreen.js.map

package/dist/cjs/react/web/ui/Bridge/UnsupportedTokenScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnsupportedTokenScreen.js","sourceRoot":"","sources":["../../../../../../src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx"],"names":[],"mappings":";;AAmBA,wDAgEC;;AAlFD,mEAAgE;AAChE,kFAA+E;AAC/E,gFAA0E;AAC1E,uDAAiD;AACjD,qDAAmD;AACnD,mDAA6C;AAS7C;;;GAGG;AACH,SAAgB,sBAAsB,CAAC,KAAkC;IACvE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,IAAA,mCAAgB,EAAC,KAAK,CAAC,CAAC;IAExD,IAAI,aAAa,EAAE,OAAO,EAAE,CAAC;QAC3B,OAAO,CACL,wBAAC,oBAAS,IACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,QAAQ,EACb,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aAG7B,uBAAC,kCAAc,IAAC,IAAI,EAAE,mBAAQ,CAAC,KAAK,CAAC,GAAI,EACzC,uBAAC,kBAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,uBAAC,cAAI,IAAC,MAAM,QAAC,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,GAAG,sCAE/C,EACP,uBAAC,kBAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,uBAAC,cAAI,IACH,MAAM,QACN,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,6EAGxC,IACG,CACb,CAAC;IACJ,CAAC;IAED,OAAO,CACL,wBAAC,oBAAS,IACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,QAAQ,EACb,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aAG7B,uBAAC,kCAAc,IAAC,IAAI,EAAE,mBAAQ,CAAC,KAAK,CAAC,GAAI,EACzC,uBAAC,kBAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,uBAAC,cAAI,IAAC,MAAM,QAAC,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,GAAG,oCAE/C,EACP,uBAAC,kBAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,uBAAC,cAAI,IACH,MAAM,QACN,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,8EAGxC,IACG,CACb,CAAC;AACJ,CAAC"}