From ae124dc1403dc35cf0ee492094b6c486c87a763f Mon Sep 17 00:00:00 2001 From: tyleroooo Date: Fri, 20 Dec 2024 11:55:39 -0500 Subject: [PATCH 1/7] Revert "feat: undo ui-facing new abacus changes (#1390)" This reverts commit 994e8ce26dabc5474592e80901b7484b37f373d0. --- src/pages/trade/HorizontalPanel.tsx | 28 ++++++--- .../MarketDetails/CurrentMarketDetails.tsx | 61 +++++++++---------- src/views/tables/FillsTable.tsx | 12 +--- src/views/tables/OrdersTable.tsx | 16 ++--- 4 files changed, 54 insertions(+), 63 deletions(-) diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx index c70958236..1694de597 100644 --- a/src/pages/trade/HorizontalPanel.tsx +++ b/src/pages/trade/HorizontalPanel.tsx @@ -26,9 +26,9 @@ import { calculateShouldRenderActionsInPositionsTable, } from '@/state/accountCalculators'; import { + createGetUnseenFillsCount, + createGetUnseenOrdersCount, getCurrentMarketTradeInfoNumbers, - getHasUnseenFillUpdates, - getHasUnseenOrderUpdates, getTradeInfoNumbers, } from '@/state/accountSelectors'; import { useAppSelector } from '@/state/appTypes'; @@ -69,14 +69,13 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => { const currentMarketId = useAppSelector(getCurrentMarketId); - const { numTotalPositions, numTotalOpenOrders, numTotalUnseenFills } = - useAppSelector(getTradeInfoNumbers, shallowEqual) ?? {}; + const { numTotalPositions, numTotalOpenOrders } = useAppSelector( + getTradeInfoNumbers, + shallowEqual + ); - const { numOpenOrders, numUnseenFills } = - useAppSelector(getCurrentMarketTradeInfoNumbers, shallowEqual) ?? {}; + const { numOpenOrders } = useAppSelector(getCurrentMarketTradeInfoNumbers, shallowEqual); - const hasUnseenOrderUpdates = useAppSelector(getHasUnseenOrderUpdates); - const hasUnseenFillUpdates = useAppSelector(getHasUnseenFillUpdates); const isAccountViewOnly = useAppSelector(calculateIsAccountViewOnly); const shouldRenderTriggers = useShouldShowTriggers(); const shouldRenderActions = useParameterizedSelector( @@ -85,9 +84,18 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => { const isWaitingForOrderToIndex = useAppSelector(getHasUncommittedOrders); const showCurrentMarket = isTablet || view === PanelView.CurrentMarket; - const fillsTagNumber = shortenNumberForDisplay( - showCurrentMarket ? numUnseenFills : numTotalUnseenFills + const unseenOrders = useParameterizedSelector( + createGetUnseenOrdersCount, + showCurrentMarket ? currentMarketId : undefined + ); + const hasUnseenOrderUpdates = unseenOrders > 0; + + const numUnseenFills = useParameterizedSelector( + createGetUnseenFillsCount, + showCurrentMarket ? currentMarketId : undefined ); + const hasUnseenFillUpdates = numUnseenFills > 0; + const fillsTagNumber = shortenNumberForDisplay(numUnseenFills); const ordersTagNumber = shortenNumberForDisplay( showCurrentMarket ? numOpenOrders : numTotalOpenOrders ); diff --git a/src/views/MarketDetails/CurrentMarketDetails.tsx b/src/views/MarketDetails/CurrentMarketDetails.tsx index ddfa4f6f8..0e47e0987 100644 --- a/src/views/MarketDetails/CurrentMarketDetails.tsx +++ b/src/views/MarketDetails/CurrentMarketDetails.tsx @@ -1,7 +1,9 @@ +import { selectCurrentMarketAssetInfo } from '@/abacus-ts/selectors/assets'; +import { selectCurrentMarketInfo } from '@/abacus-ts/selectors/markets'; +import { IndexerPerpetualMarketType } from '@/types/indexer/indexerApiGen'; import BigNumber from 'bignumber.js'; import { shallowEqual } from 'react-redux'; -import { PerpetualMarketType } from '@/constants/abacus'; import { STRING_KEYS } from '@/constants/localization'; import { useStringGetter } from '@/hooks/useStringGetter'; @@ -11,56 +13,51 @@ import { DiffOutput } from '@/components/DiffOutput'; import { Output, OutputType } from '@/components/Output'; import { useAppSelector } from '@/state/appTypes'; -import { getCurrentMarketAssetData } from '@/state/assetsSelectors'; -import { getCurrentMarketData } from '@/state/perpetualsSelectors'; -import { getDisplayableAssetFromBaseAsset } from '@/lib/assetUtils'; +import { getAssetDescriptionStringKeys } from '@/lib/assetUtils'; import { BIG_NUMBERS } from '@/lib/numbers'; +import { orEmptyObj } from '@/lib/typeUtils'; import { MarketDetails } from './MarketDetails'; export const CurrentMarketDetails = () => { const stringGetter = useStringGetter(); - const { configs, displayId } = useAppSelector(getCurrentMarketData, shallowEqual) ?? {}; - const { id, name, resources } = useAppSelector(getCurrentMarketAssetData, shallowEqual) ?? {}; - - if (!configs) return null; + const currentMarketData = useAppSelector(selectCurrentMarketInfo, shallowEqual); + const asset = useAppSelector(selectCurrentMarketAssetInfo); const { - tickSize, - stepSize, - initialMarginFraction, + displayableAsset, + displayableTicker, effectiveInitialMarginFraction, + initialMarginFraction, maintenanceMarginFraction, - minOrderSize, - perpetualMarketType, - stepSizeDecimals, + marketType, + tickSize, tickSizeDecimals, - } = configs; + stepSize, + stepSizeDecimals, + } = orEmptyObj(currentMarketData); - const { - coinMarketCapsLink, - primaryDescriptionKey, - secondaryDescriptionKey, - websiteLink, - whitepaperLink, - } = resources ?? {}; + const { assetId, logo, name, urls } = orEmptyObj(asset); + const { cmc, website, technicalDoc } = orEmptyObj(urls); + const { primary, secondary } = getAssetDescriptionStringKeys(assetId ?? ''); const preferEIMF = Boolean( - effectiveInitialMarginFraction && initialMarginFraction !== effectiveInitialMarginFraction + effectiveInitialMarginFraction && + initialMarginFraction !== effectiveInitialMarginFraction.toString() ); const items = [ { key: 'ticker', label: stringGetter({ key: STRING_KEYS.TICKER }), - value: displayId, + value: displayableTicker, }, { key: 'market-type', label: stringGetter({ key: STRING_KEYS.TYPE }), value: - perpetualMarketType === PerpetualMarketType.CROSS + marketType === IndexerPerpetualMarketType.CROSS ? stringGetter({ key: STRING_KEYS.CROSS }) : stringGetter({ key: STRING_KEYS.ISOLATED }), }, @@ -86,7 +83,7 @@ export const CurrentMarketDetails = () => { useGrouping value={stepSize} type={OutputType.Asset} - tag={getDisplayableAssetFromBaseAsset(id)} + tag={displayableAsset} fractionDigits={stepSizeDecimals} /> ), @@ -97,9 +94,9 @@ export const CurrentMarketDetails = () => { value: ( ), @@ -149,11 +146,11 @@ export const CurrentMarketDetails = () => { return ( ); }; diff --git a/src/views/tables/FillsTable.tsx b/src/views/tables/FillsTable.tsx index 43d108394..f24ae9551 100644 --- a/src/views/tables/FillsTable.tsx +++ b/src/views/tables/FillsTable.tsx @@ -1,4 +1,4 @@ -import { forwardRef, Key, useEffect, useMemo } from 'react'; +import { forwardRef, Key, useMemo } from 'react'; import { Nullable } from '@dydxprotocol/v4-abacus'; import { OrderSide } from '@dydxprotocol/v4-client-js'; @@ -13,6 +13,7 @@ import { STRING_KEYS, type StringGetterFunction } from '@/constants/localization import { EMPTY_ARR } from '@/constants/objects'; import { useBreakpoints } from '@/hooks/useBreakpoints'; +import { useViewPanel } from '@/hooks/useSeen'; import { useStringGetter } from '@/hooks/useStringGetter'; import { tradeViewMixins } from '@/styles/tradeViewMixins'; @@ -28,7 +29,6 @@ import { TableColumnHeader } from '@/components/Table/TableColumnHeader'; import { PageSize } from '@/components/Table/TablePaginationRow'; import { TagSize } from '@/components/Tag'; -import { viewedFills } from '@/state/account'; import { getCurrentMarketFills, getSubaccountFills } from '@/state/accountSelectors'; import { useAppDispatch, useAppSelector } from '@/state/appTypes'; import { getAssets } from '@/state/assetsSelectors'; @@ -370,13 +370,7 @@ export const FillsTable = forwardRef( const allPerpetualMarkets = orEmptyRecord(useAppSelector(getPerpetualMarkets, shallowEqual)); const allAssets = orEmptyRecord(useAppSelector(getAssets, shallowEqual)); - useEffect(() => { - // marked fills as seen both on mount and dismount (i.e. new fill came in while fills table is being shown) - dispatch(viewedFills(currentMarket)); - return () => { - dispatch(viewedFills(currentMarket)); - }; - }, [currentMarket, dispatch]); + useViewPanel(currentMarket, 'fills'); const symbol = mapIfPresent(currentMarket, (market) => mapIfPresent(allPerpetualMarkets[market]?.assetId, (assetId) => allAssets[assetId]?.id) diff --git a/src/views/tables/OrdersTable.tsx b/src/views/tables/OrdersTable.tsx index ccac89b5e..cad4192e4 100644 --- a/src/views/tables/OrdersTable.tsx +++ b/src/views/tables/OrdersTable.tsx @@ -1,4 +1,4 @@ -import { forwardRef, Key, ReactNode, useEffect, useMemo } from 'react'; +import { forwardRef, Key, ReactNode, useMemo } from 'react'; import { OrderSide } from '@dydxprotocol/v4-client-js'; import { ColumnSize } from '@react-types/table'; @@ -14,6 +14,7 @@ import { TOKEN_DECIMALS } from '@/constants/numbers'; import { EMPTY_ARR } from '@/constants/objects'; import { useBreakpoints } from '@/hooks/useBreakpoints'; +import { useViewPanel } from '@/hooks/useSeen'; import { useStringGetter } from '@/hooks/useStringGetter'; import breakpoints from '@/styles/breakpoints'; @@ -33,13 +34,8 @@ import { Tag, TagSize } from '@/components/Tag'; import { WithTooltip } from '@/components/WithTooltip'; import { MarketTypeFilter, marketTypeMatchesFilter } from '@/pages/trade/types'; -import { viewedOrders } from '@/state/account'; import { calculateIsAccountViewOnly } from '@/state/accountCalculators'; -import { - getCurrentMarketOrders, - getHasUnseenOrderUpdates, - getSubaccountUnclearedOrders, -} from '@/state/accountSelectors'; +import { getCurrentMarketOrders, getSubaccountUnclearedOrders } from '@/state/accountSelectors'; import { useAppDispatch, useAppSelector } from '@/state/appTypes'; import { getAssets } from '@/state/assetsSelectors'; import { openDialog } from '@/state/dialogs'; @@ -436,11 +432,7 @@ export const OrdersTable = forwardRef( const allPerpetualMarkets = orEmptyRecord(useAppSelector(getPerpetualMarkets, shallowEqual)); const allAssets = orEmptyRecord(useAppSelector(getAssets, shallowEqual)); - const hasUnseenOrderUpdates = useAppSelector(getHasUnseenOrderUpdates); - - useEffect(() => { - if (hasUnseenOrderUpdates) dispatch(viewedOrders()); - }, [hasUnseenOrderUpdates]); + useViewPanel(currentMarket, 'openOrders'); const symbol = mapIfPresent(currentMarket, (market) => mapIfPresent(allPerpetualMarkets[market]?.assetId, (assetId) => allAssets[assetId]?.id) From 780a6ddeb59c14b9ef6bb50e05e8955df72e8045 Mon Sep 17 00:00:00 2001 From: Tyler Date: Tue, 21 Jan 2025 19:50:25 -0500 Subject: [PATCH 2/7] fix --- src/abacus-ts/ontology.ts | 14 +++++------- src/abacus-ts/selectors/assets.ts | 12 ---------- src/abacus-ts/selectors/markets.ts | 18 +-------------- src/abacus-ts/selectors/summary.ts | 22 +++++++++++++++++++ src/components/PotentialPositionCard.tsx | 2 +- .../MarketDetails/CurrentMarketDetails.tsx | 11 ++++------ 6 files changed, 33 insertions(+), 46 deletions(-) diff --git a/src/abacus-ts/ontology.ts b/src/abacus-ts/ontology.ts index 15d821290..99a52ebdc 100644 --- a/src/abacus-ts/ontology.ts +++ b/src/abacus-ts/ontology.ts @@ -26,17 +26,15 @@ import { selectLatestIndexerHeight, selectLatestValidatorHeight, } from './selectors/apiStatus'; -import { - selectAllAssetsInfo, - selectAllAssetsInfoLoading, - selectCurrentMarketAssetInfo, -} from './selectors/assets'; import { selectRawIndexerHeightDataLoading, selectRawValidatorHeightDataLoading, } from './selectors/base'; -import { selectCurrentMarketInfo } from './selectors/markets'; -import { selectAllMarketSummaries, selectAllMarketSummariesLoading } from './selectors/summary'; +import { + selectAllMarketSummaries, + selectAllMarketSummariesLoading, + selectCurrentMarketInfo, +} from './selectors/summary'; import { useCurrentMarketTradesValue } from './websocket/trades'; // every leaf is a selector or a paramaterized selector @@ -78,7 +76,6 @@ export const BonsaiCore = { data: selectAllMarketSummaries, loading: selectAllMarketSummariesLoading, }, - assets: { data: selectAllAssetsInfo, loading: selectAllAssetsInfoLoading }, }, network: { indexerHeight: { @@ -96,7 +93,6 @@ export const BonsaiCore = { export const BonsaiHelpers = { currentMarket: { marketInfo: selectCurrentMarketInfo, - assetInfo: selectCurrentMarketAssetInfo, account: { openOrders: selectCurrentMarketOpenOrders, orderHistory: selectCurrentMarketOrderHistory, diff --git a/src/abacus-ts/selectors/assets.ts b/src/abacus-ts/selectors/assets.ts index d4b6cd7a8..b12753fcb 100644 --- a/src/abacus-ts/selectors/assets.ts +++ b/src/abacus-ts/selectors/assets.ts @@ -2,7 +2,6 @@ import { createAppSelector } from '@/state/appTypes'; import { transformAssetsInfo } from '../calculators/assets'; import { selectRawAssets, selectRawAssetsData } from './base'; -import { selectCurrentMarketInfo } from './markets'; export const selectAllAssetsInfo = createAppSelector([selectRawAssetsData], (assets) => transformAssetsInfo(assets) @@ -18,14 +17,3 @@ export const createSelectAssetInfo = () => [selectAllAssetsInfo, (_s, assetId: string) => assetId], (assets, assetId) => assets?.[assetId] ); - -export const selectCurrentMarketAssetInfo = createAppSelector( - [selectCurrentMarketInfo, selectAllAssetsInfo], - (currentMarketInfo, assets) => { - if (currentMarketInfo == null || assets == null) { - return undefined; - } - - return assets[currentMarketInfo.assetId]; - } -); diff --git a/src/abacus-ts/selectors/markets.ts b/src/abacus-ts/selectors/markets.ts index f468e57ea..2485a126f 100644 --- a/src/abacus-ts/selectors/markets.ts +++ b/src/abacus-ts/selectors/markets.ts @@ -1,29 +1,13 @@ import { createAppSelector } from '@/state/appTypes'; -import { getCurrentMarketId } from '@/state/perpetualsSelectors'; import { calculateAllMarkets, formatSparklineData } from '../calculators/markets'; import { mergeLoadableStatus } from '../lib/mapLoadable'; -import { - selectRawMarkets, - selectRawMarketsData, - selectRawSparklines, - selectRawSparklinesData, -} from './base'; +import { selectRawMarketsData, selectRawSparklines, selectRawSparklinesData } from './base'; export const selectAllMarketsInfo = createAppSelector([selectRawMarketsData], (markets) => calculateAllMarkets(markets) ); -export const selectCurrentMarketInfo = createAppSelector( - [selectAllMarketsInfo, getCurrentMarketId], - (markets, currentMarketId) => (currentMarketId ? markets?.[currentMarketId] : undefined) -); - -export const selectAllMarketsInfoLoading = createAppSelector( - [selectRawMarkets], - mergeLoadableStatus -); - export const selectSparklinesLoading = createAppSelector( [selectRawSparklines], mergeLoadableStatus diff --git a/src/abacus-ts/selectors/summary.ts b/src/abacus-ts/selectors/summary.ts index 2ac1b1321..f25a601e9 100644 --- a/src/abacus-ts/selectors/summary.ts +++ b/src/abacus-ts/selectors/summary.ts @@ -1,4 +1,5 @@ import { createAppSelector } from '@/state/appTypes'; +import { getCurrentMarketId } from '@/state/perpetualsSelectors'; import { createMarketSummary } from '../calculators/markets'; import { mergeLoadableStatus } from '../lib/mapLoadable'; @@ -15,3 +16,24 @@ export const selectAllMarketSummaries = createAppSelector( [selectAllMarketsInfo, selectSparkLinesData, selectAllAssetsInfo], (markets, sparklines, assetInfo) => createMarketSummary(markets, sparklines, assetInfo) ); + +export const selectCurrentMarketInfo = createAppSelector( + [selectAllMarketSummaries, getCurrentMarketId], + (markets, currentMarketId) => (currentMarketId ? markets?.[currentMarketId] : undefined) +); + +export const selectAllMarketsInfoLoading = createAppSelector( + [selectRawMarkets], + mergeLoadableStatus +); + +export const selectCurrentMarketAssetInfo = createAppSelector( + [selectCurrentMarketInfo, selectAllAssetsInfo], + (currentMarketInfo, assets) => { + if (currentMarketInfo == null || assets == null) { + return undefined; + } + + return assets[currentMarketInfo.assetId]; + } +); diff --git a/src/components/PotentialPositionCard.tsx b/src/components/PotentialPositionCard.tsx index 7922a4975..24b264ddd 100644 --- a/src/components/PotentialPositionCard.tsx +++ b/src/components/PotentialPositionCard.tsx @@ -38,7 +38,7 @@ export const PotentialPositionCard = ({ const stringGetter = useStringGetter(); const { assetId, displayableAsset, equity, marketId, orders } = pendingPosition; const orderCount = orders.length; - const assets = orEmptyObj(useAppSelector(BonsaiCore.markets.assets.data)); + const assets = orEmptyObj(useAppSelector(BonsaiCore.markets.markets.data)); const { name, logo } = orEmptyObj(assets[assetId]); return ( diff --git a/src/views/MarketDetails/CurrentMarketDetails.tsx b/src/views/MarketDetails/CurrentMarketDetails.tsx index 0e47e0987..42106cb2b 100644 --- a/src/views/MarketDetails/CurrentMarketDetails.tsx +++ b/src/views/MarketDetails/CurrentMarketDetails.tsx @@ -1,10 +1,8 @@ -import { selectCurrentMarketAssetInfo } from '@/abacus-ts/selectors/assets'; -import { selectCurrentMarketInfo } from '@/abacus-ts/selectors/markets'; -import { IndexerPerpetualMarketType } from '@/types/indexer/indexerApiGen'; +import { BonsaiHelpers } from '@/abacus-ts/ontology'; import BigNumber from 'bignumber.js'; -import { shallowEqual } from 'react-redux'; import { STRING_KEYS } from '@/constants/localization'; +import { IndexerPerpetualMarketType } from '@/types/indexer/indexerApiGen'; import { useStringGetter } from '@/hooks/useStringGetter'; @@ -22,8 +20,7 @@ import { MarketDetails } from './MarketDetails'; export const CurrentMarketDetails = () => { const stringGetter = useStringGetter(); - const currentMarketData = useAppSelector(selectCurrentMarketInfo, shallowEqual); - const asset = useAppSelector(selectCurrentMarketAssetInfo); + const currentMarketData = useAppSelector(BonsaiHelpers.currentMarket.marketInfo); const { displayableAsset, @@ -38,7 +35,7 @@ export const CurrentMarketDetails = () => { stepSizeDecimals, } = orEmptyObj(currentMarketData); - const { assetId, logo, name, urls } = orEmptyObj(asset); + const { assetId, logo, name, urls } = orEmptyObj(currentMarketData); const { cmc, website, technicalDoc } = orEmptyObj(urls); const { primary, secondary } = getAssetDescriptionStringKeys(assetId ?? ''); From 83b04ede54f99f7f84dfe6a20c6e44e3f3147b48 Mon Sep 17 00:00:00 2001 From: Tyler Date: Wed, 22 Jan 2025 15:36:14 -0500 Subject: [PATCH 3/7] fix --- src/abacus-ts/rest/funding.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/abacus-ts/rest/funding.ts b/src/abacus-ts/rest/funding.ts index e18e035c7..337aeedee 100644 --- a/src/abacus-ts/rest/funding.ts +++ b/src/abacus-ts/rest/funding.ts @@ -13,7 +13,7 @@ import { MustBigNumber } from '@/lib/numbers'; import { orEmptyObj } from '@/lib/typeUtils'; import { getDirectionFromFundingRate, mapFundingChartObject } from '../calculators/funding'; -import { selectCurrentMarketInfo } from '../selectors/markets'; +import { selectCurrentMarketInfo } from '../selectors/summary'; import { useIndexerClient } from './lib/useIndexer'; export const useCurrentMarketHistoricalFunding = () => { From 07f343f658288c9917bc1381d3993e9b2231fbb4 Mon Sep 17 00:00:00 2001 From: Tyler Date: Wed, 22 Jan 2025 15:53:38 -0500 Subject: [PATCH 4/7] fix --- src/pages/trade/UnopenedIsolatedPositions.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/pages/trade/UnopenedIsolatedPositions.tsx b/src/pages/trade/UnopenedIsolatedPositions.tsx index b7f0ebd03..6ca431b6a 100644 --- a/src/pages/trade/UnopenedIsolatedPositions.tsx +++ b/src/pages/trade/UnopenedIsolatedPositions.tsx @@ -27,8 +27,10 @@ export const MaybeUnopenedIsolatedPositionsDrawer = ({ className, onViewOrders, }: UnopenedIsolatedPositionsProps) => { - const parentSubaccountPositionsLoading = - useAppSelector(BonsaiCore.account.parentSubaccountPositions.loading) === 'pending'; + const parentSubaccountPositionsLoadingState = useAppSelector( + BonsaiCore.account.parentSubaccountPositions.loading + ); + const parentSubaccountLoaded = parentSubaccountPositionsLoadingState === 'success'; const numNormalPositions = ( useAppSelector(BonsaiCore.account.parentSubaccountPositions.data) ?? EMPTY_ARR @@ -37,12 +39,12 @@ export const MaybeUnopenedIsolatedPositionsDrawer = ({ const pendingIsolatedPositions = useAppSelector(BonsaiHelpers.unopenedIsolatedPositions) ?? EMPTY_ARR; - const [isOpen, setIsOpen] = useState(numNormalPositions === 0); + const [isOpen, setIsOpen] = useState(parentSubaccountLoaded && numNormalPositions === 0); useEffect(() => { - if (!parentSubaccountPositionsLoading && numNormalPositions === 0) { + if (parentSubaccountLoaded && numNormalPositions === 0) { setIsOpen(true); } - }, [parentSubaccountPositionsLoading, numNormalPositions]); + }, [parentSubaccountLoaded, numNormalPositions]); const stringGetter = useStringGetter(); From 13d9b1f51421825668179bccbccb8b441f32be7d Mon Sep 17 00:00:00 2001 From: Tyler Date: Wed, 22 Jan 2025 16:03:19 -0500 Subject: [PATCH 5/7] fix --- src/state/accountSelectors.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/state/accountSelectors.ts b/src/state/accountSelectors.ts index bde20a81e..7a88175bc 100644 --- a/src/state/accountSelectors.ts +++ b/src/state/accountSelectors.ts @@ -766,7 +766,8 @@ export const createGetUnseenOrderHistoryCount = () => (o) => (o.updatedAtMilliseconds ?? 0) > (mapIfPresent( - (memory.seenOpenOrders[o.marketId] ?? memory.seenOpenOrders[ALL_MARKETS_STRING])?.time, + (memory.seenOrderHistory[o.marketId] ?? memory.seenOrderHistory[ALL_MARKETS_STRING]) + ?.time, (t) => new Date(t).getTime() ) ?? 0) ); From 6ffc317f2cea1097f3a62f37f677617df56432fb Mon Sep 17 00:00:00 2001 From: Tyler Date: Wed, 22 Jan 2025 16:37:20 -0500 Subject: [PATCH 6/7] fix --- src/abacus-ts/calculators/markets.ts | 3 ++- src/abacus-ts/ontology.ts | 3 +++ src/abacus-ts/selectors/summary.ts | 27 +++++++++++++++++++ src/abacus-ts/types/summaryTypes.ts | 2 +- .../MarketDetails/CurrentMarketDetails.tsx | 2 +- 5 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/abacus-ts/calculators/markets.ts b/src/abacus-ts/calculators/markets.ts index 94f376ec4..722b83ae2 100644 --- a/src/abacus-ts/calculators/markets.ts +++ b/src/abacus-ts/calculators/markets.ts @@ -81,7 +81,8 @@ function calculateDerivedMarketDisplayItems(market: IndexerWsBaseMarketObject) { function calculateDerivedMarketCore(market: IndexerWsBaseMarketObject) { return { - effectiveInitialMarginFraction: getMarketEffectiveInitialMarginForMarket(market), + effectiveInitialMarginFraction: + getMarketEffectiveInitialMarginForMarket(market)?.toNumber() ?? null, openInterestUSDC: MustBigNumber(market.openInterest) .times(market.oraclePrice ?? 0) .toNumber(), diff --git a/src/abacus-ts/ontology.ts b/src/abacus-ts/ontology.ts index 99a52ebdc..fbe053c5d 100644 --- a/src/abacus-ts/ontology.ts +++ b/src/abacus-ts/ontology.ts @@ -34,6 +34,7 @@ import { selectAllMarketSummaries, selectAllMarketSummariesLoading, selectCurrentMarketInfo, + selectCurrentMarketInfoStable, } from './selectors/summary'; import { useCurrentMarketTradesValue } from './websocket/trades'; @@ -93,6 +94,8 @@ export const BonsaiCore = { export const BonsaiHelpers = { currentMarket: { marketInfo: selectCurrentMarketInfo, + // marketInfo but with only the properties that rately change, for fewer rerenders + stableMarketInfo: selectCurrentMarketInfoStable, account: { openOrders: selectCurrentMarketOpenOrders, orderHistory: selectCurrentMarketOrderHistory, diff --git a/src/abacus-ts/selectors/summary.ts b/src/abacus-ts/selectors/summary.ts index 11ef29fb6..b270db85d 100644 --- a/src/abacus-ts/selectors/summary.ts +++ b/src/abacus-ts/selectors/summary.ts @@ -1,9 +1,13 @@ +import { omit } from 'lodash'; +import { shallowEqual } from 'react-redux'; + import { createAppSelector } from '@/state/appTypes'; import { getFavoritedMarkets } from '@/state/appUiConfigsSelectors'; import { getCurrentMarketId } from '@/state/perpetualsSelectors'; import { createMarketSummary } from '../calculators/markets'; import { mergeLoadableStatus } from '../lib/mapLoadable'; +import { PerpetualMarketSummary } from '../types/summaryTypes'; import { selectAllAssetsInfo } from './assets'; import { selectRawAssets, selectRawMarkets } from './base'; import { selectAllMarketsInfo, selectSparkLinesData } from './markets'; @@ -24,6 +28,29 @@ export const selectCurrentMarketInfo = createAppSelector( (markets, currentMarketId) => (currentMarketId ? markets?.[currentMarketId] : undefined) ); +const unstablePaths = [ + 'oraclePrice', + 'priceChange24H', + 'percentChange24h', + 'nextFundingRate', + 'volume24H', + 'trades24H', + 'openInterest', + 'openInterestUSDC', +] satisfies Array; +type UnstablePaths = (typeof unstablePaths)[number]; + +export const selectCurrentMarketInfoStable = createAppSelector( + [selectCurrentMarketInfo], + (market): undefined | Omit => + market == null ? market : omit(market, ...unstablePaths), + { + memoizeOptions: { + resultEqualityCheck: shallowEqual, + }, + } +); + export const selectAllMarketsInfoLoading = createAppSelector( [selectRawMarkets], mergeLoadableStatus diff --git a/src/abacus-ts/types/summaryTypes.ts b/src/abacus-ts/types/summaryTypes.ts index 9bf1741af..47d253f3c 100644 --- a/src/abacus-ts/types/summaryTypes.ts +++ b/src/abacus-ts/types/summaryTypes.ts @@ -31,7 +31,7 @@ export type MarketInfo = IndexerWsBaseMarketObject & { assetId: string; displayableAsset: string; displayableTicker: string; - effectiveInitialMarginFraction: BigNumber | null; + effectiveInitialMarginFraction: number | null; openInterestUSDC: number; percentChange24h: number | null; stepSizeDecimals: number; diff --git a/src/views/MarketDetails/CurrentMarketDetails.tsx b/src/views/MarketDetails/CurrentMarketDetails.tsx index 42106cb2b..54dcde8db 100644 --- a/src/views/MarketDetails/CurrentMarketDetails.tsx +++ b/src/views/MarketDetails/CurrentMarketDetails.tsx @@ -20,7 +20,7 @@ import { MarketDetails } from './MarketDetails'; export const CurrentMarketDetails = () => { const stringGetter = useStringGetter(); - const currentMarketData = useAppSelector(BonsaiHelpers.currentMarket.marketInfo); + const currentMarketData = useAppSelector(BonsaiHelpers.currentMarket.stableMarketInfo); const { displayableAsset, From af2a340ed04d02ec2dee3635e0aa68bcb6489e0a Mon Sep 17 00:00:00 2001 From: Tyler Date: Wed, 22 Jan 2025 17:23:09 -0500 Subject: [PATCH 7/7] fix --- src/abacus-ts/ontology.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/abacus-ts/ontology.ts b/src/abacus-ts/ontology.ts index fbe053c5d..ec075ec17 100644 --- a/src/abacus-ts/ontology.ts +++ b/src/abacus-ts/ontology.ts @@ -94,7 +94,7 @@ export const BonsaiCore = { export const BonsaiHelpers = { currentMarket: { marketInfo: selectCurrentMarketInfo, - // marketInfo but with only the properties that rately change, for fewer rerenders + // marketInfo but with only the properties that rarely change, for fewer rerenders stableMarketInfo: selectCurrentMarketInfoStable, account: { openOrders: selectCurrentMarketOpenOrders,