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

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

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

package/dist/components/connected-wallets.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAccount, useAccountDisconnect, useInstalledWallets } from "@coin-voyage/crypto/hooks";
+import { getChainTypeName } from "@coin-voyage/shared/chain";
+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 { WalletIconDisplay } from "./wallet-icon";
+function truncateAddress(address) {
+    return address.length <= 14 ? address : `${address.slice(0, 6)}…${address.slice(-5)}`;
+}
+function connectorId(connector) {
+    if (!connector || typeof connector !== "object")
+        return undefined;
+    if ("id" in connector && typeof connector.id === "string")
+        return connector.id;
+    if ("name" in connector && typeof connector.name === "string")
+        return connector.name;
+    return undefined;
+}
+function accountAddress(account) {
+    return account.address ?? account.addresses?.[0];
+}
+export function ConnectedWallets() {
+    const { accounts } = useAccount();
+    const wallets = useInstalledWallets();
+    const disconnectAccount = useAccountDisconnect();
+    const [open, setOpen] = useState(false);
+    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));
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        const dismissFromPointer = (event) => {
+            if (!groupRef.current?.contains(event.target))
+                setOpen(false);
+        };
+        const dismissFromKeyboard = (event) => {
+            if (event.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", dismissFromPointer);
+        document.addEventListener("keydown", dismissFromKeyboard);
+        return () => {
+            document.removeEventListener("pointerdown", dismissFromPointer);
+            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"] })] }))] }));
+}

package/dist/components/execution-modal.d.ts

@@ -0,0 +1,5 @@
+import type { SwapStage } from "../lib/execution";
+export declare function ExecutionModal({ stage, onClose }: {
+    stage: SwapStage;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/execution-modal.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getChainExplorerTxUrl, getChainName } from "@coin-voyage/shared/chain";
+import { AlertCircleIcon, ArrowRightIcon, CheckIcon, StatusDot, WarningIcon } from "./icons";
+import { Modal } from "./modal";
+import { ExecutionContent, ExecutionState, ExplorerLink, ProgressConnector, ProgressItem, ProgressLabel, ProgressList, ProgressMarker, ProgressMarkerColumn, ProgressText, RouteArrow, Spinner, TokenAmount, TokenRoute, } from "./styles";
+import { TokenIcon } from "./token-icon";
+function completedLabel(step) {
+    return step.action === "approve" ? "Approved" : "Sent";
+}
+function paymentStepState(stage, step, index, total) {
+    const sourceTxHash = "sourceTxHash" in stage ? stage.sourceTxHash : undefined;
+    const sourceChainId = "swapData" in stage && stage.swapData ? stage.swapData.data.input.currency.chain_id : undefined;
+    const explorerUrl = sourceTxHash && sourceChainId ? getChainExplorerTxUrl(sourceChainId, sourceTxHash) : undefined;
+    const completed = { tone: "complete", label: completedLabel(step) };
+    const isLast = index === total - 1;
+    switch (stage.kind) {
+        case "awaiting_payment":
+            if (index < stage.paymentStepIndex)
+                return completed;
+            if (index === stage.paymentStepIndex)
+                return { tone: "active", label: "Send in wallet" };
+            return { tone: "muted", label: "Awaiting" };
+        case "source_confirming":
+            return isLast ? { tone: "active", label: "Confirming...", explorerUrl } : completed;
+        case "executing":
+            return isLast ? { tone: "active", label: "Processing...", explorerUrl } : completed;
+        case "done":
+            return isLast ? { tone: "complete", explorerUrl } : completed;
+        case "refunded":
+            return isLast ? { ...completed, explorerUrl } : completed;
+        default:
+            return { tone: "muted", label: "Awaiting" };
+    }
+}
+function outcomeState(stage) {
+    if (!("swapData" in stage) || !stage.swapData)
+        return { tone: "muted", label: "Awaiting" };
+    if (stage.kind === "done") {
+        return {
+            tone: "complete",
+            explorerUrl: getChainExplorerTxUrl(stage.swapData.data.output.currency.chain_id, stage.txHash),
+        };
+    }
+    if (stage.kind === "refunded") {
+        return {
+            tone: "warning",
+            label: "Refunded",
+            explorerUrl: getChainExplorerTxUrl(stage.swapData.data.input.currency.chain_id, stage.refundTxHash),
+        };
+    }
+    return { tone: "muted", label: "Awaiting" };
+}
+function marker(state) {
+    if (state.tone === "active")
+        return _jsx(Spinner, {});
+    if (state.tone === "complete")
+        return _jsx(CheckIcon, { size: 14 });
+    if (state.tone === "warning")
+        return _jsx(WarningIcon, {});
+    if (state.tone === "danger")
+        return _jsx(AlertCircleIcon, { size: 14 });
+    return _jsx(StatusDot, {});
+}
+function ProgressStep({ title, state, connected }) {
+    return (_jsxs(ProgressItem, { role: "listitem", children: [_jsxs(ProgressMarkerColumn, { children: [_jsx(ProgressMarker, { "$tone": state.tone, children: marker(state) }), connected && _jsx(ProgressConnector, { "aria-hidden": true })] }), _jsxs(ProgressText, { "$connected": connected, children: [_jsx("strong", { children: title }), state.label && _jsx(ProgressLabel, { "$tone": state.tone, children: state.label }), state.explorerUrl && (_jsx(ExplorerLink, { href: state.explorerUrl, target: "_blank", rel: "noopener noreferrer", children: "View on Explorer" }))] })] }));
+}
+function stepTitle(step, sourceSymbol, sourceChain) {
+    if (step.description)
+        return step.description;
+    return `${step.action === "approve" ? "Approve" : "Send"} ${sourceSymbol} on ${sourceChain}`;
+}
+export function ExecutionModal({ stage, onClose }) {
+    const open = stage.kind !== "idle";
+    const swapData = "swapData" in stage ? stage.swapData : null;
+    const preventDismiss = stage.kind !== "done" && stage.kind !== "refunded" && stage.kind !== "error";
+    return (_jsx(Modal, { open: open, title: "Transaction Details", onClose: onClose, preventDismiss: preventDismiss, maxWidth: 384, children: stage.kind === "error" ? (_jsxs(ExecutionState, { "$tone": "danger", children: [_jsx(AlertCircleIcon, {}), _jsx("p", { children: stage.message })] })) : !swapData ? (_jsxs(ExecutionState, { children: [_jsx(Spinner, {}), _jsx("p", { children: "Loading swap data..." })] })) : (_jsxs(ExecutionContent, { children: [_jsxs(TokenRoute, { children: [_jsxs(TokenAmount, { children: [_jsx(TokenIcon, { currency: swapData.data.input.currency, size: 40 }), _jsxs("strong", { children: [swapData.data.input.amount.ui, " ", swapData.data.input.currency.symbol] })] }), _jsx(RouteArrow, { children: _jsx(ArrowRightIcon, {}) }), _jsxs(TokenAmount, { "$align": "end", children: [_jsx(TokenIcon, { currency: swapData.data.output.currency, size: 40 }), _jsxs("strong", { children: [swapData.data.output.amount.ui, " ", swapData.data.output.currency.symbol] })] })] }), _jsxs(ProgressList, { "aria-label": "Swap progress", children: [swapData.data.steps.map((step, index) => (_jsx(ProgressStep, { title: stepTitle(step, swapData.data.input.currency.symbol, getChainName(swapData.data.input.currency.chain_id) ?? "Unknown network"), state: paymentStepState(stage, step, index, swapData.data.steps.length), connected: true }, step.id ?? index))), _jsx(ProgressStep, { title: stage.kind === "refunded"
+                                ? `Refund ${swapData.data.input.currency.symbol} on ${getChainName(swapData.data.input.currency.chain_id) ?? "Unknown network"}`
+                                : `Receive ${swapData.data.output.currency.symbol} on ${getChainName(swapData.data.output.currency.chain_id) ?? "Unknown network"}`, state: outcomeState(stage), connected: false })] })] })) }));
+}

package/dist/components/icons.d.ts

@@ -0,0 +1,23 @@
+interface IconProps {
+    size?: number;
+}
+export declare function WalletIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasteIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronDownIcon({ size, up }: IconProps & {
+    up?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SearchIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function FuelIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function CloseIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function UnplugIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowDownIcon({ size, rotated }: IconProps & {
+    rotated?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CheckIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatusDot({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowRightIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertCircleIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function InfoIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function WarningIcon({ size }: IconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function WalletIcon({ size = 16 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: [_jsx("path", { d: "M4 6.5h14a2 2 0 0 1 2 2v9H4a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2h12" }), _jsx("path", { d: "M16 11h6v4h-6a2 2 0 0 1 0-4Z" })] }));
+}
+export function PasteIcon({ size = 16 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("rect", { width: "8", height: "4", x: "8", y: "2", rx: "1" }), _jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v4" }), _jsx("path", { d: "M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5" }), _jsx("path", { d: "m16 19 2 2 4-4" })] }));
+}
+export function SettingsIcon({ size = 16 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }));
+}
+export function ChevronDownIcon({ size = 18, up = false }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { transform: up ? "rotate(180deg)" : undefined }, "aria-hidden": true, children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
+}
+export function SearchIcon({ size = 16 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "m21 21-4.34-4.34" }), _jsx("circle", { cx: "11", cy: "11", r: "8" })] }));
+}
+export function FuelIcon({ size = 14 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", role: "img", "aria-label": "Network cost", children: [_jsx("path", { d: "M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 4 0v-6.998a2 2 0 0 0-.59-1.42L18 5" }), _jsx("path", { d: "M14 21V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v16" }), _jsx("path", { d: "M2 21h13" }), _jsx("path", { d: "M3 9h11" })] }));
+}
+export function CloseIcon({ size = 20 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }));
+}
+export function UnplugIcon({ size = 16 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "m19 5 3-3" }), _jsx("path", { d: "m2 22 3-3" }), _jsx("path", { d: "M6.3 11.7 9 9l6 6-2.7 2.7a4.24 4.24 0 0 1-6-6Z" }), _jsx("path", { d: "m8 2 2.1 2.1" }), _jsx("path", { d: "M14 2.1 15.9 4" }), _jsx("path", { d: "m20 8-2.1-2.1" }), _jsx("path", { d: "M21.9 14 20 12.1" })] }));
+}
+export function ArrowDownIcon({ size = 18, rotated = false }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: {
+            transform: rotated ? "rotate(180deg)" : undefined,
+            transition: "transform 300ms ease",
+        }, "aria-hidden": true, children: [_jsx("path", { d: "M12 5v14" }), _jsx("path", { d: "m19 12-7 7-7-7" })] }));
+}
+export function CheckIcon({ size = 16 }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", "aria-hidden": true, children: _jsx("path", { d: "m5 12 4 4L19 6" }) }));
+}
+export function StatusDot({ size = 8 }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 8 8", fill: "currentColor", "aria-hidden": true, children: _jsx("circle", { cx: "4", cy: "4", r: "3" }) }));
+}
+export function ArrowRightIcon({ size = 24 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "M5 12h14" }), _jsx("path", { d: "m13 6 6 6-6 6" })] }));
+}
+export function AlertCircleIcon({ size = 24 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4" }), _jsx("path", { d: "M12 16h.01" })] }));
+}
+export function InfoIcon({ size = 14 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 10.75v6", fill: "none", stroke: "var(--sk-surface)", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "7.25", r: "1.15", fill: "var(--sk-surface)" })] }));
+}
+export function WarningIcon({ size = 14 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z" }), _jsx("path", { d: "M12 9v4" }), _jsx("path", { d: "M12 17h.01" })] }));
+}

package/dist/components/modal.d.ts

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from "react";
+interface ModalProps extends PropsWithChildren {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    closeDisabled?: boolean;
+    preventDismiss?: boolean;
+    maxWidth?: number;
+}
+export declare function Modal({ open, title, onClose, closeDisabled, preventDismiss, maxWidth, children, }: ModalProps): import("react").ReactPortal | null;
+export {};

package/dist/components/modal.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FocusTrap } from "@coin-voyage/shared/hooks";
+import { useEffect, useId, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useSwapKit } from "../providers/swapkit-context";
+import { SwapKitRoot } from "../styles/root";
+import { CloseIcon } from "./icons";
+import { Dialog, DialogCloseButton, DialogHeader, Overlay } from "./styles";
+export function Modal({ open, title, onClose, closeDisabled = false, preventDismiss = false, maxWidth, children, }) {
+    const { mode, theme } = useSwapKit();
+    const previousFocus = useRef(null);
+    const onCloseRef = useRef(onClose);
+    const passiveDismissDisabledRef = useRef(closeDisabled || preventDismiss);
+    const titleId = useId();
+    useEffect(() => {
+        onCloseRef.current = onClose;
+        passiveDismissDisabledRef.current = closeDisabled || preventDismiss;
+    }, [closeDisabled, onClose, preventDismiss]);
+    useEffect(() => {
+        if (!open)
+            return;
+        previousFocus.current = document.activeElement;
+        const onKeyDown = (event) => {
+            if (event.key === "Escape" && !passiveDismissDisabledRef.current)
+                onCloseRef.current();
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+            previousFocus.current?.focus();
+        };
+    }, [open]);
+    if (!open || typeof document === "undefined")
+        return null;
+    const closeFromOverlay = (event) => {
+        if (event.target === event.currentTarget && !closeDisabled && !preventDismiss)
+            onClose();
+    };
+    return createPortal(_jsx(SwapKitRoot, { "$mode": mode, "$customTheme": theme, "data-swapkit-portal": "", children: _jsx(Overlay, { onMouseDown: closeFromOverlay, children: _jsx(Dialog, { "$maxWidth": maxWidth, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: _jsxs(FocusTrap, { children: [_jsxs(DialogHeader, { children: [_jsx("h2", { id: titleId, children: title }), !closeDisabled && (_jsx(DialogCloseButton, { type: "button", "aria-label": "Close dialog", onClick: onClose, children: _jsx(CloseIcon, {}) }))] }), children] }) }) }) }), document.body);
+}

package/dist/components/styles.d.ts

@@ -0,0 +1,124 @@
+export declare const FormStack: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Toolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ToolbarGroup: import("styled-components").StyledComponent<"div", any, {
+    $pushRight?: boolean;
+}, never>;
+export declare const IconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const WalletLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const FloatingPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SettingsPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SettingsRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SettingsLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const InfoWrap: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const InfoButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const SettingsTooltip: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SlippageControl: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SlippageModeButton: import("styled-components").StyledComponent<"button", any, {
+    $active: boolean;
+}, never>;
+export declare const SlippageInputWrap: import("styled-components").StyledComponent<"label", any, {
+    $active: boolean;
+}, never>;
+export declare const SlippageInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const FieldLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const CompactInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const Hint: import("styled-components").StyledComponent<"p", any, {
+    $tone?: "muted" | "warning" | "danger";
+}, never>;
+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 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>;
+export declare const QuoteValueSkeleton: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TokenButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const TokenIconWrap: import("styled-components").StyledComponent<"span", any, {
+    $size: number;
+}, never>;
+export declare const TokenImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const TokenFallback: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ChainBadge: import("styled-components").StyledComponent<"span", any, {
+    $fillBackground: boolean;
+    $size: number;
+}, 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>;
+export declare const OutputWalletOption: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const SwitchButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const BreakdownCard: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const BreakdownToggle: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const BreakdownMeta: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const NetworkCost: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const BreakdownBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DetailRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FreeFeeBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ErrorBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PrimaryButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const WalletRequirementButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Dialog: import("styled-components").StyledComponent<"div", any, {
+    $maxWidth?: number;
+}, never>;
+export declare const DialogHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DialogCloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const SearchInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const SearchField: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PickerBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PickerControls: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NetworkButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const NetworkMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NetworkOption: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const NetworkLogo: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const AllNetworksLogo: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TokenList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenOption: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const TokenMeta: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TokenBalance: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const EmptyState: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WalletList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WalletOption: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const WalletIconFrame: import("styled-components").StyledComponent<"span", any, {
+    $size?: number;
+}, never>;
+export declare const WalletImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const WalletFallback: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const WalletOptionMeta: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MultichainBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ConnectedWalletPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WalletPanelHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+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 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>;
+export declare const ExecutionContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenRoute: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenAmount: import("styled-components").StyledComponent<"div", any, {
+    $align?: "start" | "end";
+}, never>;
+export declare const RouteArrow: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ProgressList: import("styled-components").StyledComponent<"ol", any, {}, never>;
+export declare const ProgressItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const ProgressMarkerColumn: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ProgressMarker: import("styled-components").StyledComponent<"span", any, {
+    $tone: "active" | "complete" | "muted" | "danger" | "warning";
+}, never>;
+export declare const ProgressConnector: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ProgressText: import("styled-components").StyledComponent<"span", any, {
+    $connected?: boolean;
+}, never>;
+export declare const ProgressLabel: import("styled-components").StyledComponent<"small", any, {
+    $tone: "active" | "complete" | "muted" | "danger" | "warning";
+}, never>;
+export declare const ExplorerLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ExecutionState: import("styled-components").StyledComponent<"div", any, {
+    $tone?: "danger";
+}, never>;
+export declare const Spinner: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SrOnly: import("styled-components").StyledComponent<"span", any, {}, never>;