@oko-agent/ui

Embeddable React components for the OKO protocol.

| Component | Description | |-----------|-------------| | <OkoProvider> | Config context — wraps your app | | <OkoTicker> | Live scrolling price marquee (SSE-powered, zero re-renders) | | <OkoMarketTable> | Top 20 coins table with sparklines | | <OkoChat> | AI chat widget with preset commands |

Installation

npm install @oko-agent/ui

Quick Start

import { OkoProvider, OkoTicker, OkoMarketTable, OkoChat } from '@oko-agent/ui'
import '@oko-agent/ui/styles.css'

function App() {
  return (
    <OkoProvider config={{ apiBaseUrl: 'https://api.oko-agent.io', theme: 'dark' }}>
      <OkoTicker />
      <OkoMarketTable onCoinClick={(coin) => console.log(coin.symbol)} />
      <OkoChat height="500px" />
    </OkoProvider>
  )
}

Components

<OkoProvider config={...}>

Required parent wrapper. Provides config to all child components.

| Prop | Type | Description | |------|------|-------------| | config.apiBaseUrl | string | OKO backend URL | | config.theme | 'dark' \| 'light' | Color theme (default: 'dark') |

<OkoTicker>

Live price ticker bar. Uses direct DOM updates for zero React overhead.

| Prop | Type | Description | |------|------|-------------| | symbols | string[] | Symbols to display (default: 25 top coins) | | speed | number | Scroll duration in seconds (default: 60) | | onSymbolClick | (sym: string) => void | Click handler | | className | string | Extra CSS class |

<OkoMarketTable>

| Prop | Type | Description | |------|------|-------------| | limit | number | Number of coins (default: 20) | | onCoinClick | (coin: CoinRow) => void | Row click handler | | className | string | Extra CSS class |

<OkoChat>

| Prop | Type | Description | |------|------|-------------| | walletAddress | string | Enable wallet analysis mode | | onSwapIntent | (intent: SwapIntent) => void | Called when AI suggests a swap | | placeholder | string | Input placeholder text | | height | string | Widget height (default: '500px') | | className | string | Extra CSS class |

Theming

Import the base styles once, then override CSS variables:

/* Override any token */
:root {
  --oko-accent: #your-brand-color;
  --oko-bg: #your-bg;
  --oko-radius: 8px;
}

Running the Example

cd examples/basic
cp .env.example .env  # set your API base URL
npm install
npm run dev

License

MIT