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

package/dist/components/connected-wallets.d.ts

@@ -1 +1 @@
-export declare function ConnectedWallets(): import("react/jsx-runtime").JSX.Element | null;
+export declare function ConnectedWallets(): import("react/jsx-runtime").JSX.Element;

package/dist/components/connected-wallets.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAccount, useAccountDisconnect, useInstalledWallets } from "@coin-voyage/crypto/hooks";
 import { getChainTypeName } from "@coin-voyage/shared/chain";
+import { ChainType } from "@coin-voyage/shared/types";
 import { useEffect, useRef, useState } from "react";
 import { CloseIcon, UnplugIcon } from "./icons";
-import { ConnectedWalletPanel, ConnectedWalletRow, DisconnectAllButton, IconButton, TriggerWalletIcons, ToolbarGroup, WalletDetails, WalletDisconnectButton, WalletIdentity, WalletLabel, WalletPanelHeader, } from "./styles";
+import { ConnectedWalletPanel, ConnectedWalletRow, DisconnectAllButton, IconButton, TriggerWalletIcons, ToolbarGroup, WalletActions, WalletDetails, WalletDisconnectButton, WalletIdentity, WalletLabel, WalletPanelHeader, WalletSwitchButton, } from "./styles";
 import { WalletIconDisplay } from "./wallet-icon";
+import { WalletConnector } from "./wallet-connector";
 function truncateAddress(address) {
     return address.length <= 14 ? address : `${address.slice(0, 6)}…${address.slice(-5)}`;
 }
@@ -17,6 +19,15 @@ function connectorId(connector) {
         return connector.name;
     return undefined;
 }
+function connectorName(connector) {
+    if (!connector || typeof connector !== "object")
+        return undefined;
+    if ("displayName" in connector && typeof connector.displayName === "string")
+        return connector.displayName;
+    if ("name" in connector && typeof connector.name === "string")
+        return connector.name;
+    return undefined;
+}
 function accountAddress(account) {
     return account.address ?? account.addresses?.[0];
 }
