From ae124dc1403dc35cf0ee492094b6c486c87a763f Mon Sep 17 00:00:00 2001 From: tyleroooo Date: Fri, 20 Dec 2024 11:55:39 -0500 Subject: [PATCH] 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)