@ab-org/predicate-market-sdk 0.0.1

package/dist/ui/WalletSelectionModal.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors, fonts, radii } from "./theme.js";
+const placeholderIcon = (label) => (_jsx("div", { style: {
+        width: 40,
+        height: 40,
+        borderRadius: "12px",
+        background: colors.cardRaised,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: colors.textSecondary,
+        fontWeight: 600,
+    }, children: label.slice(0, 2).toUpperCase() }));
+export const WalletSelectionModal = ({ title = "Connect Wallet", options, onSelect, }) => {
+    const sections = [
+        {
+            id: "social",
+            label: "Social Wallets",
+            items: options.filter((item) => item.category === "social"),
+        },
+        {
+            id: "plugin",
+            label: "Plugin Wallets",
+            items: options.filter((item) => item.category === "plugin"),
+        },
+    ].filter((section) => section.items.length > 0);
+    return (_jsxs("div", { style: {
+            width: "min(720px, 90vw)",
+            background: colors.card,
+            borderRadius: radii.xl,
+            border: `1px solid ${colors.border}`,
+            padding: "40px",
+            display: "flex",
+            flexDirection: "column",
+            gap: 32,
+            color: colors.textPrimary,
+            fontFamily: fonts.family,
+        }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 26, fontWeight: 600 }, children: title }), _jsx("p", { style: { color: colors.textSecondary, marginTop: 8 }, children: "Choose social or plugin wallets" })] }), sections.map((section) => (_jsxs("section", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [_jsx("div", { style: { fontSize: 14, textTransform: "uppercase", letterSpacing: 1.5, color: colors.textSecondary }, children: section.label }), _jsx("div", { style: {
+                            display: "grid",
+                            gap: 16,
+                            gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+                        }, children: section.items.map((option) => (_jsxs("button", { onClick: () => onSelect?.(option.id), style: {
+                                borderRadius: radii.lg,
+                                border: `1px solid ${colors.border}`,
+                                background: colors.cardRaised,
+                                padding: "20px",
+                                display: "flex",
+                                gap: 14,
+                                alignItems: "center",
+                                textAlign: "left",
+                                cursor: "pointer",
+                                color: colors.textPrimary,
+                            }, children: [option.icon ?? placeholderIcon(option.label), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 600 }, children: option.label }), _jsx("div", { style: { color: colors.textSecondary, fontSize: 14 }, children: option.description })] })] }, option.id))) })] }, section.id)))] }));
+};

package/dist/ui/WithdrawModal.d.ts