@@ -25,11 +36,20 @@ export function ConnectedWallets() {
     const wallets = useInstalledWallets();
     const disconnectAccount = useAccountDisconnect();
     const [open, setOpen] = useState(false);
+    const [switchAccount, setSwitchAccount] = useState(null);
     const groupRef = useRef(null);
     const connectedAccounts = accounts.filter((account) => account.isConnected);
     const walletForAccount = (account) => {
         const accountConnectorId = connectorId(account.connector);
-        return wallets.find((wallet) => wallet.connectors.some((candidate) => candidate.chainType === account.chainType && connectorId(candidate.connector) === accountConnectorId));
+        const accountConnectorName = connectorName(account.connector)?.toLowerCase();
+        return wallets.find((wallet) => wallet.connectors.some((candidate) => {
+            if (candidate.chainType !== account.chainType)
+                return false;
+            const candidateConnectorId = connectorId(candidate.connector);
+            const candidateConnectorName = connectorName(candidate.connector)?.toLowerCase();
+            return ((accountConnectorId !== undefined && candidateConnectorId === accountConnectorId) ||
+                (accountConnectorName !== undefined && candidateConnectorName === accountConnectorName));
+        }));
     };
     useEffect(() => {
         if (!open)
@@ -49,18 +69,21 @@ export function ConnectedWallets() {
             document.removeEventListener("keydown", dismissFromKeyboard);
         };
     }, [open]);
-    if (connectedAccounts.length === 0)
-        return null;
     const triggerLabel = connectedAccounts.length === 1
         ? truncateAddress(accountAddress(connectedAccounts[0]) ?? "Wallet")
         : `${connectedAccounts.length} connections`;
-    return (_jsxs(ToolbarGroup, { ref: groupRef, children: [_jsxs(IconButton, { type: "button", "aria-label": "Connected wallets", "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [_jsx(TriggerWalletIcons, { children: connectedAccounts.slice(0, 3).map((account, index) => {
-                            const wallet = walletForAccount(account);
-                            return (_jsx(WalletIconDisplay, { icon: wallet?.icon, name: wallet?.name ?? getChainTypeName(account.chainType), size: 20 }, `${account.chainType}:${accountAddress(account) ?? index}`));
-                        }) }), _jsx(WalletLabel, { children: triggerLabel })] }), open && (_jsxs(ConnectedWalletPanel, { role: "menu", "aria-label": "Connected wallets menu", children: [_jsx(WalletPanelHeader, { children: "Connected wallets" }), connectedAccounts.map((account, index) => {
-                        const wallet = walletForAccount(account);
-                        const chainName = getChainTypeName(account.chainType);
-                        const address = accountAddress(account);
-                        return (_jsxs(ConnectedWalletRow, { children: [_jsxs(WalletIdentity, { children: [_jsx(WalletIconDisplay, { icon: wallet?.icon, name: wallet?.name ?? chainName, size: 20 }), _jsxs(WalletDetails, { children: [_jsx("strong", { children: chainName }), _jsx("small", { children: address ? truncateAddress(address) : "Connected" })] })] }), _jsx(WalletDisconnectButton, { type: "button", "aria-label": `Disconnect ${chainName} wallet`, onClick: () => void disconnectAccount(account), children: _jsx(CloseIcon, { size: 16 }) })] }, `${account.chainType}:${address ?? index}`));
-                    }), _jsxs(DisconnectAllButton, { type: "button", onClick: () => void disconnectAccount(), children: [_jsx(UnplugIcon, {}), "Disconnect all"] })] }))] }));
+    return (_jsxs(_Fragment, { children: [connectedAccounts.length > 0 && (_jsxs(ToolbarGroup, { ref: groupRef, children: [_jsxs(IconButton, { type: "button", "aria-label": "Connected wallets", "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [_jsx(TriggerWalletIcons, { children: connectedAccounts.slice(0, 3).map((account, index) => {
+                                    const wallet = walletForAccount(account);
+                                    return (_jsx(WalletIconDisplay, { icon: wallet?.icon, name: wallet?.name ?? getChainTypeName(account.chainType), size: 20 }, `${account.chainType}:${accountAddress(account) ?? index}`));
+                                }) }), _jsx(WalletLabel, { children: triggerLabel })] }), open && (_jsxs(ConnectedWalletPanel, { role: "group", "aria-label": "Connected wallets", children: [_jsx(WalletPanelHeader, { children: "Connected wallets" }), connectedAccounts.map((account, index) => {
+                                const wallet = walletForAccount(account);
+                                const chainName = getChainTypeName(account.chainType);
+                                const address = accountAddress(account);
+                                return (_jsxs(ConnectedWalletRow, { children: [_jsxs(WalletIdentity, { children: [_jsx(WalletIconDisplay, { icon: wallet?.icon, name: wallet?.name ?? chainName, size: 20 }), _jsxs(WalletDetails, { children: [_jsx("strong", { children: chainName }), _jsx("small", { children: address ? truncateAddress(address) : "Connected" })] })] }), _jsxs(WalletActions, { children: [_jsx(WalletSwitchButton, { type: "button", "aria-label": `Switch ${chainName} wallet`, onClick: () => {
+                                                        setOpen(false);
+                                                        setSwitchAccount(account);
+                                                    }, children: "Switch" }), _jsx(WalletDisconnectButton, { type: "button", "aria-label": `Disconnect ${chainName} wallet`, onClick: () => void disconnectAccount(account), children: _jsx(CloseIcon, { size: 16 }) })] })] }, `${account.chainType}:${address ?? index}`));
+                            }), _jsxs(DisconnectAllButton, { type: "button", onClick: () => void disconnectAccount(), children: [_jsx(UnplugIcon, {}), "Disconnect all"] })] }))] })), _jsx(WalletConnector, { open: switchAccount !== null, chainType: switchAccount?.chainType, intent: "switch", beforeConnect: switchAccount && switchAccount.chainType !== ChainType.SOL
+                    ? () => disconnectAccount(switchAccount)
+                    : undefined, onClose: () => setSwitchAccount(null) })] }));
 }

