simplify styles

ui/address/contract/ContractMethodCallable.tsx

-import { Box, Button, chakra, Flex, Grid, Icon, Text } from '@chakra-ui/react';
+import { Box, Button, chakra, Flex, Icon, Text } from '@chakra-ui/react';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, FormProvider } from 'react-hook-form';
@@ -90,10 +90,9 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
           onSubmit={ formApi.handleSubmit(onFormSubmit) }
           onChange={ handleFormChange }
         >
-          <Grid
-            columnGap={ 3 }
-            rowGap={{ base: 2, lg: 3 }}
-            gridTemplateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 250px) minmax(0, 1fr)' }}
+          <Flex
+            flexDir="column"
+            rowGap={ 3 }
             mb={ 3 }
             _empty={{ display: 'none' }}
           >
@@ -113,7 +112,6 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
                     >
                       { input.name } ({ input.type })
                     </Box>
-                    <div/>
                     { input.components.map((component, componentIndex) => {
                       const fieldName = getFormFieldName(
                         { name: component.name, index: componentIndex },
@@ -150,7 +148,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
                 />
               );
             }) }
-          </Grid>
+          </Flex>
           <Button
             isLoading={ isLoading }
             loadingText={ isWrite ? 'Write' : 'Read' }

ui/address/contract/ContractMethodCallableRow.tsx

