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

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

@@ -1,4 +1,4 @@
-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,14 +110,18 @@ const ContractAbiItem = ({ data, index, id, addressHash, tab, onSubmit }: Props)
             </AccordionButton>
           </Element>
           <AccordionPanel pb={ 4 } pr={ 0 } pl="28px" w="calc(100% - 6px)">
-            <ContractMethodForm
-              key={ id + '_' + index + '_' + attempt }
-              data={ data }
-              attempt={ attempt }
-              onSubmit={ onSubmit }
-              onReset={ handleReset }
-              isOpen={ isExpanded }
-            />
+            { '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 }
+                attempt={ attempt }
+                onSubmit={ onSubmit }
+                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

@@ -1,4 +1,5 @@
 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

@@ -1,7 +1,8 @@
 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),
         };
       }),
   };