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

package/dist/components/connected-wallets.d.ts

@@ -1 +1 @@
-export declare function ConnectedWallets(): import("react/jsx-runtime").JSX.Element | null;
+export declare function ConnectedWallets(): import("react/jsx-runtime").JSX.Element;

package/dist/components/connected-wallets.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAccount, useAccountDisconnect, useInstalledWallets } from "@coin-voyage/crypto/hooks";
 import { getChainTypeName } from "@coin-voyage/shared/chain";
+import { ChainType } from "@coin-voyage/shared/types";
 import { useEffect, useRef, useState } from "react";
 import { CloseIcon, UnplugIcon } from "./icons";
-import { ConnectedWalletPanel, ConnectedWalletRow, DisconnectAllButton, IconButton, TriggerWalletIcons, ToolbarGroup, WalletDetails, WalletDisconnectButton, WalletIdentity, WalletLabel, WalletPanelHeader, } from "./styles";
+import { ConnectedWalletPanel, ConnectedWalletRow, DisconnectAllButton, IconButton, TriggerWalletIcons, ToolbarGroup, WalletActions, WalletDetails, WalletDisconnectButton, WalletIdentity, WalletLabel, WalletPanelHeader, WalletSwitchButton, } from "./styles";
 import { WalletIconDisplay } from "./wallet-icon";
+import { WalletConnector } from "./wallet-connector";
 function truncateAddress(address) {
     return address.length <= 14 ? address : `${address.slice(0, 6)}…${address.slice(-5)}`;
 }
@@ -17,6 +19,15 @@ function connectorId(connector) {
         return connector.name;
     return undefined;
 }
+function connectorName(connector) {
+    if (!connector || typeof connector !== "object")
+        return undefined;
+    if ("displayName" in connector && typeof connector.displayName === "string")
+        return connector.displayName;
+    if ("name" in connector && typeof connector.name === "string")
+        return connector.name;
+    return undefined;
+}
 function accountAddress(account) {
     return account.address ?? account.addresses?.[0];
 }
