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

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

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from "react";
+export function useSwapNotifications({ stage, quoteError, tokenError, onBalancesChanged, onComplete, onError, }) {
+    const onCompleteRef = useRef(onComplete);
+    const onErrorRef = useRef(onError);
+    const onBalancesChangedRef = useRef(onBalancesChanged);
+    const lastNotification = useRef(undefined);
+    useEffect(() => {
+        onCompleteRef.current = onComplete;
+        onErrorRef.current = onError;
+        onBalancesChangedRef.current = onBalancesChanged;
+    }, [onBalancesChanged, onComplete, onError]);
+    useEffect(() => {
+        if (stage.kind === "idle") {
+            lastNotification.current = undefined;
+            return;
+        }
+        if (stage.kind === "done") {
+            const transactionHash = stage.destinationTxHash ?? stage.sourceTxHash;
+            if (!transactionHash)
+                return;
+            const key = `complete:${stage.orderId}:${transactionHash}`;
+            if (lastNotification.current !== key) {
+                lastNotification.current = key;
+                onBalancesChangedRef.current();
+                onCompleteRef.current?.({ orderId: stage.orderId, transactionHash });
+            }
+        }
+        else if (stage.kind === "refunded") {
+            const key = `refunded:${stage.orderId}`;
+            if (lastNotification.current !== key) {
+                lastNotification.current = key;
+                onBalancesChangedRef.current();
+            }
+        }
+        else if (stage.kind === "error") {
+            const key = `error:${stage.message}`;
+            if (lastNotification.current !== key) {
+                lastNotification.current = key;
+                onErrorRef.current?.({ message: stage.message });
+            }
+        }
+    }, [stage]);
+    useEffect(() => {
+        const message = quoteError ?? tokenError;
+        if (!message)
+            return;
+        const key = `error:${message}`;
+        if (lastNotification.current !== key) {
+            lastNotification.current = key;
+            onErrorRef.current?.({ message });
+        }
+    }, [quoteError, tokenError]);
+}

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

@@ -1,63 +1,61 @@
-import { useEffect, useRef, useState } from "react";
+import { hashKey, useQuery } from "@tanstack/react-query";
 import { useSwapKit } from "../providers/swapkit-context";
 const QUOTE_DEBOUNCE_MS = 400;
 const QUOTE_REFRESH_MS = 10000;