package/dist/components/connected-wallets.test.d.ts

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

package/dist/components/connected-wallets.test.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { ChainId, ChainType } from "@coin-voyage/shared/types";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ConnectedWallets } from "./connected-wallets";
+const disconnectAccount = vi.fn();
+let accountsConnected = true;
+let accountChainType = ChainType.SOL;
+let accountAddress = "current-address";
+let accountConnector = { id: "Test wallet", name: "Test wallet" };
+let installedWalletOverride;
+vi.mock("@coin-voyage/crypto/hooks", () => ({
+    useAccount: () => ({
+        accounts: accountsConnected
+            ? [
+                {
+                    address: accountAddress,
+                    chainId: ChainId.SOL,
+                    chainType: accountChainType,
+                    connector: accountConnector,
+                    isConnected: true,
+                    isConnecting: false,
+                    isDisconnected: false,
+                    isReconnecting: false,
+                    status: "connected",
+                },
+            ]
+            : [],
+    }),
+    useAccountDisconnect: () => disconnectAccount,
+    useInstalledWallets: () => [
+        installedWalletOverride ?? {
+            id: "test-wallet",
+            name: "Test wallet",
+            connectors: [{ chainType: accountChainType, connector: { id: "Test wallet", name: "Test wallet" } }],
+        },
+    ],
+}));
+vi.mock("./wallet-connector", () => ({
+    WalletConnector: ({ open, chainType, intent }) => open ? _jsx("div", { "data-testid": "wallet-connector", children: `${intent}:${chainType}` }) : null,
+}));
+afterEach(() => {
+    cleanup();
+    disconnectAccount.mockClear();
+    accountsConnected = true;
+    accountChainType = ChainType.SOL;
+    accountAddress = "current-address";
+    accountConnector = { id: "Test wallet", name: "Test wallet" };
+    installedWalletOverride = undefined;
+});
+describe("ConnectedWallets", () => {
+    it("opens the wallet switcher for the selected account chain", async () => {
+        const user = userEvent.setup();
+        render(_jsx(ConnectedWallets, {}));
+        await user.click(screen.getByRole("button", { name: "Connected wallets" }));
+        await user.click(screen.getByRole("button", { name: "Switch Solana wallet" }));
+        expect(screen.queryByRole("group", { name: "Connected wallets" })).toBeNull();
+        expect(screen.getByTestId("wallet-connector").textContent).toBe(`switch:${ChainType.SOL}`);
+        expect(disconnectAccount).not.toHaveBeenCalled();
+    });
+    it("keeps the switcher open while the previous account disconnects", async () => {
+        const user = userEvent.setup();
+        const { rerender } = render(_jsx(ConnectedWallets, {}));
+        await user.click(screen.getByRole("button", { name: "Connected wallets" }));
+        await user.click(screen.getByRole("button", { name: "Switch Solana wallet" }));
+        accountsConnected = false;
+        rerender(_jsx(ConnectedWallets, {}));
+        expect(screen.getByTestId("wallet-connector").textContent).toBe(`switch:${ChainType.SOL}`);
+    });
+    it("updates the connected-wallet label when Phantom changes address", () => {
+        accountAddress = "old-address-123456789";
+        const { rerender } = render(_jsx(ConnectedWallets, {}));
+        expect(screen.getByRole("button", { name: "Connected wallets" }).textContent).toContain("old-ad…56789");
+        accountAddress = "new-address-987654321";
+        rerender(_jsx(ConnectedWallets, {}));
+        expect(screen.getByRole("button", { name: "Connected wallets" }).textContent).toContain("new-ad…54321");
+    });
+    it("uses the Phantom icon for its Ethereum connection in a multichain wallet", () => {
+        accountChainType = ChainType.EVM;
+        accountConnector = { id: "injected", name: "Phantom" };
+        installedWalletOverride = {
+            id: "app.phantom",
+            name: "Phantom",
+            icon: "phantom.svg",
+            connectors: [
+                { chainType: ChainType.EVM, connector: { id: "app.phantom", name: "Phantom" } },
+                { chainType: ChainType.SOL, connector: { id: "Phantom", name: "Phantom" } },
+            ],
+        };
+        render(_jsx(ConnectedWallets, {}));
+        expect(screen.getByAltText("Phantom wallet")).not.toBeNull();
+    });
+    it("only disconnects an account from the explicit disconnect action", async () => {
+        accountChainType = ChainType.EVM;
+        const user = userEvent.setup();
+        render(_jsx(ConnectedWallets, {}));
+        await user.click(screen.getByRole("button", { name: "Connected wallets" }));
+        await user.click(screen.getByRole("button", { name: "Disconnect Ethereum wallet" }));
+        expect(disconnectAccount).toHaveBeenCalledTimes(1);
+        expect(disconnectAccount.mock.calls[0]?.[0]?.chainType).toBe(ChainType.EVM);
+    });
+});

