@coin-voyage/swapkit 0.4.0-beta.0 → 0.5.0

package/dist/components/swap-recipient.test.js

@@ -12,9 +12,16 @@ vi.mock("../hooks/use-swap-execution", () => ({
 }));
 vi.mock("../hooks/use-token-data", () => ({
     useTokenData: () => ({
-        tokens: [{ currency: source, balance: "2" }, { currency: destination }, { currency: solana }],
+        tokens: [
+            { currency: source, balance: "2" },
+            { currency: destination, balance: "7.5" },
+            { currency: unheld },
+            { currency: solana },
+            { currency: zcash },
+        ],
         accounts,
         isLoading: false,
+        balancesLoaded: true,
         refreshBalances: vi.fn(),
     }),
 }));
@@ -34,7 +41,12 @@ vi.mock("./wallet-connector", () => ({ WalletConnector: () => null }));
 vi.mock("./execution-modal", () => ({ ExecutionModal: () => null }));
 const sender = "0x1111111111111111111111111111111111111111";
 const recipient = "0x2222222222222222222222222222222222222222";
-const accounts = [{ address: sender, chainType: ChainType.EVM }];
+const bitcoinWallet = "bc1q048uhadg63tlua07htxaufxgqe5yz798vlwqxw";
+const zcashRecipient = "t1QidWX3ojKEXAYJSr7S8pUDUQ2T81dgYEc";
+const accounts = [
+    { address: sender, chainType: ChainType.EVM },
+    { address: bitcoinWallet, chainType: ChainType.UTXO },
+];
 const source = {
     id: "eth",
     chain_id: ChainId.ETH,
@@ -50,6 +62,14 @@ const destination = {
     symbol: "USDC",
     decimals: 6,
 };
+const unheld = {
+    id: "dai",
+    chain_id: ChainId.ETH,
+    address: "0x6B175474E89094C44Da98b954EedeAC495271d0F",
+    name: "Dai",
+    symbol: "DAI",
+    decimals: 18,
+};
 const solana = {
     id: "sol",
     chain_id: ChainId.SOL,
@@ -57,6 +77,13 @@ const solana = {
     symbol: "SOL",
     decimals: 9,
 };
+const zcash = {
+    id: "zec",
+    chain_id: ChainId.ZEC,
+    name: "Zcash",
+    symbol: "ZEC",
+    decimals: 8,
+};
 beforeEach(() => execute.mockClear());
 afterEach(cleanup);
 function renderSwap(output = destination) {
@@ -87,6 +114,23 @@ describe("Swap destination recipient", () => {
             destination: expect.objectContaining({ recipient }),
         }), sender);
     });
+    it("shows the buy token balance until a recipient is pasted", () => {
+        renderSwap();
+        expect(screen.getByText("Balance: 7.5")).toBeTruthy();
+        openRecipientModal();
+        fireEvent.change(screen.getByRole("textbox", { name: "Wallet address" }), { target: { value: recipient } });
+        fireEvent.click(screen.getByRole("button", { name: "Use address" }));
+        expect(screen.queryByText("Balance: 7.5")).toBeNull();
+        expect(screen.getByText("Balance: 2")).toBeTruthy();
+    });
+    it("shows a zero buy balance for a token the connected wallet does not hold", () => {
+        renderSwap(unheld);
+        expect(screen.getByText("Balance: 0")).toBeTruthy();
+    });
+    it("shows no buy balance when no wallet is connected for the destination chain", () => {
+        renderSwap(solana);
+        expect(screen.queryByText("Balance: 0")).toBeNull();
+    });
     it("rejects invalid same-chain destination addresses", () => {
         renderSwap();
         openRecipientModal();
@@ -102,4 +146,19 @@ describe("Swap destination recipient", () => {
         expect(screen.getByRole("menuitem", { name: "Connect Wallet" })).toBeTruthy();
         expect(screen.getByRole("menuitem", { name: "Paste Address" })).toBeTruthy();
     });
+    it("requires a pasted address for Zcash instead of the connected Bitcoin wallet", () => {
+        renderSwap(zcash);
+        expect(screen.queryByRole("button", { name: "Swap" })).toBeNull();
+        expect(screen.getByRole("button", { name: "Swap tokens" }).hasAttribute("disabled")).toBe(true);
+        fireEvent.click(screen.getByRole("button", { name: /^Output wallet:/ }));
+        expect(screen.queryByRole("menuitem", { name: "Connect Wallet" })).toBeNull();
+        fireEvent.click(screen.getByRole("button", { name: "Paste Zcash Address" }));
+        fireEvent.change(screen.getByRole("textbox", { name: "Wallet address" }), { target: { value: bitcoinWallet } });
+        fireEvent.click(screen.getByRole("button", { name: "Use address" }));
+        expect(screen.getByText("Enter a valid address for the destination network")).toBeTruthy();
+        fireEvent.change(screen.getByRole("textbox", { name: "Wallet address" }), { target: { value: zcashRecipient } });
+        fireEvent.click(screen.getByRole("button", { name: "Use address" }));
+        fireEvent.click(screen.getByRole("button", { name: "Swap" }));
+        expect(execute).toHaveBeenCalledWith(expect.objectContaining({ destination: expect.objectContaining({ recipient: zcashRecipient }) }), sender);
+    });
 });

