feat(bonsai-ui): market header and launchable market details (#1400)

dydxprotocol · Jan 22, 2025 · f02484a · f02484a
1 parent 8b2508a
commit f02484a
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 27 deletions.
diff --git a/src/abacus-ts/ontology.ts b/src/abacus-ts/ontology.ts
@@ -26,7 +26,11 @@ import {
   selectLatestIndexerHeight,
   selectLatestValidatorHeight,
 } from './selectors/apiStatus';
-import { selectAllAssetsInfo, selectAllAssetsInfoLoading } from './selectors/assets';
+import {
+  createSelectAssetInfo,
+  selectAllAssetsInfo,
+  selectAllAssetsInfoLoading,
+} from './selectors/assets';
 import {
   selectRawIndexerHeightDataLoading,
   selectRawValidatorHeightDataLoading,
@@ -104,6 +108,9 @@ export const BonsaiHelpers = {
       fills: getCurrentMarketAccountFills,
     },
   },
+  assets: {
+    createSelectAssetInfo,
+  },
   forms: {
     deposit: {
       createSelectParentSubaccountSummary: createSelectParentSubaccountSummaryDeposit,

diff --git a/src/views/LaunchableMarketStatsDetails.tsx b/src/views/LaunchableMarketStatsDetails.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 
+import { BonsaiHelpers } from '@/abacus-ts/ontology';
 import styled, { css } from 'styled-components';
 
 import { Nullable } from '@/constants/abacus';
@@ -8,7 +9,7 @@ import { USD_DECIMALS } from '@/constants/numbers';
 import { TooltipStringKeys } from '@/constants/tooltips';
 
 import { useBreakpoints } from '@/hooks/useBreakpoints';
-import { useMetadataServiceAssetFromId } from '@/hooks/useMetadataService';
+import { useParameterizedSelector } from '@/hooks/useParameterizedSelector';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import breakpoints from '@/styles/breakpoints';
@@ -19,6 +20,7 @@ import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType } from '@/components/Output';
 import { VerticalSeparator } from '@/components/Separator';
 
+import { getAssetFromMarketId } from '@/lib/assetUtils';
 import { orEmptyObj } from '@/lib/typeUtils';
 
 type ElementProps = {
@@ -53,7 +55,11 @@ export const LaunchableMarketStatsDetails = ({
 }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { isTablet } = useBreakpoints();
-  const launchableAsset = useMetadataServiceAssetFromId(launchableMarketId);
+  const assetId = getAssetFromMarketId(launchableMarketId);
+  const launchableAsset = useParameterizedSelector(
+    BonsaiHelpers.assets.createSelectAssetInfo,
+    assetId
+  );
 
   const {
     marketCap,

diff --git a/src/views/MarketDetails/LaunchableMarketDetails.tsx b/src/views/MarketDetails/LaunchableMarketDetails.tsx
@@ -1,26 +1,32 @@
+import { BonsaiHelpers } from '@/abacus-ts/ontology';
+
 import { STRING_KEYS } from '@/constants/localization';
 import { ISOLATED_LIQUIDITY_TIER_INFO } from '@/constants/markets';
 import { TooltipStringKeys } from '@/constants/tooltips';
 
-import { useMetadataServiceAssetFromId } from '@/hooks/useMetadataService';
+import { useParameterizedSelector } from '@/hooks/useParameterizedSelector';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
 import { DetailsItem } from '@/components/Details';
 import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType } from '@/components/Output';
 
-import { getDisplayableTickerFromMarket } from '@/lib/assetUtils';
+import { getAssetFromMarketId, getDisplayableTickerFromMarket } from '@/lib/assetUtils';
 import { BIG_NUMBERS } from '@/lib/numbers';
 
 import { MarketDetails } from './MarketDetails';
 
 export const LaunchableMarketDetails = ({ launchableMarketId }: { launchableMarketId: string }) => {
   const stringGetter = useStringGetter();
-  const launchableAsset = useMetadataServiceAssetFromId(launchableMarketId);
+  const assetId = getAssetFromMarketId(launchableMarketId);
+  const launchableAsset = useParameterizedSelector(
+    BonsaiHelpers.assets.createSelectAssetInfo,
+    assetId
+  );
 
   if (!launchableAsset) return null;
 
-  const { name, id, logo, urls, marketCap, reportedMarketCap, volume24h } = launchableAsset;
+  const { name, logo, urls, marketCap, reportedMarketCap, volume24h } = launchableAsset;
   const { website, technicalDoc, cmc } = urls;
   const showSelfReportedMarketCap = marketCap ? false : !!reportedMarketCap;
 
@@ -54,7 +60,7 @@ export const LaunchableMarketDetails = ({ launchableMarketId }: { launchableMark
     {
       key: 'ticker',
       label: stringGetter({ key: STRING_KEYS.TICKER }),
-      value: getDisplayableTickerFromMarket(`${id}-USD`),
+      value: getDisplayableTickerFromMarket(`${assetId}-USD`),
     },
     {
       key: 'market-type',

diff --git a/src/views/MarketStatsDetails.tsx b/src/views/MarketStatsDetails.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-import { shallowEqual } from 'react-redux';
+import { BonsaiCore, BonsaiHelpers } from '@/abacus-ts/ontology';
 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(BonsaiHelpers.currentMarket.marketInfo);
+  const isLoading = useAppSelector(BonsaiCore.markets.markets.loading) === '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,9 +123,9 @@ export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps)
               value={valueMap[stat]}
               stat={stat}
               tickSizeDecimals={tickSizeDecimals}
-              assetId={assetId ?? ''}
+              assetId={displayableAsset ?? ''}
               isLoading={isLoading}
-              priceChange24HPercent={priceChange24HPercent}
+              priceChange24HPercent={percentChange24h}
               initialMarginFraction={initialMarginFraction}
               effectiveInitialMarginFraction={effectiveInitialMarginFraction}
               useFiatDisplayUnit={displayUnit === DisplayUnit.Fiat}
@@ -210,13 +216,13 @@ const DetailsItem = ({
   effectiveInitialMarginFraction,
   useFiatDisplayUnit,
 }: {
-  value: number | null | undefined;
+  value: string | number | null | undefined;
   stat: MarketStats;
   tickSizeDecimals: number | null | undefined;
   assetId: string;
   isLoading: boolean;
   priceChange24HPercent: number | null | undefined;
-  initialMarginFraction: number | null | undefined;
+  initialMarginFraction: string | null | undefined;
   effectiveInitialMarginFraction: number | null | undefined;
   useFiatDisplayUnit: boolean;
 }) => {