Merge pull request #1082 from ensdomains/feature/fet-1981-profile-address-dropdowndialog-on-mobile-not-functioning

Fix profile dropdown navigation on mobile by using onClick handlers

Author: laurgk

.claude/commands/dev.md

@@ -78,3 +78,5 @@ certificates
 
 # Claude
 .playwright-mcp
+.claude
+/thoughts

.claude/settings.local.json

@@ -349,6 +349,7 @@
       "unknown": "An unknown error occurred"
     },
     "viewEtherscan": "View on Etherscan",
+    "viewOnBlockExplorer": "View on {{blockExplorer}}",
     "viewMore": "View More"
   },
   "search": {

.gitignore

@@ -4,7 +4,9 @@ import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 
 import { useCoinChain } from '@app/hooks/chain/useCoinChain'
+import { useChainName } from '@app/hooks/chain/useChainName'
 import { usePrimaryName } from '@app/hooks/ensjs/public/usePrimaryName'
+import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { formatExpiry, shortenAddress } from '@app/utils/utils'
 
@@ -34,6 +36,8 @@ vi.mock('next/router', () => ({
 vi.mock('@app/utils/BreakpointProvider')
 vi.mock('@app/hooks/ensjs/public/usePrimaryName')
 vi.mock('@app/hooks/chain/useCoinChain')
+vi.mock('@app/hooks/chain/useChainName')
+vi.mock('@app/hooks/useRouterWithHistory')
 
 const mockUseBreakpoint = mockFunction(useBreakpoint)
 mockUseBreakpoint.mockReturnValue({
@@ -85,6 +89,19 @@ mockUseCoinChain.mockImplementation(({ coinName }) => {
   }
 })
 
+const mockUseChainName = mockFunction(useChainName)
+mockUseChainName.mockReturnValue('mainnet')
+
+const mockUseRouterWithHistory = mockFunction(useRouterWithHistory)
+mockUseRouterWithHistory.mockReturnValue({
+  push: vi.fn(),
+  replace: vi.fn(),
+  pushWithHistory: vi.fn(),
+  asPath: '/',
+  pathname: '/',
+  query: {},
+} as any)
+
 describe('<OwnerProfileButton/>', () => {
   it('renders', () => {
     render(<OwnerProfileButton iconKey="name.owner" value="name.eth" />)
@@ -182,7 +199,7 @@ describe('<AddressProfileButton/>', () => {
       await user.click(addressProfileBtn)
 
       const viewAddressButton = screen.getAllByText((content, element) => {
-        return element?.tagName?.toLowerCase() === 'a' && content?.toLowerCase() === 'view address'
+        return element?.tagName?.toLowerCase() === 'button' && content?.toLowerCase() === 'view address'
       })
 
       expect(viewAddressButton.length).toBe(1)
@@ -209,7 +226,7 @@ describe('<AddressProfileButton/>', () => {
 
       const viewBlockExplorerBtn = screen.getAllByText((content, element) => {
         return (
-          element?.tagName?.toLowerCase() === 'a' && content?.toLowerCase() === 'view on etherscan'
+          element?.tagName?.toLowerCase() === 'button' && content?.toLowerCase() === 'view on etherscan'
         )
       })
 

public/locales/en/common.json

@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useCopyToClipboard } from 'react-use'
@@ -24,15 +23,17 @@ import { DynamicVerificationIcon } from '@app/assets/verification/DynamicVerific
 import { VerificationBadgeAccountTooltipContent } from '@app/components/@molecules/VerificationBadge/components/VerificationBadgeAccountTooltipContent'
 import { VerificationBadgeVerifierTooltipContent } from '@app/components/@molecules/VerificationBadge/components/VerificationBadgeVerifierTooltipContent'
 import { VerificationBadge } from '@app/components/@molecules/VerificationBadge/VerificationBadge'
+import { useBlockExplorer } from '@app/hooks/chain/useBlockExplorer'
 import { useCoinChain } from '@app/hooks/chain/useCoinChain'
 import { usePrimaryName } from '@app/hooks/ensjs/public/usePrimaryName'
+import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
 import { getDestinationAsHref } from '@app/routes'
 import { VerificationProtocol } from '@app/transaction-flow/input/VerifyProfile/VerifyProfile-flow'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { getContentHashLink } from '@app/utils/contenthash'
 import { getSocialData } from '@app/utils/getSocialData'
 import { createUrlObject } from '@app/utils/urlObject'
-import { makeEtherscanLink, shortenAddress } from '@app/utils/utils'
+import { shortenAddress } from '@app/utils/utils'
 import { getVerifierData } from '@app/utils/verification/getVerifierData'
 import { isVerificationProtocol } from '@app/utils/verification/isVerificationProtocol'
 
@@ -120,13 +121,16 @@ export const AddressProfileButton = ({
   iconKey: string
   value: string
 }) => {
-  const router = useRouter()
+  const router = useRouterWithHistory()
   const breakpoints = useBreakpoint()
   const iconKey = _iconKey.toLowerCase()
   const [, copy] = useCopyToClipboard()
-  const coinChainResults = useCoinChain({ coinName: iconKey })
+  const { blockExplorer: currentChainBlockExplorer } = useBlockExplorer()
+  const coinChainResults = useCoinChain({ coinName: iconKey, enabled: iconKey !== 'eth' })
   const { data } = coinChainResults
-  const defaultBlockExplorer = data?.blockExplorers?.default
+  // For ETH addresses, use the current chain's block explorer; for other coins, use coin-specific explorer
+  const defaultBlockExplorer =
+    iconKey === 'eth' ? currentChainBlockExplorer : data?.blockExplorers?.default
   const referrer = router.query.referrer as string | undefined
 
   const IconComponent = useMemo(
@@ -139,7 +143,8 @@ export const AddressProfileButton = ({
       ? {
           icon: UpRightArrowIcon,
           label: 'View address',
-          href: getDestinationAsHref(createUrlObject(`/${address}`, { referrer })),
+          onClick: () =>
+            router.push(getDestinationAsHref(createUrlObject(`/${address}`, { referrer }))),
         }
       : undefined,
     {
@@ -151,7 +156,12 @@ export const AddressProfileButton = ({
       ? {
           icon: UpRightArrowIcon,
           label: `View on ${defaultBlockExplorer?.name}`,
-          href: `${defaultBlockExplorer?.url}/address/${address}`,
+          onClick: () =>
+            window.open(
+              `${defaultBlockExplorer?.url}/address/${address}`,
+              '_blank',
+              'noopener,noreferrer',
+            ),
         }
       : undefined,
   ].filter((item) => item !== undefined) as DropdownItem[]
@@ -278,19 +288,18 @@ export const OwnerProfileButton = ({
   value: string
   timestamp?: number
 }) => {
-  const router = useRouter()
+  const router = useRouterWithHistory()
+  const { blockExplorer, buildAddressUrl } = useBlockExplorer()
   const { t } = useTranslation('common')
   const breakpoints = useBreakpoint()
   const referrer = router.query.referrer as string | undefined
 
   const dataType = useMemo(() => {
-    if (!addressOrNameOrDate)
-      // eslint-disable-next-line no-nested-ternary
-      return label === 'name.expiry'
-        ? 'noExpiry'
-        : label === 'name.parent'
-        ? 'noParent'
-        : 'notOwned'
+    if (!addressOrNameOrDate) {
+      if (label === 'name.expiry') return 'noExpiry'
+      if (label === 'name.parent') return 'noParent'
+      return 'notOwned'
+    }
     if (label === 'name.expiry') return 'expiry'
     if (isAddress(addressOrNameOrDate)) return 'address'
     const isTLD = addressOrNameOrDate.split('.').length === 1
@@ -362,7 +371,7 @@ export const OwnerProfileButton = ({
       ? {
           icon: UpRightArrowIcon,
           label: 'View profile',
-          href: link,
+          onClick: () => router.push(link),
         }
       : undefined,
     primary.data?.name
@@ -377,21 +386,30 @@ export const OwnerProfileButton = ({
           {
             icon: UpRightArrowIcon,
             label: 'View address',
-            href: getDestinationAsHref({
-              pathname: `/${addressOrNameOrDate}`,
-              query: { referrer },
-            }),
+            onClick: () =>
+              router.push(
+                getDestinationAsHref(createUrlObject(`/${addressOrNameOrDate}`, { referrer })),
+              ),
           },
           {
             icon: CopyIcon,
             label: 'Copy address',
             onClick: () => copy(addressOrNameOrDate),
           },
-          {
-            icon: UpRightArrowIcon,
-            label: 'View on Etherscan',
-            href: makeEtherscanLink(addressOrNameOrDate, 'mainnet', 'address'),
-          },
+          ...(blockExplorer
+            ? [
+                {
+                  icon: UpRightArrowIcon,
+                  label: `View on ${blockExplorer.name}`,
+                  onClick: () =>
+                    window.open(
+                      buildAddressUrl(addressOrNameOrDate),
+                      '_blank',
+                      'noopener,noreferrer',
+                    ),
+                },
+              ]
+            : []),
         ] as DropdownItem[])
       : []),
   ].filter((item) => item !== undefined) as DropdownItem[]

src/components/pages/profile/ProfileButton.test.tsx

@@ -39,6 +39,21 @@ vi.mock('@app/utils/BreakpointProvider', () => ({
   }),
 }))
 
+vi.mock('@app/hooks/chain/useChainName', () => ({
+  useChainName: () => 'mainnet',
+}))
+
+vi.mock('@app/hooks/useRouterWithHistory', () => ({
+  useRouterWithHistory: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    pushWithHistory: vi.fn(),
+    asPath: '/',
+    pathname: '/',
+    query: {},
+  }),
+}))
+
 describe('onwershipInfoCalc', () => {
   it('should return no owner if PCC is expired', () => {
     const result = ownershipInfoCalc('', true, [], new Date(), new Date())

src/components/pages/profile/ProfileButton.tsx

@@ -2,9 +2,9 @@ import { useTranslation } from 'react-i18next'
 
 import { OutlinkSVG, Typography } from '@ensdomains/thorin'
 
-import { useChainName } from '@app/hooks/chain/useChainName'
+import { useBlockExplorer } from '@app/hooks/chain/useBlockExplorer'
 import type useRegistrationDate from '@app/hooks/useRegistrationData'
-import { formatDateTime, formatExpiry, makeEtherscanLink } from '@app/utils/utils'
+import { formatDateTime, formatExpiry } from '@app/utils/utils'
 
 import { DateLayout } from './components/DateLayout'
 
@@ -14,22 +14,25 @@ export const RegistrationDate = ({
   registrationData: ReturnType<typeof useRegistrationDate>['data']
 }) => {
   const { t } = useTranslation('common')
-  const chainName = useChainName()
+  const { buildTransactionUrl } = useBlockExplorer()
   if (!registrationData) return null
+  const transactionUrl = buildTransactionUrl(registrationData.transactionHash)
   return (
     <DateLayout>
       <Typography>{t('name.registered')}</Typography>
       <Typography>{formatExpiry(registrationData.registrationDate)}</Typography>
       <Typography>{formatDateTime(registrationData.registrationDate)}</Typography>
-      <a
-        target="_blank"
-        href={makeEtherscanLink(registrationData.transactionHash, chainName)}
-        rel="noreferrer"
-        data-testid="etherscan-registration-link"
-      >
-        {t('action.view')}
-        <OutlinkSVG />
-      </a>
+      {transactionUrl && (
+        <a
+          target="_blank"
+          href={transactionUrl}
+          rel="noreferrer"
+          data-testid="etherscan-registration-link"
+        >
+          {t('action.view')}
+          <OutlinkSVG />
+        </a>
+      )}
     </DateLayout>
   )
 }

src/components/pages/profile/ProfileDetails.test.tsx

@@ -8,9 +8,9 @@ import { CacheableComponent } from '@app/components/@atoms/CacheableComponent'
 import { NFTWithPlaceholder } from '@app/components/NFTWithPlaceholder'
 import { Outlink } from '@app/components/Outlink'
 import RecordItem from '@app/components/RecordItem'
-import { useChainName } from '@app/hooks/chain/useChainName'
+import { useBlockExplorer } from '@app/hooks/chain/useBlockExplorer'
 import { useContractAddress } from '@app/hooks/chain/useContractAddress'
-import { checkETH2LDFromName, makeEtherscanLink } from '@app/utils/utils'
+import { checkETH2LDFromName } from '@app/utils/utils'
 
 import { TabWrapper } from '../../../../TabWrapper'
 
@@ -106,7 +106,7 @@ const NftBox = styled(NFTWithPlaceholder)(
 const Token = ({ name, isWrapped }: Props) => {
   const { t } = useTranslation('profile')
 
-  const networkName = useChainName()
+  const { blockExplorer, buildNftUrl } = useBlockExplorer()
   const nameWrapperAddress = useContractAddress({ contract: 'ensNameWrapper' })
   const registrarAddress = useContractAddress({ contract: 'ensBaseRegistrarImplementation' })
 
@@ -123,16 +123,12 @@ const Token = ({ name, isWrapped }: Props) => {
     <Container>
       <HeaderContainer>
         <Typography fontVariant="headingFour">{t('tabs.more.token.label')}</Typography>
-        {hasToken ? (
-          <Outlink
-            data-testid="etherscan-nft-link"
-            href={makeEtherscanLink(`${contractAddress}/${tokenId}`, networkName, 'nft')}
-          >
-            {t('etherscan', { ns: 'common' })}
+        {hasToken && blockExplorer && (
+          <Outlink data-testid="etherscan-nft-link" href={buildNftUrl(contractAddress, tokenId)!}>
+            {blockExplorer.name}
           </Outlink>
-        ) : (
-          <Tag colorStyle="greySecondary">{t('tabs.more.token.noToken')}</Tag>
         )}
+        {!hasToken && <Tag colorStyle="greySecondary">{t('tabs.more.token.noToken')}</Tag>}
       </HeaderContainer>
       {hasToken && (
         <ItemsContainer data-testid="token-ids">