chore(displayId): Migrate marketId rendering to displayId (#919)

dydxprotocol · Aug 26, 2024 · 693d12d · 693d12d
1 parent 624bcb7
commit 693d12d
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 20 deletions.
diff --git a/src/hooks/useMarketsData.ts b/src/hooks/useMarketsData.ts
@@ -93,7 +93,7 @@ export const useMarketsData = (
           marketData.configs
         );
       });
-  }, [allPerpetualMarkets, allAssets, sevenDaysSparklineData]);
+  }, [allPerpetualClobIds, allPerpetualMarkets, allAssets, sevenDaysSparklineData]);
 
   const filteredMarkets = useMemo(() => {
     const filtered = markets.filter(filterFunctions[filter]);

diff --git a/src/pages/markets/Markets.tsx b/src/pages/markets/Markets.tsx
@@ -45,7 +45,7 @@ const Markets = () => {
       );
     }
     return null;
-  }, []);
+  }, [featureFlags, stringGetter]);
 
   return (
     <$Page>

diff --git a/src/pages/trade/MarketSelectorAndStats.tsx b/src/pages/trade/MarketSelectorAndStats.tsx
@@ -9,11 +9,11 @@ import { MarketsDropdown } from '@/views/MarketsDropdown';
 
 import { useAppSelector } from '@/state/appTypes';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
-import { getCurrentMarketId } from '@/state/perpetualsSelectors';
+import { getCurrentMarketDisplayId } from '@/state/perpetualsSelectors';
 
 export const MarketSelectorAndStats = ({ className }: { className?: string }) => {
   const { id = '' } = useAppSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
-  const currentMarketId = useAppSelector(getCurrentMarketId);
+  const currentMarketId = useAppSelector(getCurrentMarketDisplayId) ?? '';
 
   return (
     <$Container className={className}>

diff --git a/src/pages/trade/TradeHeaderMobile.tsx b/src/pages/trade/TradeHeaderMobile.tsx
@@ -21,7 +21,7 @@ export const TradeHeaderMobile = () => {
   const { name, id } = useAppSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
   const navigate = useNavigate();
 
-  const { market, priceChange24H, priceChange24HPercent } =
+  const { displayId, priceChange24H, priceChange24HPercent } =
     useAppSelector(getCurrentMarketData, shallowEqual) ?? {};
 
   return (
@@ -31,7 +31,7 @@ export const TradeHeaderMobile = () => {
         <AssetIcon symbol={id} tw="text-[2.5rem]" />
         <$Name>
           <h3>{name}</h3>
-          <span>{market}</span>
+          <span>{displayId}</span>
         </$Name>
       </div>
 

diff --git a/src/state/perpetualsSelectors.ts b/src/state/perpetualsSelectors.ts
@@ -15,10 +15,18 @@ import { createAppSelector } from './appTypes';
 export const getMarketFilter = (state: RootState) => state.perpetuals.marketFilter;
 
 /**
- * @returns marketId of the market the user is currently viewing
+ * @returns marketId of the market the user is currently viewing (Internal)
  */
 export const getCurrentMarketId = (state: RootState) => state.perpetuals.currentMarketId;
 
+/**
+ * @returns displayId of the currentMarket the user is viewing (Render)
+ */
+export const getCurrentMarketDisplayId = (state: RootState) => {
+  const currentMarketId = getCurrentMarketId(state) ?? '';
+  return state.perpetuals?.markets?.[currentMarketId]?.displayId;
+};
+
 /**
  * @returns assetId of the currentMarket
  */

diff --git a/src/views/MarketDetails.tsx b/src/views/MarketDetails.tsx
@@ -30,7 +30,7 @@ import { MarketLinks } from './MarketLinks';
 export const MarketDetails: React.FC = () => {
   const stringGetter = useStringGetter();
   const { isTablet } = useBreakpoints();
-  const { configs, market } = useAppSelector(getCurrentMarketData, shallowEqual) ?? {};
+  const { configs, displayId, market } = useAppSelector(getCurrentMarketData, shallowEqual) ?? {};
   const { id, name, resources } = useAppSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
 
   if (!configs) return null;
@@ -63,6 +63,11 @@ export const MarketDetails: React.FC = () => {
     {
       key: 'market-name',
       label: stringGetter({ key: STRING_KEYS.MARKET_NAME }),
+      value: displayId,
+    },
+    {
+      key: 'ticker',
+      label: stringGetter({ key: STRING_KEYS.TICKER }),
       value: market,
     },
     {

diff --git a/src/views/MarketsDropdown.tsx b/src/views/MarketsDropdown.tsx
@@ -58,19 +58,19 @@ const MarketsDropdownContent = ({
       [
         {
           columnKey: 'market',
-          getCellValue: (row) => row.market,
+          getCellValue: (row) => row.displayId,
           label: stringGetter({ key: STRING_KEYS.MARKET }),
           renderCell: ({
             assetId,
-            id,
+            displayId,
             isNew,
             effectiveInitialMarginFraction,
             initialMarginFraction,
           }) => (
             <$MarketName isFavorited={false}>
               {/* TRCL-1693 <Icon iconName={IconName.Star} /> */}
               <AssetIcon symbol={assetId} />
-              <h2>{id}</h2>
+              <h2>{displayId}</h2>
               <Tag>
                 <Output
                   type={OutputType.Multiple}
@@ -141,7 +141,7 @@ const MarketsDropdownContent = ({
     }
 
     return null;
-  }, [filter]);
+  }, [filter, stringGetter]);
 
   const [hasSeenElectionBannerTrumpWin, setHasSeenElectionBannerTrupmWin] = useLocalStorage({
     key: LocalStorageKey.HasSeenElectionBannerTRUMPWIN,
@@ -176,7 +176,14 @@ const MarketsDropdownContent = ({
     }
 
     return null;
-  }, [hasSeenElectionBannerTrumpWin]);
+  }, [
+    currentDate,
+    setHasSeenElectionBannerTrupmWin,
+    hasSeenElectionBannerTrumpWin,
+    stringGetter,
+    closeDropdown,
+    featureFlags,
+  ]);
 
   return (
     <>

diff --git a/src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx b/src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx
@@ -20,6 +20,7 @@ export const FillDetailsDialog = ({ fillId, setIsOpen }: DialogProps<FillDetails
   const {
     asset,
     createdAtMilliseconds,
+    displayId,
     fee,
     marketId,
     orderSide,
@@ -35,6 +36,11 @@ export const FillDetailsDialog = ({ fillId, setIsOpen }: DialogProps<FillDetails
       {
         key: 'market',
         label: stringGetter({ key: STRING_KEYS.MARKET }),
+        value: displayId,
+      },
+      {
+        key: 'market-id',
+        label: stringGetter({ key: STRING_KEYS.TICKER }),
         value: marketId,
       },
       {

diff --git a/src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx b/src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx
@@ -53,6 +53,7 @@ export const OrderDetailsDialog = ({
     asset,
     cancelReason,
     createdAtMilliseconds,
+    displayId,
     expiresAtMilliseconds,
     marketId,
     orderFlags,
@@ -102,6 +103,11 @@ export const OrderDetailsDialog = ({
       {
         key: 'market',
         label: stringGetter({ key: STRING_KEYS.MARKET }),
+        value: displayId,
+      },
+      {
+        key: 'market-id',
+        label: stringGetter({ key: STRING_KEYS.TICKER }),
         value: marketId,
       },
       {

diff --git a/src/views/tables/FillsTable.tsx b/src/views/tables/FillsTable.tsx
@@ -150,8 +150,8 @@ const getFillsTableColumnDef = ({
         columnKey: 'market',
         getCellValue: (row) => row.marketId,
         label: stringGetter({ key: STRING_KEYS.MARKET }),
-        renderCell: ({ asset, marketId }) => (
-          <MarketTableCell asset={asset ?? undefined} marketId={marketId} />
+        renderCell: ({ asset, displayId }) => (
+          <MarketTableCell asset={asset ?? undefined} marketId={displayId} />
         ),
       },
       [FillsTableColumnKey.Action]: {

diff --git a/src/views/tables/OrdersTable.tsx b/src/views/tables/OrdersTable.tsx
@@ -104,8 +104,8 @@ const getOrdersTableColumnDef = ({
         columnKey: 'marketId',
         getCellValue: (row) => row.marketId,
         label: stringGetter({ key: STRING_KEYS.MARKET }),
-        renderCell: ({ asset, marketId }) => (
-          <MarketTableCell asset={asset ?? undefined} marketId={marketId} />
+        renderCell: ({ asset, displayId }) => (
+          <MarketTableCell asset={asset ?? undefined} marketId={displayId} />
         ),
       },
       [OrdersTableColumnKey.Status]: {

diff --git a/src/views/tables/PositionsTable.tsx b/src/views/tables/PositionsTable.tsx
@@ -176,13 +176,13 @@ const getPositionsTableColumnDef = ({
       },
       [PositionsTableColumnKey.Market]: {
         columnKey: 'market',
-        getCellValue: (row) => row.id,
+        getCellValue: (row) => row.displayId,
         label: stringGetter({ key: STRING_KEYS.MARKET }),
         hideOnBreakpoint: MediaQueryKeys.isMobile,
-        renderCell: ({ id, asset, leverage }) => (
+        renderCell: ({ displayId, asset, leverage }) => (
           <MarketTableCell
             asset={asset}
-            marketId={id}
+            marketId={displayId}
             leverage={leverage?.current ?? undefined}
             isHighlighted
           />