Show error if contract method has invalid data structure (#2087)

* show error if contract method has invalid data structure

* convert address to checksum when reading from contract method

icons/block_countdown.svg

 <svg viewBox="0 0 241 185" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.5 57.705 120.306 22.5l62.743 35.205v72.397l-48.007 26.842v-11.695l37.055-21.373-8.814-5.11.794-1.37 8.681 5.034V70.1l-23.049 13.044c.109-.729.164-1.464.166-2.2v-9.556l17.678-10.174-46.559-26.74v10.17h-1.583V34.605L74.17 61.214l16.33 9.625V81.064c.002.588.037 1.175.107 1.76L68.09 70.1v52.366l8.708-4.994.787 1.373-8.808 5.052 37.262 21.819.234 11.697L58.5 129.576V57.705Zm32.219 51.843c-.11.642-.179 1.29-.206 1.939l-5.774 3.289-.784-1.375 6.764-3.853Zm24.672 28.095h10.139v22.05l-5.147 2.807-4.992-2.806v-22.051Zm10.139-10h-10.139v-4.78h10.139v4.78Zm0-29.66-1.706-1.412 14.301-11.83a4.797 4.797 0 0 0 1.285-1.688 5.169 5.169 0 0 0 .465-2.137v-3.772l-4.375 2.518v1.254l-1.586 1.315h-2.878l-10.73 6.175-10.478-6.175h-3.504l-1.449-1.195V79.31l-4.375-2.578v4.303c.002.741.161 1.472.465 2.136.245.535.578 1.014.982 1.414.097.096.198.187.303.274l4.949 4.063 9.352 7.648-1.16.95v5.968l2.609-2.137v7.17c0 .634.23 1.242.641 1.69.41.448.966.7 1.547.7.58 0 1.136-.252 1.546-.7a2.503 2.503 0 0 0 .641-1.69v-7.141l3.155 2.607v-6.006Zm-4.536-27.703h-1.583v-.032h1.583v.032Zm28.844 40.893 6.353 3.66.79-1.372-7.414-4.27c.134.655.224 1.317.271 1.982ZM120.994 55.5h-1.583v-3.763h1.583V55.5Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.5 57.705 120.306 22.5l62.743 35.205v72.397l-48.007 26.842v-11.695l37.055-21.373-8.814-5.11.794-1.37 8.681 5.034V70.1l-23.049 13.044c.109-.729.164-1.464.166-2.2v-9.556l17.678-10.174-46.559-26.74v10.17h-1.583V34.605L74.17 61.214l16.33 9.625v10.225c.002.588.037 1.175.107 1.76L68.09 70.1v52.366l8.708-4.994.787 1.373-8.808 5.052 37.262 21.819.234 11.697L58.5 129.576V57.705Zm32.219 51.843c-.11.642-.179 1.29-.206 1.939l-5.774 3.289-.784-1.375 6.764-3.853Zm24.672 28.095h10.139v22.05l-5.147 2.807-4.992-2.806v-22.051Zm10.139-10h-10.139v-4.78h10.139v4.78Zm0-29.66-1.706-1.412 14.301-11.83a4.797 4.797 0 0 0 1.285-1.688 5.169 5.169 0 0 0 .465-2.137v-3.772l-4.375 2.518v1.254l-1.586 1.315h-2.878l-10.73 6.175-10.478-6.175h-3.504l-1.449-1.195V79.31l-4.375-2.578v4.303c.002.741.161 1.472.465 2.136a4.797 4.797 0 0 0 1.285 1.688l4.949 4.063 9.352 7.648-1.16.95v5.968l2.609-2.137v7.17c0 .634.23 1.242.641 1.69.41.448.966.7 1.547.7.58 0 1.136-.252 1.546-.7a2.503 2.503 0 0 0 .641-1.69v-7.141l3.155 2.607v-6.006Zm-4.536-27.703h-1.583v-.032h1.583v.032Zm28.844 40.893 6.353 3.66.79-1.372-7.414-4.27c.134.655.224 1.317.271 1.982ZM120.994 55.5h-1.583v-3.763h1.583V55.5Z" fill="currentColor"/>
   <path d="M138.125 84.74a4.728 4.728 0 0 0 1.285-1.688 5.169 5.169 0 0 0 .465-2.136V70.28c0-1.268-.461-2.483-1.281-3.38-.821-.896-1.934-1.4-3.094-1.4h-30.625c-1.16 0-2.273.504-3.094 1.4-.82.897-1.281 2.112-1.281 3.38v10.756c.002.741.161 1.472.465 2.136a4.729 4.729 0 0 0 1.285 1.688l4.949 4.063 9.352 7.648-14.301 11.712a4.725 4.725 0 0 0-1.285 1.688 5.166 5.166 0 0 0-.465 2.136v10.756c0 1.267.461 2.483 1.281 3.38.821.896 1.934 1.4 3.094 1.4H135.5c1.16 0 2.273-.504 3.094-1.4.82-.897 1.281-2.113 1.281-3.38v-10.636a5.174 5.174 0 0 0-.465-2.137 4.733 4.733 0 0 0-1.285-1.688l-14.301-11.83 6.207-5.14 8.094-6.692Zm-33.25-14.46H135.5v10.636l-1.586 1.315h-27.59l-1.449-1.195V70.28Zm30.625 41.947v10.636h-30.625v-10.756L118 101.352v7.17c0 .634.23 1.242.641 1.69.41.448.966.7 1.547.7.58 0 1.136-.252 1.546-.7a2.503 2.503 0 0 0 .641-1.69v-7.141l13.125 10.846Z" fill="currentColor" stroke="currentColor" stroke-width="4"/>
 </svg>

mocks/contract/methods.ts

@@ -129,6 +129,6 @@ export const write: Array<SmartContractMethodWrite> = [
     payable: false,
     stateMutability: 'nonpayable',
     type: 'function',
-    method_id: '0x06',
+    is_invalid: true,
   },
 ];

ui/address/contract/methods/ContractAbiItem.tsx

-import { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Tooltip, useClipboard, useDisclosure } from '@chakra-ui/react';
+import { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Alert, Box, Tooltip, useClipboard, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 import { Element } from 'react-scroll';
 
@@ -110,6 +110,9 @@ const ContractAbiItem = ({ data, index, id, addressHash, tab, onSubmit }: Props)
             </AccordionButton>
           </Element>
           <AccordionPanel pb={ 4 } pr={ 0 } pl="28px" w="calc(100% - 6px)">
+            { 'is_invalid' in data && data.is_invalid ? (
+              <Alert status="warning">An error occurred while parsing the method signature.</Alert>
+            ) : (
               <ContractMethodForm
                 key={ id + '_' + index + '_' + attempt }
                 data={ data }
@@ -118,6 +121,7 @@ const ContractAbiItem = ({ data, index, id, addressHash, tab, onSubmit }: Props)
                 onReset={ handleReset }
                 isOpen={ isExpanded }
               />
+            ) }
           </AccordionPanel>
         </>
       ) }

ui/address/contract/methods/form/resultPublicClient/ItemTuple.tsx

@@ -16,7 +16,7 @@ interface Props {
 
 const ItemTuple = ({ abiParameter, data, mode, level }: Props) => {
   return (
-    <p>
+    <div>
       <p>
         <span>{ printRowOffset(level) }</span>
         <chakra.span fontWeight={ 500 }>{ abiParameter.name || abiParameter.internalType }</chakra.span>
@@ -36,7 +36,7 @@ const ItemTuple = ({ abiParameter, data, mode, level }: Props) => {
         );
       }) }
       <p>{ printRowOffset(level) }{ '}' }</p>
-    </p>
+    </div>
   );
 };
 

ui/address/contract/methods/types.ts

