add email alert on watchlist and verified addresses pages

ui/pages/VerifiedAddresses.tsx

-import { OrderedList, ListItem, chakra, Button, useDisclosure, Show, Hide, Skeleton, Link, Alert } from '@chakra-ui/react';
+import { OrderedList, ListItem, chakra, Button, useDisclosure, Show, Hide, Skeleton, Link } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -18,6 +18,7 @@ import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import AdminSupportText from 'ui/shared/texts/AdminSupportText';
 import TokenInfoForm from 'ui/tokenInfo/TokenInfoForm';
+import VerifiedAddressesEmailAlert from 'ui/verifiedAddresses/VerifiedAddressesEmailAlert';
 import VerifiedAddressesListItem from 'ui/verifiedAddresses/VerifiedAddressesListItem';
 import VerifiedAddressesTable from 'ui/verifiedAddresses/VerifiedAddressesTable';
 
@@ -193,11 +194,7 @@ const VerifiedAddresses = () => {
   return (
     <>
       <PageTitle title="My verified addresses"/>
-      { userWithoutEmail && (
-        <Alert status="warning" mb={ 6 }>
-          You need a valid email address to verify addresses. Please logout of MyAccount then login using your email to proceed.
-        </Alert>
-      ) }
+      { userWithoutEmail && <VerifiedAddressesEmailAlert/> }
       <AccountPageDescription allowCut={ false }>
         <span>
           Verify ownership of a smart contract address to easily update information in Blockscout.

ui/verifiedAddresses/VerifiedAddressesEmailAlert.tsx

+import { Alert, Button, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import AuthModal from 'ui/snippets/auth/AuthModal';
+
+const VerifiedAddressesEmailAlert = () => {
+  const authModal = useDisclosure();
+
+  return (
+    <>
+      <Alert
+        status="warning"
+        mb={ 6 }
+        display="flex"
+        flexDirection={{ base: 'column', md: 'row' }}
+        alignItems={{ base: 'flex-start', lg: 'center' }}
+        columnGap={ 2 }
+        rowGap={ 2 }
+      >
+        You need a valid email address to verify contracts. Please add your email to your account.
+        <Button variant="outline" size="sm" onClick={ authModal.onOpen }>Add email</Button>
+      </Alert>
+      { authModal.isOpen && <AuthModal initialScreen={{ type: 'email', isAuth: true }} onClose={ authModal.onClose }/> }
+    </>
+  );
+};
+
+export default React.memo(VerifiedAddressesEmailAlert);

ui/watchlist/AddressModal/AddressForm.tsx

 import {
+  Alert,
   Box,
   Button,
   Text,
+  useDisclosure,
 } from '@chakra-ui/react';
 import { useMutation } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
@@ -13,10 +15,12 @@ import type { WatchlistAddress, WatchlistErrors } from 'types/api/account';
 import type { ResourceErrorAccount } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
+import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
 import AddressInput from 'ui/shared/AddressInput';
 import CheckboxInput from 'ui/shared/CheckboxInput';
 import TagInput from 'ui/shared/TagInput';
+import AuthModal from 'ui/snippets/auth/AuthModal';
 
 import AddressFormNotifications from './AddressFormNotifications';
 
@@ -69,9 +73,13 @@ type Checkboxes = 'notification' |
 const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd }) => {
   const [ pending, setPending ] = useState(false);
 
+  const profileQuery = useFetchProfileInfo();
+  const userWithoutEmail = profileQuery.data && !profileQuery.data.email;
+  const authModal = useDisclosure();
+
   let notificationsDefault = {} as Inputs['notification_settings'];
   if (!data?.notification_settings) {
-    NOTIFICATIONS.forEach(n => notificationsDefault[n] = { incoming: true, outcoming: true });
+    NOTIFICATIONS.forEach(n => notificationsDefault[n] = { incoming: !userWithoutEmail, outcoming: !userWithoutEmail });
   } else {
     notificationsDefault = data.notification_settings;
   }
@@ -80,7 +88,7 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
     defaultValues: {
       address: data?.address_hash || '',
       tag: data?.name || '',
-      notification: data?.notification_methods ? data.notification_methods.email : true,
+      notification: data?.notification_methods ? data.notification_methods.email : !userWithoutEmail,
       notification_settings: notificationsDefault,
     },
     mode: 'onTouched',
@@ -179,18 +187,39 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
           render={ renderTagInput }
         />
       </Box>
-      <Text variant="secondary" fontSize="sm" marginBottom={ 5 }>
-        Please select what types of notifications you will receive
-      </Text>
-      <Box marginBottom={ 8 }>
-        <AddressFormNotifications control={ control }/>
-      </Box>
-      <Text variant="secondary" fontSize="sm" marginBottom={{ base: '10px', lg: 5 }}>Notification methods</Text>
-      <Controller
-        name={ 'notification' as Checkboxes }
-        control={ control }
-        render={ renderCheckbox('Email notifications') }
-      />
+      { userWithoutEmail ? (
+        <>
+          <Alert
+            status="info"
+            colorScheme="gray"
+            display="flex"
+            flexDirection={{ base: 'column', md: 'row' }}
+            alignItems={{ base: 'flex-start', lg: 'center' }}
+            columnGap={ 2 }
+            rowGap={ 2 }
+            w="fit-content"
+          >
+            To receive notifications you need to add an email to your profile.
+            <Button variant="outline" size="sm" onClick={ authModal.onOpen }>Add email</Button>
+          </Alert>
+          { authModal.isOpen && <AuthModal initialScreen={{ type: 'email', isAuth: true }} onClose={ authModal.onClose }/> }
+        </>
+      ) : (
+        <>
+          <Text variant="secondary" fontSize="sm" marginBottom={ 5 }>
+            Please select what types of notifications you will receive
+          </Text>
+          <Box marginBottom={ 8 }>
+            <AddressFormNotifications control={ control }/>
+          </Box>
+          <Text variant="secondary" fontSize="sm" marginBottom={{ base: '10px', lg: 5 }}>Notification methods</Text>
+          <Controller
+            name={ 'notification' as Checkboxes }
+            control={ control }
+            render={ renderCheckbox('Email notifications') }
+          />
+        </>
+      ) }
       <Box marginTop={ 8 }>
         <Button
           size="lg"