+// Scope cache entries by client identity without exposing API keys or session details.
+const clientScopes = new WeakMap();
+let nextClientScope = 0;
+function getClientScope(api) {
+    let scope = clientScopes.get(api);
+    if (scope === undefined) {
+        scope = nextClientScope++;
+        clientScopes.set(api, scope);
+    }
+    return scope;
+}
+const quoteKey = (scope, request, live) => ["swap-quote", scope, request, live];
+function debounce(signal) {
+    return new Promise((resolve, reject) => {
+        const timeout = setTimeout(resolve, QUOTE_DEBOUNCE_MS);
+        signal.addEventListener("abort", () => {
+            clearTimeout(timeout);
+            reject(signal.reason);
+        }, { once: true });
+    });
+}
 export function useSwapQuote(request, enabled = true) {
     const { api } = useSwapKit();
-    const [quote, setQuote] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const requestId = useRef(0);
-    useEffect(() => {
-        const id = ++requestId.current;
-        if (!request || !enabled) {
-            setLoading(false);
-            if (!request) {
-                setQuote(null);
-                setError(null);
-            }
-            return;
-        }
-        setQuote(null);
-        setError(null);
-        setLoading(true);
-        const controller = new AbortController();
-        let interval;
-        const load = async (initial) => {
+    const live = Boolean(request && enabled);
+    const scope = getClientScope(api);
+    const { data, isFetchedAfterMount } = useQuery({
+        queryKey: quoteKey(scope, request, live),
+        enabled: live,
+        gcTime: 0,
+        retry: false,
+        networkMode: "always",
+        refetchInterval: QUOTE_REFRESH_MS,
+        refetchIntervalInBackground: true,
+        refetchOnWindowFocus: false,
+        placeholderData: (previous, previousQuery) => !live && previousQuery?.queryHash === hashKey(quoteKey(scope, request, true)) ? previous : undefined,
+        queryFn: async ({ signal }) => {
+            if (!request)
+                return { quote: null, error: null };
+            await debounce(signal);
             try {
-                const response = await api.swapQuote(request, { signal: controller.signal });
-                if (requestId.current !== id)
-                    return;
+                const response = await api.swapQuote(request, { signal });
                 if (response.error || !response.data?.quote) {
-                    setQuote(null);
-                    setError(response.error?.message || "No swap route is available");
-                }
-                else {
-                    setQuote(response.data.quote);
-                    setError(null);
+                    return { quote: null, error: response.error?.message || "No swap route is available" };
                 }
+                return { quote: response.data.quote, error: null };
             }
             catch (requestError) {
-                if (requestId.current !== id || requestError.name === "AbortError")
-                    return;
-                setQuote(null);
-                setError("Unable to fetch a swap quote");
-            }
-            finally {
-                if (initial && requestId.current === id)
-                    setLoading(false);
+                if (signal.aborted)
+                    throw requestError;
+                return { quote: null, error: "Unable to fetch a swap quote" };
             }
-        };
-        const timeout = setTimeout(() => {
-            void load(true);
-            interval = setInterval(() => void load(false), QUOTE_REFRESH_MS);
-        }, QUOTE_DEBOUNCE_MS);
-        return () => {
-            clearTimeout(timeout);
-            if (interval)
-                clearInterval(interval);
-            controller.abort();
-        };
-    }, [api, request, enabled]);
-    return { quote, loading, error };
+        },
+    });
+    // A re-enabled query may still be cached. Only expose it after this activation fetches.
+    const visibleData = live && !isFetchedAfterMount ? undefined : data;
+    return { quote: visibleData?.quote ?? null, loading: live && !visibleData, error: visibleData?.error ?? null };
 }

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

@@ -0,0 +1,47 @@
+import { type SwapSide } from "../lib/quote";
+import type { SwapProps } from "../types";
+import { type SwapToken } from "./use-token-data";
+/** Wires token data, wallets, quoting and execution together into the view model rendered by `<Swap />`. */
+export declare function useSwap({ defaultSourceCurrency, defaultDestinationCurrency, defaultSlippageBps, onComplete, onError, }: SwapProps): {
+    tokens: SwapToken[];
+    sourceTokens: SwapToken[];
+    tokensLoading: boolean;
+    tokenError: string | null;
+    sourceId: string | undefined;
+    destinationId: string | undefined;
+    sourceToken: SwapToken | undefined;
+    destinationToken: SwapToken | undefined;
+    activeSide: SwapSide;
+    displayedInputAmount: string;
+    displayedOutputAmount: string;
+    sourceBalance: string | undefined;
+    destinationBalance: string | undefined;
+    slippageMode: import("./use-swap-state").SlippageMode;
+    slippagePercent: string;
+    slippage: import("../lib/slippage").ResolvedSlippage;
+    destinationChainType: import("@coin-voyage/shared/types").ChainType | undefined;
+    destinationChainName: string | undefined;
+    destinationHasWallet: boolean;
+    separateOutputWallet: boolean;
+    manualAddress: string | undefined;
+    outputWalletLabel: string;
+    showOutputWalletSelector: boolean;
+    walletRequirement: import("../lib/output-wallet").SwapWalletRequirement;
+    requiresPastedAddress: boolean;
+    quote: import("@coin-voyage/shared/types").SwapQuote | null;
+    quoteLoading: boolean;
+    quoteError: string | null;
+    stage: import("../lib/execution").SwapStage;
+    idle: boolean;
+    insufficientBalance: boolean;
+    sameSwap: boolean;
+    canExecute: boolean;
+    setAmount: (side: SwapSide, value: string) => void;
+    setSlippageMode: (mode: import("./use-swap-state").SlippageMode) => void;
+    setSlippagePercent: (value: string) => void;
+    selectToken: (side: SwapSide, token: SwapToken) => void;
+    reverse: () => void;
+    saveManualAddress: (address: string) => void;
+    execute: () => Promise<void>;
+    closeExecution: () => void;
+};

