refactor and ts fixes

ui/address/contract/ContractCode.tsx

@@ -83,7 +83,7 @@ const ContractCode = () => {
         <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
           <span>Contract is not verified. However, we found a verified contract with the same bytecode in Blockscout DB </span>
           <Address>
-            <AddressIcon address={{ hash: addressHash || '', is_contract: false }}/>
+            <AddressIcon address={{ hash: addressHash || '', is_contract: false, implementation_name: null }}/>
             <AddressLink hash={ addressHash || '' } truncation="constant" ml={ 2 }/>
           </Address>
           <chakra.span mt={ 1 }>All functions displayed below are from ABI of that contract. In order to verify current contract, proceed with </chakra.span>

ui/address/contract/ContractConnectWallet.tsx

@@ -35,7 +35,7 @@ const ContractConnectWallet = () => {
       <Flex columnGap={ 3 } rowGap={ 3 } alignItems={{ base: 'flex-start', lg: 'center' }} flexDir={{ base: 'column', lg: 'row' }}>
         <Flex alignItems="center">
           <span>Connected to </span>
-          <AddressIcon address={{ hash: address, is_contract: false }} mx={ 2 }/>
+          <AddressIcon address={{ hash: address, is_contract: false, implementation_name: null }} mx={ 2 }/>
           <AddressLink fontWeight={ 600 } hash={ address } truncation={ isMobile ? 'constant' : 'dynamic' }/>
         </Flex>
         <Button onClick={ handleDisconnect } size="sm" variant="outline">Disconnect</Button>

ui/address/contract/ContractMethodCallable.tsx

@@ -12,10 +12,16 @@ import arrowIcon from 'icons/arrows/down-right.svg';
 
 import ContractMethodField from './ContractMethodField';
 
+interface ResultComponentProps<T extends SmartContractMethod> {
+  item: T;
+  result: ContractMethodCallResult<T>;
+  onSettle: () => void;
+}
+
 interface Props<T extends SmartContractMethod> {
   data: T;
   onSubmit: (data: T, args: Array<string | Array<string>>) => Promise<ContractMethodCallResult<T>>;
-  renderResult: (data: T, result: ContractMethodCallResult<T>, onSettle: () => void) => React.ReactNode;
+  ResultComponent: (props: ResultComponentProps<T>) => JSX.Element | null;
   isWrite?: boolean;
 }
 
@@ -46,7 +52,7 @@ const castFieldValue = (data: Array<SmartContractMethodInput>) => ([ key, value
 
 const parseArrayValue = (value: string) => value.replace(/(\[|\])|\s/g, '').split(',');
 
-const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit, renderResult, isWrite }: Props<T>) => {
+const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit, ResultComponent, isWrite }: Props<T>) => {
 
   const [ result, setResult ] = React.useState<ContractMethodCallResult<T>>();
   const [ isLoading, setLoading ] = React.useState(false);
@@ -137,7 +143,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
           <Text>{ data.outputs.map(({ type }) => type).join(', ') }</Text>
         </Flex>
       ) }
-      { result && renderResult(data, result, handleTxSettle) }
+      { result && <ResultComponent item={ data } result={ result } onSettle={ handleTxSettle }/> }
     </Box>
   );
 };

ui/address/contract/ContractRead.tsx

-import { Alert, Box, chakra, Flex, useColorModeValue } from '@chakra-ui/react';
+import { Alert, Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { useAccount } from 'wagmi';
 
-import type { ContractMethodReadResult } from './types';
 import type { SmartContractReadMethod, SmartContractQueryMethodRead } from 'types/api/contract';
 
 import useApiFetch from 'lib/api/useApiFetch';
@@ -15,6 +14,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import ContractConnectWallet from './ContractConnectWallet';
 import ContractMethodCallable from './ContractMethodCallable';
 import ContractMethodConstant from './ContractMethodConstant';
+import ContractReadResult from './ContractReadResult';
 
 interface Props {
   isProxy?: boolean;
@@ -49,34 +49,6 @@ const ContractRead = ({ isProxy }: Props) => {
     });
   }, [ addressHash, apiFetch, isProxy, userAddress ]);
 
