feat: bonsai all turned on

.eslintrc.json

@@ -11,7 +11,14 @@
     "plugin:react-hooks/recommended",
     "prettier"
   ],
-  "overrides": [],
+  "overrides": [
+    {
+      "files": ["**/abacus-ts/**"],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
+    }
+  ],
   "parserOptions": {
     "project": "./tsconfig.json",
     "ecmaVersion": "latest",
@@ -42,6 +49,17 @@
     "no-multi-assign": "off",
     "no-nested-ternary": "off",
     "no-param-reassign": ["error", { "props": false }],
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          "@/abacus-ts/*",
+          "!@/abacus-ts/ontology",
+          "!@/abacus-ts/lib",
+          "!@/abacus-ts/summaryTypes"
+        ]
+      }
+    ],
     "no-return-assign": "off",
     "no-return-await": "off",
     "no-underscore-dangle": "off",

package.json

@@ -57,7 +57,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.13.39",
     "@dydxprotocol/v4-client-js": "1.15.1",
-    "@dydxprotocol/v4-localization": "^1.1.257",
+    "@dydxprotocol/v4-localization": "^1.1.259",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",
     "@emotion/is-prop-valid": "^1.3.0",
     "@funkit/connect": "^4.0.3",

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/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/abacus-ts/ontology.ts

@@ -0,0 +1,98 @@
+import { type RootState } from '@/state/_store';
+import { getCurrentMarketId } from '@/state/perpetualsSelectors';
+
+import {
+  getCurrentMarketAccountFills,
+  selectAccountFills,
+  selectAccountFillsLoading,
+  selectAccountOrdersLoading,
+  selectCurrentMarketOpenOrders,
+  selectCurrentMarketOrderHistory,
+  selectOpenOrders,
+  selectOrderHistory,
+  selectParentSubaccountOpenPositions,
+  selectParentSubaccountOpenPositionsLoading,
+  selectParentSubaccountSummary,
+  selectParentSubaccountSummaryLoading,
+} from './selectors/account';
+import {
+  selectAllAssetsInfo,
+  selectAllAssetsInfoLoading,
+  selectCurrentMarketAssetInfo,
+} from './selectors/assets';
+import {
+  selectRawIndexerHeightData,
+  selectRawIndexerHeightDataLoading,
+  selectRawValidatorHeightData,
+  selectRawValidatorHeightDataLoading,
+} from './selectors/base';
+import {
+  selectAllMarketsInfo,
+  selectAllMarketsInfoLoading,
+  selectCurrentMarketInfo,
+} from './selectors/markets';
+
+// every leaf is a selector or a paramaterized selector
+type NestedSelectors = {
+  [K: string]:
+    | NestedSelectors
+    | ((state: RootState) => any)
+    | (() => (state: RootState, ...other: any[]) => any);
+};
+
+// all data should be accessed via selectrs in this file
+// no files outside abacus-ts should access anything within abacus-ts except this file
+export const BonsaiCore = {
+  account: {
+    parentSubaccountSummary: {
+      data: selectParentSubaccountSummary,
+      loading: selectParentSubaccountSummaryLoading,
+    },
+    parentSubaccountPositions: {
+      data: selectParentSubaccountOpenPositions,
+      loading: selectParentSubaccountOpenPositionsLoading,
+    },
+    openOrders: {
+      data: selectOpenOrders,
+      loading: selectAccountOrdersLoading,
+    },
+    orderHistory: {
+      data: selectOrderHistory,
+      loading: selectAccountOrdersLoading,
+    },
+    fills: {
+      data: selectAccountFills,
+      loading: selectAccountFillsLoading,
+    },
+  },
+  markets: {
+    currentMarketId: getCurrentMarketId,
+    markets: {
+      data: selectAllMarketsInfo,
+      loading: selectAllMarketsInfoLoading,
+    },
+    assets: { data: selectAllAssetsInfo, loading: selectAllAssetsInfoLoading },
+  },
+  network: {
+    indexerHeight: {
+      data: selectRawIndexerHeightData,
+      loading: selectRawIndexerHeightDataLoading,
+    },
+    validatorHeight: {
+      data: selectRawValidatorHeightData,
+      loading: selectRawValidatorHeightDataLoading,
+    },
+  },
+} as const satisfies NestedSelectors;
+
+export const BonsaiHelpers = {
+  currentMarket: {
+    marketInfo: selectCurrentMarketInfo,
+    assetInfo: selectCurrentMarketAssetInfo,
+    account: {
+      openOrders: selectCurrentMarketOpenOrders,
+      orderHistory: selectCurrentMarketOrderHistory,
+      fills: getCurrentMarketAccountFills,
+    },
+  },
+} as const satisfies NestedSelectors;

