@compass-labs/widgets 0.1.33 → 0.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -429,12 +429,39 @@ interface EarnAccountProps {
429
429
  * Valid values: 'ethereum', 'base', 'arbitrum'
430
430
  */
431
431
  chain?: string;
432
+ /** Fixed height for the widget container @default '600px' */
433
+ height?: string;
432
434
  }
433
435
 
434
436
  /**
435
437
  * EarnAccount widget - A beautiful banking-style USDC savings account.
436
438
  */
437
- declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketTab, allowedVariableMarkets, allowedFixedMarkets, chain: chainProp, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
439
+ declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketTab, allowedVariableMarkets, allowedFixedMarkets, chain: chainProp, height, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
440
+
441
+ interface CreditAccountProps {
442
+ /** Custom title for the header @default "Credit Account" */
443
+ title?: string;
444
+ /** Show the header with title and wallet status @default true */
445
+ showHeader?: boolean;
446
+ /** Show the "Top Up" button to transfer from wallet @default true */
447
+ showTopUpButton?: boolean;
448
+ /** Compact layout with reduced spacing @default false */
449
+ compact?: boolean;
450
+ /** Fixed height for the widget container @default "600px" */
451
+ height?: string;
452
+ /** Lock the widget to a specific chain @default undefined (use context) */
453
+ chain?: string;
454
+ /** Restrict which tokens can be used as collateral (undefined = all) */
455
+ allowedCollateralTokens?: string[];
456
+ /** Restrict which tokens can be used for borrowing (undefined = all) */
457
+ allowedDebtTokens?: string[];
458
+ /** Callback after successful borrow */
459
+ onBorrow?: (txHash: string) => void;
460
+ /** Callback after successful repay */
461
+ onRepay?: (txHash: string) => void;
462
+ }
463
+
464
+ declare function CreditAccount({ title, showHeader, showTopUpButton, compact, height, chain: chainProp, allowedCollateralTokens, allowedDebtTokens, onBorrow: _onBorrow, onRepay: _onRepay, }: CreditAccountProps): react_jsx_runtime.JSX.Element;
438
465
 
439
466
  type TabId = 'positions' | 'rebalance';
440
467
  type FeaturePreset = 'full';
