refactor: move ContractMethodArrayButton to shared forms components

Author: isstuev

ui/address/contract/methods/form/ContractMethodFieldAccordion.tsx

@@ -2,8 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from 'toolkit/chakra/accordion';
-
-import ContractMethodArrayButton from './ContractMethodArrayButton';
+import ArrayButton from 'ui/shared/forms/ArrayButton';
 
 export interface Props {
   label: string;
@@ -33,8 +32,8 @@ const ContractMethodFieldAccordion = ({ label, level, children, onAddClick, onRe
           <Box textStyle="sm" fontWeight={ 700 } mr="auto" color={ isInvalid ? 'text.error' : undefined }>
             { label }
           </Box>
-          { onRemoveClick && index !== undefined && <ContractMethodArrayButton index={ index } onClick={ onRemoveClick } type="remove"/> }
-          { onAddClick && index !== undefined && <ContractMethodArrayButton index={ index } onClick={ onAddClick } type="add" ml={ 1 }/> }
+          { onRemoveClick && index !== undefined && <ArrayButton index={ index } onClick={ onRemoveClick } type="remove"/> }
+          { onAddClick && index !== undefined && <ArrayButton index={ index } onClick={ onAddClick } type="add" ml={ 1 }/> }
         </AccordionItemTrigger>
         <AccordionItemContent display="flex" flexDir="column" rowGap={ 1 } pl="18px" pr="6px">
           { children }

ui/address/contract/methods/form/ContractMethodFieldInputArray.tsx

@@ -4,7 +4,8 @@ import { useFormContext } from 'react-hook-form';
 
 import type { ContractAbiItemInput } from '../types';
 
-import ContractMethodArrayButton from './ContractMethodArrayButton';
+import ArrayButton from 'ui/shared/forms/ArrayButton';
+
 import type { Props as AccordionProps } from './ContractMethodFieldAccordion';
 import ContractMethodFieldAccordion from './ContractMethodFieldAccordion';
 import ContractMethodFieldInput from './ContractMethodFieldInput';
@@ -151,9 +152,9 @@ const ContractMethodFieldInputArray = ({
                 isOptional={ registeredIndices.length === 1 }
               />
               { !hasFixedSize && registeredIndices.length > 1 &&
-                <ContractMethodArrayButton index={ registeredIndex } onClick={ handleRemoveButtonClick } type="remove" my="6px"/> }
+                <ArrayButton index={ registeredIndex } onClick={ handleRemoveButtonClick } type="remove" my="6px"/> }
               { !hasFixedSize && index === registeredIndices.length - 1 &&
-                <ContractMethodArrayButton index={ registeredIndex } onClick={ handleAddButtonClick } type="add" my="6px"/> }
+                <ArrayButton index={ registeredIndex } onClick={ handleAddButtonClick } type="add" my="6px"/> }
             </Flex>
           );
         }) }

…thods/form/ContractMethodArrayButton.tsx ui/shared/forms/ArrayButton.tsxui/address/contract/methods/form/ContractMethodArrayButton.tsx renamed to ui/shared/forms/ArrayButton.tsx ui/address/contract/methods/form/ContractMethodArrayButton.tsx renamed to ui/shared/forms/ArrayButton.tsx

@@ -9,7 +9,7 @@ interface Props extends Omit<IconButtonProps, 'type'> {
   type: 'add' | 'remove';
 }
 
-const ContractMethodArrayButton = ({ type, index, onClick, ...props }: Props) => {
+const ArrayButton = ({ type, index, onClick, ...props }: Props) => {
 
   const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
@@ -30,4 +30,4 @@ const ContractMethodArrayButton = ({ type, index, onClick, ...props }: Props) =>
   );
 };
 
-export default React.memo(ContractMethodArrayButton);
+export default React.memo(ArrayButton);