Skip to content

Fix profile dropdown navigation on mobile by using onClick handlers#1082

Merged
laurgk merged 15 commits intomainfrom
feature/fet-1981-profile-address-dropdowndialog-on-mobile-not-functioning
Jan 26, 2026
Merged

Fix profile dropdown navigation on mobile by using onClick handlers#1082
laurgk merged 15 commits intomainfrom
feature/fet-1981-profile-address-dropdowndialog-on-mobile-not-functioning

Conversation

@storywithoutend
Copy link
Copy Markdown
Contributor

@storywithoutend storywithoutend commented Nov 5, 2025

Went through the app looking for Etherscan links and found a bunch of links that do not change depending on whether the user is on a testnet or a mainnet. The following is a summary:

Component: ProfileButton.tsx (AddressProfileButton)
Location: Profile page → Records section → Click dropdown on ETH address
What to look for: "View on Etherscan" menu item

Component: ProfileButton.tsx (OwnerProfileButton)
Location: Profile page → Owner/Manager buttons → Click dropdown
What to look for: "View on Etherscan" menu item for address types

Component: RoleRow.tsx
Location: Profile page → Ownership tab → Roles section → Click ⋮ dropdown
What to look for: "View on Etherscan" menu item

Component: ContractSection.tsx
Location: Profile page → Ownership tab → Contract section (wrapped names only)
What to look for: NameWrapper address link

Component: Token.tsx
Location: Profile page → More tab → Token section
What to look for: "Etherscan" outlink in header (for 2LD .eth or wrapped names)

Component: RegistrationDate.tsx
Location: Profile page → More tab → Miscellaneous section

Changed dropdown items from href-based navigation to onClick handlers with router.push() and window.open() to ensure proper functionality on mobile devices. Updated Etherscan links to use the correct network (chainName) instead of hardcoded 'mainnet'.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Nov 5, 2025

Deploying ens-app-v3 with  Cloudflare Pages  Cloudflare Pages

Latest commit: 90cc320
Status: ✅  Deploy successful!
Preview URL: https://b6ae900a.ens-app-v3.pages.dev
Branch Preview URL: https://feature-fet-1981-profile-add.ens-app-v3.pages.dev

View logs

storywithoutend and others added 14 commits November 6, 2025 20:50
Fixed 18 failing tests by adding necessary mocks for useRouterWithHistory and useChainName hooks that were introduced in the ProfileButton component changes.

Changes:
- Added useRouterWithHistory and useChainName mocks to ProfileButton.test.tsx
- Added same mocks to ProfileDetails.test.tsx
- Updated test assertions to check for button elements instead of anchor tags since dropdown items now use onClick handlers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Break long onClick handler lines in ProfileButton.tsx to satisfy
prettier line length rules after merge conflict resolution.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Replace hardcoded Etherscan references with dynamic block explorer URLs
based on chain configuration. This allows the app to display correct
block explorer links for different networks (mainnet, testnets, L2s).

- Add useBlockExplorer hook with buildAddressUrl, buildTransactionUrl,
  and buildNftUrl utilities
- Update ProfileButton, Token, ContractSection, RoleRow, RegistrationDate,
  and useExpiryDetails to use the new hook
- Add viewOnBlockExplorer translation key
- Add block explorer config to localhost chain
Update tests to match component changes that now use the useBlockExplorer
hook instead of usePublicClient. Change expected translation key from
'transaction.viewEtherscan' to 'transaction.viewOnBlockExplorer' to align
with the new parameterized translation.
…le-not-functioning' of https://github.com/ensdomains/ens-app-v3 into feature/fet-1981-profile-address-dropdowndialog-on-mobile-not-functioning
@sonarqubecloud
Copy link
Copy Markdown

@laurgk laurgk merged commit 5e7a523 into main Jan 26, 2026
58 of 89 checks passed
@laurgk laurgk deleted the feature/fet-1981-profile-address-dropdowndialog-on-mobile-not-functioning branch January 26, 2026 16:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants