diff --git a/src/abacus-ts/ontology.ts b/src/abacus-ts/ontology.ts index 34c5d7749..4e24c11ff 100644 --- a/src/abacus-ts/ontology.ts +++ b/src/abacus-ts/ontology.ts @@ -16,6 +16,7 @@ import { selectParentSubaccountSummaryLoading, } from './selectors/account'; import { + createSelectAssetInfo, selectAllAssetsInfo, selectAllAssetsInfoLoading, selectCurrentMarketAssetInfo, @@ -95,4 +96,7 @@ export const BonsaiHelpers = { fills: getCurrentMarketAccountFills, }, }, + assets: { + paramaterizedAssetInfo: createSelectAssetInfo, + }, } as const satisfies NestedSelectors; diff --git a/src/views/LaunchableMarketStatsDetails.tsx b/src/views/LaunchableMarketStatsDetails.tsx index b7a218f22..3627bafb4 100644 --- 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.paramaterizedAssetInfo, + assetId + ); const { marketCap, diff --git a/src/views/MarketDetails/LaunchableMarketDetails.tsx b/src/views/MarketDetails/LaunchableMarketDetails.tsx index 88b2fe052..4f0795902 100644 --- 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.paramaterizedAssetInfo, + 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 index 2227f7954..ea8ee9f11 100644 --- a/src/views/MarketStatsDetails.tsx +++ b/src/views/MarketStatsDetails.tsx @@ -1,6 +1,7 @@ import { useEffect, useRef } from 'react'; -import { shallowEqual } from 'react-redux'; +import { BonsaiCore, BonsaiHelpers } from '@/abacus-ts/ontology'; +import BigNumber from 'bignumber.js'; import styled, { css } from 'styled-components'; import { STRING_KEYS } from '@/constants/localization'; @@ -25,13 +26,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,15 +52,26 @@ 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; @@ -70,8 +79,6 @@ export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps) const displayUnit = useAppSelector(getSelectedDisplayUnit); - const { nextFundingRate, openInterest, openInterestUSDC, trades24H, volume24H } = perpetual ?? {}; - const valueMap = { [MarketStats.OraclePrice]: oraclePrice, [MarketStats.NextFunding]: undefined, // hardcoded @@ -117,9 +124,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,14 +217,14 @@ 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; - effectiveInitialMarginFraction: number | null | undefined; + initialMarginFraction: string | null | undefined; + effectiveInitialMarginFraction: BigNumber | null | undefined; useFiatDisplayUnit: boolean; }) => { const valueBN = MustBigNumber(value); @@ -313,7 +320,7 @@ const DetailsItem = ({ ? BIG_NUMBERS.ONE.div(effectiveInitialMarginFraction) : null } - withDiff={initialMarginFraction !== effectiveInitialMarginFraction} + withDiff={initialMarginFraction !== effectiveInitialMarginFraction?.toString()} type={OutputType.Multiple} /> );