base component

ui/address/contract/ContractMethodCallable.tsx

@@ -118,6 +118,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
             <ContractMethodField
               key={ fieldName }
               name={ fieldName }
+              valueType={ type }
               placeholder={ `${ name }(${ type })` }
               control={ control }
               setValue={ setValue }

ui/address/contract/ContractMethodField.tsx

-import { FormControl, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
+import {
+  FormControl,
+  Input,
+  InputGroup,
+  InputRightElement,
+} from '@chakra-ui/react';
 import React from 'react';
 import type { Control, ControllerRenderProps, UseFormSetValue } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
 import type { MethodFormFields } from './types';
+import type { SmartContractMethodArgType } from 'types/api/contract';
 
 import InputClearButton from 'ui/shared/InputClearButton';
 
+import ContractMethodFieldZeroes from './ContractMethodFieldZeroes';
+
 interface Props {
   control: Control<MethodFormFields>;
   setValue: UseFormSetValue<MethodFormFields>;
   placeholder: string;
   name: string;
+  valueType: SmartContractMethodArgType;
   isDisabled: boolean;
   onClear: () => void;
 }
 
-const ContractMethodField = ({ control, name, placeholder, setValue, isDisabled, onClear }: Props) => {
+const ContractMethodField = ({ control, name, valueType, placeholder, setValue, isDisabled, onClear }: Props) => {
   const ref = React.useRef<HTMLInputElement>(null);
 
   const handleClear = React.useCallback(() => {
@@ -25,6 +34,8 @@ const ContractMethodField = ({ control, name, placeholder, setValue, isDisabled,
     ref.current?.focus();
   }, [ name, onClear, setValue ]);
 
+  const hasZerosControl = valueType.includes('int') && !valueType.includes('[]');
+
   const renderInput = React.useCallback(({ field }: { field: ControllerRenderProps<MethodFormFields> }) => {
     return (
       <FormControl
@@ -32,23 +43,23 @@ const ContractMethodField = ({ control, name, placeholder, setValue, isDisabled,
         flexBasis={{ base: '100%', lg: 'calc((100% - 24px) / 3 - 65px)' }}
         w={{ base: '100%', lg: 'auto' }}
         flexGrow={ 1 }
-        isDisabled={ isDisabled
-        }>
+        isDisabled={ isDisabled }
+      >
         <InputGroup size="xs">
           <Input
             { ...field }
             ref={ ref }
             placeholder={ placeholder }
+            paddingRight={ hasZerosControl ? '120px' : '40px' }
           />
-          { field.value && (
-            <InputRightElement>
-              <InputClearButton onClick={ handleClear } isDisabled={ isDisabled }/>
-            </InputRightElement>
-          ) }
+          <InputRightElement w="auto" right={ 1 }>
+            { field.value && <InputClearButton onClick={ handleClear } isDisabled={ isDisabled }/> }
+            { hasZerosControl && <ContractMethodFieldZeroes/> }
+          </InputRightElement>
         </InputGroup>
       </FormControl>
     );
-  }, [ handleClear, isDisabled, name, placeholder ]);
+  }, [ handleClear, isDisabled, hasZerosControl, name, placeholder ]);
 
   return (
     <Controller

ui/address/contract/ContractMethodFieldZeroes.tsx

+import {
+  chakra,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  IconButton,
+  Button,
+  List,
+  ListItem,
+  Icon,
+  useDisclosure,
+} from '@chakra-ui/react';
+import React from 'react';
+
+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>();
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const handleOptionClick = React.useCallback((event: React.MouseEvent) => {
+    const id = Number((event.currentTarget as HTMLDivElement).getAttribute('data-id'));
+    if (!Object.is(id, NaN)) {
+      setSelectedOption((prev) => prev === id ? undefined : id);
+      onClose();
+    }
+  }, [ onClose ]);
+
+  return (
+    <>
+      { selectedOption && (
+        <Button
+          px={ 1 }
+          lineHeight={ 6 }
+          h={ 6 }
+          fontWeight={ 500 }
+          ml={ 1 }
+          variant="subtle"
+          colorScheme="gray"
+          display="inline"
+          _hover={{ color: 'inherit' }}
+          cursor="default"
+        >
+          { times }
+          <chakra.span>10</chakra.span>
+          <chakra.span fontSize="xs" lineHeight={ 4 } verticalAlign="super">{ selectedOption }</chakra.span>
+        </Button>
+      ) }
+      <Popover placement="bottom-end" isLazy isOpen={ isOpen } onClose={ onClose }>
+        <PopoverTrigger>
+          <div>
+            <IconButton
+              transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' }
+              transitionDuration="none"
+              variant="subtle"
+              colorScheme="gray"
+              as={ iconEastMini }
+              boxSize={ 6 }
+              aria-label="Open menu"
+              cursor="pointer"
+              ml={ 1 }
+              onClick={ onToggle }
+            />
+          </div>
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent w="110px">
+            <PopoverBody py={ 2 }>
+              <List>
+                { [ 8, 12, 16, 18, 20 ].map((id) => (
+                  <ListItem
+                    key={ id }
+                    py={ 2 }
+                    data-id={ id }
+                    onClick={ handleOptionClick }
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    cursor="pointer"
+                  >
+                    <span>10*{ id }</span>
+                    { selectedOption === id && <Icon as={ iconCheck } boxSize={ 6 } color="blue.600"/> }
+                  </ListItem>
+                )) }
+              </List>
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
+      </Popover>
+    </>
+  );
+};
+
+export default React.memo(ContractMethodFieldZeroes);