extract constant

Author: n3ps

ui/components/app/assets/asset-list/cells/generic-asset-cell-layout.tsx

@@ -6,6 +6,7 @@ import {
   BlockSize,
   JustifyContent,
 } from '../../../../../helpers/constants/design-system';
+import { ASSET_CELL_HEIGHT } from '../../constants';
 
 type GenericAssetCellLayoutProps = {
   onClick?: () => void;
@@ -54,7 +55,7 @@ export default function GenericAssetCellLayout({
         paddingRight={4}
         width={BlockSize.Full}
         style={{
-          height: 62,
+          height: ASSET_CELL_HEIGHT,
           cursor: onClick ? 'pointer' : 'auto',
           backgroundColor:
             !disableHover && isHovered

ui/components/app/assets/constants.ts

@@ -9,3 +9,5 @@ export const ACCOUNT_TYPE_LABELS: Partial<Record<KeyringAccountType, string>> =
     [BtcAccountType.P2wpkh]: 'Native SegWit',
     [BtcAccountType.P2tr]: 'Taproot',
   };
+
+export const ASSET_CELL_HEIGHT = 62;

ui/components/app/assets/token-list/token-list.tsx

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { type CaipChainId, type Hex } from '@metamask/utils';
 import { NON_EVM_TESTNET_IDS } from '@metamask/multichain-network-controller';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import TokenCell from '../token-cell';
+import { ASSET_CELL_HEIGHT } from '../constants';
 import {
   getEnabledNetworksByNamespace,
   getIsMultichainAccountsState2Enabled,
@@ -150,8 +151,8 @@ function TokenList({ onTokenClick, safeChains }: TokenListProps) {
 
   const virtualizer = useVirtualizer({
     count: sortedFilteredTokens.length,
-    getScrollElement: () => scrollContainerRef.current,
-    estimateSize: () => 62, // TokenCell height from generic-asset-cell-layout.tsx
+    getScrollElement: () => scrollContainerRef?.current || null,
+    estimateSize: () => ASSET_CELL_HEIGHT,
     overscan: 5,
   });