funding-ring-plugin

A drop-in Orderly SDK v3 plugin that replaces the plain "funding rate" stat in the desktop symbol info bar with a circular ring + countdown to the next funding settlement.

What it does

• Reads the live funding rate via @orderly.network/hooks (useFundingRate).
• Renders a circular SVG ring that sweeps clockwise from 0 → 100% across the current 8-hour funding window, with the live rate in the center.
• Tick label and rate color flip green/red based on the sign of the current rate, so you can read direction at a glance.
• Pure client-side: no extra REST/WS subscriptions, no backend.
• Mounts via the Trading.SymbolInfoBar.Desktop interceptor — the original info bar is preserved and the ring sits on the right.

Install

pnpm add funding-ring-plugin
# or
npm install funding-ring-plugin

Register

import { OrderlyAppProvider } from '@orderly.network/react-app';
import { registerFundingRingPlugin } from 'funding-ring-plugin';

<OrderlyAppProvider
  plugins={[
    registerFundingRingPlugin({ intervalHours: 8 }),
  ]}
  // …
/>

If your host doesn't import the plugin's dist/styles.css automatically, add:

import 'funding-ring-plugin/dist/styles.css';

Options

| Option | Type | Default | Description | |-----------------|----------|---------|-------------| | className | string | — | Extra CSS class for the outer wrapper. | | intervalHours | number | 8 | Funding settlement cadence in hours. Orderly settles every 8h on UTC :00 boundaries (00 / 08 / 16). Leave default unless your venue is different. |

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