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

package/dist/components/token-picker.js

@@ -21,16 +21,18 @@ function tokenDescription(token) {
 function AllNetworksMark() {
     return (_jsxs(AllNetworksLogo, { role: "img", "aria-label": "All networks", children: [_jsx("span", { children: getChainLogo(ChainId.BTC) }), _jsx("span", { children: getChainLogo(ChainId.SUI) }), _jsx("span", { children: getChainLogo(ChainId.ROBINHOOD) })] }));
 }
-export function TokenPicker({ open, title, tokens, selectedId, onClose, onSelect }) {
+export function TokenPicker({ open, title, tokens, selectedId, preferredChainId, onClose, onSelect, }) {
     const [query, setQuery] = useState("");
     const [selectedChainId, setSelectedChainId] = useState();
+    const [showAllNetworks, setShowAllNetworks] = useState(false);
     const [networkMenuOpen, setNetworkMenuOpen] = useState(false);
     const networkButtonRef = useRef(null);
     const networkMenuRef = useRef(null);
     const networks = useMemo(() => [...new Set(tokens.map(({ currency }) => currency.chain_id))].sort((left, right) => (getChainName(left) ?? "").localeCompare(getChainName(right) ?? "")), [tokens]);
+    const activeChainId = selectedChainId ?? (showAllNetworks ? undefined : preferredChainId);
     const filtered = useMemo(() => {
-        const onSelectedNetwork = selectedChainId
-            ? tokens.filter(({ currency }) => currency.chain_id === selectedChainId)
+        const onSelectedNetwork = activeChainId
+            ? tokens.filter(({ currency }) => currency.chain_id === activeChainId)
             : tokens;
         const normalized = query.trim().toLowerCase();
         if (!normalized)
@@ -38,8 +40,15 @@ export function TokenPicker({ open, title, tokens, selectedId, onClose, onSelect
         return onSelectedNetwork.filter(({ currency }) => [currency.symbol, currency.name, getChainName(currency.chain_id), currency.address]
             .filter(Boolean)
             .some((value) => value.toLowerCase().includes(normalized)));
-    }, [query, selectedChainId, tokens]);
-    const selectedNetworkName = selectedChainId ? (getChainName(selectedChainId) ?? "Unknown Network") : "All Networks";
+    }, [activeChainId, query, tokens]);
+    const selectedNetworkName = activeChainId ? (getChainName(activeChainId) ?? "Unknown Network") : "All Networks";
+    const closePicker = () => {
+        setQuery("");
+        setSelectedChainId(undefined);
+        setShowAllNetworks(false);
+        setNetworkMenuOpen(false);
+        onClose();
+    };
     useEffect(() => {
         if (!networkMenuOpen)
             return;
@@ -52,18 +61,19 @@ export function TokenPicker({ open, title, tokens, selectedId, onClose, onSelect
         document.addEventListener("mousedown", closeOnOutsideClick);
         return () => document.removeEventListener("mousedown", closeOnOutsideClick);
     }, [networkMenuOpen]);
-    return (_jsx(Modal, { open: open, title: title, onClose: onClose, children: _jsxs(PickerBody, { children: [_jsxs(PickerControls, { children: [_jsxs(SearchField, { children: [_jsx(SearchIcon, {}), _jsx(SearchInput, { type: "search", value: query, placeholder: "Search", "aria-label": "Search tokens", onChange: (event) => setQuery(event.target.value) })] }), _jsxs(NetworkButton, { ref: networkButtonRef, type: "button", "aria-label": selectedNetworkName, "aria-expanded": networkMenuOpen, onClick: () => setNetworkMenuOpen((current) => !current), children: [selectedChainId ? (_jsx(NetworkLogo, { "aria-hidden": true, children: getChainLogo(selectedChainId) })) : (_jsx(AllNetworksMark, {})), _jsx(ChevronDownIcon, { size: 16, up: networkMenuOpen })] })] }), networkMenuOpen && (_jsxs(NetworkMenu, { ref: networkMenuRef, role: "listbox", "aria-label": "Networks", children: [_jsxs(NetworkOption, { type: "button", role: "option", "aria-selected": selectedChainId === undefined, onClick: () => {
+    return (_jsx(Modal, { open: open, title: title, onClose: closePicker, children: _jsxs(PickerBody, { children: [_jsxs(PickerControls, { children: [_jsxs(SearchField, { children: [_jsx(SearchIcon, {}), _jsx(SearchInput, { type: "search", value: query, placeholder: "Search", "aria-label": "Search tokens", onChange: (event) => setQuery(event.target.value) })] }), _jsxs(NetworkButton, { ref: networkButtonRef, type: "button", "aria-label": selectedNetworkName, "aria-expanded": networkMenuOpen, onClick: () => setNetworkMenuOpen((current) => !current), children: [activeChainId ? _jsx(NetworkLogo, { "aria-hidden": true, children: getChainLogo(activeChainId) }) : _jsx(AllNetworksMark, {}), _jsx(ChevronDownIcon, { size: 16, up: networkMenuOpen })] })] }), networkMenuOpen && (_jsxs(NetworkMenu, { ref: networkMenuRef, role: "listbox", "aria-label": "Networks", children: [_jsxs(NetworkOption, { type: "button", role: "option", "aria-selected": activeChainId === undefined, onClick: () => {
                                 setSelectedChainId(undefined);
+                                setShowAllNetworks(true);
                                 setNetworkMenuOpen(false);
-                            }, children: [_jsx(AllNetworksMark, {}), "All Networks"] }), networks.map((chainId) => (_jsxs(NetworkOption, { type: "button", role: "option", "aria-selected": chainId === selectedChainId, onClick: () => {
+                            }, children: [_jsx(AllNetworksMark, {}), "All Networks"] }), networks.map((chainId) => (_jsxs(NetworkOption, { type: "button", role: "option", "aria-selected": chainId === activeChainId, onClick: () => {
                                 setSelectedChainId(chainId);
+                                setShowAllNetworks(false);
                                 setNetworkMenuOpen(false);
                             }, children: [_jsx(NetworkLogo, { "aria-hidden": true, children: getChainLogo(chainId) }), getChainName(chainId)] }, chainId)))] })), _jsxs(TokenList, { role: "listbox", "aria-label": title, children: [filtered.map((token) => {
                             const id = currencyID(token.currency);
                             return (_jsxs(TokenOption, { type: "button", role: "option", "aria-label": `${token.currency.symbol} ${token.currency.name}`, "aria-selected": id === selectedId, onClick: () => {
                                     onSelect(token);
-                                    setQuery("");
-                                    onClose();
-                                }, children: [_jsx(TokenIcon, { currency: token.currency, size: 40 }), _jsxs(TokenMeta, { children: [_jsx("strong", { children: token.currency.name }), _jsx("small", { children: tokenDescription(token) })] }), _jsxs(TokenBalance, { children: [_jsx("strong", { children: formatUsd(token.balanceUsd) }), _jsx("small", { children: token.balance === undefined ? "" : token.balance.toLocaleString() })] })] }, id));
+                                    closePicker();
+                                }, children: [_jsx(TokenIcon, { currency: token.currency, size: 40 }), _jsxs(TokenMeta, { children: [_jsx("strong", { children: token.currency.name }), _jsx("small", { children: tokenDescription(token) })] }), _jsxs(TokenBalance, { children: [_jsx("strong", { children: formatUsd(token.balanceUsd) }), _jsx("small", { children: token.balance === undefined ? "" : Number(token.balance).toLocaleString() })] })] }, id));
                         }), filtered.length === 0 && _jsx(EmptyState, { children: "No matching tokens" })] })] }) }));
 }

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

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

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

@@ -0,0 +1,43 @@
+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 { TokenPicker } from "./token-picker";
+vi.mock("./modal", () => ({
+    Modal: ({ open, title, children }) => open ? (_jsx("div", { role: "dialog", "aria-label": title, children: children })) : null,
+}));
+afterEach(cleanup);
+function token(currency) {
+    return { currency };
+}
+const tokens = [
+    token({ id: "sol", chain_id: ChainId.SOL, name: "Solana", symbol: "SOL", decimals: 9 }),
+    token({
+        id: "usdc-sol",
+        chain_id: ChainId.SOL,
+        address: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
+        name: "USD Coin",
+        symbol: "USDC",
+        decimals: 6,
+    }),
+    token({ id: "eth", chain_id: ChainId.ETH, name: "Ether", symbol: "ETH", decimals: 18 }),
+    token({ id: "usdc-base", chain_id: ChainId.BASE, name: "Base USD Coin", symbol: "USDC", decimals: 6 }),
+];
+describe("TokenPicker", () => {
+    it("prefilters BUY tokens to the selected SELL chain", () => {
+        render(_jsx(TokenPicker, { open: true, title: "Select BUY token", tokens: tokens, preferredChainId: ChainId.SOL, onClose: vi.fn(), onSelect: vi.fn() }));
+        expect(screen.getByRole("option", { name: "SOL Solana" })).toBeTruthy();
+        expect(screen.getByRole("option", { name: "USDC USD Coin" })).toBeTruthy();
+        expect(screen.queryByRole("option", { name: "ETH Ether" })).toBeNull();
+        fireEvent.click(screen.getByRole("button", { name: "Solana" }));
+        fireEvent.click(screen.getByRole("option", { name: /All Networks/i }));
+        expect(screen.getByRole("option", { name: "ETH Ether" })).toBeTruthy();
+    });
+    it("does not include other networks with the same chain type", () => {
+        render(_jsx(TokenPicker, { open: true, title: "Select BUY token", tokens: tokens, preferredChainId: ChainId.ETH, onClose: vi.fn(), onSelect: vi.fn() }));
+        expect(screen.getByRole("option", { name: "ETH Ether" })).toBeTruthy();
+        expect(screen.queryByRole("option", { name: "USDC Base USD Coin" })).toBeNull();
+        expect(screen.queryByRole("option", { name: "SOL Solana" })).toBeNull();
+    });
+});

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

@@ -1,8 +1,10 @@
-import type { ChainType } from "@coin-voyage/shared/types";
+import { ChainType } from "@coin-voyage/shared/types";
 interface WalletConnectorProps {
     open: boolean;
     chainType?: ChainType;
+    intent?: "connect" | "switch";
+    beforeConnect?: () => Promise<unknown>;
     onClose: () => void;
 }
-export declare function WalletConnector({ open, chainType, onClose }: WalletConnectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function WalletConnector(props: WalletConnectorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/wallet-connector.js

@@ -1,33 +1,102 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createWalletConnectModalConnector } from "@coin-voyage/crypto/connectors";
 import { useInstalledWallets, useUniversalConnect } from "@coin-voyage/crypto/hooks";
+import { getConnectorId, getErrorMessage, isWalletConnectionCancelledError } from "@coin-voyage/crypto/utils";
 import { getChainTypeName } from "@coin-voyage/shared/chain";
-import { useMemo, useState } from "react";
-import { EmptyState, Hint, MultichainBadge, WalletList, WalletOption, WalletOptionMeta } from "./styles";
+import { ChainType } from "@coin-voyage/shared/types";
+import { useMemo, useRef, useState } from "react";
+import { EmptyState, Hint, MultichainBadge, WalletList, WalletOption, WalletOptionMeta, WalletSwitchButton, } from "./styles";
 import { Modal } from "./modal";
 import { WalletIconDisplay } from "./wallet-icon";
-export function WalletConnector({ open, chainType, onClose }) {
+const getWalletDisplayName = (wallet) => wallet.id.toLowerCase() === "walletconnect" ? "Mobile Wallets" : wallet.name;
+const addWalletConnectModalStyle = () => {
+    const style = document.createElement("style");
+    style.textContent = "w3m-modal, wcm-modal { --wcm-z-index: 2147483647; --w3m-z-index: 2147483647; }";
+    document.head.appendChild(style);
+    return style;
+};
+export function WalletConnector(props) {
+    if (!props.open)
+        return null;
+    return _jsx(OpenWalletConnector, { ...props });
+}
+function OpenWalletConnector({ chainType, intent = "connect", beforeConnect, onClose }) {
     const installedWallets = useInstalledWallets();
     const wallets = useMemo(() => chainType
         ? installedWallets.filter((wallet) => wallet.connectors.some((connector) => connector.chainType === chainType))
         : installedWallets, [chainType, installedWallets]);
     const [error, setError] = useState(null);
+    const [pending, setPending] = useState(false);
+    const [selectedWallet, setSelectedWallet] = useState(null);
+    const pendingRef = useRef(false);
+    const selectedConnectors = selectedWallet
+        ? selectedWallet.connectors.filter((connector, index, connectors) => connectors.findIndex((candidate) => candidate.chainType === connector.chainType) === index)
+        : [];
+    const close = () => {
+        pendingRef.current = false;
+        onClose();
+    };
+    const showError = (error) => {
+        if (isWalletConnectionCancelledError(error))
+            return;
+        setError(getErrorMessage(error) || "Unable to connect wallet");
+    };
     const { connect } = useUniversalConnect({
-        onSuccess: onClose,
-        onError: (connectError) => {
-            const message = connectError instanceof Error ? connectError.message : "Unable to connect wallet";
-            if (!message.toLowerCase().includes("rejected"))
-                setError(message);
-        },
+        onSuccess: close,
+        onError: showError,
     });
-    return (_jsxs(Modal, { open: open, title: "Connect wallet", onClose: onClose, children: [_jsx(WalletList, { children: wallets.map((wallet) => {
-                    const connector = wallet.connectors.find((candidate) => !chainType || candidate.chainType === chainType);
-                    if (!connector)
-                        return null;
-                    const chainTypes = [...new Set(wallet.connectors.map((candidate) => candidate.chainType))];
-                    const capabilityLabel = chainTypes.map((candidate) => getChainTypeName(candidate)).join(" · ");
-                    return (_jsxs(WalletOption, { type: "button", "aria-label": `Connect ${wallet.name} wallet`, onClick: () => {
-                            setError(null);
-                            void connect({ walletConnector: connector });
-                        }, children: [_jsx(WalletIconDisplay, { icon: wallet.icon, name: wallet.name }), _jsxs(WalletOptionMeta, { children: [_jsxs("span", { children: [_jsx("strong", { children: wallet.name }), chainTypes.length > 1 && _jsx(MultichainBadge, { children: "Multichain" })] }), _jsx("small", { children: chainTypes.length > 1 ? capabilityLabel : `${capabilityLabel} wallet` })] })] }, wallet.id));
-                }) }), wallets.length === 0 && _jsx(EmptyState, { children: "No compatible installed wallets found" }), error && _jsx(Hint, { "$tone": "danger", children: error })] }));
+    const handleConnect = async (connector) => {
+        if (pendingRef.current)
+            return;
+        pendingRef.current = true;
+        setPending(true);
+        setError(null);
+        let walletConnectModalStyle;
+        try {
+            await beforeConnect?.();
+            const connectorId = getConnectorId(connector.connector);
+            const isWalletConnect = connectorId?.toLowerCase().includes("walletconnect");
+            if (isWalletConnect)
+                walletConnectModalStyle = addWalletConnectModalStyle();
+            const walletConnector = connector.chainType === ChainType.EVM && isWalletConnect
+                ? { ...connector, connector: await createWalletConnectModalConnector(connector.connector) }
+                : connector;
+            await connect({ walletConnector });
+        }
+        catch (error) {
+            showError(error);
+        }
+        finally {
+            walletConnectModalStyle?.remove();
+            const shouldUpdatePending = pendingRef.current;
+            pendingRef.current = false;
+            if (shouldUpdatePending)
+                setPending(false);
+        }
+    };
+    const chooseWallet = (wallet) => {
+        const connectors = wallet.connectors.filter(({ chainType: connectorChainType }) => !chainType || connectorChainType === chainType);
+        if (!chainType && new Set(connectors.map((connector) => connector.chainType)).size > 1) {
+            setSelectedWallet(wallet);
+            return;
+        }
+        if (connectors[0])
+            void handleConnect(connectors[0]);
+    };
+    const modalTitle = selectedWallet ? "Choose network" : intent === "switch" ? "Switch wallet" : "Connect wallet";
+    return (_jsxs(Modal, { open: true, title: modalTitle, onClose: close, closeDisabled: pending, children: [selectedWallet && (_jsx(WalletSwitchButton, { type: "button", disabled: pending, onClick: () => setSelectedWallet(null), children: "Back" })), _jsx(WalletList, { "aria-busy": pending, children: selectedWallet
+                    ? selectedConnectors.map((connector) => {
+                        const chainName = getChainTypeName(connector.chainType);
+                        const walletName = getWalletDisplayName(selectedWallet);
+                        return (_jsxs(WalletOption, { type: "button", disabled: pending, "aria-label": `Connect ${walletName} on ${chainName}`, onClick: () => void handleConnect(connector), children: [_jsx(WalletIconDisplay, { icon: selectedWallet.icon, name: chainName }), _jsxs(WalletOptionMeta, { children: [_jsx("span", { children: _jsx("strong", { children: chainName }) }), _jsxs("small", { children: [chainName, " network"] })] })] }, connector.chainType));
+                    })
+                    : wallets.map((wallet) => {
+                        const connector = wallet.connectors.find((candidate) => !chainType || candidate.chainType === chainType);
+                        if (!connector)
+                            return null;
+                        const walletName = getWalletDisplayName(wallet);
+                        const chainTypes = [...new Set(wallet.connectors.map(({ chainType }) => chainType))];
+                        const capabilityLabel = chainTypes.map(getChainTypeName).join(" · ");
+                        return (_jsxs(WalletOption, { type: "button", disabled: pending, "aria-label": `${intent === "switch" ? "Switch to" : "Connect"} ${walletName} wallet`, onClick: () => chooseWallet(wallet), children: [_jsx(WalletIconDisplay, { icon: wallet.icon, name: walletName }), _jsxs(WalletOptionMeta, { children: [_jsxs("span", { children: [_jsx("strong", { children: walletName }), chainTypes.length > 1 && _jsx(MultichainBadge, { children: "Multichain" })] }), _jsx("small", { children: chainTypes.length > 1 ? capabilityLabel : `${capabilityLabel} wallet` })] })] }, wallet.id));
+                    }) }), !selectedWallet && wallets.length === 0 && _jsx(EmptyState, { children: "No compatible installed wallets found" }), error && (_jsx(Hint, { "$tone": "danger", role: "alert", children: error }))] }));
 }

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

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

package/dist/components/wallet-connector.test.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { ChainType } from "@coin-voyage/shared/types";
+import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { WalletConnector } from "./wallet-connector";
+import { Overlay } from "./styles";
+const connectWallet = vi.fn();
+const createWalletConnectModalConnector = vi.fn();
+let connectErrorHandler;
+let installedWallets = [
+    {
+        id: "phantom",
+        name: "Phantom",
+        connectors: [{ chainType: ChainType.SOL, connector: { id: "Phantom", name: "Phantom" } }],
+    },
+];
+vi.mock("@coin-voyage/crypto/hooks", () => ({
+    useInstalledWallets: () => installedWallets,
+    useUniversalConnect: ({ onError }) => {
+        connectErrorHandler = onError;
+        return { connect: connectWallet };
+    },
+}));
+vi.mock("@coin-voyage/crypto/connectors", () => ({
+    createWalletConnectModalConnector: (...args) => createWalletConnectModalConnector(...args),
+}));
+vi.mock("./modal", () => ({
+    Modal: ({ open, title, closeDisabled, children, }) => open ? (_jsx("div", { role: "dialog", "aria-label": title, "data-close-disabled": closeDisabled || undefined, children: children })) : null,
+}));
+afterEach(() => {
+    cleanup();
+    connectWallet.mockReset();
+    createWalletConnectModalConnector.mockReset();
+    connectErrorHandler = undefined;
+    installedWallets = [
+        {
+            id: "phantom",
+            name: "Phantom",
+            connectors: [{ chainType: ChainType.SOL, connector: { id: "Phantom", name: "Phantom" } }],
+        },
+    ];
+});
+describe("WalletConnector", () => {
+    it("keeps the wallet selector below the WalletConnect modal layer", () => {
+        render(_jsx(Overlay, { "data-testid": "wallet-selector-overlay" }));
+        expect(Number(getComputedStyle(screen.getByTestId("wallet-selector-overlay")).zIndex)).toBeLessThan(2147483647);
+    });
+    it("uses switch language when replacing a connected wallet", () => {
+        render(_jsx(WalletConnector, { open: true, chainType: ChainType.SOL, intent: "switch", onClose: vi.fn() }));
+        expect(screen.getByRole("dialog", { name: "Switch wallet" })).not.toBeNull();
+        expect(screen.getByRole("button", { name: "Switch to Phantom wallet" })).not.toBeNull();
+    });
+    it("ignores repeated selections while a switch is pending", async () => {
+        const user = userEvent.setup();
+        let finishConnect;
+        connectWallet.mockImplementation(() => new Promise((resolve) => {
+            finishConnect = resolve;
+        }));
+        render(_jsx(WalletConnector, { open: true, chainType: ChainType.SOL, intent: "switch", onClose: vi.fn() }));
+        const option = screen.getByRole("button", { name: "Switch to Phantom wallet" });
+        await user.dblClick(option);
+        expect(connectWallet).toHaveBeenCalledTimes(1);
+        expect(option.hasAttribute("disabled")).toBe(true);
+        expect(screen.getByRole("dialog").getAttribute("data-close-disabled")).toBe("true");
+        finishConnect?.();
+        await waitFor(() => expect(option.hasAttribute("disabled")).toBe(false));
+    });
+    it("asks which chain to connect for a multichain wallet", async () => {
+        const user = userEvent.setup();
+        const solanaConnector = { chainType: ChainType.SOL, connector: { id: "Phantom", name: "Phantom" } };
+        installedWallets = [
+            {
+                id: "phantom",
+                name: "Phantom",
+                connectors: [{ chainType: ChainType.EVM, connector: { id: "app.phantom", name: "Phantom" } }, solanaConnector],
+            },
+        ];
+        render(_jsx(WalletConnector, { open: true, onClose: vi.fn() }));
+        await user.click(screen.getByRole("button", { name: "Connect Phantom wallet" }));
+        expect(connectWallet).not.toHaveBeenCalled();
+        expect(screen.getByRole("dialog", { name: "Choose network" })).not.toBeNull();
+        await user.click(screen.getByRole("button", { name: "Connect Phantom on Solana" }));
+        expect(connectWallet).toHaveBeenCalledWith({ walletConnector: solanaConnector });
+    });
+    it("opens the WalletConnect modal before connecting an EVM wallet", async () => {
+        const user = userEvent.setup();
+        const headlessConnector = { id: "walletConnect", name: "WalletConnect" };
+        const modalConnector = { id: "walletConnect", name: "WalletConnect Modal" };
+        createWalletConnectModalConnector.mockResolvedValue(modalConnector);
+        installedWallets = [
+            {
+                id: "walletconnect",
+                name: "WalletConnect",
+                connectors: [{ chainType: ChainType.EVM, connector: headlessConnector }],
+            },
+        ];
+        render(_jsx(WalletConnector, { open: true, onClose: vi.fn() }));
+        expect(screen.getByText("Mobile Wallets")).not.toBeNull();
+        await user.click(screen.getByRole("button", { name: "Connect Mobile Wallets wallet" }));
+        expect(createWalletConnectModalConnector).toHaveBeenCalledWith(headlessConnector);
+        expect(connectWallet).toHaveBeenCalledWith({
+            walletConnector: { chainType: ChainType.EVM, connector: modalConnector },
+        });
+        expect([...document.head.querySelectorAll("style")].some((style) => style.textContent?.includes("--w3m-z-index: 2147483647"))).toBe(false);
+    });
+    it("keeps the Solana WalletConnect modal above the wallet selector and cleans up after failure", async () => {
+        const user = userEvent.setup();
+        const solanaConnector = { id: "WalletConnect", name: "WalletConnect" };
+        let failConnect;
+        connectWallet.mockImplementation(() => new Promise((_resolve, reject) => {
+            failConnect = () => reject(new Error("WalletConnect failed"));
+        }));
+        installedWallets = [
+            {
+                id: "walletconnect",
+                name: "WalletConnect",
+                connectors: [{ chainType: ChainType.SOL, connector: solanaConnector }],
+            },
+        ];
+        render(_jsx(WalletConnector, { open: true, chainType: ChainType.SOL, onClose: vi.fn() }));
+        await user.click(screen.getByRole("button", { name: "Connect Mobile Wallets wallet" }));
+        expect(connectWallet).toHaveBeenCalledWith({
+            walletConnector: { chainType: ChainType.SOL, connector: solanaConnector },
+        });
+        expect([...document.head.querySelectorAll("style")].some((style) => style.textContent?.includes("--w3m-z-index: 2147483647"))).toBe(true);
+        failConnect?.();
+        await waitFor(() => expect([...document.head.querySelectorAll("style")].some((style) => style.textContent?.includes("--w3m-z-index: 2147483647"))).toBe(false));
+    });
+    it("does not show viem's resource-unavailable error when the wallet prompt is closed", () => {
+        render(_jsx(WalletConnector, { open: true, onClose: vi.fn() }));
+        act(() => {
+            connectErrorHandler?.(new Error("Requested resource not available. Details: Requested resource not available. Version: viem@2.55.10"));
+        });
+        expect(screen.queryByRole("alert")).toBeNull();
+    });
+    it("still shows actionable connection errors", () => {
+        render(_jsx(WalletConnector, { open: true, onClose: vi.fn() }));
+        act(() => connectErrorHandler?.(new Error("Wallet provider unavailable")));
+        expect(screen.getByRole("alert").textContent).toBe("Wallet provider unavailable");
+    });
+});

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

@@ -1,4 +1,4 @@
-import type { ApiClient } from "@coin-voyage/shared/api";
+import type { ApiClient } from "@coin-voyage/shared/api/browser";
 import type { WebhookEventPayload } from "@coin-voyage/shared/types";
 interface UseOrderStatusProps {
     api: ApiClient;

package/dist/hooks/use-token-data.d.ts

@@ -1,7 +1,7 @@
 import { type Currency } from "@coin-voyage/shared/types";
 export interface SwapToken {
     currency: Currency;
-    balance?: number;
+    balance?: string;
     balanceUsd?: number;
 }
 export declare function useTokenData(): {

package/dist/hooks/use-token-data.js

@@ -1,5 +1,5 @@
 import { useAccount } from "@coin-voyage/crypto/hooks";
-import { fetchTokenList, tokenToCurrency } from "@coin-voyage/shared/currency";
+import { fetchTokenList, formatCurrencyAmount, tokenToCurrency } from "@coin-voyage/shared/currency";
 import { currencyID } from "@coin-voyage/shared/types";
 import { useEffect, useReducer, useState } from "react";
 import { useSwapKit } from "../providers/swapkit-context";
@@ -63,7 +63,7 @@ export function useTokenData() {
                 walletKey,
                 tokens: data.portfolio.flatMap((result) => result.currencies.map(({ balance, currency }) => ({
                     currency,
-                    balance: Number(balance.ui),
+                    balance: formatCurrencyAmount(balance.raw, currency.decimals),
                     balanceUsd: balance.value_usd ?? undefined,
                 }))),
             });

package/dist/hooks/use-token-data.test.d.ts

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

package/dist/hooks/use-token-data.test.js

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+import { ChainId, ChainType } from "@coin-voyage/shared/types";
+import { cleanup, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useTokenData } from "./use-token-data";
+const { api } = vi.hoisted(() => ({ api: { portfolio: vi.fn() } }));
+vi.mock("@coin-voyage/crypto/hooks", () => ({
+    useAccount: () => ({ accounts: [{ address: "0x123", chainType: ChainType.EVM }] }),
+}));
+vi.mock("@coin-voyage/shared/currency", async (importOriginal) => ({
+    ...(await importOriginal()),
+    fetchTokenList: vi.fn().mockResolvedValue({ chains: [] }),
+}));
+vi.mock("../providers/swapkit-context", () => ({
+    useSwapKit: () => ({ api }),
+}));
+afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+});
+describe("useTokenData", () => {
+    it.each([
+        { decimals: 6, raw: "1234567", ui: "1.23", expected: "1.234567" },
+        { decimals: 9, raw: "1239999999", ui: "1.24", expected: "1.239999999" },
+        { decimals: 18, raw: "1123456789012345678", ui: "1.12", expected: "1.123456789012345678" },
+        { decimals: 18, raw: "1", ui: "0.00", expected: "0.000000000000000001" },
+    ])("preserves the raw balance at $decimals decimals ($raw)", async ({ decimals, raw, ui, expected }) => {
+        const currency = { id: "eth", chain_id: ChainId.ETH, name: "Ether", symbol: "ETH", decimals };
+        api.portfolio.mockResolvedValue({
+            data: { portfolio: [{ currencies: [{ currency, balance: { raw, ui, value_usd: 12.34 } }] }] },
+        });
+        const { result } = renderHook(() => useTokenData());
+        await waitFor(() => expect(result.current.tokens).toHaveLength(1));
+        expect(result.current.tokens[0]).toEqual({ currency, balance: expected, balanceUsd: 12.34 });
+    });
+});

package/dist/lib/amount-input.d.ts

@@ -1,3 +1,4 @@
+export declare function balanceFraction(balance: string, fraction: number, decimals: number): string;
 export declare function isValidSwapAmountInput(value: string): boolean;
 export declare function toSwapAmountInputValue(amount?: string | null): string;
 export declare function shouldValidateSwapBalance(amount: string): boolean;

package/dist/lib/amount-input.js

@@ -1,4 +1,11 @@
+import { formatCurrencyAmount, parseCurrencyAmount } from "@coin-voyage/shared/currency";
 const DECIMAL_INPUT = /^(?:\d+(?:\.\d*)?|\.\d+)?$/;
+export function balanceFraction(balance, fraction, decimals) {
+    if (fraction === 1)
+        return balance;
+    const raw = BigInt(parseCurrencyAmount(balance, decimals));
+    return formatCurrencyAmount((raw * BigInt(fraction * 100)) / 100n, decimals);
+}
 export function isValidSwapAmountInput(value) {
     return DECIMAL_INPUT.test(value);
 }

package/dist/lib/amount-input.test.d.ts

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

package/dist/lib/amount-input.test.js

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { balanceFraction } from "./amount-input";
+describe("balanceFraction", () => {
+    it.each(["1.239999999999999999", "0.000000000000000001", "9007199254740993.123456789012345678", "0"])("preserves the full MAX balance %s", (balance) => {
+        expect(balanceFraction(balance, 1, 18)).toBe(balance);
+    });
+    it.each([
+        [0.25, "0.309999999999999999"],
+        [0.5, "0.619999999999999999"],
+        [0.75, "0.929999999999999999"],
+    ])("floors a %s fraction to spendable base units", (fraction, expected) => {
+        expect(balanceFraction("1.239999999999999999", fraction, 18)).toBe(expected);
+    });
+    it("does not round a fraction up for indivisible tokens", () => {
+        expect(balanceFraction("3", 0.5, 0)).toBe("1");
+    });
+});

package/dist/lib/output-wallet.d.ts

@@ -15,10 +15,9 @@ interface GetSwapWalletRequirementProps {
 }
 export declare function shouldUseSeparateOutputWallet(sourceChainType: ChainType | undefined, destinationChainType: ChainType | undefined): boolean;
 interface ShouldShowOutputWalletSelectorProps {
-    requiresSeparateOutputWallet: boolean;
     outputChainType?: ChainType;
     connectionRequirement: SwapWalletRequirement;
 }
-export declare function shouldShowOutputWalletSelector({ requiresSeparateOutputWallet, outputChainType, connectionRequirement, }: ShouldShowOutputWalletSelectorProps): boolean;
+export declare function shouldShowOutputWalletSelector({ outputChainType, connectionRequirement, }: ShouldShowOutputWalletSelectorProps): boolean;
 export declare function getSwapWalletRequirement({ inputWalletAddress, inputChainType, shouldRestrictInputChainType, outputWalletAddress, outputChainType, }: GetSwapWalletRequirementProps): SwapWalletRequirement;
 export {};

package/dist/lib/output-wallet.js

@@ -2,8 +2,8 @@ import { getChainTypeName } from "@coin-voyage/shared/chain";
 export function shouldUseSeparateOutputWallet(sourceChainType, destinationChainType) {
     return Boolean(sourceChainType && destinationChainType && sourceChainType !== destinationChainType);
 }
-export function shouldShowOutputWalletSelector({ requiresSeparateOutputWallet, outputChainType, connectionRequirement, }) {
-    return Boolean(outputChainType && requiresSeparateOutputWallet && connectionRequirement.target !== "input");
+export function shouldShowOutputWalletSelector({ outputChainType, connectionRequirement, }) {
+    return Boolean(outputChainType && connectionRequirement.target !== "input");
 }
 export function getSwapWalletRequirement({ inputWalletAddress, inputChainType, shouldRestrictInputChainType = true, outputWalletAddress, outputChainType, }) {
     if (!inputWalletAddress) {

package/dist/lib/output-wallet.test.d.ts

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

package/dist/lib/output-wallet.test.js

@@ -0,0 +1,26 @@
+import { ChainType } from "@coin-voyage/shared/types";
+import { describe, expect, it } from "vitest";
+import { shouldShowOutputWalletSelector } from "./output-wallet";
+describe("shouldShowOutputWalletSelector", () => {
+    it("allows changing the recipient when the input wallet is connected", () => {
+        expect(shouldShowOutputWalletSelector({
+            outputChainType: ChainType.EVM,
+            connectionRequirement: { target: "none" },
+        })).toBe(true);
+    });
+    it("allows choosing an address when an output wallet is required", () => {
+        expect(shouldShowOutputWalletSelector({
+            outputChainType: ChainType.SOL,
+            connectionRequirement: { target: "output", label: "Connect Wallet" },
+        })).toBe(true);
+    });
+    it("hides the selector until the input wallet is connected", () => {
+        expect(shouldShowOutputWalletSelector({
+            outputChainType: ChainType.EVM,
+            connectionRequirement: { target: "input", label: "Connect Wallet" },
+        })).toBe(false);
+    });
+    it("hides the selector without a destination chain", () => {
+        expect(shouldShowOutputWalletSelector({ connectionRequirement: { target: "none" } })).toBe(false);
+    });
+});

package/dist/providers/swapkit-context.d.ts

@@ -1,4 +1,4 @@
-import type { ApiClient, APIEnvironment } from "@coin-voyage/shared/api";
+import type { ApiClient, APIEnvironment } from "@coin-voyage/shared/api/browser";
 import type { SwapKitMode, SwapKitTheme } from "../types";
 export interface SwapKitContextValue {
     api: ApiClient;

package/dist/providers/swapkit-provider.d.ts

@@ -1,2 +1,2 @@
 import type { SwapKitProviderProps } from "../types";
-export declare function SwapKitProvider({ apiKey, environment, mode, theme, children, }: SwapKitProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapKitProvider({ apiKey, environment, mode, theme, onConnect, onDisconnect, children, }: SwapKitProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/swapkit-provider.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useInWagmiContext } from "@coin-voyage/crypto/evm";
-import { ApiClient } from "@coin-voyage/shared/api";
+import { useConnectCallback } from "@coin-voyage/crypto/hooks";
+import { ApiClient } from "@coin-voyage/shared/api/browser";
 import { generateSessionId } from "@coin-voyage/shared/utils";
 import { useMemo, useState } from "react";
 import { SwapKitContext } from "./swapkit-context";
 import { swapkitVersion } from "../lib/version";
-export function SwapKitProvider({ apiKey, environment = "production", mode = "auto", theme = {}, children, }) {
+export function SwapKitProvider({ apiKey, environment = "production", mode = "auto", theme = {}, onConnect, onDisconnect, children, }) {
     const inWalletContext = useInWagmiContext();
     if (!inWalletContext)
         throw new Error("SwapKitProvider must be used within a WalletProvider");
     if (!apiKey.trim())
         throw new Error("SwapKitProvider requires a public API key");
+    useConnectCallback({ onConnect, onDisconnect });
     const [sessionId] = useState(generateSessionId);
     const api = useMemo(() => new ApiClient({ apiKey, environment, sessionId, version: `swapkit/${swapkitVersion}` }), [apiKey, environment, sessionId]);
     const context = useMemo(() => ({ api, environment, mode, theme }), [api, environment, mode, theme]);

package/dist/providers/swapkit-provider.test.d.ts

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