feat: migrate fills table to abacus-ts

src/abacus-ts/lib/mapLoadable.ts

@@ -19,18 +19,15 @@ export function mergeLoadableData<T, R>(
   } as any;
 }
 
-// converts idle to pending and if a status has valid data is counts as success
-export function mergeLoadableStatus(
-  ...status: Array<Loadable<any>>
-): Exclude<Loadable<any>['status'], 'idle'> {
+export function mergeLoadableStatus(...status: Array<Loadable<any>>): Loadable<any>['status'] {
   if (status.some((s) => s.status === 'error' && s.data == null)) {
     return 'error';
   }
-  if (status.some((s) => s.status === 'idle')) {
-    return 'pending';
-  }
   if (status.some((s) => s.status === 'pending' && s.data == null)) {
     return 'pending';
   }
+  if (status.some((s) => s.status === 'idle')) {
+    return 'idle';
+  }
   return 'success';
 }

src/components/OrderSideTag.tsx

@@ -1,3 +1,4 @@
+import { IndexerOrderSide } from '@/types/indexer/indexerApiGen';
 import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 import { STRING_KEYS } from '@/constants/localization';
@@ -7,7 +8,7 @@ import { useStringGetter } from '@/hooks/useStringGetter';
 import { Tag, TagSign, TagSize, TagType } from './Tag';
 
 type ElementProps = {
-  orderSide: OrderSide;
+  orderSide: OrderSide | IndexerOrderSide;
 };
 
 type StyleProps = {

src/lib/orders.ts

@@ -1,3 +1,5 @@
+import { AssetInfo, AssetInfos, MarketsData } from '@/abacus-ts/rawTypes';
+import { IndexerCompositeFillObject } from '@/types/indexer/indexerManual';
 import { OrderSide } from '@dydxprotocol/v4-client-js';
 import BigNumber from 'bignumber.js';
 
@@ -8,12 +10,12 @@ import {
   AbacusOrderTypes,
   KotlinIrEnumValues,
   Nullable,
+  SubaccountFill,
   SubaccountFills,
   TRADE_TYPES,
   type Asset,
   type OrderStatus,
   type PerpetualMarket,
-  type SubaccountFill,
   type SubaccountFundingPayment,
   type SubaccountOrder,
 } from '@/constants/abacus';
@@ -22,6 +24,9 @@ import { IconName } from '@/components/Icon';
 
 import { convertAbacusOrderSide } from '@/lib/abacus/conversions';
 
+import { getAssetFromMarketId } from './assetUtils';
+import { MaybeBigNumber } from './numbers';
+
 export const getOrderStatusInfo = ({ status }: { status: string }) => {
   switch (status) {
     case AbacusOrderStatus.Open.rawValue: {
@@ -145,6 +150,33 @@ export const getHydratedTradingData = <
   ...('side' in data && { orderSide: convertAbacusOrderSide(data.side) }),
 });
 
+type NewAddedProps = {
+  asset: AssetInfo | undefined;
+  stepSizeDecimals: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+};
+
+export const getHydratedFill = ({
+  data,
+  assets,
+  perpetualMarkets,
+}: {
+  data: IndexerCompositeFillObject;
+  assets: AssetInfos;
+  perpetualMarkets: MarketsData;
+}): IndexerCompositeFillObject & NewAddedProps => {
+  return {
+    ...data,
+    asset: assets[getAssetFromMarketId(data.market ?? '')],
+    stepSizeDecimals: MaybeBigNumber(
+      perpetualMarkets[data.market ?? '']?.stepSize
+    )?.decimalPlaces(),
+    tickSizeDecimals: MaybeBigNumber(
+      perpetualMarkets[data.market ?? '']?.tickSize
+    )?.decimalPlaces(),
+  };
+};
+
 export const getTradeType = (orderType: string) =>
   TRADE_TYPES[orderType as KotlinIrEnumValues<typeof AbacusOrderType>];
 

src/pages/trade/HorizontalPanel.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 
+import { selectAccountFillsLoading } from '@/abacus-ts/selectors/account';
 import { shallowEqual } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -90,6 +91,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
   );
   const hasUnseenOrderUpdates = unseenOrders > 0;
 
+  const areFillsLoading = useAppSelector(selectAccountFillsLoading) === 'pending';
   const numUnseenFills = useParameterizedSelector(
     createGetUnseenFillsCount,
     showCurrentMarket ? currentMarketId : undefined
@@ -227,10 +229,14 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
       value: InfoSection.Fills,
       label: stringGetter({ key: STRING_KEYS.FILLS }),
 
-      slotRight: fillsTagNumber && (
-        <Tag type={TagType.Number} isHighlighted={hasUnseenFillUpdates}>
-          {fillsTagNumber}
-        </Tag>
+      slotRight: areFillsLoading ? (
+        <LoadingSpinner tw="[--spinner-width:1rem]" />
+      ) : (
+        fillsTagNumber && (
+          <Tag type={TagType.Number} isHighlighted={hasUnseenFillUpdates}>
+            {fillsTagNumber}
+          </Tag>
+        )
       ),
 
       content: (
@@ -264,11 +270,12 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
     }),
     [
       stringGetter,
-      currentMarketId,
-      showCurrentMarket,
-      isTablet,
+      areFillsLoading,
       fillsTagNumber,
       hasUnseenFillUpdates,
+      showCurrentMarket,
+      currentMarketId,
+      isTablet,
     ]
   );
 

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/state/accountSelectors.ts

@@ -1,3 +1,4 @@
+import { selectAccountFills } from '@/abacus-ts/selectors/account';
 import { selectRawIndexerHeightData } from '@/abacus-ts/selectors/base';
 import { OrderSide } from '@dydxprotocol/v4-client-js';
 import BigNumber from 'bignumber.js';
@@ -735,15 +736,14 @@ export const createGetUnseenFillsCount = () =>
     [
       getCurrentAccountMemory,
       selectRawIndexerHeightData,
-      getSubaccountFills,
+      selectAccountFills,
       (state, market: string | undefined) => market,
     ],
     (memory, height, fills, market) => {
       if (height == null) {
         return 0;
       }
-      const ourFills =
-        (market == null ? fills : fills?.filter((o) => o.marketId === market)) ?? EMPTY_ARR;
+      const ourFills = market == null ? fills : fills.filter((o) => o.market === market);
       if (ourFills.length === 0) {
         return 0;
       }
@@ -752,9 +752,9 @@ export const createGetUnseenFillsCount = () =>
       }
       const unseen = ourFills.filter(
         (o) =>
-          o.createdAtMilliseconds >
+          (mapIfPresent(o.createdAt, (c) => new Date(c).valueOf()) ?? 0) >
           (mapIfPresent(
-            (memory.seenFills[o.marketId] ?? memory.seenFills[ALL_MARKETS_STRING])?.time,
+            (memory.seenFills[o.market ?? ''] ?? memory.seenFills[ALL_MARKETS_STRING])?.time,
             (t) => new Date(t).valueOf()
           ) ?? 0)
       );