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)