feat(bonsai-ui): migrate positions table to abacus-ts

src/abacus-ts/logs.ts

@@ -1,5 +1,5 @@
 import { log } from '@/lib/telemetry';
 
 export function logAbacusTsError(source: string, message: string, ...args: any[]) {
-  log(`${source}: ${message}`, undefined, { context: args });
+  log(`${source}: ${message}`, undefined, { context: args }, true);
 }

src/constants/dialogs.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
 
+import { IndexerPositionSide } from '@/types/indexer/indexerApiGen';
 import { TagsOf, UnionOf, ofType, unionize } from 'unionize';
 
 import { BigNumberish } from '@/lib/numbers';
 
-import { AbacusPositionSides, Nullable, SubaccountOrder, SubaccountPosition } from './abacus';
+import { Nullable, SubaccountOrder, SubaccountPosition } from './abacus';
 import { IAffiliateStats } from './affiliates';
 import { DydxChainAsset } from './wallets';
 
@@ -64,7 +65,7 @@ export type SharePNLAnalyticsDialogProps = {
   oraclePrice: Nullable<number>;
   entryPrice: Nullable<number>;
   unrealizedPnl: Nullable<number>;
-  side: Nullable<AbacusPositionSides>;
+  side: Nullable<IndexerPositionSide>;
   sideLabel: Nullable<string>;
 };
 export type StakeDialogProps = {};

src/lib/numbers.ts

@@ -19,6 +19,9 @@ export const MustBigNumber = (amount?: BigNumberish | null): BigNumber =>
 export const MaybeBigNumber = (amount?: BigNumberish | null): BigNumber | undefined =>
   amount ? MustBigNumber(amount) : undefined;
 
