handle button click

ui/address/contract/ContractMethodCallable.tsx

@@ -68,7 +68,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
     ];
   }, [ data ]);
 
-  const { control, handleSubmit, setValue } = useForm<MethodFormFields>({
+  const { control, handleSubmit, setValue, getValues } = useForm<MethodFormFields>({
     defaultValues: _fromPairs(inputs.map(({ name }, index) => [ getFieldName(name, index), '' ])),
   });
 
@@ -122,8 +122,9 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
               placeholder={ `${ name }(${ type })` }
               control={ control }
               setValue={ setValue }
+              getValues={ getValues }
               isDisabled={ isLoading }
-              onClear={ handleFormChange }
+              onChange={ handleFormChange }
             />
           );
         }) }

ui/address/contract/ContractMethodField.tsx

@@ -5,7 +5,7 @@ import {
   InputRightElement,
 } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, UseFormSetValue } from 'react-hook-form';
+import type { Control, ControllerRenderProps, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { MethodFormFields } from './types';
@@ -18,21 +18,30 @@ import ContractMethodFieldZeroes from './ContractMethodFieldZeroes';
 interface Props {
   control: Control<MethodFormFields>;
   setValue: UseFormSetValue<MethodFormFields>;
+  getValues: UseFormGetValues<MethodFormFields>;
   placeholder: string;
   name: string;
   valueType: SmartContractMethodArgType;
   isDisabled: boolean;
-  onClear: () => void;
+  onChange: () => void;
 }
 
-const ContractMethodField = ({ control, name, valueType, placeholder, setValue, isDisabled, onClear }: Props) => {
+const ContractMethodField = ({ control, name, valueType, placeholder, setValue, getValues, isDisabled, onChange }: Props) => {
   const ref = React.useRef<HTMLInputElement>(null);
 
   const handleClear = React.useCallback(() => {
     setValue(name, '');
-    onClear();
+    onChange();
     ref.current?.focus();
-  }, [ name, onClear, setValue ]);
+  }, [ name, onChange, setValue ]);
+
+  const handleAddZeroesClick = React.useCallback((power: number) => {
+    const value = getValues()[name];
+    const zeroes = Array(power).fill('0').join('');
+    const newValue = value ? value + zeroes : '1' + zeroes;
+    setValue(name, newValue);
+    onChange();
+  }, [ getValues, name, onChange, setValue ]);
 
   const hasZerosControl = valueType.includes('int') && !valueType.includes('[]');
 
@@ -54,12 +63,12 @@ const ContractMethodField = ({ control, name, valueType, placeholder, setValue,
           />
           <InputRightElement w="auto" right={ 1 }>
             { field.value && <InputClearButton onClick={ handleClear } isDisabled={ isDisabled }/> }
-            { hasZerosControl && <ContractMethodFieldZeroes/> }
+            { hasZerosControl && <ContractMethodFieldZeroes onClick={ handleAddZeroesClick }/> }
           </InputRightElement>
         </InputGroup>
       </FormControl>
     );
-  }, [ handleClear, isDisabled, hasZerosControl, name, placeholder ]);
+  }, [ name, isDisabled, placeholder, hasZerosControl, handleClear, handleAddZeroesClick ]);
 
   return (
     <Controller

ui/address/contract/ContractMethodFieldZeroes.tsx

@@ -18,8 +18,12 @@ import iconEastMini from 'icons/arrows/east-mini.svg';
 import iconCheck from 'icons/check.svg';
 import { times } from 'lib/html-entities';
 
-const ContractMethodFieldZeroes = () => {
-  const [ selectedOption, setSelectedOption ] = React.useState<number>();
+interface Props {
+  onClick: (power: number) => void;
+}
+
+const ContractMethodFieldZeroes = ({ onClick }: Props) => {
+  const [ selectedOption, setSelectedOption ] = React.useState<number | undefined>(18);
   const [ customValue, setCustomValue ] = React.useState<number>();
   const { isOpen, onToggle, onClose } = useDisclosure();
 
@@ -27,6 +31,7 @@ const ContractMethodFieldZeroes = () => {
     const id = Number((event.currentTarget as HTMLDivElement).getAttribute('data-id'));
     if (!Object.is(id, NaN)) {
       setSelectedOption((prev) => prev === id ? undefined : id);
+      setCustomValue(undefined);
       onClose();
     }
   }, [ onClose ]);
@@ -38,6 +43,10 @@ const ContractMethodFieldZeroes = () => {
 
   const value = selectedOption || customValue;
 
+  const handleButtonClick = React.useCallback(() => {
+    value && onClick(value);
+  }, [ onClick, value ]);
+
   return (
     <>
       { Boolean(value) && (
@@ -50,8 +59,7 @@ const ContractMethodFieldZeroes = () => {
           variant="subtle"
           colorScheme="gray"
           display="inline"
-          _hover={{ color: 'inherit' }}
-          cursor="default"
+          onClick={ handleButtonClick }
         >
           { times }
           <chakra.span>10</chakra.span>