Merge pull request #466 from blockscout/contract-icon-2

contract icon for all addresses

types/api/account.ts

 import type { AddressParam } from './addressParams';
 export interface AddressTag {
   address_hash: string;
+  address: AddressParam;
   name: string;
   id: string;
 }
@@ -64,7 +65,7 @@ export interface WatchlistAddress {
   notification_settings: NotificationSettings;
   notification_methods: NotificationMethods;
   id: string;
-  address?: AddressParam;
+  address: AddressParam;
 }
 
 export interface WatchlistTokensResponse {
@@ -89,10 +90,11 @@ export interface PublicTag {
   email: string;
   company: string;
   addresses: Array<string>;
+  addresses_with_info: Array<AddressParam>;
   additional_comment: string;
 }
 
-export type PublicTagNew = Omit<PublicTag, 'id'>
+export type PublicTagNew = Omit<PublicTag, 'id' | 'addresses_with_info'>
 
 export type PublicTags = Array<PublicTag>;
 
@@ -102,6 +104,7 @@ export interface CustomAbi {
   name: string;
   id: number;
   contract_address_hash: string;
+  contract_address: AddressParam;
   abi: Array<AbiItem>;
 }
 

ui/address/AddressDetails.tsx

@@ -62,7 +62,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
   return (
     <Box>
       <Flex alignItems="center">
-        <AddressIcon hash={ addressQuery.data.hash }/>
+        <AddressIcon address={ addressQuery.data }/>
         <Text ml={ 2 } fontFamily="heading" fontWeight={ 500 }>
           { isMobile ? <HashStringShorten hash={ addressQuery.data.hash }/> : addressQuery.data.hash }
         </Text>

ui/address/internals/AddressIntTxsListItem.tsx

@@ -53,7 +53,7 @@ const TxInternalsListItem = ({
       </HStack>
       <Box w="100%" display="flex" columnGap={ 3 }>
         <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash }/>
         </Address>
         { (isIn || isOut) ?
@@ -61,7 +61,7 @@ const TxInternalsListItem = ({
           <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         }
         <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon hash={ toData.hash }/>
+          <AddressIcon address={ toData }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ toData.hash }/>
         </Address>
       </Box>

ui/address/internals/AddressIntTxsTableItem.tsx

@@ -61,7 +61,7 @@ const AddressIntTxsTableItem = ({
       </Td>
       <Td verticalAlign="middle">
         <Address display="inline-flex" maxW="100%">
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 }/>
         </Address>
       </Td>
@@ -73,7 +73,7 @@ const AddressIntTxsTableItem = ({
       </Td>
       <Td verticalAlign="middle">
         <Address display="inline-flex" maxW="100%">
-          <AddressIcon hash={ toData.hash }/>
+          <AddressIcon address={ toData }/>
           <AddressLink hash={ toData.hash } alias={ toData.name } fontWeight="500" ml={ 2 }/>
         </Address>
       </Td>

ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx

@@ -24,7 +24,7 @@ const CustomAbiListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
 
   return (
     <ListItemMobile>
-      <AddressSnippet address={ item.contract_address_hash } subtitle={ item.name } isContract/>
+      <AddressSnippet address={ item.contract_address } subtitle={ item.name }/>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
     </ListItemMobile>
   );

ui/customAbi/CustomAbiTable/CustomAbiTableItem.tsx

@@ -28,7 +28,7 @@ const CustomAbiTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <Tr alignItems="top" key={ item.id }>
       <Td>
-        <AddressSnippet address={ item.contract_address_hash } subtitle={ item.name } isContract/>
+        <AddressSnippet address={ item.contract_address } subtitle={ item.name }/>
       </Td>
       <Td>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>

ui/home/LatestTxsItem.tsx

@@ -109,7 +109,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
         <Box width={{ base: '100%', lg: '50%' }}>
           <Flex alignItems="center" mb={ 3 } justifyContent={{ base: 'start', lg: 'end' }}>
             <Address>
-              <AddressIcon hash={ tx.from.hash }/>
+              <AddressIcon address={ tx.from }/>
               <AddressLink
                 hash={ tx.from.hash }
                 alias={ tx.from.name }
@@ -126,7 +126,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
               color="gray.500"
             />
             <Address>
-              <AddressIcon hash={ dataTo.hash }/>
+              <AddressIcon address={ dataTo }/>
               <AddressLink
                 hash={ dataTo.hash }
                 alias={ dataTo.name }

ui/privateTags/AddressTagTable/AddressTagListItem.tsx

@@ -25,7 +25,7 @@ const AddressTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <ListItemMobile>
       <Flex alignItems="flex-start" flexDirection="column" maxW="100%">
-        <AddressSnippet address={ item.address_hash }/>
+        <AddressSnippet address={ item.address }/>
         <HStack spacing={ 3 } mt={ 4 }>
           <Text fontSize="sm" fontWeight={ 500 }>Private tag</Text>
           <Tag>

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

@@ -29,7 +29,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <Tr alignItems="top" key={ item.id }>
       <Td>
-        <AddressSnippet address={ item.address_hash }/>
+        <AddressSnippet address={ item.address }/>
       </Td>
       <Td whiteSpace="nowrap">
         <TruncatedTextTooltip label={ item.name }>

ui/publicTags/PublicTagTable/PublicTagListItem.tsx

@@ -27,7 +27,7 @@ const PublicTagListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     <ListItemMobile>
       <VStack spacing={ 3 } alignItems="flex-start" maxW="100%">
         <VStack spacing={ 4 } alignItems="unset" maxW="100%">
-          { item.addresses.map((address) => <AddressSnippet key={ address } address={ address }/>) }
+          { item.addresses_with_info.map((address) => <AddressSnippet key={ address.hash } address={ address }/>) }
         </VStack>
         <HStack spacing={ 3 }>
           <Text fontSize="sm" fontWeight={ 500 }>Public tags</Text>

ui/publicTags/PublicTagTable/PublicTagTableItem.tsx

@@ -32,7 +32,7 @@ const PublicTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     <Tr alignItems="top" key={ item.id }>
       <Td>
         <VStack spacing={ 4 } alignItems="unset">
-          { item.addresses.map((address) => <AddressSnippet key={ address } address={ address }/>) }
+          { item.addresses_with_info.map((address) => <AddressSnippet key={ address.hash } address={ address }/>) }
         </VStack>
       </Td>
       <Td>

ui/shared/AddressSnippet.tsx

 import { Text, Box } from '@chakra-ui/react';
 import React from 'react';
 
+import type { AddressParam } from 'types/api/addressParams';
+
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
-import AddressContractIcon from './address/AddressContractIcon';
-
 interface Props {
-  address: string;
+  address: AddressParam;
   subtitle?: string;
-  // temporary solution for custom abis while we don't have address info on account pages
-  isContract?: boolean;
 }
 
-const AddressSnippet = ({ address, isContract, subtitle }: Props) => {
+const AddressSnippet = ({ address, subtitle }: Props) => {
   return (
     <Box maxW="100%">
       <Address>
-        { isContract ? <AddressContractIcon/> : <AddressIcon hash={ address }/> }
-        <AddressLink hash={ address } fontWeight="600" ml={ 2 }/>
-        <CopyToClipboard text={ address } ml={ 1 }/>
+        <AddressIcon address={ address }/>
+        <AddressLink hash={ address.hash } fontWeight="600" ml={ 2 }/>
+        <CopyToClipboard text={ address.hash } ml={ 1 }/>
       </Address>
       { subtitle && <Text fontSize="sm" variant="secondary" mt={ 0.5 } ml={ 8 }>{ subtitle }</Text> }
     </Box>

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -80,7 +80,7 @@ const TokenTransferListItem = ({
       ) }
       <Flex w="100%" columnGap={ 3 }>
         <Address width={ addressWidth }>
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash }/>
         </Address>
         { baseAddress ?
@@ -88,7 +88,7 @@ const TokenTransferListItem = ({
           <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         }
         <Address width={ addressWidth }>
-          <AddressIcon hash={ to.hash }/>
+          <AddressIcon address={ to }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ to.hash }/>
         </Address>
       </Flex>

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -69,7 +69,7 @@ const TokenTransferTableItem = ({
       ) }
       <Td>
         <Address display="inline-flex" maxW="100%" lineHeight="30px">
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 }/>
         </Address>
       </Td>
@@ -80,7 +80,7 @@ const TokenTransferTableItem = ({
       ) }
       <Td>
         <Address display="inline-flex" maxW="100%" lineHeight="30px">
-          <AddressIcon hash={ to.hash }/>
+          <AddressIcon address={ to }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ to.hash } alias={ to.name } flexGrow={ 1 }/>
         </Address>
       </Td>

ui/shared/address/AddressContractIcon.tsx

-import { Box, chakra, Tooltip } from '@chakra-ui/react';
+import { Box, chakra, Tooltip, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 type Props = {
@@ -6,6 +6,9 @@ type Props = {
 }
 
 const AddressContractIcon = ({ className }: Props) => {
+  const bgColor = useColorModeValue('gray.200', 'gray.600');
+  const color = useColorModeValue('gray.400', 'gray.200');
+
   return (
     <Tooltip label="Contract">
       <Box
@@ -13,8 +16,8 @@ const AddressContractIcon = ({ className }: Props) => {
         width="24px"
         height="24px"
         borderRadius="12px"
-        backgroundColor="gray.200"
-        color="gray.400"
+        backgroundColor={ bgColor }
+        color={ color }
         display="inline-flex"
         alignItems="center"
         justifyContent="center"

ui/shared/address/AddressIcon.tsx

@@ -2,10 +2,25 @@ import { Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
 
-const AddressIcon = ({ hash, className }: {hash: string; className?: string}) => {
+import type { AddressParam } from 'types/api/addressParams';
+
+import AddressContractIcon from 'ui/shared/address/AddressContractIcon';
+
+type Props = {
+  address: AddressParam;
+  className?: string;
+}
+
+const AddressIcon = ({ address, className }: Props) => {
+  if (address.is_contract) {
+    return (
+      <AddressContractIcon/>
+    );
+  }
+
   return (
     <Box className={ className } width="24px" display="inline-flex">
-      <Jazzicon diameter={ 24 } seed={ jsNumberForAddress(hash) }/>
+      <Jazzicon diameter={ 24 } seed={ jsNumberForAddress(address.hash) }/>
     </Box>
   );
 };

ui/tx/TxDetails.pw.tsx

@@ -27,7 +27,6 @@ test('between addresses +@mobile +@dark-mode', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await page.waitForResponse(API_URL);
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();
@@ -45,7 +44,6 @@ test('creating contact', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.waitForResponse(API_URL);
 
   await expect(component).toHaveScreenshot();
 });
@@ -62,7 +60,6 @@ test('with token transfer +@mobile', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.waitForResponse(API_URL);
 
   await expect(component).toHaveScreenshot();
 });
@@ -79,7 +76,6 @@ test('with decoded revert reason', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.waitForResponse(API_URL);
 
   await expect(component).toHaveScreenshot();
 });
@@ -96,7 +92,6 @@ test('with decoded raw reason', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.waitForResponse(API_URL);
 
   await expect(component).toHaveScreenshot();
 });
@@ -113,7 +108,7 @@ test('pending', async({ mount, page }) => {
     </TestApp>,
     { hooksConfig },
   );
-  await page.waitForResponse(API_URL);
+
   await page.getByText('View details').click();
 
   await expect(component).toHaveScreenshot();

ui/tx/TxDetails.tsx

@@ -147,7 +147,7 @@ const TxDetails = () => {
         columnGap={ 3 }
       >
         <Address>
-          <AddressIcon hash={ data.from.hash }/>
+          <AddressIcon address={ data.from }/>
           <AddressLink ml={ 2 } hash={ data.from.hash }/>
           <CopyToClipboard text={ data.from.hash }/>
         </Address>
@@ -166,7 +166,7 @@ const TxDetails = () => {
       >
         { data.to && data.to.hash ? (
           <Address alignItems="center">
-            <AddressIcon hash={ toAddress.hash }/>
+            <AddressIcon address={ toAddress }/>
             <AddressLink ml={ 2 } hash={ toAddress.hash }/>
             { executionSuccessBadge }
             { executionFailedBadge }

ui/tx/internals/TxInternalsListItem.tsx

@@ -27,12 +27,12 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
       </Flex>
       <Box w="100%" display="flex" columnGap={ 3 }>
         <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash }/>
         </Address>
         <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon hash={ toData.hash }/>
+          <AddressIcon address={ toData }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ toData.hash }/>
         </Address>
       </Box>

ui/tx/internals/TxInternalsTableItem.tsx

@@ -32,7 +32,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
       </Td>
       <Td verticalAlign="middle">
         <Address display="inline-flex" maxW="100%">
-          <AddressIcon hash={ from.hash }/>
+          <AddressIcon address={ from }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 }/>
         </Address>
       </Td>
@@ -41,7 +41,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
       </Td>
       <Td verticalAlign="middle">
         <Address display="inline-flex" maxW="100%">
-          <AddressIcon hash={ toData.hash }/>
+          <AddressIcon address={ toData }/>
           <AddressLink hash={ toData.hash } alias={ toData.name } fontWeight="500" ml={ 2 }/>
         </Address>
       </Td>

ui/tx/logs/TxLogItem.tsx

@@ -50,7 +50,7 @@ const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
       <RowHeader>Address</RowHeader>
       <GridItem display="flex" alignItems="center">
         <Address mr={{ base: 9, lg: 0 }}>
-          <AddressIcon hash={ address.hash }/>
+          <AddressIcon address={ address }/>
           <AddressLink hash={ address.hash } alias={ address.name } ml={ 2 }/>
         </Address>
         { /* api doesn't have find topic feature yet */ }

ui/tx/state/TxStateListItem.tsx

@@ -9,7 +9,7 @@ import type { data } from 'data/txState';
 import { nbsp } from 'lib/html-entities';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
+// import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import ListItemMobile from 'ui/shared/ListItemMobile';
 
@@ -51,7 +51,8 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
                 <AccordionIcon color="blue.600" width="30px"/>
               </AccordionButton>
               <Address flexGrow={ 1 }>
-                <AddressIcon hash={ address }/>
+                { /* ??? */ }
+                { /* <AddressIcon hash={ address }/> */ }
                 <AddressLink hash={ address } ml={ 2 }/>
               </Address>
             </Flex>

ui/tx/state/TxStateTableItem.tsx

@@ -18,7 +18,7 @@ import React, { useRef } from 'react';
 import type { TTxStateItem } from 'data/txState';
 import { nbsp } from 'lib/html-entities';
 import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
+// import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 
 import TxStateStorageItem from './TxStateStorageItem';
@@ -58,7 +58,8 @@ const TxStateTableItem = ({ txStateItem }: { txStateItem: TTxStateItem }) => {
             </Td>
             <Td border={ 0 }>
               <Address height="30px">
-                <AddressIcon hash={ txStateItem.address }/>
+                { /* ??? */ }
+                { /* <AddressIcon hash={ txStateItem.address }/> */ }
                 <AddressLink hash={ txStateItem.address } fontWeight="500" truncation="constant" ml={ 2 }/>
               </Address>
             </Td>

ui/txs/TxsListItem.tsx

@@ -102,7 +102,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
         ) }
         <Flex alignItems="center" height={ 6 } mt={ 6 }>
           <Address width={ `calc((100%-${ currentAddress ? TAG_WIDTH : ARROW_WIDTH + 8 }px)/2)` }>
-            <AddressIcon hash={ tx.from.hash }/>
+            <AddressIcon address={ tx.from }/>
             <AddressLink
               hash={ tx.from.hash }
               alias={ tx.from.name }
@@ -120,7 +120,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
               />
             ) }
           <Address width="calc((100%-40px)/2)">
-            <AddressIcon hash={ dataTo.hash }/>
+            <AddressIcon address={ dataTo }/>
             <AddressLink
               hash={ dataTo.hash }
               alias={ dataTo.name }

ui/txs/TxsTableItem.tsx

@@ -51,7 +51,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
   const addressFrom = (
     <Address>
       <Tooltip label={ tx.from.implementation_name }>
-        <Box display="flex"><AddressIcon hash={ tx.from.hash }/></Box>
+        <Box display="flex"><AddressIcon address={ tx.from }/></Box>
       </Tooltip>
       <AddressLink hash={ tx.from.hash } alias={ tx.from.name } fontWeight="500" ml={ 2 } truncation="constant"/>
     </Address>
@@ -62,7 +62,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
   const addressTo = (
     <Address>
       <Tooltip label={ dataTo.implementation_name }>
-        <Box display="flex"><AddressIcon hash={ dataTo.hash }/></Box>
+        <Box display="flex"><AddressIcon address={ dataTo }/></Box>
       </Tooltip>
       <AddressLink hash={ dataTo.hash } alias={ dataTo.name } fontWeight="500" ml={ 2 } truncation="constant"/>
     </Address>

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -16,7 +16,7 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
 
   return (
     <VStack spacing={ 2 } align="stretch" fontWeight={ 500 }>
-      <AddressSnippet address={ item.address_hash }/>
+      <AddressSnippet address={ item.address }/>
       <Flex fontSize="sm" h={ 6 } pl={ infoItemsPaddingLeft } flexWrap="wrap" alignItems="center" rowGap={ 1 }>
         { appConfig.network.currency.address && (
           <TokenLogo