package/dist/components/swap-settings.d.ts

@@ -0,0 +1,9 @@
+import type { SlippageMode } from "../hooks/use-swap-state";
+import type { ResolvedSlippage } from "../lib/slippage";
+export declare function SwapSettings({ slippageMode, slippagePercent, warning, onSlippageModeChange, onSlippagePercentChange, }: {
+    slippageMode: SlippageMode;
+    slippagePercent: string;
+    warning?: ResolvedSlippage["warning"];
+    onSlippageModeChange: (mode: SlippageMode) => void;
+    onSlippagePercentChange: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/swap-settings.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { useDismiss } from "../hooks/use-dismiss";
+import { isValidSwapAmountInput } from "../lib/amount-input";
+import { InfoIcon, SettingsIcon } from "./icons";
+import { Hint, IconButton, InfoButton, InfoWrap, SettingsLabel, SettingsPanel, SettingsRow, SettingsTooltip, SlippageControl, SlippageInput, SlippageInputWrap, SlippageModeButton, ToolbarGroup, } from "./styles";
+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 }))] }));
+}
+export function SwapSettings({ slippageMode, slippagePercent, warning, onSlippageModeChange, onSlippagePercentChange, }) {
+    const [open, setOpen] = useState(false);
+    const groupRef = useRef(null);
+    const slippageInputId = useId();
+    const slippageTooltipId = useId();
+    useDismiss(groupRef, open, () => setOpen(false));
+    return (_jsxs(ToolbarGroup, { ref: groupRef, "$pushRight": true, children: [_jsxs(IconButton, { type: "button", "aria-label": "Swap settings", "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [_jsx(SettingsIcon, {}), _jsx("span", { children: slippageMode === "auto" ? "Auto" : `${slippagePercent || "0"} %` })] }), open && (_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: () => onSlippageModeChange("auto"), children: "Auto" }), _jsxs(SlippageInputWrap, { "$active": slippageMode === "custom", children: [_jsx(SlippageInput, { id: slippageInputId, "aria-label": "Slippage tolerance", inputMode: "decimal", value: slippagePercent, onClick: () => onSlippageModeChange("custom"), onFocus: () => onSlippageModeChange("custom"), onChange: (event) => {
+                                                    if (isValidSwapAmountInput(event.target.value))
+                                                        onSlippagePercentChange(event.target.value);
+                                                } }), _jsx("span", { children: "%" })] })] })] }), warning && _jsx(Hint, { "$tone": warning.tone, children: warning.message })] }))] }));
+}

package/dist/components/swap.d.ts

@@ -1,28 +1,2 @@
-import { type ReactNode } from "react";
-import { useSwapExecution } from "../hooks/use-swap-execution";
-import { type SwapToken } from "../hooks/use-token-data";
-import { type SwapSide } from "../lib/quote";
-import type { SwapCompleteResult, SwapError, SwapProps } from "../types";
-export declare function useSwapNotifications({ stage, quoteError, tokenError, onBalancesChanged, onComplete, onError, }: {
-    stage: ReturnType<typeof useSwapExecution>["stage"];
-    quoteError?: string | null;
-    tokenError?: string | null;
-    onBalancesChanged: () => void;
-    onComplete?: (result: SwapCompleteResult) => void;
-    onError?: (error: SwapError) => void;
-}): void;
-interface CurrencyPanelProps {
-    side: SwapSide;
-    token?: SwapToken;
-    amount: string;
-    balance?: string;
-    quoteUsd?: number | null;
-    quoteLoading?: boolean;
-    disabled?: boolean;
-    onAmountChange: (value: string) => void;
-    onSelectToken: () => void;
-    footerAction?: ReactNode;
-}
-export declare function CurrencyPanel({ side, token, amount, balance, quoteUsd, quoteLoading, disabled, onAmountChange, onSelectToken, footerAction, }: CurrencyPanelProps): import("react/jsx-runtime").JSX.Element;
-export declare function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaultSlippageBps, onComplete, onError, }?: SwapProps): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { SwapProps } from "../types";
+export declare function Swap(props?: SwapProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/swap.js

@@ -1,319 +1,45 @@
 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 { formatCurrencyAmount } from "@coin-voyage/shared/currency";
-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 { balanceFraction, isValidSwapAmountInput } from "../lib/amount-input";
-import { getSwapWalletRequirement, shouldShowOutputWalletSelector, shouldUseSeparateOutputWallet, } from "../lib/output-wallet";
-import { buildSwapQuoteRequest, isSameSwap, toCurrencyBase } from "../lib/quote";
+import { useState } from "react";
+import { useSwap } from "../hooks/use-swap";
 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, QuickAmountActions, QuickAmountButton, SettingsLabel, SettingsPanel, SettingsRow, SettingsTooltip, SlippageControl, SlippageInput, SlippageInputWrap, SlippageModeButton, Spinner, SwitchButton, TokenButton, Toolbar, ToolbarGroup, WalletRequirementButton, } from "./styles";
