Add token info button is missing for accounts without an email (#2627)

Fixes #2604

ui/shared/AccountActionsMenu/AccountActionsMenu.tsx

@@ -10,7 +10,6 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 import Menu from 'ui/shared/chakra/Menu';
 import Skeleton from 'ui/shared/chakra/Skeleton';
 import IconSvg from 'ui/shared/IconSvg';
-import useProfileQuery from 'ui/snippets/auth/useProfileQuery';
 
 import MetadataUpdateMenuItem from './items/MetadataUpdateMenuItem';
 import PrivateTagMenuItem from './items/PrivateTagMenuItem';
@@ -31,14 +30,10 @@ const AccountActionsMenu = ({ isLoading, className, showUpdateMetadataItem }: Pr
   const isTokenInstancePage = router.pathname === '/token/[hash]/instance/[id]';
   const isTxPage = router.pathname === '/tx/[hash]';
 
-  const profileQuery = useProfileQuery();
-
   const handleButtonClick = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Address actions (more button)' });
   }, []);
 
-  const userWithoutEmail = profileQuery.data && !profileQuery.data.email;
-
   const items = [
     {
       render: (props: ItemProps) => <MetadataUpdateMenuItem { ...props }/>,
@@ -46,7 +41,7 @@ const AccountActionsMenu = ({ isLoading, className, showUpdateMetadataItem }: Pr
     },
     {
       render: (props: ItemProps) => <TokenInfoMenuItem { ...props }/>,
-      enabled: config.features.account.isEnabled && isTokenPage && config.features.addressVerification.isEnabled && !userWithoutEmail,
+      enabled: config.features.account.isEnabled && isTokenPage && config.features.addressVerification.isEnabled,
     },
     {
       render: (props: ItemProps) => <PrivateTagMenuItem { ...props } entityType={ isTxPage ? 'tx' : 'address' }/>,

ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx

@@ -70,7 +70,7 @@ const TokenInfoMenuItem = ({ className, hash, type }: ItemProps) => {
     switch (type) {
       case 'button': {
         return (
-          <AuthGuard onAuthSuccess={ onAuthSuccess }>
+          <AuthGuard onAuthSuccess={ onAuthSuccess } ensureEmail>
             { ({ onClick }) => (
               <ButtonItem label={ label } icon={ icon } onClick={ onClick } className={ className }/>
             ) }
@@ -79,7 +79,7 @@ const TokenInfoMenuItem = ({ className, hash, type }: ItemProps) => {
       }
       case 'menu_item': {
         return (
-          <AuthGuard onAuthSuccess={ onAuthSuccess }>
+          <AuthGuard onAuthSuccess={ onAuthSuccess } ensureEmail>
             { ({ onClick }) => (
               <MenuItem className={ className } onClick={ onClick }>
                 { icon }

ui/snippets/auth/AuthGuard.tsx

@@ -2,7 +2,7 @@ import { useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import AuthModal from './AuthModal';
-import useIsAuth from './useIsAuth';
+import useProfileQuery from './useProfileQuery';
 
 interface InjectedProps {
   onClick: () => void;
@@ -11,27 +11,51 @@ interface InjectedProps {
 interface Props {
   children: (props: InjectedProps) => React.ReactNode;
   onAuthSuccess: () => void;
+  ensureEmail?: boolean;
 }
 
-const AuthGuard = ({ children, onAuthSuccess }: Props) => {
+const AuthGuard = ({ children, onAuthSuccess, ensureEmail }: Props) => {
   const authModal = useDisclosure();
-  const isAuth = useIsAuth();
+  const profileQuery = useProfileQuery();
 
   const handleClick = React.useCallback(() => {
-    isAuth ? onAuthSuccess() : authModal.onOpen();
-  }, [ authModal, isAuth, onAuthSuccess ]);
+    if (profileQuery.data) {
+      if (ensureEmail && !profileQuery.data.email) {
+        authModal.onOpen();
+      } else {
+        onAuthSuccess();
+      }
+    } else {
+      authModal.onOpen();
+    }
+  }, [ authModal, ensureEmail, profileQuery.data, onAuthSuccess ]);
 
   const handleModalClose = React.useCallback((isSuccess?: boolean) => {
     if (isSuccess) {
+      if (ensureEmail && !profileQuery.data?.email) {
+        // If the user has logged in and has not added an email
+        // we need to close the modal and open it again
+        // so the initial screen will be correct
+        authModal.onClose();
+        window.setTimeout(() => {
+          authModal.onOpen();
+        }, 500);
+        return;
+      }
       onAuthSuccess();
     }
     authModal.onClose();
-  }, [ authModal, onAuthSuccess ]);
+  }, [ authModal, ensureEmail, profileQuery.data, onAuthSuccess ]);
 
   return (
     <>
       { children({ onClick: handleClick }) }
-      { authModal.isOpen && <AuthModal onClose={ handleModalClose } initialScreen={{ type: 'select_method' }}/> }
+      { authModal.isOpen && (
+        <AuthModal
+          onClose={ handleModalClose }
+          initialScreen={ profileQuery.data && !profileQuery.data.email && ensureEmail ? { type: 'email' } : { type: 'select_method' } }
+        />
+      ) }
     </>
   );
 };