npm package: @predigy/edge-components
Description: Embeddable React components for EDGE by Predigy prediction markets
Author: Predigy LLC
Latest version: 1.0.0

# @predigy/edge-components

Embeddable React components for **EDGE by Predigy** prediction markets. Drop prediction market functionality into your existing sportsbook app in minutes.

## Installation

```bash
npm install @predigy/edge-components
```

### Peer Dependencies

Your app needs these (you probably already have them):

```json
{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0",
  "@tanstack/react-query": ">=5.0.0"
}
```

## Quick Start

Wrap your app (or a section of it) with `EdgeProvider`. All child components get automatic API access and theming.

```tsx
import { EdgeProvider, MarketList, caesars } from '@predigy/edge-components';

function App() {
  return (
    <EdgeProvider
      apiKey="your-operator-api-key"
      baseUrl="https://edge-production-7b77.up.railway.app"
      userId="player-123"
      theme={caesars}
    >
      <MarketList
        categories={['NBA', 'NFL']}
        onMarketClick={(m) => console.log('Selected:', m.title)}
      />
    </EdgeProvider>
  );
}
```

That's it. Ten lines to a working prediction market UI.

## Components

### MarketCard

Displays a single prediction market with live prices, probability bar, and status badge.

```tsx
import { MarketCard } from '@predigy/edge-components';

<MarketCard marketId="mkt_abc123" onClick={(m) => openTrade(m)} />

// Or pass market data directly:
<MarketCard market={marketData} compact />
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `marketId` | `string` | — | Fetch market by ID |
| `market` | `Market` | — | Pass market data directly (skips fetch) |
| `onClick` | `(market: Market) => void` | — | Click handler |
| `showVolume` | `boolean` | `true` | Show trading volume |
| `compact` | `boolean` | `false` | Smaller card variant |

### MarketList

Filterable grid of market cards with category pills.

```tsx
import { MarketList } from '@predigy/edge-components';

<MarketList
  categories={['NBA', 'NFL', 'MLB']}
  status="OPEN"
  layout="grid"
  maxItems={12}
  onMarketClick={(m) => navigate(`/market/${m.external_id}`)}
/>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `categories` | `string[]` | — | Category filter pills |
| `status` | `string` | `'OPEN'` | Filter by market status |
| `maxItems` | `number` | — | Limit displayed markets |
| `onMarketClick` | `(market: Market) => void` | — | Click handler per card |
| `layout` | `'grid' \| 'list'` | `'grid'` | Layout mode |

### TradePanel

Full trade execution form with side toggle, amount input, live quotes, and confirmation.

```tsx
import { TradePanel } from '@predigy/edge-components';

<TradePanel
  marketId="mkt_abc123"
  defaultSide="YES"
  quickAmounts={[25, 50, 100, 500]}
  onTradeComplete={(trade) => toast.success(`Bought ${trade.contracts} contracts`)}
  onError={(err) => toast.error(err.message)}
/>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `marketId` | `string` | — | **(required)** Market to trade on |
| `defaultSide` | `'YES' \| 'NO'` | `'YES'` | Initial side selection |
| `quickAmounts` | `number[]` | `[25, 50, 100, 250]` | Quick-select dollar buttons |
| `onTradeComplete` | `(trade: TradeResponse) => void` | — | Success callback |
| `onError` | `(error: Error) => void` | — | Error callback |

### Portfolio

Displays the user's open positions with P&L summary.

```tsx
import { Portfolio } from '@predigy/edge-components';

<Portfolio
  showSummary
  onPositionClick={(pos) => navigate(`/market/${pos.market_id}`)}
/>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `showSummary` | `boolean` | `true` | Show balance/P&L summary bar |
| `onPositionClick` | `(position: Position) => void` | — | Click handler for positions |

### DepthChart

Visual liquidity depth chart for a market.

```tsx
import { DepthChart } from '@predigy/edge-components';

<DepthChart marketId="mkt_abc123" height={400} />
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `marketId` | `string` | — | **(required)** Market ID |
| `height` | `number` | `300` | Chart height in pixels |

### AdminPanel

Market creation and settlement forms for operator admin interfaces.

```tsx
import { AdminPanel } from '@predigy/edge-components';