@@ -25,11 +36,20 @@ export function ConnectedWallets() {
     const wallets = useInstalledWallets();
     const disconnectAccount = useAccountDisconnect();
     const [open, setOpen] = useState(false);
+    const [switchAccount, setSwitchAccount] = useState(null);
     const groupRef = useRef(null);
     const connectedAccounts = accounts.filter((account) => account.isConnected);
     const walletForAccount = (account) => {
         const accountConnectorId = connectorId(account.connector);
-        return wallets.find((wallet) => wallet.connectors.some((candidate) => candidate.chainType === account.chainType && connectorId(candidate.connector) === accountConnectorId));
+        const accountConnectorName = connectorName(account.connector)?.toLowerCase();
+        return wallets.find((wallet) => wallet.connectors.some((candidate) => {
+            if (candidate.chainType !== account.chainType)
+                return false;
+            const candidateConnectorId = connectorId(candidate.connector);
+            const candidateConnectorName = connectorName(candidate.connector)?.toLowerCase();
+            return ((accountConnectorId !== undefined && candidateConnectorId === accountConnectorId) ||
+                (accountConnectorName !== undefined && candidateConnectorName === accountConnectorName));
+        }));
     };
     useEffect(() => {
         if (!open)
@@ -49,18 +69,21 @@ export function ConnectedWallets() {
             document.removeEventListener("keydown", dismissFromKeyboard);
         };
     }, [open]);
-    if (connectedAccounts.length === 0)
-        return null;
     const triggerLabel = connectedAccounts.length === 1
         ? truncateAddress(accountAddress(connectedAccounts[0]) ?? "Wallet")
         : `${connectedAccounts.length} connections`;
-    return (_jsxs(ToolbarGroup, { ref: groupRef, children: [_jsxs(IconButton, { type: "button", "aria-label": "Connected wallets", "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [_jsx(TriggerWalletIcons, { children: connectedAccounts.slice(0, 3).map((account, index) => {
-                            const wallet = walletForAccount(account);
-                            return (_jsx(WalletIconDisplay, { icon: wallet?.icon, name: wallet?.name ?? getChainTypeName(account.chainType), size: 20 }, `${account.chainType}:${accountAddress(account) ?? index}`));
-                        }) }), _jsx(WalletLabel, { children: triggerLabel })] }), open && (_jsxs(ConnectedWalletPanel, { role: "menu", "aria-label": "Connected wallets menu", children: [_jsx(WalletPanelHeader, { children: "Connected wallets" }), connectedAccounts.map((account, index) => {
-                        const wallet = walletForAccount(account);
-                        const chainName = getChainTypeName(account.chainType);
-                        const address = accountAddress(account);
-                        return (_jsxs(ConnectedWalletRow, { children: [_jsxs(WalletIdentity, { children: [_jsx(WalletIconDisplay, { icon: wallet?.icon, name: wallet?.name ?? chainName, size: 20 }), _jsxs(WalletDetails, { children: [_jsx("strong", { children: chainName }), _jsx("small", { children: address ? truncateAddress(address) : "Connected" })] })] }), _jsx(WalletDisconnectButton, { type: "button", "aria-label": `Disconnect ${chainName} wallet`, onClick: () => void disconnectAccount(account), children: _jsx(CloseIcon, { size: 16 }) })] }, `${account.chainType}:${address ?? index}`));
-                    }), _jsxs(DisconnectAllButton, { type: "button", onClick: () => void disconnectAccount(), children: [_jsx(UnplugIcon, {}), "Disconnect all"] })] }))] }));
+    return (_jsxs(_Fragment, { children: [connectedAccounts.length > 0 && (_jsxs(ToolbarGroup, { ref: groupRef, children: [_jsxs(IconButton, { type: "button", "aria-label": "Connected wallets", "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [_jsx(TriggerWalletIcons, { children: connectedAccounts.slice(0, 3).map((account, index) => {
+                                    const wallet = walletForAccount(account);
+                                    return (_jsx(WalletIconDisplay, { icon: wallet?.icon, name: wallet?.name ?? getChainTypeName(account.chainType), size: 20 }, `${account.chainType}:${accountAddress(account) ?? index}`));
+                                }) }), _jsx(WalletLabel, { children: triggerLabel })] }), open && (_jsxs(ConnectedWalletPanel, { role: "group", "aria-label": "Connected wallets", children: [_jsx(WalletPanelHeader, { children: "Connected wallets" }), connectedAccounts.map((account, index) => {
+                                const wallet = walletForAccount(account);
+                                const chainName = getChainTypeName(account.chainType);
+                                const address = accountAddress(account);
+                                return (_jsxs(ConnectedWalletRow, { children: [_jsxs(WalletIdentity, { children: [_jsx(WalletIconDisplay, { icon: wallet?.icon, name: wallet?.name ?? chainName, size: 20 }), _jsxs(WalletDetails, { children: [_jsx("strong", { children: chainName }), _jsx("small", { children: address ? truncateAddress(address) : "Connected" })] })] }), _jsxs(WalletActions, { children: [_jsx(WalletSwitchButton, { type: "button", "aria-label": `Switch ${chainName} wallet`, onClick: () => {
+                                                        setOpen(false);
+                                                        setSwitchAccount(account);
+                                                    }, children: "Switch" }), _jsx(WalletDisconnectButton, { type: "button", "aria-label": `Disconnect ${chainName} wallet`, onClick: () => void disconnectAccount(account), children: _jsx(CloseIcon, { size: 16 }) })] })] }, `${account.chainType}:${address ?? index}`));
+                            }), _jsxs(DisconnectAllButton, { type: "button", onClick: () => void disconnectAccount(), children: [_jsx(UnplugIcon, {}), "Disconnect all"] })] }))] })), _jsx(WalletConnector, { open: switchAccount !== null, chainType: switchAccount?.chainType, intent: "switch", beforeConnect: switchAccount && switchAccount.chainType !== ChainType.SOL
+                    ? () => disconnectAccount(switchAccount)
+                    : undefined, onClose: () => setSwitchAccount(null) })] }));
 }

package/dist/components/connected-wallets.test.d.ts

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

