Merge pull request #874 from blockscout/email-confirmation-fixes

fix email confirmation for profile menu and verified addresses

lib/mixpanel/getPageType.ts

@@ -39,6 +39,7 @@ const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/api/media-type': 'Node API: Media type',
   '/api/proxy': 'Node API: Proxy',
   '/api/csrf': 'Node API: CSRF token',
+  '/api/healthz': 'Node API: Health check',
   '/auth/auth0': 'Auth',
 };
 

types/nextjs-routes.d.ts

@@ -16,6 +16,7 @@ declare module "nextjs-routes" {
     | DynamicRoute<"/address/[hash]/contract_verification", { "hash": string }>
     | DynamicRoute<"/address/[hash]", { "hash": string }>
     | StaticRoute<"/api/csrf">
+    | StaticRoute<"/api/healthz">
     | StaticRoute<"/api/media-type">
     | StaticRoute<"/api/proxy">
     | StaticRoute<"/api-docs">

ui/pages/VerifiedAddresses.tsx

@@ -99,6 +99,10 @@ const VerifiedAddresses = () => {
       });
   }, [ queryClient ]);
 
+  if (addressesQuery.isError && addressesQuery.error.status === 403) {
+    throw new Error('Unverified email error', { cause: addressesQuery.error });
+  }
+
   const addButton = (
     <Skeleton mt={ 8 } isLoaded={ !isLoading } display="inline-block">
       <Button size="lg" onClick={ modalProps.onOpen }>

ui/snippets/profileMenu/ProfileMenuDesktop.tsx

+import type { ButtonProps } from '@chakra-ui/react';
 import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button } from '@chakra-ui/react';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
@@ -7,9 +9,27 @@ import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
 const ProfileMenuDesktop = () => {
-  const { data } = useFetchProfileInfo();
+  const { data, error } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
 
+  const buttonProps: Partial<ButtonProps> = (() => {
+    if (error?.status === 403) {
+      return {
+        as: 'a',
+        href: route({ pathname: '/auth/profile' }),
+      };
+    }
+
+    if (!data) {
+      return {
+        as: 'a',
+        href: loginUrl,
+      };
+    }
+
+    return {};
+  })();
+
   return (
     <Popover openDelay={ 300 } placement="bottom-end" gutter={ 10 } isLazy>
       <PopoverTrigger>
@@ -18,8 +38,7 @@ const ProfileMenuDesktop = () => {
           display="inline-flex"
           height="auto"
           flexShrink={ 0 }
-          as={ data ? undefined : 'a' }
-          href={ data ? undefined : loginUrl }
+          { ...buttonProps }
         >
           <UserAvatar size={ 50 }/>
         </Button>

ui/snippets/profileMenu/ProfileMenuMobile.tsx

 import { Box, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, Button } from '@chakra-ui/react';
+import type { ButtonProps } from '@chakra-ui/react';
+import { route } from 'nextjs-routes';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
@@ -9,17 +11,34 @@ import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 const ProfileMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const { data } = useFetchProfileInfo();
+  const { data, error } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
 
+  const buttonProps: Partial<ButtonProps> = (() => {
+    if (error?.status === 403) {
+      return {
+        as: 'a',
+        href: route({ pathname: '/auth/profile' }),
+      };
+    }
+
+    if (!data) {
+      return {
+        as: 'a',
+        href: loginUrl,
+      };
+    }
+
+    return {};
+  })();
+
   return (
     <>
       <Box padding={ 2 } onClick={ data ? onOpen : undefined }>
         <Button
           variant="unstyled"
           height="auto"
-          as={ data ? undefined : 'a' }
-          href={ data ? undefined : loginUrl }
+          { ...buttonProps }
         >
           <UserAvatar size={ 24 }/>
         </Button>