Revert "feat: undo ui-facing new abacus changes (#1390)"

This reverts commit 994e8ce.
dydxprotocol · Dec 20, 2024 · ae124dc · ae124dc
1 parent 994e8ce
commit ae124dc
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 63 deletions.
diff --git 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
@@ -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: (
         <Output
           useGrouping
-          value={minOrderSize}
+          value={stepSize}
           type={OutputType.Asset}
-          tag={getDisplayableAssetFromBaseAsset(id)}
+          tag={displayableAsset}
           fractionDigits={stepSizeDecimals}
         />
       ),
@@ -149,11 +146,11 @@ export const CurrentMarketDetails = () => {
   return (
     <MarketDetails
       assetName={name}
-      assetIcon={{ symbol: id, logoUrl: resources?.imageUrl }}
+      assetIcon={{ symbol: assetId, logoUrl: logo }}
       marketDetailItems={items}
-      primaryDescription={stringGetter({ key: `APP.${primaryDescriptionKey}` })}
-      secondaryDescription={stringGetter({ key: `APP.${secondaryDescriptionKey}` })}
-      urls={{ technicalDoc: whitepaperLink, website: websiteLink, cmc: coinMarketCapsLink }}
+      primaryDescription={stringGetter({ key: primary })}
+      secondaryDescription={stringGetter({ key: secondary })}
+      urls={{ technicalDoc, website, cmc }}
     />
   );
 };
diff --git 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
@@ -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)