submit form when pressing enter

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -120,7 +120,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   }, [ errors, formBackgroundColor ]);
 
   return (
-    <>
+    <form noValidate onSubmit={ handleSubmit(onSubmit) }>
       { data && (
         <Box marginBottom={ 5 }>
           <Controller
@@ -144,14 +144,14 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <Box marginTop={ 8 }>
         <Button
           size="lg"
-          onClick={ handleSubmit(onSubmit) }
+          type="submit"
           disabled={ !isValid }
           isLoading={ mutation.isLoading }
         >
           { data ? 'Save' : 'Generate API key' }
         </Button>
       </Box>
-    </>
+    </form>
   );
 };
 

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -139,7 +139,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   }, [ errors, formBackgroundColor ]);
 
   return (
-    <>
+    <form noValidate onSubmit={ handleSubmit(onSubmit) }>
       <Box>
         <Controller
           name="contract_address_hash"
@@ -170,14 +170,14 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <Box marginTop={ 8 }>
         <Button
           size="lg"
-          onClick={ handleSubmit(onSubmit) }
+          type="submit"
           disabled={ !isValid }
           isLoading={ mutation.isLoading }
         >
           { data ? 'Save' : 'Create custom ABI' }
         </Button>
       </Box>
-    </>
+    </form>
   );
 };
 

ui/privateTags/AddressModal/AddressForm.tsx

@@ -93,7 +93,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   }, [ errors, formBackgroundColor ]);
 
   return (
-    <>
+    <form noValidate onSubmit={ handleSubmit(onSubmit) }>
       <Box marginBottom={ 5 }>
         <Controller
           name="address"
@@ -119,14 +119,14 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <Box marginTop={ 8 }>
         <Button
           size="lg"
-          onClick={ handleSubmit(onSubmit) }
+          type="submit"
           disabled={ !isValid }
           isLoading={ pending }
         >
           { data ? 'Save changes' : 'Add tag' }
         </Button>
       </Box>
-    </>
+    </form>
   );
 };
 

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -92,7 +92,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
   }, [ errors, formBackgroundColor ]);
 
   return (
-    <>
+    <form noValidate onSubmit={ handleSubmit(onSubmit) }>
       <Box marginBottom={ 5 }>
         <Controller
           name="transaction"
@@ -118,14 +118,14 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
       <Box marginTop={ 8 }>
         <Button
           size="lg"
-          onClick={ handleSubmit(onSubmit) }
+          type="submit"
           disabled={ !isValid }
           isLoading={ pending }
         >
           { data ? 'Save changes' : 'Add tag' }
         </Button>
       </Box>
-    </>
+    </form>
   );
 };
 

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -5,6 +5,7 @@ import {
   GridItem,
   Text,
   HStack,
+  chakra,
 } from '@chakra-ui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
@@ -151,7 +152,12 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
   }, [ changeToDataScreen ]);
 
   return (
-    <Box width={{ base: 'auto', lg: `calc(100% - ${ ADDRESS_INPUT_BUTTONS_WIDTH }px)` }} maxWidth="844px">
+    <chakra.form
+      noValidate
+      width={{ base: 'auto', lg: `calc(100% - ${ ADDRESS_INPUT_BUTTONS_WIDTH }px)` }}
+      maxWidth="844px"
+      onSubmit={ handleSubmit(onSubmit) }
+    >
       { isAlertVisible && <Box mb={ 4 }><FormSubmitAlert/></Box> }
       <Text size="sm" variant="secondary" paddingBottom={ 5 }>Company info</Text>
       <Grid templateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 4 } columnGap={ 5 }>
@@ -230,7 +236,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
       <HStack spacing={ 6 }>
         <Button
           size="lg"
-          onClick={ handleSubmit(onSubmit) }
+          type="submit"
           disabled={ !isValid }
           isLoading={ mutation.isLoading }
         >
@@ -245,7 +251,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
           Cancel
         </Button>
       </HStack>
-    </Box>
+    </chakra.form>
   );
 };
 

ui/watchlist/AddressModal/AddressForm.tsx

@@ -151,7 +151,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   ), []);
 
   return (
-    <>
+    <form noValidate onSubmit={ handleSubmit(onSubmit) }>
       <Box marginBottom={ 5 }>
         <Controller
           name="address"
@@ -189,14 +189,14 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <Box marginTop={ 8 }>
         <Button
           size="lg"
-          onClick={ handleSubmit(onSubmit) }
+          type="submit"
           isLoading={ pending }
           disabled={ !isValid }
         >
           { data ? 'Save changes' : 'Add address' }
         </Button>
       </Box>
-    </>
+    </form>
   );
 };