package/dist/components/styles.d.ts

@@ -95,6 +95,8 @@ export declare const WalletPanelHeader: import("styled-components").StyledCompon
 export declare const ConnectedWalletRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WalletIdentity: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WalletDetails: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WalletActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WalletSwitchButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const WalletDisconnectButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const DisconnectAllButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const TriggerWalletIcons: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/components/styles.js

@@ -955,6 +955,11 @@ export const WalletOption = styled.button `
   &:hover {
     background: var(--sk-surface);
   }
+
+  &:disabled {
+    cursor: wait;
+    opacity: 0.6;
+  }
 `;
 export const WalletIconFrame = styled.span `
   display: inline-flex;
@@ -1068,6 +1073,28 @@ export const WalletDetails = styled.div `
     font-size: 12px;
   }
 `;
+export const WalletActions = styled.div `
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+`;
+export const WalletSwitchButton = styled.button `
+  height: 28px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  color: var(--sk-text-muted);
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+
+  &:hover {
+    color: var(--sk-accent);
+    background: color-mix(in srgb, var(--sk-accent) 12%, transparent);
+  }
+`;
 export const WalletDisconnectButton = styled.button `
   display: inline-flex;
   width: 28px;

package/dist/components/swap-recipient.test.d.ts

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

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

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { ChainId, ChainType } from "@coin-voyage/shared/types";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Swap } from "./swap";
+const { execute } = vi.hoisted(() => ({ execute: vi.fn() }));
+vi.mock("@coin-voyage/crypto/hooks", () => ({ useAccount: () => ({ accounts }) }));
+vi.mock("../providers/swapkit-context", () => ({ useSwapKit: () => ({ mode: "light", theme: {} }) }));
+vi.mock("../hooks/use-swap-execution", () => ({
+    useSwapExecution: () => ({ stage: { kind: "idle" }, execute, reset: vi.fn() }),
+}));
+vi.mock("../hooks/use-token-data", () => ({
+    useTokenData: () => ({
+        tokens: [{ currency: source, balance: "2" }, { currency: destination }, { currency: solana }],
+        accounts,
+        isLoading: false,
+        refreshBalances: vi.fn(),
+    }),
+}));
+vi.mock("../hooks/use-swap-quote", () => ({
+    useSwapQuote: () => ({
+        quote: {
+            input: { currency: source, amount: { raw: "1000000000000000000", ui: "1" } },
+            output: { currency: destination, amount: { raw: "1000000", ui: "1" } },
+            price_impact: 0,
+        },
+        loading: false,
+    }),
+}));
+vi.mock("./connected-wallets", () => ({ ConnectedWallets: () => null }));
+vi.mock("./token-picker", () => ({ TokenPicker: () => null }));
+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 source = {
+    id: "eth",
+    chain_id: ChainId.ETH,
+    name: "Ether",
+    symbol: "ETH",
+    decimals: 18,
+};
+const destination = {
+    id: "usdc",
+    chain_id: ChainId.ETH,
+    address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+    name: "USD Coin",
+    symbol: "USDC",
+    decimals: 6,
+};
+const solana = {
+    id: "sol",
+    chain_id: ChainId.SOL,
+    name: "Solana",
+    symbol: "SOL",
+    decimals: 9,
+};
+beforeEach(() => execute.mockClear());
+afterEach(cleanup);
+function renderSwap(output = destination) {
+    render(_jsx(Swap, { defaultSourceCurrency: source, defaultDestinationCurrency: output }));
+    fireEvent.change(screen.getByRole("textbox", { name: "Sell amount" }), { target: { value: "1" } });
+}
+function openRecipientModal() {
+    fireEvent.click(screen.getByRole("button", { name: /^Output wallet:/ }));
+    fireEvent.click(screen.getByRole("menuitem", { name: "Paste Address" }));
+}
+describe("Swap destination recipient", () => {
+    it("offers only a pasted address for swaps on the same chain", () => {
+        renderSwap();
+        fireEvent.click(screen.getByRole("button", { name: /^Output wallet:/ }));
+        expect(screen.getByRole("menuitem", { name: "Paste Address" })).toBeTruthy();
+        expect(screen.queryByRole("menuitem", { name: "Connect Wallet" })).toBeNull();
+        expect(screen.getAllByRole("menuitem")).toHaveLength(1);
+    });
+    it("executes a same-chain swap to the pasted recipient", () => {
+        renderSwap();
+        openRecipientModal();
+        fireEvent.change(screen.getByRole("textbox", { name: "Wallet address" }), { target: { value: recipient } });
+        fireEvent.click(screen.getByRole("button", { name: "Use address" }));
+        expect(screen.queryByRole("dialog", { name: "Paste destination address" })).toBeNull();
+        fireEvent.click(screen.getByRole("button", { name: "Swap" }));
+        expect(execute).toHaveBeenCalledWith(expect.objectContaining({
+            source: expect.objectContaining({ sender_address: sender }),
+            destination: expect.objectContaining({ recipient }),
+        }), sender);
+    });
+    it("rejects invalid same-chain destination addresses", () => {
+        renderSwap();
+        openRecipientModal();
+        fireEvent.change(screen.getByRole("textbox", { name: "Wallet address" }), { target: { value: "invalid" } });
+        fireEvent.click(screen.getByRole("button", { name: "Use address" }));
+        expect(screen.getByText("Enter a valid address for the destination network")).toBeTruthy();
+        expect(screen.getByRole("dialog", { name: "Paste destination address" })).toBeTruthy();
+        expect(execute).not.toHaveBeenCalled();
+    });
+    it("keeps both connect and paste options for cross-family swaps", () => {
+        renderSwap(solana);
+        fireEvent.click(screen.getByRole("button", { name: /^Output wallet:/ }));
+        expect(screen.getByRole("menuitem", { name: "Connect Wallet" })).toBeTruthy();
+        expect(screen.getByRole("menuitem", { name: "Paste Address" })).toBeTruthy();
+    });
+});

