update calc functions

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;
 };

src/views/LaunchableMarketStatsDetails.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 
+import { selectAssetInfo } from '@/abacus-ts/selectors/assets';
 import styled, { css } from 'styled-components';
 
 import { Nullable } from '@/constants/abacus';
@@ -8,7 +9,6 @@ import { USD_DECIMALS } from '@/constants/numbers';
 import { TooltipStringKeys } from '@/constants/tooltips';
 
 import { useBreakpoints } from '@/hooks/useBreakpoints';
-import { useMetadataServiceAssetFromId } from '@/hooks/useMetadataService';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import breakpoints from '@/styles/breakpoints';
@@ -19,6 +19,9 @@ import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType } from '@/components/Output';
 import { VerticalSeparator } from '@/components/Separator';
 
+import { useAppSelector } from '@/state/appTypes';
+
+import { getAssetFromMarketId } from '@/lib/assetUtils';
 import { orEmptyObj } from '@/lib/typeUtils';
 
 type ElementProps = {
@@ -53,7 +56,8 @@ export const LaunchableMarketStatsDetails = ({
 }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { isTablet } = useBreakpoints();
-  const launchableAsset = useMetadataServiceAssetFromId(launchableMarketId);
+  const assetId = getAssetFromMarketId(launchableMarketId);
+  const launchableAsset = useAppSelector(selectAssetInfo(assetId));
 
   const {
     marketCap,

src/views/MarketStatsDetails.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-import { shallowEqual } from 'react-redux';
+import { selectCurrentMarketInfo, selectMarketsInfoLoading } from '@/abacus-ts/selectors/markets';
 import styled, { css } from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
@@ -25,13 +25,10 @@ import { NextFundingTimer } from '@/views/NextFundingTimer';
 
 import { useAppSelector } from '@/state/appTypes';
 import { getSelectedDisplayUnit } from '@/state/appUiConfigsSelectors';
-import {
-  getCurrentMarketConfig,
-  getCurrentMarketData,
-  getCurrentMarketMidMarketPrice,
-} from '@/state/perpetualsSelectors';
+import { getCurrentMarketMidMarketPrice } from '@/state/perpetualsSelectors';
 
 import { BIG_NUMBERS, MustBigNumber } from '@/lib/numbers';
+import { orEmptyObj } from '@/lib/typeUtils';
 
 import { MidMarketPrice } from './MidMarketPrice';
 
@@ -54,24 +51,33 @@ export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps)
   const stringGetter = useStringGetter();
   const { isTablet } = useBreakpoints();
 
-  const { tickSizeDecimals, initialMarginFraction, effectiveInitialMarginFraction } =
-    useAppSelector(getCurrentMarketConfig, shallowEqual) ?? {};
+  const marketData = useAppSelector(selectCurrentMarketInfo);
+  const isLoading = useAppSelector(selectMarketsInfoLoading) === 'pending';
+
+  const {
+    displayableAsset,
+    effectiveInitialMarginFraction,
+    initialMarginFraction,
+    nextFundingRate,
+    openInterest,
+    openInterestUSDC,
+    oraclePrice,
+    percentChange24h,
+    priceChange24H,
+    tickSizeDecimals,
+    trades24H,
+    volume24H,
+  } = orEmptyObj(marketData);
+
   const midMarketPrice = useAppSelector(getCurrentMarketMidMarketPrice);
   const lastMidMarketPrice = useRef(midMarketPrice);
-  const currentMarketData = useAppSelector(getCurrentMarketData, shallowEqual);
-  const isLoading = currentMarketData === undefined;
-
-  const { oraclePrice, perpetual, priceChange24H, priceChange24HPercent, assetId } =
-    currentMarketData ?? {};
 
   useEffect(() => {
     lastMidMarketPrice.current = midMarketPrice;
   }, [midMarketPrice]);
 
   const displayUnit = useAppSelector(getSelectedDisplayUnit);
 
-  const { nextFundingRate, openInterest, openInterestUSDC, trades24H, volume24H } = perpetual ?? {};
-
   const valueMap = {
     [MarketStats.OraclePrice]: oraclePrice,
     [MarketStats.NextFunding]: undefined, // hardcoded
@@ -117,11 +123,13 @@ export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps)
               value={valueMap[stat]}
               stat={stat}
               tickSizeDecimals={tickSizeDecimals}
-              assetId={assetId ?? ''}
+              assetId={displayableAsset ?? ''}
               isLoading={isLoading}
-              priceChange24HPercent={priceChange24HPercent}
-              initialMarginFraction={initialMarginFraction}
-              effectiveInitialMarginFraction={effectiveInitialMarginFraction}
+              priceChange24HPercent={percentChange24h}
+              initialMarginFraction={MustBigNumber(initialMarginFraction).toNumber()}
+              effectiveInitialMarginFraction={MustBigNumber(
+                effectiveInitialMarginFraction
+              ).toNumber()}
               useFiatDisplayUnit={displayUnit === DisplayUnit.Fiat}
             />
           ),
@@ -210,7 +218,7 @@ const DetailsItem = ({
   effectiveInitialMarginFraction,
   useFiatDisplayUnit,
 }: {
-  value: number | null | undefined;
+  value: string | number | null | undefined;
   stat: MarketStats;
   tickSizeDecimals: number | null | undefined;
   assetId: string;