diff --git a/configs/envs/.env.pw b/configs/envs/.env.pw index 7840c51b42..1794de039d 100644 --- a/configs/envs/.env.pw +++ b/configs/envs/.env.pw @@ -52,5 +52,6 @@ NEXT_PUBLIC_STATS_API_HOST=http://localhost:3004 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=http://localhost:3005 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=http://localhost:3006 NEXT_PUBLIC_METADATA_SERVICE_API_HOST=http://localhost:3007 +NEXT_PUBLIC_NAME_SERVICE_API_HOST=http://localhost:3008 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx diff --git a/lib/api/resources.ts b/lib/api/resources.ts index 130c918141..fb6d28faa3 100644 --- a/lib/api/resources.ts +++ b/lib/api/resources.ts @@ -232,6 +232,12 @@ export const RESOURCES = { basePath: getFeaturePayload(config.features.nameService)?.api.basePath, filterFields: [ 'address' as const, 'resolved_to' as const, 'owned_by' as const, 'only_active' as const, 'protocols' as const ], }, + address_domain: { + path: '/api/v1/:chainId/addresses/:address', + pathParams: [ 'chainId' as const, 'address' as const ], + endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint, + basePath: getFeaturePayload(config.features.nameService)?.api.basePath, + }, domain_info: { path: '/api/v1/:chainId/domains/:name', pathParams: [ 'chainId' as const, 'name' as const ], @@ -1092,6 +1098,7 @@ Q extends 'zksync_l2_txn_batch' ? ZkSyncBatch : Q extends 'zksync_l2_txn_batch_txs' ? ZkSyncBatchTxs : Q extends 'contract_security_audits' ? SmartContractSecurityAudits : Q extends 'addresses_lookup' ? bens.LookupAddressResponse : +Q extends 'address_domain' ? bens.GetAddressResponse : Q extends 'domain_info' ? bens.DetailedDomain : Q extends 'domain_events' ? bens.ListDomainEventsResponse : Q extends 'domains_lookup' ? bens.LookupDomainNameResponse : diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png index 8e0952c789..9e454fc8e3 100644 Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png index 1777271981..6b9d2b4d9d 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png index d71061ea76..39d26a9482 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png differ diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png index de4d08051c..4b8669777d 100644 Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png differ diff --git a/ui/snippets/walletMenu/WalletMenuContent.tsx b/ui/snippets/walletMenu/WalletMenuContent.tsx index 35f03693d6..c706a8ff4d 100644 --- a/ui/snippets/walletMenu/WalletMenuContent.tsx +++ b/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 {}, + 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(); + 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(); + await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 50 } }); +}); + +test('wallet is loading', async({ page, render }) => { + await render(); + 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_domain', + { domain: undefined, resolved_domains_count: 0 } as bens.GetAddressResponse, + { pathParams: { address: addressMock.hash, chainId: config.chain.id } }, + ); + + const component = await render(); + 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 }) => { + const component = await render(); + 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_domain', + { domain: domainMock.ensDomainB, resolved_domains_count: 1 } as bens.GetAddressResponse, + { pathParams: { address: addressMock.hash, chainId: config.chain.id } }, + ); + + const component = await render(); + await component.locator('button').click(); + + await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 300 } }); +}); diff --git a/ui/snippets/walletMenu/WalletMenuDesktop.tsx b/ui/snippets/walletMenu/WalletMenuDesktop.tsx index 3e2f4f8ac5..a316f5a202 100644 --- a/ui/snippets/walletMenu/WalletMenuDesktop.tsx +++ b/ui/snippets/walletMenu/WalletMenuDesktop.tsx @@ -2,6 +2,8 @@ import type { ButtonProps } from '@chakra-ui/react'; import { PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean, chakra, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; +import config from 'configs/app'; +import useApiQuery from 'lib/api/useApiQuery'; import { useMarketplaceContext } from 'lib/contexts/marketplace'; import useIsMobile from 'lib/hooks/useIsMobile'; import * as mixpanel from 'lib/mixpanel/index'; @@ -21,12 +23,33 @@ 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 WalletMenuDesktop = ({ + 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 addressDomainQuery = useApiQuery('address_domain', { + pathParams: { + chainId: config.chain.id, + address, + }, + queryOptions: { + enabled: config.features.nameService.isEnabled, + }, + }); const variant = React.useMemo(() => { if (isWalletConnected) { @@ -83,7 +106,10 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => { variant={ variant } colorScheme="blue" flexShrink={ 0 } - isLoading={ (isModalOpening || isModalOpen) && !isWalletConnected } + isLoading={ + ((isModalOpening || isModalOpen) && !isWalletConnected) || + (addressDomainQuery.isLoading && isWalletConnected) + } loadingText="Connect wallet" onClick={ isWalletConnected ? openPopover : connect } fontSize="sm" @@ -94,7 +120,11 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => { { isWalletConnected ? ( <> - + { addressDomainQuery.data?.domain?.name ? ( + { addressDomainQuery.data.domain?.name } + ) : ( + + ) } ) : ( <> @@ -111,6 +141,7 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => { { ); }; -export default chakra(WalletMenuDesktop); +// separated the useWallet hook from the main component because it's hard to mock it in tests +const WalletMenuDesktopWrapper = ({ isHomePage, className, size = 'md' }: Props) => { + const { + isWalletConnected, address, connect, disconnect, + isModalOpening, isModalOpen, openModal, + } = useWallet({ source: 'Header' }); + + return ( + + ); +}; + +export default chakra(WalletMenuDesktopWrapper); diff --git a/ui/snippets/walletMenu/WalletMenuMobile.pw.tsx b/ui/snippets/walletMenu/WalletMenuMobile.pw.tsx new file mode 100644 index 0000000000..82236189c5 --- /dev/null +++ b/ui/snippets/walletMenu/WalletMenuMobile.pw.tsx @@ -0,0 +1,58 @@ +import React from 'react'; + +import type * as bens from '@blockscout/bens-types'; + +import config from 'configs/app'; +import * as addressMock from 'mocks/address/address'; +import * as domainMock from 'mocks/ens/domain'; +import { test, expect, devices } from 'playwright/lib'; + +import { WalletMenuMobile } 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(); + await expect(page).toHaveScreenshot(); +}); + +test('wallet is loading', async({ page, render }) => { + await render(); + await expect(page).toHaveScreenshot(); +}); + +test('wallet connected +@dark-mode', async({ page, render, mockApiResponse }) => { + await mockApiResponse( + 'address_domain', + { domain: undefined, resolved_domains_count: 0 } as bens.GetAddressResponse, + { pathParams: { address: addressMock.hash, chainId: config.chain.id } }, + ); + + const component = await render(); + await component.locator('button').click(); + + await expect(page).toHaveScreenshot(); +}); + +test('wallet with ENS connected', async({ page, render, mockApiResponse }) => { + await mockApiResponse( + 'address_domain', + { domain: domainMock.ensDomainB, resolved_domains_count: 1 } as bens.GetAddressResponse, + { pathParams: { address: addressMock.hash, chainId: config.chain.id } }, + ); + + const component = await render(); + await component.locator('button').click(); + + await expect(page).toHaveScreenshot(); +}); diff --git a/ui/snippets/walletMenu/WalletMenuMobile.tsx b/ui/snippets/walletMenu/WalletMenuMobile.tsx index 9008d540e4..53619faa90 100644 --- a/ui/snippets/walletMenu/WalletMenuMobile.tsx +++ b/ui/snippets/walletMenu/WalletMenuMobile.tsx @@ -1,6 +1,8 @@ import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton } from '@chakra-ui/react'; import React from 'react'; +import config from 'configs/app'; +import useApiQuery from 'lib/api/useApiQuery'; import { useMarketplaceContext } from 'lib/contexts/marketplace'; import useIsMobile from 'lib/hooks/useIsMobile'; import * as mixpanel from 'lib/mixpanel/index'; @@ -12,12 +14,32 @@ 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 WalletMenuMobile = ( + { 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 addressDomainQuery = useApiQuery('address_domain', { + pathParams: { + chainId: config.chain.id, + address, + }, + queryOptions: { + enabled: config.features.nameService.isEnabled, + }, + }); const openPopover = React.useCallback(() => { mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Open' }); @@ -48,7 +70,10 @@ const WalletMenuMobile = () => { color={ themedColor } borderColor={ !isWalletConnected ? themedBorderColor : undefined } onClick={ isWalletConnected ? openPopover : connect } - isLoading={ (isModalOpening || isModalOpen) && !isWalletConnected } + isLoading={ + ((isModalOpening || isModalOpen) && !isWalletConnected) || + (addressDomainQuery.isLoading && isWalletConnected) + } /> { isWalletConnected && ( @@ -63,6 +88,7 @@ const WalletMenuMobile = () => { { ); }; -export default WalletMenuMobile; +const WalletMenuMobileWrapper = () => { + const { + isWalletConnected, address, connect, disconnect, + isModalOpening, isModalOpen, openModal, + } = useWallet({ source: 'Header' }); + + return ( + + ); +}; + +export default WalletMenuMobileWrapper; diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png new file mode 100644 index 0000000000..405eee4950 Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-home-page-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-home-page-dark-mode-1.png new file mode 100644 index 0000000000..57d31f2169 Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-connected-home-page-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png new file mode 100644 index 0000000000..b10ddfbe29 Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-home-page-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-home-page-dark-mode-1.png new file mode 100644 index 0000000000..cbeefa84af Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_dark-color-mode_wallet-is-not-connected-home-page-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-dark-mode-1.png new file mode 100644 index 0000000000..835d3779ab Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-home-page-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-home-page-dark-mode-1.png new file mode 100644 index 0000000000..f11da2a62e Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-connected-home-page-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-loading-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-loading-1.png new file mode 100644 index 0000000000..705c3a06da Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-loading-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png new file mode 100644 index 0000000000..b6a05d2dde Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-home-page-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-home-page-dark-mode-1.png new file mode 100644 index 0000000000..502530e671 Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-is-not-connected-home-page-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-with-ENS-connected-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-with-ENS-connected-1.png new file mode 100644 index 0000000000..7fbb3a6bca Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuDesktop.pw.tsx_default_wallet-with-ENS-connected-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png new file mode 100644 index 0000000000..05dc391f4d Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-connected-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png new file mode 100644 index 0000000000..3e44a5260e Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_dark-color-mode_wallet-is-not-connected-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-connected-dark-mode-1.png new file mode 100644 index 0000000000..95158695b9 Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-connected-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-loading-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-loading-1.png new file mode 100644 index 0000000000..fbe46c9f22 Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-loading-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png new file mode 100644 index 0000000000..874b76d86a Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-is-not-connected-dark-mode-1.png differ diff --git a/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-with-ENS-connected-1.png b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-with-ENS-connected-1.png new file mode 100644 index 0000000000..8968c8030e Binary files /dev/null and b/ui/snippets/walletMenu/__screenshots__/WalletMenuMobile.pw.tsx_default_wallet-with-ENS-connected-1.png differ