@avail-project/widgets 0.0.1

package/dist/nexus-widget/components/amount-input-unified.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore-all lint: NexusWidget registry component from shadcn registry.
+import Decimal from "decimal.js";
+import React, { useMemo } from "react";
+import { formatTokenAmountDisplay, formatUsdBalanceLabel, } from "./swap-asset-selector";
+export function AmountInputUnified({ amount, onChange, onCommit, disabled, maxAvailableAmount, unifiedBalances, tokenIcon, usdValue, tokenSymbol, header, }) {
+    const handleMax = () => {
+        if (!totalBalanceValue)
+            return;
+        onChange(totalBalanceValue);
+        onCommit?.(totalBalanceValue);
+    };
+    const isUsdMode = !tokenSymbol;
+    const totalBalanceValue = useMemo(() => {
+        if (!unifiedBalances || !unifiedBalances.length)
+            return "";
+        if (isUsdMode) {
+            return unifiedBalances
+                .reduce((acc, curr) => acc.add(curr.balanceInFiat ?? 0), new Decimal(0))
+                .toDecimalPlaces(8, Decimal.ROUND_DOWN)
+                .toFixed();
+        }
+        return unifiedBalances
+            .reduce((acc, curr) => acc.add(curr.balance ?? 0), new Decimal(0))
+            .toDecimalPlaces(8, Decimal.ROUND_DOWN)
+            .toFixed();
+    }, [isUsdMode, unifiedBalances]);
+    const totalBalanceLabel = useMemo(() => {
+        if (!unifiedBalances || !unifiedBalances.length)
+            return "0";
+        if (isUsdMode) {
+            const fiatAmount = unifiedBalances.reduce((acc, curr) => acc.add(curr.balanceInFiat ?? 0), new Decimal(0));
+            return formatUsdBalanceLabel(fiatAmount);
+        }
+        const amount = unifiedBalances.reduce((acc, curr) => acc.add(curr.balance ?? 0), new Decimal(0));
+        return formatTokenAmountDisplay(amount);
+    }, [isUsdMode, unifiedBalances]);
+    return (_jsxs("div", { className: "w-full flex flex-col bg-white min-h-[136px] nexus-focus-container", style: {
+            borderRadius: "10px",
+            border: "1px solid var(--border-default, #E8E8E7)",
+            boxShadow: "0px 1px 12px 0px #5B5B5B0D",
+            background: "#FFFFFF",
+        }, children: [header && (_jsx("div", { className: "w-full border-b border-[#E8E8E7] px-3.5 py-2.5", children: header })), _jsxs("div", { className: "flex-1 w-full flex flex-col items-center justify-center p-3.5 relative", children: [_jsxs("div", { className: "flex items-center justify-center w-full gap-x-1.5 mb-1", children: [_jsxs("div", { className: "flex items-center justify-center text-center", style: {
+                                    fontSize: "28px",
+                                    fontWeight: 500,
+                                    gap: "2px",
+                                }, children: [tokenIcon ? (_jsx("div", { className: "flex items-center justify-center mr-2", children: tokenIcon })) : (_jsx("span", { className: "leading-none text-gray-800 mr-1", children: "$" })), _jsx("input", { className: "min-w-0 text-start bg-transparent border-none outline-none p-0 focus:ring-0 placeholder:text-gray-300 truncate tabular-nums", disabled: disabled, inputMode: "decimal", onBlur: () => onCommit?.(amount), onChange: (e) => {
+                                            let next = e.target.value.replaceAll(/[^0-9.]/g, "");
+                                            const parts = next.split(".");
+                                            if (parts.length > 2)
+                                                next = parts[0] + "." + parts.slice(1).join("");
+                                            if (next === ".")
+                                                next = "0.";
+                                            onChange(next);
+                                        }, onKeyDown: (e) => {
+                                            if (e.key === "Enter")
+                                                onCommit?.(amount);
+                                        }, placeholder: "0", style: {
+                                            fontFamily: "'Delight', sans-serif",
+                                            fontWeight: 500,
+                                            fontSize: "28px",
+                                            lineHeight: "100%",
+                                            height: "28px",
+                                            letterSpacing: "2%",
+                                            color: "var(--foreground-primary, #161615)",
+                                            fieldSizing: "content",
+                                            minWidth: "1ch",
+                                            maxWidth: "6ch",
+                                        }, type: "text", value: amount })] }), _jsx("button", { className: "shrink-0 focus:opacity-80 disabled:opacity-40 disabled:cursor-not-allowed transition-opacity", disabled: disabled || !maxAvailableAmount, onClick: handleMax, style: {
+                                    background: "var(--background-tertiary, #F0F0EF)",
+                                    width: "36px",
+                                    height: "20px",
+                                    borderRadius: "5px",
+                                    padding: "2px 6px",
+                                    color: "var(--foreground-muted, #848483)",
+                                    fontFamily: "var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                                    fontWeight: 400,
+                                    fontSize: "9px",
+                                    lineHeight: "100%",
+                                }, children: "MAX" })] }), (totalBalanceValue || maxAvailableAmount) && (_jsx("div", { className: "absolute bottom-3 left-0 w-full flex justify-center", children: _jsxs("p", { style: {
+                                color: "var(--widget-card-foreground-muted, #848483)",
+                                fontFamily: "var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif",
+                                fontWeight: 400,
+                                fontSize: "10.5px",
+                                lineHeight: "100%",
+                                textAlign: "center",
+                            }, children: ["Balance: ", totalBalanceLabel || "0", tokenSymbol ? ` ${tokenSymbol}` : ""] }) }))] })] }));
+}