package/dist/components/connected-wallets.test.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { ChainId, ChainType } from "@coin-voyage/shared/types";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ConnectedWallets } from "./connected-wallets";
+const disconnectAccount = vi.fn();
+let accountsConnected = true;
+let accountChainType = ChainType.SOL;
+let accountAddress = "current-address";
+let accountConnector = { id: "Test wallet", name: "Test wallet" };
+let installedWalletOverride;
+vi.mock("@coin-voyage/crypto/hooks", () => ({
+    useAccount: () => ({
+        accounts: accountsConnected
+            ? [
+                {
+                    address: accountAddress,
+                    chainId: ChainId.SOL,
+                    chainType: accountChainType,
+                    connector: accountConnector,
+                    isConnected: true,
+                    isConnecting: false,
+                    isDisconnected: false,
+                    isReconnecting: false,
+                    status: "connected",
+                },
+            ]
+            : [],
+    }),
+    useAccountDisconnect: () => disconnectAccount,
+    useInstalledWallets: () => [
+        installedWalletOverride ?? {
+            id: "test-wallet",
+            name: "Test wallet",
+            connectors: [{ chainType: accountChainType, connector: { id: "Test wallet", name: "Test wallet" } }],
+        },
+    ],
+}));
+vi.mock("./wallet-connector", () => ({
+    WalletConnector: ({ open, chainType, intent }) => open ? _jsx("div", { "data-testid": "wallet-connector", children: `${intent}:${chainType}` }) : null,
+}));
+afterEach(() => {
+    cleanup();
+    disconnectAccount.mockClear();
+    accountsConnected = true;
+    accountChainType = ChainType.SOL;
+    accountAddress = "current-address";
+    accountConnector = { id: "Test wallet", name: "Test wallet" };
+    installedWalletOverride = undefined;
+});
+describe("ConnectedWallets", () => {
+    it("opens the wallet switcher for the selected account chain", async () => {
+        const user = userEvent.setup();
+        render(_jsx(ConnectedWallets, {}));
+        await user.click(screen.getByRole("button", { name: "Connected wallets" }));
+        await user.click(screen.getByRole("button", { name: "Switch Solana wallet" }));
+        expect(screen.queryByRole("group", { name: "Connected wallets" })).toBeNull();
+        expect(screen.getByTestId("wallet-connector").textContent).toBe(`switch:${ChainType.SOL}`);
+        expect(disconnectAccount).not.toHaveBeenCalled();
+    });
+    it("keeps the switcher open while the previous account disconnects", async () => {
+        const user = userEvent.setup();
+        const { rerender } = render(_jsx(ConnectedWallets, {}));
+        await user.click(screen.getByRole("button", { name: "Connected wallets" }));
+        await user.click(screen.getByRole("button", { name: "Switch Solana wallet" }));
+        accountsConnected = false;
+        rerender(_jsx(ConnectedWallets, {}));
+        expect(screen.getByTestId("wallet-connector").textContent).toBe(`switch:${ChainType.SOL}`);
+    });
+    it("updates the connected-wallet label when Phantom changes address", () => {
+        accountAddress = "old-address-123456789";
+        const { rerender } = render(_jsx(ConnectedWallets, {}));
+        expect(screen.getByRole("button", { name: "Connected wallets" }).textContent).toContain("old-ad…56789");
+        accountAddress = "new-address-987654321";
+        rerender(_jsx(ConnectedWallets, {}));
+        expect(screen.getByRole("button", { name: "Connected wallets" }).textContent).toContain("new-ad…54321");
+    });
+    it("uses the Phantom icon for its Ethereum connection in a multichain wallet", () => {
+        accountChainType = ChainType.EVM;
+        accountConnector = { id: "injected", name: "Phantom" };
+        installedWalletOverride = {
+            id: "app.phantom",
+            name: "Phantom",
+            icon: "phantom.svg",
+            connectors: [
+                { chainType: ChainType.EVM, connector: { id: "app.phantom", name: "Phantom" } },
+                { chainType: ChainType.SOL, connector: { id: "Phantom", name: "Phantom" } },
+            ],
+        };
+        render(_jsx(ConnectedWallets, {}));
+        expect(screen.getByAltText("Phantom wallet")).not.toBeNull();
+    });
+    it("only disconnects an account from the explicit disconnect action", async () => {
+        accountChainType = ChainType.EVM;
+        const user = userEvent.setup();
+        render(_jsx(ConnectedWallets, {}));
+        await user.click(screen.getByRole("button", { name: "Connected wallets" }));
+        await user.click(screen.getByRole("button", { name: "Disconnect Ethereum wallet" }));
+        expect(disconnectAccount).toHaveBeenCalledTimes(1);
+        expect(disconnectAccount.mock.calls[0]?.[0]?.chainType).toBe(ChainType.EVM);
+    });
+});

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>;
@@ -94,6 +95,8 @@ export declare const WalletPanelHeader: import("styled-components").StyledCompon
 export declare const ConnectedWalletRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WalletIdentity: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WalletDetails: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WalletActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WalletSwitchButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const WalletDisconnectButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const DisconnectAllButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const TriggerWalletIcons: 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;
