bytes validation

lib/stringToBytes.tsx

+export default function stringToBytes(str: string) {
+  const utf8Encode = new TextEncoder();
+  return utf8Encode.encode(str);
+}

ui/address/contract/ContractMethodField.tsx

@@ -14,10 +14,11 @@ import { isAddress } from 'viem';
 import type { MethodFormFields } from './types';
 import type { SmartContractMethodArgType } from 'types/api/contract';
 
+import stringToBytes from 'lib/stringToBytes';
 import ClearButton from 'ui/shared/ClearButton';
 
 import ContractMethodFieldZeroes from './ContractMethodFieldZeroes';
-import { INT_REGEXP, getIntBoundaries, formatBooleanValue } from './utils';
+import { INT_REGEXP, BYTES_REGEXP, getIntBoundaries, formatBooleanValue } from './utils';
 
 interface Props {
   control: Control<MethodFormFields>;
@@ -59,6 +60,10 @@ const ContractMethodField = ({ control, name, valueType, placeholder, setValue,
     return { isUnsigned, power, min, max };
   }, [ valueType ]);
 
+  const bytesMatch = React.useMemo(() => {
+    return valueType.match(BYTES_REGEXP);
+  }, [ valueType ]);
+
   const renderInput = React.useCallback((
     { field, formState }: { field: ControllerRenderProps<MethodFormFields>; formState: UseFormStateReturn<MethodFormFields> },
   ) => {
@@ -129,8 +134,25 @@ const ContractMethodField = ({ control, name, valueType, placeholder, setValue,
       }
     }
 
+    if (bytesMatch) {
+      const [ , length ] = bytesMatch;
+
+      if (value.startsWith('0x')) {
+        if (value.replace('0x', '').length % 2 !== 0) {
+          return 'Invalid bytes format';
+        }
+      }
+
+      if (length) {
+        const valueLengthInBytes = value.startsWith('0x') ? value.replace('0x', '').length / 2 : stringToBytes(value).length;
+        return valueLengthInBytes > Number(length) ? `Value should be a maximum of ${ length } bytes` : true;
+      }
+
+      return true;
+    }
+
     return true;
-  }, [ intMatch, valueType ]);
+  }, [ bytesMatch, intMatch, valueType ]);
 
   return (
     <>

ui/address/contract/utils.ts

@@ -4,6 +4,8 @@ import type { SmartContractWriteMethod } from 'types/api/contract';
 
 export const INT_REGEXP = /^(u)?int(\d+)?$/i;
 
+export const BYTES_REGEXP = /^bytes(\d+)?$/i;
+
 export const getIntBoundaries = (power: number, isUnsigned: boolean) => {
   const maxUnsigned = 2 ** power;
   const max = isUnsigned ? maxUnsigned - 1 : maxUnsigned / 2 - 1;