Fix: address book entry dialog

src/components/address-book/EntryDialog/index.tsx

@@ -1,8 +1,5 @@
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import DialogActions from '@mui/material/DialogActions'
-import DialogContent from '@mui/material/DialogContent'
-import type { ReactElement } from 'react'
+import type { ReactElement, BaseSyntheticEvent } from 'react'
+import { Box, Button, DialogActions, DialogContent } from '@mui/material'
 import { FormProvider, useForm } from 'react-hook-form'
 
 import AddressInput from '@/components/common/AddressInput'
@@ -41,16 +38,20 @@ const EntryDialog = ({
 
   const { handleSubmit, formState } = methods
 
-  const onSubmit = (data: AddressEntry) => {
+  const submitCallback = handleSubmit((data: AddressEntry) => {
     dispatch(upsertAddressBookEntry({ ...data, chainId: chainId || currentChainId }))
-
     handleClose()
+  })
+
+  const onSubmit = (e: BaseSyntheticEvent) => {
+    e.stopPropagation()
+    submitCallback(e)
   }
 
   return (
     <ModalDialog open onClose={handleClose} dialogTitle={defaultValues.name ? 'Edit entry' : 'Create entry'}>
       <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(onSubmit)}>
+        <form onSubmit={onSubmit}>
           <DialogContent>
             <Box mb={2}>
               <NameInput label="Name" autoFocus name="name" required />

src/components/common/AddressBookInput/index.tsx

@@ -6,6 +6,7 @@ import useAddressBook from '@/hooks/useAddressBook'
 import AddressInput, { type AddressInputProps } from '../AddressInput'
 import EthHashInfo from '../EthHashInfo'
 import InfoIcon from '@/public/images/notifications/info.svg'
+import EntryDialog from '@/components/address-book/EntryDialog'
 import css from './styles.module.css'
 
 const abFilterOptions = createFilterOptions({
@@ -15,11 +16,12 @@ const abFilterOptions = createFilterOptions({
 /**
  *  Temporary component until revamped safe components are done
  */
-const AddressBookInput = ({ name, canAdd, ...props }: AddressInputProps): ReactElement => {
+const AddressBookInput = ({ name, canAdd, ...props }: AddressInputProps & { canAdd?: boolean }): ReactElement => {
   const addressBook = useAddressBook()
   const { setValue, control } = useFormContext()
   const addressValue = useWatch({ name, control })
   const [open, setOpen] = useState(false)
+  const [openAddressBook, setOpenAddressBook] = useState<boolean>(false)
 
   const addressBookEntries = Object.entries(addressBook).map(([address, name]) => ({
     label: address,
@@ -35,6 +37,12 @@ const AddressBookInput = ({ name, canAdd, ...props }: AddressInputProps): ReactE
     setOpen((value) => !value)
   }
 
+  const onAddressBookClick = canAdd
+    ? () => {
+        setOpenAddressBook(true)
+      }
+    : undefined
+
   return (
     <>
       <Autocomplete
@@ -66,16 +74,29 @@ const AddressBookInput = ({ name, canAdd, ...props }: AddressInputProps): ReactE
             name={name}
             onOpenListClick={hasVisibleOptions ? handleOpenAutocomplete : undefined}
             isAutocompleteOpen={open}
-            canAdd={canAdd}
+            onAddressBookClick={onAddressBookClick}
           />
         )}
       />
       {canAdd ? (
         <Typography variant="body2" className={css.unknownAddress}>
           <SvgIcon component={InfoIcon} fontSize="small" />
-          <span>This is an unknown address. Consider adding it to your address book.</span>
+          <span>
+            This is an unknown address. You can{' '}
+            <a role="button" onClick={onAddressBookClick}>
+              add it to your address book
+            </a>
+            .
+          </span>
         </Typography>
       ) : null}
+
+      {openAddressBook && (
+        <EntryDialog
+          handleClose={() => setOpenAddressBook(false)}
+          defaultValues={{ name: '', address: addressValue }}
+        />
+      )}
     </>
   )
 }

src/components/common/AddressBookInput/styles.module.css

@@ -12,3 +12,9 @@
 .unknownAddress svg {
   height: auto;
 }
+
+.unknownAddress a {
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}

src/components/common/AddressInput/index.tsx

@@ -19,18 +19,17 @@ import { cleanInputValue, parsePrefixedAddress } from '@/utils/addresses'
 import useDebounce from '@/hooks/useDebounce'
 import CaretDownIcon from '@/public/images/common/caret-down.svg'
 import SaveAddressIcon from '@/public/images/common/save-address.svg'
-import EntryDialog from '@/components/address-book/EntryDialog'
 import classnames from 'classnames'
 import css from './styles.module.css'
 
 export type AddressInputProps = TextFieldProps & {
   name: string
   address?: string
-  canAdd?: boolean
   onOpenListClick?: () => void
   isAutocompleteOpen?: boolean
   validate?: Validate<string>
   deps?: string | string[]
+  onAddressBookClick?: () => void
 }
 
 const AddressInput = ({
@@ -39,7 +38,7 @@ const AddressInput = ({
   required = true,
   onOpenListClick,
   isAutocompleteOpen,
-  canAdd,
+  onAddressBookClick,
   deps,
   ...props
 }: AddressInputProps): ReactElement => {
@@ -55,7 +54,6 @@ const AddressInput = ({
   const watchedValue = useWatch({ name, control })
   const currentShortName = currentChain?.shortName || ''
   const [isValidating, setIsValidating] = useState<boolean>(false)
-  const [open, setOpen] = useState<boolean>(false)
 
   // Fetch an ENS resolution for the current address
   const isDomainLookupEnabled = !!currentChain && hasFeature(currentChain, FEATURES.DOMAIN_LOOKUP)
@@ -91,12 +89,14 @@ const AddressInput = ({
         <CircularProgress size={20} />
       ) : !props.disabled ? (
         <>
-          {canAdd && (
-            <IconButton onClick={() => setOpen(true)}>
+          {onAddressBookClick && (
+            <IconButton onClick={onAddressBookClick}>
               <SvgIcon component={SaveAddressIcon} inheritViewBox fontSize="small" color="primary" />
             </IconButton>
           )}
+
           <ScanQRButton onScan={setAddressValue} />
+
           {onOpenListClick && (
             <IconButton
               onClick={onOpenListClick}
@@ -169,7 +169,6 @@ const AddressInput = ({
         // Only seems to occur on the `/load` route
         value={watchedValue}
       />
-      {open && <EntryDialog handleClose={() => setOpen(false)} defaultValues={{ name: '', address: watchedValue }} />}
     </>
   )
 }