@coin-voyage/swapkit 0.1.0-beta.2 → 0.3.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();
+                                    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 ? "" : 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

@@ -2,7 +2,9 @@ import type { 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,82 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useInstalledWallets, useUniversalConnect } from "@coin-voyage/crypto/hooks";
+import { 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 { 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 }) {
+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);
+        try {
+            await beforeConnect?.();
+            await connect({ walletConnector: connector });
+        }
+        catch (error) {
+            showError(error);
+        }
+        finally {
+            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);
+                        return (_jsxs(WalletOption, { type: "button", disabled: pending, "aria-label": `Connect ${selectedWallet.name} 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 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"} ${wallet.name} wallet`, onClick: () => chooseWallet(wallet), 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));
+                    }) }), !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,89 @@
+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";
+const connectWallet = 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("./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.mockClear();
+    connectErrorHandler = undefined;
+    installedWallets = [
+        {
+            id: "phantom",
+            name: "Phantom",
+            connectors: [{ chainType: ChainType.SOL, connector: { id: "Phantom", name: "Phantom" } }],
+        },
+    ];
+});
+describe("WalletConnector", () => {
+    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("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-swap-execution.d.ts

@@ -1,6 +1,6 @@
 import type { ChainType, SwapExecuteRequest } from "@coin-voyage/shared/types";
 import { type SwapStage } from "../lib/execution";
-export declare function useSwapExecution(chainType: ChainType | undefined): {
+export declare function useSwapExecution(chainType: ChainType | undefined, currentFromAddress: string | undefined): {
     stage: SwapStage;
     execute: (request: SwapExecuteRequest, fromAddress: string) => Promise<void>;
     reset: () => void;

package/dist/hooks/use-swap-execution.js

@@ -1,34 +1,51 @@
 import { usePrepareTransaction } from "@coin-voyage/crypto/hooks";
+import { assertActiveWallet, getErrorMessage, isUserRejectedError, prepareForActiveWallet, } from "@coin-voyage/crypto/utils";
 import { WebhookEventType } from "@coin-voyage/shared/types";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { buildSwapExecuteTransactions } from "../lib/execution";
 import { useSwapKit } from "../providers/swapkit-context";
 import { useOrderStatus } from "./use-order-status";
 function errorMessage(error, fallback) {
-    const message = error instanceof Error ? error.message.trim() : "";
+    const message = getErrorMessage(error).trim();
     return message || fallback;
 }
-function isRejected(error) {
-    const message = error instanceof Error ? error.message.toLowerCase() : "";
-    return message.includes("user rejected") || message.includes("rejected the request");
+function watchedOrderId(stage) {
+    if (stage.kind === "awaiting_payment" || stage.kind === "source_confirming" || stage.kind === "executing") {
+        return stage.orderId;
+    }
+    return undefined;
 }
-export function useSwapExecution(chainType) {
+export function useSwapExecution(chainType, currentFromAddress) {
     const { api } = useSwapKit();
     const transactionActions = usePrepareTransaction(chainType);
-    const [stage, setStage] = useState({ kind: "idle" });
-    const [orderId, setOrderId] = useState();
-    const stageRef = useRef(stage);
+    const [stage, setStageState] = useState({ kind: "idle" });
+    const stageRef = useRef({ kind: "idle" });
+    const currentWalletRef = useRef({ address: currentFromAddress, chainType });
+    const transactionActionsRef = useRef(transactionActions);
     const runId = useRef(0);
-    useEffect(() => {
-        stageRef.current = stage;
-    }, [stage]);
+    const setStage = useCallback((next) => {
+        stageRef.current = next;
+        setStageState(next);
+    }, []);
+    useLayoutEffect(() => {
+        const chainChanged = currentWalletRef.current?.chainType !== chainType;
+        currentWalletRef.current = { address: currentFromAddress, chainType };
+        transactionActionsRef.current = transactionActions;
+        if (chainChanged) {
+            runId.current += 1;
+            if (stageRef.current.kind !== "idle")
+                setStage({ kind: "idle" });
+        }
+    }, [chainType, currentFromAddress, setStage, transactionActions]);
     const reset = useCallback(() => {
         runId.current += 1;
-        setOrderId(undefined);
-        setStage({ kind: "idle" });
-    }, []);
+        if (stageRef.current.kind !== "idle")
+            setStage({ kind: "idle" });
+    }, [setStage]);
     const onOrderEvent = useCallback((event) => {
         const current = stageRef.current;
+        if (current.kind === "done" || current.kind === "refunded" || current.kind === "error")
+            return;
         if (!("swapData" in current) || !current.swapData || event.order.id !== current.swapData.order_id)
             return;
         const swapData = event.order.payment
@@ -36,55 +53,71 @@ export function useSwapExecution(chainType) {
             : { ...current.swapData, status: event.order.status };
         const sourceTxHash = event.order.payment?.source_tx_hash ?? ("sourceTxHash" in current ? current.sourceTxHash : undefined);
         if (event.event === WebhookEventType.ORDER_COMPLETED) {
-            const txHash = event.order.payment?.destination_tx_hash ?? sourceTxHash;
-            if (txHash)
-                setStage({ kind: "done", swapData, orderId: event.order.id, sourceTxHash, txHash });
-            setOrderId(undefined);
+            const destinationTxHash = event.order.payment?.destination_tx_hash ?? undefined;
+            runId.current += 1;
+            if (destinationTxHash) {
+                setStage({ kind: "done", swapData, orderId: event.order.id, sourceTxHash, destinationTxHash });
+            }
+            else if (sourceTxHash) {
+                setStage({ kind: "done", swapData, orderId: event.order.id, sourceTxHash });
+            }
+            else {
+                setStage({ kind: "error", swapData, message: "Swap completed without a transaction hash" });
+            }
         }
-        else if (event.event === WebhookEventType.ORDER_REFUNDED && event.order.payment?.refund_tx_hash) {
+        else if (event.event === WebhookEventType.ORDER_REFUNDED) {
+            const refundTxHash = event.order.payment?.refund_tx_hash ?? undefined;
+            runId.current += 1;
             setStage({
                 kind: "refunded",
                 swapData,
                 orderId: event.order.id,
                 sourceTxHash,
-                refundTxHash: event.order.payment.refund_tx_hash,
+                ...(refundTxHash ? { refundTxHash } : {}),
             });
-            setOrderId(undefined);
         }
         else if (event.event === WebhookEventType.ORDER_ERROR) {
+            runId.current += 1;
             setStage({ kind: "error", swapData, message: "Swap failed" });
-            setOrderId(undefined);
         }
         else if (event.event === WebhookEventType.ORDER_EXECUTING) {
             setStage({ kind: "executing", swapData, orderId: event.order.id, sourceTxHash });
         }
         else if (event.event === WebhookEventType.ORDER_CONFIRMING ||
             event.event === WebhookEventType.ORDER_PARTIAL_PAYMENT) {
+            if (current.kind === "executing")
+                return;
             setStage({ kind: "source_confirming", swapData, orderId: event.order.id, sourceTxHash });
         }
-    }, []);
-    useOrderStatus({ api, orderId, onEvent: onOrderEvent });
+    }, [setStage]);
+    useOrderStatus({ api, orderId: watchedOrderId(stage), onEvent: onOrderEvent });
     const execute = useCallback(async (request, fromAddress) => {
-        if (!transactionActions)
+        if (!transactionActionsRef.current || !chainType)
             return;
         const currentRun = ++runId.current;
         let swapData = null;
         setStage({ kind: "confirming" });
         try {
-            const response = await api.swapExecute(request);
+            const { wallet, value: response } = await prepareForActiveWallet({ address: fromAddress, chainType }, () => currentWalletRef.current, ({ address }) => api.swapExecute({
+                ...request,
+                source: { ...request.source, sender_address: address },
+            }));
             if (currentRun !== runId.current)
                 return;
             if (response.error || !response.data) {
                 setStage({ kind: "error", swapData: null, message: response.error?.message || "Failed to prepare swap" });
                 return;
             }
+            const paymentTransactionActions = transactionActionsRef.current;
+            if (!paymentTransactionActions)
+                throw new Error("Transaction actions must be defined");
             swapData = response.data;
-            setOrderId(swapData.order_id);
-            const transactions = buildSwapExecuteTransactions(swapData, fromAddress);
+            const transactions = buildSwapExecuteTransactions(swapData, wallet.address);
             let sourceTxHash;
             for (const [paymentStepIndex, transaction] of transactions.entries()) {
-                setStage({ kind: "awaiting_payment", swapData, paymentStepIndex });
-                sourceTxHash = await transactionActions.execute(transaction);
+                setStage({ kind: "awaiting_payment", swapData, orderId: swapData.order_id, paymentStepIndex });
+                assertActiveWallet(wallet, currentWalletRef.current);
+                sourceTxHash = await paymentTransactionActions.execute(transaction);
                 if (currentRun !== runId.current)
                     return;
                 if (!sourceTxHash)
@@ -93,13 +126,14 @@ export function useSwapExecution(chainType) {
             setStage({ kind: "source_confirming", swapData, orderId: swapData.order_id, sourceTxHash });
         }
         catch (error) {
-            if (isRejected(error)) {
+            if (currentRun !== runId.current)
+                return;
+            if (isUserRejectedError(error)) {
                 reset();
                 return;
             }
-            setOrderId(undefined);
             setStage({ kind: "error", swapData, message: errorMessage(error, "Transaction failed") });
         }
-    }, [api, reset, transactionActions]);
-    return { stage, execute, reset };
+    }, [api, chainType, reset, setStage]);
+    return useMemo(() => ({ stage, execute, reset }), [execute, reset, stage]);
 }

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

@@ -47,6 +47,7 @@ export type SwapStateAction = {
     wallet?: ManualOutputWallet;
 } | {
     type: "reset";
+    preserveCurrencies?: boolean;
 };
 export declare function createSwapState(defaultSlippageBps?: number): SwapState;
 export declare function swapStateReducer(state: SwapState, action: SwapStateAction): SwapState;
@@ -65,6 +66,8 @@ export declare function useSwapState({ currencies, connectedChainTypes, defaultS
     setSlippageMode: (mode: SlippageMode) => void;
     setSlippagePercent: (value: string) => void;
     setManualOutputWallet: (wallet?: ManualOutputWallet) => void;
-    reset: () => void;
+    reset: (options?: {
+        preserveCurrencies?: boolean;
+    }) => void;
 };
 export {};

package/dist/hooks/use-swap-state.js

@@ -72,8 +72,8 @@ export function swapStateReducer(state, action) {
         case "reset":
             return {
                 ...state,
-                sourceId: state.initialSourceId,
-                destinationId: state.initialDestinationId,
+                sourceId: action.preserveCurrencies ? state.sourceId : state.initialSourceId,
+                destinationId: action.preserveCurrencies ? state.destinationId : state.initialDestinationId,
                 inputAmount: "",
                 outputAmount: "",
                 activeSide: "input",
@@ -122,7 +122,7 @@ export function useSwapState({ currencies, connectedChainTypes, defaultSourceCur
     const setSlippagePercent = useCallback((value) => dispatch({ type: "set_slippage", value }), []);
     const setSlippageMode = useCallback((mode) => dispatch({ type: "set_slippage_mode", mode }), []);
     const setManualOutputWallet = useCallback((wallet) => dispatch({ type: "set_manual_output_wallet", wallet }), []);
-    const reset = useCallback(() => dispatch({ type: "reset" }), []);
+    const reset = useCallback((options) => dispatch({ type: "reset", ...options }), []);
     const resolvedState = !state.currenciesInitialized && currencies.length > 0
         ? swapStateReducer(state, {
             type: "initialize_currencies",

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

@@ -9,4 +9,5 @@ export declare function useTokenData(): {
     accounts: import("@coin-voyage/crypto/hooks").Account[];
     isLoading: boolean;
     error: string | null;
+    refreshBalances: import("react").ActionDispatch<[]>;
 };

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

@@ -1,7 +1,7 @@
 import { useAccount } from "@coin-voyage/crypto/hooks";
 import { fetchTokenList, tokenToCurrency } from "@coin-voyage/shared/currency";
 import { currencyID } from "@coin-voyage/shared/types";
-import { useEffect, useState } from "react";
+import { useEffect, useReducer, useState } from "react";
 import { useSwapKit } from "../providers/swapkit-context";
 function mergeTokens(tokenList, portfolio) {
     const portfolioById = new Map(portfolio.map((token) => [currencyID(token.currency), token]));
@@ -21,6 +21,7 @@ export function useTokenData() {
     const [isLoading, setIsLoading] = useState(true);
     const [tokenError, setTokenError] = useState(null);
     const [portfolioError, setPortfolioError] = useState(null);
+    const [portfolioRevision, refreshBalances] = useReducer((revision) => revision + 1, 0);
     useEffect(() => {
         let active = true;
         fetchTokenList()
@@ -73,8 +74,8 @@ export function useTokenData() {
             }
         });
         return () => controller.abort();
-    }, [api, walletKey]);
+    }, [api, portfolioRevision, walletKey]);
     const activePortfolioTokens = portfolioState.walletKey === walletKey ? portfolioState.tokens : [];
     const tokens = mergeTokens(listedCurrencies, activePortfolioTokens);
-    return { tokens, accounts, isLoading, error: tokenError ?? portfolioError };
+    return { tokens, accounts, isLoading, error: tokenError ?? portfolioError, refreshBalances };
 }

package/dist/lib/currency-selection.js

@@ -1,10 +1,9 @@
+import { addressesMatch } from "@coin-voyage/crypto/utils";
 import { getChainTypeByChainId } from "@coin-voyage/shared/chain";
 import { currencyID } from "@coin-voyage/shared/types";
-function normalizedAddress(currency) {
-    return currency.address?.toLowerCase() ?? null;
-}
 export function currenciesMatch(left, right) {
-    return left.chain_id === right.chain_id && normalizedAddress(left) === normalizedAddress(right);
+    return (left.chain_id === right.chain_id &&
+        addressesMatch(left.address, right.address, getChainTypeByChainId(left.chain_id)));
 }
 export function resolveCurrencySelection({ currencies, connectedChainTypes, defaultSourceCurrency, defaultDestinationCurrency, }) {
     const preferredSource = defaultSourceCurrency