@coin-voyage/swapkit 0.1.0-beta.2 → 0.2.0

package/dist/components/execution-modal.js

@@ -36,16 +36,22 @@ function outcomeState(stage) {
     if (!("swapData" in stage) || !stage.swapData)
         return { tone: "muted", label: "Awaiting" };
     if (stage.kind === "done") {
+        const transactionHash = stage.destinationTxHash ?? stage.sourceTxHash;
+        const chainId = stage.destinationTxHash
+            ? stage.swapData.data.output.currency.chain_id
+            : stage.swapData.data.input.currency.chain_id;
         return {
             tone: "complete",
-            explorerUrl: getChainExplorerTxUrl(stage.swapData.data.output.currency.chain_id, stage.txHash),
+            explorerUrl: transactionHash ? getChainExplorerTxUrl(chainId, transactionHash) : undefined,
         };
     }
     if (stage.kind === "refunded") {
         return {
             tone: "warning",
             label: "Refunded",
-            explorerUrl: getChainExplorerTxUrl(stage.swapData.data.input.currency.chain_id, stage.refundTxHash),
+            explorerUrl: stage.refundTxHash
+                ? getChainExplorerTxUrl(stage.swapData.data.input.currency.chain_id, stage.refundTxHash)
+                : undefined,
         };
     }
     return { tone: "muted", label: "Awaiting" };

package/dist/components/styles.d.ts

@@ -28,6 +28,8 @@ export declare const Hint: import("styled-components").StyledComponent<"p", any,
 export declare const CardWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CurrencyCard: import("styled-components").StyledComponent<"section", any, {}, never>;
 export declare const CardTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const QuickAmountActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const QuickAmountButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const AmountRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AmountInput: import("styled-components").StyledComponent<"input", any, {}, never>;
 export declare const AmountSkeleton: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -44,7 +46,6 @@ export declare const ChainBadge: import("styled-components").StyledComponent<"sp
 }, never>;
 export declare const CardFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InlineActions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const OutputWalletControl: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const OutputWalletTrigger: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const OutputWalletMenu: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/components/styles.js

@@ -199,14 +199,30 @@ export const CardWrap = styled.div `
   position: relative;
 `;
 export const CurrencyCard = styled.section `
+  position: relative;
   width: 100%;
-  min-height: 143px;
-  padding: 14px;
+  min-height: 128px;
+  padding: 14px 14px 8px;
   border: 0;
   border-style: none;
   border-radius: var(--sk-radius);
   color: var(--sk-text);
   background: var(--sk-surface);
+
+  &:hover [data-quick-amounts],
+  &:focus-within [data-quick-amounts] {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  @media (hover: none) {
+    [data-quick-amounts] {
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateY(0);
+    }
+  }
 `;
 export const CardTitle = styled.div `
   margin-bottom: 12px;
@@ -215,6 +231,47 @@ export const CardTitle = styled.div `
   font-weight: 500;
   line-height: 16px;
 `;
+export const QuickAmountActions = styled.div `
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-2px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+export const QuickAmountButton = styled.button `
+  min-width: 34px;
+  height: 24px;
+  padding: 0 7px;
+  border: 1px solid var(--sk-border);
+  border-radius: 999px;
+  color: var(--sk-text);
+  background: var(--sk-surface-elevated);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 22px;
+
+  &:hover:not(:disabled) {
+    border-color: var(--sk-accent);
+    color: var(--sk-accent);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
 export const AmountRow = styled.div `
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -371,20 +428,6 @@ export const InlineActions = styled.div `
   align-items: center;
   gap: 8px;
 `;
-export const TextButton = styled.button `
-  padding: 0;
-  border: 0;
-  color: var(--sk-accent);
-  background: transparent;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 600;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
 export const OutputWalletControl = styled.span `
   position: relative;
   display: inline-flex;

package/dist/components/swap.d.ts

