show error if contract method has invalid data structure

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/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),
  };
  }),
  };