profile button design fixes

ui/snippets/user/profile/UserProfileButton.tsx

@@ -38,27 +38,16 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }:
 
   const content = (() => {
     if (!data) {
-      return 'Connect';
+      return 'Log in';
     }
 
-    const address = data.address_hash || web3AccountWithDomain.address;
-    if (address) {
-      const text = (() => {
-        if (data.address_hash) {
-          return shortenString(data.address_hash);
-        }
-
-        if (web3AccountWithDomain.domain) {
-          return web3AccountWithDomain.domain;
-        }
-
-        return shortenString(address);
-      })();
-
+    if (web3AccountWithDomain.address) {
       return (
         <HStack gap={ 2 }>
-          <UserIdenticon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
-          <Box display={{ base: 'none', md: 'block' }}>{ text }</Box>
+          <UserIdenticon address={ web3AccountWithDomain.address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
+          <Box display={{ base: 'none', md: 'block' }}>
+            { web3AccountWithDomain.domain || shortenString(web3AccountWithDomain.address) }
+          </Box>
         </HStack>
       );
     }
@@ -66,7 +55,7 @@ const UserProfileButton = ({ profileQuery, size, variant, onClick, isPending }:
     return (
       <HStack gap={ 2 }>
         <IconSvg name="profile" boxSize={ 5 }/>
-        <Box display={{ base: 'none', md: 'block' }}>{ data.email ? getUserHandle(data.email) : 'Profile' }</Box>
+        <Box display={{ base: 'none', md: 'block' }}>{ data.email ? getUserHandle(data.email) : 'My profile' }</Box>
       </HStack>
     );
   })();

ui/snippets/user/profile/UserProfileContent.tsx

-import { Box, Divider, Flex, Link, Text, VStack } from '@chakra-ui/react';
+import { Box, Divider, Flex, Link, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NavLink } from './types';
@@ -8,6 +8,8 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
+import shortenString from 'lib/shortenString';
+import Hint from 'ui/shared/Hint';
 import useLogout from 'ui/snippets/auth/useLogout';
 
 import UserWalletAutoConnectAlert from '../UserWalletAutoConnectAlert';
@@ -47,9 +49,10 @@ interface Props {
   data: UserInfo;
   onClose: () => void;
   onAddEmail: () => void;
+  onAddAddress: () => void;
 }
 
-const UserProfileContent = ({ data, onClose, onAddEmail }: Props) => {
+const UserProfileContent = ({ data, onClose, onAddEmail, onAddAddress }: Props) => {
   const { isAutoConnectDisabled } = useMarketplaceContext();
   const logout = useLogout();
 
@@ -57,22 +60,34 @@ const UserProfileContent = ({ data, onClose, onAddEmail }: Props) => {
     <Box>
       { isAutoConnectDisabled && <UserWalletAutoConnectAlert/> }
 
-      <Flex alignItems="center" justifyContent="space-between">
       <UserProfileContentNavLink
-          text="Profile"
+        text="My profile"
         href={ route({ pathname: '/auth/profile' }) }
         icon="profile"
         onClick={ onClose }
       />
+
+      <Box fontSize="xs" lineHeight={ 4 } fontWeight="500" borderColor="divider" borderWidth="1px" borderRadius="base">
+        <Flex p={ 2 } borderColor="divider" borderBottomWidth="1px">
+          <Box>Address</Box>
+          <Hint label="Address" boxSize={ 4 } ml={ 1 } mr="auto"/>
+          { data?.address_hash ?
+            <Box>{ shortenString(data?.address_hash) }</Box> :
+            <Link onClick={ onAddAddress } color="text_secondary" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add wallet</Link>
+          }
+        </Flex>
+        <Flex p={ 2 }>
+          <Box mr="auto">Email</Box>
           { data?.email ?
-          <Text variant="secondary" fontSize="sm">{ getUserHandle(data.email) }</Text> :
-          <Link onClick={ onAddEmail } color="text_secondary" fontSize="sm" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add email</Link>
+            <Box>{ getUserHandle(data.email) }</Box> :
+            <Link onClick={ onAddEmail } color="text_secondary" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add email</Link>
           }
         </Flex>
+      </Box>
 
       { config.features.blockchainInteraction.isEnabled ? <UserProfileContentWallet onClose={ onClose }/> : <Divider/> }
 
-      <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
+      <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden" mt={ 3 }>
         { navLinks.map((item) => (
           <UserProfileContentNavLink
             key={ item.text }

ui/snippets/user/profile/UserProfileContentWallet.tsx

-import { Button, Divider, Flex, IconButton } from '@chakra-ui/react';
+import { Box, Button, Flex, IconButton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import delay from 'lib/delay';
 import useWeb3AccountWithDomain from 'lib/web3/useAccountWithDomain';
 import useWeb3Wallet from 'lib/web3/useWallet';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import Hint from 'ui/shared/Hint';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
@@ -12,6 +13,7 @@ interface Props {
 }
 
 const UserProfileContentWallet = ({ onClose }: Props) => {
+  const walletSnippetBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
   const web3Wallet = useWeb3Wallet({ source: 'Profile dropdown' });
 
   const web3AccountWithDomain = useWeb3AccountWithDomain(true);
@@ -28,11 +30,10 @@ const UserProfileContentWallet = ({ onClose }: Props) => {
     onClose?.();
   }, [ web3Wallet, onClose ]);
 
+  const content = (() => {
     if (web3Wallet.isConnected && web3AccountWithDomain.address) {
       return (
-      <>
-        <Divider/>
-        <Flex alignItems="center" columnGap={ 2 } py="14px">
+        <Flex alignItems="center" columnGap={ 2 } bgColor={ walletSnippetBgColor } px={ 2 } py="10px" borderRadius="base">
           <AddressEntity
             address={{ hash: web3AccountWithDomain.address, ens_domain_name: web3AccountWithDomain.domain }}
             isLoading={ web3AccountWithDomain.isLoading }
@@ -52,8 +53,6 @@ const UserProfileContentWallet = ({ onClose }: Props) => {
             flexShrink={ 0 }
           />
         </Flex>
-        <Divider/>
-      </>
       );
     }
 
@@ -64,11 +63,21 @@ const UserProfileContentWallet = ({ onClose }: Props) => {
         isLoading={ web3Wallet.isOpen }
         loadingText="Connect Wallet"
         w="100%"
-      my={ 2 }
       >
         Connect Wallet
       </Button>
     );
+  })();
+
+  return (
+    <Box mt={ 3 }>
+      <Flex px={ 2 } py={ 1 } mb={ 1 } fontSize="xs" lineHeight={ 4 } fontWeight="500">
+        <span>Wallet for apps or contracts</span>
+        <Hint label="Wallet for apps or contracts" boxSize={ 4 } ml={ 1 }/>
+      </Flex>
+      { content }
+    </Box>
+  );
 };
 
 export default React.memo(UserProfileContentWallet);

ui/snippets/user/profile/UserProfileDesktop.tsx

@@ -51,6 +51,11 @@ const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) =>
     authModal.onOpen();
   }, [ authModal ]);
 
+  const handleAddAddressClick = React.useCallback(() => {
+    setAuthInitialScreen({ type: 'connect_wallet', isAuth: true });
+    authModal.onOpen();
+  }, [ authModal ]);
+
   return (
     <>
       <Popover openDelay={ 300 } placement="bottom-end" isLazy isOpen={ profileMenu.isOpen } onClose={ profileMenu.onClose }>
@@ -64,9 +69,14 @@ const UserProfileDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) =>
           />
         </PopoverTrigger>
         { profileQuery.data && (
-          <PopoverContent maxW="280px" minW="220px" w="min-content">
+          <PopoverContent w="280px">
             <PopoverBody>
-              <UserProfileContent data={ profileQuery.data } onClose={ profileMenu.onClose } onAddEmail={ handleAddEmailClick }/>
+              <UserProfileContent
+                data={ profileQuery.data }
+                onClose={ profileMenu.onClose }
+                onAddEmail={ handleAddEmailClick }
+                onAddAddress={ handleAddAddressClick }
+              />
             </PopoverBody>
           </PopoverContent>
         ) }

ui/snippets/user/profile/UserProfileMobile.tsx

@@ -45,6 +45,11 @@ const UserProfileMobile = () => {
     authModal.onOpen();
   }, [ authModal ]);
 
+  const handleAddAddressClick = React.useCallback(() => {
+    setAuthInitialScreen({ type: 'connect_wallet', isAuth: true });
+    authModal.onOpen();
+  }, [ authModal ]);
+
   return (
     <>
       <UserProfileButton
@@ -62,7 +67,12 @@ const UserProfileMobile = () => {
           <DrawerOverlay/>
           <DrawerContent maxWidth="300px">
             <DrawerBody p={ 6 }>
-              <UserProfileContent data={ profileQuery.data } onClose={ profileMenu.onClose } onAddEmail={ handleAddEmailClick }/>
+              <UserProfileContent
+                data={ profileQuery.data }
+                onClose={ profileMenu.onClose }
+                onAddEmail={ handleAddEmailClick }
+                onAddAddress={ handleAddAddressClick }
+              />
             </DrawerBody>
           </DrawerContent>
         </Drawer>