@@ -912,6 +955,11 @@ export const WalletOption = styled.button `
   &:hover {
     background: var(--sk-surface);
   }
+
+  &:disabled {
+    cursor: wait;
+    opacity: 0.6;
+  }
 `;
 export const WalletIconFrame = styled.span `
   display: inline-flex;
@@ -1025,6 +1073,28 @@ export const WalletDetails = styled.div `
     font-size: 12px;
   }
 `;
+export const WalletActions = styled.div `
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+`;
+export const WalletSwitchButton = styled.button `
+  height: 28px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  color: var(--sk-text-muted);
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+
+  &:hover {
+    color: var(--sk-accent);
+    background: color-mix(in srgb, var(--sk-accent) 12%, transparent);
+  }
+`;
 export const WalletDisconnectButton = styled.button `
   display: inline-flex;
   width: 28px;

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);
@@ -283,13 +306,13 @@ export function Swap({ defaultSourceCurrency, defaultDestinationCurrency, defaul
                         }, onPaste: () => {
                             setOutputWalletMenuOpen(false);
                             setManualWalletOpen(true);
-                        } })) : undefined }), quoteState.error && _jsx(ErrorBox, { children: quoteState.error }), tokenError && _jsx(ErrorBox, { children: tokenError }), insufficientBalance && _jsxs(ErrorBox, { children: ["Insufficient ", sourceToken?.currency.symbol, " balance"] }), sameSwap && _jsx(ErrorBox, { children: "Select a different token or destination wallet" }), (quoteState.loading || quoteState.quote) && (_jsxs(BreakdownCard, { children: [_jsxs(BreakdownToggle, { type: "button", "aria-expanded": breakdownOpen, onClick: () => setBreakdownOpen((open) => !open), children: [_jsx("span", { children: quoteState.loading ? "Finding the best route…" : quoteSummary }), _jsxs(BreakdownMeta, { children: [quoteState.quote && (_jsxs(NetworkCost, { children: [_jsx(FuelIcon, {}), _jsx("span", { children: formatUsd(quoteState.quote.input.breakdown?.gas?.value_usd) })] })), _jsx(ChevronDownIcon, { size: 16, up: breakdownOpen })] })] }), breakdownOpen && (_jsxs(BreakdownBody, { children: [quoteState.quote?.output.amount_out_minimum && (_jsxs(DetailRow, { children: [_jsx("span", { children: "Receive at least" }), _jsxs("strong", { children: [quoteState.quote.output.amount_out_minimum.ui, " ", quoteState.quote.output.currency.symbol] })] })), _jsxs(DetailRow, { children: [_jsx("span", { children: "Price impact" }), _jsx("strong", { children: quoteState.quote ? formatPriceImpact(quoteState.quote.price_impact) : "—" })] }), _jsxs(DetailRow, { children: [_jsx("span", { children: "Network cost" }), _jsx("strong", { children: formatUsd(quoteState.quote?.input.breakdown?.gas?.value_usd) })] }), _jsxs(DetailRow, { children: [_jsx("span", { children: "Total fees" }), quoteState.quote?.input.breakdown?.fees?.total_fee.value_usd === 0 ? (_jsx(FreeFeeBadge, { children: "Free" })) : (_jsx("strong", { children: formatUsd(quoteState.quote?.input.breakdown?.fees?.total_fee.value_usd) }))] })] }))] })), walletRequirement.target !== "none" ? (_jsx(WalletRequirementButton, { type: "button", onClick: () => setConnectTarget({ open: true, chainType: walletRequirement.chainType }), children: walletRequirement.label })) : (_jsxs(PrimaryButton, { type: "button", disabled: !canExecute || quoteState.loading, onClick: () => void executeSwap(), children: [quoteState.loading ? _jsx(Spinner, {}) : null, isLoading ? "Loading tokens…" : quoteState.loading ? "Fetching quote…" : "Swap"] })), _jsx(TokenPicker, { open: sourcePickerOpen, title: "Select Token", tokens: tokens, selectedId: resolvedSourceId, onClose: () => setSourcePickerOpen(false), onSelect: (token) => selectToken("input", token) }), _jsx(TokenPicker, { open: destinationPickerOpen, title: "Select Token", tokens: tokens, selectedId: resolvedDestinationId, onClose: () => setDestinationPickerOpen(false), onSelect: (token) => selectToken("output", token) }), _jsx(WalletConnector, { open: connectTarget.open, chainType: connectTarget.chainType, onClose: () => setConnectTarget({ open: false }) }), manualWalletOpen && (_jsx(ManualWalletModal, { open: true, chainId: destinationToken?.currency.chain_id, initialValue: manualAddress, onClose: () => setManualWalletOpen(false), onSave: (address) => {
+                        } })) : undefined }), quoteState.error && _jsx(ErrorBox, { children: quoteState.error }), tokenError && _jsx(ErrorBox, { children: tokenError }), insufficientBalance && _jsxs(ErrorBox, { children: ["Insufficient ", sourceToken?.currency.symbol, " balance"] }), sameSwap && _jsx(ErrorBox, { children: "Select a different token or destination wallet" }), (quoteState.loading || quoteState.quote) && (_jsxs(BreakdownCard, { children: [_jsxs(BreakdownToggle, { type: "button", "aria-expanded": breakdownOpen, onClick: () => setBreakdownOpen((open) => !open), children: [_jsx("span", { children: quoteState.loading ? "Finding the best route…" : quoteSummary }), _jsxs(BreakdownMeta, { children: [quoteState.quote && (_jsxs(NetworkCost, { children: [_jsx(FuelIcon, {}), _jsx("span", { children: formatUsd(quoteState.quote.input.breakdown?.gas?.value_usd) })] })), _jsx(ChevronDownIcon, { size: 16, up: breakdownOpen })] })] }), breakdownOpen && (_jsxs(BreakdownBody, { children: [quoteState.quote?.output.amount_out_minimum && (_jsxs(DetailRow, { children: [_jsx("span", { children: "Receive at least" }), _jsxs("strong", { children: [quoteState.quote.output.amount_out_minimum.ui, " ", quoteState.quote.output.currency.symbol] })] })), _jsxs(DetailRow, { children: [_jsx("span", { children: "Price impact" }), _jsx("strong", { children: quoteState.quote ? formatPriceImpact(quoteState.quote.price_impact) : "—" })] }), _jsxs(DetailRow, { children: [_jsx("span", { children: "Network cost" }), _jsx("strong", { children: formatUsd(quoteState.quote?.input.breakdown?.gas?.value_usd) })] }), _jsxs(DetailRow, { children: [_jsx("span", { children: "Total fees" }), quoteState.quote?.input.breakdown?.fees?.total_fee.value_usd === 0 ? (_jsx(FreeFeeBadge, { children: "Free" })) : (_jsx("strong", { children: formatUsd(quoteState.quote?.input.breakdown?.fees?.total_fee.value_usd) }))] })] }))] })), walletRequirement.target !== "none" ? (_jsx(WalletRequirementButton, { type: "button", onClick: () => setConnectTarget({ open: true, chainType: walletRequirement.chainType }), children: walletRequirement.label })) : (_jsxs(PrimaryButton, { type: "button", disabled: !canExecute || quoteState.loading, onClick: () => void executeSwap(), children: [quoteState.loading ? _jsx(Spinner, {}) : null, isLoading ? "Loading tokens…" : quoteState.loading ? "Fetching quote…" : "Swap"] })), _jsx(TokenPicker, { open: sourcePickerOpen, title: "Select Token", tokens: tokens, selectedId: resolvedSourceId, onClose: () => setSourcePickerOpen(false), onSelect: (token) => selectToken("input", token) }), _jsx(TokenPicker, { open: destinationPickerOpen, title: "Select Token", tokens: tokens, selectedId: resolvedDestinationId, preferredChainId: sourceToken?.currency.chain_id, onClose: () => setDestinationPickerOpen(false), onSelect: (token) => selectToken("output", token) }), _jsx(WalletConnector, { open: connectTarget.open, chainType: connectTarget.chainType, onClose: () => setConnectTarget({ open: false }) }), manualWalletOpen && (_jsx(ManualWalletModal, { open: true, chainId: destinationToken?.currency.chain_id, initialValue: manualAddress, onClose: () => setManualWalletOpen(false), onSave: (address) => {
                         if (destinationToken)
                             swapState.setManualOutputWallet({ chainId: destinationToken.currency.chain_id, address });
                     } })), _jsx(ExecutionModal, { stage: execution.stage, onClose: () => {
                         const terminal = ["done", "refunded"].includes(execution.stage.kind);
                         execution.reset();
                         if (terminal)
-                            swapState.reset();
+                            swapState.reset({ preserveCurrencies: execution.stage.kind === "done" });
                     } })] }) }));
 }

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

@@ -1,11 +1,13 @@
+import { ChainId } from "@coin-voyage/shared/types";
 import type { SwapToken } from "../hooks/use-token-data";
 interface TokenPickerProps {
     open: boolean;
     title: string;
     tokens: SwapToken[];
     selectedId?: string;
+    preferredChainId?: ChainId;
     onClose: () => void;
     onSelect: (token: SwapToken) => void;
 }
-export declare function TokenPicker({ open, title, tokens, selectedId, onClose, onSelect }: TokenPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TokenPicker({ open, title, tokens, selectedId, preferredChainId, onClose, onSelect, }: TokenPickerProps): import("react/jsx-runtime").JSX.Element;
 export {};