Display ENS on the wallet button and in the 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.pw.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import * as addressMock from 'mocks/address/address';
+import { test, expect } from 'playwright/lib';
+
+import { WalletMenuDesktopComponent } from './WalletMenuDesktop';
+
+const props = {
+  isWalletConnected: false,
+  address: '',
+  connect: () => {},
+  disconnect: () => {},
+  isModalOpening: false,
+  isModalOpen: false,
+  openModal: () => {},
+};
+
+test.use({ viewport: { width: 1440, height: 750 } }); // xl
+
+test('wallet is not connected +@dark-mode', async({ page, render }) => {
+  await render(<WalletMenuDesktopComponent { ...props }/>);
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
+});
+
+test('wallet is not connected (home page) +@dark-mode', async({ page, render }) => {
+  await render(<WalletMenuDesktopComponent { ...props } isHomePage/>);
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
+});
+
+test('wallet is loading', async({ page, render }) => {
+  await render(<WalletMenuDesktopComponent { ...props } isModalOpen/>);
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } });
+});
+
+test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.eoa, { pathParams: { hash: addressMock.hash } });
+
+  const component = await render(<WalletMenuDesktopComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
+});
+
+test('wallet connected (home page) +@dark-mode', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.eoa, { pathParams: { hash: addressMock.hash } });
+
+  const component = await render(<WalletMenuDesktopComponent { ...props } isHomePage isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
+});
+
+test('wallet with ENS connected', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('address', { ...addressMock.eoa, ...addressMock.withEns } as Address, { pathParams: { hash: addressMock.hash } });
+
+  const component = await render(<WalletMenuDesktopComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } });
+});

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';
@@ -21,12 +22,25 @@ type Props = {
   size?: 'sm' | 'md';
 };
 
-const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
-  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen, openModal } = useWallet({ source: 'Header' });
+type ComponentProps = Props & {
+  isWalletConnected: boolean;
+  address: string;
+  connect: () => void;
+  disconnect: () => void;
+  isModalOpening: boolean;
+  isModalOpen: boolean;
+  openModal: () => void;
+};
+
+export const WalletMenuDesktopComponent = ({
+  isHomePage, className, size = 'md', isWalletConnected, address, connect,
+  disconnect, isModalOpening, isModalOpen, openModal,
+}: ComponentProps) => {
   const { themedBackground, themedBackgroundOrange, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean(false);
   const isMobile = useIsMobile();
   const { isAutoConnectDisabled } = useMarketplaceContext();
+  const addressQuery = useAddressQuery({ hash: address });
 
   const variant = React.useMemo(() => {
     if (isWalletConnected) {
@@ -83,7 +97,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 +111,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 +132,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 }
@@ -123,4 +145,27 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
   );
 };
 
+// separated the useWallet hook from the main component because it's hard to mock it in tests
+const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
+  const {
+    isWalletConnected, address, connect, disconnect,
+    isModalOpening, isModalOpen, openModal,
+  } = useWallet({ source: 'Header' });
+
+  return (
+    <WalletMenuDesktopComponent
+      isHomePage={ isHomePage }
+      className={ className }
+      size={ size }
+      isWalletConnected={ isWalletConnected }
+      address={ address }
+      connect={ connect }
+      disconnect={ disconnect }
+      isModalOpening={ isModalOpening }
+      isModalOpen={ isModalOpen }
+      openModal={ openModal }
+    />
+  );
+};
+
 export default chakra(WalletMenuDesktop);

ui/snippets/walletMenu/WalletMenuMobile.pw.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import * as addressMock from 'mocks/address/address';
+import { test, expect, devices } from 'playwright/lib';
+
+import { WalletMenuMobileComponent } from './WalletMenuMobile';
+
+const props = {
+  isWalletConnected: false,
+  address: '',
+  connect: () => {},
+  disconnect: () => {},
+  isModalOpening: false,
+  isModalOpen: false,
+  openModal: () => {},
+};
+
+test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+test('wallet is not connected +@dark-mode', async({ page, render }) => {
+  await render(<WalletMenuMobileComponent { ...props }/>);
+  await expect(page).toHaveScreenshot();
+});
+
+test('wallet is loading', async({ page, render }) => {
+  await render(<WalletMenuMobileComponent { ...props } isModalOpen/>);
+  await expect(page).toHaveScreenshot();
+});
+
+test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('address', addressMock.eoa, { pathParams: { hash: addressMock.hash } });
+
+  const component = await render(<WalletMenuMobileComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot();
+});
+
+test('wallet with ENS connected', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('address', { ...addressMock.eoa, ...addressMock.withEns } as Address, { pathParams: { hash: addressMock.hash } });
+
+  const component = await render(<WalletMenuMobileComponent { ...props } isWalletConnected address={ addressMock.hash }/>);
+  await component.locator('button').click();
+
+  await expect(page).toHaveScreenshot();
+});

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';
@@ -12,12 +13,24 @@ import useMenuButtonColors from '../useMenuButtonColors';
 import WalletIdenticon from './WalletIdenticon';
 import WalletTooltip from './WalletTooltip';
 
-const WalletMenuMobile = () => {
+type ComponentProps = {
+  isWalletConnected: boolean;
+  address: string;
+  connect: () => void;
+  disconnect: () => void;
+  isModalOpening: boolean;
+  isModalOpen: boolean;
+  openModal: () => void;
+};
+
+export const WalletMenuMobileComponent = (
+  { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen, openModal }: ComponentProps,
+) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen, openModal } = useWallet({ source: 'Header' });
   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 +61,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 +79,7 @@ const WalletMenuMobile = () => {
             <DrawerBody p={ 6 }>
               <WalletMenuContent
                 address={ address }
+                ensDomainName={ addressQuery.data?.ens_domain_name }
                 disconnect={ disconnect }
                 isAutoConnectDisabled={ isAutoConnectDisabled }
                 openWeb3Modal={ openModal }
@@ -76,4 +93,23 @@ const WalletMenuMobile = () => {
   );
 };
 
+const WalletMenuMobile = () => {
+  const {
+    isWalletConnected, address, connect, disconnect,
+    isModalOpening, isModalOpen, openModal,
+  } = useWallet({ source: 'Header' });
+
+  return (
+    <WalletMenuMobileComponent
+      isWalletConnected={ isWalletConnected }
+      address={ address }
+      connect={ connect }
+      disconnect={ disconnect }
+      isModalOpening={ isModalOpening }
+      isModalOpen={ isModalOpen }
+      openModal={ openModal }
+    />
+  );
+};
+
 export default WalletMenuMobile;