src/abacus-ts/selectors/assets.ts

@@ -1,13 +1,18 @@
 import { createSelector } from 'reselect';
 
 import { transformAssetsInfo } from '../calculators/assets';
-import { selectRawAssetsData } from './base';
+import { selectRawAssets, selectRawAssetsData } from './base';
 import { selectCurrentMarketInfo } from './markets';
 
 export const selectAllAssetsInfo = createSelector([selectRawAssetsData], (assets) =>
   transformAssetsInfo(assets)
 );
 
+export const selectAllAssetsInfoLoading = createSelector(
+  [selectRawAssets],
+  (assets) => assets.status
+);
+
 export const selectCurrentMarketAssetInfo = createSelector(
   [selectCurrentMarketInfo, selectAllAssetsInfo],
   (currentMarketInfo, assets) => {

src/abacus-ts/selectors/base.ts

@@ -7,6 +7,7 @@ export const selectRawAccountState = (state: RootState) => state.raw.account;
 export const selectRawMarkets = (state: RootState) => state.raw.markets.allMarkets;
 export const selectRawMarketsData = (state: RootState) => state.raw.markets.allMarkets.data;
 export const selectRawAssetsData = (state: RootState) => state.raw.markets.assets.data;
+export const selectRawAssets = (state: RootState) => state.raw.markets.assets;
 
 export const selectRawParentSubaccount = (state: RootState) => state.raw.account.parentSubaccount;
 export const selectRawParentSubaccountData = (state: RootState) =>
@@ -31,6 +32,10 @@ export const selectRawIndexerHeightData = (state: RootState) =>
   state.raw.heights.indexerHeight.data;
 export const selectRawValidatorHeightData = (state: RootState) =>
   state.raw.heights.validatorHeight.data;
+export const selectRawIndexerHeightDataLoading = (state: RootState) =>
+  state.raw.heights.indexerHeight.status;
+export const selectRawValidatorHeightDataLoading = (state: RootState) =>
+  state.raw.heights.validatorHeight.status;
 
 export const selectRawFillsRest = (state: RootState) => state.raw.account.fills;
 export const selectRawOrdersRest = (state: RootState) => state.raw.account.orders;

src/abacus-ts/selectors/markets.ts

@@ -2,12 +2,17 @@ import { createAppSelector } from '@/state/appTypes';
 import { getCurrentMarketId } from '@/state/perpetualsSelectors';
 
 import { calculateAllMarkets } from '../calculators/markets';
-import { selectRawMarketsData } from './base';
+import { selectRawMarkets, selectRawMarketsData } from './base';
 
 export const selectAllMarketsInfo = createAppSelector([selectRawMarketsData], (markets) =>
   calculateAllMarkets(markets)
 );
 
+export const selectAllMarketsInfoLoading = createAppSelector(
+  [selectRawMarkets],
+  (markets) => markets.status
+);
+
 export const selectCurrentMarketInfo = createAppSelector(
   [selectAllMarketsInfo, getCurrentMarketId],
   (markets, currentMarketId) => (currentMarketId ? markets?.[currentMarketId] : undefined)

src/abacus-ts/socketSelectors.ts

@@ -3,7 +3,7 @@
 import { EndpointsConfig } from '@/hooks/useEndpointsConfig';
 
 import { type RootState } from '@/state/_store';
-import { getUserSubaccountNumber, getUserWalletAddress } from '@/state/accountSelectors';
+import { getUserSubaccountNumber } from '@/state/accountSelectors';
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { createAppSelector } from '@/state/appTypes';
 
@@ -19,8 +19,8 @@
 });
 
 export const selectParentSubaccountInfo = createAppSelector(
-  [getUserWalletAddress, getUserSubaccountNumber],
-  (wallet, subaccount) => ({ wallet, subaccount })
+  [(state) => state.wallet.localWallet?.address, getUserSubaccountNumber],
+  (wallet, subaccount) => ({ wallet, subaccount: 0 }) // TODO DO NOT HARD CODE THIS
 );
 
 export const selectIndexerReady = createAppSelector(

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/components/Table/MarketTableCell.tsx

@@ -1,3 +1,5 @@
+import { AssetInfo } from '@/abacus-ts/rawTypes';
+
 import type { Asset } from '@/constants/abacus';
 
 import { AssetIcon } from '@/components/AssetIcon';
@@ -22,3 +24,20 @@
     </TableCell>
   );
 };
