add contract name to the label (#1248)

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

@@ -8,7 +8,7 @@ import AddressEntity from './AddressEntity';
 
 const iconSizes = [ 'md', 'lg' ];
 
-test.use({ viewport: { width: 180, height: 100 } });
+test.use({ viewport: { width: 180, height: 140 } });
 
 test.describe('icon size', () => {
   iconSizes.forEach((size) => {
@@ -123,3 +123,16 @@ test('customization', async({ mount }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+test('hover', async({ page, mount }) => {
+  const component = await mount(
+    <TestApp>
+      <AddressEntity
+        address={ addressMock.withoutName }
+      />
+    </TestApp>,
+  );
+
+  await component.getByText(addressMock.hash.slice(0, 4)).hover();
+  await expect(page).toHaveScreenshot();
+});

ui/shared/entities/address/AddressEntity.tsx

 import type { As } from '@chakra-ui/react';
-import { Flex, Skeleton, Tooltip, chakra } from '@chakra-ui/react';
+import { Box, Flex, Skeleton, Tooltip, chakra, VStack } from '@chakra-ui/react';
 import _omit from 'lodash/omit';
 import React from 'react';
 
@@ -102,8 +102,15 @@ type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps
 
 const Content = chakra((props: ContentProps) => {
   if (props.address.name) {
+    const label = (
+      <VStack gap={ 0 } py={ 1 } color="inherit">
+        <Box fontWeight={ 600 } whiteSpace="pre-wrap" wordBreak="break-word">{ props.address.name }</Box>
+        <Box whiteSpace="pre-wrap" wordBreak="break-word">{ props.address.hash }</Box>
+      </VStack>
+    );
+
     return (
-      <Tooltip label={ props.address.hash } maxW="100vw">
+      <Tooltip label={ label } maxW="100vw">
         <Skeleton isLoaded={ !props.isLoading } overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" as="span">
           { props.address.name }
         </Skeleton>