@compass-labs/widgets 0.1.0

package/README.md

@@ -0,0 +1,138 @@
+# @compass-labs/widgets
+
+Embeddable DeFi widgets for React applications, powered by Compass Labs.
+
+## Installation
+
+```bash
+npm install @compass-labs/widgets
+```
+
+## Quick Start
+
+```tsx
+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.
+
+```tsx
+<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.
+
+```tsx
+<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.
+
+```tsx
+<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:
+
+```tsx
+<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:
+
+```css
+.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](https://docs.compasslabs.ai/v2/Products/Widgets).
+
+## License
+
+MIT