Create MarketCapTitle component

src/app/components/Tokens/MarketCapTitle.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Box from '@mui/material/Box'
+import Tooltip from '@mui/material/Tooltip'
+import InfoIcon from '@mui/icons-material/Info'
+import { SearchScope } from '../../../types/searchScope'
+import { COLORS } from '../../../styles/theme/colors'
+import { getLayerLabels } from '../../utils/content'
+
+type MarketCapTitlePros = {
+  scope: SearchScope
+}
+
+export const MarketCapTitle: FC<MarketCapTitlePros> = ({ scope }) => {
+  const { t } = useTranslation()
+  const labels = getLayerLabels(t)
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2 }}>
+      {t('tokens.marketCap')}
+      <Tooltip title={t('tokens.marketCapTooltip', { layer: labels[scope.layer] })} placement="top">
+        <InfoIcon htmlColor={COLORS.brandDark} />
+      </Tooltip>
+    </Box>
+  )
+}

src/app/components/Tokens/TokenList.tsx

@@ -12,15 +12,13 @@ import { getTokenTypeDescription, getTokenTypeStrictName } from '../../utils/tok
 import { SearchScope } from '../../../types/searchScope'
 import { FC } from 'react'
 import Typography from '@mui/material/Typography'
-import Tooltip from '@mui/material/Tooltip'
-import InfoIcon from '@mui/icons-material/Info'
 import { COLORS } from '../../../styles/theme/colors'
 import { SxProps } from '@mui/material/styles'
 import { RoundedBalance } from '../RoundedBalance'
-import { getLayerLabels } from '../../utils/content'
 import { getTokenMarketCap } from '../../utils/tokens'
 import { useTokenPrice } from '../../../coin-gecko/api'
 import { Ticker } from '../../../types/ticker'
+import { MarketCapTitle } from './MarketCapTitle'
 
 type TokensProps = {
   tokens?: EvmToken[]
@@ -63,7 +61,6 @@ export const TokenTypeTag: FC<{ tokenType: EvmTokenType | undefined; sx?: SxProp
 export const TokenList = (props: TokensProps) => {
   const { isLoading, tokens, pagination, limit } = props
   const { t } = useTranslation()
-  const labels = getLayerLabels(t)
   const priceQuery = useTokenPrice(Ticker.ROSE, 'usd')
   const tableColumns: TableColProps[] = [
     { key: 'index', content: '#' },
@@ -76,10 +73,7 @@ export const TokenList = (props: TokensProps) => {
       key: 'marketCap',
       content: (
         <Box sx={{ display: 'inline-flex', gap: 2 }}>
-          <Box>{t('tokens.marketCap')}</Box>
-          <Tooltip title={t('tokens.marketCapTooltip', { layer: labels[props.scope.layer] })} placement="top">
-            <InfoIcon htmlColor={COLORS.brandDark} />
-          </Tooltip>
+          <MarketCapTitle scope={props.scope} />
         </Box>
       ),
     },

src/app/pages/TokenDashboardPage/TokenMarketCapCard.tsx

@@ -1,19 +1,22 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Skeleton from '@mui/material/Skeleton'
+import { SearchScope } from '../../../types/searchScope'
+import { MarketCapTitle } from '../../components/Tokens/MarketCapTitle'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { getTokenMarketCap } from '../../utils/tokens'
 
 type TokenMarketCapCardProps = {
   isLoading: boolean
   rosePriceInUsd: number | undefined
+  scope: SearchScope
 }
 
-export const TokenMarketCapCard: FC<TokenMarketCapCardProps> = ({ isLoading, rosePriceInUsd }) => {
+export const TokenMarketCapCard: FC<TokenMarketCapCardProps> = ({ isLoading, rosePriceInUsd, scope }) => {
   const { t } = useTranslation()
 
   return (
-    <SnapshotTextCard title={t('tokens.marketCap')} withConstantHeight>
+    <SnapshotTextCard title={<MarketCapTitle scope={scope} />} withConstantHeight>
       {isLoading ? (
         <Skeleton variant="text" />
       ) : (

src/app/pages/TokenDashboardPage/TokenSnapshot.tsx

@@ -56,7 +56,11 @@ export const TokenSnapshot: FC<TokenSnapshotProps> = ({
           <TokenHoldersCountCard scope={scope} address={address} />
         </StyledGrid>
         <StyledGrid item xs={22} md={6}>
-          <TokenMarketCapCard isLoading={isRosePriceInUsdLoading} rosePriceInUsd={rosePriceInUsd} />
+          <TokenMarketCapCard
+            isLoading={isRosePriceInUsdLoading}
+            rosePriceInUsd={rosePriceInUsd}
+            scope={scope}
+          />
         </StyledGrid>
       </Grid>
     </>