package/dist/hooks/use-swap.js

@@ -0,0 +1,189 @@
+import { useAccount } from "@coin-voyage/crypto/hooks";
+import { getChainName, getChainTypeByChainId, supportsWalletPayments } from "@coin-voyage/shared/chain";
+import { formatCurrencyAmount } from "@coin-voyage/shared/currency";
+import { currencyID } from "@coin-voyage/shared/types";
+import { truncateAddress } from "@coin-voyage/shared/utils";
+import { useCallback, useMemo } from "react";
+import { getSwapWalletRequirement, shouldShowOutputWalletSelector, shouldUseSeparateOutputWallet, } from "../lib/output-wallet";
+import { buildSwapExecuteRequest, buildSwapQuoteRequest, isSameSwap } from "../lib/quote";
+import { resolveSlippage } from "../lib/slippage";
+import { useSwapExecution } from "./use-swap-execution";
+import { useSwapNotifications } from "./use-swap-notifications";
+import { useSwapQuote } from "./use-swap-quote";
+import { useSwapState } from "./use-swap-state";
+import { useTokenData } from "./use-token-data";
+/** Wires token data, wallets, quoting and execution together into the view model rendered by `<Swap />`. */
+export function useSwap({ defaultSourceCurrency, defaultDestinationCurrency, defaultSlippageBps, onComplete, onError, }) {
+    const { tokens, accounts, isLoading, error: tokenError, balancesLoaded, refreshBalances } = useTokenData();
+    const { accounts: connectedAccounts } = useAccount();
+    const connectedChainTypes = new Set(accounts.map((account) => account.chainType));
+    const swapState = useSwapState({
+        currencies: tokens.map((token) => token.currency),
+        connectedChainTypes,
+        defaultSourceCurrency,
+        defaultDestinationCurrency,
+        defaultSlippageBps,
+    });
+    const { sourceId, destinationId, inputAmount, outputAmount, activeSide, slippageMode, slippagePercent } = swapState.state;
+    const { manualOutputWallet } = swapState.state;
+    const sourceToken = tokens.find((token) => currencyID(token.currency) === sourceId);
+    const destinationToken = tokens.find((token) => currencyID(token.currency) === destinationId);
+    const sourceChainType = sourceToken ? getChainTypeByChainId(sourceToken.currency.chain_id) : undefined;
+    const destinationChainType = destinationToken ? getChainTypeByChainId(destinationToken.currency.chain_id) : undefined;
+    // Wallet-less chains (Zcash) share a chain type with a connectable one, so never match a wallet to them.
+    const sourceTokens = useMemo(() => tokens.filter((token) => supportsWalletPayments(token.currency.chain_id)), [tokens]);
+    const destinationHasWallet = supportsWalletPayments(destinationToken?.currency.chain_id);
+    const inputAccount = supportsWalletPayments(sourceToken?.currency.chain_id)
+        ? connectedAccounts.find((account) => account.chainType === sourceChainType)
+        : undefined;
+    const outputAccount = destinationHasWallet
+        ? connectedAccounts.find((account) => account.chainType === destinationChainType)
+        : undefined;
+    const separateOutputWallet = shouldUseSeparateOutputWallet(sourceChainType, destinationChainType);
+    const manualAddress = manualOutputWallet && manualOutputWallet.chainId === destinationToken?.currency.chain_id
+        ? manualOutputWallet.address
+        : undefined;
+    const connectedOutputAddress = separateOutputWallet ? outputAccount?.address : inputAccount?.address;
+    const outputAddress = manualAddress ?? (destinationHasWallet ? connectedOutputAddress : undefined);
+    const walletRequirement = getSwapWalletRequirement({
+        inputWalletAddress: inputAccount?.address,
+        inputChainType: sourceChainType,
+        shouldRestrictInputChainType: Boolean(sourceToken),
+        outputWalletAddress: outputAddress,
+        outputChainType: destinationChainType,
+    });
+    const showOutputWalletSelector = shouldShowOutputWalletSelector({
+        outputChainType: destinationChainType,
+        connectionRequirement: walletRequirement,
+    });
+    // Wallet-less destinations can only be satisfied by pasting an address.
+    const requiresPastedAddress = walletRequirement.target === "output" && !destinationHasWallet;
+    const outputWalletLabel = outputAddress
+        ? truncateAddress(outputAddress)
+        : destinationHasWallet
+            ? "Connect Wallet"
+            : "Paste Address";
+    const slippage = resolveSlippage(slippageMode, slippagePercent);
+    const sameSwap = isSameSwap(sourceToken?.currency, destinationToken?.currency, inputAccount?.address, outputAddress);
+    const activeAmount = activeSide === "input" ? inputAmount : outputAmount;
+    const quoteRequest = useMemo(() => slippage.invalid || sameSwap
+        ? null
+        : buildSwapQuoteRequest({
+            amount: activeAmount,
+            activeSide,
+            source: sourceToken?.currency,
+            destination: destinationToken?.currency,
+            slippageBps: slippage.bps,
+        }), [
+        activeAmount,
+        activeSide,
+        destinationToken?.currency,
+        sameSwap,
+        slippage.bps,
+        slippage.invalid,
+        sourceToken?.currency,
+    ]);
+    const execution = useSwapExecution(sourceChainType, inputAccount?.address);
+    const idle = execution.stage.kind === "idle";
+    const quoteState = useSwapQuote(quoteRequest, idle);
+    useSwapNotifications({
+        stage: execution.stage,
+        quoteError: quoteState.error,
+        tokenError,
+        onBalancesChanged: refreshBalances,
+        onComplete,
+        onError,
+    });
+    const { quote } = quoteState;
+    const displayedInputAmount = activeSide === "output" && quote
+        ? formatCurrencyAmount(quote.input.amount.raw, quote.input.currency.decimals)
+        : inputAmount;
+    const displayedOutputAmount = activeSide === "input" && quote
+        ? formatCurrencyAmount(quote.output.amount.raw, quote.output.currency.decimals)
+        : outputAmount;
+    const sourceBalance = sourceToken?.balance;
+    // A pasted recipient is not one of the connected wallets, so its balance is unknown.
+    const destinationBalance = manualAddress
+        ? undefined
+        : (destinationToken?.balance ?? (balancesLoaded && outputAccount?.address ? "0" : undefined));
+    const insufficientBalance = sourceBalance !== undefined && Number(displayedInputAmount) > Number(sourceBalance);
+    const canExecute = Boolean(quote &&
+        quoteRequest &&
+        inputAccount?.address &&
+        outputAddress &&
+        walletRequirement.target === "none" &&
+        !insufficientBalance &&
+        !sameSwap &&
+        !slippage.invalid);
+    const { reverse: reverseState, selectCurrency, setManualOutputWallet, reset: resetState } = swapState;
+    const reverse = useCallback(() => {
+        reverseState(displayedInputAmount, displayedOutputAmount);
+    }, [displayedInputAmount, displayedOutputAmount, reverseState]);
+    const selectToken = useCallback((side, token) => selectCurrency(side, currencyID(token.currency)), [selectCurrency]);
+    const saveManualAddress = useCallback((address) => {
+        if (destinationToken)
+            setManualOutputWallet({ chainId: destinationToken.currency.chain_id, address });
+    }, [destinationToken, setManualOutputWallet]);
+    const execute = useCallback(async () => {
+        if (!quoteRequest || !sourceToken || !destinationToken || !inputAccount?.address || !outputAddress)
+            return;
+        const request = buildSwapExecuteRequest({
+            quoteRequest,
+            source: sourceToken.currency,
+            destination: destinationToken.currency,
+            senderAddress: inputAccount.address,
+            recipient: outputAddress,
+            slippageBps: slippage.bps,
+        });
+        await execution.execute(request, inputAccount.address);
+    }, [destinationToken, execution, inputAccount, outputAddress, quoteRequest, slippage.bps, sourceToken]);
+    const closeExecution = useCallback(() => {
+        const { kind } = execution.stage;
+        execution.reset();
+        if (kind === "done" || kind === "refunded")
+            resetState({ preserveCurrencies: kind === "done" });
+    }, [execution, resetState]);
+    return {
+        tokens,
+        sourceTokens,
+        tokensLoading: isLoading,
+        tokenError,
+        sourceId,
+        destinationId,
+        sourceToken,
+        destinationToken,
+        activeSide,
+        displayedInputAmount,
+        displayedOutputAmount,
+        sourceBalance,
+        destinationBalance,
+        slippageMode,
+        slippagePercent,
+        slippage,
+        destinationChainType,
+        destinationChainName: getChainName(destinationToken?.currency.chain_id),
+        destinationHasWallet,
+        separateOutputWallet,
+        manualAddress,
+        outputWalletLabel,
+        showOutputWalletSelector,
+        walletRequirement,
+        requiresPastedAddress,
+        quote,
+        quoteLoading: quoteState.loading,
+        quoteError: quoteState.error,
+        stage: execution.stage,
+        idle,
+        insufficientBalance,
+        sameSwap,
+        canExecute,
+        setAmount: swapState.setAmount,
+        setSlippageMode: swapState.setSlippageMode,
+        setSlippagePercent: swapState.setSlippagePercent,
+        selectToken,
+        reverse,
+        saveManualAddress,
+        execute,
+        closeExecution,
+    };
+}

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

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

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

