add wallet info into profile menu

ui/snippets/profile/ProfileButton.tsx

@@ -17,7 +17,14 @@ interface Props {
 }
 
 const ProfileButton = ({ profileQuery, size, variant, onClick }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
-  const { data, isPending } = profileQuery;
+  const [ isFetched, setIsFetched ] = React.useState(false);
+  const { data, isLoading } = profileQuery;
+
+  React.useEffect(() => {
+    if (!isLoading) {
+      setIsFetched(true);
+    }
+  }, [ isLoading ]);
 
   const content = (() => {
     if (!data) {
@@ -41,10 +48,10 @@ const ProfileButton = ({ profileQuery, size, variant, onClick }: Props, ref: Rea
       label={ <span>Sign in to My Account to add tags,<br/>create watchlists, access API keys and more</span> }
       textAlign="center"
       padding={ 2 }
-      isDisabled={ isPending || Boolean(data) }
+      isDisabled={ isFetched || Boolean(data) }
       openDelay={ 500 }
     >
-      <Skeleton isLoaded={ !isPending } borderRadius="base" ref={ ref }>
+      <Skeleton isLoaded={ isFetched } borderRadius="base" ref={ ref }>
         <Button
           size={ size }
           variant={ variant }

ui/snippets/profile/ProfileDesktop.tsx

@@ -31,9 +31,9 @@ const ProfileDesktop = ({ buttonSize, isHomePage }: Props) => {
 
         </PopoverTrigger>
         { profileQuery.data && (
-          <PopoverContent maxW="400px" minW="220px" w="min-content">
+          <PopoverContent maxW="280px" minW="220px" w="min-content">
             <PopoverBody>
-              <ProfileMenuContent data={ profileQuery.data } onNavLinkClick={ profileMenu.onClose }/>
+              <ProfileMenuContent data={ profileQuery.data } onClose={ profileMenu.onClose }/>
             </PopoverBody>
           </PopoverContent>
         ) }

ui/snippets/profile/ProfileMenuContent.tsx

@@ -9,6 +9,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 
 import ProfileMenuNavLink from './ProfileMenuNavLink';
+import ProfileMenuWallet from './ProfileMenuWallet';
 import { getUserHandle } from './utils';
 
 const navLinks: Array<NavLink> = [
@@ -41,10 +42,10 @@ const navLinks: Array<NavLink> = [
 
 interface Props {
   data?: UserInfo;
-  onNavLinkClick?: () => void;
+  onClose?: () => void;
 }
 
-const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
+const ProfileMenuContent = ({ data, onClose }: Props) => {
 
   return (
     <Box>
@@ -53,19 +54,19 @@ const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
           text="Profile"
           href={ route({ pathname: '/auth/profile' }) }
           icon="profile"
-          onClick={ onNavLinkClick }
+          onClick={ onClose }
         />
         { data?.email && <Text variant="secondary" fontSize="sm">{ getUserHandle(data.email) }</Text> }
       </Flex>
 
-      <Divider/>
+      <ProfileMenuWallet onClose={ onClose }/>
 
       <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
         { navLinks.map((item) => (
           <ProfileMenuNavLink
             key={ item.text }
             { ...item }
-            onClick={ onNavLinkClick }
+            onClick={ onClose }
           />
         )) }
       </VStack>
@@ -75,7 +76,7 @@ const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
       <ProfileMenuNavLink
         text="Sign out"
         icon="sign_out"
-        onClick={ onNavLinkClick }
+        onClick={ onClose }
       />
     </Box>
   );

ui/snippets/profile/ProfileMenuWallet.tsx

+import { Button, Divider, Flex, IconButton } from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import delay from 'lib/delay';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+import useWallet from '../walletMenu/useWallet';
+
+interface Props {
+  onClose?: () => void;
+}
+
+const ProfileMenuWallet = ({ onClose }: Props) => {
+  const wallet = useWallet({ source: 'Header' });
+
+  const addressDomainQuery = useApiQuery('address_domain', {
+    pathParams: {
+      chainId: config.chain.id,
+      address: wallet.address,
+    },
+    queryOptions: {
+      enabled: config.features.nameService.isEnabled && Boolean(wallet.address),
+    },
+  });
+
+  const handleConnectWalletClick = React.useCallback(async() => {
+    wallet.openModal();
+    await delay(300);
+    onClose?.();
+  }, [ wallet, onClose ]);
+
+  const handleOpenWalletClick = React.useCallback(async() => {
+    wallet.openModal();
+    await delay(300);
+    onClose?.();
+  }, [ wallet, onClose ]);
+
+  if (!config.features.blockchainInteraction.isEnabled) {
+    return <Divider/>;
+  }
+
+  if (wallet.isWalletConnected) {
+    return (
+      <>
+        <Divider/>
+        <Flex alignItems="center" columnGap={ 2 } py="14px">
+          <AddressEntity
+            address={{ hash: wallet.address, ens_domain_name: addressDomainQuery.data?.domain?.name }}
+            isLoading={ addressDomainQuery.isPending }
+            isTooltipDisabled
+            truncation="dynamic"
+            fontSize="sm"
+            fontWeight={ 700 }
+          />
+          <IconButton
+            aria-label="Open wallet"
+            icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
+            variant="simple"
+            color="icon_info"
+            boxSize={ 5 }
+            onClick={ handleOpenWalletClick }
+            isLoading={ wallet.isModalOpening }
+            flexShrink={ 0 }
+          />
+        </Flex>
+        <Divider/>
+      </>
+    );
+  }
+
+  const isLoading = wallet.isModalOpening || wallet.isModalOpen;
+
+  return (
+    <Button
+      size="sm"
+      onClick={ handleConnectWalletClick }
+      isLoading={ isLoading }
+      loadingText="Connect Wallet"
+      w="100%"
+      my={ 2 }
+    >
+        Connect Wallet
+    </Button>
+  );
+};
+
+export default React.memo(ProfileMenuWallet);