feat(nav): wallet status chip with address and network badge

Implements #686. Two of the four assigned issues describe components that
do not exist in this repository — see the note below and the PR body.

The nav bar's CTA was a bare "Connect Wallet" link that stayed there
whether or not a wallet was connected, so there was no persistent
indication of which account or which network was active.

WalletStatusChip replaces it:

- Truncated address via the existing shortenAddress, which already
  formats first-4/last-4 exactly as the issue specifies.
- Network badge, green for mainnet and yellow for testnet.
- Dropdown with the full address, copy, and disconnect.
- The same Connect link rendered from inside the component when no wallet
  is connected, so the nav slot is never empty and Header does not need to
  branch.

The chip reads useAccount and useChainId directly rather than taking
props. Passing the address down would leave it stale until whatever owns
that prop happened to re-render; reading wagmi state means a network
switch in the extension updates the badge immediately, which is one of
the acceptance criteria.

describeNetwork is a separate module so the classification is testable
without rendering. Anything that is not Ethereum mainnet is treated as a
testnet, and an unrecognised chain gets its own "unsupported" state
rather than being shown as a testnet — labelling a chain the app cannot
talk to as "testnet" implies the app works there. That default also means
a chain added to supportedChains later shows yellow until someone
deliberately promotes it, instead of silently rendering a green
"you are on mainnet".

Copy keeps the menu open so the copied-state tick is visible, and reverts
after 2s so the confirmation is unambiguous rather than permanent.

Verified: tsc -b --noEmit clean, 7 tests passing.

Not implemented — the underlying features are absent:

- #687 asks for an optimistic update in a useFollowCreator mutation.
  There is no follow feature anywhere in src: no hook, no service call,
  no isFollowing state, no button.
- #689 asks for tests of a transaction history filter with a type
  dropdown, date range and Reset. TransactionHistory.tsx renders a list
  from props and has no filter controls at all.

Both need the feature built first, which is a different change from the
one they describe.

Author: ayinde38

src/components/common/WalletStatusChip.tsx