<AdminPanel
  onMarketCreated={(market) => console.log('Created:', market.external_id)}
  onMarketSettled={(result) => console.log('Settled:', result)}
/>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onMarketCreated` | `(market: Market) => void` | — | Post-creation callback |
| `onMarketSettled` | `(result: Record<string, unknown>) => void` | — | Post-settlement callback |

### RevenueDisplay

Platform revenue and stats dashboard.

```tsx
import { RevenueDisplay } from '@predigy/edge-components';

<RevenueDisplay compact={false} />
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `compact` | `boolean` | `false` | Compact layout |

## Theming

Every component reads colors and fonts from the nearest `EdgeProvider`. Four built-in presets are included.

### Built-in Themes

| Theme | Import | Look |
|-------|--------|------|
| `generic` | Default | Predigy indigo/purple on dark |
| `caesars` | `import { caesars }` | Gold/black (Caesars Sportsbook) |
| `draftkings` | `import { draftkings }` | Green/black (DraftKings) |
| `fanduel` | `import { fanduel }` | Blue/dark (FanDuel) |

```tsx
import { EdgeProvider, caesars } from '@predigy/edge-components';

<EdgeProvider theme={caesars} /* ... */ >
```

### Custom Theme

Spread a preset and override what you need:

```tsx
import { generic } from '@predigy/edge-components';
import type { EdgeTheme } from '@predigy/edge-components';

const myTheme: EdgeTheme = {
  ...generic,
  name: 'my-brand',
  colors: {
    ...generic.colors,
    primary: '#FF6600',
    primaryHover: '#CC5200',
    accent: '#FF8833',
  },
  fonts: {
    body: "'Your Font', sans-serif",
    heading: "'Your Display Font', sans-serif",
  },
};

<EdgeProvider theme={myTheme} /* ... */ >
```

All components use CSS custom properties (`--edge-color-*`, `--edge-font-*`) under the hood, so theming is instant with zero re-renders.

## Hooks

For custom UI builders who want data without our components:

| Hook | Returns | Description |
|------|---------|-------------|
| `useEdgeContext()` | `EdgeContextValue` | Access provider config (API key, theme, etc.) |
| `useEdgeMarkets(options?)` | `{ data, isLoading, ... }` | Fetch market list with filters |
| `useEdgeMarket(id, options?)` | `{ data, isLoading, ... }` | Fetch single market |
| `useEdgeQuote({ marketId, side, amount })` | `{ data, isLoading, ... }` | Live trade quote |
| `useEdgeTrade(marketId)` | `{ trade, sell }` | Trade and sell mutations |
| `useEdgePortfolio(options?)` | `{ data, isLoading, ... }` | User's positions and balance |
| `useEdgeStats(options?)` | `{ data, isLoading, ... }` | Platform-wide statistics |
| `useEdgeRevenue(options?)` | `{ data, isLoading, ... }` | Revenue and fee data |
| `useEdgeCreateMarket()` | `{ mutate, isPending, ... }` | Create a market (mutation) |
| `useEdgeSettleMarket()` | `{ mutate, isPending, ... }` | Settle a market (mutation) |

All query hooks accept `{ enabled?, refetchInterval? }` options. All return standard TanStack Query results.

## Formatters

Utility functions exported for your own UI:

```tsx
import { formatCurrency, formatPrice, formatPercent } from '@predigy/edge-components';

formatCurrency(1234.5);    // "$1,234.50"
formatPrice(0.6523);       // "65¢"
formatPercent(51.7);       // "+51.7%"
formatContracts(42.789);   // "42.8"
formatFeeRate(0.035);      // "3.50%"
formatCompact(1500000);    // "$1.5M"
```

## TypeScript

Full type definitions are included. Key exports:

```tsx
import type {
  EdgeTheme,
  EdgeProviderProps,
  EdgeContextValue,
  MarketCardProps,
  MarketListProps,
  TradePanelProps,
  PortfolioProps,
  DepthChartProps,
  AdminPanelProps,
  RevenueDisplayProps,
} from '@predigy/edge-components';
```

## Browser Support

Requires any browser supporting ES2020+ (all modern browsers, no IE11).

## Support

- Documentation: [github.com/predigy/edge](https://github.com/predigy/edge)
- Contact: engineering@predigy.io
- License: MIT