update address heading info

theme/foundations/typography.ts

 import { theme } from '@chakra-ui/react';
 
 export const BODY_TYPEFACE = 'Inter';
+export const HEADING_TYPEFACE = 'Poppins';
 
 const typography = {
   fonts: {
-    heading: `Poppins, ${ theme.fonts.heading }`,
+    heading: `${ HEADING_TYPEFACE }, ${ theme.fonts.heading }`,
     body: `${ BODY_TYPEFACE }, ${ theme.fonts.body }`,
   },
   textStyles: {

ui/shared/AddressActions/Menu.tsx

@@ -22,7 +22,7 @@ const AddressActions = ({ isLoading }: Props) => {
 
   return (
     <Menu>
-      <Skeleton isLoaded={ !isLoading } ml={ 2 }>
+      <Skeleton isLoaded={ !isLoading } ml={ 2 } borderRadius="base">
         <MenuButton
           as={ Button }
           size="sm"

ui/shared/AddressHeadingInfo.tsx

@@ -5,7 +5,6 @@ import type { Address } from 'types/api/address';
 import type { TokenInfo } from 'types/api/token';
 
 import appConfig from 'configs/app/config';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
 import AddressQrCode from 'ui/address/details/AddressQrCode';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
@@ -22,8 +21,6 @@ interface Props {
 }
 
 const AddressHeadingInfo = ({ address, token, isLinkDisabled, isLoading }: Props) => {
-  const isMobile = useIsMobile();
-
   return (
     <Flex alignItems="center">
       <AddressIcon address={ address } isLoading={ isLoading }/>
@@ -32,8 +29,8 @@ const AddressHeadingInfo = ({ address, token, isLinkDisabled, isLoading }: Props
         hash={ address.hash }
         ml={ 2 }
         fontFamily="heading"
+        fontSize="lg"
         fontWeight={ 500 }
-        truncation={ isMobile ? 'constant' : 'none' }
         isDisabled={ isLinkDisabled }
         isLoading={ isLoading }
       />

ui/shared/EntityTags.tsx

@@ -33,7 +33,7 @@ const EntityTags = ({ className, data, tagsBefore = [], tagsAfter = [], isLoadin
   ]
     .filter(Boolean);
 
-  if (tags.length === 0) {
+  if (tags.length === 0 && !contentAfter) {
     return null;
   }
 
@@ -78,7 +78,7 @@ const EntityTags = ({ className, data, tagsBefore = [], tagsAfter = [], isLoadin
   })();
 
   return (
-    <Flex className={ className } columnGap={ 2 } rowGap={ 2 } flexWrap="wrap" alignItems="center">
+    <Flex className={ className } columnGap={ 2 } rowGap={ 2 } flexWrap="wrap" alignItems="center" flexGrow={ 1 }>
       { content }
       { contentAfter }
     </Flex>

ui/shared/HashStringShortenDynamic.tsx

@@ -14,7 +14,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import type { FontFace } from 'use-font-face-observer';
 import useFontFaceObserver from 'use-font-face-observer';
 
-import { BODY_TYPEFACE } from 'theme/foundations/typography';
+import { BODY_TYPEFACE, HEADING_TYPEFACE } from 'theme/foundations/typography';
 
 const TAIL_LENGTH = 4;
 const HEAD_MIN_LENGTH = 4;
@@ -31,6 +31,7 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled
 
   const isFontFaceLoaded = useFontFaceObserver([
     { family: BODY_TYPEFACE, weight: String(fontWeight) as FontFace['weight'] },
+    { family: HEADING_TYPEFACE, weight: String(fontWeight) as FontFace['weight'] },
   ]);
 
   const calculateString = useCallback(() => {