@avail-project/widgets 0.0.1

package/dist/nexus-widget/components/swap-idle-form.js

@@ -0,0 +1,1289 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// biome-ignore-all lint: NexusWidget registry component from shadcn registry.
+import Decimal from "decimal.js";
+import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { formatSelectedTokenBalanceLabel, formatUsdBalanceLabel, } from "./swap-asset-selector";
+const tabularNums = {
+    fontFeatureSettings: '"tnum"',
+    fontVariantNumeric: "tabular-nums",
+};
+const brand = "var(--foreground-brand)";
+/** Chevron down icon used in asset selector pills */
+const ChevronDownIcon = () => (_jsx("svg", { height: "10", style: { width: "12px", height: "12px", flexShrink: 0 }, viewBox: "0 0 10 10", width: "10", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 3.5L5 6.5L8 3.5", fill: "none", stroke: "#848483", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.3" }) }));
+const ArrowUpDownIcon = () => (_jsx("svg", { height: "12", style: { flexShrink: 0 }, viewBox: "0 0 24 24", width: "12", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7 15L7 3M7 3L11 7M7 3L3 7M17 9L17 21M17 21L13 17M17 21L21 17", fill: "none", stroke: "#848483", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) }));
+/** Reusable percentage quick-select buttons row with transition wrapper */
+function PercentButtons({ visible, onSelect, maxLabel = "Max", }) {
+    const [hoveredPct, setHoveredPct] = useState(null);
+    return (_jsx("div", { style: {
+            alignItems: "center",
+            backgroundColor: "#F0F3F9",
+            borderRadius: "6px",
+            boxShadow: "#2A388B0F 0px 1px 2px inset",
+            boxSizing: "border-box",
+            display: "flex",
+            flexShrink: 0,
+            gap: "2px",
+            padding: "2px",
+            opacity: visible ? 1 : 0,
+            visibility: visible ? "visible" : "hidden",
+            pointerEvents: visible ? "auto" : "none",
+            transition: "opacity 0.18s ease-out, visibility 0.18s ease-out",
+            width: "97px",
+        }, children: [20, 50, 100].map((pct) => {
+            const label = pct === 100 ? maxLabel : `${pct}%`;
+            const isHovered = hoveredPct === pct;
+            return (_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onSelect(pct);
+                }, onMouseDown: (e) => {
+                    e.preventDefault();
+                }, onMouseEnter: () => setHoveredPct(pct), onMouseLeave: () => setHoveredPct(null), style: {
+                    alignItems: "center",
+                    backgroundColor: isHovered ? "#FFFFFF" : "transparent",
+                    borderRadius: "4px",
+                    boxShadow: isHovered ? "#3C286414 0px 1px 2px" : "none",
+                    boxSizing: "border-box",
+                    color: isHovered ? "#1F1F1F" : "#8E8E89",
+                    cursor: "pointer",
+                    display: "flex",
+                    fontFamily: '"Geist", system-ui, sans-serif',
+                    fontSize: "10px",
+                    fontWeight: 500,
+                    height: "18px",
+                    justifyContent: "center",
+                    flex: "1 1 0%",
+                    minWidth: 0,
+                    paddingInline: "3px",
+                    border: "none",
+                    transition: "all 0.15s ease-out",
+                }, tabIndex: -1, type: "button", children: label }, pct));
+        }) }));
+}
+function UnifiedTokenLogoBadge({ token, size = 24, }) {
+    const [popover, setPopover] = useState(null);
+    const triggerRef = useRef(null);
+    const sources = token.sourceTokens ?? [];
+    const chainCount = new Set(sources
+        .map((source) => source.chainId ?? source.chainName)
+        .filter(Boolean)).size || sources.length;
+    const showPopover = () => {
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (!rect || typeof window === "undefined")
+            return;
+        const width = 250;
+        const maxHeight = 260;
+        const viewportPadding = 8;
+        const left = Math.min(Math.max(viewportPadding, rect.right - width), window.innerWidth - width - viewportPadding);
+        const belowTop = rect.bottom + 8;
+        const top = belowTop + maxHeight > window.innerHeight
+            ? Math.max(viewportPadding, rect.top - maxHeight - 8)
+            : belowTop;
+        setPopover({ left, top, width, maxHeight });
+    };
+    return (_jsxs("div", { onMouseEnter: showPopover, onMouseLeave: () => setPopover(null), ref: triggerRef, style: {
+            boxSizing: "border-box",
+            flexShrink: 0,
+            height: `${size}px`,
+            position: "relative",
+            width: `${size}px`,
+        }, children: [_jsx(LogoCircle, { alt: token.symbol, fontSize: Math.max(9, Math.floor(size / 2)), label: token.symbol, size: size, src: token.logo }), chainCount > 0 && (_jsx("div", { style: {
+                    alignItems: "center",
+                    backgroundColor: brand,
+                    border: "1px solid #FFFFFE",
+                    borderRadius: "999px",
+                    bottom: -3,
+                    boxSizing: "border-box",
+                    color: "#FFFFFE",
+                    display: "flex",
+                    fontFamily: '"Geist", system-ui, sans-serif',
+                    fontSize: "8px",
+                    fontWeight: 700,
+                    height: "12px",
+                    justifyContent: "center",
+                    lineHeight: "14px",
+                    minWidth: "12px",
+                    paddingInline: chainCount > 9 ? "3px" : 0,
+                    position: "absolute",
+                    right: -3,
+                }, children: chainCount })), popover &&
+                sources.length > 0 &&
+                typeof document !== "undefined" &&
+                createPortal(_jsxs("div", { style: {
+                        backgroundColor: "#FFFFFE",
+                        border: "1px solid #E8E8E7",
+                        borderRadius: "10px",
+                        boxShadow: "0 10px 28px rgba(22, 22, 21, 0.14)",
+                        boxSizing: "border-box",
+                        ...tabularNums,
+                        left: popover.left,
+                        maxHeight: popover.maxHeight,
+                        overflowY: "auto",
+                        padding: "12px",
+                        pointerEvents: "none",
+                        position: "fixed",
+                        top: popover.top,
+                        width: popover.width,
+                        zIndex: 2147483647,
+                    }, children: [_jsxs("div", { style: {
+                                alignItems: "center",
+                                display: "flex",
+                                justifyContent: "space-between",
+                                marginBottom: "8px",
+                            }, children: [_jsxs("span", { style: {
+                                        color: "#848483",
+                                        fontFamily: '"Geist", system-ui, sans-serif',
+                                        fontSize: "11px",
+                                        fontWeight: 700,
+                                        letterSpacing: "0.08em",
+                                        lineHeight: "16px",
+                                        textTransform: "uppercase",
+                                    }, children: ["Unified \u00B7 ", chainCount, " ", chainCount === 1 ? "Chain" : "Chains"] }), _jsxs("span", { style: {
+                                        color: "#161615",
+                                        fontFamily: '"Geist", system-ui, sans-serif',
+                                        fontSize: "15px",
+                                        fontWeight: 700,
+                                        lineHeight: "16px",
+                                    }, children: ["\u2248 ", formatUsdBalanceLabel(token.balanceInFiat)] })] }), _jsx("div", { style: {
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: "8px",
+                            }, children: sources.map((source) => (_jsxs("div", { style: {
+                                    alignItems: "center",
+                                    display: "flex",
+                                    gap: "8px",
+                                    justifyContent: "space-between",
+                                }, children: [_jsxs("div", { style: {
+                                            alignItems: "center",
+                                            display: "flex",
+                                            gap: "8px",
+                                            minWidth: 0,
+                                        }, children: [_jsx(LogoCircle, { alt: source.chainName, fontSize: 7, label: source.chainName, size: 15, src: source.chainLogo }), _jsx("span", { style: {
+                                                    color: "#161615",
+                                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                                    fontSize: "15px",
+                                                    fontWeight: 500,
+                                                    lineHeight: "20px",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis",
+                                                    whiteSpace: "nowrap",
+                                                }, children: source.chainName || "Unknown chain" })] }), _jsx("span", { style: {
+                                            color: "#161615",
+                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                            fontSize: "15px",
+                                            fontWeight: 600,
+                                            lineHeight: "20px",
+                                        }, children: formatAmountInputDisplay(source.balance || "0") })] }, `${source.chainId}-${source.contractAddress}`))) })] }), document.body)] }));
+}
+function PercentHoverButton({ label, onClick, tabIndex, }) {
+    const [hover, setHover] = useState(false);
+    const [active, setActive] = useState(false);
+    const handledPointerDownRef = useRef(false);
+    const pointerResetTimerRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (pointerResetTimerRef.current) {
+                clearTimeout(pointerResetTimerRef.current);
+            }
+        };
+    }, []);
+    const isHighlighted = hover || active;
+    return (_jsx("button", { onClick: () => {
+            if (handledPointerDownRef.current) {
+                if (pointerResetTimerRef.current) {
+                    clearTimeout(pointerResetTimerRef.current);
+                    pointerResetTimerRef.current = null;
+                }
+                handledPointerDownRef.current = false;
+                return;
+            }
+            onClick();
+        }, onMouseDown: (event) => {
+            event.preventDefault();
+            setActive(true);
+        }, onMouseEnter: () => setHover(true), onMouseLeave: () => {
+            setHover(false);
+            setActive(false);
+        }, onMouseUp: () => setActive(false), onPointerDown: (event) => {
+            if (event.pointerType === "mouse")
+                return;
+            event.preventDefault();
+            if (pointerResetTimerRef.current) {
+                clearTimeout(pointerResetTimerRef.current);
+            }
+            handledPointerDownRef.current = true;
+            setActive(true);
+            onClick();
+        }, onPointerUp: () => {
+            setActive(false);
+            if (handledPointerDownRef.current) {
+                pointerResetTimerRef.current = setTimeout(() => {
+                    handledPointerDownRef.current = false;
+                    pointerResetTimerRef.current = null;
+                }, 350);
+            }
+        }, style: {
+            alignItems: "center",
+            backgroundColor: isHighlighted ? "#E8F0FF" : "#F4F4F3",
+            borderRadius: "6px",
+            boxSizing: "border-box",
+            display: "flex",
+            flex: "1 1 0%",
+            justifyContent: "center",
+            paddingBlock: "3px",
+            paddingInline: "6px",
+            border: "none",
+            cursor: "pointer",
+            transition: "background-color 0.2s ease-out",
+        }, tabIndex: tabIndex, children: _jsx("div", { style: {
+                boxSizing: "border-box",
+                color: isHighlighted ? brand : "#363635",
+                fontFamily: '"Geist", system-ui, sans-serif',
+                fontSize: "11px",
+                fontWeight: 500,
+                lineHeight: "16px",
+                transition: "color 0.2s ease-out",
+                ...(label === "MAX" ? { letterSpacing: "0.02em" } : {}),
+            }, children: label }) }));
+}
+function SkeletonBar({ width, height, borderRadius = "8px", }) {
+    return (_jsx("div", { "aria-hidden": "true", style: {
+            background: "linear-gradient(90deg, #F0F0EF 0%, #E6EEFF 48%, #F0F0EF 100%)",
+            backgroundSize: "200% 100%",
+            borderRadius,
+            height,
+            maxWidth: "100%",
+            width,
+            animation: "nexusSwapSkeletonShimmer 1.2s ease-in-out infinite",
+        } }));
+}
+function LogoCircle({ src, alt, label, size, fontSize, outline, style, }) {
+    const [failed, setFailed] = useState(!src);
+    useEffect(() => {
+        setFailed(!src);
+    }, [src]);
+    const fallbackLabel = (label || alt || "?").trim().slice(0, 1).toUpperCase();
+    if (!failed && src) {
+        return (_jsx("img", { alt: alt || label || "", onError: () => setFailed(true), src: src, style: {
+                backgroundColor: "#FFFFFE",
+                borderRadius: "999px",
+                height: `${size}px`,
+                objectFit: "cover",
+                outline,
+                width: `${size}px`,
+                ...style,
+            } }));
+    }
+    return (_jsx("div", { "aria-label": alt || label || "Token", role: "img", style: {
+            alignItems: "center",
+            backgroundColor: "#E8F0FF",
+            borderRadius: "999px",
+            color: brand,
+            display: "flex",
+            fontFamily: '"Geist", system-ui, sans-serif',
+            fontSize: `${fontSize}px`,
+            fontWeight: 700,
+            height: `${size}px`,
+            justifyContent: "center",
+            lineHeight: `${size}px`,
+            outline,
+            width: `${size}px`,
+            ...style,
+        }, children: fallbackLabel || "?" }));
+}
+const sameAddress = (a, b) => Boolean(a && b && a.toLowerCase() === b.toLowerCase());
+const formatShortAddress = (address) => {
+    if (!address)
+        return "";
+    return address.length > 12
+        ? `${address.slice(0, 6)}…${address.slice(-4)}`
+        : address;
+};
+const formatTokenBalanceLabel = formatSelectedTokenBalanceLabel;
+const parseDecimal = (value) => {
+    if (value === null || value === undefined || value === "")
+        return undefined;
+    if (Decimal.isDecimal(value))
+        return value;
+    const cleaned = String(value).replace(/[^0-9.-]/g, "");
+    if (!cleaned || cleaned === "-" || cleaned === "." || cleaned === "-.") {
+        return undefined;
+    }
+    try {
+        const parsed = new Decimal(cleaned);
+        return parsed.isFinite() ? parsed : undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
+const formatUsdValue = (value) => value.gt(0) && value.lt(0.01) ? "<0.01" : value.toDecimalPlaces(2).toFixed(2);
+const MAX_AMOUNT_DISPLAY_DECIMALS = 8;
+const getTokenInputDecimals = (token) => {
+    const decimals = Number(token?.decimals);
+    return Number.isFinite(decimals) && decimals >= 0 ? Math.floor(decimals) : 18;
+};
+const formatAmountInputDisplay = (value) => {
+    if (!value)
+        return "";
+    try {
+        return new Decimal(value)
+            .toDecimalPlaces(MAX_AMOUNT_DISPLAY_DECIMALS, Decimal.ROUND_DOWN)
+            .toFixed();
+    }
+    catch {
+        return value;
+    }
+};
+export function SwapIdleForm({ amount, receiveQuoteAmount, receiveQuoteUsd, isReceiveAmountLoading = false, isReceiveUsdLoading = false, sourceRouteStatus, sourceRouteMessage, onAmountChange, fromTokens, toToken, totalBalance, usdValue, onOpenSourcePicker, onOpenDestPicker, onOpenRecipientPicker, recipientAddress, defaultRecipientAddress, swapType, onUpdateTokens, isAmountReadOnly = false, isDestinationPickerDisabled = false, hideDestinationTokenDropdownIcon = false, isSourcePickerDisabled = false, }) {
+    const [focusedPanel, setFocusedPanel] = useState(null);
+    const [focusedRow, setFocusedRow] = useState(null);
+    const [tooltip, setTooltip] = useState(null);
+    const [tooltipTriggerRect, setTooltipTriggerRect] = useState(null);
+    const sourceListRef = useRef(null);
+    const sourceRowRefs = useRef({});
+    const sourceInputRefs = useRef({});
+    const previousSourceCountRef = useRef(fromTokens.length);
+    const prevTokensRef = useRef(fromTokens);
+    const [autofocusIndex, setAutofocusIndex] = useState(null);
+    useEffect(() => {
+        const prev = prevTokensRef.current;
+        if (fromTokens.length > prev.length) {
+            setAutofocusIndex(fromTokens.length - 1);
+        }
+        else if (fromTokens.length === prev.length) {
+            for (let i = 0; i < fromTokens.length; i++) {
+                const p = prev[i];
+                const c = fromTokens[i];
+                if (p &&
+                    c &&
+                    (p.contractAddress !== c.contractAddress ||
+                        p.chainId !== c.chainId) &&
+                    !c.userAmount) {
+                    setAutofocusIndex(i);
+                    break;
+                }
+            }
+        }
+        prevTokensRef.current = fromTokens;
+    }, [fromTokens]);
+    useEffect(() => {
+        const previousSourceCount = previousSourceCountRef.current;
+        if (fromTokens.length > previousSourceCount && previousSourceCount > 0) {
+            const newIndex = fromTokens.length - 1;
+            requestAnimationFrame(() => {
+                const input = sourceInputRefs.current[newIndex];
+                if (input) {
+                    input.focus();
+                    input.select();
+                }
+                const container = sourceListRef.current;
+                const row = sourceRowRefs.current[newIndex];
+                if (!container ||
+                    !row ||
+                    container.scrollHeight <= container.clientHeight) {
+                    return;
+                }
+                const containerRect = container.getBoundingClientRect();
+                const rowRect = row.getBoundingClientRect();
+                const nextTop = rowRect.top - containerRect.top + container.scrollTop - 8;
+                container.scrollTo({
+                    behavior: "smooth",
+                    top: Math.max(0, nextTop),
+                });
+            });
+        }
+        previousSourceCountRef.current = fromTokens.length;
+    }, [fromTokens.length]);
+    const sanitizeInput = (raw, maxDecimals = 18) => {
+        let next = raw.replaceAll(/[^0-9.]/g, "");
+        const parts = next.split(".");
+        if (parts.length > 2)
+            next = parts[0] + "." + parts.slice(1).join("");
+        const [integerPart, decimalPart] = next.split(".");
+        if (decimalPart !== undefined) {
+            next = `${integerPart}.${decimalPart.slice(0, Math.max(0, maxDecimals))}`;
+        }
+        if (next === ".")
+            next = "0.";
+        // Strip leading zeros
+        if (next.length > 1 && next.startsWith("0") && next[1] !== ".") {
+            next = next.replace(/^0+/, "");
+            if (next === "")
+                next = "0";
+            if (next.startsWith("."))
+                next = "0" + next;
+        }
+        return next;
+    };
+    const handleBlurAmount = (index) => {
+        if (!onUpdateTokens)
+            return;
+        const token = fromTokens[index];
+        if (!token || !token.userAmount)
+            return;
+        if (token.userAmount.includes(".")) {
+            const stripped = token.userAmount.replace(/0+$/, "").replace(/\.$/, "");
+            if (stripped !== token.userAmount) {
+                const next = [...fromTokens];
+                next[index] = { ...token, userAmount: stripped };
+                onUpdateTokens(next);
+            }
+        }
+    };
+    const handleSendInput = (e) => {
+        if (isAmountReadOnly)
+            return;
+        const token = fromTokens.length === 1 ? fromTokens[0] : undefined;
+        onAmountChange(sanitizeInput(e.target.value, getTokenInputDecimals(token)), "send");
+    };
+    const handleTokenAmountChange = (index, val) => {
+        if (isAmountReadOnly)
+            return;
+        if (!onUpdateTokens)
+            return;
+        const token = fromTokens[index];
+        if (!token)
+            return;
+        let sanitized = sanitizeInput(val, token.userAmountMode === "usd"
+            ? MAX_AMOUNT_DISPLAY_DECIMALS
+            : getTokenInputDecimals(token));
+        const next = [...fromTokens];
+        next[index] = { ...token, userAmount: sanitized };
+        onUpdateTokens(next);
+        // Also update total amount for backwards compatibility if needed
+        const total = next.reduce((sum, t) => sum + Number(t.userAmount || 0), 0);
+        onAmountChange(total > 0 ? String(total) : "", "send");
+    };
+    const handleToggleMode = (index) => {
+        if (isAmountReadOnly)
+            return;
+        if (!onUpdateTokens)
+            return;
+        const token = fromTokens[index];
+        if (!token)
+            return;
+        const tokenBalance = Number(String(token.balance).replace(/[^0-9.]/g, "")) || 0;
+        const fiatBalance = Number(String(token.balanceInFiat).replace(/[^0-9.]/g, "")) || 0;
+        const price = tokenBalance > 0 ? fiatBalance / tokenBalance : 0;
+        if (price === 0)
+            return;
+        const currentVal = Number(token.userAmount || 0);
+        const next = [...fromTokens];
+        if (token.userAmountMode === "usd") {
+            const newTokenVal = currentVal > 0 ? (currentVal / price).toString() : "";
+            next[index] = {
+                ...token,
+                userAmountMode: "token",
+                userAmount: newTokenVal ? newTokenVal.substring(0, 10) : "",
+            };
+        }
+        else {
+            const newUsdVal = currentVal > 0 ? (currentVal * price).toFixed(2) : "";
+            next[index] = { ...token, userAmountMode: "usd", userAmount: newUsdVal };
+        }
+        onUpdateTokens(next);
+        const total = getTokenAmountTotal(next);
+        onAmountChange(total > 0 ? String(total) : "", "send");
+    };
+    const getSourceUsdValue = React.useCallback((token) => {
+        if (!token || !token.userAmount)
+            return 0;
+        const quotedUsd = parseDecimal(token.userAmountUsd);
+        if (quotedUsd && quotedUsd.gte(0))
+            return quotedUsd.toNumber();
+        const tokenBalance = Number(String(token.balance).replace(/[^0-9.]/g, "")) || 0;
+        const fiatBalance = Number(String(token.balanceInFiat).replace(/[^0-9.]/g, "")) || 0;
+        const price = tokenBalance > 0 ? fiatBalance / tokenBalance : 0;
+        const amountNumber = Number(token.userAmount || 0);
+        if (!Number.isFinite(amountNumber))
+            return 0;
+        if (token.userAmountMode === "usd")
+            return amountNumber;
+        return amountNumber * price;
+    }, []);
+    const totalUsd = React.useMemo(() => {
+        return fromTokens.reduce((sum, token) => sum + getSourceUsdValue(token), 0);
+    }, [fromTokens, getSourceUsdValue]);
+    const hasSourceOverflow = fromTokens.length > 3;
+    const [isSourceListAtBottom, setIsSourceListAtBottom] = useState(false);
+    const updateSourceListScrollState = React.useCallback(() => {
+        const element = sourceListRef.current;
+        if (!element || !hasSourceOverflow) {
+            setIsSourceListAtBottom(false);
+            return;
+        }
+        const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+        setIsSourceListAtBottom(distanceFromBottom <= 2);
+    }, [hasSourceOverflow]);
+    useEffect(() => {
+        requestAnimationFrame(updateSourceListScrollState);
+    }, [fromTokens.length, updateSourceListScrollState]);
+    const sourceRowsToRender = fromTokens.length > 0
+        ? fromTokens.map((token, index) => ({ token, index, position: index }))
+        : [{ token: null, index: 0, position: 0 }];
+    const isExactIn = swapType === "exactIn";
+    const showSourceRouteSkeleton = !isExactIn && sourceRouteStatus === "loading";
+    const sourceRouteHelper = sourceRouteStatus === "insufficient" ? sourceRouteMessage : undefined;
+    const receiveBalanceLabel = formatTokenBalanceLabel(toToken);
+    const getReceiveUsdRate = () => {
+        const quoteTokenAmount = parseDecimal(receiveQuoteAmount);
+        const quoteUsdAmount = parseDecimal(receiveQuoteUsd);
+        if (quoteTokenAmount?.gt(0) && quoteUsdAmount?.gt(0)) {
+            return quoteUsdAmount.div(quoteTokenAmount);
+        }
+        const tokenBalance = parseDecimal(toToken?.balance);
+        const fiatBalance = parseDecimal(toToken?.balanceInFiat);
+        if (tokenBalance?.gt(0) && fiatBalance?.gt(0)) {
+            return fiatBalance.div(tokenBalance);
+        }
+        return undefined;
+    };
+    const receiveInputValue = isExactIn ? (receiveQuoteAmount ?? "") : amount;
+    const receiveDisplayValue = focusedPanel === "receive"
+        ? receiveInputValue
+        : formatAmountInputDisplay(receiveInputValue);
+    const receiveAmountTextColor = (!isExactIn && amount) || (isExactIn && receiveQuoteAmount)
+        ? "#161615"
+        : "#9E9E9C";
+    const receiveUsdRate = getReceiveUsdRate();
+    const receiveTokenAmount = parseDecimal(receiveInputValue);
+    const receiveUsdAmount = receiveQuoteUsd
+        ? parseDecimal(receiveQuoteUsd)
+        : receiveTokenAmount && receiveUsdRate
+            ? receiveTokenAmount.mul(receiveUsdRate)
+            : undefined;
+    const receiveAltValue = `≈ $${receiveUsdAmount ? formatUsdValue(receiveUsdAmount) : "0.00"}`;
+    const isDefaultRecipient = sameAddress(recipientAddress, defaultRecipientAddress);
+    const recipientColor = recipientAddress
+        ? isDefaultRecipient
+            ? brand
+            : "#B7791F"
+        : "#848483";
+    const getTokenAmountTotal = (tokens) => tokens.reduce((sum, item) => sum + Number(item.userAmount || 0), 0);
+    const handleSendPercentForToken = (index, pct, token) => {
+        if (isAmountReadOnly)
+            return;
+        if (!token.balance || !onUpdateTokens)
+            return;
+        let finalVal = "";
+        const isUsdMode = token.userAmountMode === "usd";
+        if (isUsdMode) {
+            const fiatBalStr = String(token.balanceInFiat || "0");
+            const fiatBalance = parseDecimal(fiatBalStr);
+            if (!fiatBalance)
+                return;
+            if (pct === 100) {
+                finalVal = fiatBalance
+                    .toDecimalPlaces(MAX_AMOUNT_DISPLAY_DECIMALS, Decimal.ROUND_DOWN)
+                    .toFixed();
+            }
+            else {
+                finalVal = fiatBalance
+                    .mul(pct)
+                    .div(100)
+                    .toDecimalPlaces(MAX_AMOUNT_DISPLAY_DECIMALS, Decimal.ROUND_DOWN)
+                    .toFixed();
+            }
+        }
+        else {
+            const balanceStr = String(token.balance || "0");
+            const tokenBalance = parseDecimal(balanceStr);
+            if (!tokenBalance)
+                return;
+            const tokenDecimals = getTokenInputDecimals(token);
+            if (pct === 100) {
+                finalVal = tokenBalance
+                    .toDecimalPlaces(tokenDecimals, Decimal.ROUND_DOWN)
+                    .toFixed();
+            }
+            else {
+                finalVal = tokenBalance
+                    .mul(pct)
+                    .div(100)
+                    .toDecimalPlaces(tokenDecimals, Decimal.ROUND_DOWN)
+                    .toFixed();
+            }
+        }
+        const next = [...fromTokens];
+        next[index] = {
+            ...next[index],
+            userAmount: finalVal,
+            userAmountMode: isUsdMode ? "usd" : "token",
+        };
+        onUpdateTokens(next);
+        const total = getTokenAmountTotal(next);
+        onAmountChange(total > 0 ? String(total) : "", "send");
+    };
+    const handleSendPercent = (pct) => {
+        if (isAmountReadOnly)
+            return;
+        if (!totalBalance)
+            return;
+        const bal = parseFloat(totalBalance.replace(/[^0-9.]/g, ""));
+        if (isNaN(bal))
+            return;
+        const val = bal * (pct / 100);
+        // If there's only one token, or no tokens, update the main amount
+        if (fromTokens.length <= 1) {
+            if (fromTokens.length === 1 && onUpdateTokens) {
+                handleSendPercentForToken(0, pct, fromTokens[0]);
+                return;
+            }
+            onAmountChange(val.toFixed(6).replace(/\.?0+$/, ""), "send");
+        }
+    };
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "9px",
+            width: "100%",
+        }, children: [(isReceiveAmountLoading || isReceiveUsdLoading || sourceRouteStatus) && (_jsx("style", { children: `@keyframes nexusSwapSkeletonShimmer {
+            0% { background-position: 100% 0; opacity: 0.72; }
+            50% { opacity: 1; }
+            100% { background-position: -100% 0; opacity: 0.72; }
+          }` })), _jsxs("div", { className: "nexus-focus-container", style: {
+                    alignItems: "center",
+                    backgroundColor: "#FFFFFE",
+                    borderColor: "#E8E8E7",
+                    borderRadius: "9px",
+                    borderStyle: "solid",
+                    borderWidth: "1px",
+                    boxShadow: "#1616150A 0px 1px 2px",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    flexDirection: "column",
+                    fontVariantNumeric: "tabular-nums",
+                    gap: "6px",
+                    justifyContent: "center",
+                    paddingBlock: "9px",
+                    paddingInline: "9px",
+                    width: "100%",
+                }, children: [_jsxs("div", { style: {
+                            alignItems: "center",
+                            alignSelf: "stretch",
+                            boxSizing: "border-box",
+                            display: "flex",
+                            justifyContent: "space-between",
+                            width: "100%",
+                        }, children: [_jsx("div", { style: {
+                                    boxSizing: "border-box",
+                                    color: "#848483",
+                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                    fontSize: "12px",
+                                    fontWeight: 500,
+                                    letterSpacing: "0.08em",
+                                    lineHeight: "18px",
+                                    textTransform: "uppercase",
+                                }, children: "Send" }), _jsxs("button", { disabled: fromTokens.length === 0 || isSourcePickerDisabled, onClick: () => onOpenSourcePicker(), style: {
+                                    alignItems: "center",
+                                    background: "transparent",
+                                    border: "none",
+                                    borderRadius: "6px",
+                                    display: "flex",
+                                    gap: "4px",
+                                    padding: "2px 0",
+                                    color: fromTokens.length > 0 && !isSourcePickerDisabled
+                                        ? brand
+                                        : "#A8A8A6",
+                                    cursor: fromTokens.length > 0 && !isSourcePickerDisabled
+                                        ? "pointer"
+                                        : "not-allowed",
+                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                    fontSize: "12px",
+                                    fontWeight: 500,
+                                    lineHeight: "18px",
+                                    opacity: fromTokens.length > 0 && !isSourcePickerDisabled ? 1 : 0.75,
+                                }, type: "button", children: [_jsx("span", { "aria-hidden": "true", style: {
+                                            color: "currentColor",
+                                            fontSize: "14px",
+                                            lineHeight: "14px",
+                                        }, children: "+" }), "Add more assets"] })] }), _jsx("div", { onScroll: updateSourceListScrollState, ref: sourceListRef, style: {
+                            alignSelf: "stretch",
+                            boxSizing: "border-box",
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "9px",
+                            maxHeight: hasSourceOverflow ? "178px" : undefined,
+                            overflowX: hasSourceOverflow ? "hidden" : undefined,
+                            overflowY: hasSourceOverflow ? "auto" : undefined,
+                            paddingRight: hasSourceOverflow ? "4px" : undefined,
+                            overscrollBehavior: hasSourceOverflow ? "contain" : undefined,
+                            transition: "max-height 0.28s ease, padding-right 0.2s ease, opacity 0.2s ease",
+                            width: "100%",
+                        }, children: sourceRowsToRender.map(({ token, index, position }) => {
+                            const showTooltipBelow = position === 0;
+                            return (_jsxs("div", { ref: (element) => {
+                                    sourceRowRefs.current[index] = element;
+                                }, style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "5px",
+                                    opacity: 1,
+                                    position: "relative",
+                                    transform: "translateY(0)",
+                                    transition: "opacity 0.18s ease, transform 0.18s ease",
+                                    zIndex: tooltip === `asset-send-${index}` ? 1000 : 1,
+                                }, children: [_jsxs("div", { style: {
+                                            alignItems: "center",
+                                            alignSelf: "stretch",
+                                            boxSizing: "border-box",
+                                            display: "flex",
+                                            gap: "7px",
+                                            justifyContent: "space-between",
+                                            width: "100%",
+                                        }, children: [_jsx("div", { style: {
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    flex: 1,
+                                                    minWidth: 0,
+                                                }, children: showSourceRouteSkeleton ? (_jsx(SkeletonBar, { height: "24px", width: "46%" })) : (_jsxs(_Fragment, { children: [token?.userAmountMode === "usd" && (_jsx("span", { style: {
+                                                                color: (token
+                                                                    ? Boolean(token.userAmount)
+                                                                    : Boolean(isExactIn && amount))
+                                                                    ? "#161615"
+                                                                    : "#9E9E9C",
+                                                                fontFamily: '"Delight-Medium", "Delight", system-ui, sans-serif',
+                                                                fontSize: "29px",
+                                                                fontWeight: 500,
+                                                                lineHeight: "34px",
+                                                                marginRight: "4px",
+                                                            }, children: "$" })), _jsx("input", { "aria-readonly": isAmountReadOnly, onBlur: () => {
+                                                                if (token)
+                                                                    handleBlurAmount(index);
+                                                                setFocusedRow(null);
+                                                            }, onChange: (e) => {
+                                                                if (token)
+                                                                    handleTokenAmountChange(index, e.target.value);
+                                                                else
+                                                                    handleSendInput(e);
+                                                            }, onFocus: () => setFocusedRow(index), placeholder: "0", ref: (element) => {
+                                                                sourceInputRefs.current[index] = element;
+                                                            }, style: {
+                                                                boxSizing: "border-box",
+                                                                color: (token
+                                                                    ? Boolean(token.userAmount)
+                                                                    : Boolean(isExactIn && amount))
+                                                                    ? "#161615"
+                                                                    : "#9E9E9C",
+                                                                cursor: isAmountReadOnly ? "default" : "text",
+                                                                fontFamily: '"Delight-Medium", "Delight", system-ui, sans-serif',
+                                                                fontSize: "29px",
+                                                                fontWeight: 500,
+                                                                lineHeight: "34px",
+                                                                background: "transparent",
+                                                                border: "none",
+                                                                outline: "none",
+                                                                padding: 0,
+                                                                width: "100%",
+                                                                minWidth: 0,
+                                                            }, readOnly: isAmountReadOnly, type: "text", value: token
+                                                                ? focusedRow === index
+                                                                    ? token.userAmount || ""
+                                                                    : formatAmountInputDisplay(token.userAmount || "")
+                                                                : isExactIn
+                                                                    ? focusedRow === index
+                                                                        ? amount
+                                                                        : formatAmountInputDisplay(amount)
+                                                                    : "" })] })) }), _jsxs("div", { style: {
+                                                    display: "flex",
+                                                    gap: "7px",
+                                                    alignItems: "center",
+                                                }, children: [showSourceRouteSkeleton ? (_jsx("div", { style: {
+                                                            alignItems: "center",
+                                                            display: "flex",
+                                                            flexShrink: 0,
+                                                            height: "25px",
+                                                            width: "90px",
+                                                        }, children: _jsx(SkeletonBar, { borderRadius: "999px", height: "23px", width: "100%" }) })) : (_jsxs("button", { disabled: isSourcePickerDisabled, onClick: () => onOpenSourcePicker(index), style: {
+                                                            alignItems: "center",
+                                                            backgroundColor: "#FFFFFE",
+                                                            borderColor: token ? "#E8E8E7" : "#C8C8C7",
+                                                            borderRadius: "999px",
+                                                            borderStyle: token ? "solid" : "dashed",
+                                                            borderWidth: "1px",
+                                                            boxShadow: token ? "#1616150A 0px 1px 2px" : "none",
+                                                            boxSizing: "border-box",
+                                                            display: "flex",
+                                                            gap: "6px",
+                                                            paddingBottom: "3px",
+                                                            paddingLeft: token ? "3px" : "7px",
+                                                            paddingRight: "8px",
+                                                            paddingTop: "3px",
+                                                            cursor: isSourcePickerDisabled
+                                                                ? "not-allowed"
+                                                                : "pointer",
+                                                            flexShrink: 0,
+                                                            opacity: isSourcePickerDisabled ? 0.72 : 1,
+                                                        }, children: [token ? (token.isUnified ? (_jsx(UnifiedTokenLogoBadge, { size: 20, token: token })) : (_jsxs("div", { style: {
+                                                                    boxSizing: "border-box",
+                                                                    flexShrink: 0,
+                                                                    height: "20px",
+                                                                    position: "relative",
+                                                                    width: "20px",
+                                                                }, children: [_jsx(LogoCircle, { alt: token.symbol, fontSize: 10, label: token.symbol, size: 20, src: token.logo }), token.chainLogo && (_jsx(LogoCircle, { alt: token.chainName, fontSize: 5, label: token.chainName, outline: "1px solid #FFFFFE", size: 10, src: token.chainLogo, style: {
+                                                                            bottom: -2,
+                                                                            position: "absolute",
+                                                                            right: -2,
+                                                                        } }))] }))) : (_jsx("div", { style: {
+                                                                    borderColor: "#C8C8C7",
+                                                                    borderRadius: "999px",
+                                                                    borderStyle: "dashed",
+                                                                    borderWidth: "1.5px",
+                                                                    boxSizing: "border-box",
+                                                                    flexShrink: 0,
+                                                                    height: "18px",
+                                                                    width: "18px",
+                                                                } })), _jsx("div", { style: {
+                                                                    boxSizing: "border-box",
+                                                                    color: "#161615",
+                                                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                                                    fontSize: token ? "12px" : "14px",
+                                                                    fontWeight: 500,
+                                                                    lineHeight: token ? "16px" : "20px",
+                                                                }, children: token ? token.symbol : "Assets" }), _jsx(ChevronDownIcon, {})] })), token && fromTokens.length > 1 && (_jsx("button", { onClick: () => {
+                                                            if (!onUpdateTokens)
+                                                                return;
+                                                            const next = [...fromTokens];
+                                                            next.splice(index, 1);
+                                                            onUpdateTokens(next);
+                                                            const total = getTokenAmountTotal(next);
+                                                            onAmountChange(total > 0 ? String(total) : "", "send");
+                                                        }, style: {
+                                                            width: "18px",
+                                                            height: "18px",
+                                                            borderRadius: "999px",
+                                                            backgroundColor: "#F0F0EF",
+                                                            border: "none",
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            justifyContent: "center",
+                                                            cursor: "pointer",
+                                                            flexShrink: 0,
+                                                        }, children: _jsxs("svg", { fill: "none", height: "10", stroke: "#848483", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: "10", children: [_jsx("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), _jsx("line", { x1: "6", x2: "18", y1: "6", y2: "18" })] }) }))] })] }), _jsxs("div", { style: {
+                                            alignItems: "center",
+                                            alignSelf: "stretch",
+                                            boxSizing: "border-box",
+                                            display: "flex",
+                                            justifyContent: "space-between",
+                                            width: "100%",
+                                            minHeight: "24px",
+                                        }, children: [_jsx("div", { style: {
+                                                    display: "flex",
+                                                    justifyContent: "flex-start",
+                                                    alignItems: "center",
+                                                    flex: 1,
+                                                }, children: showSourceRouteSkeleton ? (_jsx(SkeletonBar, { height: "16px", width: "84px" })) : ((() => {
+                                                    if (!token)
+                                                        return (_jsxs("div", { style: {
+                                                                boxSizing: "border-box",
+                                                                color: "#848483",
+                                                                fontFamily: '"Geist", system-ui, sans-serif',
+                                                                fontSize: "11px",
+                                                                lineHeight: "16px",
+                                                                whiteSpace: "nowrap",
+                                                            }, children: ["\u2248 $", usdValue || "0.00"] }));
+                                                    const tokenBalance = Number(String(token.balance).replace(/[^0-9.]/g, "")) || 0;
+                                                    const fiatBalance = Number(String(token.balanceInFiat).replace(/[^0-9.]/g, "")) || 0;
+                                                    const price = tokenBalance > 0 ? fiatBalance / tokenBalance : 0;
+                                                    const isUsdMode = token.userAmountMode === "usd";
+                                                    const userAmtNum = Number(token.userAmount || 0);
+                                                    const quotedUsd = parseDecimal(token.userAmountUsd);
+                                                    const approxValue = isUsdMode
+                                                        ? price > 0
+                                                            ? (userAmtNum / price).toFixed(6)
+                                                            : "0.000000"
+                                                        : quotedUsd
+                                                            ? quotedUsd.toDecimalPlaces(2).toFixed()
+                                                            : (userAmtNum * price).toFixed(2);
+                                                    const approxPrefix = isUsdMode ? "≈" : "≈ $";
+                                                    const approxSuffix = isUsdMode
+                                                        ? ` ${token.symbol}`
+                                                        : "";
+                                                    return (_jsxs("div", { onClick: () => handleToggleMode(index), style: {
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: "6px",
+                                                            cursor: price > 0 && !isAmountReadOnly
+                                                                ? "pointer"
+                                                                : "default",
+                                                        }, children: [_jsxs("div", { style: {
+                                                                    boxSizing: "border-box",
+                                                                    color: "#848483",
+                                                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                                                    fontSize: "11px",
+                                                                    lineHeight: "16px",
+                                                                    whiteSpace: "nowrap",
+                                                                }, children: [approxPrefix, approxValue, approxSuffix] }), price > 0 && _jsx(ArrowUpDownIcon, {})] }));
+                                                })()) }), _jsx("div", { style: {
+                                                    alignItems: "center",
+                                                    display: token && focusedRow === index && !isAmountReadOnly
+                                                        ? "flex"
+                                                        : "none",
+                                                    justifyContent: "center",
+                                                    pointerEvents: token && focusedRow === index && !isAmountReadOnly
+                                                        ? "auto"
+                                                        : "none",
+                                                }, children: token && !isAmountReadOnly && (_jsx(PercentButtons, { onSelect: (pct) => token
+                                                        ? handleSendPercentForToken(index, pct, token)
+                                                        : handleSendPercent(pct), visible: Boolean(token) && focusedRow === index })) }), _jsx("div", { style: {
+                                                    display: "flex",
+                                                    justifyContent: "flex-end",
+                                                    alignItems: "center",
+                                                    flex: 1,
+                                                }, children: showSourceRouteSkeleton ? (_jsx(SkeletonBar, { height: "16px", width: "124px" })) : token ? (_jsxs("div", { onMouseEnter: (e) => {
+                                                        setTooltip(`asset-send-${index}`);
+                                                        setTooltipTriggerRect(e.currentTarget.getBoundingClientRect());
+                                                    }, onMouseLeave: () => {
+                                                        setTooltip(null);
+                                                        setTooltipTriggerRect(null);
+                                                    }, style: {
+                                                        alignItems: "center",
+                                                        boxSizing: "border-box",
+                                                        display: "flex",
+                                                        gap: "4px",
+                                                        position: "relative",
+                                                        cursor: "default",
+                                                        whiteSpace: "nowrap",
+                                                    }, children: [_jsx("div", { style: {
+                                                                boxSizing: "border-box",
+                                                                color: "#848483",
+                                                                fontFamily: '"Geist", system-ui, sans-serif',
+                                                                fontSize: "11px",
+                                                                fontVariantNumeric: "tabular-nums",
+                                                                lineHeight: "16px",
+                                                                whiteSpace: "nowrap",
+                                                            }, children: "Balance \u00B7" }), _jsx("div", { style: {
+                                                                boxSizing: "border-box",
+                                                                color: "#848483",
+                                                                fontFamily: '"Geist", system-ui, sans-serif',
+                                                                fontSize: "11px",
+                                                                fontVariantNumeric: "tabular-nums",
+                                                                lineHeight: "16px",
+                                                                whiteSpace: "nowrap",
+                                                            }, children: formatTokenBalanceLabel(token) }), tooltip === `asset-send-${index}` &&
+                                                            tooltipTriggerRect &&
+                                                            createPortal(_jsxs("div", { style: {
+                                                                    position: "fixed",
+                                                                    right: window.innerWidth - tooltipTriggerRect.right,
+                                                                    ...(showTooltipBelow
+                                                                        ? { top: tooltipTriggerRect.bottom + 8 }
+                                                                        : {
+                                                                            bottom: window.innerHeight -
+                                                                                tooltipTriggerRect.top +
+                                                                                8,
+                                                                        }),
+                                                                    width: "198px",
+                                                                    backgroundColor: "#fff",
+                                                                    border: "1px solid #E8E8E7",
+                                                                    borderRadius: "12px",
+                                                                    boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+                                                                    padding: "12px",
+                                                                    display: "flex",
+                                                                    flexDirection: "column",
+                                                                    zIndex: 2147483647,
+                                                                    pointerEvents: "none",
+                                                                    textAlign: "left",
+                                                                }, children: [_jsx("div", { style: {
+                                                                            fontSize: "11px",
+                                                                            fontWeight: 600,
+                                                                            color: "#848483",
+                                                                            letterSpacing: "0.06em",
+                                                                            textTransform: "uppercase",
+                                                                            marginBottom: "4px",
+                                                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                                                        }, children: "Asset Balance" }), _jsx("div", { style: {
+                                                                            fontSize: "14px",
+                                                                            color: "#161615",
+                                                                            lineHeight: "18px",
+                                                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                                                        }, children: "This is your current asset balance on this chain." })] }), document.body)] })) : null })] })] }, token
+                                ? `${token.contractAddress}-${token.chainId}-${index}`
+                                : "empty"));
+                        }) }), hasSourceOverflow && (_jsxs("button", { "aria-label": isSourceListAtBottom
+                            ? "Scroll source assets to top"
+                            : "Scroll source assets", onClick: () => {
+                            const element = sourceListRef.current;
+                            if (!element)
+                                return;
+                            element.scrollTo({
+                                behavior: "smooth",
+                                top: isSourceListAtBottom ? 0 : element.scrollTop + 80,
+                            });
+                        }, style: {
+                            alignItems: "center",
+                            alignSelf: "center",
+                            background: "transparent",
+                            border: "none",
+                            color: "#686866",
+                            cursor: "pointer",
+                            display: "flex",
+                            fontFamily: '"Geist", system-ui, sans-serif',
+                            fontSize: "13px",
+                            fontWeight: 500,
+                            gap: "4px",
+                            lineHeight: "18px",
+                            marginTop: "-2px",
+                            padding: 0,
+                        }, type: "button", children: ["Scroll to view more assets", _jsx("span", { "aria-hidden": "true", children: isSourceListAtBottom ? "↑" : "↓" })] })), sourceRouteHelper && (_jsx("div", { style: {
+                            alignSelf: "stretch",
+                            color: sourceRouteStatus === "insufficient" ? "#D32F2F" : brand,
+                            fontFamily: '"Geist", system-ui, sans-serif',
+                            fontSize: "13px",
+                            fontWeight: 500,
+                            lineHeight: "18px",
+                            marginTop: "-6px",
+                        }, children: sourceRouteHelper })), totalUsd > 0 && (_jsxs("div", { style: {
+                            display: "flex",
+                            gap: "7px",
+                            alignItems: "center",
+                            paddingTop: "6px",
+                            alignSelf: "flex-start",
+                            justifyContent: "flex-start",
+                        }, children: [_jsxs("span", { style: {
+                                    fontSize: "15px",
+                                    fontWeight: 600,
+                                    color: "#161615",
+                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                }, children: ["\u2248 $", totalUsd.toFixed(2)] }), _jsx("span", { style: {
+                                    fontSize: "12px",
+                                    color: "#848483",
+                                    fontWeight: 600,
+                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                    letterSpacing: "0.05em",
+                                }, children: "TOTAL" })] }))] }), _jsxs("div", { style: {
+                    backgroundColor: "#FFFFFE",
+                    borderColor: "#E8E8E7",
+                    borderRadius: "9px",
+                    borderStyle: "solid",
+                    borderWidth: "1px",
+                    boxShadow: "#1616150A 0px 1px 2px",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    flexDirection: "column",
+                    fontVariantNumeric: "tabular-nums",
+                    gap: "6px",
+                    paddingBlock: "9px",
+                    paddingInline: "9px",
+                    width: "100%",
+                }, children: [_jsx("div", { style: {
+                            alignSelf: "stretch",
+                            boxSizing: "border-box",
+                            color: "#848483",
+                            fontFamily: '"Geist", system-ui, sans-serif',
+                            fontSize: "12px",
+                            fontWeight: 500,
+                            letterSpacing: "0.08em",
+                            lineHeight: "18px",
+                            textTransform: "uppercase",
+                            width: "100%",
+                        }, children: "Receive" }), _jsxs("div", { style: {
+                            alignSelf: "stretch",
+                            boxSizing: "border-box",
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "4px",
+                            width: "100%",
+                        }, children: [_jsxs("div", { style: {
+                                    alignItems: "center",
+                                    alignSelf: "stretch",
+                                    boxSizing: "border-box",
+                                    display: "flex",
+                                    gap: "9px",
+                                    justifyContent: "space-between",
+                                    width: "100%",
+                                }, children: [isReceiveAmountLoading ? (_jsx("div", { style: {
+                                            alignItems: "center",
+                                            boxSizing: "border-box",
+                                            display: "flex",
+                                            minHeight: "31px",
+                                            minWidth: 0,
+                                            width: "100%",
+                                        }, children: _jsx(SkeletonBar, { height: "27px", width: "68%" }) })) : (_jsx("input", { "aria-disabled": "true", disabled: true, placeholder: "0", style: {
+                                            boxSizing: "border-box",
+                                            color: receiveAmountTextColor,
+                                            fontFamily: '"Delight-Medium", "Delight", system-ui, sans-serif',
+                                            fontSize: "29px",
+                                            fontWeight: 500,
+                                            lineHeight: "34px",
+                                            background: "transparent",
+                                            border: "none",
+                                            cursor: "default",
+                                            outline: "none",
+                                            opacity: 1,
+                                            padding: 0,
+                                            WebkitTextFillColor: receiveAmountTextColor,
+                                            width: "100%",
+                                            minWidth: 0,
+                                        }, type: "text", value: receiveDisplayValue })), _jsxs("button", { disabled: isDestinationPickerDisabled, onClick: onOpenDestPicker, style: {
+                                            alignItems: "center",
+                                            backgroundColor: "#FFFFFE",
+                                            borderColor: toToken ? "#E8E8E7" : "#C8C8C7",
+                                            borderRadius: "999px",
+                                            borderStyle: toToken ? "solid" : "dashed",
+                                            borderWidth: "1px",
+                                            boxShadow: toToken ? "#1616150A 0px 1px 2px" : "none",
+                                            boxSizing: "border-box",
+                                            display: "flex",
+                                            gap: "6px",
+                                            paddingBottom: "3px",
+                                            paddingLeft: toToken ? "3px" : "7px",
+                                            paddingRight: "8px",
+                                            paddingTop: "3px",
+                                            cursor: isDestinationPickerDisabled ? "default" : "pointer",
+                                            flexShrink: 0,
+                                        }, children: [toToken ? (_jsxs("div", { style: {
+                                                    boxSizing: "border-box",
+                                                    flexShrink: 0,
+                                                    height: "20px",
+                                                    position: "relative",
+                                                    width: "20px",
+                                                }, children: [_jsx(LogoCircle, { alt: toToken.symbol, fontSize: 10, label: toToken.symbol, size: 20, src: toToken.logo }), toToken.chainLogo && (_jsx(LogoCircle, { alt: toToken.chainName, fontSize: 5, label: toToken.chainName, outline: "1px solid #FFFFFE", size: 10, src: toToken.chainLogo, style: {
+                                                            bottom: -2,
+                                                            position: "absolute",
+                                                            right: -2,
+                                                        } }))] })) : (_jsx("div", { style: {
+                                                    borderColor: "#C8C8C7",
+                                                    borderRadius: "999px",
+                                                    borderStyle: "dashed",
+                                                    borderWidth: "1.5px",
+                                                    boxSizing: "border-box",
+                                                    flexShrink: 0,
+                                                    height: "18px",
+                                                    width: "18px",
+                                                } })), _jsx("div", { style: {
+                                                    boxSizing: "border-box",
+                                                    color: "#161615",
+                                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                                    fontSize: toToken ? "12px" : "14px",
+                                                    fontWeight: 500,
+                                                    lineHeight: toToken ? "16px" : "20px",
+                                                }, children: toToken ? toToken.symbol : "Assets" }), !hideDestinationTokenDropdownIcon && _jsx(ChevronDownIcon, {})] })] }), _jsxs("div", { style: {
+                                    alignItems: "center",
+                                    alignSelf: "stretch",
+                                    boxSizing: "border-box",
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    width: "100%",
+                                    minHeight: "22px",
+                                }, children: [isReceiveUsdLoading ? (_jsx(SkeletonBar, { borderRadius: "6px", height: "16px", width: "74px" })) : (_jsx("div", { style: {
+                                            boxSizing: "border-box",
+                                            color: "#848483",
+                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                            fontSize: "11px",
+                                            lineHeight: "16px",
+                                            whiteSpace: "nowrap",
+                                        }, children: receiveAltValue })), toToken && focusedPanel === "receive" && (_jsxs("div", { onMouseEnter: () => setTooltip("asset-receive"), onMouseLeave: () => setTooltip(null), style: {
+                                            alignItems: "center",
+                                            boxSizing: "border-box",
+                                            display: "flex",
+                                            gap: "5px",
+                                            position: "relative",
+                                            cursor: "default",
+                                        }, children: [_jsx("div", { style: {
+                                                    boxSizing: "border-box",
+                                                    color: "#848483",
+                                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                                    fontSize: "11px",
+                                                    fontVariantNumeric: "tabular-nums",
+                                                    lineHeight: "16px",
+                                                    whiteSpace: "nowrap",
+                                                }, children: "Asset Balance \u00B7" }), _jsx("div", { style: {
+                                                    boxSizing: "border-box",
+                                                    color: "#848483",
+                                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                                    fontSize: "11px",
+                                                    fontVariantNumeric: "tabular-nums",
+                                                    lineHeight: "16px",
+                                                    whiteSpace: "nowrap",
+                                                }, children: receiveBalanceLabel }), tooltip === "asset-receive" && (_jsxs("div", { style: {
+                                                    position: "absolute",
+                                                    right: 0,
+                                                    bottom: "calc(100% + 8px)",
+                                                    width: "198px",
+                                                    backgroundColor: "#fff",
+                                                    border: "1px solid #E8E8E7",
+                                                    borderRadius: "12px",
+                                                    boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+                                                    padding: "12px",
+                                                    display: "flex",
+                                                    flexDirection: "column",
+                                                    zIndex: 10000,
+                                                    pointerEvents: "none",
+                                                    textAlign: "left",
+                                                }, children: [_jsx("div", { style: {
+                                                            fontSize: "11px",
+                                                            fontWeight: 600,
+                                                            color: "#848483",
+                                                            letterSpacing: "0.06em",
+                                                            textTransform: "uppercase",
+                                                            marginBottom: "4px",
+                                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                                        }, children: "Asset Balance" }), _jsx("div", { style: {
+                                                            fontSize: "14px",
+                                                            color: "#161615",
+                                                            lineHeight: "18px",
+                                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                                        }, children: "This is your current asset balance on this chain." })] }))] }))] })] }), onOpenRecipientPicker && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                    alignSelf: "stretch",
+                                    backgroundColor: "#E8E8E7",
+                                    boxSizing: "border-box",
+                                    flexShrink: 0,
+                                    height: "1px",
+                                    marginTop: "4px",
+                                    width: "100%",
+                                } }), _jsxs("div", { style: {
+                                    alignSelf: "stretch",
+                                    boxSizing: "border-box",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "4px",
+                                    paddingTop: "2px",
+                                    width: "100%",
+                                }, children: [_jsx("div", { style: {
+                                            boxSizing: "border-box",
+                                            color: "#7C7C7A",
+                                            fontFamily: '"Geist", system-ui, sans-serif',
+                                            fontSize: "12px",
+                                            fontWeight: 500,
+                                            letterSpacing: "0.08em",
+                                            lineHeight: "18px",
+                                            textTransform: "uppercase",
+                                        }, children: "Recipient" }), _jsxs("div", { style: {
+                                            alignItems: "center",
+                                            alignSelf: "stretch",
+                                            boxSizing: "border-box",
+                                            display: "flex",
+                                            gap: "9px",
+                                            justifyContent: "space-between",
+                                            width: "100%",
+                                        }, children: [_jsx("div", { style: {
+                                                    boxSizing: "border-box",
+                                                    color: recipientColor,
+                                                    fontFamily: '"Geist", system-ui, sans-serif',
+                                                    fontSize: "14px",
+                                                    fontVariantNumeric: "tabular-nums",
+                                                    fontWeight: 500,
+                                                    lineHeight: "16px",
+                                                }, children: recipientAddress
+                                                    ? formatShortAddress(recipientAddress)
+                                                    : "Select recipient" }), _jsx("button", { onClick: onOpenRecipientPicker, style: {
+                                                    alignItems: "center",
+                                                    backgroundColor: "#F4F6FF",
+                                                    borderRadius: "4px",
+                                                    boxSizing: "border-box",
+                                                    display: "flex",
+                                                    gap: "4px",
+                                                    paddingBlock: "6px",
+                                                    paddingInline: "9px",
+                                                    border: "none",
+                                                    cursor: "pointer",
+                                                }, children: _jsx("div", { style: {
+                                                        boxSizing: "border-box",
+                                                        color: brand,
+                                                        fontFamily: '"Geist", system-ui, sans-serif',
+                                                        fontSize: "13px",
+                                                        fontWeight: 500,
+                                                        lineHeight: "13px",
+                                                    }, children: "Edit" }) })] })] })] }))] })] }));
+}