address snippet component

ui/customAbi/CustomAbiTable/CustomAbiTableItem.tsx

@@ -2,13 +2,12 @@ import {
   Tr,
   Td,
   HStack,
-  Text,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
 import type { CustomAbi } from 'types/api/account';
 
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressSnippet from 'ui/shared/AddressSnippet';
 import DeleteButton from 'ui/shared/DeleteButton';
 import EditButton from 'ui/shared/EditButton';
 
@@ -31,11 +30,7 @@ const CustomAbiTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <Tr alignItems="top" key={ item.id }>
       <Td>
-        <HStack>
-          <Text fontSize="md" fontWeight={ 600 }>{ item.contract_address_hash }</Text>
-          <CopyToClipboard text={ item.contract_address_hash }/>
-        </HStack>
-        <Text fontSize="sm" marginTop={ 0.5 } variant="secondary">{ item.name }</Text>
+        <AddressSnippet address={ item.contract_address_hash } subtitle={ item.name }/>
       </Td>
       <Td>
         <HStack spacing={ 6 }>

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

@@ -8,8 +8,7 @@ import React, { useCallback } from 'react';
 
 import type { AddressTag } from 'types/api/account';
 
-import AddressIcon from 'ui/shared/AddressIcon';
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import AddressSnippet from 'ui/shared/AddressSnippet';
 import DeleteButton from 'ui/shared/DeleteButton';
 import EditButton from 'ui/shared/EditButton';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
@@ -32,10 +31,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <Tr alignItems="top" key={ item.id }>
       <Td>
-        <HStack spacing={ 4 }>
-          <AddressIcon address={ item.address_hash }/>
-          <AddressLinkWithTooltip address={ item.address_hash }/>
-        </HStack>
+        <AddressSnippet address={ item.address_hash }/>
       </Td>
       <Td>
         <TruncatedTextTooltip label={ item.name }>

ui/publicTags/PublicTagTable/PublicTagTableItem.tsx

 import {
-  Box,
   Tag,
   Tr,
   Td,
@@ -11,8 +10,7 @@ import React, { useCallback } from 'react';
 
 import type { PublicTag } from 'types/api/account';
 
-import AddressIcon from 'ui/shared/AddressIcon';
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import AddressSnippet from 'ui/shared/AddressSnippet';
 import DeleteButton from 'ui/shared/DeleteButton';
 import EditButton from 'ui/shared/EditButton';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
@@ -36,18 +34,7 @@ const PublicTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     <Tr alignItems="top" key={ item.id }>
       <Td>
         <VStack spacing={ 4 } alignItems="unset">
-          { item.addresses.map((address) => {
-            return (
-              <HStack spacing={ 4 } key={ address } overflow="hidden" alignItems="start">
-                <AddressIcon address={ address }/>
-                <Box overflow="hidden">
-                  <AddressLinkWithTooltip address={ address }/>
-                  { /* will be added later */ }
-                  { /* <Text fontSize="sm" variant="secondary" mt={ 0.5 }>Address Name</Text> */ }
-                </Box>
-              </HStack>
-            );
-          }) }
+          { item.addresses.map((address) => <AddressSnippet key={ address } address={ address }/>) }
         </VStack>
       </Td>
       <Td>

ui/shared/AddressSnippet.tsx

+import { Box, HStack, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import AddressIcon from 'ui/shared/AddressIcon';
+import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+
+interface Props {
+  address: string;
+  subtitle?: string;
+}
+
+const AddressSnippet = ({ address, subtitle }: Props) => {
+  return (
+    <HStack spacing={ 4 } key={ address } overflow="hidden" alignItems="start">
+      <AddressIcon address={ address }/>
+      <Box overflow="hidden">
+        <AddressLinkWithTooltip address={ address }/>
+        { subtitle && <Text fontSize="sm" variant="secondary" mt={ 0.5 }>{ subtitle }</Text> }
+      </Box>
+    </HStack>
+  );
+};
+
+export default React.memo(AddressSnippet);