@@ -0,0 +1,47 @@
+import type { ChangeEventHandler } from "react";
+import { type SelectOption } from "./components/DropdownField.js";
+export type WithdrawUiStatus = "idle" | "pending" | "success" | "manual_review";
+export interface WithdrawModalProps {
+    address?: string;
+    token?: string;
+    tokenSymbol?: string;
+    chain?: string;
+    amount?: string;
+    balance?: string;
+    status?: WithdrawUiStatus;
+    receiveAmount?: string;
+    txHash?: string;
+    eta?: string;
+    tokenOptions?: SelectOption[];
+    chainOptions?: SelectOption[];
+    /** 使用 Merchant API：getChains 拉取 token/chain，quote(withdraw) 询价 */
+    useMerchantApi?: boolean;
+    /** 创建订单后传入，用于轮询提现订单状态 */
+    orderId?: string;
+    /** 成功页 Fee 展示：优先用订单接口返回的 fee，若后端未返回则用此值（如询价时的 fee），均无则显示 "—" */
+    feeDisplay?: string;
+    /** 广播后的 funding tx 所在链 id，与 txHash 一起用于展示「查看交易」链接 */
+    fundingChainId?: string;
+    /** 构建链上交易浏览器链接（已弃用，使用 getExplorerUrl） */
+    explorerTxUrl?: (chainId: string, txHash: string) => string;
+    onShowToast?: (message: string) => void;
+    onAddressChange?: ChangeEventHandler<HTMLInputElement>;
+    onTokenSelect?: (id: string) => void;
+    onChainSelect?: (id: string) => void;
+    onAmountChange?: ChangeEventHandler<HTMLInputElement>;
+    onMaxClick?: () => void;
+    /** 提交时传入当前表单值（收款地址、金额、所选 token、所选 chain），由调用方执行提现 */
+    onSubmit?: (payload: {
+        toAddress: string;
+        amount: string;
+        token: string;
+        chain: string;
+    }) => void;
+    /** 提现订单状态变为 completed 时调用，用于调用方刷新余额等 */
+    onWithdrawCompleted?: () => void;
+    /** 点击「Start another withdrawal」时调用；应由调用方清空 orderId、重置 amount，恢复到待提交状态（不关弹层）。未传则退化为 onClose。 */
+    onStartAnotherWithdrawal?: () => void;
+    onSignIn?: () => void;
+    onClose?: () => void;
+}
+export declare const WithdrawModal: ({ address, token, tokenSymbol, chain, amount, balance, status, receiveAmount: receiveAmountProp, txHash, tokenOptions: tokenOptionsProp, chainOptions: chainOptionsProp, useMerchantApi, orderId, feeDisplay, fundingChainId, explorerTxUrl, onShowToast, onAddressChange, onTokenSelect, onChainSelect, onAmountChange, onMaxClick, onSubmit, onWithdrawCompleted, onStartAnotherWithdrawal, onSignIn, onClose, }: WithdrawModalProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/WithdrawModal.js

@@ -0,0 +1,528 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { ModalFrame } from "./components/ModalFrame.js";
+import { StepIndicator } from "./components/StepIndicator.js";
+import { DropdownField } from "./components/DropdownField.js";
+import { Countdown } from "./components/Countdown.js";
+import { LoginRequiredOverlay } from "./components/LoginRequiredOverlay.js";
+import { useSession } from "./hooks/useSession.js";
+import { colors, fonts, radii } from "./theme.js";
+import { getChains, quote, getWithdrawOrder, } from "../modules/api.js";
+import { getExplorerUrl } from "../utils/explorer.js";
+import { SuccessIcon } from "./components/Success";
+function CopyIcon() {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1", stroke: "currentColor", strokeWidth: "1.2", fill: "none" }), _jsx("path", { d: "M3 11V3a1 1 0 0 1 1-1h8", stroke: "currentColor", strokeWidth: "1.2", fill: "none" })] }));
+}
+function chainsToTokenOptions(chains) {
+    const bySymbol = new Map();
+    for (const c of chains) {
+        for (const t of c.tokens) {
+            if (!bySymbol.has(t.symbol))
+                bySymbol.set(t.symbol, t.symbol);
+        }
+    }
+    return Array.from(bySymbol.entries()).map(([id, symbol]) => ({
+        id,
+        label: symbol,
+        subtitle: symbol,
+    }));
+}
+function chainsToChainOptionsForToken(chains, tokenSymbol) {
+    return chains
+        .filter((c) => c.tokens.some((t) => t.symbol === tokenSymbol))
+        .map((c) => ({ id: c.chain_id, label: c.network, subtitle: c.chain_id }));
+}
+function getTokenAddressForChain(chains, chainId, tokenSymbol) {
+    const chain = chains.find((c) => c.chain_id === chainId);
+    return chain?.tokens.find((t) => t.symbol === tokenSymbol)?.address;
+}
+/** 从 balance 字符串解析出数值部分（如 "123.46 USD1" → 123.46） */
+function parseBalanceNumber(balance) {
+    const match = balance.trim().match(/^(\d*\.?\d*)/);
+    if (!match)
+        return null;
+    const n = Number(match[1]);
+    return Number.isNaN(n) ? null : n;
+}
+/** 将 balance 字符串格式化为小数点后 2 位（如 "123.456789012 USD1" → "123.46 USD1"） */
+function formatBalanceTo2Decimals(balance) {
+    const match = balance.trim().match(/^(\d*\.?\d*)(.*)$/);
+    if (!match)
+        return balance;
+    const numPart = match[1];
+    const suffix = match[2].trim() ? " " + match[2].trim() : "";
+    const n = Number(numPart);
+    if (Number.isNaN(n))
+        return balance;
+    const formatted = n.toFixed(2);
+    return formatted + suffix;
+}
+const WEI_PER_ETHER = 1e18;
+/** Wei (string) to ether display string; keeps up to 6 decimal places, strips trailing zeros */
+function weiToEtherDisplay(wei) {
+    const s = (wei || "0").trim().replace(/^0+/, "") || "0";
+    if (s === "0")
+        return "0";
+    const padded = s.padStart(19, "0");
+    const intPart = padded.slice(0, Math.max(0, padded.length - 18));
+    const decPart = padded.slice(-18).replace(/0+$/, "");
+    const combined = decPart ? `${intPart}.${decPart}` : intPart;
+    const num = Number(combined);
+    if (Number.isNaN(num))
+        return wei;
+    const fixed = num.toFixed(6).replace(/\.?0+$/, "");
+    return fixed;
+}
+const POLL_INTERVAL_MS = 4000;
+export const WithdrawModal = ({ address = "", token, tokenSymbol = "USDT", chain, amount = "", balance, status = "idle", receiveAmount: receiveAmountProp, txHash, tokenOptions: tokenOptionsProp, chainOptions: chainOptionsProp, useMerchantApi = false, orderId, feeDisplay, fundingChainId, explorerTxUrl, onShowToast, onAddressChange, onTokenSelect, onChainSelect, onAmountChange, onMaxClick, onSubmit, onWithdrawCompleted, onStartAnotherWithdrawal, onSignIn, onClose, }) => {
+    const session = useSession();
+    const addressInputRef = useRef(null);
+    const [addressInputFocused, setAddressInputFocused] = useState(false);
+    const [amountInputFocused, setAmountInputFocused] = useState(false);
+    const [apiChains, setApiChains] = useState(null);
+    const [apiQuote, setApiQuote] = useState(null);
+    const [withdrawOrder, setWithdrawOrder] = useState(null);
+    const [loadingChains, setLoadingChains] = useState(false);
+    const [loadingQuote, setLoadingQuote] = useState(false);
+    // 默认收款地址为当前用户钱包地址
+    // useEffect(() => {
+    //   if (session?.address && (address === "" || address === undefined) && onAddressChange) {
+    //     onAddressChange({
+    //       target: { value: session.address },
+    //     } as ChangeEvent<HTMLInputElement>);
+    //   }
+    // }, [session?.address, address, onAddressChange]);
+    const tokenOptions = useMemo(() => {
+        const raw = tokenOptionsProp?.length
+            ? tokenOptionsProp
+            : apiChains?.length
+                ? chainsToTokenOptions(apiChains)
+                : undefined;
+        if (!raw?.length)
+            return undefined;
+        return raw.filter((o) => o.id !== "USD1" && o.label !== "USD1");
+    }, [tokenOptionsProp, apiChains]);
+    const chainOptions = useMemo(() => {
+        if (chainOptionsProp?.length)
+            return chainOptionsProp;
+        if (!apiChains?.length || !token)
+            return undefined;
+        return chainsToChainOptionsForToken(apiChains, token);
+    }, [chainOptionsProp, apiChains, token]);
+    const trackingWithdraw = useMemo(() => Boolean(orderId), [orderId]);
+    // Default focus on recipient address when form is visible; white border while focused, revert on blur
+    useEffect(() => {
+        if (trackingWithdraw)
+            return;
+        const t = requestAnimationFrame(() => {
+            addressInputRef.current?.focus();
+        });
+        return () => cancelAnimationFrame(t);
+    }, [trackingWithdraw]);
+    // 选中 token+chain 后需要 chains 数据才能询价，因此无论 useMerchantApi 与否都拉取 getChains
+    const shouldLoadChains = useMerchantApi || Boolean(token && chain);
+    useEffect(() => {
+        if (!shouldLoadChains)
+            return;
+        setLoadingChains(true);
+        getChains()
+            .then((res) => setApiChains(res?.chains ?? {}))
+            .finally(() => setLoadingChains(false));
+    }, [shouldLoadChains]);
+    // 选中 token + chain 后即询价；未填 amount 时用 1 USD1 获取 rate
+    useEffect(() => {
+        if (!apiChains?.length || !token || !chain) {
+            setApiQuote(null);
+            return;
+        }
+        const tokenAddress = getTokenAddressForChain(apiChains, chain, token);
+        if (!tokenAddress) {
+            setApiQuote(null);
+            return;
+        }
+        const amountNum = amount && Number(amount) > 0 ? Number(amount) : 1;
+        const amountWei = String(BigInt(Math.floor(amountNum * 1e18)));
+        setLoadingQuote(true);
+        quote({
+            direction: "withdraw",
+            chain_id: chain,
+            token_address: tokenAddress,
+            usd1_amount: amountWei,
+        })
+            .then((q) => setApiQuote(q ?? null))
+            .catch(() => {
+            setApiQuote({
+                token_address: tokenAddress,
+                token_symbol: token,
+                token_decimals: 18,
+                rate: "1",
+                chain_id: Number(chain) || 56,
+                token_amount: amountWei,
+                expires_at: new Date(Date.now() + 60000).toISOString(),
+            });
+        })
+            .finally(() => setLoadingQuote(false));
+    }, [apiChains, token, chain, amount]);
+    useEffect(() => {
+        if (tokenOptions?.length !== 1 || !onTokenSelect)
+            return;
+        const onlyId = tokenOptions[0].id;
+        if (token === onlyId)
+            return;
+        onTokenSelect(onlyId);
+    }, [tokenOptions, token, onTokenSelect]);
+    useEffect(() => {
+        if (chainOptions?.length !== 1 || !onChainSelect)
+            return;
+        const onlyId = chainOptions[0].id;
+        if (chain === onlyId)
+            return;
+        onChainSelect(onlyId);
+    }, [chainOptions, chain, onChainSelect]);
+    const mockWithdrawOrderState = useMemo(() => ({
+        order_id: orderId ?? "",
+        status: "pending",
+        chain_id: "56",
+        usd1_amount: "0",
+        target_chain_id: chain ?? "1",
+        target_address: address ?? "0x",
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+    }), [orderId, chain, address]);
+    useEffect(() => {
+        if (!orderId) {
+            setWithdrawOrder(null);
+            return;
+        }
+        const t = setInterval(() => {
+            getWithdrawOrder(orderId)
+                .then((order) => {
+                setWithdrawOrder(order);
+                if (order.status === "completed" && onShowToast) {
+                    onShowToast("Withdrawal completed");
+                }
+            })
+                .catch(() => setWithdrawOrder(mockWithdrawOrderState));
+        }, POLL_INTERVAL_MS);
+        getWithdrawOrder(orderId)
+            .then(setWithdrawOrder)
+            .catch(() => setWithdrawOrder(mockWithdrawOrderState));
+        return () => clearInterval(t);
+    }, [orderId, onShowToast, mockWithdrawOrderState]);
+    const completedOrderIdRef = useRef(null);
+    useEffect(() => {
+        if (withdrawOrder?.status === "completed" && orderId && completedOrderIdRef.current !== orderId) {
+            completedOrderIdRef.current = orderId;
+            onWithdrawCompleted?.();
+        }
+        if (!orderId)
+            completedOrderIdRef.current = null;
+    }, [withdrawOrder?.status, orderId, onWithdrawCompleted]);
+    const receiveAmount = useMemo(() => {
+        if (receiveAmountProp) {
+            const n = Number(receiveAmountProp);
+            if (!Number.isNaN(n))
+                return n.toFixed(2);
+            return receiveAmountProp;
+        }
+        if (!apiQuote?.token_amount || !apiQuote?.token_symbol)
+            return undefined;
+        const amount = Number(apiQuote.token_amount);
+        const formatted = Number.isNaN(amount) ? apiQuote.token_amount : amount.toFixed(2);
+        return `≈ ${formatted} (wei) ${apiQuote.token_symbol}`;
+    }, [receiveAmountProp, apiQuote]);
+    const quoteExpired = useMemo(() => {
+        if (!apiQuote?.expires_at)
+            return false;
+        try {
+            return new Date(apiQuote.expires_at).getTime() < Date.now();
+        }
+        catch {
+            return false;
+        }
+    }, [apiQuote?.expires_at]);
+    const handleRefreshQuote = useCallback(() => {
+        if (!apiChains?.length || !token || !chain)
+            return;
+        const tokenAddress = getTokenAddressForChain(apiChains, chain, token);
+        if (!tokenAddress)
+            return;
+        const amountNum = amount && Number(amount) > 0 ? Number(amount) : 1;
+        const amountWei = String(BigInt(Math.floor(amountNum * 1e18)));
+        setLoadingQuote(true);
+        quote({
+            direction: "withdraw",
+            chain_id: chain,
+            token_address: tokenAddress,
+            usd1_amount: amountWei,
+        })
+            .then((q) => setApiQuote(q ?? null))
+            .catch(() => {
+            setApiQuote({
+                token_address: tokenAddress,
+                token_symbol: token,
+                token_decimals: 18,
+                rate: "1",
+                chain_id: Number(chain) || 56,
+                token_amount: amountWei,
+                expires_at: new Date(Date.now() + 60000).toISOString(),
+            });
+        })
+            .finally(() => setLoadingQuote(false));
+    }, [apiChains, token, chain, amount]);
+    const handleAmountChange = useCallback((e) => {
+        const raw = e.target.value;
+        const maxNum = balance ? parseBalanceNumber(balance) : null;
+        if (maxNum != null && raw !== "" && raw !== ".") {
+            const num = Number(raw);
+            if (!Number.isNaN(num) && num > maxNum) {
+                onAmountChange?.({
+                    ...e,
+                    target: { ...e.target, value: String(maxNum) },
+                });
+                return;
+            }
+        }
+        onAmountChange?.(e);
+    }, [balance, onAmountChange]);
+    if (!session) {
+        return _jsx(LoginRequiredOverlay, { title: "Withdraw", onSignIn: onSignIn, onClose: onClose });
+    }
+    const activeStep = amount ? 3 : chain ? 2 : token ? 1 : address ? 0 : 0;
+    const canSubmit = address && token && chain && amount;
+    const isSubmitting = status !== "idle";
+    /** 已提交提现（有 orderId）：隐藏表单；处理中显示等待，完成后显示成功说明，关闭弹层后由调用方清空 orderId 再开可继续提现 */
+    const orderInProgress = trackingWithdraw && (!withdrawOrder || withdrawOrder.status !== "completed");
+    const orderSucceeded = trackingWithdraw && withdrawOrder?.status === "completed";
+    return (_jsxs(ModalFrame, { onClose: onClose, contentStyle: {
+            justifyContent: "space-between",
+            padding: "24px",
+        }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: _jsx("h2", { style: { margin: 0, fontSize: 24, fontWeight: 600, lineHeight: 1.4 }, children: "Withdraw" }) }), _jsxs("div", { style: { display: "flex", gap: 16 }, children: [_jsx("div", { style: {
+                                    opacity: trackingWithdraw ? 0 : 1,
+                                    maxWidth: trackingWithdraw ? 0 : 48,
+                                    overflow: "hidden",
+                                    transition: "opacity 0.3s ease, max-width 0.35s ease",
+                                }, children: _jsx(StepIndicator, { steps: 4, stepActive: [!!address, !!token, !!chain, !!apiQuote], activeStep: activeStep }) }), _jsxs("div", { style: { flex: 1, position: "relative", minHeight: 400 }, children: [_jsxs("div", { style: {
+                                            position: "absolute",
+                                            inset: 0,
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            gap: 12,
+                                            padding: "0 16px",
+                                            opacity: trackingWithdraw ? 1 : 0,
+                                            maxHeight: trackingWithdraw ? 400 : 0,
+                                            overflow: "hidden",
+                                            pointerEvents: trackingWithdraw ? "auto" : "none",
+                                            transition: "opacity 0.3s ease, max-height 0.35s ease",
+                                        }, children: [orderInProgress && (_jsxs("div", { style: {
+                                                    display: "flex",
+                                                    flexDirection: "column",
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                    gap: 32,
+                                                }, children: [_jsx("span", { style: {
+                                                            display: "inline-block",
+                                                            width: 60,
+                                                            height: 60,
+                                                            border: `3px solid ${colors.border}`,
+                                                            borderTopColor: colors.textPrimary,
+                                                            borderRadius: "50%",
+                                                            animation: "withdraw-modal-spin 0.8s linear infinite",
+                                                        }, "aria-hidden": true }), _jsx("span", { style: {
+                                                            fontSize: 20,
+                                                            fontWeight: 600,
+                                                            color: colors.textPrimary,
+                                                            textAlign: "center",
+                                                            fontFamily: fonts.family,
+                                                            lineHeight: 1.4,
+                                                        }, children: "Processing withdrawal..." })] })), orderSucceeded && (() => {
+                                                const destTxHash = withdrawOrder.dst_tx_hash ?? withdrawOrder.out_tx_hash;
+                                                const targetChainName = apiChains?.find((c) => c.chain_id === withdrawOrder.target_chain_id)?.network ?? withdrawOrder.target_chain_id ?? "—";
+                                                const explorerUrl = destTxHash && withdrawOrder.target_chain_id
+                                                    ? getExplorerUrl(withdrawOrder.target_chain_id, { txId: destTxHash })
+                                                    : null;
+                                                const copyHash = () => {
+                                                    if (destTxHash && typeof navigator?.clipboard?.writeText === "function") {
+                                                        navigator.clipboard.writeText(destTxHash);
+                                                        onShowToast?.("Copied");
+                                                    }
+                                                };
+                                                return (_jsxs("div", { style: {
+                                                        display: "flex",
+                                                        flexDirection: "column",
+                                                        alignItems: "center",
+                                                        gap: 20,
+                                                        width: "100%",
+                                                        maxWidth: 412,
+                                                    }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 24 }, children: [_jsx("span", { style: {
+                                                                        display: "flex",
+                                                                        alignItems: "center",
+                                                                        justifyContent: "center",
+                                                                        width: 60,
+                                                                        height: 60,
+                                                                        borderRadius: "50%",
+                                                                        color: "#22c55e",
+                                                                        fontSize: 40,
+                                                                        lineHeight: 1,
+                                                                        fontWeight: 700,
+                                                                    }, "aria-hidden": true, children: _jsx(SuccessIcon, {}) }), _jsx("span", { style: {
+                                                                        fontSize: 20,
+                                                                        fontWeight: 600,
+                                                                        color: colors.textPrimary,
+                                                                        textAlign: "center",
+                                                                        fontFamily: fonts.family,
+                                                                        lineHeight: 1.4,
+                                                                    }, children: "Withdrawal successful" })] }), _jsxs("div", { style: {
+                                                                display: "flex",
+                                                                flexDirection: "column",
+                                                                gap: 4,
+                                                                width: "100%",
+                                                            }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", height: 36 }, children: [_jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textSecondary }, children: "Amount" }), _jsxs("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textPrimary }, children: [weiToEtherDisplay(withdrawOrder.usd1_amount), " ", tokenSymbol ?? "USD1"] })] }), _jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", height: 36 }, children: [_jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textSecondary }, children: "Fee" }), _jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textPrimary }, children: withdrawOrder.fee ?? feeDisplay ?? "—" })] }), _jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", height: 36 }, children: [_jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textSecondary }, children: "Network" }), _jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textPrimary }, children: targetChainName })] }), destTxHash && (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", minHeight: 38 }, children: [_jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textSecondary }, children: "Transaction Hash" }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [explorerUrl ? (_jsxs("a", { href: explorerUrl, target: "_blank", rel: "noopener noreferrer", style: { fontSize: 14, color: colors.textPrimary, textDecoration: "underline" }, children: [destTxHash.slice(0, 10), "...", destTxHash.slice(-8)] })) : (_jsxs("span", { style: { fontSize: 14, color: colors.textPrimary }, children: [destTxHash.slice(0, 10), "...", destTxHash.slice(-8)] })), _jsx("button", { type: "button", onClick: copyHash, "aria-label": "Copy hash", style: {
+                                                                                        padding: 0,
+                                                                                        border: "none",
+                                                                                        background: "transparent",
+                                                                                        color: colors.textPrimary,
+                                                                                        cursor: "pointer",
+                                                                                        display: "flex",
+                                                                                        alignItems: "center",
+                                                                                        justifyContent: "center",
+                                                                                        width: 16,
+                                                                                        height: 16,
+                                                                                    }, children: _jsx(CopyIcon, {}) })] })] }))] }), _jsx("div", { style: { paddingTop: 24, width: "100%", display: "flex", justifyContent: "center" }, children: _jsx("button", { type: "button", onClick: () => (onStartAnotherWithdrawal ?? onClose)?.(), style: {
+                                                                    width: 274,
+                                                                    padding: "12px 0",
+                                                                    borderRadius: radii.full,
+                                                                    border: `1px solid ${colors.buttonDisabledBorder}`,
+                                                                    background: colors.textPrimary,
+                                                                    color: "#121214",
+                                                                    fontSize: 16,
+                                                                    fontWeight: 500,
+                                                                    lineHeight: 1.4,
+                                                                    fontFamily: fonts.family,
+                                                                    cursor: "pointer",
+                                                                    textAlign: "center",
+                                                                }, children: "Start another withdrawal" }) })] }));
+                                            })()] }), _jsx("div", { style: {
+                                            opacity: trackingWithdraw ? 0 : 1,
+                                            maxHeight: trackingWithdraw ? 0 : 1200,
+                                            overflow: "hidden",
+                                            pointerEvents: trackingWithdraw ? "none" : "auto",
+                                            transition: "opacity 0.3s ease, max-height 0.35s ease",
+                                        }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 40 }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" }, children: [_jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textPrimary }, children: "Recipient address" }), _jsx("div", { style: {
+                                                                display: "flex",
+                                                                alignItems: "center",
+                                                                height: 44,
+                                                                padding: "0 16px",
+                                                                borderRadius: radii.input,
+                                                                border: `1px solid ${addressInputFocused ? colors.borderFocused : colors.border}`,
+                                                                boxSizing: "border-box",
+                                                            }, children: _jsx("input", { ref: addressInputRef, value: address, onChange: onAddressChange, onFocus: () => setAddressInputFocused(true), onBlur: () => setAddressInputFocused(false), spellCheck: false, placeholder: "0x", style: {
+                                                                    flex: 1,
+                                                                    border: "none",
+                                                                    outline: "none",
+                                                                    background: "transparent",
+                                                                    color: colors.textPrimary,
+                                                                    fontSize: 14,
+                                                                    fontFamily: fonts.family,
+                                                                    lineHeight: 1.4,
+                                                                    padding: 0,
+                                                                } }) })] }), _jsx(DropdownField, { label: "Select token", placeholder: loadingChains ? "Loading…" : "Token", value: token, options: tokenOptions, onSelect: onTokenSelect }), _jsx(DropdownField, { label: "Select chain", placeholder: loadingChains ? "Loading…" : "Chain", value: chain, options: chainOptions, onSelect: onChainSelect }), apiQuote && token && chain && (_jsx("div", { style: {
+                                                        padding: "12px 16px",
+                                                        borderRadius: radii.card,
+                                                        border: `1px solid ${colors.border}`,
+                                                        display: "flex",
+                                                        flexDirection: "column",
+                                                        gap: 8,
+                                                    }, children: loadingQuote ? (_jsx("span", { style: { fontSize: 13, color: colors.textSecondary }, children: "Loading\u2026" })) : (_jsxs(_Fragment, { children: [_jsxs("span", { style: { fontSize: 13, color: colors.textSecondary }, children: ["Rate: 1 USD1 = ", apiQuote.rate, " ", apiQuote.token_symbol] }), apiQuote.expires_at && (_jsx(Countdown, { expiresAt: apiQuote.expires_at, isExpired: quoteExpired, onExpired: handleRefreshQuote })), quoteExpired && (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: { fontSize: 13, color: "#f59e0b" }, children: "Quote expired, please refresh" }), _jsx("button", { type: "button", onClick: handleRefreshQuote, style: {
+                                                                            padding: "4px 12px",
+                                                                            fontSize: 12,
+                                                                            borderRadius: radii.pill,
+                                                                            border: `1px solid ${colors.border}`,
+                                                                            background: "transparent",
+                                                                            color: colors.textPrimary,
+                                                                            cursor: "pointer",
+                                                                            fontFamily: fonts.family,
+                                                                        }, children: "Refresh" })] }))] })) })), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textPrimary }, children: "Amount" }), balance && (_jsxs("span", { style: { fontSize: 13, lineHeight: 1.2, color: colors.textSecondary }, children: ["Balance: \u00A0", formatBalanceTo2Decimals(balance)] }))] }), _jsxs("div", { style: {
+                                                                    display: "flex",
+                                                                    alignItems: "center",
+                                                                    justifyContent: "space-between",
+                                                                    height: 48,
+                                                                    padding: "0 16px",
+                                                                    borderRadius: radii.input,
+                                                                    border: `1px solid ${amountInputFocused ? colors.borderFocused : colors.border}`,
+                                                                    boxSizing: "border-box",
+                                                                }, children: [_jsx("input", { value: amount, onChange: handleAmountChange, onFocus: () => setAmountInputFocused(true), onBlur: () => setAmountInputFocused(false), placeholder: "0.00", type: "text", inputMode: "decimal", style: {
+                                                                            flex: 1,
+                                                                            border: "none",
+                                                                            outline: "none",
+                                                                            background: "transparent",
+                                                                            color: amount ? colors.textPrimary : colors.textSecondary,
+                                                                            fontSize: 14,
+                                                                            fontFamily: fonts.family,
+                                                                            lineHeight: 1.4,
+                                                                            padding: 0,
+                                                                        } }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: {
+                                                                                    fontSize: 14,
+                                                                                    lineHeight: 1.4,
+                                                                                    color: colors.textSecondary,
+                                                                                    fontFamily: fonts.family,
+                                                                                }, children: "USD1" }), _jsx("button", { type: "button", onClick: onMaxClick, style: {
+                                                                                    background: colors.textPrimary,
+                                                                                    border: "none",
+                                                                                    borderRadius: radii.pill,
+                                                                                    padding: "2px 8px",
+                                                                                    fontSize: 12,
+                                                                                    lineHeight: 1.4,
+                                                                                    fontWeight: 400,
+                                                                                    color: "#15181D",
+                                                                                    fontFamily: fonts.family,
+                                                                                    cursor: "pointer",
+                                                                                }, children: "Max" })] })] })] }) })] }) })] })] })] }), _jsxs("div", { style: { padding: "20px 20px 0", display: "flex", flexDirection: "column", gap: 10, alignItems: "center" }, id: "WithdrawModalReceiveAmount", children: [!trackingWithdraw && amount && Number(amount) > 0 && (_jsxs("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textPrimary }, children: ["You will receive : ", receiveAmount] })), orderInProgress && withdrawOrder && (() => {
+                        const fundingHash = txHash ?? withdrawOrder?.funding_tx_hash;
+                        const showFundingLink = fundingHash && fundingChainId;
+                        try {
+                            return (_jsx("div", { style: { display: "none", flexDirection: "column", gap: 6, alignItems: "center" }, children: showFundingLink && (_jsx("a", { href: getExplorerUrl(fundingChainId, { txId: fundingHash }), target: "_blank", rel: "noopener noreferrer", style: { fontSize: 13, color: colors.textPrimary, textDecoration: "underline" }, children: "Withdraw request transaction on explorer" })) }));
+                        }
+                        catch {
+                            return (_jsx("span", { style: { fontSize: 13, color: colors.textPrimary }, children: "Withdraw in progress." }));
+                        }
+                    })(), orderInProgress && withdrawOrder && (_jsxs("span", { style: { fontSize: 13, color: colors.textSecondary, display: "none", alignItems: "center", gap: 6 }, children: ["Order status: ", withdrawOrder.status, _jsx("span", { style: {
+                                    display: "inline-block",
+                                    width: 10,
+                                    height: 10,
+                                    border: `2px solid ${colors.textSecondary}`,
+                                    borderTopColor: "transparent",
+                                    borderRadius: "50%",
+                                    animation: "withdraw-modal-spin 0.7s linear infinite",
+                                }, "aria-hidden": true })] })), _jsx("style", { children: `@keyframes withdraw-modal-spin { to { transform: rotate(360deg); } }` }), orderSucceeded || trackingWithdraw ? null : (_jsx(SubmitButton, { disabled: !canSubmit || isSubmitting, status: status, onClick: () => onSubmit?.({
+                            toAddress: address,
+                            amount: amount ?? "",
+                            token: token ?? "",
+                            chain: chain ?? "",
+                        }) }))] })] }));
+};
+const SubmitButton = ({ disabled, status, onClick }) => {
+    const labels = {
+        idle: disabled ? "Please fill in withdrawal information" : "Submit",
+        pending: "Processing...",
+        success: "Withdrawal successful",
+        manual_review: "Under manual review",
+    };
+    const isDisabled = disabled || status !== "idle";
+    return (_jsx("button", { type: "button", disabled: isDisabled, onClick: onClick, style: {
+            width: 364,
+            padding: "12px 0",
+            borderRadius: radii.full,
+            border: isDisabled ? `1px solid ${colors.buttonDisabledBorder}` : "none",
+            background: isDisabled ? colors.buttonDisabledBg : colors.textPrimary,
+            color: isDisabled ? colors.textSecondary : "#15181D",
+            fontSize: 16,
+            fontWeight: 500,
+            lineHeight: 1.4,
+            fontFamily: fonts.family,
+            cursor: isDisabled ? "not-allowed" : "pointer",
+            textAlign: "center",
+        }, children: labels[status] }));
+};

package/dist/ui/components/CloseButton.d.ts

@@ -0,0 +1,4 @@
+export interface CloseButtonProps {
+    onClick?: () => void;
+}
+export declare const CloseButton: ({ onClick }: CloseButtonProps) => import("react/jsx-runtime.js").JSX.Element;