@@ -0,0 +1,112 @@
+import { useAccount, useChainId, useDisconnect } from 'wagmi';
+import { Link } from 'react-router';
+import { Copy, Check, LogOut } from 'lucide-react';
+import { useState } from 'react';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { shortenAddress } from '@/lib/web3/format';
+import { describeNetwork } from '@/lib/web3/network';
+import { copyTextToClipboard } from '@/utils/clipboard.utils';
+import showToast from '@/utils/toast.util';
+
+/**
+ * Persistent wallet status chip for the nav bar (issue #686).
+ *
+ * Reads `useAccount` and `useChainId` directly rather than taking props, so the
+ * chip re-renders from wagmi's own state when the user switches network in
+ * their extension. Passing the address down would leave it stale until whatever
+ * owns that prop happened to re-render.
+ */
+export function WalletStatusChip({ className = '' }: { className?: string }) {
+	const { address, isConnected } = useAccount();
+	const chainId = useChainId();
+	const { disconnect } = useDisconnect();
+	const [copied, setCopied] = useState(false);
+
+	if (!isConnected || !address) {
+		return (
+			<Link
+				to="/connect"
+				className={`inline-flex items-center rounded-full bg-white/10 px-3 py-1.5 font-jakarta text-sm text-white transition-colors hover:bg-white/20 ${className}`}
+			>
+				Connect Wallet
+			</Link>
+		);
+	}
+
+	const network = describeNetwork(chainId);
+
+	const handleCopy = async () => {
+		try {
+			await copyTextToClipboard(address);
+		} catch {
+			showToast.error('Could not copy address');
+			return;
+		}
+		setCopied(true);
+		showToast.success('Address copied');
+		// Reverting the icon gives the user a second, unambiguous confirmation
+		// that the action completed rather than leaving a permanent tick.
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<button
+					type="button"
+					aria-label={`Wallet ${shortenAddress(address)} on ${network.label}. Open wallet menu.`}
+					className={`inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1.5 transition-colors hover:bg-white/20 ${className}`}
+				>
+					<span className="font-mono text-xs text-white">{shortenAddress(address)}</span>
+					<span
+						// aria-hidden: the network is already stated in the button's
+						// accessible name, so announcing the badge repeats it.
+						aria-hidden="true"
+						className={`rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide ring-1 ring-inset ${network.badgeClass}`}
+					>
+						{network.kind === 'unsupported' ? 'Unsupported' : network.label}
+					</span>
+				</button>
+			</DropdownMenuTrigger>
+
+			<DropdownMenuContent align="end" className="w-72">
+				<DropdownMenuLabel className="font-normal">
+					<span className="block text-xs text-muted-foreground">Connected wallet</span>
+					{/* break-all so a full address wraps instead of overflowing the menu */}
+					<span className="mt-1 block break-all font-mono text-xs">{address}</span>
+					<span className="mt-2 block text-xs text-muted-foreground">
+						Network: {network.label}
+					</span>
+				</DropdownMenuLabel>
+
+				<DropdownMenuSeparator />
+
+				<DropdownMenuItem onSelect={event => {
+					// Keep the menu open so the copied-state tick is visible.
+					event.preventDefault();
+					void handleCopy();
+				}}>
+					{copied ? <Check className="mr-2 size-4" /> : <Copy className="mr-2 size-4" />}
+					{copied ? 'Copied' : 'Copy address'}
+				</DropdownMenuItem>
+
+				<DropdownMenuItem
+					onSelect={() => disconnect()}
+					className="text-red-600 focus:text-red-600"
+				>
+					<LogOut className="mr-2 size-4" />
+					Disconnect
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
+export default WalletStatusChip;

src/components/home/Header.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import WalletStatusChip from '@/components/common/WalletStatusChip';
 import { Link } from 'react-router';
 
 const navLinks = [
@@ -65,17 +66,10 @@ export default function Header() {
 					)}
 				</nav>
 
-				{/* CTA */}
-				<Link
-					to="/connect"
-					className={`rounded-sm px-5 py-2 font-mono text-[10px] uppercase tracking-wider transition-all duration-300 ${
-						scrolled
-							? 'border border-gray-200 bg-gray-50 text-gray-600 hover:border-gray-900 hover:bg-gray-900 hover:text-white'
-							: 'border border-white/15 bg-white/[0.05] text-white/60 hover:border-white/30 hover:bg-white/[0.09] hover:text-white'
-					}`}
-				>
-					Connect Wallet
-				</Link>
+				{/* CTA — #686: a persistent wallet status chip replaces the bare
+				    Connect link. WalletStatusChip renders the same link itself when
+				    no wallet is connected, so the slot is never empty. */}
+				<WalletStatusChip />
 			</div>
 		</header>
 	);

src/lib/web3/__tests__/network.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest';
+import { mainnet, sepolia, baseSepolia, anvil } from 'wagmi/chains';
+import { describeNetwork } from '@/lib/web3/network';
+
+/** Issue #686 — network badge classification. */
+describe('describeNetwork', () => {
+	it('classifies Ethereum mainnet as mainnet with a green badge', () => {
+		const info = describeNetwork(mainnet.id);
+		expect(info.kind).toBe('mainnet');
+		expect(info.badgeClass).toContain('green');
+	});
+
+	it.each([
+		['sepolia', sepolia.id],
+		['baseSepolia', baseSepolia.id],
+		['anvil', anvil.id],
+	])('classifies %s as testnet with a yellow badge', (_name, id) => {
+		const info = describeNetwork(id);
+		expect(info.kind).toBe('testnet');
+		expect(info.badgeClass).toContain('yellow');
+	});
+
+	it('reports an unknown chain as unsupported, not testnet', () => {
+		// Showing "testnet" for a chain the app cannot talk to would imply the
+		// app works there.
+		const info = describeNetwork(999_999);
+		expect(info.kind).toBe('unsupported');
+		expect(info.label).toContain('999999');
+	});
+
+	it('handles an undefined chain id', () => {
+		expect(describeNetwork(undefined).kind).toBe('unsupported');
+	});
+
+	it('never labels a non-mainnet chain green', () => {
+		// The safe default: a chain added to supportedChains later shows as
+		// testnet until deliberately promoted, rather than silently rendering
+		// "you are on mainnet".
+		for (const id of [sepolia.id, baseSepolia.id, anvil.id, 42_161]) {
+			expect(describeNetwork(id).badgeClass).not.toContain('green');
+		}
+	});
+});

src/lib/web3/network.ts

@@ -0,0 +1,57 @@
+import { mainnet } from 'wagmi/chains';
+import { supportedChains } from '@/lib/web3/chains';
+
+/**
+ * Network classification for the nav status chip (issue #686).
+ *
+ * Only Ethereum mainnet is a live-value network among the supported chains;
+ * anvil, sepolia and baseSepolia are all test environments. Treating anything
+ * that is not mainnet as a testnet is the safe default — a new chain added to
+ * `supportedChains` shows as "testnet" until someone deliberately promotes it,
+ * rather than silently rendering a green "you are on mainnet" badge.
+ */
+export type NetworkKind = 'mainnet' | 'testnet' | 'unsupported';
+
+export interface NetworkInfo {
+	kind: NetworkKind;
+	label: string;
+	/** Tailwind classes for the badge. Green for mainnet, yellow for testnet. */
+	badgeClass: string;
+}
+
+const MAINNET_CHAIN_IDS: readonly number[] = [mainnet.id];
+
+export function describeNetwork(chainId: number | undefined): NetworkInfo {
+	if (chainId === undefined) {
+		return {
+			kind: 'unsupported',
+			label: 'Unknown network',
+			badgeClass: 'bg-red-500/15 text-red-600 ring-red-500/30',
+		};
+	}
+
+	const chain = supportedChains.find(c => c.id === chainId);
+	if (!chain) {
+		// The wallet is on a chain the app cannot talk to. Surfacing this as its
+		// own state matters: showing "testnet" would imply the app works there.
+		return {
+			kind: 'unsupported',
+			label: `Unsupported (${chainId})`,
+			badgeClass: 'bg-red-500/15 text-red-600 ring-red-500/30',
+		};
+	}
+
+	if (MAINNET_CHAIN_IDS.includes(chain.id)) {
+		return {
+			kind: 'mainnet',
+			label: chain.name,
+			badgeClass: 'bg-green-500/15 text-green-600 ring-green-500/30',
+		};
+	}
+
+	return {
+		kind: 'testnet',
+		label: chain.name,
+		badgeClass: 'bg-yellow-500/15 text-yellow-700 ring-yellow-500/30',
+	};
+}