@@ -6,8 +6,9 @@ export type MethodType = 'read' | 'write';
 export type MethodCallStrategy = 'read' | 'write' | 'simulate';
 export type ResultViewMode = 'preview' | 'result';
 
-export type SmartContractMethodRead = AbiFunction & { method_id: string };
-export type SmartContractMethodWrite = AbiFunction & { method_id: string } | AbiFallback | AbiReceive;
+export type SmartContractMethodCustomFields = { method_id: string } | { is_invalid: boolean };
+export type SmartContractMethodRead = AbiFunction & SmartContractMethodCustomFields;
+export type SmartContractMethodWrite = AbiFunction & SmartContractMethodCustomFields | AbiFallback | AbiReceive;
 export type SmartContractMethod = SmartContractMethodRead | SmartContractMethodWrite;
 
 export interface FormSubmitResultPublicClient {

ui/address/contract/methods/useCallMethodPublicClient.ts

 import React from 'react';
+import { getAddress } from 'viem';
 import { usePublicClient } from 'wagmi';
 
 import type { FormSubmitResult, MethodCallStrategy, SmartContractMethod } from './types';
@@ -15,7 +16,7 @@ interface Params {
 
 export default function useCallMethodPublicClient(): (params: Params) => Promise<FormSubmitResult> {
   const publicClient = usePublicClient({ chainId: Number(config.chain.id) });
-  const { address } = useAccount();
+  const { address: account } = useAccount();
 
   return React.useCallback(async({ args, item, addressHash, strategy }) => {
     if (!('name' in item)) {
@@ -26,12 +27,14 @@ export default function useCallMethodPublicClient(): (params: Params) => Promise
       throw new Error('Public Client is not defined');
     }
 
+    const address = getAddress(addressHash);
+
     const params = {
       abi: [ item ],
       functionName: item.name,
       args: args,
-      address: addressHash as `0x${ string }`,
-      account: address,
+      address,
+      account,
     };
 
     const result = strategy === 'read' ? await publicClient.readContract(params) : await publicClient.simulateContract(params);
@@ -40,5 +43,5 @@ export default function useCallMethodPublicClient(): (params: Params) => Promise
       data: strategy === 'read' ? result : result.result,
     };
 
-  }, [ address, publicClient ]);
+  }, [ account, publicClient ]);
 }

ui/address/contract/methods/utils.ts

 import type { Abi } from 'abitype';
+import type { AbiFunction } from 'viem';
 import { toFunctionSelector } from 'viem';
 
-import type { SmartContractMethodRead, SmartContractMethodWrite } from './types';
+import type { SmartContractMethodCustomFields, SmartContractMethodRead, SmartContractMethodWrite } from './types';
 
 export const getNativeCoinValue = (value: unknown) => {
   if (typeof value !== 'string') {
@@ -25,13 +26,25 @@ export const isWriteMethod = (method: Abi[number]): method is SmartContractMetho
   (method.type === 'function' || method.type === 'fallback' || method.type === 'receive') &&
     !isReadMethod(method);
 
+const enrichWithMethodId = (method: AbiFunction): SmartContractMethodCustomFields => {
+  try {
+    return {
+      method_id: toFunctionSelector(method).slice(2),
+    };
+  } catch (error) {
+    return {
+      is_invalid: true,
+    };
+  }
+};
+
 export function divideAbiIntoMethodTypes(abi: Abi): DividedAbi {
   return {
     read: abi
       .filter(isReadMethod)
       .map((method) => ({
         ...method,
-        method_id: toFunctionSelector(method).slice(2),
+        ...enrichWithMethodId(method),
       })),
     write: abi
       .filter(isWriteMethod)
@@ -43,7 +56,7 @@ export function divideAbiIntoMethodTypes(abi: Abi): DividedAbi {
 
         return {
           ...method,
-          method_id: toFunctionSelector(method).slice(2),
+          ...enrichWithMethodId(method),
         };
       }),
   };