@compass-labs/widgets 0.1.34 → 0.1.35

package/dist/index.d.mts

@@ -429,12 +429,39 @@ interface EarnAccountProps {
      * Valid values: 'ethereum', 'base', 'arbitrum'
      */
     chain?: string;
+    /** Fixed height for the widget container @default '600px' */
+    height?: string;
 }
 
 /**
  * EarnAccount widget - A beautiful banking-style USDC savings account.
  */
-declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketTab, allowedVariableMarkets, allowedFixedMarkets, chain: chainProp, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
+declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketTab, allowedVariableMarkets, allowedFixedMarkets, chain: chainProp, height, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
+
+interface CreditAccountProps {
+    /** Custom title for the header @default "Credit Account" */
+    title?: string;
+    /** Show the header with title and wallet status @default true */
+    showHeader?: boolean;
+    /** Show the "Top Up" button to transfer from wallet @default true */
+    showTopUpButton?: boolean;
+    /** Compact layout with reduced spacing @default false */
+    compact?: boolean;
+    /** Fixed height for the widget container @default "600px" */
+    height?: string;
+    /** Lock the widget to a specific chain @default undefined (use context) */
+    chain?: string;
+    /** Restrict which tokens can be used as collateral (undefined = all) */
+    allowedCollateralTokens?: string[];
+    /** Restrict which tokens can be used for borrowing (undefined = all) */
+    allowedDebtTokens?: string[];
+    /** Callback after successful borrow */
+    onBorrow?: (txHash: string) => void;
+    /** Callback after successful repay */
+    onRepay?: (txHash: string) => void;
+}
+
+declare function CreditAccount({ title, showHeader, showTopUpButton, compact, height, chain: chainProp, allowedCollateralTokens, allowedDebtTokens, onBorrow: _onBorrow, onRepay: _onRepay, }: CreditAccountProps): react_jsx_runtime.JSX.Element;
 
 type TabId = 'positions' | 'rebalance';
 type FeaturePreset = 'full';
