@coin-voyage/swapkit 0.4.0 → 0.5.0

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.js

@@ -23,7 +23,7 @@ function mergeTokens(tokenList, portfolio) {
     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({
@@ -49,7 +49,7 @@ export function useTokenData() {
     useEffect(() => clearRefreshTimers, [clearRefreshTimers]);
     useEffect(() => {
         let active = true;
-        fetchTokenList()
+        fetchTokenList({ preview: environment !== "production" })
             .then((data) => {
             if (!active)
                 return;
@@ -67,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}`)));

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

@@ -4,7 +4,10 @@ import { ChainId, ChainType } from "@coin-voyage/shared/types";
 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 }] }),
 }));
@@ -13,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" },
@@ -47,7 +75,9 @@ describe("useTokenData", () => {
             decimals: 6,
         };
         api.portfolio.mockResolvedValue({
-            data: { portfolio: [{ currencies: [{ currency: held, balance: { raw: "1500000", ui: "1.5", value_usd: 1.5 } }] }] },
+            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"));

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));
+    });
+});

package/dist/lib/format.d.ts

@@ -0,0 +1,5 @@
+import type { SwapQuote } from "@coin-voyage/shared/types";
+export declare function formatUsd(value?: number | null): string;
+export declare function formatPriceImpact(value: number): string;
+export declare function usdValue(priceUsd: number | null | undefined, amount: string): number | undefined;
+export declare function formatQuoteRate(quote: SwapQuote): string;

package/dist/lib/format.js

@@ -0,0 +1,20 @@
+export function formatUsd(value) {
+    if (value === undefined || value === null || !Number.isFinite(value))
+        return "$0.00";
+    return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 2 }).format(value);
+}
+export function formatPriceImpact(value) {
+    if (value > 0 && value < 0.01)
+        return "<0.01%";
+    return `${value.toFixed(2)}%`;
+}
+export function usdValue(priceUsd, amount) {
+    const numericAmount = Number(amount);
+    if (!priceUsd || !Number.isFinite(numericAmount))
+        return undefined;
+    return priceUsd * numericAmount;
+}
+export function formatQuoteRate(quote) {
+    const rate = Number(quote.output.amount.ui) / Math.max(Number(quote.input.amount.ui), Number.EPSILON);
+    return `1 ${quote.input.currency.symbol} ≈ ${rate.toLocaleString(undefined, { maximumSignificantDigits: 6 })} ${quote.output.currency.symbol}`;
+}

package/dist/lib/quote.d.ts

@@ -1,4 +1,4 @@
-import type { CurrencyBase, SwapQuoteRequest } from "@coin-voyage/shared/types";
+import type { CurrencyBase, SwapExecuteRequest, SwapQuoteRequest } from "@coin-voyage/shared/types";
 export type SwapSide = "input" | "output";
 export declare function toCurrencyBase(currency: CurrencyBase): CurrencyBase;
 interface BuildSwapQuoteRequestProps {
@@ -9,5 +9,14 @@ interface BuildSwapQuoteRequestProps {
     slippageBps?: number;
 }
 export declare function buildSwapQuoteRequest({ amount, activeSide, source, destination, slippageBps, }: BuildSwapQuoteRequestProps): SwapQuoteRequest | null;
+interface BuildSwapExecuteRequestProps {
+    quoteRequest: SwapQuoteRequest;
+    source: CurrencyBase;
+    destination: CurrencyBase;
+    senderAddress: string;
+    recipient: string;
+    slippageBps?: number;
+}
+export declare function buildSwapExecuteRequest({ quoteRequest, source, destination, senderAddress, recipient, slippageBps, }: BuildSwapExecuteRequestProps): SwapExecuteRequest;
 export declare function isSameSwap(source: CurrencyBase | undefined, destination: CurrencyBase | undefined, inputWalletAddress?: string, outputWalletAddress?: string): boolean;
 export {};

package/dist/lib/quote.js

@@ -16,6 +16,18 @@ export function buildSwapQuoteRequest({ amount, activeSide, source, destination,
         ...(slippageBps === undefined ? {} : { slippage_bps: slippageBps }),
     };
 }
+export function buildSwapExecuteRequest({ quoteRequest, source, destination, senderAddress, recipient, slippageBps, }) {
+    return {
+        trade_type: quoteRequest.trade_type,
+        amount: quoteRequest.amount,
+        source: {
+            currency: toCurrencyBase(source),
+            sender_address: senderAddress,
+            ...(slippageBps === undefined ? {} : { slippage_bps: slippageBps }),
+        },
+        destination: { currency: toCurrencyBase(destination), recipient },
+    };
+}
 export function isSameSwap(source, destination, inputWalletAddress, outputWalletAddress) {
     if (!source || !destination || !currenciesMatch(source, destination))
         return false;

package/dist/lib/slippage.d.ts

@@ -0,0 +1,11 @@
+import type { SlippageMode } from "../hooks/use-swap-state";
+export interface ResolvedSlippage {
+    invalid: boolean;
+    /** Undefined in auto mode, or while the custom value is invalid. */
+    bps?: number;
+    warning?: {
+        tone: "warning" | "danger";
+        message: string;
+    };
+}
+export declare function resolveSlippage(mode: SlippageMode, percent: string): ResolvedSlippage;

package/dist/lib/slippage.js

@@ -0,0 +1,17 @@
+const HIGH_SLIPPAGE_PERCENT = 6;
+const SEVERE_SLIPPAGE_PERCENT = 40;
+export function resolveSlippage(mode, percent) {
+    if (mode !== "custom")
+        return { invalid: false };
+    const value = Number(percent);
+    const invalid = percent.length === 0 || !Number.isFinite(value) || value < 0 || value > 100;
+    return {
+        invalid,
+        bps: invalid ? undefined : Math.round(value * 100),
+        warning: value >= SEVERE_SLIPPAGE_PERCENT
+            ? { tone: "danger", message: "This slippage tolerance may cause a severely unfavorable trade." }
+            : value >= HIGH_SLIPPAGE_PERCENT
+                ? { tone: "warning", message: "High slippage can result in a worse execution price." }
+                : undefined,
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coin-voyage/swapkit",
   "description": "A reusable cross-chain swap component for CoinVoyage.",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -22,8 +22,8 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@coin-voyage/crypto": "3.6.0",
-    "@coin-voyage/shared": "3.6.0"
+    "@coin-voyage/crypto": "3.7.0",
+    "@coin-voyage/shared": "3.7.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",