@coin-voyage/swapkit 0.4.0 → 0.5.0

package/dist/components/currency-panel.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import type { SwapToken } from "../hooks/use-token-data";
+import type { SwapSide } from "../lib/quote";
+interface CurrencyPanelProps {
+    side: SwapSide;
+    token?: SwapToken;
+    amount: string;
+    balance?: string;
+    quoteUsd?: number | null;
+    quoteLoading?: boolean;
+    disabled?: boolean;
+    onAmountChange: (value: string) => void;
+    onSelectToken: () => void;
+    headerAction?: ReactNode;
+}
+export declare function CurrencyPanel({ side, token, amount, balance, quoteUsd, quoteLoading, disabled, onAmountChange, onSelectToken, headerAction, }: CurrencyPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/currency-panel.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { balanceFraction, isValidSwapAmountInput } from "../lib/amount-input";
+import { formatUsd, usdValue } from "../lib/format";
+import { ChevronDownIcon } from "./icons";
+import { AmountInput, AmountRow, AmountSkeleton, CardFooter, CardHeaderAction, CardTitle, CurrencyCard, QuickAmountActions, QuickAmountButton, QuoteValueSkeleton, TokenButton, } from "./styles";
+import { TokenIcon } from "./token-icon";
+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, headerAction, }) {
+    const label = side === "input" ? "SELL" : "BUY";
+    const showQuickAmounts = side === "input" && balance !== undefined && token !== undefined;
+    return (_jsxs(CurrencyCard, { children: [_jsx(CardTitle, { children: label }), headerAction && _jsx(CardHeaderAction, { children: headerAction }), 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 ?? usdValue(token?.currency.price_usd, amount)) })), balance !== undefined && _jsxs("span", { children: ["Balance: ", Number(balance).toLocaleString()] })] })] }));
+}

package/dist/components/execution-modal.js

@@ -3,7 +3,7 @@ import { getChainExplorerTxUrl, getChainName } from "@coin-voyage/shared/chain";
 import { deliversInSwapTransaction } from "../lib/execution";
 import { AlertCircleIcon, ArrowRightIcon, CheckIcon, StatusDot, WarningIcon } from "./icons";
 import { Modal } from "./modal";
