refactor Merits dashboard and Entities components

pages/account/merits.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-// const RewardsDashboard = dynamic(() => import('ui/pages/RewardsDashboard'), { ssr: false });
+const RewardsDashboard = dynamic(() => import('ui/pages/RewardsDashboard'), { ssr: false });
 
 const Page: NextPage = () => {
   return (
     <PageNextJs pathname="/account/merits">
-      { /* <RewardsDashboard/> */ }
+      <RewardsDashboard/>
     </PageNextJs>
   );
 };

ui/contractVerification/types.ts

 import type { SmartContractLicenseType } from 'types/api/contract';
 import type { SmartContractVerificationMethod } from 'types/client/contract';
-import type { Option } from 'ui/shared/forms/inputs/select/types';
+
+import type { SelectOption } from 'toolkit/chakra/select';
 
 export interface ContractLibrary {
   name: string;
@@ -50,7 +51,7 @@ export interface FormFieldsStandardInputZk extends FormFieldsBase {
 
 export interface FormFieldsSourcify extends FormFieldsBase {
   sources: Array<File>;
-  contract_index?: Option;
+  contract_index?: SelectOption;
 }
 
 export interface FormFieldsMultiPartFile extends FormFieldsBase {

ui/pages/Address.tsx

@@ -379,9 +379,7 @@ const AddressPageContent = () => {
         <EnsEntity
           domain={ addressQuery.data?.ens_domain_name }
           protocol={ !addressEnsDomainsQuery.isPending ? addressMainDomain?.protocol : null }
-          fontFamily="heading"
-          fontSize="lg"
-          fontWeight={ 500 }
+          variant="subheading"
           mr={ 1 }
           maxW="300px"
         />
@@ -395,9 +393,7 @@ const AddressPageContent = () => {
           implementations: null,
         }}
         isLoading={ isLoading }
-        fontFamily="heading"
-        fontSize="lg"
-        fontWeight={ 500 }
+        variant="subheading"
         noLink
         isSafeAddress={ isSafeAddress }
         icon={{ color: isSafeAddress ? { _light: 'black', _dark: 'white' } : undefined }}

ui/pages/Blob.tsx

@@ -41,7 +41,7 @@ const BlobPageContent = () => {
   })();
 
   const titleSecondRow = (
-    <BlobEntity hash={ hash } noLink fontWeight={ 500 } fontFamily="heading"/>
+    <BlobEntity hash={ hash } noLink variant="subheading"/>
   );
 
   return (

ui/pages/ContractVerificationForAddress.tsx

@@ -89,9 +89,7 @@ const ContractVerificationForAddress = () => {
       <AddressEntity
         address={{ hash, is_contract: true }}
         noLink
-        fontFamily="heading"
-        fontSize="lg"
-        fontWeight={ 500 }
+        variant="subheading"
         mb={ 12 }
         w="min-content"
         maxW="100%"

ui/pages/NameDomain.tsx

@@ -50,9 +50,6 @@ const NameDomain = () => {
     <Flex
       columnGap={ 3 }
       rowGap={ 3 }
-      fontFamily="heading"
-      fontSize="lg"
-      fontWeight={ 500 }
       alignItems="center"
       w="100%"
       flexWrap={{ base: 'wrap', lg: 'nowrap' }}
@@ -63,12 +60,14 @@ const NameDomain = () => {
         isLoading={ isLoading }
         noLink
         maxW={{ lg: infoQuery.data?.resolved_address ? '300px' : 'max-content' }}
+        variant="subheading"
       />
       { infoQuery.data?.resolved_address && (
         <Flex alignItems="center" maxW="100%" columnGap={ 3 }>
           <AddressEntity
             address={ infoQuery.data?.resolved_address }
             isLoading={ isLoading }
+            variant="subheading"
           />
           <Tooltip content="Lookup for related domain names">
             <Link

ui/pages/Pool.tsx

@@ -124,7 +124,7 @@ const Pool = () => {
           <PoolEntity.Icon
             pool={ data }
             isLoading={ isPlaceholderData }
-            size="lg"
+            variant="heading"
           />
         ) : null }
         contentAfter={ <Skeleton loading={ isPlaceholderData }><Tag>Pool</Tag></Skeleton> }

ui/pages/RewardsDashboard.tsx

-import { Flex, Image, Alert } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 
 import config from 'configs/app';
 import { useRewardsContext } from 'lib/contexts/rewards';
 import { apos } from 'lib/html-entities';
+import { Alert } from 'toolkit/chakra/alert';
+import { Image } from 'toolkit/chakra/image';
+import { Link } from 'toolkit/chakra/link';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import DailyRewardClaimButton from 'ui/rewards/dashboard/DailyRewardClaimButton';
 import RewardsDashboardCard from 'ui/rewards/dashboard/RewardsDashboardCard';
 import RewardsDashboardCardValue from 'ui/rewards/dashboard/RewardsDashboardCardValue';
 import RewardsReadOnlyInputWithCopy from 'ui/rewards/RewardsReadOnlyInputWithCopy';
 import AdBanner from 'ui/shared/ad/AdBanner';
-import Skeleton from 'ui/shared/chakra/Skeleton';
-import LinkExternal from 'ui/shared/links/LinkExternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 
@@ -51,9 +53,9 @@ const RewardsDashboard = () => {
             <span>
               The Blockscout Merits Program is just getting started! Learn more about the details,
               features, and future plans in our{ ' ' }
-              <LinkExternal href="https://www.blog.blockscout.com/blockscout-merits-rewarding-block-explorer-skills">
+              <Link external href="https://www.blog.blockscout.com/blockscout-merits-rewarding-block-explorer-skills">
                 blog post
-              </LinkExternal>.
+              </Link>.
             </span>
           ) }
         />
@@ -76,9 +78,9 @@ const RewardsDashboard = () => {
               hint={ (
                 <>
                   Total number of Merits earned from all activities.{ ' ' }
-                  <LinkExternal href="https://docs.blockscout.com/using-blockscout/merits">
+                  <Link external href="https://docs.blockscout.com/using-blockscout/merits">
                     More info on Merits
-                  </LinkExternal>
+                  </Link>
                 </>
               ) }
             />
@@ -103,12 +105,9 @@ const RewardsDashboard = () => {
               <>
                 Current number of consecutive days you{ apos }ve claimed your daily Merits.{ ' ' }
                 The longer your streak, the more daily Merits you can earn.{ ' ' }
-                <LinkExternal
-                  href={ `https://x.com/intent/tweet?text=${ encodeURIComponent(shareText) }` }
-                  fontWeight="500"
-                >
+                <Link external href={ `https://x.com/intent/tweet?text=${ encodeURIComponent(shareText) }` } fontWeight="500">
                   Share on X
-                </LinkExternal>
+                </Link>
               </>
             ) }
             direction="column-reverse"
@@ -124,12 +123,9 @@ const RewardsDashboard = () => {
               hint={ (
                 <>
                   See the{ ' ' }
-                  <LinkExternal
-                    href="https://docs.blockscout.com/using-blockscout/merits/streak-rewards"
-                    isExternal
-                  >
+                  <Link external href="https://docs.blockscout.com/using-blockscout/merits/streak-rewards">
                     docs
-                  </LinkExternal>{ ' ' }
+                  </Link>{ ' ' }
                   to learn how your streak number affects daily rewards
                 </>
               ) }
@@ -142,7 +138,7 @@ const RewardsDashboard = () => {
             description={ (
               <>
                 Refer friends and boost your Merits! You receive a{ ' ' }
-                <Skeleton as="span" isLoaded={ !rewardsConfigQuery.isPending }>
+                <Skeleton as="span" loading={ rewardsConfigQuery.isPending }>
                   { rewardsConfigQuery.data?.rewards.referral_share ?
                     `${ Number(rewardsConfigQuery.data?.rewards.referral_share) * 100 }%` :
                     'N/A'
@@ -199,15 +195,16 @@ const RewardsDashboard = () => {
                 alt="Badges"
                 w="260px"
                 h="86px"
-                fallback={ <Skeleton w="260px" h="86px"/> }
+                fallback={ <Skeleton loading w="260px" h="86px"/> }
               />
-              <LinkExternal
+              <Link
+                external
                 href="https://merits.blockscout.com/?tab=badges&utm_source=blockscout&utm_medium=dashboard"
-                fontSize="md"
+                textStyle="md"
                 fontWeight="500"
               >
                 View badges
-              </LinkExternal>
+              </Link>
             </Flex>
           </RewardsDashboardCard>
         </Flex>

ui/pages/ValidatorZilliqa.tsx

@@ -45,9 +45,6 @@ const ValidatorZilliqa = () => {
     <Flex
       columnGap={ 3 }
       rowGap={ 3 }
-      fontFamily="heading"
-      fontSize="lg"
-      fontWeight={ 500 }
       alignItems="center"
       w="100%"
       flexWrap={{ base: 'wrap', lg: 'nowrap' }}
@@ -55,6 +52,7 @@ const ValidatorZilliqa = () => {
       <ValidatorEntity
         id={ query.data?.bls_public_key ?? '' }
         isLoading={ isLoading }
+        variant="subheading"
         noLink
       />
     </Flex>

ui/publicTags/submit/types.ts

 import type { AddressMetadataTagType } from 'types/api/addressMetadata';
-import type { Option } from 'ui/shared/forms/inputs/select/types';
+
+import type { SelectOption } from 'toolkit/chakra/select';
 
 export interface FormFields {
   requesterName: string;
@@ -13,7 +14,7 @@ export interface FormFields {
 
 export interface FormFieldTag {
   name: string;
-  type: Array<Option<AddressMetadataTagType>>;
+  type: Array<SelectOption<AddressMetadataTagType>>;
   url: string | undefined;
   bgColor: string | undefined;
   textColor: string | undefined;

ui/rewards/dashboard/DailyRewardClaimButton.tsx

-import { Button, useBoolean, Flex, useColorModeValue } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { SECOND } from 'lib/consts';
 import { useRewardsContext } from 'lib/contexts/rewards';
+import { Button } from 'toolkit/chakra/button';
 import splitSecondsInPeriods from 'ui/blockCountdown/splitSecondsInPeriods';
 
 const DailyRewardClaimButton = () => {
   const { balancesQuery, dailyRewardQuery, claim } = useRewardsContext();
-  const [ isClaiming, setIsClaiming ] = useBoolean(false);
+  const [ isClaiming, setIsClaiming ] = React.useState(false);
   const [ timeLeft, setTimeLeft ] = React.useState<string>('');
 
   const dailyRewardValue = useMemo(() =>
@@ -17,7 +18,7 @@ const DailyRewardClaimButton = () => {
   [ dailyRewardQuery.data ]);
 
   const handleClaim = useCallback(async() => {
-    setIsClaiming.on();
+    setIsClaiming(true);
     try {
       await claim();
       await Promise.all([
@@ -25,7 +26,7 @@ const DailyRewardClaimButton = () => {
         dailyRewardQuery.refetch(),
       ]);
     } catch (error) {}
-    setIsClaiming.off();
+    setIsClaiming(false);
   }, [ claim, setIsClaiming, balancesQuery, dailyRewardQuery ]);
 
   useEffect(() => {
@@ -63,7 +64,6 @@ const DailyRewardClaimButton = () => {
   }, [ dailyRewardQuery ]);
 
   const isLoading = isClaiming || dailyRewardQuery.isPending || dailyRewardQuery.isFetching;
-  const timerBgColor = useColorModeValue('gray.200', 'gray.800');
 
   return !isLoading && !dailyRewardQuery.data?.available ? (
     <Flex
@@ -72,7 +72,7 @@ const DailyRewardClaimButton = () => {
       justifyContent="center"
       borderRadius="base"
       color="gray.500"
-      bgColor={ timerBgColor }
+      bgColor={{ _light: 'gray.200', _dark: 'gray.800' }}
       fontSize="md"
       fontWeight="600"
       cursor="default"
@@ -80,7 +80,7 @@ const DailyRewardClaimButton = () => {
       Next claim in { timeLeft || 'N/A' }
     </Flex>
   ) : (
-    <Button onClick={ handleClaim } isLoading={ isLoading }>
+    <Button onClick={ handleClaim } loading={ isLoading }>
       Claim { dailyRewardValue } Merits
     </Button>
   );

ui/rewards/dashboard/RewardsDashboardCard.tsx

-import { Flex, Text, useColorModeValue, Tag } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import React from 'react';
 
+import { Badge } from 'toolkit/chakra/badge';
+
 type Props = {
   title?: string;
   description: string | React.ReactNode;
@@ -22,7 +24,7 @@ const RewardsDashboardCard = ({
       justifyContent={ direction === 'column-reverse' ? 'flex-end' : 'flex-start' }
       p={{ base: 1.5, md: 2 }}
       border="1px solid"
-      borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
+      borderColor={{ _light: 'gray.200', _dark: 'whiteAlpha.200' }}
       borderRadius="lg"
       gap={{ base: 1, md: direction === 'row' ? 10 : 1 }}
       w={ direction === 'row' ? 'full' : 'auto' }
@@ -37,7 +39,7 @@ const RewardsDashboardCard = ({
         { title && (
           <Flex alignItems="center" gap={ 2 }>
             <Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="500">{ title }</Text>
-            { availableSoon && <Tag colorScheme="blue">Available soon</Tag> }
+            { availableSoon && <Badge colorPalette="blue">Available soon</Badge> }
           </Flex>
         ) }
         <Text as="div" fontSize="sm">
@@ -49,7 +51,7 @@ const RewardsDashboardCard = ({
         alignItems="center"
         justifyContent="space-around"
         borderRadius={{ base: 'lg', md: '8px' }}
-        backgroundColor={ useColorModeValue('gray.50', 'whiteAlpha.50') }
+        backgroundColor={{ _light: 'gray.50', _dark: 'whiteAlpha.50' }}
         minH={{ base: '80px', md: '128px' }}
         filter="auto"
         blur={ blurFilter ? '4px' : '0' }

ui/rewards/dashboard/RewardsDashboardCardValue.tsx

 import { Flex, Text } from '@chakra-ui/react';
 import React from 'react';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
-import HintPopover from 'ui/shared/HintPopover';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import Hint from 'ui/shared/Hint';
 
 import MeritsIcon from '../MeritsIcon';
 
@@ -18,18 +18,14 @@ const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading }: Props
   <Flex key={ label } flexDirection="column" alignItems="center" gap={ 2 }>
     <Flex alignItems="center" gap={ 1 }>
       { hint && (
-        <HintPopover
-          label={ hint }
-          popoverContentProps={{ maxW: { base: 'calc(100vw - 8px)', lg: '210px' } }}
-          popoverBodyProps={{ textAlign: 'center' }}
-        />
+        <Hint label={ hint }/>
       ) }
-      <Text fontSize="xs" fontWeight="500" variant="secondary">
+      <Text fontSize="xs" fontWeight="500" color="text.secondary">
         { label }
       </Text>
     </Flex>
     <Skeleton
-      isLoaded={ !isLoading }
+      loading={ isLoading }
       display="flex"
       alignItems="center"
       justifyContent="center"

ui/shared/Page/specs/DefaultView.tsx

@@ -46,9 +46,7 @@ const DefaultView = () => {
     <>
       <AddressEntity
         address={{ ...addressMock.token, name: '' }}
-        fontFamily="heading"
-        fontSize="lg"
-        fontWeight={ 500 }
+        variant="subheading"
       />
       <NetworkExplorers type="token" pathParam={ addressMock.hash } ml="auto"/>
     </>
@@ -60,7 +58,7 @@ const DefaultView = () => {
       beforeTitle={ (
         <TokenEntity.Icon
           token={ tokenData }
-          size="lg"
+          variant="heading"
         />
       ) }
       backLink={ backLink }

ui/shared/Page/specs/LongNameAndManyTags.tsx

@@ -52,7 +52,7 @@ const LongNameAndManyTags = () => {
       beforeTitle={ (
         <TokenEntity.Icon
           token={ tokenData }
-          size="lg"
+          variant="heading"
         />
       ) }
       contentAfter={ contentAfter }

ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx

@@ -29,7 +29,7 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
         hash={ token.address }
         id={ tokenId }
         fontWeight={ 600 }
-        icon={{ size: 'md' }}
+        variant="content"
         maxW={{ base: '100%', lg: '150px' }}
         w="auto"
         flexShrink={ 0 }

ui/shared/entities/address/AddressEntity.pw.tsx

@@ -13,17 +13,17 @@ import { test, expect } from 'playwright/lib';
 
 import AddressEntity from './AddressEntity';
 
-const iconSizes = [ 'md', 'lg' ] as const;
+const variants = [ 'subheading', 'content' ] as const;
 
 test.use({ viewport: { width: 180, height: 140 } });
 
-test.describe('icon size', () => {
-  iconSizes.forEach((size) => {
-    test(`${ size }`, async({ render }) => {
+test.describe('variant', () => {
+  variants.forEach((variant) => {
+    test(`${ variant }`, async({ render }) => {
       const component = await render(
         <AddressEntity
           address={ addressMock.withoutName }
-          icon={{ size }}
+          variant={ variant }
         />,
       );
 

ui/shared/entities/address/AddressEntity.tsx

@@ -12,7 +12,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import * as EntityBase from 'ui/shared/entities/base/components';
 
-import { distributeEntityProps, getIconProps } from '../base/utils';
+import { distributeEntityProps, getContentProps, getIconProps } from '../base/utils';
 import AddressEntityContentProxy from './AddressEntityContentProxy';
 import AddressIconDelegated from './AddressIconDelegated';
 import AddressIdenticon from './AddressIdenticon';
@@ -44,7 +44,7 @@ const Icon = (props: IconProps) => {
   }
 
   const styles = {
-    ...getIconProps(props.size),
+    ...getIconProps(props.variant),
     marginRight: props.marginRight ?? 2,
   };
 
@@ -90,10 +90,10 @@ const Icon = (props: IconProps) => {
   })();
 
   return (
-    <Tooltip content={ label }>
+    <Tooltip content={ label } disabled={ !label }>
       <Flex marginRight={ styles.marginRight } position="relative">
         <AddressIdenticon
-          size={ props.size === 'lg' ? 30 : 20 }
+          size={ props.variant === 'heading' ? 30 : 20 }
           hash={ getDisplayedAddress(props.address) }
         />
         { isDelegatedAddress && <AddressIconDelegated isVerified={ Boolean(props.address.is_verified) }/> }
@@ -116,6 +116,8 @@ const Content = chakra((props: ContentProps) => {
   }
 
   if (nameText) {
+    const styles = getContentProps(props.variant);
+
     const label = (
       <VStack gap={ 0 } py={ 1 } color="inherit">
         <Box fontWeight={ 600 } whiteSpace="pre-wrap" wordBreak="break-word">{ nameText }</Box>
@@ -127,7 +129,7 @@ const Content = chakra((props: ContentProps) => {
 
     return (
       <Tooltip content={ label } contentProps={{ maxW: { base: 'calc(100vw - 8px)', lg: '400px' } }}>
-        <Skeleton loading={ props.isLoading } overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
+        <Skeleton loading={ props.isLoading } overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" { ...styles }>
           { nameText }
         </Skeleton>
       </Tooltip>

ui/shared/entities/base/components.tsx

@@ -10,8 +10,9 @@ import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 
-import { getIconProps, type IconSize } from './utils';
+import { getContentProps, getIconProps } from './utils';
 
 export type Truncation = 'constant' | 'constant_long' | 'dynamic' | 'tail' | 'none';
 
@@ -30,7 +31,7 @@ export interface EntityBaseProps {
   tailLength?: number;
   target?: React.HTMLAttributeAnchorTarget;
   truncation?: Truncation;
-  size?: 'md' | 'lg';
+  variant?: 'content' | 'heading' | 'subheading';
 }
 
 export interface ContainerBaseProps extends Pick<EntityBaseProps, 'className'> {
@@ -82,17 +83,16 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }:
 
 interface EntityIconProps extends Pick<IconProps, 'color' | 'borderRadius' | 'marginRight' | 'boxSize'> {
   name?: IconName;
-  size?: IconSize;
 }
 
-export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'noIcon'>, EntityIconProps {}
+export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'noIcon' | 'variant'>, EntityIconProps {}
 
-const Icon = ({ isLoading, noIcon, size, name, color, borderRadius, marginRight, boxSize }: IconBaseProps) => {
+const Icon = ({ isLoading, noIcon, variant, name, color, borderRadius, marginRight, boxSize }: IconBaseProps) => {
   if (noIcon || !name) {
     return null;
   }
 
-  const styles = getIconProps(size);
+  const styles = getIconProps(variant);
   return (
     <IconSvg
       name={ name }
@@ -108,12 +108,24 @@ const Icon = ({ isLoading, noIcon, size, name, color, borderRadius, marginRight,
   );
 };
 
-export interface ContentBaseProps extends Pick<EntityBaseProps, 'className' | 'isLoading' | 'truncation' | 'tailLength' | 'isTooltipDisabled'> {
+export interface ContentBaseProps extends Pick<EntityBaseProps, 'className' | 'isLoading' | 'truncation' | 'tailLength' | 'isTooltipDisabled' | 'variant'> {
   asProp?: React.ElementType;
   text: string;
 }
 
-const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dynamic', tailLength, isTooltipDisabled }: ContentBaseProps) => {
+const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dynamic', tailLength, isTooltipDisabled, variant }: ContentBaseProps) => {
+  const styles = getContentProps(variant);
+
+  if (truncation === 'tail') {
+    return (
+      <TruncatedValue
+        className={ className }
+        isLoading={ isLoading }
+        value={ text }
+        { ...styles }
+      />
+    );
+  }
 
   const children = (() => {
     switch (truncation) {
@@ -143,7 +155,6 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna
             isTooltipDisabled={ isTooltipDisabled }
           />
         );
-      case 'tail':
       case 'none':
         return <chakra.span as={ asProp }>{ text }</chakra.span>;
     }
@@ -155,18 +166,18 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna
       loading={ isLoading }
       overflow="hidden"
       whiteSpace="nowrap"
-      textOverflow={ truncation === 'tail' ? 'ellipsis' : undefined }
       w="100%"
+      { ...styles }
     >
       { children }
     </Skeleton>
   );
 });
 
-export type CopyBaseProps = Pick<CopyToClipboardProps, 'isLoading' | 'text'> & Pick<EntityBaseProps, 'noCopy' | 'size'>;
+export type CopyBaseProps = Pick<CopyToClipboardProps, 'isLoading' | 'text'> & Pick<EntityBaseProps, 'noCopy'>;
 
-const Copy = ({ size, ...props }: CopyBaseProps) => {
-  if (props.noCopy) {
+const Copy = ({ noCopy, ...props }: CopyBaseProps) => {
+  if (noCopy) {
     return null;
   }
 

ui/shared/entities/base/utils.ts

 import type { EntityBaseProps } from './components';
 
-export type IconSize = 'md' | 'lg';
-
-export function getIconProps(size: IconSize = 'md') {
-  switch (size) {
-    case 'md': {
+export function getIconProps(variant: EntityBaseProps['variant'] = 'content') {
+  switch (variant) {
+    case 'content':
+    case 'subheading': {
+      return {
+        boxSize: '20px', // for tables, lists, regular content and page subheadings
+      };
+    }
+    case 'heading': {
       return {
-        boxSize: '20px', // for tables, lists and regular content
+        boxSize: '30px', // for page headings
       };
     }
-    case 'lg': {
+  }
+}
+
+export function getContentProps(variant: EntityBaseProps['variant'] = 'content') {
+  switch (variant) {
+    // currently, there could be only icon in the heading variant
+    // and for the content variant, fontStyle is set in the consumer component
+    case 'subheading': {
       return {
-        boxSize: '30px', // for headings
+        textStyle: 'heading.md',
       };
     }
   }

ui/shared/entities/block/BlockEntity.pw.tsx

@@ -4,17 +4,17 @@ import { test, expect } from 'playwright/lib';
 
 import BlockEntity from './BlockEntity';
 
-const iconSizes = [ 'md', 'lg' ] as const;
+const variants = [ 'subheading', 'content' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
 test.describe('icon sizes', () => {
-  iconSizes.forEach((size) => {
-    test(`${ size }`, async({ render }) => {
+  variants.forEach((variant) => {
+    test(`${ variant }`, async({ render }) => {
       const component = await render(
         <BlockEntity
           number={ 17943507 }
-          icon={{ size }}
+          variant={ variant }
         />,
       );
 

ui/shared/entities/ens/EnsEntity.pw.tsx

@@ -6,17 +6,17 @@ import { test, expect } from 'playwright/lib';
 import EnsEntity from './EnsEntity';
 
 const name = 'cat.eth';
-const iconSizes = [ 'md', 'lg' ] as const;
+const variants = [ 'subheading', 'content' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
-test.describe('icon size', () => {
-  iconSizes.forEach((size) => {
-    test(`${ size }`, async({ render }) => {
+test.describe('variant', () => {
+  variants.forEach((variant) => {
+    test(`${ variant }`, async({ render }) => {
       const component = await render(
         <EnsEntity
           domain={ name }
-          icon={{ size }}
+          variant={ variant }
         />,
       );
 

ui/shared/entities/ens/EnsEntity.tsx

@@ -11,7 +11,6 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import * as EntityBase from 'ui/shared/entities/base/components';
 import IconSvg from 'ui/shared/IconSvg';
-import TruncatedValue from 'ui/shared/TruncatedValue';
 
 import { distributeEntityProps, getIconProps } from '../base/utils';
 
@@ -36,7 +35,7 @@ const Icon = (props: IconProps) => {
   const icon = <EntityBase.Icon { ...props } name={ props.name ?? 'ENS_slim' }/>;
 
   if (props.protocol) {
-    const styles = getIconProps(props.size);
+    const styles = getIconProps(props.variant);
 
     if (props.isLoading) {
       return <Skeleton loading boxSize={ styles.boxSize } borderRadius="sm" mr={ 2 }/>;
@@ -114,9 +113,10 @@ type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps
 
 const Content = chakra((props: ContentProps) => {
   return (
-    <TruncatedValue
-      isLoading={ props.isLoading }
-      value={ props.domain }
+    <EntityBase.Content
+      { ...props }
+      text={ props.domain }
+      truncation="tail"
     />
   );
 });

ui/shared/entities/nft/NftEntity.pw.tsx

@@ -4,19 +4,19 @@ import { test, expect } from 'playwright/lib';
 
 import NftEntity from './NftEntity';
 
-const iconSizes = [ 'md', 'lg' ] as const;
+const variants = [ 'subheading', 'content' ] as const;
 const hash = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
 
 test.use({ viewport: { width: 180, height: 30 } });
 
-test.describe('icon sizes', () => {
-  iconSizes.forEach((size) => {
-    test(`${ size }`, async({ render }) => {
+test.describe('variants', () => {
+  variants.forEach((variant) => {
+    test(`${ variant }`, async({ render }) => {
       const component = await render(
         <NftEntity
           hash={ hash }
           id="1042"
-          icon={{ size }}
+          variant={ variant }
         />,
       );
 

ui/shared/entities/nft/NftEntity.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import * as EntityBase from 'ui/shared/entities/base/components';
-import TruncatedValue from 'ui/shared/TruncatedValue';
 
 import { distributeEntityProps } from '../base/utils';
 
@@ -18,7 +17,7 @@ const Icon = (props: EntityBase.IconBaseProps) => {
   return (
     <EntityBase.Icon
       { ...props }
-      size={ props.size ?? 'lg' }
+      variant="heading"
       name={ props.name ?? 'nft_shield' }
     />
   );
@@ -43,9 +42,10 @@ type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps
 
 const Content = chakra((props: ContentProps) => {
   return (
-    <TruncatedValue
-      isLoading={ props.isLoading }
-      value={ props.id }
+    <EntityBase.Content
+      { ...props }
+      text={ props.id }
+      truncation="tail"
     />
   );
 });

ui/shared/entities/pool/PoolEntity.tsx

@@ -43,7 +43,7 @@ const Icon = (props: IconProps) => {
       >
         <TokenEntity.Icon
           marginRight={ 0 }
-          size={ props.size }
+          variant={ props.variant }
           token={{
             icon_url: props.pool.base_token_icon_url,
             symbol: props.pool.base_token_symbol,
@@ -63,7 +63,7 @@ const Icon = (props: IconProps) => {
       >
         <TokenEntity.Icon
           marginRight={ 0 }
-          size={ props.size }
+          variant={ props.variant }
           token={{
             icon_url: props.pool.quote_token_icon_url,
             symbol: props.pool.quote_token_symbol,

ui/shared/entities/token/TokenEntity.pw.tsx

@@ -6,17 +6,17 @@ import { test, expect } from 'playwright/lib';
 
 import TokenEntity from './TokenEntity';
 
-const iconSizes = [ 'md', 'lg' ] as const;
+const variants = [ 'subheading', 'content' ] as const;
 
 test.use({ viewport: { width: 300, height: 100 } });
 
-test.describe('icon size', () => {
-  iconSizes.forEach((size) => {
-    test(`${ size }`, async({ render }) => {
+test.describe('variant', () => {
+  variants.forEach((variant) => {
+    test(`${ variant }`, async({ render }) => {
       const component = await render(
         <TokenEntity
           token={ tokenMock.tokenInfo }
-          icon={{ size }}
+          variant={ variant }
         />,
       );
 

ui/shared/entities/token/TokenEntity.tsx

@@ -37,7 +37,7 @@ const Icon = (props: IconProps) => {
 
   const styles = {
     marginRight: props.marginRight ?? 2,
-    boxSize: props.boxSize ?? getIconProps(props.size).boxSize,
+    boxSize: props.boxSize ?? getIconProps(props.variant).boxSize,
     borderRadius: props.token.type === 'ERC-20' ? 'full' : 'base',
     flexShrink: 0,
   };
@@ -69,18 +69,11 @@ const Content = chakra((props: ContentProps) => {
   ].filter(Boolean).join(' ');
 
   return (
-    <TruncatedTextTooltip label={ nameString }>
-      <Skeleton
-        loading={ props.isLoading }
-        display="inline-block"
-        whiteSpace="nowrap"
-        overflow="hidden"
-        textOverflow="ellipsis"
-        height="fit-content"
-      >
-        { nameString }
-      </Skeleton>
-    </TruncatedTextTooltip>
+    <EntityBase.Content
+      { ...props }
+      text={ nameString }
+      truncation="tail"
+    />
   );
 });
 

ui/shared/entities/tx/TxEntity.pw.tsx

@@ -5,17 +5,17 @@ import { test, expect } from 'playwright/lib';
 import TxEntity from './TxEntity';
 
 const hash = '0x376db52955d5bce114d0ccea2dcf22289b4eae1b86bcae5a59bb5fdbfef48899';
-const iconSizes = [ 'md', 'lg' ] as const;
+const variants = [ 'subheading', 'content' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
-test.describe('icon size', () => {
-  iconSizes.forEach((size) => {
-    test(`${ size }`, async({ render }) => {
+test.describe('variant', () => {
+  variants.forEach((variant) => {
+    test(`${ variant }`, async({ render }) => {
       const component = await render(
         <TxEntity
           hash={ hash }
-          icon={{ size }}
+          variant={ variant }
         />,
       );
 

ui/shared/entities/userOp/UserOpEntity.pw.tsx

@@ -5,17 +5,17 @@ import { test, expect } from 'playwright/lib';
 import UserOpEntity from './UserOpEntity';
 
 const hash = '0x376db52955d5bce114d0ccea2dcf22289b4eae1b86bcae5a59bb5fdbfef48899';
-const iconSizes = [ 'md', 'lg' ] as const;
+const variants = [ 'subheading', 'content' ] as const;
 
 test.use({ viewport: { width: 180, height: 30 } });
 
-test.describe('icon size', () => {
-  iconSizes.forEach((size) => {
-    test(`${ size }`, async({ render }) => {
+test.describe('variant', () => {
+  variants.forEach((variant) => {
+    test(`${ variant }`, async({ render }) => {
       const component = await render(
         <UserOpEntity
           hash={ hash }
-          icon={{ size }}
+          variant={ variant }
         />,
       );
 

ui/showcases/Link.tsx

@@ -102,9 +102,9 @@ const LinkShowcase = () => {
             </Box>
             <AddressEntity address={ addressMock.withoutName } isLoading/>
           </Sample>
-          <Sample label="Size: md, lg??? (heading)" vertical>
-            <AddressEntity address={ addressMock.withoutName } size="md"/>
-            <AddressEntity address={ addressMock.withoutName } size="lg" textStyle="heading.md"/>
+          <Sample label="Variant: content, subheading" vertical>
+            <AddressEntity address={ addressMock.withoutName } variant="content"/>
+            <AddressEntity address={ addressMock.withoutName } variant="subheading"/>
           </Sample>
           <Sample label="With name" vertical>
             <AddressEntity address={ addressMock.withName }/>
@@ -140,9 +140,9 @@ const LinkShowcase = () => {
             <TokenEntity token={{ ...TOKEN, icon_url: null }}/>
             <TokenEntity token={{ ...TOKEN, icon_url: null, name: null, symbol: null }}/>
           </Sample>
-          <Sample label="Size: md, lg??? (heading)" vertical w="100%">
-            <TokenEntity token={ TOKEN } size="md"/>
-            <TokenEntity token={ TOKEN } size="lg" textStyle="heading.md" jointSymbol/>
+          <Sample label="Variant: content, subheading" vertical w="100%">
+            <TokenEntity token={ TOKEN } variant="content"/>
+            <TokenEntity token={ TOKEN } variant="subheading" jointSymbol/>
           </Sample>
         </SamplesStack>
 
@@ -190,9 +190,9 @@ const LinkShowcase = () => {
             </Box>
             <EnsEntity domain={ ensMock.ensDomainA.name } protocol={ ensMock.ensDomainA.protocol } isLoading/>
           </Sample>
-          <Sample label="Size: md, lg??? (heading)" vertical w="100%">
-            <EnsEntity domain={ ensMock.ensDomainA.name } protocol={ ensMock.ensDomainA.protocol } size="md"/>
-            <EnsEntity domain={ ensMock.ensDomainA.name } protocol={ ensMock.ensDomainA.protocol } size="lg" textStyle="heading.md"/>
+          <Sample label="Variant: content, subheading" vertical w="100%">
+            <EnsEntity domain={ ensMock.ensDomainA.name } protocol={ ensMock.ensDomainA.protocol } variant="content"/>
+            <EnsEntity domain={ ensMock.ensDomainA.name } protocol={ ensMock.ensDomainA.protocol } variant="subheading"/>
           </Sample>
         </SamplesStack>
 

ui/token/TokenPageTitle.tsx

@@ -124,9 +124,7 @@ const TokenPageTitle = ({ tokenQuery, addressQuery, hash }: Props) => {
         <AddressEntity
           address={{ ...addressQuery.data, name: '' }}
           isLoading={ isLoading }
-          fontFamily="heading"
-          fontSize="lg"
-          fontWeight={ 500 }
+          variant="subheading"
         />
       ) }
       { !isLoading && tokenQuery.data && <AddressAddToWallet token={ tokenQuery.data } variant="button"/> }
@@ -149,7 +147,7 @@ const TokenPageTitle = ({ tokenQuery, addressQuery, hash }: Props) => {
           <TokenEntity.Icon
             token={ tokenQuery.data }
             isLoading={ tokenQuery.isPlaceholderData }
-            size="lg"
+            variant="heading"
           />
         ) : null }
         contentAfter={ contentAfter }

ui/tokenInfo/types.ts

-import type { Option } from 'ui/shared/forms/inputs/select/types';
+import type { SelectOption } from 'toolkit/chakra/select';
 
 export interface Fields extends SocialLinkFields, TickerUrlFields {
   address: string;
@@ -6,7 +6,7 @@ export interface Fields extends SocialLinkFields, TickerUrlFields {
   requester_name: string;
   requester_email: string;
   project_name?: string;
-  project_sector: Array<Option> | null;
+  project_sector: Array<SelectOption> | null;
   project_email: string;
   project_website: string;
   project_description: string;

ui/tokenInstance/TokenInstancePageTitle.tsx

@@ -96,9 +96,7 @@ const TokenInstancePageTitle = ({ isLoading, token, instance, hash }: Props) =>
           noSymbol
           noCopy
           jointSymbol
-          fontFamily="heading"
-          fontSize="lg"
-          fontWeight={ 500 }
+          variant="subheading"
           w="auto"
           maxW="700px"
         />

ui/tx/TxSubHeading.tsx

@@ -118,7 +118,7 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
         />
       );
     } else {
-      return <TxEntity hash={ hash } noLink noCopy={ false } fontWeight={ 500 } mr={{ base: 0, lg: 2 }} fontFamily="heading"/>;
+      return <TxEntity hash={ hash } noLink noCopy={ false } variant="subheading" mr={{ base: 0, lg: 2 }}/>;
     }
   })();
 

ui/tx/details/txDetailsActions/TxDetailsAction.tsx

@@ -133,7 +133,7 @@ const TxDetailsAction = ({ action }: Props) => {
                   <Flex key={ data.address + id } whiteSpace="pre-wrap" columnGap={ 2 }>
                     <chakra.span flexShrink={ 0 }>1</chakra.span>
                     <chakra.span color="text_secondary" flexShrink={ 0 }>of token ID</chakra.span>
-                    <NftEntity hash={ data.address } id={ id } w="min-content" icon={{ size: 'md' }}/>
+                    <NftEntity hash={ data.address } id={ id } w="min-content" variant="content"/>
                   </Flex>
                 );
               })

ui/userOp/UserOpSubHeading.tsx

@@ -75,7 +75,7 @@ const UserOpSubHeading = ({ hash }: Props) => {
     //     />
     //   );
   } else {
-    return <UserOpEntity hash={ hash } noLink noCopy={ false } fontWeight={ 500 } fontFamily="heading"/>;
+    return <UserOpEntity hash={ hash } noLink noCopy={ false } variant="subheading"/>;
   }
 };