thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

package/dist/cjs/react/web/ui/Bridge/payment-selection/PaymentSelection.js

@@ -0,0 +1,111 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaymentSelection = PaymentSelection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_js_1 = require("../../../../../chains/utils.js");
+const units_js_1 = require("../../../../../utils/units.js");
+const usePaymentMethods_js_1 = require("../../../../core/hooks/usePaymentMethods.js");
+const useActiveWallet_js_1 = require("../../../../core/hooks/wallets/useActiveWallet.js");
+const useConnectedWallets_js_1 = require("../../../../core/hooks/wallets/useConnectedWallets.js");
+const WalletSwitcherConnectionScreen_js_1 = require("../../ConnectWallet/screens/WalletSwitcherConnectionScreen.js");
+const Spacer_js_1 = require("../../components/Spacer.js");
+const basic_js_1 = require("../../components/basic.js");
+const FiatProviderSelection_js_1 = require("./FiatProviderSelection.js");
+const TokenSelection_js_1 = require("./TokenSelection.js");
+const WalletFiatSelection_js_1 = require("./WalletFiatSelection.js");
+function PaymentSelection({ destinationToken, client, destinationAmount, receiverAddress, onPaymentMethodSelected, onError, onBack, connectOptions, connectLocale, includeDestinationToken, }) {
+    const connectedWallets = (0, useConnectedWallets_js_1.useConnectedWallets)();
+    const activeWallet = (0, useActiveWallet_js_1.useActiveWallet)();
+    const [currentStep, setCurrentStep] = (0, react_1.useState)({
+        type: "walletSelection",
+    });
+    const payerWallet = currentStep.type === "tokenSelection"
+        ? currentStep.selectedWallet
+        : activeWallet;
+    const { data: paymentMethods, isLoading: paymentMethodsLoading, error: paymentMethodsError, } = (0, usePaymentMethods_js_1.usePaymentMethods)({
+        destinationToken,
+        destinationAmount,
+        client,
+        includeDestinationToken: includeDestinationToken ||
+            receiverAddress?.toLowerCase() !==
+                payerWallet?.getAccount()?.address?.toLowerCase(),
+        payerWallet,
+    });
+    // Handle error from usePaymentMethods
+    (0, react_1.useEffect)(() => {
+        if (paymentMethodsError) {
+            onError(paymentMethodsError);
+        }
+    }, [paymentMethodsError, onError]);
+    const handlePaymentMethodSelected = (paymentMethod) => {
+        try {
+            onPaymentMethodSelected(paymentMethod);
+        }
+        catch (error) {
+            onError(error);
+        }
+    };
+    const handleWalletSelected = (wallet) => {
+        setCurrentStep({ type: "tokenSelection", selectedWallet: wallet });
+    };
+    const handleConnectWallet = async () => {
+        setCurrentStep({ type: "walletConnection" });
+    };
+    const handleFiatSelected = () => {
+        setCurrentStep({ type: "fiatProviderSelection" });
+    };
+    const handleBackToWalletSelection = () => {
+        setCurrentStep({ type: "walletSelection" });
+    };
+    const handleOnrampProviderSelected = (provider) => {
+        if (!payerWallet) {
+            onError(new Error("No wallet available for fiat payment"));
+            return;
+        }
+        const fiatPaymentMethod = {
+            type: "fiat",
+            payerWallet,
+            currency: "USD", // Default to USD for now
+            onramp: provider,
+        };
+        handlePaymentMethodSelected(fiatPaymentMethod);
+    };
+    const getStepTitle = () => {
+        switch (currentStep.type) {
+            case "walletSelection":
+                return "Choose Payment Method";
+            case "tokenSelection":
+                return "Select Token";
+            case "fiatProviderSelection":
+                return "Select Payment Provider";
+            case "walletConnection":
+                return "Connect Wallet";
+        }
+    };
+    const getBackHandler = () => {
+        switch (currentStep.type) {
+            case "walletSelection":
+                return onBack;
+            case "tokenSelection":
+            case "fiatProviderSelection":
+            case "walletConnection":
+                return handleBackToWalletSelection;
+        }
+    };
+    // Handle rendering WalletSwitcherConnectionScreen
+    if (currentStep.type === "walletConnection") {
+        const destinationChain = destinationToken
+            ? (0, utils_js_1.defineChain)(destinationToken.chainId)
+            : undefined;
+        const chains = destinationChain
+            ? [destinationChain, ...(connectOptions?.chains || [])]
+            : connectOptions?.chains;
+        return ((0, jsx_runtime_1.jsx)(WalletSwitcherConnectionScreen_js_1.WalletSwitcherConnectionScreen, { accountAbstraction: connectOptions?.accountAbstraction, appMetadata: connectOptions?.appMetadata, chain: destinationChain || connectOptions?.chain, chains: chains, client: client, connectLocale: connectLocale, isEmbed: false, onBack: handleBackToWalletSelection, onSelect: handleWalletSelected, hiddenWallets: [], recommendedWallets: connectOptions?.recommendedWallets, showAllWallets: connectOptions?.showAllWallets === undefined
+                ? true
+                : connectOptions?.showAllWallets, walletConnect: connectOptions?.walletConnect, wallets: connectOptions?.wallets?.filter((w) => w.id !== "inApp") }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", p: "lg", children: [(0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { title: getStepTitle(), onBack: getBackHandler() }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", children: [currentStep.type === "walletSelection" && ((0, jsx_runtime_1.jsx)(WalletFiatSelection_js_1.WalletFiatSelection, { connectedWallets: connectedWallets, client: client, onWalletSelected: handleWalletSelected, onFiatSelected: handleFiatSelected, onConnectWallet: handleConnectWallet })), currentStep.type === "tokenSelection" && ((0, jsx_runtime_1.jsx)(TokenSelection_js_1.TokenSelection, { paymentMethods: paymentMethods, paymentMethodsLoading: paymentMethodsLoading, client: client, onPaymentMethodSelected: handlePaymentMethodSelected, onBack: handleBackToWalletSelection, destinationToken: destinationToken, destinationAmount: (0, units_js_1.toUnits)(destinationAmount, destinationToken.decimals) })), currentStep.type === "fiatProviderSelection" && ((0, jsx_runtime_1.jsx)(FiatProviderSelection_js_1.FiatProviderSelection, { client: client, onProviderSelected: handleOnrampProviderSelected, toChainId: destinationToken.chainId, toTokenAddress: destinationToken.address, toAddress: receiverAddress || "", toAmount: destinationAmount }))] })] }));
+}
+//# sourceMappingURL=PaymentSelection.js.map