-  const resultBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
-  const renderResult = React.useCallback((item: SmartContractReadMethod, result: ContractMethodReadResult, onSettle: () => void) => {
-    onSettle();
-
-    if ('status' in result) {
-      return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm">{ result.statusText }</Alert>;
-    }
-
-    if (result.is_error) {
-      const message = 'error' in result.result ? result.result.error : result.result.message;
-      return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm">{ message }</Alert>;
-    }
-
-    return (
-      <Box mt={ 3 } p={ 4 } borderRadius="md" bgColor={ resultBgColor } fontSize="sm">
-        <p>
-          [ <chakra.span fontWeight={ 600 }>{ 'name' in item ? item.name : '' }</chakra.span> method response ]
-        </p>
-        <p>[</p>
-        { result.result.output.map(({ type, value }, index) => (
-          <chakra.p key={ index } whiteSpace="break-spaces" wordBreak="break-all">  { type }: { String(value) }</chakra.p>
-        )) }
-        <p>]</p>
-      </Box>
-    );
-  }, [ resultBgColor ]);
-
   const renderContent = React.useCallback((item: SmartContractReadMethod, index: number, id: number) => {
     if (item.error) {
       return <Alert status="error" fontSize="sm">{ item.error }</Alert>;
@@ -95,10 +67,10 @@ const ContractRead = ({ isProxy }: Props) => {
         key={ id + '_' + index }
         data={ item }
         onSubmit={ handleMethodFormSubmit }
-        renderResult={ renderResult }
+        ResultComponent={ ContractReadResult }
       />
     );
-  }, [ handleMethodFormSubmit, renderResult ]);
+  }, [ handleMethodFormSubmit ]);
 
   if (isError) {
     return <DataFetchAlert/>;

ui/address/contract/ContractReadResult.tsx

+import { Alert, Box, chakra, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { ContractMethodReadResult } from './types';
+import type { SmartContractReadMethod } from 'types/api/contract';
+
+interface Props {
+  item: SmartContractReadMethod;
+  result: ContractMethodReadResult;
+  onSettle: () => void;
+}
+
+const ContractReadResult = ({ item, result, onSettle }: Props) => {
+  const resultBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  React.useEffect(() => {
+    onSettle();
+  }, [ onSettle ]);
+
+  if ('status' in result) {
+    return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm">{ result.statusText }</Alert>;
+  }
+
+  if (result.is_error) {
+    const message = 'error' in result.result ? result.result.error : result.result.message;
+    return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm">{ message }</Alert>;
+  }
+
+  return (
+    <Box mt={ 3 } p={ 4 } borderRadius="md" bgColor={ resultBgColor } fontSize="sm">
+      <p>
+        [ <chakra.span fontWeight={ 600 }>{ 'name' in item ? item.name : '' }</chakra.span> method response ]
+      </p>
+      <p>[</p>
+      { result.result.output.map(({ type, value }, index) => (
+        <chakra.p key={ index } whiteSpace="break-spaces" wordBreak="break-all">  { type }: { String(value) }</chakra.p>
+      )) }
+      <p>]</p>
+    </Box>
+  );
+};
+
+export default React.memo(ContractReadResult);

ui/address/contract/ContractSourceCode.tsx

@@ -36,7 +36,7 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
     </Tooltip>
   ) : null;
 
-  if (!additionalSource) {
+  if (!additionalSource?.length) {
     return (
       <Box>
         <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>

ui/address/contract/ContractWrite.tsx

@@ -3,7 +3,6 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { useAccount, useSigner } from 'wagmi';
 
-import type { ContractMethodWriteResult } from './types';
 import type { SmartContractWriteMethod } from 'types/api/contract';
 
 import config from 'configs/app/config';
@@ -89,21 +88,17 @@ const ContractWrite = ({ isProxy }: Props) => {
     }
   }, [ _contract, addressHash, isConnected, signer ]);
 
-  const renderResult = React.useCallback((item: SmartContractWriteMethod, result: ContractMethodWriteResult, onSettle: () => void) => {
-    return <ContractWriteResult result={ result } onSettle={ onSettle }/>;
-  }, []);
-
   const renderContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {
     return (
       <ContractMethodCallable
         key={ id + '_' + index }
         data={ item }
         onSubmit={ handleMethodFormSubmit }
-        renderResult={ renderResult }
+        ResultComponent={ ContractWriteResult }
         isWrite
       />
     );
-  }, [ handleMethodFormSubmit, renderResult ]);
+  }, [ handleMethodFormSubmit ]);
 
   if (isError) {
     return <DataFetchAlert/>;
@@ -125,4 +120,4 @@ const ContractWrite = ({ isProxy }: Props) => {
   );
 };
 
-export default ContractWrite;
+export default React.memo(ContractWrite);

ui/shared/RoutedTabs/RoutedTabsMenu.tsx

@@ -56,7 +56,7 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
               justifyContent="left"
               data-index={ index }
             >
-              { tab.title }
+              { typeof tab.title === 'function' ? tab.title() : tab.title }
             </Button>
           )) }
         </PopoverBody>

ui/shared/address/AddressIcon.tsx

@@ -7,7 +7,7 @@ import type { AddressParam } from 'types/api/addressParams';
 import AddressContractIcon from 'ui/shared/address/AddressContractIcon';
 
 type Props = {
-  address: Pick<AddressParam, 'hash' | 'is_contract'>;
+  address: Pick<AddressParam, 'hash' | 'is_contract' | 'implementation_name'>;
   className?: string;
 }