@@ -701,19 +728,42 @@ interface EarnAccountContextValue {
  */
 declare function useEarnAccount(): EarnAccountContextValue;
 
+interface CreditAccountContextValue {
+    /** The user's credit account address (Safe wallet) */
+    creditAccountAddress: Address | null;
+    /** Whether the credit 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 credit account (gas sponsored) */
+    createAccount: () => Promise<Address>;
+    /** Refresh account status */
+    refetch: () => void;
+}
+/**
+ * Hook to access credit account state and actions
+ */
+declare function useCreditAccount(): CreditAccountContextValue;
+
 declare function ChainSwitcher(): react_jsx_runtime.JSX.Element;
 
 interface CopyableAddressProps {
     /** The full address to copy */
     address: string;
-    /** Label shown above the address (e.g., "Wallet", "Product Account") */
+    /** Label shown on the left (e.g., "Wallet", "Product Account") */
     label?: string;
     /** Show truncated address (default: true) */
     truncate?: boolean;
-    /** Text size class (default: 'text-xs') */
+    /** Display variant: 'card' (bordered box) or 'inline' (plain text) */
+    variant?: 'card' | 'inline';
+    /** Text size class for inline variant (default: 'text-xs') */
     textSize?: string;
 }
-declare function CopyableAddress({ address, label, truncate, textSize, }: CopyableAddressProps): react_jsx_runtime.JSX.Element;
+declare function CopyableAddress({ address, label, truncate, variant, textSize, }: CopyableAddressProps): react_jsx_runtime.JSX.Element;
 
 interface WalletStatusProps {
     /** Show full address or truncated */
@@ -798,6 +848,15 @@ interface EarnAccountGuardProps {
 }
 declare function EarnAccountGuard({ children, loadingComponent, createAccountComponent, }: EarnAccountGuardProps): react_jsx_runtime.JSX.Element;
 
+interface CreditAccountGuardProps {
+    children: ReactNode;
+    /** What to show while checking account status */
+    loadingComponent?: ReactNode;
+    /** Custom component to show when account needs creation */
+    createAccountComponent?: ReactNode;
+}
+declare function CreditAccountGuard({ children, loadingComponent, createAccountComponent, }: CreditAccountGuardProps): react_jsx_runtime.JSX.Element;
+
 type TransferAction = 'deposit' | 'withdraw';
 interface EarnAccountBalanceProps {
     /** Compact mode - just show total USD value */
@@ -812,7 +871,7 @@ interface EarnAccountBalanceHandle {
 }
 declare const EarnAccountBalance: react.ForwardRefExoticComponent<EarnAccountBalanceProps & react.RefAttributes<EarnAccountBalanceHandle>>;
 
-interface TokenBalance {
+interface TokenBalance$1 {
     symbol: string;
     balance: string;
     usdValue: string;
@@ -820,7 +879,7 @@ interface TokenBalance {
 interface AccountBalancesModalProps {
     isOpen: boolean;
     onClose: () => void;
-    balances: TokenBalance[];
+    balances: TokenBalance$1[];
     totalUsdValue: string;
     isLoading?: boolean;
     earnAccountAddress?: string;
@@ -846,6 +905,59 @@ interface SwapFormProps {
 }
 declare function SwapForm({ availableFromTokens, availableToTokens, balances, defaultFromToken, defaultToToken, onSwapSuccess, onSwapError, }: SwapFormProps): react_jsx_runtime.JSX.Element;
 
+interface CreditEvent {
+    eventType: 'supply' | 'withdraw' | 'borrow' | 'repay' | 'liquidation';
+    blockNumber: number;
+    blockTimestamp: string;
+    transactionHash: string;
+    amount: string;
+    symbol: string;
+}
+interface CollateralPosition {
+    token: string;
+    symbol: string;
+    amountSupplied: string | null;
+    usdValue: string | null;
+    supplyApy: string | null;
+    maxLtv: string | null;
+    totalDeposited?: string | null;
+    totalWithdrawn?: string | null;
+    interestEarned?: string | null;
+    events?: CreditEvent[];
+}
+interface DebtPosition {
+    token: string;
+    symbol: string;
+    amountBorrowed: string | null;
+    usdValue: string | null;
+    borrowApy: string | null;
+    totalBorrowed?: string | null;
+    totalRepaid?: string | null;
+    interestPaid?: string | null;
+    events?: CreditEvent[];
+}
+interface AccountSummary {
+    healthFactor: string;
+    totalCollateralUsd: string;
+    totalDebtUsd: string;
+    availableBorrowsUsd: string;
+    ltv: string;
+    emodeCategoryId?: number;
+    emodeLabel?: string | null;
+}
+interface CreditPositionsResponse {
+    collateralPositions: CollateralPosition[];
+    debtPositions: DebtPosition[];
+    accountSummary: AccountSummary;
+    totalUsdValue?: string | null;
+}
+interface TokenBalance {
+    tokenSymbol: string;
+    tokenAddress: string;
+    amount: string;
+    decimals: number;
+}
+
 type SupportedChainId = 'ethereum' | 'base' | 'arbitrum';
 interface ChainConfig {
     id: SupportedChainId;
@@ -856,4 +968,4 @@ interface ChainConfig {
 }
 declare const CHAINS: Record<SupportedChainId, ChainConfig>;
 
-export { AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, CopyableAddress, type CopyableAddressProps, DepositWithdrawForm, EarnAccount, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type EarnAccountProps, type FeaturePreset, type IdleBalance, PnLSummary, type PortfolioPosition, type PortfolioState, type RebalanceAction, type RebalanceActionType, type RebalancePlan, RebalancingWidget, type RebalancingWidgetProps, type SupportedChain, type SupportedChainId, SwapForm, type SwapFormProps, type SwapQuote, type TabConfig, type TabId, type TargetAllocation, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance, TransactionHistory, type TypedDataToSign, type VenueType$1 as VenueType, type WalletAdapter, WalletStatus, themePresets, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, useRebalancingData, useSwapQuote, useTheme };
+export { AccountBalancesModal, type AccountBalancesModalProps, type AccountSummary, ActionModal, ApiProvider, CHAINS, type ChainConfig, ChainSwitcher, type CollateralPosition, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, CopyableAddress, type CopyableAddressProps, CreditAccount, type CreditAccountContextValue, CreditAccountGuard, type CreditAccountProps, type CreditPositionsResponse, type TokenBalance as CreditTokenBalance, type DebtPosition, DepositWithdrawForm, EarnAccount, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type EarnAccountProps, type FeaturePreset, type IdleBalance, PnLSummary, type PortfolioPosition, type PortfolioState, type RebalanceAction, type RebalanceActionType, type RebalancePlan, RebalancingWidget, type RebalancingWidgetProps, type SupportedChain, type SupportedChainId, SwapForm, type SwapFormProps, type SwapQuote, type TabConfig, type TabId, type TargetAllocation, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance$1 as TokenBalance, TransactionHistory, type TypedDataToSign, type VenueType$1 as VenueType, type WalletAdapter, WalletStatus, themePresets, useChain, useCompassApi, useCompassChain, useCompassWallet, useCreditAccount, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, useRebalancingData, useSwapQuote, useTheme };

package/dist/index.d.ts

@@ -429,12 +429,39 @@ interface EarnAccountProps {
      * Valid values: 'ethereum', 'base', 'arbitrum'
      */
     chain?: string;
+    /** Fixed height for the widget container @default '600px' */
+    height?: string;
 }
 
 /**
  * EarnAccount widget - A beautiful banking-style USDC savings account.
  */
-declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketTab, allowedVariableMarkets, allowedFixedMarkets, chain: chainProp, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
+declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketTab, allowedVariableMarkets, allowedFixedMarkets, chain: chainProp, height, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
+
+interface CreditAccountProps {
+    /** Custom title for the header @default "Credit Account" */
+    title?: string;
+    /** Show the header with title and wallet status @default true */
+    showHeader?: boolean;
+    /** Show the "Top Up" button to transfer from wallet @default true */
+    showTopUpButton?: boolean;
+    /** Compact layout with reduced spacing @default false */
+    compact?: boolean;
+    /** Fixed height for the widget container @default "600px" */
+    height?: string;
+    /** Lock the widget to a specific chain @default undefined (use context) */
+    chain?: string;
+    /** Restrict which tokens can be used as collateral (undefined = all) */
+    allowedCollateralTokens?: string[];
+    /** Restrict which tokens can be used for borrowing (undefined = all) */
+    allowedDebtTokens?: string[];
+    /** Callback after successful borrow */
+    onBorrow?: (txHash: string) => void;
+    /** Callback after successful repay */
+    onRepay?: (txHash: string) => void;
+}
+
+declare function CreditAccount({ title, showHeader, showTopUpButton, compact, height, chain: chainProp, allowedCollateralTokens, allowedDebtTokens, onBorrow: _onBorrow, onRepay: _onRepay, }: CreditAccountProps): react_jsx_runtime.JSX.Element;
 
 type TabId = 'positions' | 'rebalance';
 type FeaturePreset = 'full';
@@ -701,19 +728,42 @@ interface EarnAccountContextValue {
  */
 declare function useEarnAccount(): EarnAccountContextValue;
 
+interface CreditAccountContextValue {
+    /** The user's credit account address (Safe wallet) */
+    creditAccountAddress: Address | null;
+    /** Whether the credit 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 credit account (gas sponsored) */
+    createAccount: () => Promise<Address>;
+    /** Refresh account status */
+    refetch: () => void;
+}
+/**
+ * Hook to access credit account state and actions
+ */
+declare function useCreditAccount(): CreditAccountContextValue;
+
 declare function ChainSwitcher(): react_jsx_runtime.JSX.Element;
 
 interface CopyableAddressProps {
     /** The full address to copy */
     address: string;
-    /** Label shown above the address (e.g., "Wallet", "Product Account") */
+    /** Label shown on the left (e.g., "Wallet", "Product Account") */
     label?: string;
     /** Show truncated address (default: true) */
     truncate?: boolean;
-    /** Text size class (default: 'text-xs') */
+    /** Display variant: 'card' (bordered box) or 'inline' (plain text) */
+    variant?: 'card' | 'inline';
+    /** Text size class for inline variant (default: 'text-xs') */
     textSize?: string;
 }
-declare function CopyableAddress({ address, label, truncate, textSize, }: CopyableAddressProps): react_jsx_runtime.JSX.Element;
+declare function CopyableAddress({ address, label, truncate, variant, textSize, }: CopyableAddressProps): react_jsx_runtime.JSX.Element;
 
 interface WalletStatusProps {
     /** Show full address or truncated */
@@ -798,6 +848,15 @@ interface EarnAccountGuardProps {
 }
 declare function EarnAccountGuard({ children, loadingComponent, createAccountComponent, }: EarnAccountGuardProps): react_jsx_runtime.JSX.Element;
 
+interface CreditAccountGuardProps {
+    children: ReactNode;
+    /** What to show while checking account status */
+    loadingComponent?: ReactNode;
+    /** Custom component to show when account needs creation */
+    createAccountComponent?: ReactNode;
+}
+declare function CreditAccountGuard({ children, loadingComponent, createAccountComponent, }: CreditAccountGuardProps): react_jsx_runtime.JSX.Element;
+
 type TransferAction = 'deposit' | 'withdraw';
 interface EarnAccountBalanceProps {
     /** Compact mode - just show total USD value */
@@ -812,7 +871,7 @@ interface EarnAccountBalanceHandle {
 }
 declare const EarnAccountBalance: react.ForwardRefExoticComponent<EarnAccountBalanceProps & react.RefAttributes<EarnAccountBalanceHandle>>;
 
-interface TokenBalance {
+interface TokenBalance$1 {
     symbol: string;
     balance: string;
     usdValue: string;
@@ -820,7 +879,7 @@ interface TokenBalance {
 interface AccountBalancesModalProps {
     isOpen: boolean;
     onClose: () => void;
-    balances: TokenBalance[];
+    balances: TokenBalance$1[];
     totalUsdValue: string;
     isLoading?: boolean;
     earnAccountAddress?: string;
@@ -846,6 +905,59 @@ interface SwapFormProps {
 }
 declare function SwapForm({ availableFromTokens, availableToTokens, balances, defaultFromToken, defaultToToken, onSwapSuccess, onSwapError, }: SwapFormProps): react_jsx_runtime.JSX.Element;
 
+interface CreditEvent {
+    eventType: 'supply' | 'withdraw' | 'borrow' | 'repay' | 'liquidation';
+    blockNumber: number;
+    blockTimestamp: string;
+    transactionHash: string;
+    amount: string;
+    symbol: string;
+}
+interface CollateralPosition {
+    token: string;
+    symbol: string;
+    amountSupplied: string | null;
+    usdValue: string | null;
+    supplyApy: string | null;
+    maxLtv: string | null;
+    totalDeposited?: string | null;
+    totalWithdrawn?: string | null;
+    interestEarned?: string | null;
+    events?: CreditEvent[];
+}
+interface DebtPosition {
+    token: string;
+    symbol: string;
+    amountBorrowed: string | null;
+    usdValue: string | null;
+    borrowApy: string | null;
+    totalBorrowed?: string | null;
+    totalRepaid?: string | null;
+    interestPaid?: string | null;
+    events?: CreditEvent[];
+}
+interface AccountSummary {
+    healthFactor: string;
+    totalCollateralUsd: string;
+    totalDebtUsd: string;
+    availableBorrowsUsd: string;
+    ltv: string;
+    emodeCategoryId?: number;
+    emodeLabel?: string | null;
+}
+interface CreditPositionsResponse {
+    collateralPositions: CollateralPosition[];
+    debtPositions: DebtPosition[];
+    accountSummary: AccountSummary;
+    totalUsdValue?: string | null;
+}
+interface TokenBalance {
+    tokenSymbol: string;
+    tokenAddress: string;
+    amount: string;
+    decimals: number;
+}
+
 type SupportedChainId = 'ethereum' | 'base' | 'arbitrum';
 interface ChainConfig {
     id: SupportedChainId;
@@ -856,4 +968,4 @@ interface ChainConfig {
 }
 declare const CHAINS: Record<SupportedChainId, ChainConfig>;
 
-export { AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, CHAINS, type ChainConfig, ChainSwitcher, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, CopyableAddress, type CopyableAddressProps, DepositWithdrawForm, EarnAccount, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type EarnAccountProps, type FeaturePreset, type IdleBalance, PnLSummary, type PortfolioPosition, type PortfolioState, type RebalanceAction, type RebalanceActionType, type RebalancePlan, RebalancingWidget, type RebalancingWidgetProps, type SupportedChain, type SupportedChainId, SwapForm, type SwapFormProps, type SwapQuote, type TabConfig, type TabId, type TargetAllocation, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance, TransactionHistory, type TypedDataToSign, type VenueType$1 as VenueType, type WalletAdapter, WalletStatus, themePresets, useChain, useCompassApi, useCompassChain, useCompassWallet, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, useRebalancingData, useSwapQuote, useTheme };
+export { AccountBalancesModal, type AccountBalancesModalProps, type AccountSummary, ActionModal, ApiProvider, CHAINS, type ChainConfig, ChainSwitcher, type CollateralPosition, CompassEarnWidget, type CompassEarnWidgetProps, CompassProvider, type CompassProviderProps, type CompassTheme, CopyableAddress, type CopyableAddressProps, CreditAccount, type CreditAccountContextValue, CreditAccountGuard, type CreditAccountProps, type CreditPositionsResponse, type TokenBalance as CreditTokenBalance, type DebtPosition, DepositWithdrawForm, EarnAccount, EarnAccountBalance, type EarnAccountBalanceProps, type EarnAccountContextValue, EarnAccountGuard, type EarnAccountProps, type FeaturePreset, type IdleBalance, PnLSummary, type PortfolioPosition, type PortfolioState, type RebalanceAction, type RebalanceActionType, type RebalancePlan, RebalancingWidget, type RebalancingWidgetProps, type SupportedChain, type SupportedChainId, SwapForm, type SwapFormProps, type SwapQuote, type TabConfig, type TabId, type TargetAllocation, type ThemeInput, type ThemeMode, type ThemePresetName, ThemeProvider, type TokenBalance$1 as TokenBalance, TransactionHistory, type TypedDataToSign, type VenueType$1 as VenueType, type WalletAdapter, WalletStatus, themePresets, useChain, useCompassApi, useCompassChain, useCompassWallet, useCreditAccount, useEarnAccount, useEmbeddableApi, useEmbeddableWallet, useRebalancingData, useSwapQuote, useTheme };