@liberfi.io/ui-perpetuals 0.2.22 → 0.3.0

package/README.md

@@ -42,12 +42,12 @@ Required peer dependencies:
 - `PositionsUI(props: PositionsUIProps)` — controlled, presentational positions table (div+flex layout, 9 columns, sortable headers, header tooltips, zebra striping, `min-w-[1000px]` + horizontal scroll). The `Mark Price`, `Margin Used (PNL)`, and `TP / SL` columns are kept live by `useAccountStateSubscription` (webData2): each push re-marks every position against the venue's `markPx`, recomputes PnL, and re-derives the closing-side TP/SL trigger prices client-side, so the table updates at the same cadence as the order book — no extra subscription needed at the widget level.
 - `PositionsSkeleton()`
 - `PositionsEmpty()`
-- `OpenOrdersWidget(props: OpenOrdersWidgetProps)`
-- `OpenOrdersUI(props: OpenOrdersUIProps)`
+- `OpenOrdersWidget(props: OpenOrdersWidgetProps)` — wires `useOpenOrdersScript` to `OpenOrdersUI`; owns sort state, the per-row cancel mutation, and a confirmation dialog for the destructive `Cancel All` action
+- `OpenOrdersUI(props: OpenOrdersUIProps)` — controlled, presentational open-orders table (div+flex layout, 12 columns mirroring Axiom 1:1, 9 sortable headers, `Leverage` header tooltip, zebra striping, `min-w-[1100px]` + horizontal scroll). The `Current Price` column reads each order's live mark price; `TP / SL` reads the parent limit order's `children[]` array (Hyperliquid's authoritative bundled-exit field), so the table updates at the same cadence as the order book — no extra subscription needed at the widget level.
 - `OpenOrdersSkeleton()`
 - `OpenOrdersEmpty()`
-- `TradeHistoryWidget(props: TradeHistoryWidgetProps)`
-- `TradeHistoryUI(props: TradeHistoryUIProps)`
+- `TradeHistoryWidget(props: TradeHistoryWidgetProps)` — wires `useTradeHistoryScript` to `TradeHistoryUI`; thin pass-through (no destructive actions to gate). Defaults to all-coin display so the bottom-panel UX matches Positions / Open Orders.
+- `TradeHistoryUI(props: TradeHistoryUIProps)` — controlled, presentational user-fills table (div+flex layout, 7 columns mirroring Axiom 1:1 minus the Share column, all 7 headers sortable, **virtualized via `react-window`** since `userFills` can return thousands of records, zebra striping, `min-w-[1100px]` + horizontal scroll). The `Description` column passes through Hyperliquid's `dir` string (`"Open Long"` / `"Close Short"` / `"Market liquidation triggered at <px>"`) and colours it by trade direction (buy=bullish, sell/liquidation=bearish). `Closed PnL` always renders the signed value (`+$0.06` / `-$0.06`) so the dollar amount stays readable in copy-paste / high-contrast modes.
 - `TradeHistorySkeleton()`
 - `TradeHistoryEmpty()`
 - `PerpetualsProvider(props: PerpetualsProviderProps)`
@@ -125,6 +125,9 @@ Required peer dependencies:
 - Positions table sort:
   - `PositionSortKey` — discriminated string union of the seven sortable columns (`asset`, `position`, `value`, `entry`, `mark`, `liq`, `marginPnl`)
   - `SortDirection` — `"asc" | "desc"`
+- Trade History table sort:
+  - `TradeHistorySortKey` — discriminated string union of the seven sortable columns (`time`, `size`, `asset`, `description`, `price`, `tradeValue`, `closedPnl`)
+  - `SortDirection` — `"asc" | "desc"`
 
 ### Constants
 
@@ -268,7 +271,8 @@ checklist UI without reimplementing the transition rules.
 ## Future Improvements
 
 - Add integration tests for order submit/cancel and subscription lifecycle.
-- Finish i18n wiring across the remaining widgets (`OpenOrdersUI`, `TradesUI`, `TradeHistoryUI`); positions table is fully translated under the `perpetuals.positions.*` namespace.
+- Finish i18n wiring across the remaining widgets (`TradesUI`); positions / open-orders / trade-history tables are fully translated under their respective `perpetuals.*` namespaces.
+- Wire a real-time `userFills` push subscription into `useTradeHistoryScript` so new fills appear instantly (today the script polls via React Query with a 5 s `staleTime`). The hook surface already accepts the data path; the only missing piece is a `subscribeUserData('fills')` listener that prepends new fills to the React Query cache for `tradesQueryKey`.
 - Surface a **per-position TP/SL editor** behind the small `Edit` icon Axiom shows in the TP/SL cell. The data plumbing already lands the active trigger prices on each `Position` (`takeProfitPrice` / `stopLossPrice`); a popover that calls `useCreateOrderMutation` with `reduceOnly: true` triggers would complete the loop.
 - Wire a **Limit close** action in the positions row's `Close` cell. Today only the `Market` close button is rendered; reusing the place-order form's limit-price input from a popover would close the gap.
 - Replace placeholder account/margin values in place-order script with real account sources.