@ab-org/predicate-market-sdk 1.0.0 → 1.0.1

package/dist/ui/WithdrawModal.js

@@ -1,574 +0,0 @@
-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 { getEnv } from "../utils/env";
-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" })] }));
-}
-const FUNDING_TOKEN_SYMBOL = getEnv("FUNDING_TOKEN_SYMBOL");
-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 xxx" → 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 xxx" → "123.46 xxx"） */
-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;
-}
-/** 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, chain, amount = "", balance, status = "idle", receiveAmount: receiveAmountProp, txHash, tokenOptions: tokenOptionsProp, chainOptions: chainOptionsProp, useMerchantApi = false, orderId, withdrawMode, withdrawDirectResult, feeDisplay, fundingChainId, 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;
-    }, [tokenOptionsProp, apiChains]);
-    const chainOptions = useMemo(() => {
-        if (chainOptionsProp?.length)
-            return chainOptionsProp;
-        if (!apiChains?.length || !token)
-            return undefined;
-        return chainsToChainOptionsForToken(apiChains, token);
-    }, [chainOptionsProp, apiChains, token]);
-    /** 当前选中的 token + chain 在 getChains 数据中的合约地址（与询价 / quote 使用同一解析方式） */
-    const resolvedTokenAddress = useMemo(() => {
-        if (!apiChains?.length || !token || !chain)
-            return undefined;
-        return getTokenAddressForChain(apiChains, chain, token);
-    }, [apiChains, token, chain]);
-    // direct 模式的内部激活标记（便于“Start another withdrawal”时重置为表单态）
-    const [directActive, setDirectActive] = useState(false);
-    // 当外部把 withdrawMode 设为 direct 且提供 withdrawDirectResut 时，进入“追踪提现”态
-    useEffect(() => {
-        setDirectActive(withdrawMode === "direct" && Boolean(withdrawDirectResult));
-    }, [withdrawMode, withdrawDirectResult]);
-    const trackingWithdraw = useMemo(() => Boolean(orderId) || directActive, [orderId, directActive]);
-    // 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 xxx 获取 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,
-            dst_token_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",
-        dst_token_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(() => {
-        // 1) 有 orderId：按原逻辑轮询
-        if (orderId) {
-            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);
-        }
-        // 2) 无 orderId 且 direct 模式：用传入的结果构造一个“伪订单”，以复用已提交/成功页
-        if (!orderId && directActive) {
-            const now = new Date().toISOString();
-            const inferredAmountWei = (() => {
-                if (withdrawDirectResult?.dst_token_amount)
-                    return withdrawDirectResult.dst_token_amount;
-                const n = Number(amount || "0");
-                return String(n > 0 ? BigInt(Math.floor(n * 1e18)) : 0n);
-            })();
-            const synthetic = {
-                order_id: withdrawDirectResult?.order_id ?? `direct-${Date.now()}`,
-                status: withdrawDirectResult?.status ?? "pending",
-                chain_id: withdrawDirectResult?.chain_id ?? String(fundingChainId ?? "3131"),
-                dst_token_amount: inferredAmountWei,
-                fee: withdrawDirectResult?.fee ?? feeDisplay,
-                target_chain_id: withdrawDirectResult?.target_chain_id ?? (chain ?? ""),
-                target_address: withdrawDirectResult?.target_address ?? (address ?? ""),
-                funding_tx_hash: withdrawDirectResult?.funding_tx_hash ?? txHash,
-                dst_tx_hash: withdrawDirectResult?.dst_tx_hash,
-                out_tx_hash: withdrawDirectResult?.out_tx_hash,
-                created_at: withdrawDirectResult?.created_at ?? now,
-                updated_at: withdrawDirectResult?.updated_at ?? now,
-                one_time_address: withdrawDirectResult?.one_time_address,
-            };
-            setWithdrawOrder(synthetic);
-            return;
-        }
-        // 3) 默认：清空订单，显示表单
-        setWithdrawOrder(null);
-    }, [orderId, directActive, withdrawDirectResult, amount, feeDisplay, chain, address, txHash, fundingChainId, onShowToast, mockWithdrawOrderState]);
-    // 订单完成回调：支持 orderId 或 direct 模式
-    const completedKeyRef = useRef(null);
-    useEffect(() => {
-        if (withdrawOrder?.status !== "completed")
-            return;
-        const key = orderId ?? withdrawOrder.order_id;
-        if (key && completedKeyRef.current !== key) {
-            completedKeyRef.current = key;
-            onWithdrawCompleted?.();
-        }
-        if (!trackingWithdraw)
-            completedKeyRef.current = null;
-    }, [withdrawOrder?.status, orderId, trackingWithdraw, 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,
-            dst_token_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.dst_token_amount), " ", tokenSymbol] })] }), _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: () => {
-                                                                    // 重置 direct 模式追踪与本地订单，恢复到表单态
-                                                                    setDirectActive(false);
-                                                                    setWithdrawOrder(null);
-                                                                    (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 ", FUNDING_TOKEN_SYMBOL, " = ", 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), " ", FUNDING_TOKEN_SYMBOL] }))] }), _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,
-                                                                        } }), _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: _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 ?? "",
-                            tokenAddress: resolvedTokenAddress ?? apiQuote?.token_address ?? "",
-                            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

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

package/dist/ui/components/CloseButton.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { colors } from "../theme.js";
-export const CloseButton = ({ onClick }) => (_jsx("button", { type: "button", onClick: onClick, "aria-label": "Close", style: {
-        width: 30,
-        height: 30,
-        borderRadius: "50%",
-        background: colors.card,
-        border: "none",
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 0,
-        flexShrink: 0,
-    }, children: _jsx("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", children: _jsx("path", { d: "M4.25 4.25L12.75 12.75M12.75 4.25L4.25 12.75", stroke: colors.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }) }) }));

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

@@ -1,16 +0,0 @@
-export interface CountdownProps {
-    /** 过期时间：ISO 字符串或时间戳（毫秒） */
-    expiresAt: string | number;
-    /** 过期时显示文案，默认 "Expired" */
-    expiredLabel?: string;
-    /** 自定义样式 */
-    style?: React.CSSProperties;
-    /** 是否已过期（由外部控制，用于与 quoteExpired 等联动时不再倒计时） */
-    isExpired?: boolean;
-    /** 倒计时归零时调用一次（可用于自动重新询价等） */
-    onExpired?: () => void;
-}
-/**
- * 倒计时组件：每秒更新，显示距 expiresAt 的剩余时间（MM:SS）。
- */
-export declare function Countdown({ expiresAt, expiredLabel, style, isExpired, onExpired, }: CountdownProps): import("react/jsx-runtime.js").JSX.Element;