package/dist/cjs/react/web/ui/Bridge/payment-selection/PaymentSelection.js.map

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

package/dist/cjs/react/web/ui/Bridge/payment-selection/TokenSelection.js

@@ -0,0 +1,71 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenSelection = TokenSelection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CustomThemeProvider_js_1 = require("../../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../../core/design-system/index.js");
+const useBridgeQuote_js_1 = require("../../../../core/hooks/useBridgeQuote.js");
+const formatTokenBalance_js_1 = require("../../ConnectWallet/screens/formatTokenBalance.js");
+const Skeleton_js_1 = require("../../components/Skeleton.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");
+function PaymentMethodTokenRow({ paymentMethod, destinationToken, destinationAmount, client, onPaymentMethodSelected, }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    // Fetch individual quote for this specific token pair
+    const { data: quote, isLoading: quoteLoading, error: quoteError, } = (0, useBridgeQuote_js_1.useBridgeQuote)({
+        originToken: paymentMethod.originToken,
+        destinationToken,
+        destinationAmount,
+        client,
+    });
+    // Use the fetched originAmount if available, otherwise fall back to the one from paymentMethod
+    const displayOriginAmount = quote?.originAmount;
+    const hasEnoughBalance = displayOriginAmount
+        ? paymentMethod.balance >= displayOriginAmount
+        : false;
+    return ((0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "secondary", fullWidth: true, onClick: () => onPaymentMethodSelected(paymentMethod), disabled: !hasEnoughBalance, style: {
+            border: `1px solid ${theme.colors.borderColor}`,
+            borderRadius: index_js_1.radius.md,
+            padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+            backgroundColor: theme.colors.tertiaryBg,
+            opacity: hasEnoughBalance ? 1 : 0.5,
+            textAlign: "left",
+        }, children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "md", style: { width: "100%", alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(TokenAndChain_js_1.TokenAndChain, { token: paymentMethod.originToken, client: client, size: "lg", style: {
+                        maxWidth: "50%",
+                    } }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "3xs", style: { flex: 1, alignItems: "flex-end" }, children: [quoteLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { width: "80px", height: "16px" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "3xs", children: [(0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { width: "50px", height: "12px" }), (0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { width: "40px", height: "12px" })] })] })) : quoteError ? ((0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "danger", style: { fontWeight: 600 }, children: "Quote failed" })) : displayOriginAmount ? ((0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "sm", color: "primaryText", style: { fontWeight: 600, textWrap: "nowrap" }, children: [(0, formatTokenBalance_js_1.formatTokenAmount)(displayOriginAmount, paymentMethod.originToken.decimals), " ", paymentMethod.originToken.symbol] })) : ("--.--"), !quoteLoading && ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "3xs", children: [(0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "xs", color: "secondaryText", children: ["Balance:", " "] }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", color: !quoteLoading
+                                        ? hasEnoughBalance
+                                            ? "success"
+                                            : "danger"
+                                        : "secondaryText", children: (0, formatTokenBalance_js_1.formatTokenAmount)(paymentMethod.balance, paymentMethod.originToken.decimals) })] }))] })] }) }, `${paymentMethod.originToken.address}-${paymentMethod.originToken.chainId}`));
+}
+function TokenSelection({ paymentMethods, paymentMethodsLoading, client, onPaymentMethodSelected, onBack, destinationToken, destinationAmount, }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    if (paymentMethodsLoading) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", children: "Loading your tokens" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "sm", children: [1, 2, 3].map((i) => ((0, jsx_runtime_1.jsx)(basic_js_1.Container, { style: {
+                            border: `1px solid ${theme.colors.borderColor}`,
+                            borderRadius: index_js_1.radius.md,
+                            padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                            backgroundColor: theme.colors.tertiaryBg,
+                        }, children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "md", style: { width: "100%", alignItems: "center" }, children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "sm", center: "y", style: { maxWidth: "50%" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                width: "32px",
+                                                height: "32px",
+                                                backgroundColor: theme.colors.skeletonBg,
+                                                borderRadius: "50%",
+                                            } }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "3xs", children: [(0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { width: "60px", height: "14px" }), (0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { width: "40px", height: "12px" })] })] }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "3xs", style: { flex: 1, alignItems: "flex-end" }, children: [(0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { width: "80px", height: "16px" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "3xs", children: [(0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { width: "50px", height: "12px" }), (0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { width: "40px", height: "12px" })] })] })] }) }, i))) })] }));
+    }
+    if (paymentMethods.length === 0) {
+        return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", center: "both", style: { minHeight: "250px" }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", center: true, children: "No available tokens found for this wallet" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", center: true, children: "Try connecting a different wallet or pay with card" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "primary", onClick: onBack, children: "Select another payment method" })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", children: "Select payment token" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "sm", style: {
+                    maxHeight: "400px",
+                    overflowY: "auto",
+                    scrollbarWidth: "none",
+                }, children: paymentMethods
+                    .filter((method) => method.type === "wallet")
+                    .map((method) => ((0, jsx_runtime_1.jsx)(PaymentMethodTokenRow, { paymentMethod: method, destinationToken: destinationToken, destinationAmount: destinationAmount, client: client, onPaymentMethodSelected: onPaymentMethodSelected }, `${method.originToken.address}-${method.originToken.chainId}`))) })] }));
+}
+//# sourceMappingURL=TokenSelection.js.map

package/dist/cjs/react/web/ui/Bridge/payment-selection/TokenSelection.js.map

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

package/dist/cjs/react/web/ui/Bridge/payment-selection/WalletFiatSelection.js

@@ -0,0 +1,54 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WalletFiatSelection = WalletFiatSelection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_icons_1 = require("@radix-ui/react-icons");
+const CustomThemeProvider_js_1 = require("../../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../../core/design-system/index.js");
+const CreditCardIcon_js_1 = require("../../ConnectWallet/icons/CreditCardIcon.js");
+const WalletRow_js_1 = require("../../ConnectWallet/screens/Buy/swap/WalletRow.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");
+function WalletFiatSelection({ connectedWallets, client, onWalletSelected, onFiatSelected, onConnectWallet, }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", children: "Pay with Crypto" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), connectedWallets.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "sm", children: connectedWallets.map((wallet) => {
+                            const account = wallet.getAccount();
+                            if (!account?.address) {
+                                return null;
+                            }
+                            return ((0, jsx_runtime_1.jsxs)(buttons_js_1.Button, { variant: "secondary", fullWidth: true, onClick: () => onWalletSelected(wallet), style: {
+                                    border: `1px solid ${theme.colors.borderColor}`,
+                                    borderRadius: index_js_1.radius.md,
+                                    padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                                    backgroundColor: theme.colors.tertiaryBg,
+                                    justifyContent: "space-between",
+                                }, children: [(0, jsx_runtime_1.jsx)(WalletRow_js_1.WalletRow, { client: client, address: account?.address, iconSize: "lg", textSize: "sm" }), (0, jsx_runtime_1.jsx)(react_icons_1.ChevronRightIcon, { style: { width: index_js_1.iconSize.md, height: index_js_1.iconSize.md } })] }, wallet.id));
+                        }) }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" })] })), (0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "secondary", fullWidth: true, onClick: onConnectWallet, style: {
+                    border: `1px solid ${theme.colors.borderColor}`,
+                    borderRadius: index_js_1.radius.md,
+                    padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                    backgroundColor: theme.colors.tertiaryBg,
+                    textAlign: "left",
+                    height: "auto",
+                }, children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "md", style: { width: "100%", alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { style: {
+                                borderRadius: index_js_1.radius.sm,
+                                border: `1px dashed ${theme.colors.secondaryIconColor}`,
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                padding: index_js_1.spacing["4xs"],
+                                width: index_js_1.iconSize.lg,
+                                height: index_js_1.iconSize.lg,
+                            }, children: (0, jsx_runtime_1.jsx)(react_icons_1.PlusIcon, { width: index_js_1.iconSize.md, height: index_js_1.iconSize.md, color: theme.colors.secondaryText }) }), (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", style: { fontWeight: 600 }, children: "Connect Another Wallet" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", color: "secondaryText", children: "Use a different wallet to pay" })] })] }) }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", children: "Pay with Fiat" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "secondary", fullWidth: true, onClick: onFiatSelected, style: {
+                    border: `1px solid ${theme.colors.borderColor}`,
+                    borderRadius: index_js_1.radius.md,
+                    padding: `${index_js_1.spacing.sm} ${index_js_1.spacing.md}`,
+                    backgroundColor: theme.colors.tertiaryBg,
+                    textAlign: "left",
+                    height: "auto",
+                }, children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "md", style: { width: "100%", alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(CreditCardIcon_js_1.CreditCardIcon, { size: index_js_1.iconSize.lg, color: theme.colors.secondaryIconColor }), (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", style: { fontWeight: 600 }, children: "Pay with Card" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", color: "secondaryText", children: "Buy crypto and bridge in one step" })] })] }) })] }));
+}
+//# sourceMappingURL=WalletFiatSelection.js.map

package/dist/cjs/react/web/ui/Bridge/payment-selection/WalletFiatSelection.js.map

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

package/dist/cjs/react/web/ui/Bridge/payment-success/PaymentReceipt.js

@@ -0,0 +1,140 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaymentReceipt = PaymentReceipt;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_icons_1 = require("@radix-ui/react-icons");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const utils_js_1 = require("../../../../../chains/utils.js");
+const address_js_1 = require("../../../../../utils/address.js");
+const url_js_1 = require("../../../../../utils/url.js");
+const CustomThemeProvider_js_1 = require("../../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../../core/design-system/index.js");
+const formatTokenBalance_js_1 = require("../../ConnectWallet/screens/formatTokenBalance.js");
+const ChainName_js_1 = require("../../components/ChainName.js");
+const Skeleton_js_1 = require("../../components/Skeleton.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");
+function getPaymentId(preparedQuote, status) {
+    if (preparedQuote.type === "onramp") {
+        return preparedQuote.id;
+    }
+    return status.transactions[status.transactions.length - 1]?.transactionHash;
+}
+/**
+ * Hook to fetch transaction info for a completed status
+ */
+function useTransactionInfo(status, preparedQuote) {
+    return (0, react_query_1.useQuery)({
+        queryKey: [
+            "transaction-info",
+            status.type,
+            getPaymentId(preparedQuote, status),
+        ],
+        queryFn: async () => {
+            const isOnramp = status.type === "onramp";
+            if (isOnramp && preparedQuote.type === "onramp") {
+                // For onramp, create a display ID since OnrampStatus doesn't have paymentId
+                return {
+                    type: "paymentId",
+                    id: preparedQuote.id,
+                    label: "Onramp Payment",
+                    destinationToken: preparedQuote.destinationToken,
+                    chain: await (0, utils_js_1.getChainMetadata)((0, utils_js_1.defineChain)(preparedQuote.destinationToken.chainId)),
+                    amountPaid: `${preparedQuote.currencyAmount} ${preparedQuote.currency}`,
+                    amountReceived: `${(0, formatTokenBalance_js_1.formatTokenAmount)(preparedQuote.destinationAmount, preparedQuote.destinationToken.decimals)} ${preparedQuote.destinationToken.symbol}`,
+                };
+            }
+            else if (status.type === "buy" ||
+                status.type === "sell" ||
+                status.type === "transfer") {
+                if (status.transactions.length > 0) {
+                    // get the last transaction hash
+                    const tx = status.transactions[status.transactions.length - 1];
+                    if (tx) {
+                        const [destinationChain, originChain] = await Promise.all([
+                            (0, utils_js_1.getChainMetadata)((0, utils_js_1.getCachedChain)(status.destinationToken.chainId)),
+                            (0, utils_js_1.getChainMetadata)((0, utils_js_1.getCachedChain)(status.originToken.chainId)),
+                        ]);
+                        return {
+                            type: "transactionHash",
+                            id: tx.transactionHash,
+                            label: "Transaction",
+                            chain: destinationChain,
+                            originToken: status.originToken,
+                            originChain,
+                            destinationToken: status.destinationToken,
+                            amountReceived: `${(0, formatTokenBalance_js_1.formatTokenAmount)(status.destinationAmount, status.destinationToken.decimals)} ${status.destinationToken.symbol}`,
+                            amountPaid: `${(0, formatTokenBalance_js_1.formatTokenAmount)(status.originAmount, status.originToken.decimals)} ${status.originToken.symbol}`,
+                        };
+                    }
+                }
+            }
+            return null;
+        },
+        enabled: true,
+        staleTime: 5 * 60 * 1000, // 5 minutes
+    });
+}
+/**
+ * Component to display details for a completed transaction step
+ */
+function CompletedStepDetailCard({ status, preparedQuote, windowAdapter, onCopyToClipboard, }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    const { data: txInfo, isLoading } = useTransactionInfo(status, preparedQuote);
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "sm", style: {
+                padding: index_js_1.spacing.md,
+                borderRadius: index_js_1.radius.sm,
+                backgroundColor: theme.colors.tertiaryBg,
+                border: `1px solid ${theme.colors.borderColor}`,
+            }, children: [(0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { height: "30px" }), (0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { height: "30px" }), (0, jsx_runtime_1.jsx)(Skeleton_js_1.Skeleton, { height: "30px" })] }));
+    }
+    if (!txInfo) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "sm", style: {
+            padding: index_js_1.spacing.md,
+            borderRadius: index_js_1.radius.sm,
+            backgroundColor: theme.colors.tertiaryBg,
+            border: `1px solid ${theme.colors.borderColor}`,
+        }, children: [(0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "sm", style: {
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", children: txInfo.label }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { style: {
+                            padding: `${index_js_1.spacing["3xs"]} ${index_js_1.spacing.xs}`,
+                            borderRadius: index_js_1.radius.sm,
+                            backgroundColor: theme.colors.success,
+                        }, children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xs", style: { color: theme.colors.primaryButtonText }, children: "COMPLETED" }) })] }), txInfo.amountPaid && ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", style: { justifyContent: "space-between" }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Amount Paid" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", children: txInfo.amountPaid })] })), txInfo.originChain && ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", style: { justifyContent: "space-between" }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Origin Chain" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", children: (0, ChainName_js_1.shorterChainName)(txInfo.chain.name) })] })), txInfo.amountReceived && ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", style: { justifyContent: "space-between" }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Amount Received" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", children: txInfo.amountReceived })] })), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", style: { justifyContent: "space-between" }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: "Chain" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "primaryText", children: (0, ChainName_js_1.shorterChainName)(txInfo.chain.name) })] }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", style: { justifyContent: "space-between" }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", children: txInfo.type === "paymentId" ? "Payment ID" : "Transaction Hash" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "sm", style: { alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "accentText", style: {
+                                    fontFamily: "monospace",
+                                    cursor: "pointer",
+                                }, onClick: txInfo.type === "paymentId"
+                                    ? () => onCopyToClipboard(txInfo.id)
+                                    : () => {
+                                        const explorer = txInfo.chain.explorers?.[0];
+                                        if (explorer) {
+                                            windowAdapter.open((0, url_js_1.formatExplorerTxUrl)(explorer.url, txInfo.id));
+                                        }
+                                    }, children: (0, address_js_1.shortenHex)(txInfo.id) }), txInfo.type === "paymentId" ? ((0, jsx_runtime_1.jsx)("button", { type: "button", style: {
+                                    cursor: "pointer",
+                                    background: "none",
+                                    border: "none",
+                                    padding: 0,
+                                }, onClick: () => onCopyToClipboard(txInfo.id), children: (0, jsx_runtime_1.jsx)(react_icons_1.CopyIcon, { width: index_js_1.iconSize.sm, height: index_js_1.iconSize.sm, color: theme.colors.primaryText }) })) : null] })] })] }, txInfo.id));
+}
+function PaymentReceipt({ preparedQuote, completedStatuses, onBack, windowAdapter, }) {
+    // Copy to clipboard
+    const copyToClipboard = (0, react_1.useCallback)(async (text) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            // Could add a toast notification here
+        }
+        catch (error) {
+            console.warn("Failed to copy to clipboard:", error);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", fullHeight: true, p: "lg", style: { maxHeight: "500px", minHeight: "250px", overflowY: "auto" }, children: [(0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { title: "Payment Receipt", onBack: onBack }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "lg", children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "md", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "md", color: "primaryText", children: "Transactions" }), completedStatuses.map((status, index) => ((0, jsx_runtime_1.jsx)(CompletedStepDetailCard, { status: status, preparedQuote: preparedQuote, windowAdapter: windowAdapter, onCopyToClipboard: copyToClipboard }, `${status.type}-${index}`)))] }) })] }));
+}
+//# sourceMappingURL=PaymentReceipt.js.map

package/dist/cjs/react/web/ui/Bridge/payment-success/PaymentReceipt.js.map

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

package/dist/cjs/react/web/ui/Bridge/payment-success/SuccessScreen.js

@@ -0,0 +1,61 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuccessScreen = SuccessScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_icons_1 = require("@radix-ui/react-icons");
+const react_1 = require("react");
+const CustomThemeProvider_js_1 = require("../../../../core/design-system/CustomThemeProvider.js");
+const index_js_1 = require("../../../../core/design-system/index.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 PaymentReceipt_js_1 = require("./PaymentReceipt.js");
+function SuccessScreen({ uiOptions, preparedQuote, completedStatuses, onDone, windowAdapter, }) {
+    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
+    const [viewState, setViewState] = (0, react_1.useState)("success");
+    if (viewState === "detail") {
+        return ((0, jsx_runtime_1.jsx)(PaymentReceipt_js_1.PaymentReceipt, { preparedQuote: preparedQuote, completedStatuses: completedStatuses, windowAdapter: windowAdapter, onBack: () => setViewState("success") }));
+    }
+    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: "Payment Complete" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "md", center: "x", children: [(0, jsx_runtime_1.jsx)(basic_js_1.Container, { center: "both", flex: "row", style: {
+                            width: "64px",
+                            height: "64px",
+                            borderRadius: "50%",
+                            backgroundColor: theme.colors.tertiaryBg,
+                            marginBottom: "16px",
+                            border: `2px solid ${theme.colors.success}`,
+                            animation: "successBounce 0.6s ease-out",
+                        }, children: (0, jsx_runtime_1.jsx)(react_icons_1.CheckIcon, { width: index_js_1.iconSize.xl, height: index_js_1.iconSize.xl, color: theme.colors.success, style: {
+                                animation: "checkAppear 0.3s ease-out 0.3s both",
+                            } }) }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "xl", color: "primaryText", center: true, children: "Payment Successful!" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { size: "sm", color: "secondaryText", center: true, children: "Your cross-chain payment has been completed successfully." })] }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "column", gap: "sm", style: { width: "100%" }, children: [(0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "secondary", fullWidth: true, onClick: () => setViewState("detail"), children: "View Payment Receipt" }), (0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "accent", fullWidth: true, onClick: onDone, children: uiOptions.mode === "transaction" ? "Continue" : "Done" })] }), (0, jsx_runtime_1.jsx)("style", { children: `
+          @keyframes successBounce {
+            0% {
+              transform: scale(0.3);
+              opacity: 0;
+            }
+            50% {
+              transform: scale(1.05);
+            }
+            70% {
+              transform: scale(0.9);
+            }
+            100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+          }
+
+          @keyframes checkAppear {
+            0% {
+              transform: scale(0);
+              opacity: 0;
+            }
+            100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+          }
+        ` })] }));
+}
+//# sourceMappingURL=SuccessScreen.js.map

package/dist/cjs/react/web/ui/Bridge/payment-success/SuccessScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuccessScreen.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AA2Cb,sCA+GC;;AAzJD,uDAAkD;AAClD,iCAAiC;AAEjC,kGAAuF;AACvF,sEAAmE;AAGnE,0DAAoD;AACpD,wDAAmE;AACnE,4DAAqD;AACrD,sDAAgD;AAEhD,2DAAqD;AA8BrD,SAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,MAAM,EACN,aAAa,GACM;IACnB,MAAM,KAAK,GAAG,IAAA,uCAAc,GAAE,CAAC;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAY,SAAS,CAAC,CAAC;IAEjE,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,CACL,uBAAC,kCAAc,IACb,aAAa,EAAE,aAAa,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,GACrC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,wBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,UAAU,QAAC,CAAC,EAAC,IAAI,aACxC,uBAAC,sBAAW,IAAC,KAAK,EAAC,kBAAkB,GAAG,EAExC,uBAAC,kBAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAEjB,wBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,aAE1C,uBAAC,oBAAS,IACR,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,KAAK,EACV,KAAK,EAAE;4BACL,KAAK,EAAE,MAAM;4BACb,MAAM,EAAE,MAAM;4BACd,YAAY,EAAE,KAAK;4BACnB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;4BACxC,YAAY,EAAE,MAAM;4BACpB,MAAM,EAAE,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;4BAC3C,SAAS,EAAE,6BAA6B;yBACzC,YAED,uBAAC,uBAAS,IACR,KAAK,EAAE,mBAAQ,CAAC,EAAE,EAClB,MAAM,EAAE,mBAAQ,CAAC,EAAE,EACnB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAC3B,KAAK,EAAE;gCACL,SAAS,EAAE,qCAAqC;6BACjD,GACD,GACQ,EAEZ,uBAAC,cAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,EAAC,MAAM,0CAEnC,EAEP,uBAAC,cAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,EAAC,MAAM,gFAErC,IACG,EACZ,uBAAC,kBAAM,IAAC,CAAC,EAAC,IAAI,GAAG,EAGjB,wBAAC,oBAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aACxD,uBAAC,mBAAM,IACL,OAAO,EAAC,WAAW,EACnB,SAAS,QACT,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,qCAG9B,EAET,uBAAC,mBAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,QAAC,OAAO,EAAE,MAAM,YAC/C,SAAS,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,GAChD,IACC,EAGZ,4CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA4BA,GACK,IACE,CACb,CAAC;AACJ,CAAC"}

package/dist/cjs/react/web/ui/ConnectWallet/WalletSelector.js

@@ -224,8 +224,8 @@ const ButtonContainer = /* @__PURE__ */ (0, elements_js_1.StyledDiv)(() => {
 const ShowAllWalletsIcon = /* @__PURE__ */ (0, elements_js_1.StyledDiv)(() => {
     const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
     return {
-        width: `${index_js_1.iconSize.xl}px`,
-        height: `${index_js_1.iconSize.xl}px`,
+        width: `${index_js_1.iconSize.lg}px`,
+        height: `${index_js_1.iconSize.lg}px`,
         backgroundColor: theme.colors.tertiaryBg,
         border: `2px solid ${theme.colors.borderColor}`,
         borderRadius: index_js_1.radius.md,

package/dist/cjs/react/web/ui/ConnectWallet/constants.js

@@ -8,7 +8,7 @@ exports.reservedScreens = {
     signIn: "signIn",
     showAll: "showAll",
 };
-exports.modalMaxWidthCompact = "360px";
+exports.modalMaxWidthCompact = "400px";
 const wideModalWidth = 730;
 exports.modalMaxWidthWide = `${wideModalWidth}px`;
 exports.wideModalScreenThreshold = wideModalWidth + 40;

package/dist/cjs/react/web/ui/ConnectWallet/icons/CreditCardIcon.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreditCardIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @internal
+ */
+const CreditCardIcon = (props) => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size, height: props.size, viewBox: "0 0 24 24", fill: "none", stroke: props.color ?? "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", role: "presentation", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "2", x2: "22", y1: "10", y2: "10" })] }));
+};
+exports.CreditCardIcon = CreditCardIcon;
+//# sourceMappingURL=CreditCardIcon.js.map

package/dist/cjs/react/web/ui/ConnectWallet/icons/CreditCardIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCardIcon.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/icons/CreditCardIcon.tsx"],"names":[],"mappings":";;;;AAEA;;GAEG;AACI,MAAM,cAAc,GAAW,CAAC,KAAK,EAAE,EAAE;IAC9C,OAAO,CACL,iCACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,KAAK,CAAC,IAAI,EACjB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI,cAAc,EACrC,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAC,cAAc,aAEnB,iCAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,GAAG,EAClD,iCAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,IACnC,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,cAAc,kBAkBzB"}