-import { TokenIcon } from "./token-icon";
+import { CurrencyPanel } from "./currency-panel";
+import { ExecutionModal } from "./execution-modal";
+import { ArrowDownIcon } from "./icons";
+import { ManualWalletModal } from "./manual-wallet-modal";
+import { OutputWalletSelector } from "./output-wallet-selector";
+import { QuoteBreakdown } from "./quote-breakdown";
+import { CardWrap, ErrorBox, FormStack, PrimaryButton, Spinner, SwitchButton, Toolbar, WalletRequirementButton, } from "./styles";
+import { SwapSettings } from "./swap-settings";
 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 }))] }));
-}
-export function useSwapNotifications({ stage, quoteError, tokenError, onBalancesChanged, onComplete, onError, }) {
-    const onCompleteRef = useRef(onComplete);
-    const onErrorRef = useRef(onError);
-    const onBalancesChangedRef = useRef(onBalancesChanged);
-    const lastNotification = useRef(undefined);
-    useEffect(() => {
-        onCompleteRef.current = onComplete;
-        onErrorRef.current = onError;
-        onBalancesChangedRef.current = onBalancesChanged;
-    }, [onBalancesChanged, onComplete, onError]);
-    useEffect(() => {
-        if (stage.kind === "idle") {
-            lastNotification.current = undefined;
-            return;
-        }
-        if (stage.kind === "done") {
-            const transactionHash = stage.destinationTxHash ?? stage.sourceTxHash;
-            if (!transactionHash)
-                return;
-            const key = `complete:${stage.orderId}:${transactionHash}`;
-            if (lastNotification.current !== key) {
-                lastNotification.current = key;
-                onBalancesChangedRef.current();
-                onCompleteRef.current?.({ orderId: stage.orderId, transactionHash });
-            }
-        }
-        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: [onConnect && (_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;
-}
-const QUICK_AMOUNTS = [
-    { label: "25%", fraction: 0.25 },
-    { label: "50%", fraction: 0.5 },
-    { label: "75%", fraction: 0.75 },
-    { label: "Max", fraction: 1 },
-];
-export function CurrencyPanel({ side, token, amount, balance, quoteUsd, quoteLoading, disabled, onAmountChange, onSelectToken, footerAction, }) {
-    const label = side === "input" ? "SELL" : "BUY";
-    const showQuickAmounts = side === "input" && balance !== undefined && token !== undefined;
-    return (_jsxs(CurrencyCard, { children: [_jsx(CardTitle, { children: label }), showQuickAmounts && (_jsx(QuickAmountActions, { "data-quick-amounts": true, children: QUICK_AMOUNTS.map(({ label: amountLabel, fraction }) => (_jsx(QuickAmountButton, { type: "button", disabled: disabled, "aria-label": fraction === 1
-                        ? `Use maximum ${token.currency.symbol} balance`
-                        : `Use ${amountLabel} of ${token.currency.symbol} balance`, onClick: () => onAmountChange(balanceFraction(balance, fraction, token.currency.decimals)), children: amountLabel }, amountLabel))) })), _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: ", Number(balance).toLocaleString()] }), 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", style: { marginTop: 12 }, 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, } = {}) {
+export function Swap(props = {}) {
     const { mode, theme } = useSwapKit();
-    const slippageInputId = useId();
-    const slippageTooltipId = useId();
-    const { tokens, accounts, isLoading, error: tokenError, refreshBalances } = useTokenData();
-    const { accounts: connectedAccounts } = useAccount();
+    const swap = useSwap(props);
+    const { sourceToken, destinationToken, walletRequirement, quote, quoteLoading } = swap;
     const [sourcePickerOpen, setSourcePickerOpen] = useState(false);
     const [destinationPickerOpen, setDestinationPickerOpen] = useState(false);
-    const [settingsOpen, setSettingsOpen] = useState(false);
-    const [connectTarget, setConnectTarget] = useState({
-        open: 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 = manualAddress ?? (separateOutputWallet ? outputAccount?.address : inputAccount?.address);
-    const walletRequirement = getSwapWalletRequirement({
-        inputWalletAddress: inputAccount?.address,
-        inputChainType: sourceChainType,
-        shouldRestrictInputChainType: Boolean(sourceToken),
-        outputWalletAddress: outputAddress,
-        outputChainType: destinationChainType,
-    });
-    const showOutputWalletSelector = shouldShowOutputWalletSelector({
-        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, inputAccount?.address);
-    const quoteState = useSwapQuote(quoteRequest, execution.stage.kind === "idle");
-    useSwapNotifications({
-        stage: execution.stage,
-        quoteError: quoteState.error,
-        tokenError,
-        onBalancesChanged: refreshBalances,
-        onComplete,
-        onError,
-    });
-    const displayedInputAmount = activeSide === "output" && quoteState.quote
-        ? formatCurrencyAmount(quoteState.quote.input.amount.raw, quoteState.quote.input.currency.decimals)
-        : inputAmount;
-    const displayedOutputAmount = activeSide === "input" && quoteState.quote
-        ? formatCurrencyAmount(quoteState.quote.output.amount.raw, quoteState.quote.output.currency.decimals)
-        : outputAmount;
-    const sourceBalance = sourceToken?.balance;
-    const insufficientBalance = sourceBalance !== undefined && Number(displayedInputAmount) > Number(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) }), _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: separateOutputWallet
+    return (_jsx(SwapKitRoot, { "$mode": mode, "$customTheme": theme, "data-swapkit-root": "", children: _jsxs(FormStack, { children: [_jsxs(Toolbar, { children: [_jsx(ConnectedWallets, {}), _jsx(SwapSettings, { slippageMode: swap.slippageMode, slippagePercent: swap.slippagePercent, warning: swap.slippage.warning, onSlippageModeChange: swap.setSlippageMode, onSlippagePercentChange: swap.setSlippagePercent })] }), _jsxs(CardWrap, { children: [_jsx(CurrencyPanel, { side: "input", token: sourceToken, amount: swap.displayedInputAmount, balance: swap.sourceBalance, quoteUsd: quote?.input.amount.value_usd, quoteLoading: quoteLoading && swap.activeSide === "output", disabled: !swap.idle, onAmountChange: (value) => swap.setAmount("input", value), onSelectToken: () => setSourcePickerOpen(true) }), _jsx(SwitchButton, { type: "button", "aria-label": "Swap tokens", onClick: () => {
+                                swap.reverse();
+                                setOutputWalletMenuOpen(false);
+                            }, disabled: !sourceToken || !destinationToken || !swap.destinationHasWallet, children: _jsx(ArrowDownIcon, { size: 24 }) })] }), _jsx(CurrencyPanel, { side: "output", token: destinationToken, amount: swap.displayedOutputAmount, balance: swap.destinationBalance, quoteUsd: quote?.output.amount.value_usd, quoteLoading: quoteLoading && swap.activeSide === "input", disabled: !swap.idle, onAmountChange: (value) => swap.setAmount("output", value), onSelectToken: () => setDestinationPickerOpen(true), headerAction: swap.showOutputWalletSelector ? (_jsx(OutputWalletSelector, { label: swap.outputWalletLabel, open: outputWalletMenuOpen, onOpenChange: setOutputWalletMenuOpen, onConnect: swap.separateOutputWallet && swap.destinationHasWallet
                             ? () => {
                                 setOutputWalletMenuOpen(false);
-                                setConnectTarget({ open: true, chainType: destinationChainType });
+                                setConnectTarget({ open: true, chainType: swap.destinationChainType });
                             }
                             : undefined, 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, preferredChainId: sourceToken?.currency.chain_id, 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({ preserveCurrencies: execution.stage.kind === "done" });
-                    } })] }) }));
+                        } })) : undefined }), swap.quoteError && _jsx(ErrorBox, { children: swap.quoteError }), swap.tokenError && _jsx(ErrorBox, { children: swap.tokenError }), swap.insufficientBalance && _jsxs(ErrorBox, { children: ["Insufficient ", sourceToken?.currency.symbol, " balance"] }), swap.sameSwap && _jsx(ErrorBox, { children: "Select a different token or destination wallet" }), _jsx(QuoteBreakdown, { quote: quote, loading: quoteLoading }), walletRequirement.target !== "none" ? (_jsx(WalletRequirementButton, { type: "button", onClick: () => {
+                        if (swap.requiresPastedAddress)
+                            setManualWalletOpen(true);
+                        else
+                            setConnectTarget({ open: true, chainType: walletRequirement.chainType });
+                    }, children: swap.requiresPastedAddress
+                        ? `Paste ${swap.destinationChainName ?? "Destination"} Address`
+                        : walletRequirement.label })) : (_jsxs(PrimaryButton, { type: "button", disabled: !swap.canExecute || quoteLoading, onClick: () => void swap.execute(), children: [quoteLoading ? _jsx(Spinner, {}) : null, swap.tokensLoading ? "Loading tokens…" : quoteLoading ? "Fetching quote…" : "Swap"] })), _jsx(TokenPicker, { open: sourcePickerOpen, title: "Select Token", tokens: swap.sourceTokens, selectedId: swap.sourceId, onClose: () => setSourcePickerOpen(false), onSelect: (token) => swap.selectToken("input", token) }), _jsx(TokenPicker, { open: destinationPickerOpen, title: "Select Token", tokens: swap.tokens, selectedId: swap.destinationId, preferredChainId: sourceToken?.currency.chain_id, onClose: () => setDestinationPickerOpen(false), onSelect: (token) => swap.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: swap.manualAddress, onClose: () => setManualWalletOpen(false), onSave: swap.saveManualAddress })), _jsx(ExecutionModal, { stage: swap.stage, onClose: swap.closeExecution })] }) }));
 }