@@ -701,8 +728,43 @@ interface EarnAccountContextValue {
701
728
  */
702
729
  declare function useEarnAccount(): EarnAccountContextValue;
703
730
 
731
+ interface CreditAccountContextValue {
732
+ /** The user's credit account address (Safe wallet) */
733
+ creditAccountAddress: Address | null;
734
+ /** Whether the credit account has been deployed on-chain */
735
+ isDeployed: boolean;
736
+ /** Whether we're checking the account status */
737
+ isChecking: boolean;
738
+ /** Whether we're creating the account */
739
+ isCreating: boolean;
740
+ /** Error from checking or creating */
741
+ error: Error | null;
742
+ /** Create the credit account (gas sponsored) */
743
+ createAccount: () => Promise<Address>;
744
+ /** Refresh account status */
745
+ refetch: () => void;
746
+ }
747
+ /**
748
+ * Hook to access credit account state and actions
749
+ */
750
+ declare function useCreditAccount(): CreditAccountContextValue;
751
+
704
752
  declare function ChainSwitcher(): react_jsx_runtime.JSX.Element;
705
753
 
754
+ interface CopyableAddressProps {
755
+ /** The full address to copy */
756
+ address: string;
757
+ /** Label shown on the left (e.g., "Wallet", "Product Account") */
758
+ label?: string;
759
+ /** Show truncated address (default: true) */
760
+ truncate?: boolean;
761
+ /** Display variant: 'card' (bordered box) or 'inline' (plain text) */
762
+ variant?: 'card' | 'inline';
763
+ /** Text size class for inline variant (default: 'text-xs') */
764
+ textSize?: string;
765
+ }
766
+ declare function CopyableAddress({ address, label, truncate, variant, textSize, }: CopyableAddressProps): react_jsx_runtime.JSX.Element;
767
+
706
768
  interface WalletStatusProps {
707
769
  /** Show full address or truncated */
708
770
  showFullAddress?: boolean;
@@ -786,6 +848,15 @@ interface EarnAccountGuardProps {
786
848
  }
787
849
  declare function EarnAccountGuard({ children, loadingComponent, createAccountComponent, }: EarnAccountGuardProps): react_jsx_runtime.JSX.Element;
788
850
 
851
+ interface CreditAccountGuardProps {
852
+ children: ReactNode;
853
+ /** What to show while checking account status */
854
+ loadingComponent?: ReactNode;
855
+ /** Custom component to show when account needs creation */
856
+ createAccountComponent?: ReactNode;
857
+ }
858
+ declare function CreditAccountGuard({ children, loadingComponent, createAccountComponent, }: CreditAccountGuardProps): react_jsx_runtime.JSX.Element;
859
+
789
860
  type TransferAction = 'deposit' | 'withdraw';
790
861
  interface EarnAccountBalanceProps {
791
862
  /** Compact mode - just show total USD value */
@@ -800,7 +871,7 @@ interface EarnAccountBalanceHandle {
800
871
  }
801
872
  declare const EarnAccountBalance: react.ForwardRefExoticComponent<EarnAccountBalanceProps & react.RefAttributes<EarnAccountBalanceHandle>>;
802
873
 
803
- interface TokenBalance {
874
+ interface TokenBalance$1 {
804
875
  symbol: string;
805
876
  balance: string;
806
877
  usdValue: string;
@@ -808,12 +879,13 @@ interface TokenBalance {
808
879
  interface AccountBalancesModalProps {
809
880
  isOpen: boolean;
810
881
  onClose: () => void;
811
- balances: TokenBalance[];
882
+ balances: TokenBalance$1[];
812
883
  totalUsdValue: string;
813
884
  isLoading?: boolean;
814
885
  earnAccountAddress?: string;
886
+ walletAddress?: string;
815
887
  }
816
- declare function AccountBalancesModal({ isOpen, onClose, balances, totalUsdValue, isLoading, }: AccountBalancesModalProps): react_jsx_runtime.JSX.Element;
888
+ declare function AccountBalancesModal({ isOpen, onClose, balances, totalUsdValue, isLoading, earnAccountAddress, walletAddress, }: AccountBalancesModalProps): react_jsx_runtime.JSX.Element;
817
889
 
818
890
  interface SwapFormProps {
819
891
  /** Tokens the user holds (shown in "from" dropdown) */
@@ -833,6 +905,59 @@ interface SwapFormProps {
833
905
  }
834
906
  declare function SwapForm({ availableFromTokens, availableToTokens, balances, defaultFromToken, defaultToToken, onSwapSuccess, onSwapError, }: SwapFormProps): react_jsx_runtime.JSX.Element;
835
907
 
908
+ interface CreditEvent {
909
+ eventType: 'supply' | 'withdraw' | 'borrow' | 'repay' | 'liquidation';
910
+ blockNumber: number;
911
+ blockTimestamp: string;
912
+ transactionHash: string;
913
+ amount: string;
914
+ symbol: string;
915
+ }
916
+ interface CollateralPosition {
917
+ token: string;
918
+ symbol: string;
919
+ amountSupplied: string | null;
920
+ usdValue: string | null;
921
+ supplyApy: string | null;
922
+ maxLtv: string | null;
923
+ totalDeposited?: string | null;
924
+ totalWithdrawn?: string | null;
925
+ interestEarned?: string | null;
926
+ events?: CreditEvent[];
927
+ }
928
+ interface DebtPosition {
929
+ token: string;
930
+ symbol: string;
931
+ amountBorrowed: string | null;
932
+ usdValue: string | null;
933
+ borrowApy: string | null;
934
+ totalBorrowed?: string | null;
935
+ totalRepaid?: string | null;
936
+ interestPaid?: string | null;
937
+ events?: CreditEvent[];
938
+ }
939
+ interface AccountSummary {
940
+ healthFactor: string;
941
+ totalCollateralUsd: string;
942
+ totalDebtUsd: string;
943
+ availableBorrowsUsd: string;
944
+ ltv: string;
945
+ emodeCategoryId?: number;
946
+ emodeLabel?: string | null;
947
+ }
948
+ interface CreditPositionsResponse {
949
+ collateralPositions: CollateralPosition[];
950
+ debtPositions: DebtPosition[];
951
+ accountSummary: AccountSummary;
952
+ totalUsdValue?: string | null;
953
+ }
954
+ interface TokenBalance {
955
+ tokenSymbol: string;
956
+ tokenAddress: string;
957
+ amount: string;
958
+ decimals: number;
959
+ }
960
+
836
961
  type SupportedChainId = 'ethereum' | 'base' | 'arbitrum';
837
962
  interface ChainConfig {
838
963
  id: SupportedChainId;
@@ -843,4 +968,4 @@ interface ChainConfig {
843
968
  }
844
969
  declare const CHAINS: Record<SupportedChainId, ChainConfig>;
845
970
 
846
- export { AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, 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 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 };
971
+ 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 CHANGED
@@ -429,12 +429,39 @@ interface EarnAccountProps {
429
429
  * Valid values: 'ethereum', 'base', 'arbitrum'
430
430
  */
431
431
  chain?: string;
432
+ /** Fixed height for the widget container @default '600px' */
433
+ height?: string;
432
434
  }
433
435
 
434
436
  /**
435
437
  * EarnAccount widget - A beautiful banking-style USDC savings account.
436
438
  */
437
- declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketTab, allowedVariableMarkets, allowedFixedMarkets, chain: chainProp, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
439
+ declare function EarnAccount({ showHeader, showInterestRate, showTopUpButton, showTrustBadge, compact, title, onDeposit, onWithdraw, defaultMarketTab, allowedVariableMarkets, allowedFixedMarkets, chain: chainProp, height, }: EarnAccountProps): react_jsx_runtime.JSX.Element;
440
+
441
+ interface CreditAccountProps {
442
+ /** Custom title for the header @default "Credit Account" */
443
+ title?: string;
444
+ /** Show the header with title and wallet status @default true */
445
+ showHeader?: boolean;
446
+ /** Show the "Top Up" button to transfer from wallet @default true */
447
+ showTopUpButton?: boolean;
448
+ /** Compact layout with reduced spacing @default false */
449
+ compact?: boolean;
450
+ /** Fixed height for the widget container @default "600px" */
451
+ height?: string;
452
+ /** Lock the widget to a specific chain @default undefined (use context) */
453
+ chain?: string;
454
+ /** Restrict which tokens can be used as collateral (undefined = all) */
455
+ allowedCollateralTokens?: string[];
456
+ /** Restrict which tokens can be used for borrowing (undefined = all) */
457
+ allowedDebtTokens?: string[];
458
+ /** Callback after successful borrow */
459
+ onBorrow?: (txHash: string) => void;
460
+ /** Callback after successful repay */
461
+ onRepay?: (txHash: string) => void;
462
+ }
463
+
464
+ declare function CreditAccount({ title, showHeader, showTopUpButton, compact, height, chain: chainProp, allowedCollateralTokens, allowedDebtTokens, onBorrow: _onBorrow, onRepay: _onRepay, }: CreditAccountProps): react_jsx_runtime.JSX.Element;
438
465
 
439
466
  type TabId = 'positions' | 'rebalance';
440
467
  type FeaturePreset = 'full';
@@ -701,8 +728,43 @@ interface EarnAccountContextValue {
701
728
  */
702
729
  declare function useEarnAccount(): EarnAccountContextValue;
703
730
 
731
+ interface CreditAccountContextValue {
732
+ /** The user's credit account address (Safe wallet) */
733
+ creditAccountAddress: Address | null;
734
+ /** Whether the credit account has been deployed on-chain */
735
+ isDeployed: boolean;
736
+ /** Whether we're checking the account status */
737
+ isChecking: boolean;
738
+ /** Whether we're creating the account */
739
+ isCreating: boolean;
740
+ /** Error from checking or creating */
741
+ error: Error | null;
742
+ /** Create the credit account (gas sponsored) */
743
+ createAccount: () => Promise<Address>;
744
+ /** Refresh account status */
745
+ refetch: () => void;
746
+ }
747
+ /**
748
+ * Hook to access credit account state and actions
749
+ */
750
+ declare function useCreditAccount(): CreditAccountContextValue;
751
+
704
752
  declare function ChainSwitcher(): react_jsx_runtime.JSX.Element;
705
753
 
754
+ interface CopyableAddressProps {
755
+ /** The full address to copy */
756
+ address: string;
757
+ /** Label shown on the left (e.g., "Wallet", "Product Account") */
758
+ label?: string;
759
+ /** Show truncated address (default: true) */
760
+ truncate?: boolean;
761
+ /** Display variant: 'card' (bordered box) or 'inline' (plain text) */
762
+ variant?: 'card' | 'inline';
763
+ /** Text size class for inline variant (default: 'text-xs') */
764
+ textSize?: string;
765
+ }
766
+ declare function CopyableAddress({ address, label, truncate, variant, textSize, }: CopyableAddressProps): react_jsx_runtime.JSX.Element;
767
+
706
768
  interface WalletStatusProps {
707
769
  /** Show full address or truncated */
708
770
  showFullAddress?: boolean;
@@ -786,6 +848,15 @@ interface EarnAccountGuardProps {
786
848
  }
787
849
  declare function EarnAccountGuard({ children, loadingComponent, createAccountComponent, }: EarnAccountGuardProps): react_jsx_runtime.JSX.Element;
788
850
 
851
+ interface CreditAccountGuardProps {
852
+ children: ReactNode;
853
+ /** What to show while checking account status */
854
+ loadingComponent?: ReactNode;
855
+ /** Custom component to show when account needs creation */
856
+ createAccountComponent?: ReactNode;
857
+ }
858
+ declare function CreditAccountGuard({ children, loadingComponent, createAccountComponent, }: CreditAccountGuardProps): react_jsx_runtime.JSX.Element;
859
+
789
860
  type TransferAction = 'deposit' | 'withdraw';
790
861
  interface EarnAccountBalanceProps {
791
862
  /** Compact mode - just show total USD value */
@@ -800,7 +871,7 @@ interface EarnAccountBalanceHandle {
800
871
  }
801
872
  declare const EarnAccountBalance: react.ForwardRefExoticComponent<EarnAccountBalanceProps & react.RefAttributes<EarnAccountBalanceHandle>>;
802
873
 
803
- interface TokenBalance {
874
+ interface TokenBalance$1 {
804
875
  symbol: string;
805
876
  balance: string;
806
877
  usdValue: string;
@@ -808,12 +879,13 @@ interface TokenBalance {
808
879
  interface AccountBalancesModalProps {
809
880
  isOpen: boolean;
810
881
  onClose: () => void;
811
- balances: TokenBalance[];
882
+ balances: TokenBalance$1[];
812
883
  totalUsdValue: string;
813
884
  isLoading?: boolean;
814
885
  earnAccountAddress?: string;
886
+ walletAddress?: string;
815
887
  }
816
- declare function AccountBalancesModal({ isOpen, onClose, balances, totalUsdValue, isLoading, }: AccountBalancesModalProps): react_jsx_runtime.JSX.Element;
888
+ declare function AccountBalancesModal({ isOpen, onClose, balances, totalUsdValue, isLoading, earnAccountAddress, walletAddress, }: AccountBalancesModalProps): react_jsx_runtime.JSX.Element;
817
889
 
818
890
  interface SwapFormProps {
819
891
  /** Tokens the user holds (shown in "from" dropdown) */
@@ -833,6 +905,59 @@ interface SwapFormProps {
833
905
  }
834
906
  declare function SwapForm({ availableFromTokens, availableToTokens, balances, defaultFromToken, defaultToToken, onSwapSuccess, onSwapError, }: SwapFormProps): react_jsx_runtime.JSX.Element;
835
907
 
908
+ interface CreditEvent {
909
+ eventType: 'supply' | 'withdraw' | 'borrow' | 'repay' | 'liquidation';
910
+ blockNumber: number;
911
+ blockTimestamp: string;
912
+ transactionHash: string;
913
+ amount: string;
914
+ symbol: string;
915
+ }
916
+ interface CollateralPosition {
917
+ token: string;
918
+ symbol: string;
919
+ amountSupplied: string | null;
920
+ usdValue: string | null;
921
+ supplyApy: string | null;
922
+ maxLtv: string | null;
923
+ totalDeposited?: string | null;
924
+ totalWithdrawn?: string | null;
925
+ interestEarned?: string | null;
926
+ events?: CreditEvent[];
927
+ }
928
+ interface DebtPosition {
929
+ token: string;
930
+ symbol: string;
931
+ amountBorrowed: string | null;
932
+ usdValue: string | null;
933
+ borrowApy: string | null;
934
+ totalBorrowed?: string | null;
935
+ totalRepaid?: string | null;
936
+ interestPaid?: string | null;
937
+ events?: CreditEvent[];
938
+ }
939
+ interface AccountSummary {
940
+ healthFactor: string;
941
+ totalCollateralUsd: string;
942
+ totalDebtUsd: string;
943
+ availableBorrowsUsd: string;
944
+ ltv: string;
945
+ emodeCategoryId?: number;
946
+ emodeLabel?: string | null;
947
+ }
948
+ interface CreditPositionsResponse {
949
+ collateralPositions: CollateralPosition[];
950
+ debtPositions: DebtPosition[];
951
+ accountSummary: AccountSummary;
952
+ totalUsdValue?: string | null;
953
+ }
954
+ interface TokenBalance {
955
+ tokenSymbol: string;
956
+ tokenAddress: string;
957
+ amount: string;
958
+ decimals: number;
959
+ }
960
+
836
961
  type SupportedChainId = 'ethereum' | 'base' | 'arbitrum';
837
962
  interface ChainConfig {
838
963
  id: SupportedChainId;
@@ -843,4 +968,4 @@ interface ChainConfig {
843
968
  }
844
969
  declare const CHAINS: Record<SupportedChainId, ChainConfig>;
845
970
 
846
- export { AccountBalancesModal, type AccountBalancesModalProps, ActionModal, ApiProvider, 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 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 };
971
+ 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 };