bugfix: Cannot convert string to buffer while write to the contract (#1724)

Fixes #1717

ui/address/contract/methodForm/ContractMethodForm.tsx

 import { Box, Button, Flex, chakra } from '@chakra-ui/react';
+import _mapValues from 'lodash/mapValues';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, FormProvider } from 'react-hook-form';
@@ -35,7 +36,11 @@ const ContractMethodForm = <T extends SmartContractMethod>({ data, onSubmit, res
   });
 
   const onFormSubmit: SubmitHandler<ContractMethodFormFields> = React.useCallback(async(formData) => {
-    const args = transformFormDataToMethodArgs(formData);
+    // The API used for reading from contracts expects all values to be strings.
+    const formattedData = methodType === 'read' ?
+      _mapValues(formData, (value) => value !== undefined ? String(value) : undefined) :
+      formData;
+    const args = transformFormDataToMethodArgs(formattedData);
 
     setResult(undefined);
     setLoading(true);

ui/address/contract/methodForm/useFormatFieldValue.tsx

@@ -18,7 +18,7 @@ export default function useFormatFieldValue({ argType, argTypeMatchInt }: Params
 
     if (argTypeMatchInt) {
       const formattedString = value.replace(/\s/g, '');
-      return formattedString;
+      return parseInt(formattedString);
     }
 
     if (argType === 'bool') {
@@ -26,11 +26,11 @@ export default function useFormatFieldValue({ argType, argTypeMatchInt }: Params
 
       switch (formattedValue) {
         case 'true': {
-          return 'true';
+          return true;
         }
 
         case 'false':{
-          return 'false';
+          return false;
         }
 
         default:

ui/address/contract/methodForm/useValidateField.tsx

@@ -18,13 +18,15 @@ export default function useValidateField({ isOptional, argType, argTypeMatchInt
     return argType.match(BYTES_REGEXP);
   }, [ argType ]);
 
-  return React.useCallback((value: string | undefined) => {
+  // some values are formatted before they are sent to the validator
+  // see ./useFormatFieldValue.tsx hook
+  return React.useCallback((value: string | number | boolean | undefined) => {
     if (value === undefined || value === '') {
       return isOptional ? true : 'Field is required';
     }
 
     if (argType === 'address') {
-      if (!isAddress(value)) {
+      if (typeof value !== 'string' || !isAddress(value)) {
         return 'Invalid address format';
       }
 
@@ -39,13 +41,11 @@ export default function useValidateField({ isOptional, argType, argTypeMatchInt
     }
 
     if (argTypeMatchInt) {
-      const formattedValue = Number(value);
-
-      if (Object.is(formattedValue, NaN)) {
+      if (typeof value !== 'number' || Object.is(value, NaN)) {
         return 'Invalid integer format';
       }
 
-      if (formattedValue > argTypeMatchInt.max || formattedValue < argTypeMatchInt.min) {
+      if (value > argTypeMatchInt.max || value < argTypeMatchInt.min) {
         const lowerBoundary = argTypeMatchInt.isUnsigned ? '0' : `-1 * 2 ^ ${ Number(argTypeMatchInt.power) - 1 }`;
         const upperBoundary = argTypeMatchInt.isUnsigned ? `2 ^ ${ argTypeMatchInt.power } - 1` : `2 ^ ${ Number(argTypeMatchInt.power) - 1 } - 1`;
         return `Value should be in range from "${ lowerBoundary }" to "${ upperBoundary }" inclusively`;
@@ -55,7 +55,7 @@ export default function useValidateField({ isOptional, argType, argTypeMatchInt
     }
 
     if (argType === 'bool') {
-      if (value !== 'true' && value !== 'false') {
+      if (typeof value !== 'boolean') {
         return 'Invalid boolean format. Allowed values: true, false';
       }
     }

ui/address/contract/methodForm/utils.ts

@@ -2,7 +2,7 @@ import _set from 'lodash/set';
 
 import type { SmartContractMethodInput } from 'types/api/contract';
 
-export type ContractMethodFormFields = Record<string, string | undefined>;
+export type ContractMethodFormFields = Record<string, string | boolean | number | undefined>;
 
 export const INT_REGEXP = /^(u)?int(\d+)?$/i;