From bd9c0385f5f45feb6c40be5725ca133f8d5aded9 Mon Sep 17 00:00:00 2001
From: pucedoteth <119044801+pucedoteth@users.noreply.github.com>
Date: Mon, 31 Aug 2026 23:24:08 +0200
Subject: [PATCH] fix(connect-wallet): give each network heading its own anchor
 id

`AddNetworkButton` is parameterised by `network`, but its permalink anchor is
hardcoded:

    <a href="#mainnet" id="mainnet" className="subheading-anchor" ... />

`general/connect-wallet.mdx` renders the component twice, once per network, so
both headings emit the same id. From the built page:

    $ grep -o 'id="mainnet"' .next/server/pages/general/connect-wallet.html | wc -l
    2

    ... Mainnet           <a href="#mainnet" id="mainnet" class="subheading-anchor" ...
    ... Testnet (Sepolia) <a href="#mainnet" id="mainnet" class="subheading-anchor" ...

Three things follow. The document carries a duplicate id, which is invalid
HTML and makes `getElementById` and `:target` resolve to whichever comes
first. The permalink on "Testnet (Sepolia)" navigates to Mainnet, so the
control that exists to link to a section links to the wrong one. And the
testnet section has no anchor at all, so it cannot be linked to.

Derive both from the `network` prop. Mainnet keeps `#mainnet`, so any existing
link still resolves, and the testnet heading gets `#sepolia`.

After the change the built page has one of each, on the right heading:

    ... Mainnet           <a href="#mainnet" id="mainnet" ...
    ... Testnet (Sepolia) <a href="#sepolia" id="sepolia" ...

`lint:js`, `lint:mdx` and `format:js:check` pass, and `pnpm run build`
succeeds. `spellcheck:lint` fails on main for unrelated reasons, covered in
#661.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/AddNetworkButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AddNetworkButton.tsx b/src/components/AddNetworkButton.tsx
index dd8cac80..8c0918ff 100644
--- a/src/components/AddNetworkButton.tsx
+++ b/src/components/AddNetworkButton.tsx
@@ -28,8 +28,8 @@ export const AddNetworkButton = ({
           <span>{heading}</span>
           {isSelected && <ConnectedPulse className="size-6" />}
           <a
-            href="#mainnet"
-            id="mainnet"
+            href={`#${network}`}
+            id={network}
             className="subheading-anchor"
             aria-label="Permalink for this section"
           ></a>