+export const MaybeNumber = (amount?: BigNumberish | null): number | undefined =>
+  amount ? MustBigNumber(amount).toNumber() : undefined;
+
 // doesnt allow null, always returns big number
 // empty string becomes null though
 export const ToBigNumber = (amount: BigNumberish): BigNumber => {

src/lib/telemetry.ts

@@ -4,8 +4,8 @@ import { isDev } from '@/constants/networks';
 import { track } from './analytics/analytics';
 import { dd } from './analytics/datadog';
 
-export const log = (location: string, error?: Error, metadata?: object) => {
-  if (isDev) {
+export const log = (location: string, error?: Error, metadata?: object, forceLog?: boolean) => {
+  if (isDev || forceLog) {
     // eslint-disable-next-line no-console
     console.warn('telemetry/log:', { location, error, metadata });
   }

src/pages/portfolio/Portfolio.tsx

@@ -1,5 +1,6 @@
 import { lazy, Suspense } from 'react';
 
+import { selectParentSubaccountOpenPositions } from '@/abacus-ts/selectors/account';
 import { shallowEqual } from 'react-redux';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import styled from 'styled-components';
@@ -9,6 +10,7 @@ import { ButtonAction } from '@/constants/buttons';
 import { ComplianceStates } from '@/constants/compliance';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
+import { EMPTY_ARR } from '@/constants/objects';
 import { HistoryRoute, PortfolioRoute } from '@/constants/routes';
 
 import { useAccountBalance } from '@/hooks/useAccountBalance';
@@ -61,8 +63,10 @@ const PortfolioPage = () => {
   const { freeCollateral } = useAppSelector(getSubaccount, shallowEqual) ?? {};
   const { nativeTokenBalance } = useAccountBalance();
 
-  const { numTotalPositions, numTotalOpenOrders } =
-    useAppSelector(getTradeInfoNumbers, shallowEqual) ?? {};
+  const { numTotalOpenOrders } = useAppSelector(getTradeInfoNumbers, shallowEqual);
+  const numTotalPositions = (useAppSelector(selectParentSubaccountOpenPositions) ?? EMPTY_ARR)
+    .length;
+
   const numPositions = shortenNumberForDisplay(numTotalPositions);
   const numOrders = shortenNumberForDisplay(numTotalOpenOrders);
 

src/pages/trade/HorizontalPanel.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
 
+import { selectParentSubaccountOpenPositions } from '@/abacus-ts/selectors/account';
 import { shallowEqual } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
+import { EMPTY_ARR } from '@/constants/objects';
 import { AppRoute } from '@/constants/routes';
 
 import { useBreakpoints } from '@/hooks/useBreakpoints';
@@ -69,10 +71,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
 
   const currentMarketId = useAppSelector(getCurrentMarketId);
 
-  const { numTotalPositions, numTotalOpenOrders } = useAppSelector(
-    getTradeInfoNumbers,
-    shallowEqual
-  );
+  const { numTotalOpenOrders } = useAppSelector(getTradeInfoNumbers, shallowEqual);
 
   const { numOpenOrders } = useAppSelector(getCurrentMarketTradeInfoNumbers, shallowEqual);
 
@@ -84,6 +83,9 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
   const isWaitingForOrderToIndex = useAppSelector(getHasUncommittedOrders);
   const showCurrentMarket = isTablet || view === PanelView.CurrentMarket;
 
+  const numTotalPositions = (useAppSelector(selectParentSubaccountOpenPositions) ?? EMPTY_ARR)
+    .length;
+
   const unseenOrders = useParameterizedSelector(
     createGetUnseenOrdersCount,
     showCurrentMarket ? currentMarketId : undefined

src/pages/trade/types.ts

@@ -1,3 +1,5 @@
+import { MarginMode } from '@/abacus-ts/summaryTypes';
+
 export enum MarketTypeFilter {
   AllMarkets = 'AllMarkets',
   Cross = 'Cross',
@@ -13,6 +15,15 @@ export function marketTypeMatchesFilter(type: 'Isolated' | 'Cross', filter?: Mar
   );
 }
 
+export function marginModeMatchesFilter(type: MarginMode, filter?: MarketTypeFilter) {
+  return (
+    filter == null ||
+    filter === MarketTypeFilter.AllMarkets ||
+    (type === 'ISOLATED' && filter === MarketTypeFilter.Isolated) ||
+    (type === 'CROSS' && filter === MarketTypeFilter.Cross)
+  );
+}
+
 export enum PanelView {
   AllMarkets = 'AllMarkets',
   CurrentMarket = 'CurrentMarket',

src/state/_store.ts

@@ -5,7 +5,6 @@ import storage from 'redux-persist/lib/storage';
 
 import abacusStateManager from '@/lib/abacus';
 import { runFn } from '@/lib/do';
-import { testFlags } from '@/lib/testFlags';
 
 import { accountSlice } from './account';
 import { accountUiMemorySlice } from './accountUiMemory';
@@ -98,13 +97,11 @@ export const persistor = persistStore(store);
 // Set store so (Abacus & v4-Client) classes can getState and dispatch
 abacusStateManager.setStore(store);
 
-if (testFlags.useAbacusTs) {
-  runFn(async () => {
-    const { storeLifecycles } = await import('@/abacus-ts/storeLifecycles');
-    // we ignore the cleanups for now since we want these running forever
-    storeLifecycles.forEach((fn) => fn(store));
-  });
-}
+runFn(async () => {
+  const { storeLifecycles } = await import('@/abacus-ts/storeLifecycles');
+  // we ignore the cleanups for now since we want these running forever
+  storeLifecycles.forEach((fn) => fn(store));
+});
 
 export type RootStore = typeof store;
 export type RootState = ReturnType<typeof store.getState>;

src/views/dialogs/SharePNLAnalyticsDialog.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 
+import { IndexerPositionSide } from '@/types/indexer/indexerApiGen';
 import { useToBlob } from '@hugocxl/react-to-image';
 import styled from 'styled-components';
 import tw from 'twin.macro';
@@ -8,7 +9,6 @@ import { AnalyticsEvents } from '@/constants/analytics';
 import { ButtonAction } from '@/constants/buttons';
 import { DialogProps, SharePNLAnalyticsDialogProps } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
-import { PositionSide } from '@/constants/trade';
 
 import { useStringGetter } from '@/hooks/useStringGetter';
 
@@ -82,10 +82,10 @@ export const SharePNLAnalyticsDialog = ({
   });
 
   const sideSign = useMemo(() => {
-    switch (side?.name) {
-      case PositionSide.Long:
+    switch (side) {
+      case IndexerPositionSide.LONG:
         return TagSign.Positive;
-      case PositionSide.Short:
+      case IndexerPositionSide.SHORT:
         return TagSign.Negative;
       default:
         return TagSign.Neutral;