display ens on wallet button and in menu

ui/snippets/walletMenu/WalletMenuContent.tsx

@@ -10,13 +10,14 @@ import useMenuButtonColors from '../useMenuButtonColors';
 
 type Props = {
   address?: string;
+  ensDomainName?: string | null;
   disconnect?: () => void;
   isAutoConnectDisabled?: boolean;
   openWeb3Modal: () => void;
   closeWalletMenu: () => void;
 };
 
-const WalletMenuContent = ({ address, disconnect, isAutoConnectDisabled, openWeb3Modal, closeWalletMenu }: Props) => {
+const WalletMenuContent = ({ address, ensDomainName, disconnect, isAutoConnectDisabled, openWeb3Modal, closeWalletMenu }: Props) => {
   const { themedBackgroundOrange } = useMenuButtonColors();
   const [ isModalOpening, setIsModalOpening ] = React.useState(false);
 
@@ -71,7 +72,7 @@ const WalletMenuContent = ({ address, disconnect, isAutoConnectDisabled, openWeb
       </Text>
       <Flex alignItems="center" mb={ 6 }>
         <AddressEntity
-          address={{ hash: address }}
+          address={{ hash: address, ens_domain_name: ensDomainName }}
           noTooltip
           truncation="dynamic"
           fontSize="sm"

ui/snippets/walletMenu/WalletMenuDesktop.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
+import useAddressQuery from 'ui/address/utils/useAddressQuery';
 import Popover from 'ui/shared/chakra/Popover';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import IconSvg from 'ui/shared/IconSvg';
@@ -27,6 +28,7 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
   const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean(false);
   const isMobile = useIsMobile();
   const { isAutoConnectDisabled } = useMarketplaceContext();
+  const addressQuery = useAddressQuery({ hash: address });
 
   const variant = React.useMemo(() => {
     if (isWalletConnected) {
@@ -83,7 +85,10 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
               variant={ variant }
               colorScheme="blue"
               flexShrink={ 0 }
-              isLoading={ (isModalOpening || isModalOpen) && !isWalletConnected }
+              isLoading={
+                ((isModalOpening || isModalOpen) && !isWalletConnected) ||
+                (addressQuery.isPlaceholderData && isWalletConnected)
+              }
               loadingText="Connect wallet"
               onClick={ isWalletConnected ? openPopover : connect }
               fontSize="sm"
@@ -94,7 +99,11 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
               { isWalletConnected ? (
                 <>
                   <WalletIdenticon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled } mr={ 2 }/>
-                  <HashStringShorten hash={ address } isTooltipDisabled/>
+                  { addressQuery.data?.ens_domain_name ? (
+                    <chakra.span>{ addressQuery.data.ens_domain_name }</chakra.span>
+                  ) : (
+                    <HashStringShorten hash={ address } isTooltipDisabled/>
+                  ) }
                 </>
               ) : (
                 <>
@@ -111,6 +120,7 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
           <PopoverBody padding="24px 16px 16px 16px">
             <WalletMenuContent
               address={ address }
+              ensDomainName={ addressQuery.data?.ens_domain_name }
               disconnect={ disconnect }
               isAutoConnectDisabled={ isAutoConnectDisabled }
               openWeb3Modal={ openModal }

ui/snippets/walletMenu/WalletMenuMobile.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
+import useAddressQuery from 'ui/address/utils/useAddressQuery';
 import IconSvg from 'ui/shared/IconSvg';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
 import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
@@ -18,6 +19,7 @@ const WalletMenuMobile = () => {
   const { themedBackground, themedBackgroundOrange, themedBorderColor, themedColor } = useMenuButtonColors();
   const isMobile = useIsMobile();
   const { isAutoConnectDisabled } = useMarketplaceContext();
+  const addressQuery = useAddressQuery({ hash: address });
 
   const openPopover = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Open' });
@@ -48,7 +50,10 @@ const WalletMenuMobile = () => {
           color={ themedColor }
           borderColor={ !isWalletConnected ? themedBorderColor : undefined }
           onClick={ isWalletConnected ? openPopover : connect }
-          isLoading={ (isModalOpening || isModalOpen) && !isWalletConnected }
+          isLoading={
+            ((isModalOpening || isModalOpen) && !isWalletConnected) ||
+            (addressQuery.isPlaceholderData && isWalletConnected)
+          }
         />
       </WalletTooltip>
       { isWalletConnected && (
@@ -63,6 +68,7 @@ const WalletMenuMobile = () => {
             <DrawerBody p={ 6 }>
               <WalletMenuContent
                 address={ address }
+                ensDomainName={ addressQuery.data?.ens_domain_name }
                 disconnect={ disconnect }
                 isAutoConnectDisabled={ isAutoConnectDisabled }
                 openWeb3Modal={ openModal }