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

package/LICENSE

@@ -1,8 +1,8 @@
-Copyright (c) 2026 Coin Voyage
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+Copyright (c) 2026 Coin Voyage
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,68 +1,68 @@
-# @coin-voyage/swapkit
-
-Embeddable Coin Voyage swap UI for React applications. SwapKit uses styled-components and does not require Tailwind CSS.
-
-## Installation
-
-```sh
-pnpm add @coin-voyage/swapkit @tanstack/react-query react react-dom styled-components
-```
-
-Install the wallet peer dependencies listed in this package's `package.json` for the chains your application supports.
-
-## Usage
-
-```tsx
-import { Swap, SwapKitProvider, WalletProvider } from "@coin-voyage/swapkit"
-
-export function App() {
-  return (
-    <WalletProvider>
-      <SwapKitProvider apiKey={process.env.NEXT_PUBLIC_COIN_VOYAGE_API_KEY!} environment="development" mode="dark">
-        <Swap
-          defaultSourceCurrency={{ chain_id: 1 }}
-          defaultDestinationCurrency={{
-            chain_id: 30000000000001,
-            address: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
-          }}
-        />
-      </SwapKitProvider>
-    </WalletProvider>
-  )
-}
-```
-
-`SwapKitProvider` deliberately uses the public API client and never accepts an admin signing key. It must be rendered
-inside `WalletProvider`, which SwapKit re-exports from its canonical implementation in `@coin-voyage/crypto/wallets`.
-The wallet provider supplies React Query and the supported chain contexts, while reusing a compatible host Query
-Client when one already exists.
-
-`Swap` optionally accepts `defaultSourceCurrency`, `defaultDestinationCurrency`, and `defaultSlippageBps`, plus
-`onComplete` and `onError` callbacks for host notifications. Currency defaults use `{ chain_id, address? }`; token
-addresses are matched case-insensitively. Slippage is an integer from `0` to `10000` basis points.
-
-When `defaultSlippageBps` is omitted, slippage starts in Auto mode and SwapKit lets the quote service choose the
-appropriate tolerance. The custom control retains a `1%` draft. Supplying `defaultSlippageBps` starts the widget in
-Custom mode and sends that value with quote and execution requests.
-
-Defaults are read once when a widget mounts. Changing them later does not interrupt an in-progress swap; remount the
-widget with a new React `key` to apply a new set of defaults. Unsupported defaults fall back to the normal automatic
-selection.
-
-### Theming
-
-Use `mode="light"` or `mode="dark"`. The optional `theme` prop overrides individual widget colors:
-
-```tsx
-<SwapKitProvider apiKey={apiKey} mode="dark" theme={{ accent: "#7c3aed", radius: "18px" }}>
-  <Swap />
-</SwapKitProvider>
-```
-
-## Development
-
-```sh
-pnpm --filter @coin-voyage/swapkit test
-pnpm --filter @coin-voyage/swapkit type-check
-pnpm --filter @coin-voyage/swapkit build
-```
+# @coin-voyage/swapkit
+
+Embeddable Coin Voyage swap UI for React applications. SwapKit uses styled-components and does not require Tailwind CSS.
+
+## Installation
+
+```sh
+pnpm add @coin-voyage/swapkit @tanstack/react-query react react-dom styled-components
+```
+
+Install the wallet peer dependencies listed in this package's `package.json` for the chains your application supports.
+
+## Usage
+
+```tsx
+import { Swap, SwapKitProvider, WalletProvider } from "@coin-voyage/swapkit"
+
+export function App() {
+  return (
+    <WalletProvider>
+      <SwapKitProvider apiKey={process.env.NEXT_PUBLIC_COIN_VOYAGE_API_KEY!} environment="development" mode="dark">
+        <Swap
+          defaultSourceCurrency={{ chain_id: 1 }}
+          defaultDestinationCurrency={{
+            chain_id: 30000000000001,
+            address: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
+          }}
+        />
+      </SwapKitProvider>
+    </WalletProvider>
+  )
+}
+```
+
+`SwapKitProvider` deliberately uses the public API client and never accepts an admin signing key. It must be rendered
+inside `WalletProvider`, which SwapKit re-exports from its canonical implementation in `@coin-voyage/crypto/wallets`.
+The wallet provider supplies React Query and the supported chain contexts, while reusing a compatible host Query
+Client when one already exists.
+
+`Swap` optionally accepts `defaultSourceCurrency`, `defaultDestinationCurrency`, and `defaultSlippageBps`, plus
+`onComplete` and `onError` callbacks for host notifications. Currency defaults use `{ chain_id, address? }`; token
+addresses are matched case-insensitively. Slippage is an integer from `0` to `10000` basis points.
+
+When `defaultSlippageBps` is omitted, slippage starts in Auto mode and SwapKit lets the quote service choose the
+appropriate tolerance. The custom control retains a `1%` draft. Supplying `defaultSlippageBps` starts the widget in
+Custom mode and sends that value with quote and execution requests.
+
+Defaults are read once when a widget mounts. Changing them later does not interrupt an in-progress swap; remount the
+widget with a new React `key` to apply a new set of defaults. Unsupported defaults fall back to the normal automatic
+selection.
+
+### Theming
+
+Use `mode="light"` or `mode="dark"`. The optional `theme` prop overrides individual widget colors:
+
+```tsx
+<SwapKitProvider apiKey={apiKey} mode="dark" theme={{ accent: "#7c3aed", radius: "18px" }}>
+  <Swap />
+</SwapKitProvider>
+```
+
+## Development
+
+```sh
+pnpm --filter @coin-voyage/swapkit test
+pnpm --filter @coin-voyage/swapkit type-check
+pnpm --filter @coin-voyage/swapkit build
+```

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.d.ts

@@ -1,4 +1,4 @@
-import type { SwapStage } from "../lib/execution";
+import { type SwapStage } from "../lib/execution";
 export declare function ExecutionModal({ stage, onClose }: {
     stage: SwapStage;
     onClose: () => void;

package/dist/components/execution-modal.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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";
@@ -13,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)
@@ -23,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" };
@@ -79,7 +101,12 @@ export function ExecutionModal({ stage, onClose }) {
     const open = stage.kind !== "idle";
     const swapData = "swapData" in stage ? stage.swapData : null;
     const preventDismiss = stage.kind !== "done" && stage.kind !== "refunded" && stage.kind !== "error";
-    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: true }, step.id ?? index))), _jsx(ProgressStep, { title: stage.kind === "refunded"
+    // 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);
+    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 })] })] })) }));
+                                : `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

@@ -28,6 +28,7 @@ export declare const Hint: import("styled-components").StyledComponent<"p", any,
 export declare const CardWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CurrencyCard: import("styled-components").StyledComponent<"section", any, {}, never>;
 export declare const CardTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardHeaderAction: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const QuickAmountActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const QuickAmountButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const AmountRow: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -45,7 +46,6 @@ export declare const ChainBadge: import("styled-components").StyledComponent<"sp
     $size: number;
 }, never>;
 export declare const CardFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InlineActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OutputWalletControl: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const OutputWalletTrigger: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const OutputWalletMenu: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -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";