@@ -1,2 +1,28 @@
-import type { SwapProps } from "../types";
+import { type ReactNode } from "react";
+import { useSwapExecution } from "../hooks/use-swap-execution";
+import { type SwapToken } from "../hooks/use-token-data";
+import { type SwapSide } from "../lib/quote";
+import type { SwapCompleteResult, SwapError, SwapProps } from "../types";
+export declare function useSwapNotifications({ stage, quoteError, tokenError, onBalancesChanged, onComplete, onError, }: {
+    stage: ReturnType<typeof useSwapExecution>["stage"];
+    quoteError?: string | null;
+    tokenError?: string | null;
+    onBalancesChanged: () => void;
+    onComplete?: (result: SwapCompleteResult) => void;
+    onError?: (error: SwapError) => void;
+}): void;
+interface CurrencyPanelProps {
+    side: SwapSide;
+    token?: SwapToken;
+    amount: string;
+    balance?: number;
+    quoteUsd?: number | null;
+    quoteLoading?: boolean;
+    disabled?: boolean;
+    onAmountChange: (value: string) => void;
+    onSelectToken: () => void;
+    footerAction?: ReactNode;
+}
+export declare function CurrencyPanel({ side, token, amount, balance, quoteUsd, quoteLoading, disabled, onAmountChange, onSelectToken, footerAction, }: CurrencyPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaultSlippageBps, onComplete, onError, }?: SwapProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/swap.js

@@ -16,7 +16,7 @@ import { ExecutionModal } from "./execution-modal";
 import { ConnectedWallets } from "./connected-wallets";
 import { ArrowDownIcon, ChevronDownIcon, FuelIcon, InfoIcon, PasteIcon, SettingsIcon, WalletIcon } from "./icons";
 import { Modal } from "./modal";
-import { AmountInput, AmountRow, AmountSkeleton, BreakdownBody, BreakdownCard, BreakdownMeta, BreakdownToggle, CardFooter, CardTitle, CardWrap, CompactInput, CurrencyCard, DetailRow, ErrorBox, FieldLabel, FormStack, FreeFeeBadge, Hint, IconButton, InlineActions, InfoButton, InfoWrap, NetworkCost, OutputWalletControl, OutputWalletMenu, OutputWalletOption, OutputWalletTrigger, PrimaryButton, QuoteValueSkeleton, SettingsLabel, SettingsPanel, SettingsRow, SettingsTooltip, SlippageControl, SlippageInput, SlippageInputWrap, SlippageModeButton, Spinner, SwitchButton, TextButton, TokenButton, Toolbar, ToolbarGroup, WalletRequirementButton, } from "./styles";
+import { AmountInput, AmountRow, AmountSkeleton, BreakdownBody, BreakdownCard, BreakdownMeta, BreakdownToggle, CardFooter, CardTitle, CardWrap, CompactInput, CurrencyCard, DetailRow, ErrorBox, FieldLabel, FormStack, FreeFeeBadge, Hint, IconButton, InlineActions, InfoButton, InfoWrap, NetworkCost, OutputWalletControl, OutputWalletMenu, OutputWalletOption, OutputWalletTrigger, PrimaryButton, QuoteValueSkeleton, QuickAmountActions, QuickAmountButton, SettingsLabel, SettingsPanel, SettingsRow, SettingsTooltip, SlippageControl, SlippageInput, SlippageInputWrap, SlippageModeButton, Spinner, SwitchButton, TokenButton, Toolbar, ToolbarGroup, WalletRequirementButton, } from "./styles";
 import { TokenIcon } from "./token-icon";
 import { TokenPicker } from "./token-picker";
 import { WalletConnector } from "./wallet-connector";
@@ -54,24 +54,30 @@ function SlippageInfoTooltip({ id }) {
     const open = hovered || focused;
     return (_jsxs(InfoWrap, { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [_jsx(InfoButton, { type: "button", "aria-label": "About max slippage", "aria-describedby": open ? id : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: _jsx(InfoIcon, {}) }), open && (_jsx(SettingsTooltip, { id: id, role: "tooltip", children: SLIPPAGE_TOOLTIP }))] }));
 }
