profile data from server

pages/api/account/profile/index.ts

+import type { UserInfo } from 'types/api/account';
+
+import handler from 'lib/api/handler';
+
+const profileHandler = handler<UserInfo>(() => '/account/v1/user/info', [ 'GET' ]);
+
+export default profileHandler;

types/api/account.ts

@@ -51,7 +51,8 @@ export type Transactions = Array<Transaction>
 export interface UserInfo {
   name?: string;
   nickname?: string;
-  email?: string;
+  email: string;
+  avatar?: string;
 }
 
 export interface WatchlistAddress {

ui/blocks/profileMenu/ProfileMenuContent.tsx

@@ -2,11 +2,15 @@ import { Box, Button, Text, VStack, useColorModeValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { UserInfo } from 'types/api/account';
+
 import useNavItems from 'lib/hooks/useNavItems';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import NavLink from 'ui/blocks/navigation/NavLink';
 
-const ProfileMenuContent = () => {
+type Props = UserInfo;
+
+const ProfileMenuContent = ({ name, nickname, email }: Props) => {
   const { accountNavItems, profileItem } = useNavItems();
   const router = useRouter();
   const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
@@ -20,7 +24,7 @@ const ProfileMenuContent = () => {
         color={ primaryTextColor }
         { ...getDefaultTransitionProps() }
       >
-        Signed in as tgladilina
+        Signed in as { name || nickname }
       </Text>
       <Text
         fontSize="sm"
@@ -29,7 +33,7 @@ const ProfileMenuContent = () => {
         color="gray.500"
         { ...getDefaultTransitionProps() }
       >
-        tatyana@blockscout.com
+        { email }
       </Text>
       <NavLink { ...profileItem } isActive={ router.asPath === profileItem.pathname } px="0px"/>
       <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor={ borderColor } borderTopWidth="1px" { ...getDefaultTransitionProps() }>

ui/blocks/profileMenu/ProfileMenuDesktop.tsx

 import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
+import type { UserInfo } from 'types/api/account';
+
 import ProfileMenuContent from 'ui/blocks/profileMenu/ProfileMenuContent';
 import UserAvatar from 'ui/shared/UserAvatar';
 
 const ProfileMenuDesktop = () => {
+  const { data } = useQuery<unknown, unknown, UserInfo>([ 'profile' ], async() => {
+    const response = await fetch('/api/account/profile');
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  });
+
   return (
     <Popover openDelay={ 300 } placement="bottom-end" gutter={ 10 } isLazy>
       <PopoverTrigger>
         <Button variant="unstyled" display="inline-flex" height="auto">
-          <UserAvatar size={ 50 }/>
+          <UserAvatar size={ 50 } data={ data }/>
         </Button>
       </PopoverTrigger>
-      <PopoverContent w="212px">
-        <PopoverBody padding="24px 16px 16px 16px">
-          <ProfileMenuContent/>
-        </PopoverBody>
-      </PopoverContent>
+      { data && (
+        <PopoverContent w="212px">
+          <PopoverBody padding="24px 16px 16px 16px">
+            <ProfileMenuContent { ...data }/>
+          </PopoverBody>
+        </PopoverContent>
+      ) }
     </Popover>
   );
 };

ui/blocks/profileMenu/ProfileMenuMobile.tsx

 import { Flex, Box, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
+import type { UserInfo } from 'types/api/account';
+
 import ColorModeToggler from 'ui/blocks/header/ColorModeToggler';
 import ProfileMenuContent from 'ui/blocks/profileMenu/ProfileMenuContent';
 import UserAvatar from 'ui/shared/UserAvatar';
@@ -8,34 +11,44 @@ import UserAvatar from 'ui/shared/UserAvatar';
 const ProfileMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const { data } = useQuery<unknown, unknown, UserInfo>([ 'profile' ], async() => {
+    const response = await fetch('/api/account/profile');
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  });
+
   return (
     <>
       <Box padding={ 2 } onClick={ onOpen }>
-        <UserAvatar size={ 24 }/>
+        <UserAvatar size={ 24 } { ...data }/>
       </Box>
-      <Drawer
-        isOpen={ isOpen }
-        placement="right"
-        onClose={ onClose }
-        autoFocus={ false }
-      >
-        <DrawerOverlay/>
-        <DrawerContent maxWidth="260px">
-          <DrawerBody p={ 6 }>
-            <Flex
-              justifyContent="space-between"
-              alignItems="center"
-              mb={ 6 }
-            >
-              <ColorModeToggler/>
-              <Box onClick={ onClose }>
-                <UserAvatar size={ 24 }/>
-              </Box>
-            </Flex>
-            <ProfileMenuContent/>
-          </DrawerBody>
-        </DrawerContent>
-      </Drawer>
+      { data && (
+        <Drawer
+          isOpen={ isOpen }
+          placement="right"
+          onClose={ onClose }
+          autoFocus={ false }
+        >
+          <DrawerOverlay/>
+          <DrawerContent maxWidth="260px">
+            <DrawerBody p={ 6 }>
+              <Flex
+                justifyContent="space-between"
+                alignItems="center"
+                mb={ 6 }
+              >
+                <ColorModeToggler/>
+                <Box onClick={ onClose }>
+                  <UserAvatar size={ 24 } data={ data }/>
+                </Box>
+              </Flex>
+              <ProfileMenuContent { ...data }/>
+            </DrawerBody>
+          </DrawerContent>
+        </Drawer>
+      ) }
     </>
   );
 };

ui/shared/UserAvatar.tsx

-import { useColorModeValue, chakra } from '@chakra-ui/react';
+import { useColorModeValue, chakra, Image } from '@chakra-ui/react';
 import React from 'react';
 import Identicon from 'react-identicons';
 
+import type { UserInfo } from 'types/api/account';
+
 const ProfileIcon = chakra(Identicon);
 
 interface Props {
   size: number;
+  data?: UserInfo;
 }
 
-const UserAvatar = ({ size }: Props) => {
+const UserAvatar = ({ size, data }: Props) => {
   const sizeString = `${ size }px`;
+  const bgColor = useColorModeValue('blackAlpha.100', 'white');
+
+  if (data?.avatar) {
+    return (
+      <Image
+        flexShrink={ 0 }
+        src={ data.avatar }
+        alt={ `Profile picture of ${ data.name || data.nickname || '' }` }
+        w={ sizeString }
+        minW={ sizeString }
+        h={ sizeString }
+        minH={ sizeString }
+        borderRadius="full"
+        overflow="hidden"
+      />
+    );
+  }
 
   return (
     <ProfileIcon
       flexShrink={ 0 }
       maxWidth={ sizeString }
       maxHeight={ sizeString }
-      string="randomness"
+      string={ data?.email || 'randomness' }
       // the displayed size is doubled for retina displays
       size={ size * 2 }
-      bg={ useColorModeValue('blackAlpha.100', 'white') }
-      borderRadius="50%"
+      bg={ bgColor }
+      borderRadius="full"
       overflow="hidden"
     />
   );