package/dist/components/token-picker.test.js

@@ -25,6 +25,17 @@ const tokens = [
     token({ id: "usdc-base", chain_id: ChainId.BASE, name: "Base USD Coin", symbol: "USDC", decimals: 6 }),
 ];
 describe("TokenPicker", () => {
+    it("lists Zcash as a BUY network and selects its native token", () => {
+        const zec = token({ id: "zec", chain_id: ChainId.ZEC, name: "Zcash", symbol: "ZEC", decimals: 8 });
+        const onSelect = vi.fn();
+        render(_jsx(TokenPicker, { open: true, title: "Select BUY token", tokens: [...tokens, zec], preferredChainId: ChainId.SOL, onClose: vi.fn(), onSelect: onSelect }));
+        fireEvent.click(screen.getByRole("button", { name: "Solana" }));
+        fireEvent.click(screen.getByRole("option", { name: "Zcash" }));
+        expect(screen.getByRole("button", { name: "Zcash" })).toBeTruthy();
+        expect(screen.queryByRole("option", { name: "SOL Solana" })).toBeNull();
+        fireEvent.click(screen.getByRole("option", { name: "ZEC Zcash" }));
+        expect(onSelect).toHaveBeenCalledWith(zec);
+    });
     it("prefilters BUY tokens to the selected SELL chain", () => {
         render(_jsx(TokenPicker, { open: true, title: "Select BUY token", tokens: tokens, preferredChainId: ChainId.SOL, onClose: vi.fn(), onSelect: vi.fn() }));
         expect(screen.getByRole("option", { name: "SOL Solana" })).toBeTruthy();

package/dist/hooks/use-dismiss.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from "react";
+/** Calls `onDismiss` on Escape or a pointer press outside `ref` while `open`. */
+export declare function useDismiss(ref: RefObject<HTMLElement | null>, open: boolean, onDismiss: () => void): void;

package/dist/hooks/use-dismiss.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+/** Calls `onDismiss` on Escape or a pointer press outside `ref` while `open`. */
+export function useDismiss(ref, open, onDismiss) {
+    const onDismissRef = useRef(onDismiss);
+    useEffect(() => {
+        onDismissRef.current = onDismiss;
+    }, [onDismiss]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (!ref.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, ref]);
+}

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

@@ -0,0 +1,10 @@
+import type { SwapStage } from "../lib/execution";
+import type { SwapCompleteResult, SwapError } from "../types";
+export declare function useSwapNotifications({ stage, quoteError, tokenError, onBalancesChanged, onComplete, onError, }: {
+    stage: SwapStage;
+    quoteError?: string | null;
+    tokenError?: string | null;
+    onBalancesChanged: () => void;
+    onComplete?: (result: SwapCompleteResult) => void;
+    onError?: (error: SwapError) => void;
+}): void;