@naculus/connect-appkit-ui 0.1.9 → 0.2.1

package/dist/index.d.ts

@@ -0,0 +1,696 @@
+import React from 'react';
+import { WalletNamespace, EmbeddedWalletAccountView, StorageSecurityReport, PassphraseRequest, Web3ConnectConfig } from '@naculus/connect-appkit-react';
+import { ClassValue } from 'clsx';
+import { SiwxResult } from '@naculus/siwx';
+
+interface ConnectButtonProps {
+    className?: string;
+    isConnected?: boolean;
+    isConnecting?: boolean;
+    onConnect?: (walletKind: "injected" | "walletconnect", closeModal: () => void, walletId?: string) => void | Promise<void>;
+    onDisconnect?: () => void;
+    onMobileDeepLink?: () => void;
+    mobileWalletName?: string;
+    startPairing?: () => Promise<string>;
+    completePairing?: () => Promise<any>;
+    address?: string;
+    balance?: string | null;
+    balanceSymbol?: string;
+    tokenBalances?: Array<{
+        symbol: string;
+        formatted: string | null;
+        name?: string;
+    }>;
+    isBalanceLoading?: boolean;
+    explorerUrl?: string;
+    explorerLabel?: string;
+}
+/**
+ * React adapter that bridges hook ecosystem to the Stencil WC.
+ */
+declare function ConnectButtonAdapter({ className, isConnected: extConnected, isConnecting: extConnecting, onConnect, onDisconnect, onMobileDeepLink, mobileWalletName, startPairing, completePairing, address, balance, balanceSymbol, tokenBalances, isBalanceLoading, explorerUrl, explorerLabel, }: ConnectButtonProps): React.JSX.Element;
+
+interface ChainSelectorProps {
+    className?: string;
+    showLabel?: boolean;
+    variant?: "dropdown" | "buttons" | "minimal";
+}
+declare function ChainSelector({ className, showLabel, variant }: ChainSelectorProps): React.JSX.Element | null;
+
+interface AccountButtonProps {
+    className?: string;
+    showAddress?: boolean;
+    showBalance?: boolean;
+    address?: string;
+    balance?: string | null;
+    balanceSymbol?: string;
+    onConnect?: () => void;
+}
+declare function AccountButton({ className, showAddress, showBalance, address: externalAddress, balance: externalBalance, balanceSymbol, onConnect, }: AccountButtonProps): React.JSX.Element;
+
+interface AccountSelectorProps {
+    className?: string;
+    /** Hide the "derive missing accounts" affordance. */
+    hideBackfill?: boolean;
+    onSelect?: (namespace: WalletNamespace) => void;
+}
+/**
+ * Lists the accounts an embedded wallet holds and lets the user choose which
+ * one signs.
+ *
+ * Renders nothing when there is no embedded wallet, rather than an empty
+ * panel: a consumer can mount this unconditionally.
+ */
+interface AccountSelectorViewProps extends AccountSelectorProps {
+    accounts: EmbeddedWalletAccountView[];
+    activeNamespace: WalletNamespace | null;
+    /** Whether a stored phrase could derive an account not listed above. */
+    canDerive: boolean;
+    setActiveNamespace: (namespace: WalletNamespace) => void;
+    backfillAccounts: () => Promise<unknown>;
+}
+/**
+ * The presentation, separated from where the accounts come from.
+ *
+ * Exported because Storybook and a consumer with its own account source are
+ * both real second callers; a raw-key wallet and a phrase wallet differ only
+ * in `canDerive`, and that state is otherwise reachable only by importing an
+ * actual key.
+ */
+declare function AccountSelectorView({ className, hideBackfill, onSelect, accounts, activeNamespace, canDerive, setActiveNamespace, backfillAccounts, }: AccountSelectorViewProps): React.JSX.Element | null;
+/**
+ * Lists the embedded wallet's accounts and lets the user choose which signs.
+ *
+ * Renders nothing when there is no embedded wallet, so a consumer can mount
+ * this unconditionally.
+ */
+declare function AccountSelector(props: AccountSelectorProps): React.JSX.Element | null;
+
+interface WalletSecurityPanelProps {
+    className?: string;
+    /** Hide findings that cost no points. Off by default — the hot-wallet
+     *  exposure is one of them, and it is the one users most need to read. */
+    hideInformational?: boolean;
+}
+/**
+ * Shows how the embedded wallet is stored, as a score with the specific
+ * reasons it is not higher.
+ *
+ * A tier from 1 to 4 tells a user where they stand and nothing about why or
+ * what to do about it. Every point this panel removes is attached to the
+ * sentence that explains it.
+ *
+ * Renders nothing when no embedded wallet exists — the storage backend is
+ * chosen when the wallet is created, so there is nothing to assess before
+ * then, and a warning about a wallet that does not exist is noise.
+ */
+interface WalletSecurityPanelViewProps extends WalletSecurityPanelProps {
+    report: StorageSecurityReport | null;
+}
+/**
+ * The presentation, separated from where the report comes from.
+ *
+ * Exported because Storybook and any consumer holding its own report are both
+ * real second callers, and because every visual state here is otherwise only
+ * reachable by arranging a wallet on disk to be in that state.
+ */
+declare function WalletSecurityPanelView({ className, hideInformational, report: securityReport, }: WalletSecurityPanelViewProps): React.JSX.Element | null;
+/** Reads the report from the embedded wallet and renders it. */
+declare function WalletSecurityPanel(props: WalletSecurityPanelProps): React.JSX.Element;
+
+interface PassphraseDialogProps {
+    className?: string;
+}
+/**
+ * Asks for the passphrase that encrypts the embedded wallet on this device.
+ *
+ * Renders only while something is actually blocked on the answer — a load or
+ * a save inside the storage adapter — and nothing at all when the app supplies
+ * its own `encryptionPassphrase` or has encryption off.
+ */
+interface PassphraseDialogViewProps extends PassphraseDialogProps {
+    request: PassphraseRequest | null;
+    submit: (passphrase: string) => void;
+    cancel: () => void;
+}
+/**
+ * The presentation, separated from the gate that drives it.
+ *
+ * Exported because reaching the retry and create states otherwise means
+ * arranging an actual failed decrypt.
+ */
+declare function PassphraseDialogView({ className, request, submit, cancel, }: PassphraseDialogViewProps): React.JSX.Element | null;
+/**
+ * Asks for the passphrase that encrypts the embedded wallet on this device.
+ *
+ * Renders only while a load or save inside the storage adapter is actually
+ * blocked on the answer, and nothing at all when the app supplies its own
+ * `encryptionPassphrase` or has encryption off.
+ */
+declare function PassphraseDialog(props: PassphraseDialogProps): React.JSX.Element;
+
+interface PasskeySetupProps {
+    className?: string;
+}
+/**
+ * Registers a passkey and puts the wallet's stored record under it.
+ *
+ * Two facts drive the whole of this component:
+ *
+ * PRF cannot be added to a credential after creation. A passkey registered
+ * without it can never unlock anything, and the only route forward is
+ * registering a new one — so the result of the attempt has to be reported
+ * honestly rather than as a generic success.
+ *
+ * A passkey protects the local copy, not the wallet. The recovery phrase is
+ * still the only backup that survives losing the device, and that has to be
+ * said here, at the moment someone turns this on, rather than in a document
+ * they will not read.
+ */
+interface PasskeySetupViewProps extends PasskeySetupProps {
+    /** Null when passkeys are not enabled on the client. */
+    passkeys: {
+        hasCredential?: () => boolean;
+        createPasskey: () => Promise<unknown>;
+    } | null;
+    unlock: UnlockSnapshot | undefined;
+    onRegistered?: () => Promise<void> | void;
+}
+/**
+ * What the unlock layer reports, which is what decides the copy shown.
+ *
+ * `prf` being absent is a different fact from it being `"unavailable"`, and
+ * the component must not collapse them.
+ */
+interface UnlockSnapshot {
+    prf?: "unknown" | "available" | "unavailable" | "none";
+    sealedWith?: string[] | null;
+}
+/**
+ * The presentation, separated from the client and wallet it reads.
+ *
+ * Exported because every state here — registered but unusable, registered but
+ * unsealed, not yet checked — otherwise needs a real authenticator behaving a
+ * particular way.
+ */
+declare function PasskeySetupView({ className, passkeys, unlock, onRegistered, }: PasskeySetupViewProps): React.JSX.Element | null;
+/**
+ * Registers a passkey for the embedded wallet and re-seals its stored record.
+ */
+declare function PasskeySetup(props: PasskeySetupProps): React.JSX.Element;
+
+/**
+ * Hook that detects if the user is on a mobile device.
+ * Returns true for iOS (iPhone, iPad, iPod) and Android devices.
+ */
+declare function useIsMobile(): boolean;
+
+interface DiscoveredWallet {
+    id: string;
+    name: string;
+    icon?: string;
+    rdns: string;
+    provider?: unknown;
+}
+interface UseEIP6963Result {
+    wallets: DiscoveredWallet[];
+    isDetecting: boolean;
+    hasWallets: boolean;
+}
+/**
+ * Hook to discover EIP-6963 wallets (browser extensions like MetaMask, Phantom, etc.)
+ * Uses the eip6963:announceProvider / requestProvider protocol.
+ */
+declare function useEIP6963(): UseEIP6963Result;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+interface ComponentRegistry {
+    Button?: React.ComponentType<any>;
+    Card?: React.ComponentType<any>;
+    Badge?: React.ComponentType<any>;
+    Switch?: React.ComponentType<any>;
+    Checkbox?: React.ComponentType<any>;
+    Tabs?: React.ComponentType<any>;
+    TabsContent?: React.ComponentType<any>;
+    TabsList?: React.ComponentType<any>;
+    TabsTrigger?: React.ComponentType<any>;
+    DropdownMenu?: React.ComponentType<any>;
+    Avatar?: React.ComponentType<any>;
+    Skeleton?: React.ComponentType<any>;
+    Tooltip?: React.ComponentType<any>;
+    Popover?: React.ComponentType<any>;
+    Progress?: React.ComponentType<any>;
+    Separator?: React.ComponentType<any>;
+    ScrollArea?: React.ComponentType<any>;
+    Input?: React.ComponentType<any>;
+    Select?: React.ComponentType<any>;
+    Label?: React.ComponentType<any>;
+    Sheet?: React.ComponentType<any>;
+    Modal?: React.ComponentType<any>;
+    Dialog?: React.ComponentType<any>;
+    DialogContent?: React.ComponentType<any>;
+    DialogHeader?: React.ComponentType<any>;
+    DialogTitle?: React.ComponentType<any>;
+    ConnectButton?: React.ComponentType<any>;
+    AccountButton?: React.ComponentType<any>;
+    ChainSelector?: React.ComponentType<any>;
+    QRCodeModal?: React.ComponentType<any>;
+    SignInButton?: React.ComponentType<any>;
+    SeedPhraseBackup?: React.ComponentType<any>;
+    ErrorBoundary?: React.ComponentType<any>;
+    AppKit?: React.ComponentType<any>;
+    AppKitButton?: React.ComponentType<any>;
+    AppKitChainSelector?: React.ComponentType<any>;
+    Web3ConnectUI?: React.ComponentType<any>;
+}
+interface Web3ComponentProviderProps {
+    children: React.ReactNode;
+    components?: ComponentRegistry;
+}
+declare function Web3ComponentProvider({ children, components, }: Web3ComponentProviderProps): React.JSX.Element;
+declare function useComponentRegistry(): ComponentRegistry;
+declare function useComponent<K extends keyof ComponentRegistry>(name: K): ComponentRegistry[K] | undefined;
+
+declare const THEME_CONTRACT: {
+    readonly primary: {
+        readonly name: "--primary";
+        readonly fallback: "221.2 83.2% 53.3%";
+    };
+    readonly 'primary-foreground': {
+        readonly name: "--primary-foreground";
+        readonly fallback: "210 40% 98%";
+    };
+    readonly background: {
+        readonly name: "--background";
+        readonly fallback: "0 0% 100%";
+    };
+    readonly foreground: {
+        readonly name: "--foreground";
+        readonly fallback: "222.2 84% 4.9%";
+    };
+    readonly card: {
+        readonly name: "--card";
+        readonly fallback: "0 0% 100%";
+    };
+    readonly 'card-foreground': {
+        readonly name: "--card-foreground";
+        readonly fallback: "222.2 84% 4.9%";
+    };
+    readonly popover: {
+        readonly name: "--popover";
+        readonly fallback: "0 0% 100%";
+    };
+    readonly 'popover-foreground': {
+        readonly name: "--popover-foreground";
+        readonly fallback: "222.2 84% 4.9%";
+    };
+    readonly secondary: {
+        readonly name: "--secondary";
+        readonly fallback: "210 40% 96.1%";
+    };
+    readonly 'secondary-foreground': {
+        readonly name: "--secondary-foreground";
+        readonly fallback: "222.2 47.4% 11.2%";
+    };
+    readonly muted: {
+        readonly name: "--muted";
+        readonly fallback: "210 40% 96.1%";
+    };
+    readonly 'muted-foreground': {
+        readonly name: "--muted-foreground";
+        readonly fallback: "215.4 16.3% 46.9%";
+    };
+    readonly accent: {
+        readonly name: "--accent";
+        readonly fallback: "210 40% 96.1%";
+    };
+    readonly 'accent-foreground': {
+        readonly name: "--accent-foreground";
+        readonly fallback: "222.2 47.4% 11.2%";
+    };
+    readonly destructive: {
+        readonly name: "--destructive";
+        readonly fallback: "0 84.2% 60.2%";
+    };
+    readonly border: {
+        readonly name: "--border";
+        readonly fallback: "214.3 31.8% 91.4%";
+    };
+    readonly input: {
+        readonly name: "--input";
+        readonly fallback: "214.3 31.8% 91.4%";
+    };
+    readonly ring: {
+        readonly name: "--ring";
+        readonly fallback: "221.2 83.2% 53.3%";
+    };
+    readonly radius: {
+        readonly name: "--radius";
+        readonly fallback: "0.5rem";
+    };
+};
+type ThemeVariableName = keyof typeof THEME_CONTRACT;
+
+interface ThemeOverride {
+    primary?: string;
+    'primary-foreground'?: string;
+    background?: string;
+    foreground?: string;
+    card?: string;
+    'card-foreground'?: string;
+    popover?: string;
+    'popover-foreground'?: string;
+    secondary?: string;
+    'secondary-foreground'?: string;
+    muted?: string;
+    'muted-foreground'?: string;
+    accent?: string;
+    'accent-foreground'?: string;
+    destructive?: string;
+    'destructive-foreground'?: string;
+    border?: string;
+    input?: string;
+    ring?: string;
+    radius?: string;
+}
+type ThemePriority = 'computed' | 'fallback';
+interface ThemeContextValue {
+    theme: ThemeOverride;
+    isDark: boolean;
+    setTheme: (theme: ThemeOverride) => void;
+    toggleDarkMode: () => void;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme?: ThemeOverride;
+    defaultDark?: boolean;
+    priority?: ThemePriority;
+}
+declare function ThemeProvider({ children, theme, defaultDark, priority, }: ThemeProviderProps): React.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+declare function useThemeVariable(name: ThemeVariableName): string;
+
+type QRStatus = "idle" | "loading" | "ready" | "error" | "cancelled";
+interface WalletConnectState {
+    qrUri: string | null;
+    showQR: boolean;
+    qrStatus: QRStatus;
+    error: string | null;
+}
+interface WalletConnectContextValue {
+    state: WalletConnectState;
+    connectWalletConnect: () => Promise<void>;
+    cancelQR: () => void;
+    retryQR: () => void;
+}
+interface WalletConnectProviderProps {
+    children: React.ReactNode;
+}
+declare function WalletConnectProvider({ children }: WalletConnectProviderProps): React.JSX.Element;
+declare function useWalletConnect(): WalletConnectContextValue;
+declare function useWalletConnectOptional(): WalletConnectContextValue | null;
+
+type QRCodeModalStatus = "pending" | "scanned" | "expired" | "error";
+interface QRCodeModalProps {
+    uri: string | null;
+    open: boolean;
+    onClose: () => void;
+    onDeepLink?: (uri: string) => void;
+    onRetry?: () => void;
+    status?: QRCodeModalStatus;
+    showDeepLink?: boolean;
+    timeoutMs?: number;
+    title?: string;
+    description?: string;
+    className?: string;
+}
+declare function QRCodeModal({ uri, open, onClose, onDeepLink, onRetry, status, showDeepLink: explicitShowDeepLink, timeoutMs, title, description, className, }: QRCodeModalProps): React.JSX.Element;
+
+interface ErrorBoundaryProps {
+    children: React.ReactNode;
+    /** Optional custom fallback UI. Receives error and reset callback. */
+    fallback?: (props: {
+        error: Error;
+        reset: () => void;
+    }) => React.ReactNode;
+    /** Called when an error is caught. Useful for logging. */
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+    /** Called after the boundary resets. */
+    onReset?: () => void;
+    /** Called when the user dismisses the error dialog. */
+    onDismiss?: () => void;
+    /** Label for the retry button. Default: "Try Again" */
+    retryLabel?: string;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    dismissed: boolean;
+}
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    handleReset: () => void;
+    handleDismiss: () => void;
+    render(): React.ReactNode;
+}
+
+interface SignInButtonProps {
+    className?: string;
+    isSignedIn?: boolean;
+    isSigningIn?: boolean;
+    result?: SiwxResult | null;
+    error?: Error | null;
+    onSignIn?: () => void;
+    onClearError?: () => void;
+    children?: React.ReactNode;
+}
+declare function SignInButton({ className, isSignedIn, isSigningIn, result, error, onSignIn, onClearError, children, }: SignInButtonProps): React.JSX.Element;
+
+type DetectionMode = "auto" | "walletconnect" | "eip6963";
+interface DetectionContextValue {
+    mode: DetectionMode;
+}
+declare function useDetectionMode(): DetectionContextValue;
+interface Web3ConnectUIProps {
+    config: Web3ConnectConfig;
+    children: React.ReactNode;
+    autoConnect?: boolean;
+    /** Wallet connection detection mode:
+     * - "walletconnect" (default): Always use WalletConnect relay
+     * - "eip6963": Only use browser-injected EIP-6963 wallets
+     * - "auto": Auto-detect EIP-6963 wallets, fall back to WalletConnect
+     */
+    detectionMode?: DetectionMode;
+    /** Theme overrides for connect UI components */
+    theme?: ThemeOverride;
+    /** Default dark mode */
+    defaultDark?: boolean;
+    /**
+     * Theme priority mode:
+     * - "computed" (default): Respect developer's existing CSS variables (e.g. shadcn theme)
+     * - "fallback": Always inject connect's theme variables
+     */
+    themePriority?: ThemePriority;
+}
+declare function Web3ConnectUI({ config, children, autoConnect, detectionMode, theme, defaultDark, themePriority, }: Web3ConnectUIProps): React.JSX.Element;
+
+interface SeedPhraseBackupProps {
+    seedPhrase: string;
+    onConfirm: () => void;
+    onSkip?: () => void;
+    onExportPrivateKey?: () => string | null;
+    className?: string;
+    wordCount?: 12 | 24;
+    /** When true, render inline instead of in a dialog */
+    inline?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function SeedPhraseBackup({ seedPhrase, onConfirm, onSkip, onExportPrivateKey, className, wordCount, inline, open, onOpenChange, }: SeedPhraseBackupProps): React.JSX.Element | null;
+
+interface AppKitProps {
+    projectId: string;
+    metadata: {
+        name: string;
+        description: string;
+        url: string;
+        icons: string[];
+    };
+    enableEmbedded?: boolean;
+    enablePasskeys?: boolean;
+    /** Chain/RPC configuration forwarded to connect-appkit-react. */
+    chains?: Web3ConnectConfig["chains"];
+    /** Embedded wallet storage, signer and isolation configuration. */
+    embeddedConfig?: Web3ConnectConfig["embeddedConfig"];
+    /** Encrypts persisted connection metadata at rest (not a frontend secret). */
+    encryptionKey?: Web3ConnectConfig["encryptionKey"];
+    /** Optional SIWx authentication policy. */
+    siwx?: Web3ConnectConfig["siwx"];
+    children?: React.ReactNode;
+    className?: string;
+    autoConnect?: boolean;
+    theme?: Web3ConnectUIProps["theme"];
+    defaultDark?: boolean;
+    themePriority?: Web3ConnectUIProps["themePriority"];
+    detectionMode?: Web3ConnectUIProps["detectionMode"];
+}
+interface AppKitContextValue {
+    connect: () => void;
+    disconnect: () => Promise<void>;
+    isConnected: boolean;
+    isConnecting: boolean;
+    address: string | null;
+    balance: string | null;
+    /** Null when the chain's native symbol is not known. Do not substitute one. */
+    balanceSymbol: string | null;
+    chainName: string | null;
+    availableChains: Array<{
+        caip2: string;
+        name: string;
+        token?: string;
+    }>;
+    switchChain: (chainId: string) => Promise<void>;
+    wallets: DiscoveredWallet[];
+    hasWallets: boolean;
+    /** Embedded wallet backup state */
+    backupPending: boolean;
+    seedPhrase: string | null;
+    confirmBackup: () => void;
+    skipBackup: () => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+declare function useAppKit(): AppKitContextValue;
+declare function AppKit({ projectId, metadata, enableEmbedded, enablePasskeys, chains, embeddedConfig, encryptionKey, siwx, children, className, autoConnect, theme, defaultDark, themePriority, detectionMode, }: AppKitProps): React.JSX.Element;
+interface AppKitButtonProps {
+    className?: string;
+}
+declare function AppKitButton({ className }: AppKitButtonProps): React.JSX.Element;
+interface AppKitChainSelectorProps {
+    className?: string;
+    variant?: "dropdown" | "buttons" | "minimal";
+}
+declare function AppKitChainSelector({ className, variant, }: AppKitChainSelectorProps): React.JSX.Element;
+
+/**
+ * RouteSelector — UI component for cross-chain route selection.
+ *
+ * Displays route quotes from RouteEngine and lets users pick one.
+ * Supports loading, executing, success, and error states.
+ *
+ * Uses ComponentRegistry for all base UI (Button, Card, Badge, Skeleton, Progress).
+ */
+
+/**
+ * Shape this component renders, declared locally on purpose.
+ *
+ * The sibling hooks already define their own domain types ("hook domain
+ * types, not core exports") — this component was the one place reaching into
+ * core's routing internals, which coupled the UI to whichever routing engine
+ * core happened to export. Declaring it here keeps the component usable
+ * against any aggregator, which is the point of shipping one appkit for every
+ * frontend target.
+ */
+interface Route {
+    id?: string;
+    provider?: string;
+    fromChain: string;
+    toChain: string;
+    fromToken?: string;
+    toToken?: string;
+    fromAmount?: string;
+    toAmount?: string;
+    toAmountMin?: string;
+    steps: Array<{
+        type?: string;
+        [key: string]: unknown;
+    }>;
+    gasCosts: {
+        totalUsd: string;
+        [key: string]: unknown;
+    };
+    estimatedTime: number;
+    /** Aggregators attach their own fields; the component only reads the above. */
+    [key: string]: unknown;
+}
+interface TokenDisplay {
+    chainId: number;
+    address: string;
+    symbol: string;
+}
+interface RouteSelectorProps {
+    /** Optional input token info for the header display */
+    inputToken?: TokenDisplay;
+    /** Optional output token info for the header display */
+    outputToken?: TokenDisplay;
+    /** Input amount in human-readable units (natural numbers, not wei) */
+    amount?: bigint;
+    /** Current list of route quotes (pass empty array for no routes state) */
+    routes?: Route[];
+    /** Whether route quotes are being fetched */
+    loading?: boolean;
+    /** Whether a route execution is in progress */
+    executing?: boolean;
+    /** Called when user selects a route */
+    onRouteSelected?: (route: Route) => void;
+    /** Called when user cancels route selection */
+    onCancel?: () => void;
+    /** Success message (tx hash) after route execution completes */
+    successTxHash?: string | null;
+    /** Error message to display */
+    error?: string | null;
+    /** Optional className overrides */
+    className?: string;
+}
+declare function RouteSelector({ inputToken, outputToken, amount, routes, loading, executing, onRouteSelected, onCancel, successTxHash, error, className, }: RouteSelectorProps): React.JSX.Element;
+
+interface SmartWalletToggleProps {
+    isDeployed?: boolean;
+    isDeploying?: boolean;
+    estimatedGas?: bigint;
+    error?: string | null;
+    onUpgrade?: () => void;
+    onShowSettings?: () => void;
+    onRetry?: () => void;
+}
+declare function SmartWalletToggle({ isDeployed, isDeploying, estimatedGas, error, onUpgrade, onShowSettings, onRetry, }: SmartWalletToggleProps): React.JSX.Element;
+
+type AccountType = "simple" | "multi-sig" | "social-recovery";
+type PaymasterType = "self" | "sponsor" | "erc20" | "custom";
+type BundlerPreset = "pimlico" | "stackup" | "alchemy" | "custom";
+interface SmartWalletConfig {
+    accountType: AccountType;
+    paymasterType: PaymasterType;
+    customPaymasterUrl: string;
+    bundlerPreset: BundlerPreset;
+    customBundlerUrl: string;
+    guardians: string[];
+    threshold: number;
+}
+interface SmartWalletSettingsProps {
+    currentConfig?: Partial<SmartWalletConfig>;
+    onSave?: (config: SmartWalletConfig) => void;
+    onBack?: () => void;
+}
+declare function SmartWalletSettings({ currentConfig, onSave, onBack }: SmartWalletSettingsProps): React.JSX.Element;
+
+interface AddressWarningDialogProps {
+    address: string;
+    open: boolean;
+    onClose: () => void;
+    onProceed?: () => void;
+}
+declare function AddressWarningDialog({ address, open, onClose, onProceed, }: AddressWarningDialogProps): React.JSX.Element | null;
+
+interface WalletPickerProps {
+    wallets: DiscoveredWallet[];
+    onSelect: (wallet: DiscoveredWallet) => void;
+    loading?: boolean;
+    error?: string | null;
+}
+declare function WalletPicker({ wallets, onSelect, loading, error, }: WalletPickerProps): React.JSX.Element;
+
+export { AccountButton, type AccountButtonProps, AccountSelector, type AccountSelectorProps, AccountSelectorView, type AccountSelectorViewProps, type AccountType, AddressWarningDialog, type AddressWarningDialogProps, AppKit, AppKitButton, type AppKitButtonProps, AppKitChainSelector, type AppKitChainSelectorProps, type AppKitContextValue, type AppKitProps, type BundlerPreset, ChainSelector, type ChainSelectorProps, type ComponentRegistry, ConnectButtonAdapter as ConnectButton, type ConnectButtonProps, type DetectionMode, type DiscoveredWallet, ErrorBoundary, type ErrorBoundaryProps, PasskeySetup, type PasskeySetupProps, PasskeySetupView, type PasskeySetupViewProps, PassphraseDialog, type PassphraseDialogProps, PassphraseDialogView, type PassphraseDialogViewProps, type PaymasterType, QRCodeModal, type QRCodeModalProps, type QRCodeModalStatus, type QRStatus, RouteSelector, type RouteSelectorProps, SeedPhraseBackup, type SeedPhraseBackupProps, SignInButton, type SignInButtonProps, type SmartWalletConfig, SmartWalletSettings, type SmartWalletSettingsProps, SmartWalletToggle, type SmartWalletToggleProps, type ThemeOverride, type ThemePriority, ThemeProvider, type ThemeProviderProps, type TokenDisplay, type UnlockSnapshot, type UseEIP6963Result, type WalletConnectContextValue, WalletConnectProvider, type WalletConnectProviderProps, type WalletConnectState, WalletPicker, type WalletPickerProps, WalletSecurityPanel, type WalletSecurityPanelProps, WalletSecurityPanelView, type WalletSecurityPanelViewProps, Web3ComponentProvider, type Web3ComponentProviderProps, Web3ConnectUI, type Web3ConnectUIProps, cn, useAppKit, useComponent, useComponentRegistry, useDetectionMode, useEIP6963, useIsMobile, useTheme, useThemeVariable, useWalletConnect, useWalletConnectOptional };