+
+export const MarketTableCellNew = ({ asset }: { asset?: AssetInfo }) => {
+  return (
+    <TableCell
+      tw="font-bold text-color-text-2"
+      slotLeft={
+        <AssetIcon
+          logoUrl={asset?.logo}
+          symbol={asset?.id}
+          tw="text-[1.25rem] tablet:text-[2.25rem]"
+        />
+      }
+    >
+      {getDisplayableAssetFromBaseAsset(asset?.id ?? '')}
+    </TableCell>
+  );
+};

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/hooks/useAccounts.tsx

@@ -18,7 +18,7 @@ import { setOnboardingGuard, setOnboardingState } from '@/state/account';
 import { getGeo, getHasSubaccount } from '@/state/accountSelectors';
 import { getSelectedDydxChainId } from '@/state/appSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { clearSavedEncryptedSignature } from '@/state/wallet';
+import { clearSavedEncryptedSignature, setLocalWallet } from '@/state/wallet';
 import { getSourceAccount } from '@/state/walletSelectors';
 
 import abacusStateManager from '@/lib/abacus';
@@ -135,6 +135,10 @@ const useAccountsContext = () => {
     [localDydxWallet]
   );
 
+  useEffect(() => {
+    dispatch(setLocalWallet({ address: dydxAddress }));
+  }, [dispatch, dydxAddress]);
+
   const nobleAddress = useMemo(() => {
     return localNobleWallet?.address;
   }, [localNobleWallet]);

src/hooks/useSeen.ts

@@ -1,9 +1,8 @@
 import { useEffect, useRef } from 'react';
 
-import { selectRawIndexerHeightData } from '@/abacus-ts/selectors/base';
+import { BonsaiCore } from '@/abacus-ts/ontology';
 import { shallowEqual } from 'react-redux';
 
-import { getUserWalletAddress } from '@/state/accountSelectors';
 import { setSeenFills, setSeenOpenOrders, setSeenOrderHistory } from '@/state/accountUiMemory';
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
@@ -13,8 +12,8 @@ export function useViewPanel(
   kind: 'fills' | 'openOrders' | 'orderHistory'
 ) {
   const networkId = useAppSelector(getSelectedNetwork);
-  const walletId = useAppSelector(getUserWalletAddress);
-  const height = useAppSelector(selectRawIndexerHeightData);
+  const walletId = useAppSelector((state) => state.wallet.localWallet?.address);
+  const height = useAppSelector(BonsaiCore.network.indexerHeight.data);
   const lastSetCore = useRef<any[]>([]);
 
   const dispatch = useAppDispatch();

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 => {