@coin-voyage/swapkit 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/components/swap.d.ts

@@ -0,0 +1,2 @@
+import type { SwapProps } from "../types";
+export declare function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaultSlippageBps, onComplete, onError, }?: SwapProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/swap.js

@@ -0,0 +1,295 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAccount } from "@coin-voyage/crypto/hooks";
+import { getChainTypeByChainId, isValidAddress } from "@coin-voyage/shared/chain";
+import { currencyID } from "@coin-voyage/shared/types";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useSwapExecution } from "../hooks/use-swap-execution";
+import { useSwapQuote } from "../hooks/use-swap-quote";
+import { useSwapState } from "../hooks/use-swap-state";
+import { useTokenData } from "../hooks/use-token-data";
+import { isValidSwapAmountInput } from "../lib/amount-input";
+import { getSwapWalletRequirement, shouldShowOutputWalletSelector, shouldUseSeparateOutputWallet, } from "../lib/output-wallet";
+import { buildSwapQuoteRequest, isSameSwap, toCurrencyBase } from "../lib/quote";
+import { useSwapKit } from "../providers/swapkit-context";
+import { SwapKitRoot } from "../styles/root";
+import { ExecutionModal } from "./execution-modal";
+import { ConnectedWallets } from "./connected-wallets";
+import { ArrowDownIcon, ChevronDownIcon, FuelIcon, InfoIcon, PasteIcon, SettingsIcon, WalletIcon } from "./icons";
+import { Modal } from "./modal";
+import { AmountInput, AmountRow, AmountSkeleton, BreakdownBody, BreakdownCard, BreakdownMeta, BreakdownToggle, CardFooter, CardTitle, CardWrap, CompactInput, CurrencyCard, DetailRow, ErrorBox, FieldLabel, FormStack, FreeFeeBadge, Hint, IconButton, InlineActions, InfoButton, InfoWrap, NetworkCost, OutputWalletControl, OutputWalletMenu, OutputWalletOption, OutputWalletTrigger, PrimaryButton, QuoteValueSkeleton, SettingsLabel, SettingsPanel, SettingsRow, SettingsTooltip, SlippageControl, SlippageInput, SlippageInputWrap, SlippageModeButton, Spinner, SwitchButton, TextButton, TokenButton, Toolbar, ToolbarGroup, WalletRequirementButton, } from "./styles";
+import { TokenIcon } from "./token-icon";
+import { TokenPicker } from "./token-picker";
+import { WalletConnector } from "./wallet-connector";
+import { truncateAddress } from "@coin-voyage/shared/utils";
+function DismissibleToolbarGroup({ open, onDismiss, pushRight = false, children, }) {
+    const groupRef = useRef(null);
+    const onDismissRef = useRef(onDismiss);
+    useEffect(() => {
+        onDismissRef.current = onDismiss;
+    }, [onDismiss]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (!groupRef.current?.contains(event.target))
+                onDismissRef.current();
+        };
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onDismissRef.current();
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [open]);
+    return (_jsx(ToolbarGroup, { ref: groupRef, "$pushRight": pushRight, children: children }));
+}
+const SLIPPAGE_TOOLTIP = "Your transaction will revert if the price changes more than the slippage percentage. For crosschain swaps involving multiple steps, this slippage will apply for each swap.";
+function SlippageInfoTooltip({ id }) {
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const open = hovered || focused;
+    return (_jsxs(InfoWrap, { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [_jsx(InfoButton, { type: "button", "aria-label": "About max slippage", "aria-describedby": open ? id : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: _jsx(InfoIcon, {}) }), open && (_jsx(SettingsTooltip, { id: id, role: "tooltip", children: SLIPPAGE_TOOLTIP }))] }));
+}
+function useSwapNotifications({ stage, quoteError, tokenError, onComplete, onError, }) {
+    const onCompleteRef = useRef(onComplete);
+    const onErrorRef = useRef(onError);
+    const lastNotification = useRef(undefined);
+    useEffect(() => {
+        onCompleteRef.current = onComplete;
+        onErrorRef.current = onError;
+    }, [onComplete, onError]);
+    useEffect(() => {
+        if (stage.kind === "idle") {
+            lastNotification.current = undefined;
+            return;
+        }
+        if (stage.kind === "done") {
+            const key = `complete:${stage.orderId}:${stage.txHash}`;
+            if (lastNotification.current !== key) {
+                lastNotification.current = key;
+                onCompleteRef.current?.({ orderId: stage.orderId, transactionHash: stage.txHash });
+            }
+        }
+        else if (stage.kind === "error") {
+            const key = `error:${stage.message}`;
+            if (lastNotification.current !== key) {
+                lastNotification.current = key;
+                onErrorRef.current?.({ message: stage.message });
+            }
+        }
+    }, [stage]);
+    useEffect(() => {
+        const message = quoteError ?? tokenError;
+        if (!message)
+            return;
+        const key = `error:${message}`;
+        if (lastNotification.current !== key) {
+            lastNotification.current = key;
+            onErrorRef.current?.({ message });
+        }
+    }, [quoteError, tokenError]);
+}
+function OutputWalletSelector({ label, open, onOpenChange, onConnect, onPaste, }) {
+    const controlRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const dismiss = (event) => {
+            if (!controlRef.current?.contains(event.target))
+                onOpenChange(false);
+        };
+        const dismissOnEscape = (event) => {
+            if (event.key === "Escape")
+                onOpenChange(false);
+        };
+        document.addEventListener("pointerdown", dismiss);
+        document.addEventListener("keydown", dismissOnEscape);
+        return () => {
+            document.removeEventListener("pointerdown", dismiss);
+            document.removeEventListener("keydown", dismissOnEscape);
+        };
+    }, [onOpenChange, open]);
+    return (_jsxs(OutputWalletControl, { ref: controlRef, children: [_jsxs(OutputWalletTrigger, { type: "button", "aria-label": `Output wallet: ${label}`, "aria-expanded": open, onClick: () => onOpenChange(!open), children: [_jsx("span", { children: label }), _jsx(ChevronDownIcon, { size: 16, up: open })] }), open && (_jsxs(OutputWalletMenu, { role: "menu", "aria-label": "Destination wallet options", children: [_jsxs(OutputWalletOption, { type: "button", role: "menuitem", onClick: onConnect, children: [_jsx("span", { children: "Connect Wallet" }), _jsx(WalletIcon, {})] }), _jsxs(OutputWalletOption, { type: "button", role: "menuitem", onClick: onPaste, children: [_jsx("span", { children: "Paste Address" }), _jsx(PasteIcon, {})] })] }))] }));
+}
+function formatUsd(value) {
+    if (value === undefined || value === null || !Number.isFinite(value))
+        return "$0.00";
+    return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 2 }).format(value);
+}
+function formatPriceImpact(value) {
+    if (value > 0 && value < 0.01)
+        return "<0.01%";
+    return `${value.toFixed(2)}%`;
+}
+function tokenUsdValue(token, amount) {
+    const numericAmount = Number(amount);
+    if (!token?.currency.price_usd || !Number.isFinite(numericAmount))
+        return undefined;
+    return token.currency.price_usd * numericAmount;
+}
+function CurrencyPanel({ side, token, amount, balance, quoteUsd, quoteLoading, disabled, onAmountChange, onSelectToken, onMax, footerAction, }) {
+    const label = side === "input" ? "SELL" : "BUY";
+    return (_jsxs(CurrencyCard, { children: [_jsx(CardTitle, { children: label }), _jsxs(AmountRow, { children: [quoteLoading ? (_jsx(AmountSkeleton, { role: "status", "aria-label": "Loading quoted amount" })) : (_jsx(AmountInput, { "aria-label": side === "input" ? "Sell amount" : "Buy amount", type: "text", inputMode: "decimal", autoComplete: "off", autoCorrect: "off", spellCheck: false, placeholder: "0", value: amount, disabled: disabled, onChange: (event) => {
+                            if (isValidSwapAmountInput(event.target.value))
+                                onAmountChange(event.target.value);
+                        } })), _jsxs(TokenButton, { type: "button", onClick: onSelectToken, "aria-label": `Select ${side} token`, children: [token ? _jsx(TokenIcon, { currency: token.currency }) : null, _jsx("span", { children: token?.currency.symbol ?? "Select" }), _jsx(ChevronDownIcon, {})] })] }), _jsxs(CardFooter, { children: [quoteLoading ? (_jsx(QuoteValueSkeleton, { role: "status", "aria-label": "Loading quoted value" })) : (_jsx("span", { children: formatUsd(quoteUsd ?? tokenUsdValue(token, amount)) })), _jsxs(InlineActions, { children: [balance !== undefined && _jsxs("span", { children: ["Balance: ", balance.toLocaleString()] }), onMax && token && (_jsx(TextButton, { type: "button", "aria-label": `Use maximum ${token.currency.symbol} balance`, onClick: onMax, children: "Max" })), footerAction] })] })] }));
+}
+function ManualWalletModal({ open, chainId, initialValue, onClose, onSave, }) {
+    const [value, setValue] = useState(initialValue ?? "");
+    const [error, setError] = useState(null);
+    const outputAddressId = useId();
+    return (_jsxs(Modal, { open: open, title: "Paste destination address", onClose: onClose, children: [_jsx(FieldLabel, { htmlFor: outputAddressId, children: "Wallet address" }), _jsx(CompactInput, { id: outputAddressId, value: value, autoComplete: "off", onChange: (event) => setValue(event.target.value.trim()) }), error && _jsx(Hint, { "$tone": "danger", children: error }), _jsx(PrimaryButton, { type: "button", onClick: () => {
+                    if (!chainId || !isValidAddress(value, chainId)) {
+                        setError("Enter a valid address for the destination network");
+                        return;
+                    }
+                    setError(null);
+                    onSave(value);
+                    onClose();
+                }, children: "Use address" })] }));
+}
+export function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaultSlippageBps, onComplete, onError, } = {}) {
+    const { mode, theme } = useSwapKit();
+    const slippageInputId = useId();
+    const slippageTooltipId = useId();
+    const { tokens, accounts, isLoading, error: tokenError } = useTokenData();
+    const { accounts: connectedAccounts } = useAccount();
+    const [sourcePickerOpen, setSourcePickerOpen] = useState(false);
+    const [destinationPickerOpen, setDestinationPickerOpen] = useState(false);
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const [connectTarget, setConnectTarget] = useState({
+        open: false,
+    });
+    const [manualWalletOpen, setManualWalletOpen] = useState(false);
+    const [outputWalletMenuOpen, setOutputWalletMenuOpen] = useState(false);
+    const [breakdownOpen, setBreakdownOpen] = useState(false);
+    const connectedChainTypes = new Set(accounts.map((account) => account.chainType));
+    const swapState = useSwapState({
+        currencies: tokens.map((token) => token.currency),
+        connectedChainTypes,
+        defaultSourceCurrency,
+        defaultDestinationCurrency,
+        defaultSlippageBps,
+    });
+    const { sourceId: resolvedSourceId, destinationId: resolvedDestinationId, inputAmount, outputAmount, activeSide, slippageMode, slippagePercent, manualOutputWallet, } = swapState.state;
+    const sourceToken = tokens.find((token) => currencyID(token.currency) === resolvedSourceId);
+    const destinationToken = tokens.find((token) => currencyID(token.currency) === resolvedDestinationId);
+    const sourceChainType = sourceToken ? getChainTypeByChainId(sourceToken.currency.chain_id) : undefined;
+    const destinationChainType = destinationToken ? getChainTypeByChainId(destinationToken.currency.chain_id) : undefined;
+    const inputAccount = connectedAccounts.find((account) => account.chainType === sourceChainType);
+    const outputAccount = connectedAccounts.find((account) => account.chainType === destinationChainType);
+    const separateOutputWallet = shouldUseSeparateOutputWallet(sourceChainType, destinationChainType);
+    const manualAddress = manualOutputWallet && manualOutputWallet.chainId === destinationToken?.currency.chain_id
+        ? manualOutputWallet.address
+        : undefined;
+    const outputAddress = separateOutputWallet ? (manualAddress ?? outputAccount?.address) : inputAccount?.address;
+    const walletRequirement = getSwapWalletRequirement({
+        inputWalletAddress: inputAccount?.address,
+        inputChainType: sourceChainType,
+        shouldRestrictInputChainType: Boolean(sourceToken),
+        outputWalletAddress: outputAddress,
+        outputChainType: destinationChainType,
+    });
+    const showOutputWalletSelector = shouldShowOutputWalletSelector({
+        requiresSeparateOutputWallet: separateOutputWallet,
+        outputChainType: destinationChainType,
+        connectionRequirement: walletRequirement,
+    });
+    const slippage = Number(slippagePercent);
+    const invalidSlippage = slippageMode === "custom" &&
+        (slippagePercent.length === 0 || !Number.isFinite(slippage) || slippage < 0 || slippage > 100);
+    const slippageBps = slippageMode === "custom" && !invalidSlippage ? Math.round(slippage * 100) : undefined;
+    const activeAmount = activeSide === "input" ? inputAmount : outputAmount;
+    const quoteRequest = useMemo(() => invalidSlippage ||
+        isSameSwap(sourceToken?.currency, destinationToken?.currency, inputAccount?.address, outputAddress)
+        ? null
+        : buildSwapQuoteRequest({
+            amount: activeAmount,
+            activeSide,
+            source: sourceToken?.currency,
+            destination: destinationToken?.currency,
+            slippageBps,
+        }), [
+        activeAmount,
+        activeSide,
+        destinationToken?.currency,
+        inputAccount?.address,
+        invalidSlippage,
+        outputAddress,
+        slippageBps,
+        sourceToken?.currency,
+    ]);
+    const execution = useSwapExecution(sourceChainType);
+    const quoteState = useSwapQuote(quoteRequest, execution.stage.kind === "idle");
+    useSwapNotifications({ stage: execution.stage, quoteError: quoteState.error, tokenError, onComplete, onError });
+    const displayedInputAmount = activeSide === "output" && quoteState.quote ? quoteState.quote.input.amount.ui : inputAmount;
+    const displayedOutputAmount = activeSide === "input" && quoteState.quote ? quoteState.quote.output.amount.ui : outputAmount;
+    const sourceBalance = sourceToken?.balance;
+    const insufficientBalance = sourceBalance !== undefined && Number(displayedInputAmount) > sourceBalance;
+    const sameSwap = isSameSwap(sourceToken?.currency, destinationToken?.currency, inputAccount?.address, outputAddress);
+    const canExecute = Boolean(quoteState.quote &&
+        quoteRequest &&
+        inputAccount?.address &&
+        outputAddress &&
+        walletRequirement.target === "none" &&
+        !insufficientBalance &&
+        !sameSwap &&
+        !invalidSlippage);
+    const reverseTokens = useCallback(() => {
+        swapState.reverse(displayedInputAmount, displayedOutputAmount);
+        setOutputWalletMenuOpen(false);
+    }, [displayedInputAmount, displayedOutputAmount, swapState]);
+    const executeSwap = useCallback(async () => {
+        if (!quoteRequest || !sourceToken || !destinationToken || !inputAccount?.address || !outputAddress)
+            return;
+        const request = {
+            trade_type: quoteRequest.trade_type,
+            amount: quoteRequest.amount,
+            source: {
+                currency: toCurrencyBase(sourceToken.currency),
+                sender_address: inputAccount.address,
+                ...(slippageBps === undefined ? {} : { slippage_bps: slippageBps }),
+            },
+            destination: { currency: toCurrencyBase(destinationToken.currency), recipient: outputAddress },
+        };
+        await execution.execute(request, inputAccount.address);
+    }, [destinationToken, execution, inputAccount, outputAddress, quoteRequest, slippageBps, sourceToken]);
+    const selectToken = (side, token) => {
+        swapState.selectCurrency(side, currencyID(token.currency));
+    };
+    const quoteSummary = quoteState.quote
+        ? `1 ${quoteState.quote.input.currency.symbol} ≈ ${(Number(quoteState.quote.output.amount.ui) / Math.max(Number(quoteState.quote.input.amount.ui), Number.EPSILON)).toLocaleString(undefined, { maximumSignificantDigits: 6 })} ${quoteState.quote.output.currency.symbol}`
+        : "Swap details";
+    return (_jsx(SwapKitRoot, { "$mode": mode, "$customTheme": theme, "data-swapkit-root": "", children: _jsxs(FormStack, { children: [_jsxs(Toolbar, { children: [_jsx(ConnectedWallets, {}), _jsxs(DismissibleToolbarGroup, { open: settingsOpen, onDismiss: () => setSettingsOpen(false), pushRight: true, children: [_jsxs(IconButton, { type: "button", "aria-label": "Swap settings", "aria-expanded": settingsOpen, onClick: () => setSettingsOpen((open) => !open), children: [_jsx(SettingsIcon, {}), _jsx("span", { children: slippageMode === "auto" ? "Auto" : `${slippagePercent || "0"} %` })] }), settingsOpen && (_jsxs(SettingsPanel, { role: "dialog", "aria-label": "Swap settings", children: [_jsxs(SettingsRow, { children: [_jsxs(SettingsLabel, { children: ["Max slippage", _jsx(SlippageInfoTooltip, { id: slippageTooltipId })] }), _jsxs(SlippageControl, { children: [_jsx(SlippageModeButton, { type: "button", "aria-label": "Use automatic slippage", "aria-pressed": slippageMode === "auto", "$active": slippageMode === "auto", onClick: () => swapState.setSlippageMode("auto"), children: "Auto" }), _jsxs(SlippageInputWrap, { "$active": slippageMode === "custom", children: [_jsx(SlippageInput, { id: slippageInputId, "aria-label": "Slippage tolerance", inputMode: "decimal", value: slippagePercent, onClick: () => swapState.setSlippageMode("custom"), onFocus: () => swapState.setSlippageMode("custom"), onChange: (event) => {
+                                                                        if (isValidSwapAmountInput(event.target.value)) {
+                                                                            swapState.setSlippagePercent(event.target.value);
+                                                                        }
+                                                                    } }), _jsx("span", { children: "%" })] })] })] }), slippageMode === "custom" &&
+                                            (slippage >= 40 ? (_jsx(Hint, { "$tone": "danger", children: "This slippage tolerance may cause a severely unfavorable trade." })) : slippage >= 6 ? (_jsx(Hint, { "$tone": "warning", children: "High slippage can result in a worse execution price." })) : null)] }))] })] }), _jsxs(CardWrap, { children: [_jsx(CurrencyPanel, { side: "input", token: sourceToken, amount: displayedInputAmount, balance: sourceBalance, quoteUsd: quoteState.quote?.input.amount.value_usd, quoteLoading: quoteState.loading && activeSide === "output", disabled: execution.stage.kind !== "idle", onAmountChange: (value) => {
+                                swapState.setAmount("input", value);
+                            }, onSelectToken: () => setSourcePickerOpen(true), onMax: sourceBalance === undefined
+                                ? undefined
+                                : () => {
+                                    swapState.setAmount("input", sourceBalance.toString());
+                                } }), _jsx(SwitchButton, { type: "button", "aria-label": "Swap tokens", onClick: reverseTokens, disabled: !sourceToken || !destinationToken, children: _jsx(ArrowDownIcon, { size: 24 }) })] }), _jsx(CurrencyPanel, { side: "output", token: destinationToken, amount: displayedOutputAmount, quoteUsd: quoteState.quote?.output.amount.value_usd, quoteLoading: quoteState.loading && activeSide === "input", disabled: execution.stage.kind !== "idle", onAmountChange: (value) => {
+                        swapState.setAmount("output", value);
+                    }, onSelectToken: () => setDestinationPickerOpen(true), footerAction: showOutputWalletSelector ? (_jsx(OutputWalletSelector, { label: outputAddress ? truncateAddress(outputAddress) : "Connect Wallet", open: outputWalletMenuOpen, onOpenChange: setOutputWalletMenuOpen, onConnect: () => {
+                            setOutputWalletMenuOpen(false);
+                            setConnectTarget({ open: true, chainType: destinationChainType });
+                        }, onPaste: () => {
+                            setOutputWalletMenuOpen(false);
+                            setManualWalletOpen(true);
+                        } })) : undefined }), quoteState.error && _jsx(ErrorBox, { children: quoteState.error }), tokenError && _jsx(ErrorBox, { children: tokenError }), insufficientBalance && _jsxs(ErrorBox, { children: ["Insufficient ", sourceToken?.currency.symbol, " balance"] }), sameSwap && _jsx(ErrorBox, { children: "Select a different token or destination wallet" }), (quoteState.loading || quoteState.quote) && (_jsxs(BreakdownCard, { children: [_jsxs(BreakdownToggle, { type: "button", "aria-expanded": breakdownOpen, onClick: () => setBreakdownOpen((open) => !open), children: [_jsx("span", { children: quoteState.loading ? "Finding the best route…" : quoteSummary }), _jsxs(BreakdownMeta, { children: [quoteState.quote && (_jsxs(NetworkCost, { children: [_jsx(FuelIcon, {}), _jsx("span", { children: formatUsd(quoteState.quote.input.breakdown?.gas?.value_usd) })] })), _jsx(ChevronDownIcon, { size: 16, up: breakdownOpen })] })] }), breakdownOpen && (_jsxs(BreakdownBody, { children: [quoteState.quote?.output.amount_out_minimum && (_jsxs(DetailRow, { children: [_jsx("span", { children: "Receive at least" }), _jsxs("strong", { children: [quoteState.quote.output.amount_out_minimum.ui, " ", quoteState.quote.output.currency.symbol] })] })), _jsxs(DetailRow, { children: [_jsx("span", { children: "Price impact" }), _jsx("strong", { children: quoteState.quote ? formatPriceImpact(quoteState.quote.price_impact) : "—" })] }), _jsxs(DetailRow, { children: [_jsx("span", { children: "Network cost" }), _jsx("strong", { children: formatUsd(quoteState.quote?.input.breakdown?.gas?.value_usd) })] }), _jsxs(DetailRow, { children: [_jsx("span", { children: "Total fees" }), quoteState.quote?.input.breakdown?.fees?.total_fee.value_usd === 0 ? (_jsx(FreeFeeBadge, { children: "Free" })) : (_jsx("strong", { children: formatUsd(quoteState.quote?.input.breakdown?.fees?.total_fee.value_usd) }))] })] }))] })), walletRequirement.target !== "none" ? (_jsx(WalletRequirementButton, { type: "button", onClick: () => setConnectTarget({ open: true, chainType: walletRequirement.chainType }), children: walletRequirement.label })) : (_jsxs(PrimaryButton, { type: "button", disabled: !canExecute || quoteState.loading, onClick: () => void executeSwap(), children: [quoteState.loading ? _jsx(Spinner, {}) : null, isLoading ? "Loading tokens…" : quoteState.loading ? "Fetching quote…" : "Swap"] })), _jsx(TokenPicker, { open: sourcePickerOpen, title: "Select Token", tokens: tokens, selectedId: resolvedSourceId, onClose: () => setSourcePickerOpen(false), onSelect: (token) => selectToken("input", token) }), _jsx(TokenPicker, { open: destinationPickerOpen, title: "Select Token", tokens: tokens, selectedId: resolvedDestinationId, onClose: () => setDestinationPickerOpen(false), onSelect: (token) => selectToken("output", token) }), _jsx(WalletConnector, { open: connectTarget.open, chainType: connectTarget.chainType, onClose: () => setConnectTarget({ open: false }) }), manualWalletOpen && (_jsx(ManualWalletModal, { open: true, chainId: destinationToken?.currency.chain_id, initialValue: manualAddress, onClose: () => setManualWalletOpen(false), onSave: (address) => {
+                        if (destinationToken)
+                            swapState.setManualOutputWallet({ chainId: destinationToken.currency.chain_id, address });
+                    } })), _jsx(ExecutionModal, { stage: execution.stage, onClose: () => {
+                        const terminal = ["done", "refunded"].includes(execution.stage.kind);
+                        execution.reset();
+                        if (terminal)
+                            swapState.reset();
+                    } })] }) }));
+}