-import { Box, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
@@ -39,7 +39,6 @@ const ContractMethodCallableRow = ({ argName, fieldName, fieldType, argType, onC
   ) : (
     <ContractMethodField
       name={ fieldName }
-      type={ fieldType }
       argType={ argType }
       placeholder={ argType }
       control={ control }
@@ -54,35 +53,31 @@ const ContractMethodCallableRow = ({ argName, fieldName, fieldType, argType, onC
   const isNativeCoinField = fieldType === 'native_coin';
 
   return (
-    <>
+    <Flex
+      flexDir={{ base: 'column', lg: 'row' }}
+      columnGap={ 3 }
+      rowGap={{ base: 2, lg: 0 }}
+      bgColor={ isNativeCoinField ? nativeCoinFieldBgColor : undefined }
+      py={ isNativeCoinField ? 1 : undefined }
+      px={ isNativeCoinField ? '6px' : undefined }
+      mx={ isNativeCoinField ? '-6px' : undefined }
+      borderRadius="base"
+    >
       <Box
         position="relative"
         fontWeight={ 500 }
         lineHeight="20px"
-        pt={{ base: isNativeCoinField ? '6px' : 0, lg: isNativeCoinField ? '10px' : '6px' }}
-        pb={{ lg: isNativeCoinField ? '10px' : '6px' }}
+        py={{ lg: '6px' }}
         fontSize="sm"
         color={ isGrouped ? 'text_secondary' : 'initial' }
         wordBreak="break-word"
-        _before={ isNativeCoinField ? {
-          content: `" "`,
-          position: 'absolute',
-          top: 0,
-          left: '-6px',
-          width: { base: 'calc(100% + 12px)', lg: 'calc(100% + 18px)' },
-          height: { base: 'calc(100% + 8px)', lg: '100%' },
-          bgColor: nativeCoinFieldBgColor,
-          borderTopLeftRadius: 'base',
-          borderTopRightRadius: { base: 'base', lg: 'none' },
-          borderBottomRightRadius: 'none',
-          borderBottomLeftRadius: { base: 'none', lg: 'base' },
-          zIndex: -1,
-        } : undefined }
+        w={{ lg: '250px' }}
+        flexShrink={ 0 }
       >
         { argName }{ isOptional ? '' : '*' } ({ argType })
       </Box>
       { content }
-    </>
+    </Flex>
   );
 };
 

ui/address/contract/ContractMethodField.tsx

@@ -13,7 +13,7 @@ import { NumericFormat } from 'react-number-format';
 import { isAddress, isHex, getAddress } from 'viem';
 
 import type { MethodFormFields } from './types';
-import type { SmartContractMethodArgType, SmartContractMethodInput } from 'types/api/contract';
+import type { SmartContractMethodArgType } from 'types/api/contract';
 
 import ClearButton from 'ui/shared/ClearButton';
 
@@ -22,7 +22,6 @@ import { INT_REGEXP, BYTES_REGEXP, getIntBoundaries, formatBooleanValue } from '
 
 interface Props {
   name: string;
-  type?: SmartContractMethodInput['fieldType'];
   index?: number;
   groupName?: string;
   placeholder: string;
@@ -35,9 +34,8 @@ interface Props {
   onChange: () => void;
 }
 
-const ContractMethodField = ({ control, name, type, groupName, index, argType, placeholder, setValue, getValues, isDisabled, isOptional, onChange }: Props) => {
+const ContractMethodField = ({ control, name, groupName, index, argType, placeholder, setValue, getValues, isDisabled, isOptional, onChange }: Props) => {
   const ref = React.useRef<HTMLInputElement>(null);
-  const nativeCoinFieldBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
   const bgColor = useColorModeValue('white', 'black');
 
   const handleClear = React.useCallback(() => {
@@ -81,26 +79,7 @@ const ContractMethodField = ({ control, name, type, groupName, index, argType, p
     const hasZerosControl = intMatch && Number(intMatch.power) >= 64;
 
     return (
-      <Box
-        w="100%"
-        pt={{ lg: type === 'native_coin' ? 1 : 0 }}
-        pb={{ base: type === 'native_coin' ? '6px' : 0, lg: type === 'native_coin' ? 1 : 0 }}
-        position="relative"
-        _before={ type === 'native_coin' ? {
-          content: `" "`,
-          position: 'absolute',
-          top: 0,
-          right: '-6px',
-          width: { base: 'calc(100% + 12px)', lg: 'calc(100% + 6px)' },
-          height: '100%',
-          bgColor: nativeCoinFieldBgColor,
-          borderTopLeftRadius: 'none',
-          borderTopRightRadius: { lg: 'base' },
-          borderBottomRightRadius: 'base',
-          borderBottomLeftRadius: { base: 'base', lg: 'none' },
-          zIndex: -1,
-        } : undefined }
-      >
+      <Box w="100%">
         <FormControl
           id={ name }
           isDisabled={ isDisabled }
@@ -131,10 +110,10 @@ const ContractMethodField = ({ control, name, type, groupName, index, argType, p
         { error && <Box color="error" fontSize="sm" mt={ 1 }>{ error.message }</Box> }
       </Box>
     );
-  }, [ index, groupName, name, intMatch, type, nativeCoinFieldBgColor, isDisabled, isOptional, placeholder, bgColor, handleClear, handleAddZeroesClick ]);
+  }, [ index, groupName, name, intMatch, isDisabled, isOptional, placeholder, bgColor, handleClear, handleAddZeroesClick ]);
 
-  const validate = React.useCallback((_value: string | Array<string>) => {
-    if (typeof _value === 'object') {
+  const validate = React.useCallback((_value: string | Array<string> | undefined) => {
+    if (typeof _value === 'object' || !_value) {
       return;
     }
 
@@ -191,7 +170,7 @@ const ContractMethodField = ({ control, name, type, groupName, index, argType, p
 
       if (length) {
         const valueLengthInBytes = value.replace('0x', '').length / 2;
-        return valueLengthInBytes > Number(length) ? `Value should be a maximum of ${ length } bytes` : true;
+        return valueLengthInBytes !== Number(length) ? `Value should be ${ length } bytes in length` : true;
       }
 
       return true;

ui/address/contract/ContractMethodFieldArray.tsx

@@ -55,7 +55,7 @@ const ContractMethodFieldArray = ({ control, name, setValue, getValues, isDisabl
   }, [ remove ]);
 
   return (
-    <Flex flexDir="column" rowGap={ 3 }>
+    <Flex flexDir="column" rowGap={ 3 } w="100%">
       { fields.map((field, index, array) => {
         return (
           <Flex key={ field.id } columnGap={ 3 }>