feat(bonsai-core): migrate market header

src/abacus-ts/calculators/markets.ts

@@ -59,14 +59,32 @@ export function getMarketEffectiveInitialMarginForMarket(
   return effectiveIMF;
 }
 
-const calculateMarket = weakMapMemoize(
-  (market: IndexerPerpetualMarketResponseObject): MarketInfo => ({
-    ...market,
+function calculateDerivedMarketDisplayItems(market: IndexerPerpetualMarketResponseObject) {
+  return {
     assetId: getAssetFromMarketId(market.ticker),
     displayableAsset: getDisplayableAssetFromTicker(market.ticker),
-    effectiveInitialMarginFraction: getMarketEffectiveInitialMarginForMarket(market),
     displayableTicker: getDisplayableTickerFromMarket(market.ticker),
+  };
+}
+
+function calculateDerivedMarketCore(market: IndexerPerpetualMarketResponseObject) {
+  return {
+    effectiveInitialMarginFraction: getMarketEffectiveInitialMarginForMarket(market),
+    openInterestUSDC: MustBigNumber(market.openInterest)
+      .times(market.oraclePrice)
+      .toFixed(USD_DECIMALS),
+    percentChange24h: MustBigNumber(market.oraclePrice).isZero()
+      ? null
+      : MustBigNumber(market.priceChange24H).div(market.oraclePrice).toNumber(),
     stepSizeDecimals: MaybeBigNumber(market.stepSize)?.decimalPlaces() ?? TOKEN_DECIMALS,
     tickSizeDecimals: MaybeBigNumber(market.tickSize)?.decimalPlaces() ?? USD_DECIMALS,
+  };
+}
+
+const calculateMarket = weakMapMemoize(
+  (market: IndexerPerpetualMarketResponseObject): MarketInfo => ({
+    ...market,
+    ...calculateDerivedMarketDisplayItems(market),
+    ...calculateDerivedMarketCore(market),
   })
 );

src/abacus-ts/selectors/assets.ts

@@ -1,14 +1,17 @@
-import { createSelector } from 'reselect';
+import { createAppSelector } from '@/state/appTypes';
 
 import { transformAssetsInfo } from '../calculators/assets';
 import { selectRawAssetsData } from './base';
 import { selectCurrentMarketInfo } from './markets';
 
-export const selectAllAssetsInfo = createSelector([selectRawAssetsData], (assets) =>
+export const selectAllAssetsInfo = createAppSelector([selectRawAssetsData], (assets) =>
   transformAssetsInfo(assets)
 );
 
-export const selectCurrentMarketAssetInfo = createSelector(
+export const selectAssetInfo = (assetId: string) =>
+  createAppSelector([selectAllAssetsInfo], (assets) => assets?.[assetId]);
+
+export const selectCurrentMarketAssetInfo = createAppSelector(
   [selectCurrentMarketInfo, selectAllAssetsInfo],
   (currentMarketInfo, assets) => {
     if (currentMarketInfo == null || assets == null) {

src/abacus-ts/selectors/markets.ts

@@ -2,7 +2,8 @@ import { createAppSelector } from '@/state/appTypes';
 import { getCurrentMarketId } from '@/state/perpetualsSelectors';
 
 import { calculateAllMarkets } from '../calculators/markets';
-import { selectRawMarketsData } from './base';
+import { mergeLoadableStatus } from '../lib/mapLoadable';
+import { selectRawMarkets, selectRawMarketsData } from './base';
 
 export const selectAllMarketsInfo = createAppSelector([selectRawMarketsData], (markets) =>
   calculateAllMarkets(markets)
@@ -12,3 +13,5 @@ export const selectCurrentMarketInfo = createAppSelector(
   [selectAllMarketsInfo, getCurrentMarketId],
   (markets, currentMarketId) => (currentMarketId ? markets?.[currentMarketId] : undefined)
 );
+
+export const selectMarketsInfoLoading = createAppSelector([selectRawMarkets], mergeLoadableStatus);

src/abacus-ts/summaryTypes.ts

@@ -25,6 +25,8 @@ export type MarketInfo = IndexerPerpetualMarketResponseObject & {
   displayableAsset: string;
   displayableTicker: string;
   effectiveInitialMarginFraction: BigNumber | null;
+  openInterestUSDC: string;
+  percentChange24h: number | null;
   stepSizeDecimals: number;
   tickSizeDecimals: number;
 };