-function useSwapNotifications({ stage, quoteError, tokenError, onComplete, onError, }) {
+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;
-    }, [onComplete, onError]);
+        onBalancesChangedRef.current = onBalancesChanged;
+    }, [onBalancesChanged, onComplete, onError]);
     useEffect(() => {
         if (stage.kind === "idle") {
             lastNotification.current = undefined;
             return;
         }
         if (stage.kind === "done") {
-            const key = `complete:${stage.orderId}:${stage.txHash}`;
+            const transactionHash = stage.destinationTxHash ?? stage.sourceTxHash;
+            if (!transactionHash)
+                return;
+            const key = `complete:${stage.orderId}:${transactionHash}`;
             if (lastNotification.current !== key) {
                 lastNotification.current = key;
-                onCompleteRef.current?.({ orderId: stage.orderId, transactionHash: stage.txHash });
+                onBalancesChangedRef.current();
+                onCompleteRef.current?.({ orderId: stage.orderId, transactionHash });
             }
         }
         else if (stage.kind === "error") {
@@ -131,12 +137,26 @@ function tokenUsdValue(token, amount) {
         return undefined;
     return token.currency.price_usd * numericAmount;
 }
-function CurrencyPanel({ side, token, amount, balance, quoteUsd, quoteLoading, disabled, onAmountChange, onSelectToken, onMax, footerAction, }) {
+const QUICK_AMOUNTS = [
+    { label: "25%", fraction: 0.25 },
+    { label: "50%", fraction: 0.5 },
+    { label: "75%", fraction: 0.75 },
+    { label: "Max", fraction: 1 },
+];
+function balanceFraction(balance, fraction, decimals) {
+    if (fraction === 1)
+        return balance.toString();
+    return Number((balance * fraction).toFixed(Math.min(Math.max(decimals, 0), 18))).toString();
+}
+export function CurrencyPanel({ side, token, amount, balance, quoteUsd, quoteLoading, disabled, onAmountChange, onSelectToken, footerAction, }) {
     const label = side === "input" ? "SELL" : "BUY";
-    return (_jsxs(CurrencyCard, { children: [_jsx(CardTitle, { children: label }), _jsxs(AmountRow, { children: [quoteLoading ? (_jsx(AmountSkeleton, { role: "status", "aria-label": "Loading quoted amount" })) : (_jsx(AmountInput, { "aria-label": side === "input" ? "Sell amount" : "Buy amount", type: "text", inputMode: "decimal", autoComplete: "off", autoCorrect: "off", spellCheck: false, placeholder: "0", value: amount, disabled: disabled, onChange: (event) => {
+    const showQuickAmounts = side === "input" && balance !== undefined && token !== undefined;
+    return (_jsxs(CurrencyCard, { children: [_jsx(CardTitle, { children: label }), showQuickAmounts && (_jsx(QuickAmountActions, { "data-quick-amounts": true, children: QUICK_AMOUNTS.map(({ label: amountLabel, fraction }) => (_jsx(QuickAmountButton, { type: "button", disabled: disabled, "aria-label": fraction === 1
+                        ? `Use maximum ${token.currency.symbol} balance`
+                        : `Use ${amountLabel} of ${token.currency.symbol} balance`, onClick: () => onAmountChange(balanceFraction(balance, fraction, token.currency.decimals)), children: amountLabel }, amountLabel))) })), _jsxs(AmountRow, { children: [quoteLoading ? (_jsx(AmountSkeleton, { role: "status", "aria-label": "Loading quoted amount" })) : (_jsx(AmountInput, { "aria-label": side === "input" ? "Sell amount" : "Buy amount", type: "text", inputMode: "decimal", autoComplete: "off", autoCorrect: "off", spellCheck: false, placeholder: "0", value: amount, disabled: disabled, onChange: (event) => {
                             if (isValidSwapAmountInput(event.target.value))
                                 onAmountChange(event.target.value);
-                        } })), _jsxs(TokenButton, { type: "button", onClick: onSelectToken, "aria-label": `Select ${side} token`, children: [token ? _jsx(TokenIcon, { currency: token.currency }) : null, _jsx("span", { children: token?.currency.symbol ?? "Select" }), _jsx(ChevronDownIcon, {})] })] }), _jsxs(CardFooter, { children: [quoteLoading ? (_jsx(QuoteValueSkeleton, { role: "status", "aria-label": "Loading quoted value" })) : (_jsx("span", { children: formatUsd(quoteUsd ?? tokenUsdValue(token, amount)) })), _jsxs(InlineActions, { children: [balance !== undefined && _jsxs("span", { children: ["Balance: ", balance.toLocaleString()] }), onMax && token && (_jsx(TextButton, { type: "button", "aria-label": `Use maximum ${token.currency.symbol} balance`, onClick: onMax, children: "Max" })), footerAction] })] })] }));
+                        } })), _jsxs(TokenButton, { type: "button", onClick: onSelectToken, "aria-label": `Select ${side} token`, children: [token ? _jsx(TokenIcon, { currency: token.currency }) : null, _jsx("span", { children: token?.currency.symbol ?? "Select" }), _jsx(ChevronDownIcon, {})] })] }), _jsxs(CardFooter, { children: [quoteLoading ? (_jsx(QuoteValueSkeleton, { role: "status", "aria-label": "Loading quoted value" })) : (_jsx("span", { children: formatUsd(quoteUsd ?? tokenUsdValue(token, amount)) })), _jsxs(InlineActions, { children: [balance !== undefined && _jsxs("span", { children: ["Balance: ", balance.toLocaleString()] }), footerAction] })] })] }));
 }
 function ManualWalletModal({ open, chainId, initialValue, onClose, onSave, }) {
     const [value, setValue] = useState(initialValue ?? "");
@@ -156,7 +176,7 @@ export function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaul
     const { mode, theme } = useSwapKit();
     const slippageInputId = useId();
     const slippageTooltipId = useId();
-    const { tokens, accounts, isLoading, error: tokenError } = useTokenData();
+    const { tokens, accounts, isLoading, error: tokenError, refreshBalances } = useTokenData();
     const { accounts: connectedAccounts } = useAccount();
     const [sourcePickerOpen, setSourcePickerOpen] = useState(false);
     const [destinationPickerOpen, setDestinationPickerOpen] = useState(false);
@@ -223,9 +243,16 @@ export function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaul
         slippageBps,
         sourceToken?.currency,
     ]);
-    const execution = useSwapExecution(sourceChainType);
+    const execution = useSwapExecution(sourceChainType, inputAccount?.address);
     const quoteState = useSwapQuote(quoteRequest, execution.stage.kind === "idle");
-    useSwapNotifications({ stage: execution.stage, quoteError: quoteState.error, tokenError, onComplete, onError });
+    useSwapNotifications({
+        stage: execution.stage,
+        quoteError: quoteState.error,
+        tokenError,
+        onBalancesChanged: refreshBalances,
+        onComplete,
+        onError,
+    });
     const displayedInputAmount = activeSide === "output" && quoteState.quote ? quoteState.quote.input.amount.ui : inputAmount;
     const displayedOutputAmount = activeSide === "input" && quoteState.quote ? quoteState.quote.output.amount.ui : outputAmount;
     const sourceBalance = sourceToken?.balance;
@@ -271,11 +298,7 @@ export function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaul
                                                                     } }), _jsx("span", { children: "%" })] })] })] }), slippageMode === "custom" &&
                                             (slippage >= 40 ? (_jsx(Hint, { "$tone": "danger", children: "This slippage tolerance may cause a severely unfavorable trade." })) : slippage >= 6 ? (_jsx(Hint, { "$tone": "warning", children: "High slippage can result in a worse execution price." })) : null)] }))] })] }), _jsxs(CardWrap, { children: [_jsx(CurrencyPanel, { side: "input", token: sourceToken, amount: displayedInputAmount, balance: sourceBalance, quoteUsd: quoteState.quote?.input.amount.value_usd, quoteLoading: quoteState.loading && activeSide === "output", disabled: execution.stage.kind !== "idle", onAmountChange: (value) => {
                                 swapState.setAmount("input", value);
-                            }, onSelectToken: () => setSourcePickerOpen(true), onMax: sourceBalance === undefined
-                                ? undefined
-                                : () => {
-                                    swapState.setAmount("input", sourceBalance.toString());
-                                } }), _jsx(SwitchButton, { type: "button", "aria-label": "Swap tokens", onClick: reverseTokens, disabled: !sourceToken || !destinationToken, children: _jsx(ArrowDownIcon, { size: 24 }) })] }), _jsx(CurrencyPanel, { side: "output", token: destinationToken, amount: displayedOutputAmount, quoteUsd: quoteState.quote?.output.amount.value_usd, quoteLoading: quoteState.loading && activeSide === "input", disabled: execution.stage.kind !== "idle", onAmountChange: (value) => {
+                            }, onSelectToken: () => setSourcePickerOpen(true) }), _jsx(SwitchButton, { type: "button", "aria-label": "Swap tokens", onClick: reverseTokens, disabled: !sourceToken || !destinationToken, children: _jsx(ArrowDownIcon, { size: 24 }) })] }), _jsx(CurrencyPanel, { side: "output", token: destinationToken, amount: displayedOutputAmount, quoteUsd: quoteState.quote?.output.amount.value_usd, quoteLoading: quoteState.loading && activeSide === "input", disabled: execution.stage.kind !== "idle", onAmountChange: (value) => {
                         swapState.setAmount("output", value);
                     }, onSelectToken: () => setDestinationPickerOpen(true), footerAction: showOutputWalletSelector ? (_jsx(OutputWalletSelector, { label: outputAddress ? truncateAddress(outputAddress) : "Connect Wallet", open: outputWalletMenuOpen, onOpenChange: setOutputWalletMenuOpen, onConnect: () => {
                             setOutputWalletMenuOpen(false);
@@ -290,6 +313,6 @@ export function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaul
                         const terminal = ["done", "refunded"].includes(execution.stage.kind);
                         execution.reset();
                         if (terminal)
-                            swapState.reset();
+                            swapState.reset({ preserveCurrencies: execution.stage.kind === "done" });
                     } })] }) }));
 }

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