package/dist/nexus-widget/components/deposit-idle-form.d.ts

@@ -0,0 +1,29 @@
+import { type SwapTokenOption } from "./swap-asset-selector";
+interface DepositIdleFormProps {
+    amount: string;
+    amountMode: "token" | "usd";
+    calculatingPercent?: number | null;
+    fromTokens: SwapTokenOption[];
+    isAmountReadOnly?: boolean;
+    isCalculatingMax?: boolean;
+    isQuoteRefreshing?: boolean;
+    isSourcePickerDisabled?: boolean;
+    isTokenPickerDisabled?: boolean;
+    hideDestinationTokenDropdownIcon?: boolean;
+    onAmountChange: (val: string) => void;
+    onAmountModeToggle: () => void;
+    onOpenSourcePicker: () => void;
+    onOpenTokenPicker?: () => void;
+    onSetPercent: (pct: number) => void;
+    reserveSourceRows?: boolean;
+    routeMessage?: string;
+    routeStatus?: "loading" | "insufficient";
+    showAutoBadge?: boolean;
+    tokenValue: string;
+    toToken?: SwapTokenOption;
+    totalBalance: string;
+    usdValue: string;
+}
+export declare function DepositIdleForm({ amount, amountMode, onAmountChange, onAmountModeToggle, toToken, totalBalance, usdValue, tokenValue, fromTokens, onOpenSourcePicker, onSetPercent, routeStatus, routeMessage, isAmountReadOnly, isCalculatingMax, calculatingPercent, isQuoteRefreshing, hideDestinationTokenDropdownIcon, showAutoBadge, isSourcePickerDisabled, isTokenPickerDisabled, onOpenTokenPicker, reserveSourceRows, }: DepositIdleFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=deposit-idle-form.d.ts.map

package/dist/nexus-widget/components/deposit-idle-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deposit-idle-form.d.ts","sourceRoot":"","sources":["../../../.build-src/nexus-widget/components/deposit-idle-form.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AAE/B,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,GAAG,KAAK,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAmgBD,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,gBAAwB,EACxB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gCAAwC,EACxC,aAAoB,EACpB,sBAA8B,EAC9B,qBAA6B,EAC7B,iBAAiB,EACjB,iBAAyB,GAC1B,EAAE,oBAAoB,2CA2XtB"}

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

@@ -0,0 +1,506 @@
+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 { AlertCircle, ChevronDown, Loader2 } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { PayWithSources as SharedPayWithSources } from "./pay-with-sources";
+import { formatSelectedTokenBalanceLabel, formatUsdBalanceLabel, } from "./swap-asset-selector";
+const uiFont = '"Geist", system-ui, sans-serif';
+const primary = "#161615";
+const muted = "#848483";
+const border = "#E8E8E7";
+const brand = "var(--foreground-brand)";
+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 formatToken = (value) => {
+    const amount = parseDecimal(value) ?? new Decimal(0);
+    return amount.toDecimalPlaces(8).toFixed();
+};
+const formatUsd = (value) => {
+    const amount = parseDecimal(value) ?? new Decimal(0);
+    if (amount.gt(0) && amount.lt(0.01))
+        return "<$0.01";
+    return `$${amount.toDecimalPlaces(2).toFixed()}`;
+};
+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;
+    }
+};
+const sanitizeAmountInput = (raw, maxDecimals) => {
+    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.";
+    return next;
+};
+function TokenLogo({ src, label, size = 30, fontSize = 12, style, }) {
+    const [failed, setFailed] = useState(!src);
+    React.useEffect(() => {
+        setFailed(!src);
+    }, [src]);
+    if (!failed && src) {
+        return (_jsx("img", { alt: label || "", onError: () => setFailed(true), src: src, style: {
+                backgroundColor: "#FFFFFE",
+                borderRadius: "999px",
+                height: size,
+                objectFit: "cover",
+                width: size,
+                ...style,
+            } }));
+    }
+    return (_jsx("div", { style: {
+            alignItems: "center",
+            backgroundColor: "#E8F0FF",
+            borderRadius: "999px",
+            color: brand,
+            display: "flex",
+            fontFamily: uiFont,
+            fontSize,
+            fontWeight: 700,
+            height: size,
+            justifyContent: "center",
+            width: size,
+            ...style,
+        }, children: (label || "?").slice(0, 1).toUpperCase() }));
+}
+function SourceLogoPair({ token }) {
+    return (_jsxs("div", { style: { flexShrink: 0, height: 32, position: "relative", width: 32 }, children: [_jsx(TokenLogo, { label: token.symbol, size: 32, src: token.logo }), token.chainLogo && (_jsx(TokenLogo, { label: token.chainName, size: 14, src: token.chainLogo, style: {
+                    bottom: -2,
+                    outline: "1px solid #FFFFFE",
+                    position: "absolute",
+                    right: -2,
+                } }))] }));
+}
+function ExactOutPercentButtons({ visible, onSelect, }) {
+    return (_jsx("div", { style: {
+            alignItems: "center",
+            boxSizing: "border-box",
+            display: "flex",
+            gap: "6px",
+            opacity: visible ? 1 : 0,
+            pointerEvents: visible ? "auto" : "none",
+            transition: "opacity 0.18s ease-out",
+            width: "100%",
+        }, children: [25, 50, 75, 100].map((pct) => {
+            const isMax = pct === 100;
+            return (_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onSelect(pct);
+                }, onMouseDown: (e) => {
+                    e.preventDefault();
+                }, style: {
+                    alignItems: "center",
+                    backgroundColor: isMax ? "#E8F0FF" : "#F4F4F3",
+                    border: "none",
+                    borderRadius: "8px",
+                    boxSizing: "border-box",
+                    color: isMax ? brand : "#363635",
+                    cursor: "pointer",
+                    display: "flex",
+                    flex: "1 1 0%",
+                    fontFamily: '"Geist", system-ui, sans-serif',
+                    fontSize: "12px",
+                    fontWeight: 500,
+                    justifyContent: "center",
+                    lineHeight: "20px",
+                    minWidth: 0,
+                    paddingBlock: "5px",
+                    paddingInline: "10px",
+                }, tabIndex: -1, type: "button", children: isMax ? "MAX" : `${pct}%` }, pct));
+        }) }));
+}
+function SkeletonRow() {
+    return (_jsxs("div", { style: {
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "space-between",
+        }, children: [_jsx("div", { className: "animate-pulse", style: {
+                    background: "linear-gradient(90deg, #F0F0EF 0%, #F7F7F6 48%, #F0F0EF 100%)",
+                    backgroundSize: "200% 100%",
+                    borderRadius: "6px",
+                    height: "32px",
+                    width: "128px",
+                } }), _jsx("div", { className: "animate-pulse", style: {
+                    background: "linear-gradient(90deg, #F0F0EF 0%, #F7F7F6 48%, #F0F0EF 100%)",
+                    backgroundSize: "200% 100%",
+                    borderRadius: "999px",
+                    height: "32px",
+                    width: "108px",
+                } })] }));
+}
+function PayWithSources({ fromTokens, onOpenSourcePicker, routeStatus, routeMessage, }) {
+    const scrollRef = useRef(null);
+    const isRouteLoading = routeStatus === "loading";
+    const shouldShowSourceSummary = !isRouteLoading && fromTokens.length > 0;
+    const shouldScroll = shouldShowSourceSummary && fromTokens.length > 3;
+    const autoBadge = (_jsx("span", { style: {
+            border: `1px solid ${brand}`,
+            borderRadius: "999px",
+            color: brand,
+            fontFamily: uiFont,
+            fontSize: "9px",
+            fontWeight: 600,
+            letterSpacing: "0.04em",
+            lineHeight: "14px",
+            padding: "1px 5px",
+        }, children: "AUTO" }));
+    return (_jsxs("div", { style: {
+            backgroundColor: "#FFFFFE",
+            border: `1px solid ${border}`,
+            borderRadius: "12px",
+            boxShadow: "#1616150A 0px 1px 2px",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            gap: "10px",
+            padding: "14px",
+        }, children: [_jsxs("div", { style: {
+                    alignItems: "center",
+                    display: "flex",
+                    justifyContent: "space-between",
+                }, children: [_jsxs("div", { style: {
+                            alignItems: "center",
+                            color: muted,
+                            display: "flex",
+                            fontFamily: uiFont,
+                            fontSize: "14px",
+                            fontWeight: 500,
+                            gap: "6px",
+                            letterSpacing: "0.08em",
+                            lineHeight: "20px",
+                            textTransform: "uppercase",
+                        }, children: [_jsxs("span", { children: ["Pay With", shouldShowSourceSummary ? ` · ${fromTokens.length} assets` : ""] }), autoBadge] }), shouldShowSourceSummary && (_jsx("button", { onClick: onOpenSourcePicker, style: {
+                            backgroundColor: "#F4F7FE",
+                            border: "none",
+                            borderRadius: "6px",
+                            color: brand,
+                            cursor: "pointer",
+                            fontFamily: uiFont,
+                            fontSize: "14px",
+                            fontWeight: 500,
+                            lineHeight: "16px",
+                            padding: "7px 10px",
+                        }, children: "Edit tokens" }))] }), isRouteLoading ? (_jsxs(_Fragment, { children: [_jsx(SkeletonRow, {}), _jsxs("div", { style: {
+                            alignItems: "center",
+                            color: brand,
+                            display: "flex",
+                            fontFamily: uiFont,
+                            fontSize: "15px",
+                            gap: "6px",
+                        }, children: [_jsx(Loader2, { className: "animate-spin", style: { height: 13, width: 13 } }), "Calculating best route..."] })] })) : shouldShowSourceSummary ? (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { ref: scrollRef, style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            maxHeight: shouldScroll ? "184px" : undefined,
+                            overflowY: shouldScroll ? "auto" : undefined,
+                            paddingRight: shouldScroll ? "6px" : 0,
+                        }, children: fromTokens.map((token, index) => (_jsxs("div", { style: {
+                                alignItems: "center",
+                                borderTop: index === 0 ? "none" : "1px solid #F0F0EF",
+                                display: "flex",
+                                justifyContent: "space-between",
+                                minHeight: "52px",
+                                padding: "6px 0",
+                            }, children: [_jsxs("div", { style: {
+                                        alignItems: "center",
+                                        display: "flex",
+                                        gap: "10px",
+                                        minWidth: 0,
+                                    }, children: [_jsx(SourceLogoPair, { token: token }), _jsxs("div", { style: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                gap: "3px",
+                                                minWidth: 0,
+                                            }, children: [_jsx("span", { style: {
+                                                        color: primary,
+                                                        fontFamily: uiFont,
+                                                        fontSize: "16px",
+                                                        fontWeight: 600,
+                                                    }, children: token.symbol }), _jsx("span", { style: {
+                                                        color: muted,
+                                                        fontFamily: uiFont,
+                                                        fontSize: "14px",
+                                                        overflow: "hidden",
+                                                        textOverflow: "ellipsis",
+                                                        whiteSpace: "nowrap",
+                                                    }, children: token.isUnified
+                                                        ? "Unified balance"
+                                                        : `on ${token.chainName || "Unknown chain"}` })] })] }), _jsxs("div", { style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "3px",
+                                        textAlign: "right",
+                                    }, children: [_jsxs("span", { style: {
+                                                color: primary,
+                                                fontFamily: uiFont,
+                                                fontSize: "15px",
+                                            }, children: [formatToken(token.userAmount || token.balance), " ", token.symbol] }), _jsx("span", { style: {
+                                                color: muted,
+                                                fontFamily: uiFont,
+                                                fontSize: "14px",
+                                            }, children: formatUsd(token.userAmountUsd || token.balanceInFiat) })] })] }, `${token.contractAddress}-${token.chainId ?? "unified"}-${index}`))) }), shouldScroll && (_jsx("button", { "aria-label": "Scroll payment sources", onClick: () => scrollRef.current?.scrollBy({ behavior: "smooth", top: 64 }), style: {
+                            alignItems: "center",
+                            background: "#FFFFFE",
+                            border: `1px solid ${border}`,
+                            borderRadius: "999px",
+                            bottom: "4px",
+                            boxShadow: "0 2px 8px rgba(22,22,21,0.08)",
+                            cursor: "pointer",
+                            display: "flex",
+                            height: "22px",
+                            justifyContent: "center",
+                            left: "50%",
+                            padding: 0,
+                            position: "absolute",
+                            transform: "translateX(-50%)",
+                            width: "22px",
+                        }, type: "button", children: _jsx(ChevronDown, { style: { color: muted, height: 14, width: 14 } }) }))] })) : (_jsx("div", { style: {
+                    color: primary,
+                    fontFamily: uiFont,
+                    fontSize: "15px",
+                    lineHeight: "20px",
+                }, children: "Sources will be auto selected" })), routeStatus === "insufficient" && routeMessage && (_jsxs("div", { style: {
+                    alignItems: "center",
+                    color: "#D32F2F",
+                    display: "flex",
+                    fontFamily: uiFont,
+                    fontSize: "15px",
+                    gap: "8px",
+                    lineHeight: "20px",
+                }, children: [_jsx(AlertCircle, { style: { flexShrink: 0, height: 15, width: 15 } }), routeMessage] }))] }));
+}
+export function DepositIdleForm({ amount, amountMode, onAmountChange, onAmountModeToggle, toToken, totalBalance, usdValue, tokenValue, fromTokens, onOpenSourcePicker, onSetPercent, routeStatus, routeMessage, isAmountReadOnly = false, isCalculatingMax, calculatingPercent, isQuoteRefreshing, hideDestinationTokenDropdownIcon = false, showAutoBadge = true, isSourcePickerDisabled = false, isTokenPickerDisabled = false, onOpenTokenPicker, reserveSourceRows = false, }) {
+    const [pendingPercent, setPendingPercent] = useState(null);
+    const [isAmountFocused, setIsAmountFocused] = useState(false);
+    React.useEffect(() => {
+        if (!isCalculatingMax)
+            setPendingPercent(null);
+    }, [isCalculatingMax]);
+    const handlePercentSelect = (pct) => {
+        setPendingPercent(pct);
+        onSetPercent(pct);
+    };
+    const handleInput = (e) => {
+        if (isAmountReadOnly)
+            return;
+        onAmountChange(sanitizeAmountInput(e.target.value, isUsdMode
+            ? MAX_AMOUNT_DISPLAY_DECIMALS
+            : getTokenInputDecimals(toToken)));
+    };
+    const isUsdMode = amountMode === "usd";
+    const amountDisplayValue = isAmountFocused
+        ? amount
+        : formatAmountInputDisplay(amount);
+    const showTokenPickerDropdownIcon = Boolean(onOpenTokenPicker) &&
+        !isTokenPickerDisabled &&
+        !hideDestinationTokenDropdownIcon;
+    const activePendingPercent = calculatingPercent ?? (isCalculatingMax ? pendingPercent : null);
+    const isMaxCalculating = Boolean(isCalculatingMax && activePendingPercent === 100);
+    const destinationBalanceLabel = isUsdMode
+        ? formatUsdBalanceLabel(toToken?.balanceInFiat)
+        : formatSelectedTokenBalanceLabel(toToken) ||
+            `0 ${toToken?.symbol || ""}`.trim();
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "10px",
+            width: "100%",
+        }, children: [_jsxs("div", { className: "nexus-focus-container", style: {
+                    backgroundColor: "#FFFFFE",
+                    borderColor: border,
+                    borderRadius: "14px",
+                    borderStyle: "solid",
+                    borderWidth: "1px",
+                    boxShadow: "#1616150A 0px 1px 2px",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "14px",
+                    padding: "16px",
+                }, children: [_jsxs("div", { style: {
+                            alignItems: "center",
+                            display: "flex",
+                            justifyContent: "space-between",
+                        }, children: [_jsx("div", { style: {
+                                    color: muted,
+                                    fontFamily: uiFont,
+                                    fontSize: "12px",
+                                    fontWeight: 600,
+                                    letterSpacing: "0.08em",
+                                    lineHeight: "20px",
+                                    textTransform: "uppercase",
+                                }, children: "Deposit" }), _jsxs("div", { style: { alignItems: "center", display: "flex", gap: "4px" }, children: [_jsx("span", { style: {
+                                            color: muted,
+                                            fontFamily: uiFont,
+                                            fontSize: "14px",
+                                            lineHeight: "20px",
+                                        }, children: "Total Balance:" }), _jsxs("span", { style: {
+                                            color: primary,
+                                            fontFamily: uiFont,
+                                            fontSize: "14px",
+                                            fontWeight: 600,
+                                            lineHeight: "20px",
+                                        }, children: ["$", totalBalance] })] })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [_jsxs("div", { style: {
+                                    alignItems: "center",
+                                    display: "flex",
+                                    gap: "12px",
+                                    justifyContent: "space-between",
+                                    width: "100%",
+                                }, children: [_jsxs("div", { style: {
+                                            alignItems: "baseline",
+                                            display: "flex",
+                                            flex: "1 1 0%",
+                                            minWidth: 0,
+                                        }, children: [isMaxCalculating ? (_jsx("div", { "aria-label": "Calculating max amount", className: "animate-pulse", style: {
+                                                    alignSelf: "center",
+                                                    backgroundColor: "#F0F0EF",
+                                                    borderRadius: "8px",
+                                                    height: "44px",
+                                                    maxWidth: "220px",
+                                                    minWidth: "132px",
+                                                    width: "62%",
+                                                } })) : (_jsxs(_Fragment, { children: [isUsdMode && amount && (_jsx("span", { style: {
+                                                            color: primary,
+                                                            fontFamily: '"Delight-Medium", "Delight", system-ui, sans-serif',
+                                                            fontSize: "36px",
+                                                            fontWeight: 500,
+                                                            lineHeight: "44px",
+                                                        }, children: "$" })), _jsx("input", { "aria-readonly": isAmountReadOnly, onBlur: () => setIsAmountFocused(false), onChange: handleInput, onFocus: () => setIsAmountFocused(true), placeholder: "0", style: {
+                                                            background: "transparent",
+                                                            border: "none",
+                                                            boxSizing: "border-box",
+                                                            color: amount ? primary : "#C8C8C6",
+                                                            cursor: isAmountReadOnly ? "default" : "text",
+                                                            fontFamily: '"Delight-Medium", "Delight", system-ui, sans-serif',
+                                                            fontSize: "36px",
+                                                            fontWeight: 500,
+                                                            lineHeight: "44px",
+                                                            minWidth: 0,
+                                                            outline: "none",
+                                                            padding: 0,
+                                                            width: "100%",
+                                                        }, readOnly: isAmountReadOnly, type: "text", value: amountDisplayValue })] })), isCalculatingMax && !isMaxCalculating && (_jsx(Loader2, { className: "animate-spin", style: {
+                                                    alignSelf: "center",
+                                                    color: brand,
+                                                    flexShrink: 0,
+                                                    height: 18,
+                                                    marginLeft: 6,
+                                                    width: 18,
+                                                } }))] }), _jsxs("div", { onClick: onOpenTokenPicker && !isTokenPickerDisabled
+                                            ? onOpenTokenPicker
+                                            : undefined, role: onOpenTokenPicker && !isTokenPickerDisabled
+                                            ? "button"
+                                            : undefined, tabIndex: onOpenTokenPicker && !isTokenPickerDisabled ? 0 : undefined, style: {
+                                            alignItems: "center",
+                                            backgroundColor: "#FFFFFE",
+                                            borderColor: border,
+                                            borderRadius: "999px",
+                                            borderStyle: "solid",
+                                            borderWidth: "1px",
+                                            boxShadow: "#1616150A 0px 1px 2px",
+                                            boxSizing: "border-box",
+                                            cursor: onOpenTokenPicker && !isTokenPickerDisabled
+                                                ? "pointer"
+                                                : "default",
+                                            display: "inline-flex",
+                                            flexShrink: 0,
+                                            gap: "8px",
+                                            paddingBottom: "5px",
+                                            paddingLeft: toToken ? "5px" : "10px",
+                                            paddingRight: "10px",
+                                            paddingTop: "5px",
+                                        }, children: [_jsxs("div", { style: {
+                                                    flexShrink: 0,
+                                                    height: "26px",
+                                                    position: "relative",
+                                                    width: "26px",
+                                                }, children: [_jsx(TokenLogo, { label: toToken?.symbol, size: 26, src: toToken?.logo }), toToken?.chainLogo && (_jsx(TokenLogo, { label: toToken.chainName, size: 12, src: toToken.chainLogo, style: {
+                                                            bottom: -2,
+                                                            outline: "1px solid #FFFFFE",
+                                                            position: "absolute",
+                                                            right: -2,
+                                                            width: 12,
+                                                            height: 12,
+                                                        } }))] }), _jsx("div", { style: {
+                                                    color: primary,
+                                                    fontFamily: uiFont,
+                                                    fontSize: "16px",
+                                                    fontWeight: 500,
+                                                    lineHeight: "24px",
+                                                }, children: toToken?.symbol || "Token" }), showTokenPickerDropdownIcon && (_jsx(ChevronDown, { style: { color: "#5B5B5A", height: 16, width: 16 } }))] })] }), _jsxs("div", { style: {
+                                    alignItems: "center",
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    width: "100%",
+                                    minHeight: "20px",
+                                }, children: [_jsx("div", { style: {
+                                            display: "flex",
+                                            justifyContent: "flex-start",
+                                            alignItems: "center",
+                                            flex: 1,
+                                        }, children: _jsx("button", { disabled: isAmountReadOnly, onClick: onAmountModeToggle, style: {
+                                                background: "transparent",
+                                                border: "none",
+                                                color: isAmountReadOnly ? "#A8A8A6" : muted,
+                                                cursor: isAmountReadOnly ? "default" : "pointer",
+                                                fontFamily: uiFont,
+                                                fontSize: "14px",
+                                                lineHeight: "20px",
+                                                padding: 0,
+                                            }, type: "button", children: isUsdMode
+                                                ? `≈ ${tokenValue || "0"} ${toToken?.symbol || ""} ↕`
+                                                : `≈ $${usdValue || "0"} ↕` }) }), _jsxs("div", { style: {
+                                            alignItems: "center",
+                                            display: "flex",
+                                            justifyContent: "flex-end",
+                                            gap: "5px",
+                                            flex: 1,
+                                            minWidth: 0,
+                                        }, children: [_jsx("span", { style: {
+                                                    color: "#7C7C7A",
+                                                    fontFamily: uiFont,
+                                                    fontSize: "14px",
+                                                    lineHeight: "20px",
+                                                    whiteSpace: "nowrap",
+                                                }, children: "Balance:" }), _jsx("span", { style: {
+                                                    color: primary,
+                                                    fontFamily: uiFont,
+                                                    fontSize: "14px",
+                                                    fontWeight: 500,
+                                                    lineHeight: "20px",
+                                                    whiteSpace: "nowrap",
+                                                }, children: destinationBalanceLabel })] })] }), _jsx(ExactOutPercentButtons, { onSelect: handlePercentSelect, visible: Boolean(toToken) && !isAmountReadOnly })] })] }), _jsx(SharedPayWithSources, { fromTokens: fromTokens, isSourcePickerDisabled: isSourcePickerDisabled, onOpenSourcePicker: onOpenSourcePicker, reserveSourceRows: reserveSourceRows, routeMessage: routeMessage, routeStatus: routeStatus, showAutoBadge: showAutoBadge })] }));
+}