@compass-labs/widgets

Embeddable DeFi widgets for React applications, powered by Compass Labs.

Installation

npm install @compass-labs/widgets

Quick Start

import { CompassProvider, VaultsList } from '@compass-labs/widgets';
import '@compass-labs/widgets/styles.css';

function App() {
  return (
    <CompassProvider
      apiKey="your-compass-api-key"
      defaultChain="base"
    >
      <VaultsList
        onDeposit={(vault, amount, txHash) => {
          console.log('Deposited:', amount, 'to', vault.name);
        }}
      />
    </CompassProvider>
  );
}

Components

VaultsList

Display yield-bearing vaults from protocols like Morpho.

<VaultsList
  showApy={true}
  showTvl={true}
  showUserPosition={true}
  assetFilter={['USDC', 'ETH', 'WBTC']}
  onVaultSelect={(vault) => console.log('Selected:', vault)}
  onDeposit={(vault, amount, txHash) => console.log('Deposited')}
  onWithdraw={(vault, amount, txHash) => console.log('Withdrew')}
/>

AaveMarketsList

Display Aave V3 lending markets.

<AaveMarketsList
  showApy={true}
  showUserPosition={true}
  onMarketSelect={(market) => console.log('Selected:', market)}
  onSupply={(market, amount, txHash) => console.log('Supplied')}
  onWithdraw={(market, amount, txHash) => console.log('Withdrew')}
/>

PendleMarketsList

Display Pendle fixed-yield markets.

<PendleMarketsList
  showApy={true}
  showExpiry={true}
  showTvl={true}
  onMarketSelect={(market) => console.log('Selected:', market)}
  onDeposit={(market, amount, txHash) => console.log('Deposited')}
  onWithdraw={(market, amount, txHash) => console.log('Withdrew')}
/>

Theming

Customize the look by providing a theme object:

<CompassProvider
  apiKey="your-api-key"
  defaultChain="base"
  theme={{
    colors: {
      primary: '#6366f1',
      background: '#0a0a0f',
      surface: '#1a1a24',
      border: '#2a2a3a',
      text: {
        primary: '#ffffff',
        secondary: '#a0a0a0',
        tertiary: '#666666',
      },
      success: '#22c55e',
      warning: '#eab308',
      error: '#ef4444',
    },
    borderRadius: '12px',
    fontFamily: 'Inter, system-ui, sans-serif',
  }}
>
  {/* widgets */}
</CompassProvider>

Or use CSS variables directly:

.compass-widget {
  --compass-color-primary: #6366f1;
  --compass-color-background: #0a0a0f;
  --compass-color-surface: #1a1a24;
  --compass-color-border: #2a2a3a;
  --compass-color-text-primary: #ffffff;
  --compass-color-text-secondary: #a0a0a0;
  --compass-border-radius: 12px;
  --compass-font-family: 'Inter', system-ui, sans-serif;
}

Requirements

• React 18+ or 19+
• @privy-io/react-auth for wallet connection
• @tanstack/react-query for data fetching

Documentation

Full documentation available at docs.compasslabs.ai.

License

MIT