package/dist/lib/execution.d.ts

@@ -1,5 +1,12 @@
 import type { ExecuteTransaction } from "@coin-voyage/crypto/types";
 import type { SwapExecuteResponse } from "@coin-voyage/shared/types";
+type CompletedTransactionHashes = {
+    sourceTxHash: string;
+    destinationTxHash?: string;
+} | {
+    sourceTxHash?: string;
+    destinationTxHash: string;
+};
 export type SwapStage = {
     kind: "idle";
 } | {
@@ -7,6 +14,7 @@ export type SwapStage = {
 } | {
     kind: "awaiting_payment";
     swapData: SwapExecuteResponse;
+    orderId: string;
     paymentStepIndex: number;
 } | {
     kind: "source_confirming";
@@ -18,21 +26,20 @@ export type SwapStage = {
     swapData: SwapExecuteResponse;
     orderId: string;
     sourceTxHash?: string;
-} | {
+} | ({
     kind: "done";
     swapData: SwapExecuteResponse;
     orderId: string;
-    sourceTxHash?: string;
-    txHash: string;
-} | {
+} & CompletedTransactionHashes) | {
     kind: "refunded";
     swapData: SwapExecuteResponse;
     orderId: string;
     sourceTxHash?: string;
-    refundTxHash: string;
+    refundTxHash?: string;
 } | {
     kind: "error";
     swapData: SwapExecuteResponse | null;
     message: string;
 };
 export declare function buildSwapExecuteTransactions(swapData: SwapExecuteResponse, fromAddress: string): ExecuteTransaction[];
+export {};

package/dist/lib/quote.d.ts

@@ -1,4 +1,4 @@
-import { type CurrencyBase, type SwapQuoteRequest } from "@coin-voyage/shared/types";
+import type { CurrencyBase, SwapQuoteRequest } from "@coin-voyage/shared/types";
 export type SwapSide = "input" | "output";
 export declare function toCurrencyBase(currency: CurrencyBase): CurrencyBase;
 interface BuildSwapQuoteRequestProps {

package/dist/lib/quote.js

@@ -1,4 +1,6 @@
-import { currencyID } from "@coin-voyage/shared/types";
+import { addressesMatch } from "@coin-voyage/crypto/utils";
+import { getChainTypeByChainId } from "@coin-voyage/shared/chain";
+import { currenciesMatch } from "./currency-selection";
 export function toCurrencyBase(currency) {
     return currency.address ? { chain_id: currency.chain_id, address: currency.address } : { chain_id: currency.chain_id };
 }
@@ -15,10 +17,8 @@ export function buildSwapQuoteRequest({ amount, activeSide, source, destination,
     };
 }
 export function isSameSwap(source, destination, inputWalletAddress, outputWalletAddress) {
-    return Boolean(source &&
-        destination &&
-        currencyID(source) === currencyID(destination) &&
-        inputWalletAddress &&
-        outputWalletAddress &&
-        inputWalletAddress.toLowerCase() === outputWalletAddress.toLowerCase());
+    if (!source || !destination || !currenciesMatch(source, destination))
+        return false;
+    const chainType = getChainTypeByChainId(source.chain_id);
+    return Boolean(inputWalletAddress && outputWalletAddress && addressesMatch(inputWalletAddress, outputWalletAddress, chainType));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coin-voyage/swapkit",
   "description": "A reusable cross-chain swap component for CoinVoyage.",
-  "version": "0.1.0-beta.2",
+  "version": "0.2.0",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -22,7 +22,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@coin-voyage/crypto": "3.3.0",
+    "@coin-voyage/crypto": "3.4.0",
     "@coin-voyage/shared": "3.4.1-beta.1"
   },
   "devDependencies": {