@@ -1,30 +1,55 @@
 import { useAccount } from "@coin-voyage/crypto/hooks";
 import { fetchTokenList, formatCurrencyAmount, tokenToCurrency } from "@coin-voyage/shared/currency";
-import { currencyID } from "@coin-voyage/shared/types";
-import { useEffect, useReducer, useState } from "react";
+import { getChainTypeByChainId } from "@coin-voyage/shared/chain";
+import { ChainType, currencyID } from "@coin-voyage/shared/types";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { useSwapKit } from "../providers/swapkit-context";
+const BALANCE_REFRESH_DELAYS_MS = [4000, 12000];
+// The token list and the portfolio can report the same address in different casing.
+function currencyKey(currency) {
+    const chainType = getChainTypeByChainId(currency.chain_id);
+    const caseInsensitive = chainType === ChainType.EVM || chainType === ChainType.SUI;
+    return currencyID(caseInsensitive ? { ...currency, address: currency.address?.toLowerCase() } : currency);
+}
 function mergeTokens(tokenList, portfolio) {
-    const portfolioById = new Map(portfolio.map((token) => [currencyID(token.currency), token]));
-    const tokenListIds = new Set(tokenList.map(currencyID));
-    const listed = tokenList.map((currency) => portfolioById.get(currencyID(currency)) ?? { currency });
-    const unlisted = portfolio.filter((token) => !tokenListIds.has(currencyID(token.currency)));
+    const portfolioByKey = new Map(portfolio.map((token) => [currencyKey(token.currency), token]));
+    const tokenListKeys = new Set(tokenList.map(currencyKey));
+    const listed = tokenList.map((currency) => {
+        const held = portfolioByKey.get(currencyKey(currency));
+        // Keep the listed address so the token's id stays stable once balances load.
+        return held ? { ...held, currency: { ...held.currency, address: currency.address } } : { currency };
+    });
+    const unlisted = portfolio.filter((token) => !tokenListKeys.has(currencyKey(token.currency)));
     return [...listed, ...unlisted].sort((left, right) => (right.balanceUsd ?? 0) - (left.balanceUsd ?? 0));
 }
 export function useTokenData() {
-    const { api } = useSwapKit();
+    const { api, environment } = useSwapKit();
     const { accounts } = useAccount();
     const [listedCurrencies, setListedCurrencies] = useState([]);
     const [portfolioState, setPortfolioState] = useState({
         walletKey: "[]",
         tokens: [],
+        complete: false,
     });
     const [isLoading, setIsLoading] = useState(true);
     const [tokenError, setTokenError] = useState(null);
     const [portfolioError, setPortfolioError] = useState(null);
-    const [portfolioRevision, refreshBalances] = useReducer((revision) => revision + 1, 0);
+    const [portfolioRevision, bumpPortfolioRevision] = useReducer((revision) => revision + 1, 0);
+    const refreshTimers = useRef([]);
+    const clearRefreshTimers = useCallback(() => {
+        refreshTimers.current.forEach(clearTimeout);
+        refreshTimers.current = [];
+    }, []);
+    // Balances can lag behind a settled swap, so refetch now and again once the chain data has caught up.
+    const refreshBalances = useCallback(() => {
+        clearRefreshTimers();
+        bumpPortfolioRevision();
+        refreshTimers.current = BALANCE_REFRESH_DELAYS_MS.map((delay) => setTimeout(bumpPortfolioRevision, delay));
+    }, [clearRefreshTimers]);
+    useEffect(() => clearRefreshTimers, [clearRefreshTimers]);
     useEffect(() => {
         let active = true;
-        fetchTokenList()
+        fetchTokenList({ preview: environment !== "production" })
             .then((data) => {
             if (!active)
                 return;
@@ -42,7 +67,7 @@ export function useTokenData() {
         return () => {
             active = false;
         };
-    }, []);
+    }, [environment]);
     const walletKey = JSON.stringify(accounts
         .flatMap((account) => (account.address ? [{ address: account.address, chain_type: account.chainType }] : []))
         .sort((left, right) => `${left.chain_type}:${left.address}`.localeCompare(`${right.chain_type}:${right.address}`)));
@@ -61,6 +86,7 @@ export function useTokenData() {
             setPortfolioError(null);
             setPortfolioState({
                 walletKey,
+                complete: !data.errors?.length,
                 tokens: data.portfolio.flatMap((result) => result.currencies.map(({ balance, currency }) => ({
                     currency,
                     balance: formatCurrencyAmount(balance.raw, currency.decimals),
@@ -75,7 +101,10 @@ export function useTokenData() {
         });
         return () => controller.abort();
     }, [api, portfolioRevision, walletKey]);
-    const activePortfolioTokens = portfolioState.walletKey === walletKey ? portfolioState.tokens : [];
-    const tokens = mergeTokens(listedCurrencies, activePortfolioTokens);
-    return { tokens, accounts, isLoading, error: tokenError ?? portfolioError, refreshBalances };
+    const portfolioActive = portfolioState.walletKey === walletKey;
+    // True once every connected wallet's balances are known, so a token without a balance is a zero balance.
+    const balancesLoaded = portfolioActive && portfolioState.complete;
+    // Token identities must stay stable across renders: the quote request is memoized on them.
+    const tokens = useMemo(() => mergeTokens(listedCurrencies, portfolioActive ? portfolioState.tokens : []), [listedCurrencies, portfolioActive, portfolioState.tokens]);
+    return { tokens, accounts, isLoading, error: tokenError ?? portfolioError, balancesLoaded, refreshBalances };
 }

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

@@ -1,9 +1,13 @@
 // @vitest-environment jsdom
+import { fetchTokenList } from "@coin-voyage/shared/currency";
 import { ChainId, ChainType } from "@coin-voyage/shared/types";
-import { cleanup, renderHook, waitFor } from "@testing-library/react";
+import { act, 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() } }));
+const { api, context } = vi.hoisted(() => ({
+    api: { portfolio: vi.fn() },
+    context: { environment: "production" },
+}));
 vi.mock("@coin-voyage/crypto/hooks", () => ({
     useAccount: () => ({ accounts: [{ address: "0x123", chainType: ChainType.EVM }] }),
 }));
@@ -12,13 +16,38 @@ vi.mock("@coin-voyage/shared/currency", async (importOriginal) => ({
     fetchTokenList: vi.fn().mockResolvedValue({ chains: [] }),
 }));
 vi.mock("../providers/swapkit-context", () => ({
-    useSwapKit: () => ({ api }),
+    useSwapKit: () => ({ api, ...context }),
 }));
 afterEach(() => {
     cleanup();
     vi.clearAllMocks();
+    context.environment = "production";
 });
 describe("useTokenData", () => {
+    it.each(["production", "development", "local"])("loads the token list for %s", async (environment) => {
+        context.environment = environment;
+        const preview = environment !== "production";
+        const zec = { name: "Zcash", ticker: "ZEC", decimals: 8, chainId: ChainId.ZEC, logoURI: "zec.png" };
+        vi.mocked(fetchTokenList).mockImplementationOnce(async (options) => ({
+            chains: typeof options === "object" && options.preview
+                ? [{ chainId: ChainId.ZEC, name: "Zcash", logoURI: "zec.png", tokens: [zec] }]
+                : [],
+        }));
+        api.portfolio.mockResolvedValue({ data: { portfolio: [] } });
+        const { result } = renderHook(() => useTokenData());
+        await waitFor(() => expect(result.current.isLoading).toBe(false));
+        expect(fetchTokenList).toHaveBeenCalledWith({ preview });
+        expect(result.current.tokens.map(({ currency }) => currency.symbol)).toEqual(preview ? ["ZEC"] : []);
+    });
+    it("reloads the list when the provider environment changes", async () => {
+        api.portfolio.mockResolvedValue({ data: { portfolio: [] } });
+        const { result, rerender } = renderHook(() => useTokenData());
+        await waitFor(() => expect(result.current.isLoading).toBe(false));
+        context.environment = "development";
+        rerender();
+        await waitFor(() => expect(fetchTokenList).toHaveBeenLastCalledWith({ preview: true }));
+        expect(fetchTokenList).toHaveBeenCalledTimes(2);
+    });
     it.each([
         { decimals: 6, raw: "1234567", ui: "1.23", expected: "1.234567" },
         { decimals: 9, raw: "1239999999", ui: "1.24", expected: "1.239999999" },
@@ -33,4 +62,50 @@ describe("useTokenData", () => {
         await waitFor(() => expect(result.current.tokens).toHaveLength(1));
         expect(result.current.tokens[0]).toEqual({ currency, balance: expected, balanceUsd: 12.34 });
     });
+    it("attaches balances to listed tokens when the portfolio address casing differs", async () => {
+        const address = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48";
+        const listed = { name: "USD Coin", ticker: "USDC", decimals: 6, chainId: ChainId.ETH, address };
+        vi.mocked(fetchTokenList).mockResolvedValueOnce({ chains: [{ tokens: [listed] }] });
+        const held = {
+            id: "usdc",
+            chain_id: ChainId.ETH,
+            address: address.toLowerCase(),
+            name: "USD Coin",
+            symbol: "USDC",
+            decimals: 6,
+        };
+        api.portfolio.mockResolvedValue({
+            data: {
+                portfolio: [{ currencies: [{ currency: held, balance: { raw: "1500000", ui: "1.5", value_usd: 1.5 } }] }],
+            },
+        });
+        const { result, rerender } = renderHook(() => useTokenData());
+        await waitFor(() => expect(result.current.tokens[0]?.balance).toBe("1.5"));
+        expect(result.current.tokens).toHaveLength(1);
+        expect(result.current.tokens[0].currency.address).toBe(address);
+        const { currency } = result.current.tokens[0];
+        rerender();
+        expect(result.current.tokens[0].currency).toBe(currency);
+    });
+    it("refetches the portfolio immediately and again after a refresh", async () => {
+        vi.useFakeTimers();
+        try {
+            api.portfolio.mockResolvedValue({ data: { portfolio: [] } });
+            const { result, unmount } = renderHook(() => useTokenData());
+            expect(api.portfolio).toHaveBeenCalledTimes(1);
+            act(() => result.current.refreshBalances());
+            expect(api.portfolio).toHaveBeenCalledTimes(2);
+            await act(() => vi.advanceTimersByTimeAsync(4000));
+            expect(api.portfolio).toHaveBeenCalledTimes(3);
+            await act(() => vi.advanceTimersByTimeAsync(8000));
+            expect(api.portfolio).toHaveBeenCalledTimes(4);
+            act(() => result.current.refreshBalances());
+            unmount();
+            await vi.advanceTimersByTimeAsync(20000);
+            expect(api.portfolio).toHaveBeenCalledTimes(5);
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
 });

package/dist/lib/currency-selection.js

@@ -1,17 +1,19 @@
 import { addressesMatch } from "@coin-voyage/crypto/utils";
-import { getChainTypeByChainId } from "@coin-voyage/shared/chain";
+import { getChainTypeByChainId, supportsWalletPayments } from "@coin-voyage/shared/chain";
 import { currencyID } from "@coin-voyage/shared/types";
 export function currenciesMatch(left, right) {
     return (left.chain_id === right.chain_id &&
         addressesMatch(left.address, right.address, getChainTypeByChainId(left.chain_id)));
 }
 export function resolveCurrencySelection({ currencies, connectedChainTypes, defaultSourceCurrency, defaultDestinationCurrency, }) {
+    // The source is paid from a connected wallet, so wallet-less chains can only be a destination.
+    const sourceCurrencies = currencies.filter((currency) => supportsWalletPayments(currency.chain_id));
     const preferredSource = defaultSourceCurrency
-        ? currencies.find((currency) => currenciesMatch(currency, defaultSourceCurrency))
+        ? sourceCurrencies.find((currency) => currenciesMatch(currency, defaultSourceCurrency))
         : undefined;
     const source = preferredSource ??
-        currencies.find((currency) => connectedChainTypes.has(getChainTypeByChainId(currency.chain_id))) ??
-        currencies[0];
+        sourceCurrencies.find((currency) => connectedChainTypes.has(getChainTypeByChainId(currency.chain_id))) ??
+        sourceCurrencies[0];
     const preferredDestination = defaultDestinationCurrency
         ? currencies.find((currency) => currenciesMatch(currency, defaultDestinationCurrency))
         : undefined;

package/dist/lib/currency-selection.test.d.ts

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

package/dist/lib/currency-selection.test.js

@@ -0,0 +1,16 @@
+import { ChainId, ChainType, currencyID } from "@coin-voyage/shared/types";
+import { describe, expect, it } from "vitest";
+import { resolveCurrencySelection } from "./currency-selection";
+const zec = { id: "zec", chain_id: ChainId.ZEC, name: "Zcash", symbol: "ZEC", decimals: 8 };
+const btc = { id: "btc", chain_id: ChainId.BTC, name: "Bitcoin", symbol: "BTC", decimals: 8 };
+describe("resolveCurrencySelection", () => {
+    it("never selects a wallet-less chain as the source", () => {
+        const selection = resolveCurrencySelection({
+            currencies: [zec, btc],
+            connectedChainTypes: new Set([ChainType.UTXO]),
+            defaultSourceCurrency: { chain_id: ChainId.ZEC },
+        });
+        expect(selection.sourceId).toBe(currencyID(btc));
+        expect(selection.destinationId).toBe(currencyID(zec));
+    });
+});