@predigy/edge-components

Embeddable React components for EDGE by Predigy prediction markets. Drop prediction market functionality into your existing sportsbook app in minutes.

Installation

npm install @predigy/edge-components

Peer Dependencies

Your app needs these (you probably already have them):

{
  "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.

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.

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.

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.

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.

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.

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.

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.

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) |

import { EdgeProvider, caesars } from '@predigy/edge-components';

<EdgeProvider theme={caesars} /* ... */ >

Custom Theme

Spread a preset and override what you need:

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:

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:

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
• Contact: [email protected]
• License: MIT