Skip to content

F
frontend
Commit 2e15d908 authored by tom's avatar tom
Browse files
Options

profile page

parent 712cbb23
Hide whitespace changes
Inline Side-by-side
Showing with 87 additions and 5 deletions
lib/hooks/useNavItems.tsx
View file @ 2e15d908
...@@ -33,7 +33,7 @@ export default function useNavItems() { ...@@ -33,7 +33,7 @@ export default function useNavItems() {
{ text: 'Custom ABI', pathname: basePath + '/account/custom_abi', icon: abiIcon }, { 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 }; return { mainNavItems, accountNavItems, profileItem };
}, [ basePath ]); }, [ basePath ]);
......
pages/[network_type]/[network_sub_type]/auth/profile.tsx 0 → 100644
View file @ 2e15d908
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
View file @ 2e15d908
import { Box, Button, Text, VStack, useColorModeValue } from '@chakra-ui/react'; import { Box, Button, Text, VStack, useColorModeValue } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import type { UserInfo } from 'types/api/account'; import type { UserInfo } from 'types/api/account';
...@@ -12,7 +11,6 @@ type Props = UserInfo; ...@@ -12,7 +11,6 @@ type Props = UserInfo;
const ProfileMenuContent = ({ name, nickname, email }: Props) => { const ProfileMenuContent = ({ name, nickname, email }: Props) => {
const { accountNavItems, profileItem } = useNavItems(); const { accountNavItems, profileItem } = useNavItems();
const router = useRouter();
const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200'); const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
const primaryTextColor = useColorModeValue('gray.600', 'whiteAlpha.800'); const primaryTextColor = useColorModeValue('gray.600', 'whiteAlpha.800');
...@@ -35,7 +33,7 @@ const ProfileMenuContent = ({ name, nickname, email }: Props) => { ...@@ -35,7 +33,7 @@ const ProfileMenuContent = ({ name, nickname, email }: Props) => {
> >
{ email } { email }
</Text> </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() }> <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor={ borderColor } borderTopWidth="1px" { ...getDefaultTransitionProps() }>
<VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden"> <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
{ accountNavItems.map((item) => <NavLink key={ item.text } { ...item } px="0px"/>) } { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } px="0px"/>) }
......
ui/blocks/profileMenu/ProfileMenuMobile.tsx
View file @ 2e15d908
...@@ -22,7 +22,7 @@ const ProfileMenuMobile = () => { ...@@ -22,7 +22,7 @@ const ProfileMenuMobile = () => {
return ( return (
<> <>
<Box padding={ 2 } onClick={ onOpen }> <Box padding={ 2 } onClick={ onOpen }>
<UserAvatar size={ 24 } { ...data }/> <UserAvatar size={ 24 } data={ data }/>
</Box> </Box>
{ data && ( { data && (
<Drawer <Drawer
......
ui/pages/MyProfile.tsx 0 → 100644
View file @ 2e15d908
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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment