@mintmoney/react 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/esm/checkout/views/crypto-intent/wallet-payment-options.js

@@ -0,0 +1,680 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { keyframes, styled } from "styled-components";
+import { confirmPayment } from "../../../api/payments.js";
+import { PaymentStatus } from "../../../api/types.js";
+import { StyledButton, Text, useModalWithView, } from "../../../components/index.js";
+import { WalletContext } from "../../../components/wallet-selector/provider.js";
+import { useMintMoneyConfig } from "../../../context.js";
+import { executeWalletPaymentOption, fetchWalletPaymentQuote, findWalletPaymentOptions, } from "../../../integrations/index.js";
+import { createWalletOptionPaymentAttempt, executeConnectedWalletPayment, resetWalletPaymentState, setProcessing, setSelectedCurrency, setWalletPaymentState, startPaymentPolling, stopPaymentPolling, useCheckoutStore, } from "../../../state/checkout/store.js";
+import { ModalViewContainer } from "../../container.js";
+import { ModalBackButton } from "../back.js";
+import { resolveWalletPaymentConfirmationAmount } from "./wallet-payment-confirmation-amount.js";
+const OptionsContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: min(360px, 48vh);
+  overflow-y: auto;
+  padding-right: 4px;
+  overscroll-behavior: contain;
+`;
+const OptionCard = styled.div `
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  padding: 14px;
+  background: #ffffff;
+  cursor: pointer;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    transform 120ms ease;
+
+  &:hover {
+    border-color: #cbd5e1;
+    transform: translateY(-1px);
+  }
+`;
+const OptionHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+`;
+const OptionHeaderLeft = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+`;
+const TokenIconWrap = styled.div `
+  position: relative;
+  width: 38px;
+  height: 38px;
+  flex-shrink: 0;
+`;
+const TokenIcon = styled.div `
+  width: 100%;
+  height: 100%;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  color: ${({ $token }) => ($token === "ETH" ? "#ffffff" : "#1d4ed8")};
+  background: ${({ $token }) => $token === "ETH"
+    ? "linear-gradient(135deg, #64748b, #0f172a)"
+    : "linear-gradient(135deg, #dbeafe, #bfdbfe)"};
+  background-image: ${({ $iconUrl }) => $iconUrl ? `url(${$iconUrl})` : "none"};
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+`;
+const ChainBadge = styled.div `
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 1.5px solid #ffffff;
+  background: #ffffff;
+  background-image: ${({ $iconUrl }) => $iconUrl ? `url(${$iconUrl})` : "none"};
+  background-size: 85%;
+  background-position: center;
+  background-repeat: no-repeat;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
+  overflow: hidden;
+`;
+const OptionIdentity = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+`;
+const OptionBalance = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  flex-shrink: 0;
+`;
+const OptionsHeaderRow = styled.div `
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+`;
+const OptionsHeaderLabel = styled.div `
+  font-size: 11px;
+  line-height: 1;
+  color: #64748b;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  white-space: nowrap;
+  padding-right: 8px;
+`;
+const FastBadge = styled.span `
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  gap: 4px;
+  background: #ecfdf5;
+  color: #047857;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 6px 9px;
+  white-space: nowrap;
+`;
+const EmptyState = styled.div `
+  border: 1px dashed #d1d5db;
+  border-radius: 16px;
+  padding: 18px;
+  text-align: center;
+  background: #f9fafb;
+`;
+const confirmTrayEnter = keyframes `
+  from {
+    opacity: 0;
+    transform: perspective(1000px) rotateY(-86deg) scale(0.96);
+    transform-origin: center;
+  }
+  to {
+    opacity: 1;
+    opacity: 1;
+    transform: perspective(1000px) rotateY(0deg) scale(1);
+  }
+`;
+const ConfirmScreen = styled.div `
+  margin-top: 8px;
+  border: 1px solid #b7efd1;
+  border-radius: 22px;
+  padding: 18px 16px 16px;
+  background: linear-gradient(180deg, #ecfdf5 0%, #dcfce7 100%);
+  box-shadow: 0 14px 30px rgba(16, 185, 129, 0.12);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  animation: ${confirmTrayEnter} 220ms cubic-bezier(0.22, 1, 0.36, 1);
+`;
+const ConfirmMeta = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+`;
+const ConfirmAmount = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+const ConfirmTextBlock = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+const ConfirmActions = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+const QuoteBlock = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+const QuoteRow = styled.div `
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+`;
+const ContentStage = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+`;
+const buildDefaultOption = (context) => ({
+    id: "direct-settlement",
+    label: `${context.settlementCurrency.asset_name} on ${context.settlementCurrency.chain_name}`,
+    subtitle: "Fastest Route. You can pay directly without needing to swap.",
+    badge: "Fastest",
+    fromChain: context.settlementCurrency.chain,
+    fromChainName: context.settlementCurrency.chain_name,
+    fromToken: context.settlementCurrency.asset,
+    fromTokenName: context.settlementCurrency.asset_name,
+    fromAmount: null,
+    quoteId: null,
+    routeId: null,
+    kind: "direct",
+});
+const formatDisplayAmount = (amount, maximumFractionDigits = 4) => {
+    if (!amount)
+        return null;
+    const parsed = Number(amount);
+    if (!Number.isFinite(parsed))
+        return amount;
+    if (parsed >= 1000)
+        return parsed.toLocaleString(undefined, { maximumFractionDigits: 2 });
+    if (parsed >= 1) {
+        return parsed.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        });
+    }
+    if (parsed >= 0.01) {
+        return parsed.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits,
+        });
+    }
+    return parsed.toLocaleString(undefined, {
+        minimumFractionDigits: 4,
+        maximumFractionDigits,
+    });
+};
+const formatTokenBalance = (tokenName, amount) => {
+    const isEth = tokenName.toUpperCase() === "ETH";
+    const formatted = formatDisplayAmount(amount, isEth ? 8 : 4);
+    if (!formatted)
+        return null;
+    if (tokenName.toLowerCase().includes("usd"))
+        return `$${formatted}`;
+    if (isEth)
+        return `ETH ${formatted}`;
+    return formatted;
+};
+const formatMoneyAmount = (currency, amount) => {
+    try {
+        return new Intl.NumberFormat(undefined, {
+            style: "currency",
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(amount);
+    }
+    catch {
+        return `${currency} ${amount.toFixed(2)}`;
+    }
+};
+const getTokenMonogram = (tokenName, tokenSymbol) => {
+    if (tokenSymbol)
+        return tokenSymbol.slice(0, 2).toUpperCase();
+    return tokenName.slice(0, 2).toUpperCase();
+};
+const buildDirectQuote = (option, context) => {
+    const amount = String(context.cryptoPaymentAttempt.amount_formatted);
+    const formattedAmount = formatDisplayAmount(amount) ?? amount;
+    const amountDisplay = formatTokenBalance(option.fromTokenSymbol ?? option.fromTokenName, formattedAmount) ?? formattedAmount;
+    return {
+        quoteId: option.quoteId,
+        routeId: option.routeId,
+        toolName: "Direct transfer",
+        fromAmount: amount,
+        fromAmountDisplay: amountDisplay,
+        toAmount: amount,
+        toAmountDisplay: amountDisplay,
+        estimatedDurationMinutes: 1,
+    };
+};
+const PAYMENT_QUOTE_EXPIRED_MESSAGE = "This payment quote has expired. Please create a new payment.";
+const PAYMENT_NO_LONGER_PAYABLE_MESSAGE = "This payment is no longer payable. Please create a new payment.";
+const parseExpiryTime = (value) => {
+    if (!value)
+        return null;
+    const parsed = Date.parse(value);
+    return Number.isFinite(parsed) ? parsed : null;
+};
+const getActiveAttemptExpiryTime = (payment, attempt) => {
+    return parseExpiryTime(attempt?.expires_at ?? payment?.expires_at);
+};
+const hasExpiredAttempt = (payment, attempt) => {
+    const expiryTime = getActiveAttemptExpiryTime(payment, attempt);
+    return expiryTime !== null && Date.now() >= expiryTime;
+};
+const CryptoIntentWalletPaymentOptionsViewContent = () => {
+    const modalRef = useRef(null);
+    const { goToView } = useModalWithView();
+    const config = useMintMoneyConfig();
+    const { wallet } = useContext(WalletContext);
+    const { payment, cryptoPaymentAttempt, cryptoCurrency, walletPayment, loading, processing, } = useCheckoutStore();
+    const [executingId, setExecutingId] = useState(null);
+    const buildContext = useCallback(async (currentPayment) => {
+        const state = useCheckoutStore.getState();
+        const currentCheckout = state.checkout;
+        const currentCryptoCurrency = state.cryptoCurrency;
+        if (!currentCheckout || !currentCryptoCurrency || !wallet) {
+            throw new Error("Wallet payment context is not ready");
+        }
+        const resolvedPayment = currentPayment ?? state.payment;
+        if (!resolvedPayment) {
+            throw new Error("Missing payment");
+        }
+        const walletAddress = await wallet.getAddress();
+        if (!walletAddress) {
+            throw new Error("Failed to get wallet address");
+        }
+        return {
+            checkout: currentCheckout,
+            payment: resolvedPayment,
+            settlementCurrency: currentCryptoCurrency,
+            walletAddress,
+        };
+    }, [wallet]);
+    useEffect(() => {
+        if (!wallet || !cryptoCurrency) {
+            goToView("failed", { reason: "wallet_not_connected" });
+            return;
+        }
+        let cancelled = false;
+        const loadOptions = async () => {
+            try {
+                setProcessing(true);
+                setSelectedCurrency(cryptoCurrency);
+                resetWalletPaymentState();
+                setWalletPaymentState({ status: "loading", error: null, options: [] });
+                const preparedContext = await buildContext();
+                const providerOptions = await findWalletPaymentOptions(preparedContext);
+                const options = providerOptions.length > 0
+                    ? providerOptions
+                    : [buildDefaultOption(preparedContext)];
+                if (cancelled)
+                    return;
+                setWalletPaymentState({
+                    status: "ready",
+                    options,
+                    selectedOptionId: null,
+                    error: null,
+                });
+            }
+            catch (error) {
+                if (cancelled)
+                    return;
+                const message = error instanceof Error
+                    ? error.message
+                    : "Failed to load payment options";
+                setWalletPaymentState({
+                    status: "failed",
+                    error: message,
+                    options: [],
+                });
+            }
+            finally {
+                if (!cancelled) {
+                    setProcessing(false);
+                }
+            }
+        };
+        void loadOptions();
+        return () => {
+            cancelled = true;
+        };
+    }, [buildContext, goToView, payment?.id, wallet]);
+    const selectedOption = walletPayment.options.find((option) => option.id === walletPayment.selectedOptionId) ?? null;
+    const confirmationAmount = selectedOption && payment
+        ? resolveWalletPaymentConfirmationAmount({
+            option: selectedOption,
+            quote: walletPayment.quote,
+            attempt: cryptoPaymentAttempt,
+        })
+        : null;
+    const formattedCost = formatMoneyAmount(payment?.currency ?? "USD", Number(payment?.amount ?? 0));
+    useEffect(() => {
+        if (!payment)
+            return;
+        if (payment.status === PaymentStatus.FAILED) {
+            setWalletPaymentState({
+                status: "failed",
+                error: PAYMENT_NO_LONGER_PAYABLE_MESSAGE,
+            });
+            goToView("failed", { reason: PAYMENT_NO_LONGER_PAYABLE_MESSAGE });
+            return;
+        }
+        if (hasExpiredAttempt(payment, cryptoPaymentAttempt ?? payment.payment_attempt)) {
+            setWalletPaymentState({
+                status: "failed",
+                error: PAYMENT_QUOTE_EXPIRED_MESSAGE,
+            });
+            goToView("failed", { reason: PAYMENT_QUOTE_EXPIRED_MESSAGE });
+        }
+    }, [
+        cryptoPaymentAttempt?.expires_at,
+        goToView,
+        payment,
+        payment?.payment_attempt?.expires_at,
+        payment?.status,
+    ]);
+    useEffect(() => {
+        if (!payment?.id)
+            return;
+        const confirmationStatus = config.cryptoCheckoutConfig.paymentConfirmationStatus;
+        const poller = startPaymentPolling((status) => {
+            if (status === PaymentStatus.PAID || status === confirmationStatus) {
+                goToView("paymentSuccess");
+                return;
+            }
+            if (status === PaymentStatus.FAILED) {
+                setWalletPaymentState({
+                    status: "failed",
+                    error: PAYMENT_NO_LONGER_PAYABLE_MESSAGE,
+                });
+                goToView("failed", { reason: PAYMENT_NO_LONGER_PAYABLE_MESSAGE });
+            }
+        }, confirmationStatus);
+        return () => {
+            poller.stop();
+            stopPaymentPolling();
+        };
+    }, [
+        config.cryptoCheckoutConfig.paymentConfirmationStatus,
+        goToView,
+        payment?.id,
+    ]);
+    const handlePickOption = (option) => {
+        setWalletPaymentState({
+            selectedOptionId: option.id,
+            error: null,
+            quoteId: null,
+            routeId: null,
+            quoteStatus: "idle",
+            quote: null,
+            quoteError: null,
+        });
+    };
+    const handleReturnToOptions = () => {
+        setWalletPaymentState({
+            selectedOptionId: null,
+            error: null,
+            quoteStatus: "idle",
+            quote: null,
+            quoteError: null,
+        });
+    };
+    useEffect(() => {
+        if (!selectedOption || !payment?.id || !cryptoCurrency) {
+            return;
+        }
+        let cancelled = false;
+        let refreshTimer = null;
+        const clearRefreshTimer = () => {
+            if (refreshTimer) {
+                clearTimeout(refreshTimer);
+                refreshTimer = null;
+            }
+        };
+        const loadQuote = async () => {
+            clearRefreshTimer();
+            try {
+                const preparedContext = await buildContext();
+                if (hasExpiredAttempt(preparedContext.payment, preparedContext.payment.payment_attempt)) {
+                    throw new Error(PAYMENT_QUOTE_EXPIRED_MESSAGE);
+                }
+                const walletAddress = await wallet?.getAddress();
+                if (!walletAddress) {
+                    throw new Error("Failed to get wallet address");
+                }
+                const ensuredAttempt = await createWalletOptionPaymentAttempt(selectedOption, walletAddress, null);
+                if (hasExpiredAttempt(preparedContext.payment, ensuredAttempt)) {
+                    throw new Error(PAYMENT_QUOTE_EXPIRED_MESSAGE);
+                }
+                const quoteContext = {
+                    ...preparedContext,
+                    cryptoPaymentAttempt: ensuredAttempt,
+                };
+                if (selectedOption.kind === "direct") {
+                    const directQuote = buildDirectQuote(selectedOption, quoteContext);
+                    if (cancelled)
+                        return;
+                    setWalletPaymentState({
+                        quoteStatus: "ready",
+                        quote: directQuote,
+                        quoteId: directQuote.quoteId,
+                        routeId: directQuote.routeId,
+                        quoteError: null,
+                    });
+                    return;
+                }
+                if (!cancelled) {
+                    setWalletPaymentState({
+                        quoteStatus: "loading",
+                        quote: null,
+                        quoteError: null,
+                        quoteId: null,
+                        routeId: null,
+                    });
+                }
+                const quote = await fetchWalletPaymentQuote({
+                    option: selectedOption,
+                    context: quoteContext,
+                });
+                if (cancelled)
+                    return;
+                setWalletPaymentState({
+                    quoteStatus: "ready",
+                    quote,
+                    quoteId: quote.quoteId,
+                    routeId: quote.routeId,
+                    quoteError: null,
+                });
+                const expiryTime = getActiveAttemptExpiryTime(preparedContext.payment, ensuredAttempt);
+                if (expiryTime && expiryTime > Date.now()) {
+                    refreshTimer = setTimeout(() => {
+                        void loadQuote();
+                    }, Math.min(30_000, Math.max(1_000, expiryTime - Date.now())));
+                }
+            }
+            catch (error) {
+                if (cancelled)
+                    return;
+                const message = error instanceof Error ? error.message : "Failed to load route quote";
+                setWalletPaymentState({
+                    quoteStatus: "failed",
+                    quote: null,
+                    quoteError: message,
+                });
+            }
+        };
+        void loadQuote();
+        return () => {
+            cancelled = true;
+            clearRefreshTimer();
+        };
+    }, [buildContext, payment?.id, selectedOption?.id, wallet]);
+    const handleSelectOption = async (option) => {
+        if (!wallet || !payment || !cryptoCurrency) {
+            goToView("failed", { reason: "wallet_not_connected" });
+            return;
+        }
+        try {
+            setExecutingId(option.id);
+            setProcessing(true);
+            setSelectedCurrency(cryptoCurrency);
+            setWalletPaymentState({
+                status: "executing",
+                selectedOptionId: option.id,
+                error: null,
+                quoteId: null,
+                routeId: null,
+            });
+            const walletAddress = await wallet.getAddress();
+            if (!walletAddress) {
+                throw new Error("Failed to get wallet address");
+            }
+            const ensuredAttempt = await createWalletOptionPaymentAttempt(option, walletAddress, option.kind === "direct" ? null : walletPayment.quote);
+            if (hasExpiredAttempt(payment, ensuredAttempt)) {
+                throw new Error(PAYMENT_QUOTE_EXPIRED_MESSAGE);
+            }
+            const preparedContext = {
+                ...(await buildContext(payment)),
+                cryptoPaymentAttempt: ensuredAttempt,
+            };
+            if (option.kind === "direct") {
+                await executeConnectedWalletPayment(wallet);
+                const txHash = useCheckoutStore.getState().transfer.transactionHash;
+                if (!txHash) {
+                    throw new Error("Missing transaction hash for direct wallet payment");
+                }
+                await confirmPayment(payment.id, { txHash });
+                setWalletPaymentState({
+                    status: "submitted",
+                    sourceTxHash: txHash,
+                    destinationTxHash: null,
+                    quoteId: null,
+                    routeId: null,
+                });
+            }
+            else {
+                const freshQuote = await fetchWalletPaymentQuote({
+                    option,
+                    context: preparedContext,
+                });
+                if (!freshQuote.quoteId) {
+                    throw new Error("Missing LI.FI quote id for routed wallet payment");
+                }
+                setWalletPaymentState({
+                    quoteStatus: "ready",
+                    quote: freshQuote,
+                    quoteId: freshQuote.quoteId,
+                    routeId: freshQuote.routeId,
+                    quoteError: null,
+                });
+                const result = await executeWalletPaymentOption({
+                    option,
+                    wallet,
+                    context: preparedContext,
+                    quote: freshQuote,
+                });
+                const confirmationTxHash = result?.destinationTxHash ?? null;
+                if (!confirmationTxHash) {
+                    throw new Error("Missing destination transaction hash for routed wallet payment");
+                }
+                await confirmPayment(payment.id, {
+                    txHash: confirmationTxHash,
+                    lifiQuote: {
+                        quote_id: freshQuote.quoteId,
+                        route_id: freshQuote.routeId ?? null,
+                        route: freshQuote.raw,
+                    },
+                });
+                setWalletPaymentState({
+                    status: "submitted",
+                    sourceTxHash: result?.sourceTxHash ?? null,
+                    destinationTxHash: confirmationTxHash,
+                    quoteId: freshQuote.quoteId,
+                    routeId: freshQuote.routeId,
+                });
+            }
+            goToView("paymentStatus");
+        }
+        catch (error) {
+            const message = error instanceof Error
+                ? error.message
+                : "Failed to execute wallet payment";
+            setWalletPaymentState({
+                status: "failed",
+                error: message,
+            });
+            goToView("failed", { reason: message });
+        }
+        finally {
+            setExecutingId(null);
+            setProcessing(false);
+        }
+    };
+    return (_jsxs(ModalViewContainer, { ref: modalRef, children: [selectedOption ? (_jsx(Text, { size: "base", weight: "semibold", color: config.theme.font.color.primary, children: "Confirm your payment" })) : null, walletPayment.status === "failed" ? (_jsx(EmptyState, { children: _jsx(Text, { size: "sm", color: config.theme.font.color.secondary, children: walletPayment.error ||
+                        "We could not find wallet payment options right now." }) })) : null, walletPayment.status === "loading" ? (_jsx(EmptyState, { children: _jsx(Text, { size: "sm", color: config.theme.font.color.secondary, children: "Checking which tokens you can use..." }) })) : null, walletPayment.status === "ready" ||
+                walletPayment.status === "executing" ? (_jsx(ContentStage, { children: !selectedOption ? (_jsxs(_Fragment, { children: [_jsxs(OptionsHeaderRow, { children: [_jsx(Text, { size: "base", weight: "semibold", color: config.theme.font.color.primary, children: "Choose how you want to pay." }), _jsx(OptionsHeaderLabel, { children: "Your Balance" })] }), _jsx(OptionsContainer, { children: walletPayment.options.map((option) => (_jsx(OptionCard, { onClick: () => handlePickOption(option), role: "button", "aria-pressed": walletPayment.selectedOptionId === option.id, children: _jsxs(OptionHeader, { children: [_jsxs(OptionHeaderLeft, { children: [_jsxs(TokenIconWrap, { children: [_jsx(TokenIcon, { "$token": option.fromTokenName === "ETH" ? "ETH" : "USD", "$iconUrl": option.fromTokenIconUrl, children: !option.fromTokenIconUrl
+                                                                ? getTokenMonogram(option.fromTokenName, option.fromTokenSymbol)
+                                                                : null }), _jsx(ChainBadge, { "$iconUrl": option.fromChainIconUrl, children: !option.fromChainIconUrl
+                                                                ? getTokenMonogram(option.fromChainName)
+                                                                : null })] }), _jsxs(OptionIdentity, { children: [_jsx(Text, { size: "base", weight: "semibold", color: config.theme.font.color.primary, children: option.fromTokenName }), _jsxs(Text, { size: "sm", color: config.theme.font.color.secondary, children: ["On ", option.fromChainName] })] })] }), _jsxs(OptionBalance, { children: [_jsx(Text, { size: "base", weight: "semibold", color: config.theme.font.color.primary, children: formatTokenBalance(option.fromTokenName, option.fromAmount) ?? "0" }), option.kind === "direct" ? (_jsxs(FastBadge, { children: [_jsx("span", { children: "\u26A1" }), _jsx("span", { children: "Fast" })] })) : typeof option.estimatedDurationMinutes ===
+                                                    "number" ? (_jsxs(Text, { size: "xs", color: config.theme.font.color.tertiary, children: ["~", option.estimatedDurationMinutes, " min"] })) : null] })] }) }, option.id))) }), _jsx(ModalBackButton, { view: "cryptoIntent", disabled: processing })] })) : (_jsxs(ConfirmScreen, { children: [_jsx(ConfirmMeta, { children: _jsxs(ConfirmAmount, { children: [_jsxs(TokenIconWrap, { children: [_jsx(TokenIcon, { "$token": selectedOption.fromTokenName === "ETH" ? "ETH" : "USD", "$iconUrl": selectedOption.fromTokenIconUrl, children: !selectedOption.fromTokenIconUrl
+                                                    ? getTokenMonogram(selectedOption.fromTokenName, selectedOption.fromTokenSymbol)
+                                                    : null }), _jsx(ChainBadge, { "$iconUrl": selectedOption.fromChainIconUrl, children: !selectedOption.fromChainIconUrl
+                                                    ? getTokenMonogram(selectedOption.fromChainName)
+                                                    : null })] }), _jsxs(ConfirmTextBlock, { children: [_jsx(Text, { size: "base", weight: "semibold", color: config.theme.font.color.primary, children: selectedOption.fromTokenName }), _jsxs(Text, { size: "sm", color: config.theme.font.color.secondary, children: ["On ", selectedOption.fromChainName] })] })] }) }), _jsxs(QuoteBlock, { children: [_jsxs(QuoteRow, { children: [_jsx(Text, { size: "sm", color: config.theme.font.color.secondary, children: "Cost" }), _jsx(Text, { size: "sm", weight: "semibold", color: config.theme.font.color.primary, children: formattedCost })] }), confirmationAmount?.amount ? (_jsxs(QuoteRow, { children: [_jsx(Text, { size: "sm", color: config.theme.font.color.secondary, children: "You Pay" }), _jsx(Text, { size: "sm", weight: "semibold", color: config.theme.font.color.primary, children: confirmationAmount.amount })] })) : null, walletPayment.quoteStatus === "loading" ? (_jsx(Text, { size: "sm", color: config.theme.font.color.secondary, children: "Fetching quote..." })) : null, walletPayment.quoteStatus === "failed" ? (_jsx(Text, { size: "sm", color: config.theme.font.color.secondary, children: walletPayment.quoteError ||
+                                        "We couldn't fetch a quote right now." })) : null, typeof walletPayment.quote?.estimatedDurationMinutes ===
+                                    "number" ? (_jsxs(QuoteRow, { children: [_jsx(Text, { size: "sm", color: config.theme.font.color.secondary, children: "Estimated time" }), _jsxs(Text, { size: "sm", weight: "semibold", color: config.theme.font.color.primary, children: ["~", walletPayment.quote.estimatedDurationMinutes, " min"] })] })) : null] }), _jsx(ConfirmActions, { children: _jsx(StyledButton, { onClick: () => {
+                                    if (selectedOption) {
+                                        void handleSelectOption(selectedOption);
+                                    }
+                                }, disabled: processing ||
+                                    loading.CREATE_PAYMENT_ATTEMPT ||
+                                    !selectedOption ||
+                                    hasExpiredAttempt(payment, useCheckoutStore.getState().cryptoPaymentAttempt) ||
+                                    walletPayment.quoteStatus === "loading" ||
+                                    (selectedOption.kind !== "direct" &&
+                                        walletPayment.quoteStatus !== "ready"), children: executingId === selectedOption.id
+                                    ? "Preparing..."
+                                    : walletPayment.quoteStatus === "loading"
+                                        ? "Fetching quote..."
+                                        : `Pay with ${selectedOption.fromTokenName}` }) })] }, selectedOption.id)) })) : null, selectedOption ? (_jsx(StyledButton, { variant: "secondary", onClick: handleReturnToOptions, disabled: processing, children: "Back" })) : null] }));
+};
+export { CryptoIntentWalletPaymentOptionsViewContent };
+//# sourceMappingURL=wallet-payment-options.js.map