Merge pull request #387 from blockscout/contract-icon

Contract icon

ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx

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

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 }/>
+        <AddressSnippet address={ item.contract_address_hash } subtitle={ item.name } isContract/>
       </Td>
       <Td>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>

ui/shared/AddressSnippet.tsx

@@ -6,16 +6,20 @@ 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;
   subtitle?: string;
+  // temporary solution for custom abis while we don't have address info on account pages
+  isContract?: boolean;
 }
 
-const AddressSnippet = ({ address, subtitle }: Props) => {
+const AddressSnippet = ({ address, isContract, subtitle }: Props) => {
   return (
     <Box maxW="100%">
       <Address>
-        <AddressIcon hash={ address }/>
+        { isContract ? <AddressContractIcon/> : <AddressIcon hash={ address }/> }
         <AddressLink hash={ address } fontWeight="600" ml={ 2 }/>
         <CopyToClipboard text={ address } ml={ 1 }/>
       </Address>

ui/shared/address/AddressContractIcon.tsx

+import { Box, chakra, Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  className?: string;
+}
+
+const AddressContractIcon = ({ className }: Props) => {
+  return (
+    <Tooltip label="Contract">
+      <Box
+        className={ className }
+        width="24px"
+        height="24px"
+        borderRadius="12px"
+        backgroundColor="gray.200"
+        color="gray.400"
+        display="inline-flex"
+        alignItems="center"
+        justifyContent="center"
+        fontWeight="700"
+      >
+          С
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default chakra(AddressContractIcon);