package/dist/components/swap.d.ts

@@ -15,7 +15,7 @@ interface CurrencyPanelProps {
     side: SwapSide;
     token?: SwapToken;
     amount: string;
-    balance?: number;
+    balance?: string;
     quoteUsd?: number | null;
     quoteLoading?: boolean;
     disabled?: boolean;

package/dist/components/swap.js

@@ -1,13 +1,14 @@
 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 { isValidSwapAmountInput } from "../lib/amount-input";
+import { balanceFraction, isValidSwapAmountInput } from "../lib/amount-input";
 import { getSwapWalletRequirement, shouldShowOutputWalletSelector, shouldUseSeparateOutputWallet, } from "../lib/output-wallet";
 import { buildSwapQuoteRequest, isSameSwap, toCurrencyBase } from "../lib/quote";
 import { useSwapKit } from "../providers/swapkit-context";
@@ -119,7 +120,7 @@ function OutputWalletSelector({ label, open, onOpenChange, onConnect, onPaste, }
             document.removeEventListener("keydown", dismissOnEscape);
         };
     }, [onOpenChange, open]);
-    return (_jsxs(OutputWalletControl, { ref: controlRef, children: [_jsxs(OutputWalletTrigger, { type: "button", "aria-label": `Output wallet: ${label}`, "aria-expanded": open, onClick: () => onOpenChange(!open), children: [_jsx("span", { children: label }), _jsx(ChevronDownIcon, { size: 16, up: open })] }), open && (_jsxs(OutputWalletMenu, { role: "menu", "aria-label": "Destination wallet options", children: [_jsxs(OutputWalletOption, { type: "button", role: "menuitem", onClick: onConnect, children: [_jsx("span", { children: "Connect Wallet" }), _jsx(WalletIcon, {})] }), _jsxs(OutputWalletOption, { type: "button", role: "menuitem", onClick: onPaste, children: [_jsx("span", { children: "Paste Address" }), _jsx(PasteIcon, {})] })] }))] }));
+    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))
@@ -143,11 +144,6 @@ const QUICK_AMOUNTS = [
     { label: "75%", fraction: 0.75 },
     { label: "Max", fraction: 1 },
 ];
-function balanceFraction(balance, fraction, decimals) {
-    if (fraction === 1)
-        return balance.toString();
-    return Number((balance * fraction).toFixed(Math.min(Math.max(decimals, 0), 18))).toString();
-}
 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;
@@ -156,13 +152,13 @@ export function CurrencyPanel({ side, token, amount, balance, quoteUsd, quoteLoa
                         : `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: ", balance.toLocaleString()] }), footerAction] })] })] }));
+                        } })), _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", onClick: () => {
+    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;
@@ -206,7 +202,7 @@ export function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaul
     const manualAddress = manualOutputWallet && manualOutputWallet.chainId === destinationToken?.currency.chain_id
         ? manualOutputWallet.address
         : undefined;
-    const outputAddress = separateOutputWallet ? (manualAddress ?? outputAccount?.address) : inputAccount?.address;
+    const outputAddress = manualAddress ?? (separateOutputWallet ? outputAccount?.address : inputAccount?.address);
     const walletRequirement = getSwapWalletRequirement({
         inputWalletAddress: inputAccount?.address,
         inputChainType: sourceChainType,
@@ -215,7 +211,6 @@ export function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaul
         outputChainType: destinationChainType,
     });
     const showOutputWalletSelector = shouldShowOutputWalletSelector({
-        requiresSeparateOutputWallet: separateOutputWallet,
         outputChainType: destinationChainType,
         connectionRequirement: walletRequirement,
     });
@@ -253,10 +248,14 @@ export function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaul
         onComplete,
         onError,
     });
-    const displayedInputAmount = activeSide === "output" && quoteState.quote ? quoteState.quote.input.amount.ui : inputAmount;
-    const displayedOutputAmount = activeSide === "input" && quoteState.quote ? quoteState.quote.output.amount.ui : outputAmount;
+    const 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) > sourceBalance;
+    const insufficientBalance = sourceBalance !== undefined && Number(displayedInputAmount) > Number(sourceBalance);
     const sameSwap = isSameSwap(sourceToken?.currency, destinationToken?.currency, inputAccount?.address, outputAddress);
     const canExecute = Boolean(quoteState.quote &&
         quoteRequest &&
@@ -300,13 +299,15 @@ export function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaul
                                 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: () => {
-                            setOutputWalletMenuOpen(false);
-                            setConnectTarget({ open: true, chainType: destinationChainType });
-                        }, onPaste: () => {
+                    }, onSelectToken: () => setDestinationPickerOpen(true), footerAction: showOutputWalletSelector ? (_jsx(OutputWalletSelector, { label: outputAddress ? truncateAddress(outputAddress) : "Connect Wallet", open: outputWalletMenuOpen, onOpenChange: setOutputWalletMenuOpen, onConnect: separateOutputWallet
+                            ? () => {
+                                setOutputWalletMenuOpen(false);
+                                setConnectTarget({ open: true, chainType: 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, 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) => {
+                        } })) : 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: () => {

package/dist/components/swap.test.d.ts

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

package/dist/components/swap.test.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { ChainId } from "@coin-voyage/shared/types";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Swap } from "./swap";
+vi.mock("@coin-voyage/crypto/hooks", () => ({ useAccount: () => ({ accounts: [] }) }));
+vi.mock("../providers/swapkit-context", () => ({ useSwapKit: () => ({ mode: "light", theme: {} }) }));
+vi.mock("../hooks/use-swap-execution", () => ({
+    useSwapExecution: () => ({ stage: { kind: "idle" }, execute: vi.fn(), reset: vi.fn() }),
+}));
+vi.mock("../hooks/use-token-data", () => ({
+    useTokenData: () => ({
+        tokens: [{ currency: source, balance: "2.345678901234567891" }, { currency: destination }],
+        accounts: [],
+        isLoading: false,
+        refreshBalances: vi.fn(),
+    }),
+}));
+vi.mock("../hooks/use-swap-quote", () => ({
+    useSwapQuote: () => ({
+        quote: {
+            input: { currency: source, amount: { raw: "1234567890123456789", ui: "1.23" } },
+            output: { currency: destination, amount: { raw: "9876543", ui: "9.88" } },
+            price_impact: 0,
+        },
+        loading: false,
+    }),
+}));
+vi.mock("./connected-wallets", () => ({ ConnectedWallets: () => null }));
+vi.mock("./token-picker", () => ({ TokenPicker: () => null }));
+vi.mock("./wallet-connector", () => ({ WalletConnector: () => null }));
+vi.mock("./execution-modal", () => ({ ExecutionModal: () => null }));
+const source = {
+    id: "eth",
+    chain_id: ChainId.ETH,
+    name: "Ether",
+    symbol: "ETH",
+    decimals: 18,
+};
+const destination = {
+    id: "usdc",
+    chain_id: ChainId.ETH,
+    address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+    name: "USD Coin",
+    symbol: "USDC",
+    decimals: 6,
+};
+afterEach(cleanup);
+function renderSwap() {
+    render(_jsx(Swap, { defaultSourceCurrency: source, defaultDestinationCurrency: destination }));
+    return {
+        sell: screen.getByRole("textbox", { name: "Sell amount" }),
+        buy: screen.getByRole("textbox", { name: "Buy amount" }),
+    };
+}
+describe("Swap amount precision", () => {
+    it("shows the exact quoted buy amount while preserving the typed sell amount", () => {
+        const { sell, buy } = renderSwap();
+        fireEvent.change(sell, { target: { value: "1.234567890123456780" } });
+        expect(sell.value).toBe("1.234567890123456780");
+        expect(buy.value).toBe("9.876543");
+    });
+    it("shows the exact quoted sell amount while preserving the typed buy amount", () => {
+        const { sell, buy } = renderSwap();
+        fireEvent.change(buy, { target: { value: "9.876540" } });
+        expect(buy.value).toBe("9.876540");
+        expect(sell.value).toBe("1.234567890123456789");
+    });
+    it("fills the full balance with MAX after editing the buy amount", () => {
+        const { sell, buy } = renderSwap();
+        fireEvent.change(buy, { target: { value: "9.876543" } });
+        fireEvent.click(screen.getByRole("button", { name: "Use maximum ETH balance" }));
+        expect(sell.value).toBe("2.345678901234567891");
+    });
+});

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

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