Skip to content

Commit

Permalink
Blockscout account V2
Browse files Browse the repository at this point in the history
Fixes #2029
  • Loading branch information
tom2drum committed Oct 23, 2024
1 parent 10b4c5e commit fed42c9
Show file tree
Hide file tree
Showing 5 changed files with 24 additions and 21 deletions.
34 changes: 21 additions & 13 deletions ui/snippets/user/profile/UserProfileContent.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Button, Divider, Flex, Link, VStack } from '@chakra-ui/react';
import { Box, Button, Divider, Flex, Link, VStack, useColorModeValue } from '@chakra-ui/react';
import React from 'react';

import type { NavLink } from './types';
Expand All @@ -18,6 +18,11 @@ import UserProfileContentNavLink from './UserProfileContentNavLink';
import UserProfileContentWallet from './UserProfileContentWallet';

const navLinks: Array<NavLink> = [
{
text: 'My profile',
href: route({ pathname: '/auth/profile' }),
icon: 'profile' as const,
},
{
text: 'Watch list',
href: route({ pathname: '/account/watchlist' }),
Expand Down Expand Up @@ -57,6 +62,8 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
const { isAutoConnectDisabled } = useMarketplaceContext();
const logout = useLogout();

const accountTextColor = useColorModeValue('gray.500', 'gray.300');

if (!data) {
return (
<Box>
Expand All @@ -71,15 +78,16 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
<Box>
{ isAutoConnectDisabled && <UserWalletAutoConnectAlert/> }

<UserProfileContentNavLink
text="My profile"
href={ route({ pathname: '/auth/profile' }) }
icon="profile"
onClick={ onClose }
py="8px"
/>

<Box fontSize="xs" lineHeight={ 4 } fontWeight="500" borderColor="divider" borderWidth="1px" borderRadius="base">
<Box fontSize="xs" lineHeight={ 6 } fontWeight="500" px={ 1 } mb="2px">Account</Box>
<Box
fontSize="xs"
lineHeight={ 4 }
fontWeight="500"
borderColor="divider"
borderWidth="1px"
borderRadius="base"
color={ accountTextColor }
>
{ config.features.blockchainInteraction.isEnabled && (
<Flex p={ 2 } borderColor="divider" borderBottomWidth="1px">
<Box>Address</Box>
Expand All @@ -91,22 +99,22 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
/>
{ data?.address_hash ?
<Box>{ shortenString(data?.address_hash) }</Box> :
<Link onClick={ onAddAddress } color="text_secondary" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add address</Link>
<Link onClick={ onAddAddress } color="icon_info" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add address</Link>
}
</Flex>
) }
<Flex p={ 2 } columnGap={ 4 }>
<Box mr="auto">Email</Box>
{ data?.email ?
<TruncatedValue value={ data.email }/> :
<Link onClick={ onAddEmail } color="text_secondary" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add email</Link>
<Link onClick={ onAddEmail } color="icon_info" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add email</Link>
}
</Flex>
</Box>

{ config.features.blockchainInteraction.isEnabled && <UserProfileContentWallet onClose={ onClose } mt={ 3 }/> }

<VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden" mt={ 3 }>
<VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden" mt={ 4 }>
{ navLinks.map((item) => (
<UserProfileContentNavLink
key={ item.text }
Expand Down
9 changes: 2 additions & 7 deletions ui/snippets/user/profile/UserProfileContentNavLink.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import type { SpaceProps } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import React from 'react';

Expand All @@ -7,19 +6,15 @@ import type { NavLink } from './types';
import IconSvg from 'ui/shared/IconSvg';
import LinkInternal from 'ui/shared/links/LinkInternal';

type Props = NavLink & {
py?: SpaceProps['py'];
}

const UserProfileContentNavLink = ({ href, icon, text, onClick, py }: Props) => {
const UserProfileContentNavLink = ({ href, icon, text, onClick }: NavLink) => {

return (
<LinkInternal
href={ href }
display="flex"
alignItems="center"
columnGap={ 3 }
py={ py ?? '14px' }
py="14px"
color="inherit"
_hover={{ textDecoration: 'none', color: 'link_hovered' }}
onClick={ onClick }
Expand Down
2 changes: 1 addition & 1 deletion ui/snippets/user/profile/UserProfileContentWallet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {

return (
<Box className={ className }>
<Flex px={ 2 } py={ 1 } mb={ 1 } fontSize="xs" lineHeight={ 4 } fontWeight="500">
<Flex px={ 1 } mb="2px" fontSize="xs" alignItems="center" lineHeight={ 6 } fontWeight="500">
<span>Connected wallet</span>
<Hint
label={
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit fed42c9

Please sign in to comment.