add custom abi alert and minor fixes

mocks/contract/methods.ts

@@ -57,6 +57,22 @@ export const read: Array<SmartContractReadMethod> = [
     stateMutability: 'view',
     type: 'function',
   },
+  {
+    constant: true,
+    inputs: [],
+    method_id: '165ec2e2',
+    name: 'arianeeWhitelist',
+    outputs: [
+      {
+        name: '',
+        type: 'address',
+        value: '0xd3eee7f8e8021db24825c3457d5479f2b57f40ef',
+      },
+    ],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function',
+  },
 ];
 
 export const readResultSuccess: SmartContractQueryMethodReadSuccess = {

ui/address/contract/ContractCustomAbiAlert.tsx

+import { Alert } from '@chakra-ui/react';
+import React from 'react';
+
+const ContractCustomAbiAlert = () => {
+  return (
+    <Alert status="warning" mb={ 4 }>
+        Note: Contract with custom ABI is only meant for debugging purpose and it is the user’s responsibility to ensure that the provided ABI
+        matches the contract, otherwise errors may occur or results returned may be incorrect.
+        Blockscout is not responsible for any losses that arise from the use of Read & Write contract.
+    </Alert>
+  );
+};
+
+export default React.memo(ContractCustomAbiAlert);

ui/address/contract/ContractMethodField.tsx

@@ -27,7 +27,13 @@ const ContractMethodField = ({ control, name, placeholder, setValue, isDisabled,
 
   const renderInput = React.useCallback(({ field }: { field: ControllerRenderProps<MethodFormFields> }) => {
     return (
-      <FormControl id={ name } flexBasis={{ base: '100%', lg: 'calc((100% - 24px) / 3 - 65px)' }} w="auto" flexGrow={ 1 } isDisabled={ isDisabled }>
+      <FormControl
+        id={ name }
+        flexBasis={{ base: '100%', lg: 'calc((100% - 24px) / 3 - 65px)' }}
+        w={{ base: '100%', lg: 'auto' }}
+        flexGrow={ 1 }
+        isDisabled={ isDisabled
+        }>
         <InputGroup size="xs">
           <Input
             { ...field }

ui/address/contract/ContractRead.tsx

@@ -12,6 +12,7 @@ import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import ContractConnectWallet from './ContractConnectWallet';
+import ContractCustomAbiAlert from './ContractCustomAbiAlert';
 import ContractImplementationAddress from './ContractImplementationAddress';
 import ContractMethodCallable from './ContractMethodCallable';
 import ContractMethodConstant from './ContractMethodConstant';
@@ -91,6 +92,7 @@ const ContractRead = ({ isProxy, isCustomAbi }: Props) => {
 
   return (
     <>
+      { isCustomAbi && <ContractCustomAbiAlert/> }
       <ContractConnectWallet/>
       { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
       <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>

ui/address/contract/ContractWrite.tsx

@@ -13,6 +13,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import { useContractContext } from './context';
 import ContractConnectWallet from './ContractConnectWallet';
+import ContractCustomAbiAlert from './ContractCustomAbiAlert';
 import ContractImplementationAddress from './ContractImplementationAddress';
 import ContractMethodCallable from './ContractMethodCallable';
 import ContractWriteResult from './ContractWriteResult';
@@ -119,6 +120,7 @@ const ContractWrite = ({ isProxy, isCustomAbi }: Props) => {
 
   return (
     <>
+      { isCustomAbi && <ContractCustomAbiAlert/> }
       <ContractConnectWallet/>
       { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
       <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>

ui/pages/Address.tsx

@@ -64,7 +64,7 @@ const AddressPageContent = () => {
         { id: 'read_proxy', title: 'Read proxy', component: <ContractRead isProxy/> } :
         undefined,
       addressQuery.data?.has_custom_methods_read ?
-        { id: 'read_custom_methods', title: 'Read custom methods', component: <ContractRead isCustomAbi/> } :
+        { id: 'read_custom_methods', title: 'Read custom', component: <ContractRead isCustomAbi/> } :
         undefined,
       addressQuery.data?.has_methods_write ?
         { id: 'write_contract', title: 'Write contract', component: <ContractWrite/> } :
@@ -73,7 +73,7 @@ const AddressPageContent = () => {
         { id: 'write_proxy', title: 'Write proxy', component: <ContractWrite isProxy/> } :
         undefined,
       addressQuery.data?.has_custom_methods_write ?
-        { id: 'write_custom_methods', title: 'Write custom methods', component: <ContractWrite isCustomAbi/> } :
+        { id: 'write_custom_methods', title: 'Write custom', component: <ContractWrite isCustomAbi/> } :
         undefined,
     ].filter(notEmpty);
   }, [ addressQuery.data ]);