-import { ExecutionContent, ExecutionState, ExplorerLink, ProgressConnector, ProgressItem, ProgressLabel, ProgressList, ProgressMarker, ProgressMarkerColumn, ProgressText, RouteArrow, Spinner, TokenAmount, TokenRoute, } from "./styles";
+import { ExecutionContent, ExecutionEstimate, ExecutionState, ExplorerLink, ProgressConnector, ProgressItem, ProgressLabel, ProgressList, ProgressMarker, ProgressMarkerColumn, ProgressText, RouteArrow, Spinner, TokenAmount, TokenRoute, } from "./styles";
 import { TokenIcon } from "./token-icon";
 function completedLabel(step) {
     return step.action === "approve" ? "Approved" : "Sent";
@@ -14,6 +14,10 @@ function paymentStepState(stage, step, index, total) {
     const explorerUrl = sourceTxHash && sourceChainId ? getChainExplorerTxUrl(sourceChainId, sourceTxHash) : undefined;
     const completed = { tone: "complete", label: completedLabel(step) };
     const isLast = index === total - 1;
+    const crossChain = "swapData" in stage &&
+        stage.swapData &&
+        stage.swapData.data.input.currency.chain_id !== stage.swapData.data.output.currency.chain_id;
+    const confirmed = { tone: "complete", label: "Confirmed", explorerUrl };
     switch (stage.kind) {
         case "awaiting_payment":
             if (index < stage.paymentStepIndex)
@@ -24,15 +28,32 @@ function paymentStepState(stage, step, index, total) {
         case "source_confirming":
             return isLast ? { tone: "active", label: "Confirming...", explorerUrl } : completed;
         case "executing":
-            return isLast ? { tone: "active", label: "Processing...", explorerUrl } : completed;
+            return isLast ? (crossChain ? confirmed : { tone: "active", label: "Processing...", explorerUrl }) : completed;
         case "done":
-            return isLast ? { tone: "complete", explorerUrl } : completed;
+            return isLast ? (crossChain ? confirmed : { tone: "complete", explorerUrl }) : completed;
         case "refunded":
-            return isLast ? { ...completed, explorerUrl } : completed;
+            return isLast ? (crossChain ? confirmed : { ...completed, explorerUrl }) : completed;
         default:
             return { tone: "muted", label: "Awaiting" };
     }
 }
+function executionState(stage) {
+    if (stage.kind === "executing")
+        return { tone: "active", label: "Processing..." };
+    if (stage.kind === "done")
+        return { tone: "complete", label: "Completed" };
+    if (stage.kind === "refunded")
+        return { tone: "warning", label: "Stopped" };
+    return { tone: "muted", label: "Awaiting" };
+}
+function formatDuration(seconds) {
+    if (seconds == null || !Number.isFinite(seconds) || seconds <= 0)
+        return undefined;
+    const totalSeconds = Math.ceil(seconds);
+    const minutes = Math.floor(totalSeconds / 60);
+    const remainder = totalSeconds % 60;
+    return [minutes ? `${minutes} min` : "", remainder ? `${remainder} sec` : ""].filter(Boolean).join(" ");
+}
 function outcomeState(stage) {
     if (!("swapData" in stage) || !stage.swapData)
         return { tone: "muted", label: "Awaiting" };
@@ -83,7 +104,9 @@ export function ExecutionModal({ stage, onClose }) {
     // A same-chain swap settles in the user's own transaction, so a receive step would only repeat the swap step.
     const hasSeparateDelivery = stage.kind === "done" && stage.destinationTxHash !== undefined && stage.destinationTxHash !== stage.sourceTxHash;
     const showOutcome = stage.kind === "refunded" || hasSeparateDelivery || !swapData || !deliversInSwapTransaction(swapData);
-    return (_jsx(Modal, { open: open, title: "Transaction Details", onClose: onClose, preventDismiss: preventDismiss, maxWidth: 384, children: stage.kind === "error" ? (_jsxs(ExecutionState, { "$tone": "danger", children: [_jsx(AlertCircleIcon, {}), _jsx("p", { children: stage.message })] })) : !swapData ? (_jsxs(ExecutionState, { children: [_jsx(Spinner, {}), _jsx("p", { children: "Loading swap data..." })] })) : (_jsxs(ExecutionContent, { children: [_jsxs(TokenRoute, { children: [_jsxs(TokenAmount, { children: [_jsx(TokenIcon, { currency: swapData.data.input.currency, size: 40 }), _jsxs("strong", { children: [swapData.data.input.amount.ui, " ", swapData.data.input.currency.symbol] })] }), _jsx(RouteArrow, { children: _jsx(ArrowRightIcon, {}) }), _jsxs(TokenAmount, { "$align": "end", children: [_jsx(TokenIcon, { currency: swapData.data.output.currency, size: 40 }), _jsxs("strong", { children: [swapData.data.output.amount.ui, " ", swapData.data.output.currency.symbol] })] })] }), _jsxs(ProgressList, { "aria-label": "Swap progress", children: [swapData.data.steps.map((step, index) => (_jsx(ProgressStep, { title: stepTitle(step, swapData.data.input.currency.symbol, getChainName(swapData.data.input.currency.chain_id) ?? "Unknown network"), state: paymentStepState(stage, step, index, swapData.data.steps.length), connected: showOutcome || index < swapData.data.steps.length - 1 }, step.id ?? index))), showOutcome && (_jsx(ProgressStep, { title: stage.kind === "refunded"
+    const crossChain = swapData && swapData.data.input.currency.chain_id !== swapData.data.output.currency.chain_id;
+    const estimatedDuration = preventDismiss ? formatDuration(swapData?.data.estimated_duration_seconds) : undefined;
+    return (_jsx(Modal, { open: open, title: "Transaction Details", onClose: onClose, preventDismiss: preventDismiss, maxWidth: 384, children: stage.kind === "error" ? (_jsxs(ExecutionState, { "$tone": "danger", children: [_jsx(AlertCircleIcon, {}), _jsx("p", { children: stage.message })] })) : !swapData ? (_jsxs(ExecutionState, { children: [_jsx(Spinner, {}), _jsx("p", { children: "Loading swap data..." })] })) : (_jsxs(ExecutionContent, { children: [_jsxs(TokenRoute, { children: [_jsxs(TokenAmount, { children: [_jsx(TokenIcon, { currency: swapData.data.input.currency, size: 40 }), _jsxs("strong", { children: [swapData.data.input.amount.ui, " ", swapData.data.input.currency.symbol] })] }), _jsx(RouteArrow, { children: _jsx(ArrowRightIcon, {}) }), _jsxs(TokenAmount, { "$align": "end", children: [_jsx(TokenIcon, { currency: swapData.data.output.currency, size: 40 }), _jsxs("strong", { children: [swapData.data.output.amount.ui, " ", swapData.data.output.currency.symbol] })] })] }), estimatedDuration && _jsxs(ExecutionEstimate, { children: ["Estimated duration: ", estimatedDuration] }), _jsxs(ProgressList, { "aria-label": "Swap progress", children: [swapData.data.steps.map((step, index) => (_jsx(ProgressStep, { title: stepTitle(step, swapData.data.input.currency.symbol, getChainName(swapData.data.input.currency.chain_id) ?? "Unknown network"), state: paymentStepState(stage, step, index, swapData.data.steps.length), connected: crossChain || showOutcome || index < swapData.data.steps.length - 1 }, step.id ?? index))), crossChain && (_jsx(ProgressStep, { title: "Execute cross-chain swap", state: executionState(stage), connected: showOutcome })), showOutcome && (_jsx(ProgressStep, { title: stage.kind === "refunded"
                                 ? `Refund ${swapData.data.input.currency.symbol} on ${getChainName(swapData.data.input.currency.chain_id) ?? "Unknown network"}`
                                 : `Receive ${swapData.data.output.currency.symbol} on ${getChainName(swapData.data.output.currency.chain_id) ?? "Unknown network"}`, state: outcomeState(stage), connected: false }))] })] })) }));
 }

package/dist/components/execution-modal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/execution-modal.test.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { ChainId } from "@coin-voyage/shared/types";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ExecutionModal } from "./execution-modal";
+vi.mock("./modal", () => ({
+    Modal: ({ open, children }) => (open ? _jsx("div", { children: children }) : null),
+}));
+afterEach(cleanup);
+function swapData(outputChain = ChainId.ZEC, duration = 125) {
+    return {
+        order_id: "order-1",
+        data: {
+            input: { currency: { chain_id: ChainId.BASE, symbol: "ETH", name: "Ether" }, amount: { ui: "0.001" } },
+            output: { currency: { chain_id: outputChain, symbol: "ZEC", name: "Zcash" }, amount: { ui: "0.001638" } },
+            estimated_duration_seconds: duration,
+            steps: [{ action: "send", data: { type: "EVM" } }],
+        },
+    };
+}
+function renderStage(stage) {
+    render(_jsx(ExecutionModal, { stage: stage, onClose: vi.fn() }));
+    return screen.getAllByRole("listitem").map((item) => within(item));
+}
+describe("ExecutionModal", () => {
+    it("separates the confirmed source transaction from cross-chain execution", () => {
+        const [send, execute, receive] = renderStage({
+            kind: "executing",
+            swapData: swapData(),
+            orderId: "order-1",
+            sourceTxHash: "0xsource",
+        });
+        expect(send.getByText("Confirmed")).toBeTruthy();
+        expect(send.getByRole("link").getAttribute("href")).toContain("0xsource");
+        expect(execute.getByText("Execute cross-chain swap")).toBeTruthy();
+        expect(execute.getByText("Processing...")).toBeTruthy();
+        expect(receive.getByText("Awaiting")).toBeTruthy();
+        expect(screen.getByText("Estimated duration: 2 min 5 sec")).toBeTruthy();
+    });
+    it("waits for source confirmation before activating execution", () => {
+        const [send, execute, receive] = renderStage({
+            kind: "source_confirming",
+            swapData: swapData(),
+            orderId: "order-1",
+            sourceTxHash: "0xsource",
+        });
+        expect(send.getByText("Confirming...")).toBeTruthy();
+        expect(execute.getByText("Awaiting")).toBeTruthy();
+        expect(receive.getByText("Awaiting")).toBeTruthy();
+    });
+    it("completes all cross-chain steps and hides the estimate after delivery", () => {
+        const [send, execute, receive] = renderStage({
+            kind: "done",
+            swapData: swapData(),
+            orderId: "order-1",
+            sourceTxHash: "0xsource",
+            destinationTxHash: "destination",
+        });
+        expect(send.getByText("Confirmed")).toBeTruthy();
+        expect(execute.getByText("Completed")).toBeTruthy();
+        expect(receive.getByRole("link").getAttribute("href")).toContain("destination");
+        expect(screen.queryByText(/Estimated duration/)).toBeNull();
+    });
+    it("shows a stopped execution and refund outcome when refunded", () => {
+        const [, execute, refund] = renderStage({
+            kind: "refunded",
+            swapData: swapData(),
+            orderId: "order-1",
+            sourceTxHash: "0xsource",
+        });
+        expect(execute.getByText("Stopped")).toBeTruthy();
+        expect(refund.getByText("Refunded")).toBeTruthy();
+    });
+    it("keeps a same-chain wallet swap as a single processing step", () => {
+        const steps = renderStage({
+            kind: "executing",
+            swapData: swapData(ChainId.BASE, 30),
+            orderId: "order-1",
+            sourceTxHash: "0xsource",
+        });
+        expect(steps).toHaveLength(1);
+        expect(steps[0].getByText("Processing...")).toBeTruthy();
+        expect(screen.getByText("Estimated duration: 30 sec")).toBeTruthy();
+    });
+    it.each([null, undefined, 0, -1, Number.NaN, Number.POSITIVE_INFINITY])("omits invalid duration %s", (duration) => {
+        const data = swapData();
+        data.data.estimated_duration_seconds = duration;
+        renderStage({ kind: "executing", swapData: data, orderId: "order-1" });
+        expect(screen.queryByText(/Estimated duration/)).toBeNull();
+    });
+});

package/dist/components/manual-wallet-modal.d.ts

@@ -0,0 +1,8 @@
+import type { SwapToken } from "../hooks/use-token-data";
+export declare function ManualWalletModal({ open, chainId, initialValue, onClose, onSave, }: {
+    open: boolean;
+    chainId?: SwapToken["currency"]["chain_id"];
+    initialValue?: string;
+    onClose: () => void;
+    onSave: (address: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/manual-wallet-modal.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidAddress } from "@coin-voyage/shared/chain";
+import { useId, useState } from "react";
+import { Modal } from "./modal";
+import { CompactInput, FieldLabel, Hint, PrimaryButton } from "./styles";
+export 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" })] }));
+}

package/dist/components/output-wallet-selector.d.ts

@@ -0,0 +1,7 @@
+export declare function OutputWalletSelector({ label, open, onOpenChange, onConnect, onPaste, }: {
+    label: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConnect?: () => void;
+    onPaste: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/output-wallet-selector.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useDismiss } from "../hooks/use-dismiss";
+import { ChevronDownIcon, PasteIcon, WalletIcon } from "./icons";
+import { OutputWalletControl, OutputWalletMenu, OutputWalletOption, OutputWalletTrigger } from "./styles";
+export function OutputWalletSelector({ label, open, onOpenChange, onConnect, onPaste, }) {
+    const controlRef = useRef(null);
+    useDismiss(controlRef, open, () => onOpenChange(false));
+    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, {})] })] }))] }));
+}

package/dist/components/quote-breakdown.d.ts

@@ -0,0 +1,5 @@
+import type { SwapQuote } from "@coin-voyage/shared/types";
+export declare function QuoteBreakdown({ quote, loading }: {
+    quote: SwapQuote | null;
+    loading: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/quote-breakdown.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { formatPriceImpact, formatQuoteRate, formatUsd } from "../lib/format";
+import { ChevronDownIcon, FuelIcon } from "./icons";
+import { BreakdownBody, BreakdownCard, BreakdownMeta, BreakdownToggle, DetailRow, FreeFeeBadge, NetworkCost, } from "./styles";
+export function QuoteBreakdown({ quote, loading }) {
+    const [open, setOpen] = useState(false);
+    if (!loading && !quote)
+        return null;
+    const gasUsd = quote?.input.breakdown?.gas?.value_usd;
+    const totalFeeUsd = quote?.input.breakdown?.fees?.total_fee.value_usd;
+    return (_jsxs(BreakdownCard, { children: [_jsxs(BreakdownToggle, { type: "button", "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [_jsx("span", { children: loading ? "Finding the best route…" : quote ? formatQuoteRate(quote) : "Swap details" }), _jsxs(BreakdownMeta, { children: [quote && (_jsxs(NetworkCost, { children: [_jsx(FuelIcon, {}), _jsx("span", { children: formatUsd(gasUsd) })] })), _jsx(ChevronDownIcon, { size: 16, up: open })] })] }), open && (_jsxs(BreakdownBody, { children: [quote?.output.amount_out_minimum && (_jsxs(DetailRow, { children: [_jsx("span", { children: "Receive at least" }), _jsxs("strong", { children: [quote.output.amount_out_minimum.ui, " ", quote.output.currency.symbol] })] })), _jsxs(DetailRow, { children: [_jsx("span", { children: "Price impact" }), _jsx("strong", { children: quote ? formatPriceImpact(quote.price_impact) : "—" })] }), _jsxs(DetailRow, { children: [_jsx("span", { children: "Network cost" }), _jsx("strong", { children: formatUsd(gasUsd) })] }), _jsxs(DetailRow, { children: [_jsx("span", { children: "Total fees" }), totalFeeUsd === 0 ? _jsx(FreeFeeBadge, { children: "Free" }) : _jsx("strong", { children: formatUsd(totalFeeUsd) })] })] }))] }));
+}

package/dist/components/styles.d.ts

@@ -101,6 +101,7 @@ export declare const WalletDisconnectButton: import("styled-components").StyledC
 export declare const DisconnectAllButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const TriggerWalletIcons: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ExecutionContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ExecutionEstimate: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const TokenRoute: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TokenAmount: import("styled-components").StyledComponent<"div", any, {
     $align?: "start" | "end";

package/dist/components/styles.js

@@ -693,8 +693,8 @@ export const SearchInput = styled(CompactInput) `
     opacity: 1;
   }
 
-  &:focus,
-  &:focus-visible {
+  &&:focus,
+  &&:focus-visible {
     outline: none;
     box-shadow: none;
   }
@@ -711,6 +711,11 @@ export const SearchField = styled.div `
   border-radius: 8px;
   background: var(--sk-background);
 
+  &:focus-within {
+    outline: 2px solid var(--sk-accent);
+    outline-offset: -1px;
+  }
+
   > svg {
     flex: 0 0 16px;
     color: var(--sk-text-muted);
@@ -1147,6 +1152,13 @@ export const ExecutionContent = styled.div `
   display: grid;
   gap: 16px;
 `;
+export const ExecutionEstimate = styled.p `
+  margin: 0;
+  color: var(--sk-text-muted);
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+`;
 export const TokenRoute = styled.div `
   display: flex;
   align-items: center;

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

@@ -17,6 +17,7 @@ vi.mock("../hooks/use-token-data", () => ({
             { currency: destination, balance: "7.5" },
             { currency: unheld },
             { currency: solana },
+            { currency: zcash },
         ],
         accounts,
         isLoading: false,
@@ -40,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,
@@ -71,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) {
@@ -133,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;
-    headerAction?: ReactNode;
-}
-export declare function CurrencyPanel({ side, token, amount, balance, quoteUsd, quoteLoading, disabled, onAmountChange, onSelectToken, headerAction, }: 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;