@compass-labs/widgets 0.1.5 → 0.1.7

package/dist/index.d.mts

@@ -326,8 +326,12 @@ interface WalletAdapter {
 
 interface CompassProviderProps {
     children: ReactNode;
-    /** Compass API key - required for all API calls */
-    apiKey: string;
+    /**
+     * Compass API key - optional when using server-side API routes.
+     * If not provided, all API calls will go through /api/compass/* routes.
+     * @deprecated Use server-side API routes instead for better security.
+     */
+    apiKey?: string;
     /** Default chain to use */
     defaultChain?: SupportedChain;
     /** Theme preset name, preset with overrides, or full theme object */
@@ -542,6 +546,26 @@ declare function useAaveData(options?: UseAaveDataOptions): {
     refetch: () => void;
 };
 
+/**
+ * Props for EarnAccount - same as AaveMarketsListProps but without assetFilter
+ * since this widget is pre-configured to only show USDC markets.
+ */
+interface EarnAccountProps {
+    /** Show profit/loss summary */
+    showPnL?: boolean;
+    /** Show transaction history */
+    showHistory?: boolean;
+    /** Callback after successful supply */
+    onSupply?: (market: AaveMarketData, amount: string, txHash: string) => void;
+    /** Callback after successful withdraw */
+    onWithdraw?: (market: AaveMarketData, amount: string, txHash: string) => void;
+}
+
+/**
+ * EarnAccount widget - A beautiful banking-style USDC savings account.
+ */
+declare function EarnAccount({ showPnL, showHistory, onSupply, onWithdraw, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
+
 type SortOption = 'fixed_apy' | 'tvl' | 'expiry';
 interface PendleMarketData {
     marketAddress: string;
@@ -675,14 +699,32 @@ declare function useSwapQuote({ fromToken, toToken, amount, enabled }: UseSwapQu
 };
 
 type TabId = 'vaults' | 'aave' | 'pendle' | 'swap' | 'positions';
+type FeaturePreset = 'full' | 'earn-only' | 'swap-only' | 'vaults-only';
+interface TabConfig {
+    id: TabId;
+    label: string;
+    enabled: boolean;
+}
 interface CompassEarnWidgetProps {
-    /** Starting tab (defaults to 'vaults') */
+    preset?: FeaturePreset;
+    enableVaults?: boolean;
+    enableAave?: boolean;
+    enablePendle?: boolean;
+    enableSwap?: boolean;
+    enablePositions?: boolean;
     defaultTab?: TabId;
-    /** Called when user switches tabs */
+    showHeader?: boolean;
+    showApy?: boolean;
+    showTvl?: boolean;
+    showExpiry?: boolean;
+    showUserPosition?: boolean;
+    showPnL?: boolean;
+    showSearch?: boolean;
+    showSort?: boolean;
     onTabChange?: (tab: TabId) => void;
 }
 
-declare function CompassEarnWidget({ defaultTab, onTabChange, }: CompassEarnWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CompassEarnWidget({ preset, enableVaults, enableAave, enablePendle, enableSwap, enablePositions, defaultTab, showHeader, showApy, showTvl, showExpiry, showUserPosition, showPnL, showSearch, showSort, onTabChange, }: CompassEarnWidgetProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Theme Presets for Compass Embeddable Widgets
@@ -716,23 +758,27 @@ declare function useTheme(): ThemeContextValue;
  * Context value for the API context
  */
 interface ApiContextValue {
-    /** The API key used to authenticate with Compass API */
+    /** The API key used to authenticate with Compass API (may be empty when using server-side routes) */
     apiKey: string;
-    /** The Compass API SDK client instance */
+    /** The Compass API SDK client instance (may be a dummy when using server-side routes) */
     client: CompassApiSDK;
 }
 interface ApiProviderProps {
     children: ReactNode;
-    apiKey: string;
+    /** API key - optional when using server-side routes */
+    apiKey?: string;
     /** Optional API base URL override */
     serverURL?: string;
 }
 /**
  * Provider component that manages the Compass API client.
+ * When apiKey is not provided, a minimal client is created but all
+ * data fetching should go through server-side /api/compass/* routes.
  */
 declare function ApiProvider({ children, apiKey, serverURL }: ApiProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the Compass API client and API key.
+ * @deprecated When using server-side routes, prefer using fetch to /api/compass/* instead.
  */
 declare function useCompassApi(): ApiContextValue;
 declare const useEmbeddableApi: typeof useCompassApi;
@@ -916,4 +962,4 @@ interface ChainConfig {
 }
 declare const CHAINS: Record<SupportedChainId, ChainConfig>;
 
-export { type AaveMarketData, AaveMarketsList, type AaveMarketsListProps, AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, type ApyPeriod, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, DepositWithdrawForm, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type PendleMarketData, PendleMarketsList, type PendleMarketsListProps, type SortOption as PendleSortOption, PnLSummary, type SupportedChain, type SupportedChainId, type SwapLayout, type SwapQuote, SwapWidget, type SwapWidgetProps, type TabId, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance, TransactionHistory, type TypedDataToSign, type UserAavePosition, type UserPendlePosition, type UserVaultPosition, type VaultData, VaultsList, type VaultsListProps, type SortOption$1 as VaultsSortOption, type WalletAdapter, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };
+export { type AaveMarketData, AaveMarketsList, type AaveMarketsListProps, AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, type ApyPeriod, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, DepositWithdrawForm, EarnAccount, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type EarnAccountProps, type FeaturePreset, type PendleMarketData, PendleMarketsList, type PendleMarketsListProps, type SortOption as PendleSortOption, PnLSummary, type SupportedChain, type SupportedChainId, type SwapLayout, type SwapQuote, SwapWidget, type SwapWidgetProps, type TabConfig, type TabId, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance, TransactionHistory, type TypedDataToSign, type UserAavePosition, type UserPendlePosition, type UserVaultPosition, type VaultData, VaultsList, type VaultsListProps, type SortOption$1 as VaultsSortOption, type WalletAdapter, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };

package/dist/index.d.ts

@@ -326,8 +326,12 @@ interface WalletAdapter {
 
 interface CompassProviderProps {
     children: ReactNode;
-    /** Compass API key - required for all API calls */
-    apiKey: string;
+    /**
+     * Compass API key - optional when using server-side API routes.
+     * If not provided, all API calls will go through /api/compass/* routes.
+     * @deprecated Use server-side API routes instead for better security.
+     */
+    apiKey?: string;
     /** Default chain to use */
     defaultChain?: SupportedChain;
     /** Theme preset name, preset with overrides, or full theme object */
@@ -542,6 +546,26 @@ declare function useAaveData(options?: UseAaveDataOptions): {
     refetch: () => void;
 };
 
+/**
+ * Props for EarnAccount - same as AaveMarketsListProps but without assetFilter
+ * since this widget is pre-configured to only show USDC markets.
+ */
+interface EarnAccountProps {
+    /** Show profit/loss summary */
+    showPnL?: boolean;
+    /** Show transaction history */
+    showHistory?: boolean;
+    /** Callback after successful supply */
+    onSupply?: (market: AaveMarketData, amount: string, txHash: string) => void;
+    /** Callback after successful withdraw */
+    onWithdraw?: (market: AaveMarketData, amount: string, txHash: string) => void;
+}
+
+/**
+ * EarnAccount widget - A beautiful banking-style USDC savings account.
+ */
+declare function EarnAccount({ showPnL, showHistory, onSupply, onWithdraw, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
+
 type SortOption = 'fixed_apy' | 'tvl' | 'expiry';
 interface PendleMarketData {
     marketAddress: string;
@@ -675,14 +699,32 @@ declare function useSwapQuote({ fromToken, toToken, amount, enabled }: UseSwapQu
 };
 
 type TabId = 'vaults' | 'aave' | 'pendle' | 'swap' | 'positions';
+type FeaturePreset = 'full' | 'earn-only' | 'swap-only' | 'vaults-only';
+interface TabConfig {
+    id: TabId;
+    label: string;
+    enabled: boolean;
+}
 interface CompassEarnWidgetProps {
-    /** Starting tab (defaults to 'vaults') */
+    preset?: FeaturePreset;
+    enableVaults?: boolean;
+    enableAave?: boolean;
+    enablePendle?: boolean;
+    enableSwap?: boolean;
+    enablePositions?: boolean;
     defaultTab?: TabId;
-    /** Called when user switches tabs */
+    showHeader?: boolean;
+    showApy?: boolean;
+    showTvl?: boolean;
+    showExpiry?: boolean;
+    showUserPosition?: boolean;
+    showPnL?: boolean;
+    showSearch?: boolean;
+    showSort?: boolean;
     onTabChange?: (tab: TabId) => void;
 }
 
-declare function CompassEarnWidget({ defaultTab, onTabChange, }: CompassEarnWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CompassEarnWidget({ preset, enableVaults, enableAave, enablePendle, enableSwap, enablePositions, defaultTab, showHeader, showApy, showTvl, showExpiry, showUserPosition, showPnL, showSearch, showSort, onTabChange, }: CompassEarnWidgetProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Theme Presets for Compass Embeddable Widgets
@@ -716,23 +758,27 @@ declare function useTheme(): ThemeContextValue;
  * Context value for the API context
  */
 interface ApiContextValue {
-    /** The API key used to authenticate with Compass API */
+    /** The API key used to authenticate with Compass API (may be empty when using server-side routes) */
     apiKey: string;
-    /** The Compass API SDK client instance */
+    /** The Compass API SDK client instance (may be a dummy when using server-side routes) */
     client: CompassApiSDK;
 }
 interface ApiProviderProps {
     children: ReactNode;
-    apiKey: string;
+    /** API key - optional when using server-side routes */
+    apiKey?: string;
     /** Optional API base URL override */
     serverURL?: string;
 }
 /**
  * Provider component that manages the Compass API client.
+ * When apiKey is not provided, a minimal client is created but all
+ * data fetching should go through server-side /api/compass/* routes.
  */
 declare function ApiProvider({ children, apiKey, serverURL }: ApiProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the Compass API client and API key.
+ * @deprecated When using server-side routes, prefer using fetch to /api/compass/* instead.
  */
 declare function useCompassApi(): ApiContextValue;
 declare const useEmbeddableApi: typeof useCompassApi;
@@ -916,4 +962,4 @@ interface ChainConfig {
 }
 declare const CHAINS: Record<SupportedChainId, ChainConfig>;
 
-export { type AaveMarketData, AaveMarketsList, type AaveMarketsListProps, AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, type ApyPeriod, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, DepositWithdrawForm, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type PendleMarketData, PendleMarketsList, type PendleMarketsListProps, type SortOption as PendleSortOption, PnLSummary, type SupportedChain, type SupportedChainId, type SwapLayout, type SwapQuote, SwapWidget, type SwapWidgetProps, type TabId, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance, TransactionHistory, type TypedDataToSign, type UserAavePosition, type UserPendlePosition, type UserVaultPosition, type VaultData, VaultsList, type VaultsListProps, type SortOption$1 as VaultsSortOption, type WalletAdapter, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };
+export { type AaveMarketData, AaveMarketsList, type AaveMarketsListProps, AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, type ApyPeriod, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, DepositWithdrawForm, EarnAccount, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type EarnAccountProps, type FeaturePreset, type PendleMarketData, PendleMarketsList, type PendleMarketsListProps, type SortOption as PendleSortOption, PnLSummary, type SupportedChain, type SupportedChainId, type SwapLayout, type SwapQuote, SwapWidget, type SwapWidgetProps, type TabConfig, type TabId, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance, TransactionHistory, type TypedDataToSign, type UserAavePosition, type UserPendlePosition, type UserVaultPosition, type VaultData, VaultsList, type VaultsListProps, type SortOption$1 as VaultsSortOption, type WalletAdapter, WalletStatus, themePresets, useAaveData, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, usePendleData, useSwapQuote, useTheme, useVaultsData };