package/dist/components/token-icon.d.ts

@@ -0,0 +1,5 @@
+import { type Currency } from "@coin-voyage/shared/types";
+export declare function TokenIcon({ currency, size }: {
+    currency: Currency;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/token-icon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChainId } from "@coin-voyage/shared/types";
+import { getChainLogo, getChainName } from "@coin-voyage/shared/chain";
+import { useState } from "react";
+import { ChainBadge, TokenFallback, TokenIconWrap, TokenImage } from "./styles";
+export function TokenIcon({ currency, size = 24 }) {
+    const [failed, setFailed] = useState(false);
+    return (_jsxs(TokenIconWrap, { "$size": size, children: [!currency.image_uri || failed ? (_jsx(TokenFallback, { "aria-hidden": true, children: currency.symbol.slice(0, 3).toUpperCase() })) : (_jsx(TokenImage, { src: currency.image_uri, alt: "", onError: () => setFailed(true) })), _jsx(ChainBadge, { "$size": size >= 40 ? 16 : 12, "$fillBackground": currency.chain_id === ChainId.SUI, role: "img", "aria-label": `${getChainName(currency.chain_id)} network`, children: getChainLogo(currency.chain_id) })] }));
+}

package/dist/components/token-picker.d.ts

@@ -0,0 +1,11 @@
+import type { SwapToken } from "../hooks/use-token-data";
+interface TokenPickerProps {
+    open: boolean;
+    title: string;
+    tokens: SwapToken[];
+    selectedId?: string;
+    onClose: () => void;
+    onSelect: (token: SwapToken) => void;
+}
+export declare function TokenPicker({ open, title, tokens, selectedId, onClose, onSelect }: TokenPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/token-picker.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getChainLogo, getChainName } from "@coin-voyage/shared/chain";
+import { ChainId, currencyID } from "@coin-voyage/shared/types";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ChevronDownIcon, SearchIcon } from "./icons";
+import { AllNetworksLogo, EmptyState, NetworkButton, NetworkLogo, NetworkMenu, NetworkOption, PickerBody, PickerControls, SearchInput, SearchField, TokenBalance, TokenList, TokenMeta, TokenOption, } from "./styles";
+import { Modal } from "./modal";
+import { TokenIcon } from "./token-icon";
+function formatUsd(value) {
+    if (value === undefined || !Number.isFinite(value))
+        return "";
+    return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 2 }).format(value);
+}
+function tokenDescription(token) {
+    const address = token.currency.address;
+    if (!address)
+        return token.currency.symbol;
+    const compactAddress = address.length > 14 ? `${address.slice(0, 6)}…${address.slice(-5)}` : address;
+    return `${token.currency.symbol}  |  ${compactAddress}`;
+}
+function AllNetworksMark() {
+    return (_jsxs(AllNetworksLogo, { role: "img", "aria-label": "All networks", children: [_jsx("span", { children: getChainLogo(ChainId.BTC) }), _jsx("span", { children: getChainLogo(ChainId.SUI) }), _jsx("span", { children: getChainLogo(ChainId.ROBINHOOD) })] }));
+}
+export function TokenPicker({ open, title, tokens, selectedId, onClose, onSelect }) {
+    const [query, setQuery] = useState("");
+    const [selectedChainId, setSelectedChainId] = useState();
+    const [networkMenuOpen, setNetworkMenuOpen] = useState(false);
+    const networkButtonRef = useRef(null);
+    const networkMenuRef = useRef(null);
+    const networks = useMemo(() => [...new Set(tokens.map(({ currency }) => currency.chain_id))].sort((left, right) => (getChainName(left) ?? "").localeCompare(getChainName(right) ?? "")), [tokens]);
+    const filtered = useMemo(() => {
+        const onSelectedNetwork = selectedChainId
+            ? tokens.filter(({ currency }) => currency.chain_id === selectedChainId)
+            : tokens;
+        const normalized = query.trim().toLowerCase();
+        if (!normalized)
+            return onSelectedNetwork;
+        return onSelectedNetwork.filter(({ currency }) => [currency.symbol, currency.name, getChainName(currency.chain_id), currency.address]
+            .filter(Boolean)
+            .some((value) => value.toLowerCase().includes(normalized)));
+    }, [query, selectedChainId, tokens]);
+    const selectedNetworkName = selectedChainId ? (getChainName(selectedChainId) ?? "Unknown Network") : "All Networks";
+    useEffect(() => {
+        if (!networkMenuOpen)
+            return;
+        const closeOnOutsideClick = (event) => {
+            const target = event.target;
+            if (!networkButtonRef.current?.contains(target) && !networkMenuRef.current?.contains(target)) {
+                setNetworkMenuOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", closeOnOutsideClick);
+        return () => document.removeEventListener("mousedown", closeOnOutsideClick);
+    }, [networkMenuOpen]);
+    return (_jsx(Modal, { open: open, title: title, onClose: onClose, children: _jsxs(PickerBody, { children: [_jsxs(PickerControls, { children: [_jsxs(SearchField, { children: [_jsx(SearchIcon, {}), _jsx(SearchInput, { type: "search", value: query, placeholder: "Search", "aria-label": "Search tokens", onChange: (event) => setQuery(event.target.value) })] }), _jsxs(NetworkButton, { ref: networkButtonRef, type: "button", "aria-label": selectedNetworkName, "aria-expanded": networkMenuOpen, onClick: () => setNetworkMenuOpen((current) => !current), children: [selectedChainId ? (_jsx(NetworkLogo, { "aria-hidden": true, children: getChainLogo(selectedChainId) })) : (_jsx(AllNetworksMark, {})), _jsx(ChevronDownIcon, { size: 16, up: networkMenuOpen })] })] }), networkMenuOpen && (_jsxs(NetworkMenu, { ref: networkMenuRef, role: "listbox", "aria-label": "Networks", children: [_jsxs(NetworkOption, { type: "button", role: "option", "aria-selected": selectedChainId === undefined, onClick: () => {
+                                setSelectedChainId(undefined);
+                                setNetworkMenuOpen(false);
+                            }, children: [_jsx(AllNetworksMark, {}), "All Networks"] }), networks.map((chainId) => (_jsxs(NetworkOption, { type: "button", role: "option", "aria-selected": chainId === selectedChainId, onClick: () => {
+                                setSelectedChainId(chainId);
+                                setNetworkMenuOpen(false);
+                            }, children: [_jsx(NetworkLogo, { "aria-hidden": true, children: getChainLogo(chainId) }), getChainName(chainId)] }, chainId)))] })), _jsxs(TokenList, { role: "listbox", "aria-label": title, children: [filtered.map((token) => {
+                            const id = currencyID(token.currency);
+                            return (_jsxs(TokenOption, { type: "button", role: "option", "aria-label": `${token.currency.symbol} ${token.currency.name}`, "aria-selected": id === selectedId, onClick: () => {
+                                    onSelect(token);
+                                    setQuery("");
+                                    onClose();
+                                }, children: [_jsx(TokenIcon, { currency: token.currency, size: 40 }), _jsxs(TokenMeta, { children: [_jsx("strong", { children: token.currency.name }), _jsx("small", { children: tokenDescription(token) })] }), _jsxs(TokenBalance, { children: [_jsx("strong", { children: formatUsd(token.balanceUsd) }), _jsx("small", { children: token.balance === undefined ? "" : token.balance.toLocaleString() })] })] }, id));
+                        }), filtered.length === 0 && _jsx(EmptyState, { children: "No matching tokens" })] })] }) }));
+}

package/dist/components/wallet-connector.d.ts

@@ -0,0 +1,8 @@
+import type { ChainType } from "@coin-voyage/shared/types";
+interface WalletConnectorProps {
+    open: boolean;
+    chainType?: ChainType;
+    onClose: () => void;
+}
+export declare function WalletConnector({ open, chainType, onClose }: WalletConnectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/wallet-connector.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInstalledWallets, useUniversalConnect } from "@coin-voyage/crypto/hooks";
+import { getChainTypeName } from "@coin-voyage/shared/chain";
+import { useMemo, useState } from "react";
+import { EmptyState, Hint, MultichainBadge, WalletList, WalletOption, WalletOptionMeta } from "./styles";
+import { Modal } from "./modal";
+import { WalletIconDisplay } from "./wallet-icon";
+export function WalletConnector({ open, chainType, onClose }) {
+    const installedWallets = useInstalledWallets();
+    const wallets = useMemo(() => chainType
+        ? installedWallets.filter((wallet) => wallet.connectors.some((connector) => connector.chainType === chainType))
+        : installedWallets, [chainType, installedWallets]);
+    const [error, setError] = useState(null);
+    const { connect } = useUniversalConnect({
+        onSuccess: onClose,
+        onError: (connectError) => {
+            const message = connectError instanceof Error ? connectError.message : "Unable to connect wallet";
+            if (!message.toLowerCase().includes("rejected"))
+                setError(message);
+        },
+    });
+    return (_jsxs(Modal, { open: open, title: "Connect wallet", onClose: onClose, children: [_jsx(WalletList, { children: wallets.map((wallet) => {
+                    const connector = wallet.connectors.find((candidate) => !chainType || candidate.chainType === chainType);
+                    if (!connector)
+                        return null;
+                    const chainTypes = [...new Set(wallet.connectors.map((candidate) => candidate.chainType))];
+                    const capabilityLabel = chainTypes.map((candidate) => getChainTypeName(candidate)).join(" · ");
+                    return (_jsxs(WalletOption, { type: "button", "aria-label": `Connect ${wallet.name} wallet`, onClick: () => {
+                            setError(null);
+                            void connect({ walletConnector: connector });
+                        }, children: [_jsx(WalletIconDisplay, { icon: wallet.icon, name: wallet.name }), _jsxs(WalletOptionMeta, { children: [_jsxs("span", { children: [_jsx("strong", { children: wallet.name }), chainTypes.length > 1 && _jsx(MultichainBadge, { children: "Multichain" })] }), _jsx("small", { children: chainTypes.length > 1 ? capabilityLabel : `${capabilityLabel} wallet` })] })] }, wallet.id));
+                }) }), wallets.length === 0 && _jsx(EmptyState, { children: "No compatible installed wallets found" }), error && _jsx(Hint, { "$tone": "danger", children: error })] }));
+}

package/dist/components/wallet-icon.d.ts

@@ -0,0 +1,5 @@
+export declare function WalletIconDisplay({ icon, name, size }: {
+    icon?: string;
+    name: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/wallet-icon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WalletIcon } from "./icons";
+import { WalletFallback, WalletIconFrame, WalletImage } from "./styles";
+export function WalletIconDisplay({ icon, name, size = 32 }) {
+    return (_jsx(WalletIconFrame, { "$size": size, children: icon ? (_jsx(WalletImage, { src: icon, alt: `${name} wallet` })) : name ? (_jsx(WalletFallback, { "aria-hidden": true, children: name.slice(0, 2).toUpperCase() })) : (_jsx(WalletIcon, { size: Math.max(16, size - 8) })) }));
+}

package/dist/hooks/use-order-status.d.ts

@@ -0,0 +1,9 @@
+import type { ApiClient } from "@coin-voyage/shared/api";
+import type { WebhookEventPayload } from "@coin-voyage/shared/types";
+interface UseOrderStatusProps {
+    api: ApiClient;
+    orderId?: string;
+    onEvent: (event: WebhookEventPayload) => void;
+}
+export declare function useOrderStatus({ api, orderId, onEvent }: UseOrderStatusProps): void;
+export {};

package/dist/hooks/use-order-status.js

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react";
+export function useOrderStatus({ api, orderId, onEvent }) {
+    const onEventRef = useRef(onEvent);
+    useEffect(() => {
+        onEventRef.current = onEvent;
+    }, [onEvent]);
+    useEffect(() => {
+        if (!orderId || typeof WebSocket === "undefined")
+            return;
+        let active = true;
+        let socket;
+        let reconnectTimer;
+        const connect = () => {
+            if (!active)
+                return;
+            socket = api.subscribeOrderStatus();
+            socket.onOpen(() => socket?.subscribe(orderId));
+            socket.onMessage((message) => {
+                if (message.type === "event")
+                    onEventRef.current(message.data);
+            });
+            socket.onClose(() => {
+                if (active)
+                    reconnectTimer = setTimeout(connect, 2000);
+            });
+            socket.onError(() => socket?.close());
+        };
+        connect();
+        return () => {
+            active = false;
+            if (reconnectTimer)
+                clearTimeout(reconnectTimer);
+            socket?.close();
+        };
+    }, [api, orderId]);
+}

package/dist/hooks/use-swap-execution.d.ts

@@ -0,0 +1,7 @@
+import type { ChainType, SwapExecuteRequest } from "@coin-voyage/shared/types";
+import { type SwapStage } from "../lib/execution";
+export declare function useSwapExecution(chainType: ChainType | undefined): {
+    stage: SwapStage;
+    execute: (request: SwapExecuteRequest, fromAddress: string) => Promise<void>;
+    reset: () => void;
+};

package/dist/hooks/use-swap-execution.js

@@ -0,0 +1,105 @@
+import { usePrepareTransaction } from "@coin-voyage/crypto/hooks";
+import { WebhookEventType } from "@coin-voyage/shared/types";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { buildSwapExecuteTransactions } from "../lib/execution";
+import { useSwapKit } from "../providers/swapkit-context";
+import { useOrderStatus } from "./use-order-status";
+function errorMessage(error, fallback) {
+    const message = error instanceof Error ? error.message.trim() : "";
+    return message || fallback;
+}
+function isRejected(error) {
+    const message = error instanceof Error ? error.message.toLowerCase() : "";
+    return message.includes("user rejected") || message.includes("rejected the request");
+}
+export function useSwapExecution(chainType) {
+    const { api } = useSwapKit();
+    const transactionActions = usePrepareTransaction(chainType);
+    const [stage, setStage] = useState({ kind: "idle" });
+    const [orderId, setOrderId] = useState();
+    const stageRef = useRef(stage);
+    const runId = useRef(0);
+    useEffect(() => {
+        stageRef.current = stage;
+    }, [stage]);
+    const reset = useCallback(() => {
+        runId.current += 1;
+        setOrderId(undefined);
+        setStage({ kind: "idle" });
+    }, []);
+    const onOrderEvent = useCallback((event) => {
+        const current = stageRef.current;
+        if (!("swapData" in current) || !current.swapData || event.order.id !== current.swapData.order_id)
+            return;
+        const swapData = event.order.payment
+            ? { ...current.swapData, status: event.order.status, data: event.order.payment }
+            : { ...current.swapData, status: event.order.status };
+        const sourceTxHash = event.order.payment?.source_tx_hash ?? ("sourceTxHash" in current ? current.sourceTxHash : undefined);
+        if (event.event === WebhookEventType.ORDER_COMPLETED) {
+            const txHash = event.order.payment?.destination_tx_hash ?? sourceTxHash;
+            if (txHash)
+                setStage({ kind: "done", swapData, orderId: event.order.id, sourceTxHash, txHash });
+            setOrderId(undefined);
+        }
+        else if (event.event === WebhookEventType.ORDER_REFUNDED && event.order.payment?.refund_tx_hash) {
+            setStage({
+                kind: "refunded",
+                swapData,
+                orderId: event.order.id,
+                sourceTxHash,
+                refundTxHash: event.order.payment.refund_tx_hash,
+            });
+            setOrderId(undefined);
+        }
+        else if (event.event === WebhookEventType.ORDER_ERROR) {
+            setStage({ kind: "error", swapData, message: "Swap failed" });
+            setOrderId(undefined);
+        }
+        else if (event.event === WebhookEventType.ORDER_EXECUTING) {
+            setStage({ kind: "executing", swapData, orderId: event.order.id, sourceTxHash });
+        }
+        else if (event.event === WebhookEventType.ORDER_CONFIRMING ||
+            event.event === WebhookEventType.ORDER_PARTIAL_PAYMENT) {
+            setStage({ kind: "source_confirming", swapData, orderId: event.order.id, sourceTxHash });
+        }
+    }, []);
+    useOrderStatus({ api, orderId, onEvent: onOrderEvent });
+    const execute = useCallback(async (request, fromAddress) => {
+        if (!transactionActions)
+            return;
+        const currentRun = ++runId.current;
+        let swapData = null;
+        setStage({ kind: "confirming" });
+        try {
+            const response = await api.swapExecute(request);
+            if (currentRun !== runId.current)
+                return;
+            if (response.error || !response.data) {
+                setStage({ kind: "error", swapData: null, message: response.error?.message || "Failed to prepare swap" });
+                return;
+            }
+            swapData = response.data;
+            setOrderId(swapData.order_id);
+            const transactions = buildSwapExecuteTransactions(swapData, fromAddress);
+            let sourceTxHash;
+            for (const [paymentStepIndex, transaction] of transactions.entries()) {
+                setStage({ kind: "awaiting_payment", swapData, paymentStepIndex });
+                sourceTxHash = await transactionActions.execute(transaction);
+                if (currentRun !== runId.current)
+                    return;
+                if (!sourceTxHash)
+                    throw new Error("No transaction hash returned");
+            }
+            setStage({ kind: "source_confirming", swapData, orderId: swapData.order_id, sourceTxHash });
+        }
+        catch (error) {
+            if (isRejected(error)) {
+                reset();
+                return;
+            }
+            setOrderId(undefined);
+            setStage({ kind: "error", swapData, message: errorMessage(error, "Transaction failed") });
+        }
+    }, [api, reset, transactionActions]);
+    return { stage, execute, reset };
+}