profile page

lib/hooks/useNavItems.tsx

@@ -33,7 +33,7 @@ export default function useNavItems() {
       { text: 'Custom ABI', pathname: basePath + '/account/custom_abi', icon: abiIcon },
     ];
 
-    const profileItem = { text: 'My account', pathname: basePath + '/auth/profile', icon: profileIcon };
+    const profileItem = { text: 'My profile', pathname: basePath + '/auth/profile', icon: profileIcon };
 
     return { mainNavItems, accountNavItems, profileItem };
   }, [ basePath ]);

pages/[network_type]/[network_sub_type]/auth/profile.tsx

@@ -0,0 +1,16 @@
+import type { NextPage } from 'next';
+import Head from 'next/head';
+import React from 'react';
+
+import MyProfile from 'ui/pages/MyProfile';
+
+const MyProfilePage: NextPage = () => {
+  return (
+    <>
+      <Head><title>My profile</title></Head>
+      <MyProfile/>
+    </>
+  );
+};
+
+export default MyProfilePage;

ui/blocks/profileMenu/ProfileMenuContent.tsx

@@ -1,5 +1,4 @@
 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';
@@ -12,7 +11,6 @@ type Props = UserInfo;
 
 const ProfileMenuContent = ({ name, nickname, email }: Props) => {
   const { accountNavItems, profileItem } = useNavItems();
-  const router = useRouter();
   const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
   const primaryTextColor = useColorModeValue('gray.600', 'whiteAlpha.800');
 
@@ -35,7 +33,7 @@ const ProfileMenuContent = ({ name, nickname, email }: Props) => {
       >
         { email }
       </Text>
-      <NavLink { ...profileItem } isActive={ router.asPath === profileItem.pathname } px="0px"/>
+      <NavLink { ...profileItem } px="0px"/>
       <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor={ borderColor } borderTopWidth="1px" { ...getDefaultTransitionProps() }>
         <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
           { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } px="0px"/>) }

ui/blocks/profileMenu/ProfileMenuMobile.tsx

@@ -22,7 +22,7 @@ const ProfileMenuMobile = () => {
   return (
     <>
       <Box padding={ 2 } onClick={ onOpen }>
-        <UserAvatar size={ 24 } { ...data }/>
+        <UserAvatar size={ 24 } data={ data }/>
       </Box>
       { data && (
         <Drawer

ui/pages/MyProfile.tsx

@@ -0,0 +1,68 @@
+import { VStack, FormControl, FormLabel, Input } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { UserInfo } from 'types/api/account';
+
+import AccountPageHeader from 'ui/shared/AccountPageHeader';
+import ContentLoader from 'ui/shared/ContentLoader';
+import Page from 'ui/shared/Page/Page';
+import UserAvatar from 'ui/shared/UserAvatar';
+
+const MyProfile = () => {
+  const { data, isLoading, isError } = 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();
+  });
+
+  const content = (() => {
+    if (isLoading || isError) {
+      return <ContentLoader/>;
+    }
+
+    return (
+      <VStack maxW="412px" mt={ 12 } gap={ 5 } alignItems="flex-start">
+        <UserAvatar size={ 64 } data={ data }/>
+        <FormControl variant="floating" id="name" isRequired size="lg">
+          <Input
+            size="lg"
+            required
+            disabled
+            value={ data.name || '' }
+          />
+          <FormLabel>Name</FormLabel>
+        </FormControl>
+        <FormControl variant="floating" id="nickname" isRequired size="lg">
+          <Input
+            size="lg"
+            required
+            disabled
+            value={ data.nickname || '' }
+          />
+          <FormLabel>Nickname</FormLabel>
+        </FormControl>
+        <FormControl variant="floating" id="email" isRequired size="lg">
+          <Input
+            size="lg"
+            required
+            disabled
+            value={ data.email }
+          />
+          <FormLabel>Email</FormLabel>
+        </FormControl>
+      </VStack>
+    );
+  })();
+
+  return (
+    <Page>
+      <AccountPageHeader text="My profile"/>
+      { content }
+    </Page>
+  );
+};
+
+export default MyProfile;