@compass-labs/widgets 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,910 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Address } from 'viem';
+import * as _tanstack_query_core from '@tanstack/query-core';
+import { CompassApiSDK } from '@compass-labs/api-sdk';
+import { Chain } from 'viem/chains';
+
+/**
+ * Theme Type Definitions for Compass Embeddable Widgets
+ *
+ * This module provides comprehensive TypeScript types for the theming system,
+ * enabling full customization of widget appearance while maintaining type safety.
+ */
+/**
+ * Recursively makes all properties of T optional.
+ * Useful for allowing partial theme overrides.
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/**
+ * Theme mode - light or dark appearance
+ */
+type ThemeMode = 'light' | 'dark';
+/**
+ * Available theme preset names
+ */
+type ThemePresetName = 'compass-dark' | 'compass-light' | 'minimal-dark' | 'minimal-light' | 'high-contrast-dark' | 'high-contrast-light';
+/**
+ * Background color tokens
+ */
+interface ThemeBackgroundColors {
+    /** Main page/widget background */
+    background: string;
+    /** Elevated surface (cards, panels) */
+    surface: string;
+    /** Hover state for surfaces */
+    surfaceHover: string;
+    /** Overlay/modal backdrop */
+    overlay: string;
+}
+/**
+ * Brand color tokens
+ */
+interface ThemeBrandColors {
+    /** Primary brand color (buttons, links, accents) */
+    primary: string;
+    /** Primary hover state */
+    primaryHover: string;
+    /** Text on primary color background */
+    primaryText: string;
+    /** Secondary brand color */
+    secondary: string;
+    /** Secondary hover state */
+    secondaryHover: string;
+}
+/**
+ * Text color tokens
+ */
+interface ThemeTextColors {
+    /** Primary text color */
+    text: string;
+    /** Secondary/muted text */
+    textSecondary: string;
+    /** Tertiary/disabled text */
+    textTertiary: string;
+}
+/**
+ * Border color tokens
+ */
+interface ThemeBorderColors {
+    /** Default border color */
+    border: string;
+    /** Border hover state */
+    borderHover: string;
+    /** Border focus state (inputs) */
+    borderFocus: string;
+}
+/**
+ * Semantic color with muted variant
+ */
+interface SemanticColor {
+    /** Main semantic color */
+    DEFAULT: string;
+    /** Muted/background variant */
+    muted: string;
+}
+/**
+ * Semantic color tokens for status/feedback
+ */
+interface ThemeSemanticColors {
+    /** Success states (confirmations, positive values) */
+    success: SemanticColor;
+    /** Warning states (cautions, pending) */
+    warning: SemanticColor;
+    /** Error states (failures, negative values) */
+    error: SemanticColor;
+    /** Info states (neutral information) */
+    info: SemanticColor;
+}
+/**
+ * Complete color palette for a theme
+ */
+interface ThemeColors {
+    /** Background colors */
+    backgrounds: ThemeBackgroundColors;
+    /** Brand colors */
+    brand: ThemeBrandColors;
+    /** Text colors */
+    text: ThemeTextColors;
+    /** Border colors */
+    borders: ThemeBorderColors;
+    /** Semantic/status colors */
+    semantic: ThemeSemanticColors;
+}
+/**
+ * Typography scale entry
+ */
+interface TypographyScale {
+    /** Font size (CSS value) */
+    fontSize: string;
+    /** Line height (CSS value or number) */
+    lineHeight: string | number;
+    /** Font weight */
+    fontWeight: number;
+    /** Optional letter spacing */
+    letterSpacing?: string;
+}
+/**
+ * Complete typography configuration
+ */
+interface ThemeTypography {
+    /** Primary font family stack */
+    fontFamily: string;
+    /** Monospace font family stack (for code, numbers) */
+    fontFamilyMono: string;
+    /** Heading typography (h1, h2, etc.) */
+    heading: TypographyScale;
+    /** Subheading typography */
+    subheading: TypographyScale;
+    /** Body text typography */
+    body: TypographyScale;
+    /** Caption/small text typography */
+    caption: TypographyScale;
+    /** Label typography (form labels, badges) */
+    label: TypographyScale;
+}
+/**
+ * Spacing configuration
+ */
+interface ThemeSpacing {
+    /** Base spacing unit (e.g., '4px', '0.25rem') */
+    unit: string;
+    /** Container padding */
+    containerPadding: string;
+    /** Card/panel padding */
+    cardPadding: string;
+    /** Input field padding */
+    inputPadding: string;
+}
+/**
+ * Border radius scale
+ */
+interface ThemeBorderRadius {
+    /** No border radius */
+    none: string;
+    /** Small border radius */
+    sm: string;
+    /** Medium border radius (default) */
+    md: string;
+    /** Large border radius */
+    lg: string;
+    /** Extra large border radius */
+    xl: string;
+    /** Full/pill border radius */
+    full: string;
+}
+/**
+ * Shape configuration (borders and corners)
+ */
+interface ThemeShape {
+    /** Border radius scale */
+    borderRadius: ThemeBorderRadius;
+    /** Default border width */
+    borderWidth: string;
+}
+/**
+ * Shadow scale
+ */
+interface ThemeShadow {
+    /** Small shadow (subtle elevation) */
+    sm: string;
+    /** Medium shadow (cards, dropdowns) */
+    md: string;
+    /** Large shadow (modals, popovers) */
+    lg: string;
+}
+/**
+ * Visual effects configuration
+ */
+interface ThemeEffects {
+    /** Box shadow scale */
+    shadow: ThemeShadow;
+    /** Backdrop blur values */
+    blur: {
+        /** Small blur */
+        sm: string;
+        /** Medium blur */
+        md: string;
+        /** Large blur */
+        lg: string;
+    };
+    /** Transition presets */
+    transition: {
+        /** Fast transition (hover states) */
+        fast: string;
+        /** Normal transition (most interactions) */
+        normal: string;
+        /** Slow transition (page transitions) */
+        slow: string;
+    };
+}
+/**
+ * Complete Compass theme configuration
+ */
+interface CompassTheme {
+    /** Theme name identifier */
+    name: string;
+    /** Theme mode (light/dark) */
+    mode: ThemeMode;
+    /** Color palette */
+    colors: ThemeColors;
+    /** Typography configuration */
+    typography: ThemeTypography;
+    /** Spacing configuration */
+    spacing: ThemeSpacing;
+    /** Shape configuration */
+    shape: ThemeShape;
+    /** Visual effects */
+    effects: ThemeEffects;
+}
+/**
+ * Theme input options for widget configuration.
+ *
+ * Can be:
+ * - A preset name string (e.g., 'compass-dark')
+ * - An object with preset name and partial overrides
+ * - A complete custom theme object
+ */
+type ThemeInput = ThemePresetName | {
+    preset: ThemePresetName;
+    overrides?: DeepPartial<CompassTheme>;
+} | CompassTheme;
+
+type SupportedChain = 'ethereum' | 'base' | 'arbitrum';
+/**
+ * EIP-712 typed data structure for signing
+ */
+interface TypedDataToSign {
+    domain: {
+        name?: string;
+        version?: string;
+        chainId?: number;
+        verifyingContract?: Address;
+    };
+    types: Record<string, Array<{
+        name: string;
+        type: string;
+    }>>;
+    primaryType: string;
+    message: Record<string, unknown>;
+}
+/**
+ * Wallet adapter interface for bringing your own wallet
+ *
+ * Implement this interface with your wallet library of choice
+ * (wagmi, viem, ethers, RainbowKit, Privy, etc.)
+ *
+ * @example Using wagmi/viem:
+ * ```tsx
+ * import { useAccount, useSignTypedData, useSwitchChain } from 'wagmi';
+ *
+ * const { address } = useAccount();
+ * const { signTypedDataAsync } = useSignTypedData();
+ * const { switchChainAsync } = useSwitchChain();
+ *
+ * <CompassProvider
+ *   apiKey="your-key"
+ *   wallet={{
+ *     address: address ?? null,
+ *     signTypedData: async (data) => signTypedDataAsync(data),
+ *     switchChain: async (chainId) => { await switchChainAsync({ chainId }); },
+ *   }}
+ * >
+ * ```
+ */
+interface WalletAdapter {
+    /** Connected wallet address, or null if not connected */
+    address: Address | null;
+    /**
+     * Sign EIP-712 typed data
+     * Called when user initiates a deposit/withdraw transaction
+     */
+    signTypedData: (data: TypedDataToSign) => Promise<string>;
+    /**
+     * Switch to a different chain (optional)
+     * If not provided, user will see a message to switch manually
+     */
+    switchChain?: (chainId: number) => Promise<void>;
+    /**
+     * Trigger wallet connection (optional)
+     * If provided, widgets will show a "Connect Wallet" button
+     */
+    login?: () => void;
+    /**
+     * Disconnect wallet (optional)
+     * If provided, widgets will show a logout button when connected
+     */
+    logout?: () => Promise<void>;
+}
+
+interface CompassProviderProps {
+    children: ReactNode;
+    /** Compass API key - required for all API calls */
+    apiKey: string;
+    /** Default chain to use */
+    defaultChain?: SupportedChain;
+    /** Theme preset name, preset with overrides, or full theme object */
+    theme?: ThemeInput;
+    /**
+     * Wallet adapter for signing transactions
+     *
+     * Bring your own wallet by implementing the WalletAdapter interface
+     * with your wallet library of choice (wagmi, viem, ethers, etc.)
+     *
+     * @example
+     * ```tsx
+     * import { useAccount, useSignTypedData } from 'wagmi';
+     *
+     * const { address } = useAccount();
+     * const { signTypedDataAsync } = useSignTypedData();
+     *
+     * <CompassProvider
+     *   apiKey="your-key"
+     *   wallet={{
+     *     address: address ?? null,
+     *     signTypedData: signTypedDataAsync,
+     *   }}
+     * >
+     *   <VaultsList />
+     * </CompassProvider>
+     * ```
+     */
+    wallet?: WalletAdapter;
+}
+declare function CompassProvider({ children, apiKey, defaultChain, theme, wallet, }: CompassProviderProps): react_jsx_runtime.JSX.Element;
+
+type ApyPeriod = '7d' | '30d' | '90d';
+type SortOption$2 = 'apy_7d' | 'apy_30d' | 'apy_90d' | 'tvl';
+type ActionMode$2 = 'modal' | 'inline';
+interface VaultData {
+    vaultAddress: string;
+    name: string;
+    assetSymbol: string;
+    apy7d: string | null;
+    apy30d: string | null;
+    apy90d: string | null;
+    tvlUsd: string | null;
+}
+interface UserVaultPosition {
+    vaultAddress: string;
+    balance: string;
+    pnl?: {
+        unrealizedPnl: string;
+        realizedPnl: string;
+        totalPnl: string;
+        totalDeposited: string;
+    };
+    deposits?: Array<{
+        amount: string;
+        blockNumber: number;
+        txHash: string;
+    }>;
+    withdrawals?: Array<{
+        amount: string;
+        blockNumber: number;
+        txHash: string;
+    }>;
+}
+interface VaultsListProps {
+    /** Show APY metrics */
+    showApy?: boolean;
+    /** Which APY periods to display */
+    apyPeriods?: ApyPeriod[];
+    /** Show total value locked */
+    showTvl?: boolean;
+    /** Show user's current position */
+    showUserPosition?: boolean;
+    /** Show profit/loss summary */
+    showPnL?: boolean;
+    /** Show transaction history */
+    showHistory?: boolean;
+    /** Enable search functionality */
+    showSearch?: boolean;
+    /** Enable sorting options */
+    showSort?: boolean;
+    /** How to show deposit/withdraw form */
+    actionMode?: ActionMode$2;
+    /** Default sort option */
+    defaultSort?: SortOption$2;
+    /** Filter by asset symbols */
+    assetFilter?: string[];
+    /** Minimum APY filter */
+    minApy?: number;
+    /** Callback when vault is clicked */
+    onVaultSelect?: (vault: VaultData) => void;
+    /** Callback after successful deposit */
+    onDeposit?: (vault: VaultData, amount: string, txHash: string) => void;
+    /** Callback after successful withdraw */
+    onWithdraw?: (vault: VaultData, amount: string, txHash: string) => void;
+}
+
+/**
+ * VaultsList widget displays ERC-4626 yield vaults with APY, TVL, and user positions.
+ *
+ * @example
+ * ```tsx
+ * <VaultsList
+ *   showApy={true}
+ *   showTvl={true}
+ *   showUserPosition={true}
+ *   onVaultSelect={(vault) => console.log('Selected:', vault)}
+ * />
+ * ```
+ */
+declare function VaultsList({ showApy, apyPeriods, showTvl, showUserPosition, showPnL, showHistory, showSearch, showSort, actionMode, defaultSort, assetFilter, minApy, onVaultSelect, onDeposit, onWithdraw, }: VaultsListProps): react_jsx_runtime.JSX.Element;
+
+interface UseVaultsDataOptions {
+    sortBy?: SortOption$2;
+    assetFilter?: string[];
+    minApy?: number;
+}
+declare function useVaultsData(options?: UseVaultsDataOptions): {
+    vaults: {
+        userPosition: UserVaultPosition | undefined;
+        vaultAddress: string;
+        name: string;
+        assetSymbol: string;
+        apy7d: string | null;
+        apy30d: string | null;
+        apy90d: string | null;
+        tvlUsd: string | null;
+    }[];
+    isLoading: boolean;
+    isError: boolean;
+    error: Error | null;
+    refetch: () => void;
+};
+
+type SortOption$1 = 'supply_apy';
+type ActionMode$1 = 'modal' | 'inline';
+interface AaveMarketData {
+    marketAddress: string;
+    reserveSymbol: string;
+    underlyingSymbol: string;
+    supplyApy: string | null;
+    borrowApy: string | null;
+    tvlUsd: string | null;
+}
+interface TransactionEvent$1 {
+    amount: string;
+    blockNumber: number;
+    txHash: string;
+}
+interface UserAavePosition {
+    marketAddress: string;
+    reserveSymbol: string;
+    balance: string;
+    pnl?: {
+        unrealizedPnl: string;
+        realizedPnl: string;
+        totalPnl: string;
+        totalDeposited: string;
+    };
+    deposits?: TransactionEvent$1[];
+    withdrawals?: TransactionEvent$1[];
+}
+interface AaveMarketsListProps {
+    /** Show APY metrics */
+    showApy?: boolean;
+    /** Show total value locked (not available for Aave) */
+    showTvl?: boolean;
+    /** Show user's current position */
+    showUserPosition?: boolean;
+    /** Show profit/loss summary */
+    showPnL?: boolean;
+    /** Show transaction history */
+    showHistory?: boolean;
+    /** Enable search functionality */
+    showSearch?: boolean;
+    /** Enable sorting options */
+    showSort?: boolean;
+    /** How to show deposit/withdraw form */
+    actionMode?: ActionMode$1;
+    /** Default sort option */
+    defaultSort?: SortOption$1;
+    /** Filter by asset symbols */
+    assetFilter?: string[];
+    /** Callback when market is clicked */
+    onMarketSelect?: (market: AaveMarketData) => void;
+    /** Callback after successful supply */
+    onSupply?: (market: AaveMarketData, amount: string, txHash: string) => void;
+    /** Callback after successful withdraw */
+    onWithdraw?: (market: AaveMarketData, amount: string, txHash: string) => void;
+}
+
+/**
+ * AaveMarketsList widget displays Aave V3 lending markets with supply APY.
+ *
+ * @example
+ * ```tsx
+ * <AaveMarketsList
+ *   showApy={true}
+ *   showUserPosition={true}
+ *   onMarketSelect={(market) => console.log('Selected:', market)}
+ * />
+ * ```
+ */
+declare function AaveMarketsList({ showApy, showTvl, // Aave API doesn't provide TVL data
+showUserPosition, showPnL, showHistory, showSearch, showSort, // Only one sort option (APY), so hide by default
+actionMode, defaultSort, assetFilter, onMarketSelect, onSupply, onWithdraw, }: AaveMarketsListProps): react_jsx_runtime.JSX.Element;
+
+interface UseAaveDataOptions {
+    sortBy?: SortOption$1;
+    assetFilter?: string[];
+}
+declare function useAaveData(options?: UseAaveDataOptions): {
+    markets: {
+        userPosition: UserAavePosition | undefined;
+        marketAddress: string;
+        reserveSymbol: string;
+        underlyingSymbol: string;
+        supplyApy: string | null;
+        borrowApy: string | null;
+        tvlUsd: string | null;
+    }[];
+    isLoading: boolean;
+    isError: boolean;
+    error: Error | null;
+    refetch: () => void;
+};
+
+type SortOption = 'fixed_apy' | 'tvl' | 'expiry';
+type ActionMode = 'modal' | 'inline';
+interface PendleMarketData {
+    marketAddress: string;
+    ptAddress: string;
+    name: string;
+    underlyingSymbol: string;
+    fixedApy: string | null;
+    impliedApy: string | null;
+    tvlUsd: string | null;
+    expiry: string;
+}
+interface TransactionEvent {
+    amount: string;
+    blockNumber: number;
+    txHash: string;
+}
+interface UserPendlePosition {
+    marketAddress: string;
+    balance: string;
+    pnl?: {
+        unrealizedPnl: string;
+        realizedPnl: string;
+        totalPnl: string;
+        totalDeposited: string;
+    };
+    deposits?: TransactionEvent[];
+    withdrawals?: TransactionEvent[];
+}
+interface PendleMarketsListProps {
+    /** Show APY metrics */
+    showApy?: boolean;
+    /** Show total value locked */
+    showTvl?: boolean;
+    /** Show expiry dates */
+    showExpiry?: boolean;
+    /** Show user's current position */
+    showUserPosition?: boolean;
+    /** Show profit/loss summary */
+    showPnL?: boolean;
+    /** Show transaction history */
+    showHistory?: boolean;
+    /** Enable search functionality */
+    showSearch?: boolean;
+    /** Enable sorting options */
+    showSort?: boolean;
+    /** How to show deposit/withdraw form */
+    actionMode?: ActionMode;
+    /** Default sort option */
+    defaultSort?: SortOption;
+    /** Filter by asset symbols */
+    assetFilter?: string[];
+    /** Callback when market is clicked */
+    onMarketSelect?: (market: PendleMarketData) => void;
+    /** Callback after successful deposit */
+    onDeposit?: (market: PendleMarketData, amount: string, txHash: string) => void;
+    /** Callback after successful withdraw */
+    onWithdraw?: (market: PendleMarketData, amount: string, txHash: string) => void;
+}
+
+/**
+ * PendleMarketsList widget displays Pendle fixed-yield markets.
+ *
+ * @example
+ * ```tsx
+ * <PendleMarketsList
+ *   showApy={true}
+ *   showExpiry={true}
+ *   showTvl={true}
+ *   onMarketSelect={(market) => console.log('Selected:', market)}
+ * />
+ * ```
+ */
+declare function PendleMarketsList({ showApy, showTvl, showExpiry, showUserPosition, showPnL, showHistory, showSearch, showSort, actionMode, defaultSort, assetFilter, onMarketSelect, onDeposit, onWithdraw, }: PendleMarketsListProps): react_jsx_runtime.JSX.Element;
+
+interface UsePendleDataOptions {
+    sortBy?: SortOption;
+    assetFilter?: string[];
+}
+declare function usePendleData(options?: UsePendleDataOptions): {
+    markets: {
+        userPosition: UserPendlePosition | undefined;
+        marketAddress: string;
+        ptAddress: string;
+        name: string;
+        underlyingSymbol: string;
+        fixedApy: string | null;
+        impliedApy: string | null;
+        tvlUsd: string | null;
+        expiry: string;
+    }[];
+    isLoading: boolean;
+    isError: boolean;
+    error: Error | null;
+    refetch: () => void;
+};
+
+type SwapLayout = 'compact' | 'full';
+interface SwapQuote {
+    inputAmount: string;
+    outputAmount: string;
+    rate: string;
+    priceImpact: string;
+    fee: string;
+}
+interface SwapWidgetProps {
+    layout?: SwapLayout;
+    defaultFromToken?: string;
+    defaultToToken?: string;
+    allowedTokens?: string[];
+    showReverseButton?: boolean;
+    showSettings?: boolean;
+    showPriceImpact?: boolean;
+    onSwapSuccess?: (fromToken: string, toToken: string, fromAmount: string, toAmount: string, txHash: string) => void;
+    onSwapError?: (error: Error) => void;
+}
+
+declare function SwapWidget({ layout, defaultFromToken, defaultToToken, allowedTokens, showReverseButton, showSettings, showPriceImpact, onSwapSuccess, onSwapError, }: SwapWidgetProps): react_jsx_runtime.JSX.Element;
+
+interface UseSwapQuoteOptions {
+    fromToken: string;
+    toToken: string;
+    amount: string;
+    enabled?: boolean;
+}
+declare function useSwapQuote({ fromToken, toToken, amount, enabled }: UseSwapQuoteOptions): {
+    quote: SwapQuote | null | undefined;
+    isLoading: boolean;
+    isError: boolean;
+    refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<SwapQuote | null, Error>>;
+};
+
+type TabId = 'vaults' | 'aave' | 'pendle' | 'swap';
+type FeaturePreset = 'full' | 'earn-only' | 'swap-only' | 'vaults-only';
+interface TabConfig {
+    id: TabId;
+    label: string;
+    enabled: boolean;
+}
+interface CompassEarnWidgetProps {
+    preset?: FeaturePreset;
+    enableVaults?: boolean;
+    enableAave?: boolean;
+    enablePendle?: boolean;
+    enableSwap?: boolean;
+    defaultTab?: TabId;
+    showHeader?: boolean;
+    onTabChange?: (tab: TabId) => void;
+}
+
+declare function CompassEarnWidget({ preset, enableVaults, enableAave, enablePendle, enableSwap, defaultTab, showHeader, onTabChange, }: CompassEarnWidgetProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Theme Presets for Compass Embeddable Widgets
+ *
+ * This module provides 6 pre-configured theme presets covering various
+ * visual styles and accessibility needs:
+ *
+ * - compass-dark/light: Brand themes with indigo primary and glassmorphism
+ * - minimal-dark/light: Flat design with sharp corners and no shadows
+ * - high-contrast-dark/light: Accessible themes with bold colors and larger text
+ */
+
+/**
+ * Map of all available theme presets by name
+ */
+declare const themePresets: Record<ThemePresetName, CompassTheme>;
+
+interface ThemeContextValue {
+    theme: CompassTheme;
+    setTheme: (input: ThemeInput) => void;
+    cssVariables: string;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    theme?: ThemeInput;
+}
+declare function ThemeProvider({ children, theme: initialTheme }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+/**
+ * Context value for the API context
+ */
+interface ApiContextValue {
+    /** The API key used to authenticate with Compass API */
+    apiKey: string;
+    /** The Compass API SDK client instance */
+    client: CompassApiSDK;
+}
+interface ApiProviderProps {
+    children: ReactNode;
+    apiKey: string;
+    /** Optional API base URL override */
+    serverURL?: string;
+}
+/**
+ * Provider component that manages the Compass API client.
+ */
+declare function ApiProvider({ children, apiKey, serverURL }: ApiProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the Compass API client and API key.
+ */
+declare function useCompassApi(): ApiContextValue;
+declare const useEmbeddableApi: typeof useCompassApi;
+
+interface ChainConfig$1 {
+    viemChain: Chain;
+    name: string;
+    icon: string;
+}
+interface ChainContextValue {
+    chainId: SupportedChain;
+    setChainId: (chain: SupportedChain) => void;
+    setChain: (chain: SupportedChain) => void;
+    chain: ChainConfig$1;
+}
+declare function useCompassChain(): ChainContextValue;
+declare const useChain: typeof useCompassChain;
+
+/**
+ * Wallet Context value interface
+ */
+interface WalletContextValue {
+    /** Connected wallet address, or null if not connected */
+    address: Address | null;
+    /** Whether a wallet is connected */
+    isConnected: boolean;
+    /** Sign EIP-712 typed data - throws if wallet not connected */
+    signTypedData: (data: TypedDataToSign) => Promise<string>;
+    /** Switch chain - may not be available depending on wallet adapter */
+    switchChain: ((chainId: number) => Promise<void>) | null;
+    /** Trigger wallet connection - may not be available depending on wallet adapter */
+    login: (() => void) | null;
+    /** Disconnect wallet - may not be available depending on wallet adapter */
+    logout: (() => Promise<void>) | null;
+}
+/**
+ * Hook to access the wallet context
+ */
+declare function useCompassWallet(): WalletContextValue;
+declare const useEmbeddableWallet: typeof useCompassWallet;
+
+interface EarnAccountContextValue {
+    /** The user's earn account address (Safe wallet) */
+    earnAccountAddress: Address | null;
+    /** Whether the earn account has been deployed on-chain */
+    isDeployed: boolean;
+    /** Whether we're checking the account status */
+    isChecking: boolean;
+    /** Whether we're creating the account */
+    isCreating: boolean;
+    /** Error from checking or creating */
+    error: Error | null;
+    /** Create the earn account (gas sponsored) */
+    createAccount: () => Promise<Address>;
+    /** Refresh account status */
+    refetch: () => void;
+}
+/**
+ * Hook to access earn account state and actions
+ */
+declare function useEarnAccount(): EarnAccountContextValue;
+
+declare function ChainSwitcher(): react_jsx_runtime.JSX.Element;
+
+interface WalletStatusProps {
+    /** Show full address or truncated */
+    showFullAddress?: boolean;
+    /** Show logout button when connected */
+    showLogout?: boolean;
+    /** Compact mode - just icon and minimal text */
+    compact?: boolean;
+    /** Callback when user clicks connect (optional - for apps that handle their own wallet connection) */
+    onConnect?: () => void;
+    /** Callback when user clicks disconnect (optional - for apps that handle their own wallet connection) */
+    onDisconnect?: () => void;
+}
+/**
+ * Displays the connected wallet status with optional login/logout functionality.
+ *
+ * Uses login/logout from the WalletAdapter by default if provided.
+ * You can override with `onConnect` and `onDisconnect` props if your app
+ * handles wallet connection separately.
+ */
+declare function WalletStatus({ showFullAddress, showLogout, compact, onConnect, onDisconnect, }: WalletStatusProps): react_jsx_runtime.JSX.Element;
+
+interface ActionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+}
+declare function ActionModal({ isOpen, onClose, title, children }: ActionModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface PositionPnL {
+    unrealizedPnl: string;
+    realizedPnl: string;
+    totalPnl: string;
+    totalDeposited: string;
+}
+interface PnLSummaryProps {
+    pnl: PositionPnL | null | undefined;
+    tokenSymbol: string;
+    tokenPrice: number;
+}
+declare function PnLSummary({ pnl, tokenSymbol, tokenPrice }: PnLSummaryProps): react_jsx_runtime.JSX.Element | null;
+
+type ActionType = 'deposit' | 'withdraw';
+type VenueType = 'VAULT' | 'AAVE' | 'PENDLE_PT';
+interface DepositWithdrawFormProps {
+    venueType: VenueType;
+    venueAddress: string;
+    tokenSymbol: string;
+    tokenDecimals: number;
+    positionBalance?: string;
+    onSuccess?: (action: ActionType, amount: string, txHash: string) => void;
+    onError?: (error: Error) => void;
+}
+declare function DepositWithdrawForm({ venueType, venueAddress, tokenSymbol, tokenDecimals, positionBalance, onSuccess, onError, }: DepositWithdrawFormProps): react_jsx_runtime.JSX.Element;
+
+interface DepositEvent {
+    amount: string;
+    blockNumber: number;
+    txHash: string;
+}
+interface WithdrawalEvent {
+    amount: string;
+    blockNumber: number;
+    txHash: string;
+}
+interface TransactionHistoryProps {
+    deposits?: DepositEvent[];
+    withdrawals?: WithdrawalEvent[];
+    tokenSymbol: string;
+}
+declare function TransactionHistory({ deposits, withdrawals, tokenSymbol, }: TransactionHistoryProps): react_jsx_runtime.JSX.Element | null;
+
+interface EarnAccountGuardProps {
+    children: ReactNode;
+    /** What to show while checking account status */
+    loadingComponent?: ReactNode;
+    /** Custom component to show when account needs creation */
+    createAccountComponent?: ReactNode;
+}
+declare function EarnAccountGuard({ children, loadingComponent, createAccountComponent, }: EarnAccountGuardProps): react_jsx_runtime.JSX.Element;
+
+type SupportedChainId = 'ethereum' | 'base' | 'arbitrum';
+interface ChainConfig {
+    id: SupportedChainId;
+    name: string;
+    viemChain: Chain;
+    icon: string;
+    rpcUrl?: string;
+}
+declare const CHAINS: Record<SupportedChainId, ChainConfig>;
+declare const TOKEN_DECIMALS: Record<string, number>;
+
+export { type AaveMarketData, AaveMarketsList, type AaveMarketsListProps, type SortOption$1 as AaveSortOption, ActionModal, type ActionMode$2 as ActionMode, ApiProvider, type ApyPeriod, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, DepositWithdrawForm, type EarnAccountContextValue, EarnAccountGuard, type FeaturePreset, type PendleMarketData, PendleMarketsList, type PendleMarketsListProps, type SortOption as PendleSortOption, PnLSummary, type SupportedChain, type SupportedChainId, type SwapLayout, type SwapQuote, SwapWidget, type SwapWidgetProps, TOKEN_DECIMALS, type TabConfig, type TabId, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, TransactionHistory, type TypedDataToSign, type UserAavePosition, type UserPendlePosition, type UserVaultPosition, type VaultData, VaultsList, type VaultsListProps, type SortOption$2 as VaultsSortOption, type WalletAdapter, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };