thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.1-nightly-bb09e20bcb1662c088bf8b61486df7d0d92da8d0-20250618000421

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

@@ -0,0 +1,176 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ClockIcon, Cross1Icon } from "@radix-ui/react-icons";
+import { defineChain } from "../../../../chains/utils.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { iconSize, radius, spacing, } from "../../../core/design-system/index.js";
+import { useStepExecutor, } from "../../../core/hooks/useStepExecutor.js";
+import { ChainName } from "../components/ChainName.js";
+import { Spacer } from "../components/Spacer.js";
+import { Spinner } from "../components/Spinner.js";
+import { Container, ModalHeader } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
+import { Text } from "../components/text.js";
+export function StepRunner({ request, wallet, client, windowAdapter, onComplete, onCancel, onBack, autoStart, }) {
+    const theme = useCustomTheme();
+    // Use the real step executor hook
+    const { currentStep, progress, executionState, onrampStatus, steps, error, start, cancel, retry, } = 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 (_jsx(CheckIcon, { width: iconSize.sm, height: iconSize.sm, color: theme.colors.accentButtonText }));
+            case "executing":
+                return _jsx(Spinner, { size: "sm", color: "accentButtonText" });
+            case "failed":
+                return (_jsx(Cross1Icon, { width: iconSize.sm, height: iconSize.sm, color: "white" }));
+            default:
+                return (_jsx(ClockIcon, { width: iconSize.sm, height: 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 (_jsxs(Container, { flex: "row", gap: "3xs", children: [_jsxs(Text, { size: "sm", color: "primaryText", children: ["Bridge ", originToken.symbol, " to", " "] }), _jsx(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 (_jsxs(Text, { size: "sm", color: "primaryText", children: ["Swap ", originToken.symbol, " to ", destinationToken.symbol] }));
+        }
+        // Fallback to step number
+        return (_jsx(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 (_jsxs(Container, { flex: "column", fullHeight: true, p: "lg", children: [_jsx(ModalHeader, { title: "Processing Payment", onBack: onBack }), _jsx(Spacer, { y: "xl" }), _jsxs(Container, { flex: "column", children: [_jsxs(Container, { flex: "column", gap: "sm", children: [_jsxs(Container, { flex: "row", center: "y", children: [_jsx(Text, { size: "sm", color: "secondaryText", style: { flex: 1 }, children: "Progress" }), _jsxs(Text, { size: "sm", color: "primaryText", children: [progress, "%"] })] }), _jsx(Container, { style: {
+                                    width: "100%",
+                                    height: "8px",
+                                    backgroundColor: theme.colors.tertiaryBg,
+                                    border: `1px solid ${theme.colors.borderColor}`,
+                                    borderRadius: "4px",
+                                    overflow: "hidden",
+                                }, children: _jsx(Container, { style: {
+                                        width: `${progress}%`,
+                                        height: "100%",
+                                        backgroundColor: error
+                                            ? theme.colors.danger
+                                            : theme.colors.accentButtonBg,
+                                        transition: "width 0.3s ease",
+                                    }, children: _jsx(Text, {}) }) })] }), _jsx(Spacer, { y: "lg" }), _jsxs(Container, { flex: "column", gap: "sm", children: [request.type === "onramp" && onrampStatus ? (_jsxs(Container, { flex: "row", gap: "md", style: {
+                                    alignItems: "center",
+                                    padding: `${spacing.sm} ${spacing.md}`,
+                                    borderRadius: radius.md,
+                                    backgroundColor: getStepBackgroundColor(onrampStatus),
+                                    border: `1px solid ${theme.colors.borderColor}`,
+                                }, children: [_jsx(Container, { center: "both", flex: "row", style: {
+                                            width: `${iconSize.lg}px`,
+                                            height: `${iconSize.lg}px`,
+                                            borderRadius: "50%",
+                                            backgroundColor: getIconBackgroundColor(onrampStatus),
+                                            color: theme.colors.primaryButtonText,
+                                            flexShrink: 0,
+                                        }, children: getStatusIcon(onrampStatus) }), _jsxs(Container, { flex: "column", gap: "3xs", style: { flex: 1 }, children: [_jsx(Text, { size: "sm", color: "primaryText", children: "TEST" }), _jsx(Text, { size: "xs", color: "secondaryText", children: getStepStatusText(onrampStatus) })] })] })) : null, steps?.map((step, index) => {
+                                const status = getStepStatus(index);
+                                return (_jsxs(Container, { flex: "row", gap: "md", style: {
+                                        alignItems: "center",
+                                        padding: `${spacing.sm} ${spacing.md}`,
+                                        borderRadius: radius.md,
+                                        backgroundColor: getStepBackgroundColor(status),
+                                        border: `1px solid ${theme.colors.borderColor}`,
+                                    }, children: [_jsx(Container, { center: "both", flex: "row", style: {
+                                                width: `${iconSize.lg}px`,
+                                                height: `${iconSize.lg}px`,
+                                                borderRadius: "50%",
+                                                backgroundColor: getIconBackgroundColor(status),
+                                                color: theme.colors.primaryButtonText,
+                                                flexShrink: 0,
+                                            }, children: getStatusIcon(status) }), _jsxs(Container, { flex: "column", gap: "3xs", style: { flex: 1 }, children: [getStepDescription(step), _jsx(Text, { size: "xs", color: "secondaryText", children: getStepStatusText(status) })] })] }, `${step.originToken.chainId}-${step.destinationToken.chainId}-${index}`));
+                            })] }), _jsx(Spacer, { y: "md" }), _jsxs(Text, { size: "xs", color: "secondaryText", center: true, children: ["Keep this window open until all", _jsx("br", {}), " transactions are complete."] }), _jsx(Spacer, { y: "lg" }), error ? (_jsx(Container, { flex: "row", gap: "md", children: _jsx(Button, { variant: "primary", fullWidth: true, onClick: handleRetry, children: "Retry" }) })) : executionState === "idle" && progress === 0 ? (_jsx(Button, { variant: "accent", fullWidth: true, onClick: start, children: "Start Transaction" })) : executionState === "executing" ||
+                        executionState === "auto-starting" ? (_jsx(Button, { variant: "secondary", fullWidth: true, onClick: handleCancel, children: "Cancel Transaction" })) : null] })] }));
+}
+function getDestinationChain(request) {
+    switch (request.type) {
+        case "onramp":
+            return defineChain(request.chainId);
+        case "buy":
+        case "sell":
+            return defineChain(request.destinationChainId);
+        case "transfer":
+            return defineChain(request.chainId);
+        default:
+            throw new Error("Invalid quote type");
+    }
+}
+//# sourceMappingURL=StepRunner.js.map

package/dist/esm/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/esm/react/web/ui/Bridge/TransactionPayment.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getAddress, shortenAddress, } from "../../../../utils/address.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import { fontSize, spacing } from "../../../core/design-system/index.js";
+import { useChainMetadata } from "../../../core/hooks/others/useChainQuery.js";
+import { useTransactionDetails } from "../../../core/hooks/useTransactionDetails.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
+import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
+import { ChainName } from "../components/ChainName.js";
+import { Spacer } from "../components/Spacer.js";
+import { Container, Line } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
+import { Text } from "../components/text.js";
+import { ChainIcon } from "./common/TokenAndChain.js";
+import { WithHeader } from "./common/WithHeader.js";
+export function TransactionPayment({ uiOptions, client, onContinue, connectOptions, }) {
+    const theme = useCustomTheme();
+    const activeAccount = useActiveAccount();
+    // Get chain metadata for native currency symbol
+    const chainMetadata = useChainMetadata(uiOptions.transaction.chain);
+    // Use the extracted hook for transaction details
+    const transactionDataQuery = 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%" }) => (_jsxs(Container, { flex: "row", style: {
+            justifyContent: "space-between",
+            alignItems: "center",
+        }, children: [_jsx("div", { style: {
+                    width: "30%",
+                    height: "16px",
+                    backgroundColor: theme.colors.skeletonBg,
+                    borderRadius: spacing.xs,
+                } }), _jsx("div", { style: {
+                    width,
+                    height: "16px",
+                    backgroundColor: theme.colors.skeletonBg,
+                    borderRadius: spacing.xs,
+                } })] }));
+    const SkeletonHeader = () => (_jsxs(Container, { flex: "row", center: "y", gap: "3xs", style: {
+            justifyContent: "space-between",
+        }, children: [_jsx("div", { style: {
+                    width: "80px",
+                    height: "32px",
+                    backgroundColor: theme.colors.skeletonBg,
+                    borderRadius: spacing.xs,
+                } }), _jsx("div", { style: {
+                    width: "120px",
+                    height: "24px",
+                    backgroundColor: theme.colors.skeletonBg,
+                    borderRadius: spacing.sm,
+                } })] }));
+    if (isLoading) {
+        return (_jsxs(WithHeader, { uiOptions: uiOptions, defaultTitle: "Transaction", client: client, children: [_jsx(SkeletonHeader, {}), _jsx(Spacer, { y: "md" }), _jsx(Line, {}), _jsx(Spacer, { y: "md" }), _jsx(SkeletonRow, { width: "60%" }), _jsx(Spacer, { y: "xs" }), _jsx(SkeletonRow, { width: "40%" }), _jsx(Spacer, { y: "xs" }), _jsx(SkeletonRow, { width: "50%" }), _jsx(Spacer, { y: "xs" }), _jsx(SkeletonRow, { width: "45%" }), _jsx(Spacer, { y: "xs" }), _jsx(SkeletonRow, { width: "55%" }), _jsx(Spacer, { y: "md" }), _jsx(Line, {}), _jsx(Spacer, { y: "lg" }), _jsx("div", { style: {
+                        width: "100%",
+                        height: "48px",
+                        backgroundColor: theme.colors.skeletonBg,
+                        borderRadius: spacing.md,
+                    } }), _jsx(Spacer, { y: "md" }), _jsx(PoweredByThirdweb, {}), _jsx(Spacer, { y: "md" })] }));
+    }
+    return (_jsxs(WithHeader, { uiOptions: uiOptions, defaultTitle: "Transaction", client: client, children: [_jsxs(Container, { flex: "row", center: "y", gap: "3xs", style: {
+                    justifyContent: "space-between",
+                }, children: [_jsx(Text, { size: "xl", color: "primaryText", weight: 700, children: transactionDataQuery.data?.usdValueDisplay ||
+                            transactionDataQuery.data?.txCostDisplay }), _jsx(Text, { size: "md", color: "secondaryText", style: {
+                            fontFamily: "monospace",
+                            textAlign: "right",
+                            backgroundColor: theme.colors.tertiaryBg,
+                            padding: `${spacing.xs} ${spacing.sm}`,
+                            borderRadius: spacing.sm,
+                        }, children: functionName })] }), _jsx(Spacer, { y: "md" }), _jsx(Line, {}), _jsx(Spacer, { y: "md" }), _jsxs(Container, { flex: "row", style: {
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, children: [_jsx(Text, { size: "sm", color: "secondaryText", children: "Contract" }), _jsx(Text, { size: "sm", color: "primaryText", children: contractName })] }), _jsx(Spacer, { y: "xs" }), _jsxs(Container, { flex: "row", style: {
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, children: [_jsx(Text, { size: "sm", color: "secondaryText", children: "Address" }), _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: fontSize.sm,
+                        }, children: shortenAddress(uiOptions.transaction.to) })] }), _jsx(Spacer, { y: "xs" }), _jsxs(Container, { flex: "row", style: {
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, children: [_jsx(Text, { size: "sm", color: "secondaryText", children: "Network" }), _jsxs(Container, { flex: "row", gap: "3xs", center: "y", children: [_jsx(ChainIcon, { chain: uiOptions.transaction.chain, size: "xs", client: client }), _jsx(ChainName, { chain: uiOptions.transaction.chain, client: client, size: "sm", color: "primaryText", short: true, style: {
+                                    fontFamily: "monospace",
+                                } })] })] }), _jsx(Spacer, { y: "xs" }), transactionDataQuery.data?.txCostDisplay && (_jsxs(_Fragment, { children: [_jsxs(Container, { flex: "row", style: {
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                        }, children: [_jsx(Text, { size: "sm", color: "secondaryText", children: "Cost" }), _jsx(Text, { size: "sm", color: "primaryText", style: {
+                                    fontFamily: "monospace",
+                                }, children: transactionDataQuery.data?.txCostDisplay })] }), _jsx(Spacer, { y: "xs" })] })), transactionDataQuery.data?.gasCostDisplay && (_jsxs(_Fragment, { children: [_jsxs(Container, { flex: "row", style: {
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                        }, children: [_jsx(Text, { size: "sm", color: "secondaryText", children: "Network fees" }), _jsx(Text, { size: "sm", color: "primaryText", style: {
+                                    fontFamily: "monospace",
+                                }, children: transactionDataQuery.data?.gasCostDisplay })] }), _jsx(Spacer, { y: "md" })] })), _jsx(Line, {}), _jsx(Spacer, { y: "lg" }), activeAccount ? (_jsx(Button, { variant: "primary", fullWidth: true, onClick: () => {
+                    if (transactionDataQuery.data?.tokenInfo) {
+                        onContinue(transactionDataQuery.data.totalCost, transactionDataQuery.data.tokenInfo, getAddress(activeAccount.address));
+                    }
+                }, style: {
+                    padding: `${spacing.sm} ${spacing.md}`,
+                    fontSize: fontSize.md,
+                }, children: buttonLabel })) : (_jsx(ConnectButton, { client: client, theme: theme, connectButton: {
+                    label: buttonLabel,
+                }, ...connectOptions })), _jsx(Spacer, { y: "md" }), _jsx(PoweredByThirdweb, {}), _jsx(Spacer, { y: "lg" })] }));
+}
+//# sourceMappingURL=TransactionPayment.js.map

package/dist/esm/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/esm/react/web/ui/Bridge/TransactionWidget.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
+import { prepareTransaction, } from "../../../../transaction/prepare-transaction.js";
+import { checksumAddress } from "../../../../utils/address.js";
+import { stringify } from "../../../../utils/json.js";
+import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
+import { EmbedContainer } from "../ConnectWallet/Modal/ConnectEmbed.js";
+import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
+import { DynamicHeight } from "../components/DynamicHeight.js";
+import { Spinner } from "../components/Spinner.js";
+import { BridgeOrchestrator } from "./BridgeOrchestrator.js";
+import { UnsupportedTokenScreen } from "./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),
+ *   })}
+ *  />
+ * ```
+ *
+ * ### 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
+ */
+export function TransactionWidget(props) {
+    const localeQuery = useConnectLocale(props.locale || "en_US");
+    const theme = props.theme || "dark";
+    const bridgeDataQuery = useQuery({
+        queryKey: ["bridgeData", stringify(props)],
+        queryFn: async () => {
+            const transaction = prepareTransaction({
+                ...props.transaction,
+                erc20Value: props.amount
+                    ? {
+                        amountWei: props.amount,
+                        tokenAddress: checksumAddress(props.tokenAddress || 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 = (_jsx("div", { style: {
+                minHeight: "350px",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+            }, children: _jsx(Spinner, { size: "xl", color: "secondaryText" }) }));
+    }
+    else if (bridgeDataQuery.data?.type === "unsupported_token") {
+        // Show unsupported token screen
+        content = _jsx(UnsupportedTokenScreen, { chain: bridgeDataQuery.data.chain });
+    }
+    else if (bridgeDataQuery.data?.type === "success") {
+        // Show normal bridge orchestrator
+        content = (_jsx(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 (_jsx(CustomThemeProvider, { theme: theme, children: _jsx(EmbedContainer, { modalSize: "compact", style: props.style, className: props.className, children: _jsx(DynamicHeight, { children: content }) }) }));
+}
+//# sourceMappingURL=TransactionWidget.js.map

package/dist/esm/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/esm/react/web/ui/Bridge/UnsupportedTokenScreen.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconSize } from "../../../core/design-system/index.js";
+import { useChainMetadata } from "../../../core/hooks/others/useChainQuery.js";
+import { AccentFailIcon } from "../ConnectWallet/icons/AccentFailIcon.js";
+import { Spacer } from "../components/Spacer.js";
+import { Container } from "../components/basic.js";
+import { Text } from "../components/text.js";
+/**
+ * Screen displayed when a specified token is not supported by the Bridge API
+ * @internal
+ */
+export function UnsupportedTokenScreen(props) {
+    const { chain } = props;
+    const { data: chainMetadata } = useChainMetadata(chain);
+    if (chainMetadata?.testnet) {
+        return (_jsxs(Container, { animate: "fadein", flex: "column", center: "both", style: { minHeight: "350px" }, children: [_jsx(AccentFailIcon, { size: iconSize["3xl"] }), _jsx(Spacer, { y: "lg" }), _jsx(Text, { center: true, color: "primaryText", size: "lg", weight: 600, children: "Testnet Not Supported" }), _jsx(Spacer, { y: "sm" }), _jsx(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 (_jsxs(Container, { animate: "fadein", flex: "column", center: "both", style: { minHeight: "350px" }, children: [_jsx(AccentFailIcon, { size: iconSize["3xl"] }), _jsx(Spacer, { y: "lg" }), _jsx(Text, { center: true, color: "primaryText", size: "lg", weight: 600, children: "Token Not Supported" }), _jsx(Spacer, { y: "sm" }), _jsx(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/esm/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":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAS7C;;;GAGG;AACH,MAAM,UAAU,sBAAsB,CAAC,KAAkC;IACvE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAExD,IAAI,aAAa,EAAE,OAAO,EAAE,CAAC;QAC3B,OAAO,CACL,MAAC,SAAS,IACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,QAAQ,EACb,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aAG7B,KAAC,cAAc,IAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAI,EACzC,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,KAAC,IAAI,IAAC,MAAM,QAAC,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,GAAG,sCAE/C,EACP,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,KAAC,IAAI,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,MAAC,SAAS,IACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,QAAQ,EACb,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aAG7B,KAAC,cAAc,IAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAI,EACzC,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,KAAC,IAAI,IAAC,MAAM,QAAC,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,GAAG,oCAE/C,EACP,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,KAAC,IAAI,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"}

package/dist/esm/react/web/ui/Bridge/common/TokenAndChain.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getCachedChain } from "../../../../../chains/utils.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { resolveScheme } from "../../../../../utils/ipfs.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { iconSize, spacing } from "../../../../core/design-system/index.js";
+import { useChainIconUrl, useChainMetadata, } from "../../../../core/hooks/others/useChainQuery.js";
+import { genericTokenIcon } from "../../../../core/utils/walletIcon.js";
+import { isNativeToken } from "../../ConnectWallet/screens/nativeToken.js";
+import { ChainName } from "../../components/ChainName.js";
+import { Img } from "../../components/Img.js";
+import { Container } from "../../components/basic.js";
+import { fallbackChainIcon } from "../../components/fallbackChainIcon.js";
+import { Text } from "../../components/text.js";
+export function TokenAndChain({ token, client, size, style, }) {
+    const theme = useCustomTheme();
+    const chain = getCachedChain(token.chainId);
+    return (_jsxs(Container, { flex: "row", center: "y", gap: "sm", style: {
+            flexWrap: "nowrap",
+            ...style,
+        }, children: [_jsxs(Container, { style: {
+                    position: "relative",
+                    width: iconSize[size],
+                    height: iconSize[size],
+                }, children: [_jsx(TokenIconWithFallback, { token: token, size: size, client: client }), chain.id !== 1 && (_jsx(Container, { style: {
+                            position: "absolute",
+                            bottom: "-2px",
+                            right: "-6px",
+                            width: size === "lg" || size === "xl" ? iconSize.sm : iconSize.xs,
+                            height: size === "lg" || size === "xl" ? iconSize.sm : iconSize.xs,
+                            borderRadius: "50%",
+                            background: theme.colors.borderColor,
+                            border: `1.5px solid ${theme.colors.modalBg}`,
+                        }, children: _jsx(ChainIcon, { chain: chain, size: size === "xl" || size === "lg" ? "sm" : "xs", client: client }) }))] }), _jsxs(Container, { flex: "column", gap: "3xs", style: { minWidth: 0 }, children: [_jsx(Text, { size: size === "xl" ? "lg" : "sm", color: "primaryText", weight: 600, style: {
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                        }, children: token.name }), _jsx(ChainName, { chain: chain, size: size === "xl" ? "sm" : "xs", client: client, short: true })] })] }));
+}
+function TokenIconWithFallback(props) {
+    const chain = getCachedChain(props.token.chainId);
+    const chainMeta = useChainMetadata(chain).data;
+    const theme = useCustomTheme();
+    const tokenImage = useMemo(() => {
+        if (isNativeToken(props.token) ||
+            props.token.address === NATIVE_TOKEN_ADDRESS) {
+            if (chainMeta?.nativeCurrency.symbol === "ETH") {
+                return "ipfs://QmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9/ethereum/512.png"; // ETH icon
+            }
+            return chainMeta?.icon?.url;
+        }
+        return props.token.iconUri;
+    }, [props.token, chainMeta?.icon?.url, chainMeta?.nativeCurrency.symbol]);
+    return tokenImage ? (_jsx(Img, { src: tokenImage, style: {
+            borderRadius: "50%",
+        }, width: iconSize[props.size], height: iconSize[props.size], fallbackImage: genericTokenIcon, client: props.client })) : (_jsx(Container, { style: {
+            width: `${iconSize.md}px`,
+            height: `${iconSize.md}px`,
+            borderRadius: "50%",
+            backgroundColor: theme.colors.secondaryButtonBg,
+            border: `1px solid ${theme.colors.borderColor}`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: spacing.xs,
+        }, children: _jsx(Text, { size: props.size === "xl" ? "sm" : "xs", color: "secondaryText", style: { fontWeight: 600 }, children: props.token.symbol.slice(0, 1) }) }));
+}
+export const ChainIcon = (props) => {
+    const { url } = useChainIconUrl(props.chain);
+    return (_jsx(Container, { style: {
+            position: "relative",
+            display: "flex",
+            flexShrink: 0,
+            alignItems: "center",
+        }, children: _jsx(Img, { src: getSrcChainIcon({
+                client: props.client,
+                chainIconUrl: url,
+            }), width: iconSize[props.size], height: iconSize[props.size], fallbackImage: fallbackChainIcon, client: props.client }) }));
+};
+const getSrcChainIcon = (props) => {
+    const url = props.chainIconUrl;
+    if (!url) {
+        return fallbackChainIcon;
+    }
+    try {
+        return resolveScheme({
+            uri: url,
+            client: props.client,
+        });
+    }
+    catch {
+        return fallbackChainIcon;
+    }
+};
+//# sourceMappingURL=TokenAndChain.js.map

package/dist/esm/react/web/ui/Bridge/common/TokenAndChain.js.map

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