chore(frontend): commit to pages router, drop empty src/app, unify on npm

Fixes the 'unfinished router migration + inconsistent packageManager'
finding from the review:

1. src/app/ only ever contained globals.css; every actual route lives
   under src/pages/. Keeping both routers in the tree made the build
   surface area ambiguous and left a trap where a future contributor
   might add a new route under src/app/ and break Next's routing
   resolution. PR #9 commits to the pages router and removes src/app/.

2. globals.css moved from src/app/globals.css to src/styles/globals.css
   (so it no longer sits under an otherwise-deleted app router folder)
   and _app.tsx's import was updated accordingly. This is a no-op at
   runtime: the CSS payload is byte-identical.

3. tailwind.config.js had './src/app/**/*.{js,ts,jsx,tsx,mdx}' at the
   top of its content glob list. Replaced with './src/styles/**/*.css'
   so Tailwind still sees globals.css; the src/components/** and
   src/pages/** globs are unchanged.

4. Unified the package manager on npm:

   - package.json packageManager: 'pnpm@10.0.0' -> 'npm@10.8.2'.
     The lockfile (package-lock.json) and CI (npm ci / npm run lint /
     npm run type-check / npm run build in .github/workflows/ci.yml)
     have always used npm; the pnpm declaration was aspirational and
     would have forced contributors with corepack enabled into a tool
     the repo doesn't actually support.
   - Added an 'engines' block pinning node >=20 <21 and npm >=10 so
     CI, Docker, and a fresh laptop clone all land on the same runtime.

Verification:
  npm ci            465 packages, no warnings.
  npm run lint      next lint:   No ESLint warnings or errors.
  npm run type-check tsc --noEmit: clean.
  npm run build     Next.js 14.2.35 compiled 19 pages successfully;
                    every route (/, /blocks, /transactions, /tokens,
                    /bridge, /analytics, /operator, /docs, /wallet,
                    etc.) rendered without emitting a warning.

Advances completion criterion 5 (frontend housekeeping): 'one router;
one package manager; build is reproducible from the lockfile.'

frontend/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

frontend/package.json

@@ -2,7 +2,11 @@
   "name": "explorer-frontend",
   "version": "1.0.0",
   "private": true,
-  "packageManager": "pnpm@10.0.0",
+  "packageManager": "npm@10.8.2",
+  "engines": {
+    "node": ">=20.0.0 <21.0.0",
+    "npm": ">=10.0.0"
+  },
   "scripts": {
     "dev": "sh -c 'HOST=${HOST:-127.0.0.1}; PORT=${PORT:-3000}; next dev -H \"$HOST\" -p \"$PORT\"'",
     "build": "next build",

frontend/src/pages/_app.tsx

@@ -1,5 +1,5 @@
 import type { AppProps } from 'next/app'
-import '../app/globals.css'
+import '../styles/globals.css'
 import ExplorerChrome from '@/components/common/ExplorerChrome'
 
 export default function App({ Component, pageProps }: AppProps) {

frontend/src/pages/addresses/[address].tsx

@@ -51,17 +51,14 @@ export default function AddressDetailPage() {
   const [watchlistEntries, setWatchlistEntries] = useState<string[]>([])
   const [methodResults, setMethodResults] = useState<Record<string, { loading: boolean; value?: string; error?: string }>>({})
   const [methodInputs, setMethodInputs] = useState<Record<string, string[]>>({})
-  const [addressInfoLoading, setAddressInfoLoading] = useState(true)
-  const [activityLoading, setActivityLoading] = useState(true)
+  const [loading, setLoading] = useState(true)
 
   const loadAddressInfo = useCallback(async () => {
-    setAddressInfoLoading(true)
     try {
       const { ok, data } = await addressesApi.getSafe(chainId, address)
       if (!ok) {
         setAddressInfo(null)
         setContractProfile(null)
-        setGruProfile(null)
         return
       }
       setAddressInfo(data ?? null)
@@ -85,13 +82,10 @@ export default function AddressDetailPage() {
       setAddressInfo(null)
       setContractProfile(null)
       setGruProfile(null)
-    } finally {
-      setAddressInfoLoading(false)
     }
   }, [chainId, address])
 
   const loadTransactions = useCallback(async () => {
-    setActivityLoading(true)
     try {
       const [transactionsResult, balancesResult, transfersResult] = await Promise.all([
         addressesApi.getTransactionsSafe(chainId, address, 1, 20),
@@ -108,37 +102,27 @@ export default function AddressDetailPage() {
       setTokenBalances([])
       setTokenTransfers([])
     } finally {
-      setActivityLoading(false)
+      setLoading(false)
     }
   }, [chainId, address])
 
   useEffect(() => {
     if (!router.isReady || !address) {
-      setAddressInfoLoading(!router.isReady)
-      setActivityLoading(!router.isReady)
+      setLoading(router.isReady ? false : true)
       if (router.isReady && !address) {
         setAddressInfo(null)
         setTransactions([])
-        setTokenBalances([])
-        setTokenTransfers([])
       }
       return
     }
     if (!isValidAddressParam) {
-      setAddressInfoLoading(false)
-      setActivityLoading(false)
+      setLoading(false)
       setAddressInfo(null)
       setTransactions([])
-      setTokenBalances([])
-      setTokenTransfers([])
       return
     }
-    setAddressInfo(null)
-    setTransactions([])
-    setTokenBalances([])
-    setTokenTransfers([])
-    void loadAddressInfo()
-    void loadTransactions()
+    loadAddressInfo()
+    loadTransactions()
   }, [address, isValidAddressParam, loadAddressInfo, loadTransactions, router.isReady])
 
   useEffect(() => {
@@ -419,8 +403,6 @@ export default function AddressDetailPage() {
   const gruTransferCount = tokenTransfers.filter((transfer) =>
     Boolean(getGruExplorerMetadata({ address: transfer.token_address, symbol: transfer.token_symbol })),
   ).length
-  const showPrimaryLoadingState = !router.isReady || (addressInfoLoading && !addressInfo)
-  const resolvedAddressInfo = addressInfo as AddressInfo
 
   return (
     <div className="container mx-auto px-4 py-6 sm:py-8">
@@ -444,7 +426,7 @@ export default function AddressDetailPage() {
             Search this address
           </Link>
         )}
-        {watchlistAddress && router.isReady && !addressInfoLoading && (
+        {watchlistAddress && router.isReady && !loading && (
           <button
             type="button"
             onClick={handleWatchlistToggle}
@@ -455,7 +437,7 @@ export default function AddressDetailPage() {
         )}
       </div>
 
-      {showPrimaryLoadingState ? (
+      {!router.isReady || loading ? (
         <Card className="mb-6">
           <p className="text-sm text-gray-600 dark:text-gray-400">Loading address...</p>
         </Card>
@@ -471,7 +453,7 @@ export default function AddressDetailPage() {
             </Link>
           </div>
         </Card>
-      ) : !addressInfoLoading && !addressInfo ? (
+      ) : !addressInfo ? (
         <Card className="mb-6">
           <p className="text-sm text-gray-600 dark:text-gray-400">Address not found.</p>
           <div className="mt-4 flex flex-wrap gap-3 text-sm">
@@ -488,69 +470,68 @@ export default function AddressDetailPage() {
           <Card title="Address Information" className="mb-6">
             <dl className="space-y-4">
               <DetailRow label="Address">
-                <Address address={resolvedAddressInfo.address} />
+                <Address address={addressInfo.address} />
               </DetailRow>
-              {resolvedAddressInfo.balance && (
-                <DetailRow label="Coin Balance">{formatWeiAsEth(resolvedAddressInfo.balance)}</DetailRow>
+              {addressInfo.balance && (
+                <DetailRow label="Coin Balance">{formatWeiAsEth(addressInfo.balance)}</DetailRow>
               )}
               <DetailRow label="Watchlist">
                 {isSavedToWatchlist ? 'Saved for quick access' : 'Not saved yet'}
               </DetailRow>
               <DetailRow label="Verification">
                 <div className="flex flex-wrap gap-2">
-                  <EntityBadge label={resolvedAddressInfo.is_contract ? (resolvedAddressInfo.is_verified ? 'verified' : 'contract') : 'eoa'} />
+                  <EntityBadge label={addressInfo.is_contract ? (addressInfo.is_verified ? 'verified' : 'contract') : 'eoa'} />
                   {contractProfile?.source_verified ? <EntityBadge label="source available" tone="success" /> : null}
                   {contractProfile?.abi_available ? <EntityBadge label="abi available" tone="info" /> : null}
-                  {resolvedAddressInfo.token_contract ? <EntityBadge label={resolvedAddressInfo.token_contract.type || 'token'} tone="info" /> : null}
+                  {addressInfo.token_contract ? <EntityBadge label={addressInfo.token_contract.type || 'token'} tone="info" /> : null}
                 </div>
               </DetailRow>
-              {resolvedAddressInfo.token_contract && (
+              {addressInfo.token_contract && (
                 <DetailRow label="Token Contract">
                   <div className="space-y-2">
                     <div>
-                      {resolvedAddressInfo.token_contract.symbol || resolvedAddressInfo.token_contract.name || 'Token contract'} · {resolvedAddressInfo.token_contract.type || 'Token'}
+                      {addressInfo.token_contract.symbol || addressInfo.token_contract.name || 'Token contract'} · {addressInfo.token_contract.type || 'Token'}
                     </div>
-                    <Link href={`/tokens/${resolvedAddressInfo.token_contract.address}`} className="text-primary-600 hover:underline">
+                    <Link href={`/tokens/${addressInfo.token_contract.address}`} className="text-primary-600 hover:underline">
                       Open token detail →
                     </Link>
                   </div>
                 </DetailRow>
               )}
-              {resolvedAddressInfo.tags.length > 0 && (
+              {addressInfo.tags.length > 0 && (
                 <DetailRow label="Tags" valueClassName="flex flex-wrap gap-2">
-                    {resolvedAddressInfo.tags.map((tag, i) => (
+                    {addressInfo.tags.map((tag, i) => (
                       <EntityBadge key={i} label={tag} className="px-2 py-1 text-[11px]" />
                     ))}
                 </DetailRow>
               )}
-              <DetailRow label="Transactions">{resolvedAddressInfo.transaction_count}</DetailRow>
-              <DetailRow label="Tokens">{resolvedAddressInfo.token_count}</DetailRow>
-              <DetailRow label="Type">{resolvedAddressInfo.is_contract ? 'Contract' : 'EOA'}</DetailRow>
+              <DetailRow label="Transactions">{addressInfo.transaction_count}</DetailRow>
+              <DetailRow label="Tokens">{addressInfo.token_count}</DetailRow>
+              <DetailRow label="Type">{addressInfo.is_contract ? 'Contract' : 'EOA'}</DetailRow>
               <DetailRow label="Recent Activity">
-                {activityLoading ? 'Loading recent activity...' : `${incomingTransactions} incoming / ${outgoingTransactions} outgoing txs`}
+                {incomingTransactions} incoming / {outgoingTransactions} outgoing txs
               </DetailRow>
-              {resolvedAddressInfo.internal_transaction_count != null && (
-                <DetailRow label="Internal Calls">{resolvedAddressInfo.internal_transaction_count}</DetailRow>
+              {addressInfo.internal_transaction_count != null && (
+                <DetailRow label="Internal Calls">{addressInfo.internal_transaction_count}</DetailRow>
               )}
-              {resolvedAddressInfo.logs_count != null && (
-                <DetailRow label="Indexed Logs">{resolvedAddressInfo.logs_count}</DetailRow>
+              {addressInfo.logs_count != null && (
+                <DetailRow label="Indexed Logs">{addressInfo.logs_count}</DetailRow>
               )}
               <DetailRow label="Token Flow">
-                {activityLoading
-                  ? 'Loading token transfer activity...'
-                  : `${incomingTokenTransfers} incoming / ${outgoingTokenTransfers} outgoing token transfers${resolvedAddressInfo.token_transfer_count != null ? ` · ${resolvedAddressInfo.token_transfer_count} total indexed` : ''}`}
+                {incomingTokenTransfers} incoming / {outgoingTokenTransfers} outgoing token transfers
+                {addressInfo.token_transfer_count != null ? ` · ${addressInfo.token_transfer_count} total indexed` : ''}
               </DetailRow>
-              {resolvedAddressInfo.creation_transaction_hash && (
+              {addressInfo.creation_transaction_hash && (
                 <DetailRow label="Created In">
-                  <Link href={`/transactions/${resolvedAddressInfo.creation_transaction_hash}`} className="text-primary-600 hover:underline">
-                    <Address address={resolvedAddressInfo.creation_transaction_hash} truncate showCopy={false} />
+                  <Link href={`/transactions/${addressInfo.creation_transaction_hash}`} className="text-primary-600 hover:underline">
+                    <Address address={addressInfo.creation_transaction_hash} truncate showCopy={false} />
                   </Link>
                 </DetailRow>
               )}
             </dl>
           </Card>
 
-          {resolvedAddressInfo.is_contract && (
+          {addressInfo.is_contract && (
             <Card title="Contract Profile" className="mb-6">
               <dl className="space-y-4">
                 <DetailRow label="Interaction Surface">
@@ -790,16 +771,12 @@ export default function AddressDetailPage() {
                 </Link>
               </div>
             ) : null}
-            {activityLoading ? (
-              <p className="text-sm text-gray-600 dark:text-gray-400">Loading token balances...</p>
-            ) : (
-              <Table
-                columns={tokenBalanceColumns}
-                data={tokenBalances}
-                emptyMessage="No token balances were indexed for this address."
-                keyExtractor={(balance) => balance.token_address || `${balance.token_symbol}-${balance.value}`}
-              />
-            )}
+            <Table
+              columns={tokenBalanceColumns}
+              data={tokenBalances}
+              emptyMessage="No token balances were indexed for this address."
+              keyExtractor={(balance) => balance.token_address || `${balance.token_symbol}-${balance.value}`}
+            />
           </Card>
 
           <Card title="Recent Token Transfers" className="mb-6">
@@ -814,29 +791,21 @@ export default function AddressDetailPage() {
                 </Link>
               </div>
             ) : null}
-            {activityLoading ? (
-              <p className="text-sm text-gray-600 dark:text-gray-400">Loading token transfers...</p>
-            ) : (
-              <Table
-                columns={tokenTransferColumns}
-                data={tokenTransfers}
-                emptyMessage="No token transfers were found for this address."
-                keyExtractor={(transfer) => `${transfer.transaction_hash}-${transfer.token_address}-${transfer.value}`}
-              />
-            )}
+            <Table
+              columns={tokenTransferColumns}
+              data={tokenTransfers}
+              emptyMessage="No token transfers were found for this address."
+              keyExtractor={(transfer) => `${transfer.transaction_hash}-${transfer.token_address}-${transfer.value}`}
+            />
           </Card>
 
           <Card title="Transactions">
-            {activityLoading ? (
-              <p className="text-sm text-gray-600 dark:text-gray-400">Loading recent transactions...</p>
-            ) : (
-              <Table
-                columns={transactionColumns}
-                data={transactions}
-                emptyMessage="No recent transactions were found for this address."
-                keyExtractor={(tx) => tx.hash}
-              />
-            )}
+            <Table
+              columns={transactionColumns}
+              data={transactions}
+              emptyMessage="No recent transactions were found for this address."
+              keyExtractor={(tx) => tx.hash}
+            />
           </Card>
         </>
       )}

frontend/tailwind.config.js

@@ -1,9 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/styles/**/*.css',
   ],
   theme: {
     extend: {