order-flow-tape-plugin

An Orderly SDK v3 plugin that renders a live order-flow tape — a horizontal ribbon of recent trades with size-weighted pills — directly above the desktop TradingView chart.

What it does

• Subscribes to useMarketTradeStream from @orderly.network/hooks for the active symbol.
• Renders each tick as a colored pill (green = buy aggressor, red = sell aggressor); pill brightness scales with notional size against a rolling window so big prints visually pop.
• Auto-scrolls — newest fills slide in from the right.
• Pure client-side, no extra backend or REST calls.
• Mounts via the TradingView.Desktop interceptor — the chart is preserved untouched below the tape.

Install

pnpm add order-flow-tape-plugin
# or
npm install order-flow-tape-plugin

Register

import { OrderlyAppProvider } from '@orderly.network/react-app';
import { registerOrderFlowTapePlugin } from 'order-flow-tape-plugin';

<OrderlyAppProvider
  plugins={[
    registerOrderFlowTapePlugin({ maxTicks: 30 }),
  ]}
  // …
/>

If your host doesn't auto-import the plugin's stylesheet:

import 'order-flow-tape-plugin/dist/styles.css';

Options

| Option | Type | Default | Description | |------------------|----------|---------|-------------| | className | string | — | Extra CSS class for the outer container. | | maxTicks | number | 30 | Maximum number of pills kept on the strip — older ticks scroll off. | | notionalWindow | number | 50 | Rolling window size for normalizing pill brightness against recent notional. |

Peer dependencies

Provided by the host app:

• @orderly.network/plugin-core >= 3.0.0-beta.1
• @orderly.network/hooks >= 3.0.0-beta.1
• @orderly.network/trading >= 3.0.0-beta.1
• @orderly.network/ui >= 3.0.0-beta.1
• @orderly.network/i18n >= 3.0.0-beta.1
• @orderly.network/types >= 3.0.0-beta.1
• @orderly.network/utils >= 3.0.0-beta.1
• react >= 18, react-dom >= 18

Build

pnpm install
pnpm build

Produces dist/index.{js,mjs,d.ts} + dist/styles.css.

License

MIT