diff --git a/.gitignore b/.gitignore
index 844c4d1..b5f76c4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@ vendor/
 dist/
 build/
 .next/
+*.tsbuildinfo
 *.exe
 *.exe~
 *.dll
diff --git a/frontend/FRONTEND_REVIEW.md b/frontend/FRONTEND_REVIEW.md
new file mode 100644
index 0000000..d031498
--- /dev/null
+++ b/frontend/FRONTEND_REVIEW.md
@@ -0,0 +1,139 @@
+# Frontend Code Review – Explorer Monorepo
+
+**Scope:** `explorer-monorepo/frontend/`  
+**Reviewed:** Vanilla JS SPA (`public/index.html`), React/Next.js app (`src/`), services, config.  
+**Date:** 2025-02-09
+
+---
+
+## 1. Overview
+
+The frontend has two delivery paths:
+
+| Asset | Purpose | Deployed |
+|-------|--------|----------|
+| **`public/index.html`** | Single-page explorer (Blocks, Transactions, Bridge, WETH, search, wallet connect). Vanilla JS, ~4.2k lines. | Yes (VMID 5000, https://explorer.d-bis.org) |
+| **`src/`** (Next.js) | React app (blocks, transactions, addresses, search, wallet). Uses Blockscout-style API. | No (dev/build only) |
+
+---
+
+## 2. Vanilla JS SPA (`public/index.html`)
+
+### 2.1 Security
+
+**Good:**
+- **`escapeHtml()`** is used for error messages, revert reasons, method names, ABI/bytecode, token names/symbols, NFT metadata, and other user/API-derived strings before `innerHTML`. Reduces XSS from API or user input.
+- **CSP** in `<meta>` restricts script/style/font/connect sources; comment documents `unsafe-eval` for ethers v5 UMD.
+- **Credentials:** `fetchAPI` uses `credentials: 'omit'` for API calls.
+- **Wallet:** No private keys or secrets in code; MetaMask/ethers used for signing.
+
+**Improve:**
+- **Defense in depth for hashes/addresses:** Any API-derived string (e.g. `hash`, `from`, `to`, `address`) that is interpolated into `innerHTML` should be escaped. Currently:
+  - Block cards: `shortenHash(hash)` and block number are injected without `escapeHtml`. Block numbers are numeric; hashes are usually hex from a trusted API, but escaping would harden against a compromised or malicious API.
+  - Breadcrumbs: `shortenHash(identifier)` and `identifier` in `href="#/address/' + identifier + '"` – if `identifier` can contain `'` or `"`, it could break attributes or enable injection. Recommend `escapeHtml(shortenHash(hash))` for display and sanitize/validate for attributes.
+- **`shortenHash`:** Only truncates; does not strip HTML. Use `escapeHtml(shortenHash(hash))` wherever the result is used in HTML.
+
+### 2.2 Correctness & Robustness
+
+**Good:**
+- **Navigation:** Re-entrancy guard (`_inNavHandler`) and “showView first, then set hash” prevent the previous infinite recursion from hashchange.
+- **`applyHashRoute`:** Uses `currentView` and `currentDetailKey` so the same view/detail is not re-applied unnecessarily.
+- **`fetchAPI`:** Uses `AbortController` and 15s timeout; `AbortError` is handled in retry logic.
+- **`fetchAPIWithRetry`:** Exponential backoff; retries on timeout/5xx/network; does not retry on non-retryable errors.
+- **RPC fallback:** When Blockscout API fails, blocks/transactions can be loaded via `rpcCall` (e.g. `eth_blockNumber`, `eth_getBlockByNumber`).
+- **Validation:** `safeBlockNumber`, `safeTxHash`, `safeAddress` used before detail views and in retry buttons.
+- **Wrap/Unwrap:** Balance checks and `callStatic` simulation before deposit/withdraw; user rejection vs contract error distinguished in messages.
+
+**Improve:**
+- **`rpcCall`:** Uses a single RPC URL; does not use `getRpcUrl()` for failover. Consider using `getRpcUrl()` for critical RPC calls so the app benefits from the same failover as elsewhere.
+- **Memory/cleanup:** `requestAnimationFrame(animateScroll)` in the blocks scroll runs indefinitely. On view change, the loop is not cancelled; consider storing the frame id and cancelling in a cleanup when leaving the blocks view.
+- **Breadcrumb `identifier`:** In `updateBreadcrumb`, `identifier` is used in `href="#/address/' + identifier + '"`. If `identifier` contains `'`, the attribute can break. Prefer escaping or using `encodeURIComponent` for path segments.
+
+### 2.3 Structure & Maintainability
+
+- **Single file:** ~4.2k lines in one HTML file makes navigation and testing harder. Consider splitting script into logical modules (e.g. API, nav, views, wallet) and bundling, or at least grouping related functions and marking sections.
+- **Duplicate logic:** Block card HTML is built in multiple places (home stats area, blocks list, block detail). A single `createBlockCard`-style helper (or shared template) would reduce drift and bugs.
+- **Magic numbers:** Timeouts (15s, 5s), retry counts (3), and delays are literal; consider named constants at the top of the script.
+- **Console:** Several `console.log`/`console.warn`/`console.error` calls are useful for debugging but could be gated by a `DEBUG` flag or removed for production if desired.
+
+### 2.4 Accessibility & UX
+
+- Nav links use `onclick` and `aria-label` where checked; focus and keyboard flow should be verified (e.g. tab order, Enter to activate).
+- Error messages and retry buttons are visible; consider ensuring they are announced (e.g. live region) for screen readers.
+- Dark theme is supported and persisted in `localStorage`.
+
+---
+
+## 3. React/Next.js App (`src/`)
+
+### 3.1 Security
+
+- **React escaping:** Components render props as text by default, so no raw `dangerouslySetInnerHTML` was found; Address, Card, Table, etc. are safe from XSS in normal use.
+- **API client:** Uses `localStorage.getItem('api_key')` for `X-API-Key`; ensure key is not exposed in logs or error messages.
+- **Env:** `NEXT_PUBLIC_*` is appropriate for client-side config; no secrets in frontend code.
+
+### 3.2 Data Fetching & API Shape
+
+**Issues:**
+- **`addresses/[address].tsx`:** Uses `fetch()` then `response.json()` without checking `response.ok`. On 4xx/5xx, `data` may be an error body and `setAddressInfo(data.data)` can set invalid state. Recommend: check `response.ok`, handle errors, and only set state on success.
+- **`blocksApi.list`:** Returns `ApiResponse<Block[]>` (expects `{ data: Block[] }`). If the backend returns a different shape (e.g. `{ items: [] }`), `response.data` may be `undefined` and `setBlocks(response.data)` can lead to runtime errors in `blocks.map()`. Align client with actual API response or normalize in the client.
+- **Home page:** `loadRecentBlocks()` uses `blocksApi.list`; same shape assumption as above. `loadStats()` is a placeholder (no real API call).
+
+### 3.3 Correctness
+
+- **useEffect deps:** In `page.tsx`, `useEffect(..., [])` calls `loadStats` and `loadRecentBlocks` which are recreated each render. This is fine with empty deps (run once). In `blocks/index.tsx` and `transactions/index.tsx`, deps are `[page]`; `loadBlocks`/`loadTransactions` are not in the dependency array, which is intentional to avoid unnecessary runs; no bug found.
+- **Block detail:** `blocks/[number].tsx` uses `parseInt((params?.number as string) ?? '0')` – invalid or missing number becomes `NaN`/`0`; the API may return 404. Consider validating and showing a clear “Invalid block number” message.
+- **Table key:** `Table.tsx` uses `key={rowIndex}`; if the list is reordered or filtered, prefer a stable key (e.g. `block.number`, `tx.hash`).
+
+### 3.4 Consistency & Gaps
+
+- **Routing:** Next.js app uses file-based routes (`/blocks`, `/transactions`, `/addresses/[address]`). The deployed SPA uses hash routing (`#/blocks`, `#/address/0x...`). They are separate; no conflict, but be aware that deep links differ between the two frontends.
+- **API base:** React app uses `NEXT_PUBLIC_API_URL` (default `http://localhost:8080`). The vanilla SPA uses same-origin `/api` or Blockscout API. Ensure backend and env are aligned when running the Next app against a real API.
+- **blocks API:** Only blocks are implemented in `services/api/`; transactions and addresses use raw `fetch` in pages. Consider moving to shared API modules and the same client for consistency and error handling.
+
+---
+
+## 4. Services & Config
+
+### 4.1 API Client (`src/services/api/client.ts`)
+
+- Axios instance with timeout (30s), JSON headers, and optional `X-API-Key` from `localStorage`.
+- Response interceptor rejects with `error.response.data`; type is `ApiError`. Callers should handle both API error shape and network errors.
+- **Note:** Used by blocks API only; other pages use `fetch` directly.
+
+### 4.2 Blocks API (`src/services/api/blocks.ts`)
+
+- Builds query params correctly; uses `apiClient.get<Block[]>`.
+- Return type `ApiResponse<Block[]>` assumes backend returns `{ data: T }`. If backend is Blockscout-style (`items`, etc.), either add an adapter or document the expected backend contract.
+
+### 4.3 Next.js Config
+
+- `reactStrictMode: true`, `output: 'standalone'`.
+- `NEXT_PUBLIC_API_URL` and `NEXT_PUBLIC_CHAIN_ID` defaulted in `next.config.js`; can be overridden by env.
+
+---
+
+## 5. Recommendations Summary
+
+| Priority | Item | Action |
+|----------|------|--------|
+| **P1** | Address page fetch | In `addresses/[address].tsx`, check `response.ok` and handle non-2xx before parsing JSON and setting state. |
+| **P1** | API response shape | Confirm backend response shape for blocks (and any shared APIs). Normalize to `{ data }` in client or document and handle `items`/other shapes. |
+| **P2** | XSS hardening (SPA) | Use `escapeHtml(shortenHash(hash))` (and escape other API-derived strings) wherever content is written with `innerHTML`. Escape or encode `identifier` in breadcrumb `href`. |
+| **P2** | RPC failover | Use `getRpcUrl()` inside `rpcCall()` (or for critical paths) so RPC failover is consistent. |
+| **P2** | Blocks scroll animation | Cancel `requestAnimationFrame` when leaving the blocks view (e.g. in a cleanup or when switching view). |
+| **P3** | SPA structure | Split script into modules or clearly grouped sections; extract shared constants and block-card markup. |
+| **P3** | Table keys | Use stable keys (e.g. `block.number`, `tx.hash`) in list components instead of index. |
+| **P3** | Block number validation | In `blocks/[number].tsx`, validate `params.number` and show a clear message for invalid or missing block number. |
+
+---
+
+## 6. Files Reviewed
+
+- `public/index.html` – full read and grep for escapeHtml, innerHTML, fetch, navigation, wallet.
+- `src/app/layout.tsx`, `src/app/page.tsx`, `src/app/wallet/page.tsx`
+- `src/pages/_app.tsx`, `src/pages/blocks/index.tsx`, `src/pages/blocks/[number].tsx`, `src/pages/transactions/index.tsx`, `src/pages/transactions/[hash].tsx`, `src/pages/addresses/[address].tsx`, `src/pages/search/index.tsx`
+- `src/components/common/Card.tsx`, `Button.tsx`, `Table.tsx`
+- `src/components/blockchain/Address.tsx`, `src/components/wallet/AddToMetaMask.tsx`
+- `src/services/api/client.ts`, `src/services/api/blocks.ts`
+- `package.json`, `next.config.js`
diff --git a/frontend/FRONTEND_TASKS_AND_REVIEW.md b/frontend/FRONTEND_TASKS_AND_REVIEW.md
new file mode 100644
index 0000000..33e664f
--- /dev/null
+++ b/frontend/FRONTEND_TASKS_AND_REVIEW.md
@@ -0,0 +1,140 @@
+# Frontend: Full Task List (Critical → Optional) + Detail Review
+
+**Full parallel mode:** Tasks in the same tier can be executed in parallel by different owners. Dependencies are called out where a later task requires an earlier one.
+
+---
+
+## Quick reference (all tasks)
+
+| Priority | ID | One-line description |
+|----------|----|----------------------|
+| Critical | C1 | Address page: check `response.ok` before setting state |
+| Critical | C2 | Transaction detail page: check `response.ok` before setting state |
+| Critical | C3 | Search page: check `response.ok` before setting results |
+| Critical | C4 | Blocks API: confirm/normalize backend response shape `{ data }` |
+| High | H1 | SPA: `escapeHtml(shortenHash(...))` and escape API text in all innerHTML |
+| High | H2 | SPA: safe breadcrumb/href (encode identifier, contract, addr in URLs) |
+| High | H3 | SPA: escape dynamic values in all onclick attributes |
+| High | H4 | SPA: use `getRpcUrl()` in `rpcCall()` for failover |
+| High | H5 | SPA: cancel blocks scroll `requestAnimationFrame` on view change |
+| Medium | M1 | React: validate block number in `blocks/[number].tsx` |
+| Medium | M2 | React: stable list keys (Table + search results) |
+| Medium | M3 | SPA: named constants for timeouts/retries |
+| Medium | M4 | Blocks API: normalizer for backend shape (if needed after C4) |
+| Low | L1 | SPA: extract shared block card markup helper |
+| Low | L2 | SPA: DEBUG flag for console logs |
+| Low | L3 | A11y: live region for error messages |
+| Low | L4 | React: shared API modules for transactions/addresses |
+
+---
+
+## Part 1: Task List (Critical → Optional)
+
+### CRITICAL (P1) – Fix first; blocks correct behavior or security
+
+| ID | Task | Owner / parallel | Notes |
+|----|------|------------------|--------|
+| **C1** | **Address page: check `response.ok`** – In `src/pages/addresses/[address].tsx`, before `response.json()` and `setAddressInfo(data.data)`, check `response.ok`. On non-2xx: do not set state; set error/empty and optionally `setLoading(false)`. | 1 | Prevents treating error body as address data. |
+| **C2** | **Transaction detail page: check `response.ok`** – In `src/pages/transactions/[hash].tsx`, same pattern: check `response.ok` before parsing and `setTransaction(data.data)`. Handle 404/5xx without setting transaction state. | 1 | Same bug as C1. |
+| **C3** | **Search page: check `response.ok`** – In `src/pages/search/index.tsx`, check `response.ok` before `setResults(data.results \|\| [])`. On failure, set empty results and optionally show a message. | 1 | Avoids showing error payload as results. |
+| **C4** | **Blocks API response shape** – Confirm backend for `/api/v1/blocks` returns `{ data: Block[] }` (or document contract). If it returns `{ items: [] }` or similar, add a normalizer in `src/services/api/blocks.ts` (e.g. `response.data = response.items ?? response.data`) so `response.data` is always an array for list. | 1 | Prevents `blocks.map` / `recentBlocks.map` runtime errors. |
+
+**Parallel:** C1, C2, C3, C4 can all be done in parallel.
+
+---
+
+### HIGH (P2) – Security and correctness; no known exploit but reduces risk
+
+| ID | Task | Owner / parallel | Notes |
+|----|------|------------------|--------|
+| **H1** | **SPA: escape all `shortenHash(...)` in `innerHTML`** – Every place that assigns to `innerHTML` and includes `shortenHash(hash|address|from|to|identifier|...)` must use `escapeHtml(shortenHash(...))`. Locations (grep): breadcrumbs (2243, 2247, 2254, 2259, 2280, 2284, 2288, 2292), block cards (2628), transaction rows (2794–2796, 2909, 2994–2996), bridge table (3108, 3144), internal tx/logs (3526, 3543), token balances (3746), address internal txs (3774), address tx table (3832), token detail (3887, 3905), NFT detail (3935, 3943), statusEl (1639, 1722). Also escape any other API-derived text in those same innerHTML strings (e.g. `displayBalance`, `val` if from API). | 1 | XSS defense in depth. |
+| **H2** | **SPA: safe breadcrumb and `href` attributes** – In `updateBreadcrumb`, ensure `identifier` in `href="#/address/' + identifier + '"` cannot break the attribute. Use a safe encoding (e.g. `encodeURIComponent(identifier)` for the path segment, or ensure identifier is validated hex address). Same for token/nft breadcrumb links. | 1 | Prevents attribute breakout. |
+| **H3** | **SPA: safe `onclick` attribute values** – Every `onclick="showAddressDetail('...')"` / `showBlockDetail` / `showTransactionDetail` that injects a dynamic value (address, hash, block number) must use an escaped value so a quote in the value cannot break the attribute. Use `escapeHtml(address)` (or equivalent) for the value inside the quoted string. Applies to all dynamic onclick handlers in index.html (see grep list: 3108, 3144, 3526, 3543, 3638, 3746, 3774, 3832, 3887, 3905, 3935, 3943, and template literals with `${address}`, `${hash}`, `${from}`, `${to}`, etc.). | 1 | Prevents attribute injection / XSS. |
+| **H4** | **RPC failover in `rpcCall`** – In `public/index.html`, change `rpcCall` to use `getRpcUrl()` (await) instead of a single RPC_IP/RPC_FQDN, so RPC calls benefit from the same health-check and failover as elsewhere. | 1 | Consistency and resilience. |
+| **H5** | **Blocks scroll: cancel `requestAnimationFrame` on view change** – When leaving the blocks view (or when `loadLatestBlocks` runs again), cancel the animation loop. Store the `requestAnimationFrame` id (e.g. in a variable or on `scrollContainer.dataset`) and call `cancelAnimationFrame(id)` when switching view or before re-running the block list render. | 1 | Avoids leaking animation loop and unnecessary work. |
+
+**Parallel:** H1, H2, H3 can be done together; H4 and H5 are independent and can run in parallel with each other and with H1–H3.
+
+---
+
+### MEDIUM (P3) – Quality and maintainability
+
+| ID | Task | Owner / parallel | Notes |
+|----|------|------------------|--------|
+| **M1** | **Block number validation (React)** – In `src/pages/blocks/[number].tsx`, validate `params.number`: reject non-numeric or NaN; show a clear “Invalid block number” (or “Block number required”) message instead of calling API with 0. | 1 | Better UX. |
+| **M2** | **Stable list keys (React)** – In `src/components/common/Table.tsx`, accept an optional `keyExtractor` prop; in pages that use Table (e.g. addresses, blocks), pass a stable key (e.g. `tx.hash`, `block.number`). In search results, use `key={result.data?.hash ?? result.data?.address ?? index}` instead of `key={index}`. | 1 | Avoids React reconciliation issues. |
+| **M3** | **SPA: named constants** – In `public/index.html`, replace magic numbers with named constants at the top of the script: e.g. `FETCH_TIMEOUT_MS = 15000`, `RPC_HEALTH_TIMEOUT_MS = 5000`, `FETCH_MAX_RETRIES = 3`, `RETRY_DELAY_MS = 1000`. | 1 | Maintainability. |
+| **M4** | **API response normalization (blocks)** – If backend is Blockscout-style, add in `blocks.ts` (or client): normalize `{ items: [] }` → `{ data: [] }` so all consumers get a consistent shape without each page handling both. | 1 | Depends on C4 decision; can follow C4. |
+
+**Parallel:** M1, M2, M3, M4 can be done in parallel (M4 after C4 if adding normalizer).
+
+---
+
+### LOW / OPTIONAL (P4)
+
+| ID | Task | Owner / parallel | Notes |
+|----|------|------------------|--------|
+| **L1** | **SPA: extract shared block card markup** – Introduce a single helper (e.g. `createBlockCardHtml(block, options)`) used by home stats, blocks list, and any other block card HTML to reduce duplication. | 1 | Maintainability. |
+| **L2** | **SPA: DEBUG flag for console** – Gate `console.log`/`console.warn` (and optionally `console.error`) behind a flag (e.g. `window.DEBUG_EXPLORER`) so production builds can suppress verbose logs. | 1 | Optional. |
+| **L3** | **A11y: live region for errors** – Add an `aria-live="polite"` (or `assertive`) region for error messages and retry buttons so screen readers announce them. | 1 | Accessibility. |
+| **L4** | **Shared API modules (React)** – Add `src/services/api/transactions.ts` and `addresses.ts` (or similar) using the same `apiClient`, and refactor `addresses/[address].tsx` and `transactions/[hash].tsx` to use them with consistent error handling. | 1 | Consistency. |
+
+**Parallel:** L1–L4 independent; all optional.
+
+---
+
+## Part 2: Detail Review – Misses, Gaps, Additional Fixes
+
+### 2.1 Additional React fetch bugs (misses from original review)
+
+- **`transactions/[hash].tsx`** – Same pattern as addresses: no `response.ok` check; `setTransaction(data.data)` can run on 4xx/5xx. **Action:** Add to critical list as **C2** (done above).
+- **`search/index.tsx`** – No `response.ok` check; `setResults(data.results || [])` can set error payload. **Action:** Add as **C3** (done above).
+
+### 2.2 SPA: Gaps in escapeHtml / innerHTML
+
+- **Wallet status (1639, 1722)** – `statusEl.innerHTML` uses `shortenHash(userAddress)`. If `userAddress` were ever from an untrusted source, it should be escaped. **Action:** Use `escapeHtml(shortenHash(userAddress))` for consistency (in **H1**).
+- **loadGasAndNetworkStats (2509)** – `el.innerHTML` uses `gasGwei`, `blockTimeSec`, `tps`. These are from API; escaping is low risk but recommended for defense in depth. **Action:** Escape these values (in **H1** or small follow-up).
+- **Token list: `#/token/' + contract`** – The `contract` in `href="#/token/' + contract + '"` can break the attribute if it contains a quote. **Action:** Encode or validate; include in **H2** (safe href/attributes).
+- **External link (3800)** – `'https://explorer.d-bis.org/address/' + addr + '/contract'` – `addr` should be validated or encoded so the URL cannot be malformed. **Action:** Use `encodeURIComponent(addr)` for the path segment (in **H2**).
+
+### 2.3 SPA: onclick and attribute injection
+
+- **All dynamic onclick handlers** – Values like `address`, `hash`, `from`, `to`, `block`, `txHash`, `contract`, `contractAddress` are interpolated into onclick strings. A single quote in any of them breaks the attribute and can lead to script execution. **Action:** Consistently use `escapeHtml(value)` for every dynamic part inside the quoted argument (in **H3**). Example: `onclick="showAddressDetail('" + escapeHtml(address) + "')"` (and equivalent for template literals).
+
+### 2.4 SPA: requestAnimationFrame leak (clarification)
+
+- The blocks scroll animation starts inside `loadLatestBlocks()` and is never cancelled. When the user navigates to Transactions or Home, the blocks view is hidden but the animation loop keeps running. **Action:** Store the rAF id (e.g. `let scrollAnimationId` in a scope that can be cleared when switching view). When `switchToView` or the blocks view is left, or before the next `loadLatestBlocks` run, call `cancelAnimationFrame(scrollAnimationId)`. Optionally clear the interval/timeout if any. **In task H5.**
+
+### 2.5 React: API shape and Table key (additional)
+
+- **Home page `recentBlocks`** – Uses `response.data` from `blocksApi.list`; if `response.data` is undefined (e.g. backend returns `items`), `recentBlocks.map` will throw. **Action:** Covered by **C4** and **M4** (normalize in client).
+- **Table key** – Using `rowIndex` is acceptable for static lists but can cause unnecessary re-renders or focus issues when list order changes. **Action:** **M2** (stable keys).
+- **Search results key** – `key={index}` is weak when results can change; prefer `key={result.data?.hash ?? result.data?.address ?? result.data?.number ?? index}`. **Action:** Include in **M2**.
+
+### 2.6 Additional checks performed
+
+- **rpcCall** – Confirmed it does not use `getRpcUrl()`; single URL used. **Action:** **H4**.
+- **Breadcrumb identifier** – Multiple places use `identifier` in innerHTML and in `href`; both display and href need to be safe. **Action:** **H1**, **H2**.
+- **No other raw `dangerouslySetInnerHTML`** in React components; no additional React XSS findings.
+- **transactions/[hash].tsx** – No validation of `hash` format (e.g. 0x + 64 hex); invalid hash could trigger odd API/UI behavior. Optional: add validation and show “Invalid transaction hash” (can be P4).
+
+### 2.7 Summary of additional fixes required
+
+| Category | Fix |
+|----------|-----|
+| React fetch | C2 (transaction detail), C3 (search) – check `response.ok` and handle errors. |
+| SPA innerHTML | H1 – include statusEl (1639, 1722), loadGasAndNetworkStats (2509); escape all shortenHash and API-derived text. |
+| SPA href/attributes | H2 – encode/validate `identifier` and `contract` in hrefs; encode `addr` in external URL. |
+| SPA onclick | H3 – escape every dynamic value in onclick (address, hash, from, to, block, txHash, contract, etc.). |
+| SPA rAF | H5 – store and cancel requestAnimationFrame when leaving blocks view or re-running loadLatestBlocks. |
+| Optional | Validate tx hash in transactions/[hash].tsx (P4); add transactions/addresses API modules (L4). |
+
+---
+
+## Part 3: Execution Order (Full Parallel Mode)
+
+- **Wave 1 (all parallel):** C1, C2, C3, C4, H1, H2, H3, H4, H5.
+- **Wave 2 (after C4/M4 if normalizer added):** M1, M2, M3, M4.
+- **Wave 3 (optional):** L1, L2, L3, L4.
+
+No task in Wave 2 or 3 blocks another within the same wave; only M4 may depend on C4’s decision (normalize in client vs. backend contract).
diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png
new file mode 100644
index 0000000..5804ed0
Binary files /dev/null and b/frontend/public/apple-touch-icon.png differ
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
new file mode 100644
index 0000000..f682711
Binary files /dev/null and b/frontend/public/favicon.ico differ
diff --git a/frontend/public/icon.svg b/frontend/public/icon.svg
new file mode 100644
index 0000000..455d299
--- /dev/null
+++ b/frontend/public/icon.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea"/>
+      <stop offset="100%" style="stop-color:#764ba2"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="12" fill="url(#bg)"/>
+  <!-- Magnifying glass (scout) -->
+  <circle cx="28" cy="28" r="14" fill="none" stroke="white" stroke-width="4"/>
+  <line x1="38" y1="38" x2="50" y2="50" stroke="white" stroke-width="4" stroke-linecap="round"/>
+  <!-- Small block link accent -->
+  <rect x="12" y="44" width="10" height="10" rx="2" fill="rgba(255,255,255,0.5)"/>
+</svg>
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 653b36a..5cc4c95 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -756,14 +756,14 @@
             </div>
             <button type="button" class="nav-toggle" id="navToggle" aria-label="Toggle menu" aria-expanded="false" onclick="toggleNavMenu()"><i class="fas fa-bars" id="navToggleIcon"></i></button>
             <ul class="nav-links" id="navLinks">
-                <li><a href="#" onclick="showHome(); return false;" aria-label="Navigate to home page"><i class="fas fa-home" aria-hidden="true"></i> Home</a></li>
-                <li><a href="#" onclick="showBlocks(); return false;" aria-label="View all blocks"><i class="fas fa-cubes" aria-hidden="true"></i> Blocks</a></li>
-                <li><a href="#" onclick="showTransactions(); return false;" aria-label="View all transactions"><i class="fas fa-exchange-alt" aria-hidden="true"></i> Transactions</a></li>
-                <li><a href="#" onclick="showBridgeMonitoring(); return false;" aria-label="View bridge monitoring"><i class="fas fa-bridge" aria-hidden="true"></i> Bridge</a></li>
-                <li><a href="#" onclick="showWETHUtilities(); return false;" aria-label="View WETH utilities"><i class="fas fa-coins" aria-hidden="true"></i> WETH</a></li>
-                <li><a href="#" onclick="focusSearchWithHint('token'); return false;" aria-label="Look up a token by address or symbol"><i class="fas fa-tag" aria-hidden="true"></i> Tokens</a></li>
-                <li id="analyticsNav" style="display: none;"><a href="#" onclick="showAnalytics(); return false;" aria-label="View analytics"><i class="fas fa-chart-line" aria-hidden="true"></i> Analytics</a></li>
-                <li id="operatorNav" style="display: none;"><a href="#" onclick="showOperator(); return false;" aria-label="View operator panel"><i class="fas fa-cog" aria-hidden="true"></i> Operator</a></li>
+                <li><a href="#/home" onclick="showHome();" aria-label="Navigate to home page"><i class="fas fa-home" aria-hidden="true"></i> Home</a></li>
+                <li><a href="#/blocks" onclick="showBlocks();" aria-label="View all blocks"><i class="fas fa-cubes" aria-hidden="true"></i> Blocks</a></li>
+                <li><a href="#/transactions" onclick="showTransactions();" aria-label="View all transactions"><i class="fas fa-exchange-alt" aria-hidden="true"></i> Transactions</a></li>
+                <li><a href="#/bridge" onclick="showBridgeMonitoring();" aria-label="View bridge monitoring"><i class="fas fa-bridge" aria-hidden="true"></i> Bridge</a></li>
+                <li><a href="#/weth" onclick="showWETHUtilities();" aria-label="View WETH utilities"><i class="fas fa-coins" aria-hidden="true"></i> WETH</a></li>
+                <li><a href="#/tokens" onclick="if(typeof focusSearchWithHint==='function')focusSearchWithHint('token');else showHome();" aria-label="View token list"><i class="fas fa-tag" aria-hidden="true"></i> Tokens</a></li>
+                <li id="analyticsNav" style="display: none;"><a href="#/analytics" onclick="showAnalytics();" aria-label="View analytics"><i class="fas fa-chart-line" aria-hidden="true"></i> Analytics</a></li>
+                <li id="operatorNav" style="display: none;"><a href="#/operator" onclick="showOperator();" aria-label="View operator panel"><i class="fas fa-cog" aria-hidden="true"></i> Operator</a></li>
             </ul>
             <div style="display: flex; align-items: center; gap: 0.75rem;">
                 <button id="themeToggle" type="button" class="btn btn-primary" onclick="toggleDarkMode()" style="padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.2);" aria-label="Toggle dark mode" title="Toggle dark/light theme"><i class="fas fa-moon" id="themeIcon"></i></button>
@@ -777,6 +777,7 @@
         </div>
     </nav>
 
+    <div id="explorerLiveRegion" aria-live="polite" aria-atomic="true" class="sr-only" role="status"></div>
     <div class="container" id="mainContent">
         <!-- Home View -->
         <div id="homeView">
@@ -1056,19 +1057,57 @@
 
     <script>
         const API_BASE = '/api';
+        const FETCH_TIMEOUT_MS = 15000;
+        const RPC_HEALTH_TIMEOUT_MS = 5000;
+        const FETCH_MAX_RETRIES = 3;
+        const RETRY_DELAY_MS = 1000;
+        window.DEBUG_EXPLORER = false;
+        (function() {
+            var _log = console.log, _warn = console.warn;
+            console.log = function() { if (window.DEBUG_EXPLORER) _log.apply(console, arguments); };
+            console.warn = function() { if (window.DEBUG_EXPLORER) _warn.apply(console, arguments); };
+        })();
         // RPC/WebSocket: VMID 2201 (public RPC). FQDN when HTTPS (avoids mixed content); IP when HTTP (e.g. http://192.168.11.140)
         const RPC_IP = 'http://192.168.11.221:8545';   // Chain 138 - VMID 2201 besu-rpc-public-1
         const RPC_WS_IP = 'ws://192.168.11.221:8546';
         const RPC_FQDN = 'https://rpc-http-pub.d-bis.org';   // VMID 2201 - HTTPS
         const RPC_WS_FQDN = 'wss://rpc-ws-pub.d-bis.org';
+        const RPC_URLS = (typeof window !== 'undefined' && window.location && window.location.protocol === 'https:')
+            ? [RPC_FQDN] : [RPC_IP];
         const RPC_URL = (typeof window !== 'undefined' && window.location && window.location.protocol === 'https:') ? RPC_FQDN : RPC_IP;
         const RPC_WS_URL = (typeof window !== 'undefined' && window.location && window.location.protocol === 'https:') ? RPC_WS_FQDN : RPC_WS_IP;
+        let _rpcUrlIndex = 0;
+        let _blocksScrollAnimationId = null;
+        async function getRpcUrl() {
+            if (RPC_URLS.length <= 1) return RPC_URLS[0];
+            const ac = new AbortController();
+            const t = setTimeout(() => ac.abort(), RPC_HEALTH_TIMEOUT_MS);
+            for (let i = 0; i < RPC_URLS.length; i++) {
+                const url = RPC_URLS[(_rpcUrlIndex + i) % RPC_URLS.length];
+                try {
+                    const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ jsonrpc: '2.0', method: 'eth_blockNumber', params: [], id: 1 }), signal: ac.signal });
+                    clearTimeout(t);
+                    if (r.ok) { _rpcUrlIndex = (_rpcUrlIndex + i) % RPC_URLS.length; return url; }
+                } catch (e) {}
+            }
+            clearTimeout(t);
+            return RPC_URLS[_rpcUrlIndex % RPC_URLS.length];
+        }
         const CHAIN_ID = 138; // Hyperledger Besu ChainID 138
+        async function rpcCall(method, params) {
+            const url = await getRpcUrl();
+            const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ jsonrpc: '2.0', method, params: params || [], id: 1 }) });
+            const j = await r.json();
+            if (j.error) throw new Error(j.error.message || 'RPC error');
+            return j.result;
+        }
         const BLOCKSCOUT_API_ORIGIN = 'https://explorer.d-bis.org/api'; // fallback when not on explorer host
         // Origins that serve the explorer (FQDN or VM IP): use explicit same-origin API URL so nginx proxy is used
         const EXPLORER_ORIGINS = ['https://explorer.d-bis.org', 'http://192.168.11.140', 'https://192.168.11.140'];
         const BLOCKSCOUT_API = (typeof window !== 'undefined' && window.location && EXPLORER_ORIGINS.includes(window.location.origin)) ? (window.location.origin + '/api') : BLOCKSCOUT_API_ORIGIN;
         let currentView = 'home';
+        let currentDetailKey = '';
+        var _inNavHandler = false; // re-entrancy guard: prevents hashchange -> applyHashRoute -> stub from recursing
         let provider = null;
         let signer = null;
         let userAddress = null;
@@ -1077,18 +1116,34 @@
         let userTrack = 1; // Default to Track 1 (public)
         let authToken = null;
         
-        // Expose nav/detail handlers on window so inline onclick handlers can find them (avoid ReferenceError)
-        window.showHome = function() {};
-        window.showBlocks = function() {};
-        window.showTransactions = function() {};
-        window.showBridgeMonitoring = function() {};
-        window.showWETHUtilities = function() {};
+        // View switch helper: works even if rest of script fails. Do NOT set location.hash here (would fire hashchange and cause infinite recursion).
+        function switchToView(viewName) {
+            if (viewName !== 'blocks' && _blocksScrollAnimationId != null) {
+                cancelAnimationFrame(_blocksScrollAnimationId);
+                _blocksScrollAnimationId = null;
+            }
+            currentView = viewName;
+            var detailViews = ['blockDetail','transactionDetail','addressDetail','tokenDetail','nftDetail'];
+            if (detailViews.indexOf(viewName) === -1) currentDetailKey = '';
+            var homeEl = document.getElementById('homeView');
+            if (homeEl) homeEl.style.display = viewName === 'home' ? 'block' : 'none';
+            document.querySelectorAll('.detail-view').forEach(function(el) { el.classList.remove('active'); });
+            var target = document.getElementById(viewName + 'View');
+            if (target) target.classList.add('active');
+        }
+        // Expose nav handlers: re-entrancy guard prevents hashchange from calling stub again while we're inside
+        window.showHome = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('home'); if (window._showHome) window._showHome(); } finally { _inNavHandler = false; } };
+        window.showBlocks = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('blocks'); if (window._showBlocks) window._showBlocks(); } finally { _inNavHandler = false; } };
+        window.showTransactions = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('transactions'); if (window._showTransactions) window._showTransactions(); } finally { _inNavHandler = false; } };
+        window.showBridgeMonitoring = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('bridge'); if (window._showBridgeMonitoring) window._showBridgeMonitoring(); } finally { _inNavHandler = false; } };
+        window.showWETHUtilities = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('weth'); if (window._showWETHUtilities) window._showWETHUtilities(); } finally { _inNavHandler = false; } };
         window.showWETHTab = function() {};
-        window.showAnalytics = function() {};
-        window.showOperator = function() {};
+        window.showAnalytics = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('analytics'); if (window._showAnalytics) window._showAnalytics(); } finally { _inNavHandler = false; } };
+        window.showOperator = function() { if (_inNavHandler) return; _inNavHandler = true; try { switchToView('operator'); if (window._showOperator) window._showOperator(); } finally { _inNavHandler = false; } };
         window.showBlockDetail = function() {};
         window.showTransactionDetail = function() {};
         window.showAddressDetail = function() {};
+        window.toggleDarkMode = function() { document.body.classList.toggle('dark-theme'); var icon = document.getElementById('themeIcon'); if (icon) icon.className = document.body.classList.contains('dark-theme') ? 'fas fa-sun' : 'fas fa-moon'; try { localStorage.setItem('explorerTheme', document.body.classList.contains('dark-theme') ? 'dark' : 'light'); } catch (e) {} };
         
         // Feature flags
         const FEATURE_FLAGS = {
@@ -1289,15 +1344,16 @@
         }
 
         function normalizeAddress(blockscoutAddr) {
-            if (!blockscoutAddr) return null;
-            
+            if (!blockscoutAddr || typeof blockscoutAddr !== 'object') return null;
+            var hash = blockscoutAddr.hash || blockscoutAddr.address || blockscoutAddr.address_hash;
+            if (!hash && blockscoutAddr.creator_address_hash === undefined) return null;
             return {
-                hash: blockscoutAddr.hash || blockscoutAddr.address,
-                balance: blockscoutAddr.balance || blockscoutAddr.coin_balance || '0',
-                transaction_count: blockscoutAddr.transactions_count || blockscoutAddr.transaction_count || 0,
-                token_count: blockscoutAddr.token_count || 0,
-                is_contract: blockscoutAddr.is_contract || false,
-                is_verified: blockscoutAddr.is_verified || false,
+                hash: hash || null,
+                balance: blockscoutAddr.balance || blockscoutAddr.coin_balance || blockscoutAddr.coin_balance_value || '0',
+                transaction_count: blockscoutAddr.transactions_count != null ? blockscoutAddr.transactions_count : (blockscoutAddr.transaction_count != null ? blockscoutAddr.transaction_count : (blockscoutAddr.tx_count != null ? blockscoutAddr.tx_count : 0)),
+                token_count: blockscoutAddr.token_count != null ? blockscoutAddr.token_count : 0,
+                is_contract: !!blockscoutAddr.is_contract,
+                is_verified: !!blockscoutAddr.is_verified,
                 name: blockscoutAddr.name || null,
                 ens_domain_name: blockscoutAddr.ens_domain_name || null
             };
@@ -1480,6 +1536,7 @@
             applyStoredTheme();
             if (window.location.hash) applyHashRoute();
             window.addEventListener('hashchange', function() { if (window.location.hash) applyHashRoute(); });
+            window.addEventListener('load', function() { if (window.location.hash) applyHashRoute(); });
             console.log('Loading stats, blocks, and transactions...');
             loadStats();
             loadLatestBlocks();
@@ -1597,7 +1654,7 @@
                     statusEl.className = 'metamask-status connected';
                     statusEl.innerHTML = `
                         <i class="fas fa-check-circle"></i>
-                        <span>Connected: ${shortenHash(userAddress)}</span>
+                        <span>Connected: ${escapeHtml(shortenHash(userAddress))}</span>
                         <button class="btn btn-warning" onclick="disconnectMetaMask()" style="margin-left: auto;" aria-label="Disconnect MetaMask wallet">Disconnect</button>
                     `;
 
@@ -1657,7 +1714,7 @@
                                     symbol: 'ETH',
                                     decimals: 18
                                 },
-                                rpcUrls: [RPC_URL],
+                                rpcUrls: RPC_URLS.length > 0 ? RPC_URLS : [RPC_URL],
                                 blockExplorerUrls: [window.location.origin || 'https://explorer.d-bis.org']
                             }],
                         });
@@ -1736,6 +1793,11 @@
             }
         }
 
+        function wrapUnwrapErrorMessage(op, error) {
+            if (error && (error.code === 4001 || error.code === 'ACTION_REJECTED' || (error.message && /user rejected|user denied/i.test(error.message)))) return 'Transaction cancelled.';
+            if (error && error.reason) return error.reason;
+            return (error && error.message) ? error.message : 'Unknown error';
+        }
         function setMaxWETH9(type) {
             if (type === 'wrap') {
                 const ethBalance = document.getElementById('weth9EthBalance').textContent.replace(' ETH', '');
@@ -1770,9 +1832,19 @@
 
             try {
                 await ensureEthers();
-                const weth9Contract = new ethers.Contract(WETH9_ADDRESS, WETH_ABI, signer);
                 const amountWei = ethers.utils.parseEther(amount);
-
+                const ethBalance = await provider.getBalance(userAddress);
+                if (ethBalance.lt(amountWei)) {
+                    alert('Insufficient ETH balance. You have ' + formatEther(ethBalance) + ' ETH.');
+                    return;
+                }
+                const weth9Contract = new ethers.Contract(WETH9_ADDRESS, WETH_ABI, signer);
+                try {
+                    await weth9Contract.callStatic.deposit({ value: amountWei });
+                } catch (e) {
+                    alert('Simulation failed: ' + (e.reason || e.message || 'Unknown error'));
+                    return;
+                }
                 const btn = document.getElementById('weth9WrapBtn');
                 btn.disabled = true;
                 btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
@@ -1790,7 +1862,7 @@
                 }, 3000);
             } catch (error) {
                 console.error('Error wrapping WETH9:', error);
-                alert('Failed to wrap WETH9: ' + error.message);
+                alert('Wrap WETH9: ' + wrapUnwrapErrorMessage('wrap', error));
                 document.getElementById('weth9WrapBtn').innerHTML = '<i class="fas fa-arrow-right"></i> Wrap ETH to WETH9';
                 document.getElementById('weth9WrapBtn').disabled = false;
             }
@@ -1812,7 +1884,17 @@
                 await ensureEthers();
                 const weth9Contract = new ethers.Contract(WETH9_ADDRESS, WETH_ABI, signer);
                 const amountWei = ethers.utils.parseEther(amount);
-
+                const wethBalance = await weth9Contract.balanceOf(userAddress);
+                if (wethBalance.lt(amountWei)) {
+                    alert('Insufficient WETH9 balance. You have ' + formatEther(wethBalance) + ' WETH9.');
+                    return;
+                }
+                try {
+                    await weth9Contract.callStatic.withdraw(amountWei);
+                } catch (e) {
+                    alert('Simulation failed: ' + (e.reason || e.message || 'Unknown error'));
+                    return;
+                }
                 const btn = document.getElementById('weth9UnwrapBtn');
                 btn.disabled = true;
                 btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
@@ -1830,7 +1912,7 @@
                 }, 3000);
             } catch (error) {
                 console.error('Error unwrapping WETH9:', error);
-                alert('Failed to unwrap WETH9: ' + error.message);
+                alert('Unwrap WETH9: ' + wrapUnwrapErrorMessage('unwrap', error));
                 document.getElementById('weth9UnwrapBtn').innerHTML = '<i class="fas fa-arrow-left"></i> Unwrap WETH9 to ETH';
                 document.getElementById('weth9UnwrapBtn').disabled = false;
             }
@@ -1864,9 +1946,19 @@
                     WETH10_ADDRESS = WETH10_ADDRESS_RAW.toLowerCase();
                 }
                 
-                const weth10Contract = new ethers.Contract(WETH10_ADDRESS, WETH_ABI, signer);
                 const amountWei = ethers.utils.parseEther(amount);
-
+                const ethBalance = await provider.getBalance(userAddress);
+                if (ethBalance.lt(amountWei)) {
+                    alert('Insufficient ETH balance. You have ' + formatEther(ethBalance) + ' ETH.');
+                    return;
+                }
+                const weth10Contract = new ethers.Contract(WETH10_ADDRESS, WETH_ABI, signer);
+                try {
+                    await weth10Contract.callStatic.deposit({ value: amountWei });
+                } catch (e) {
+                    alert('Simulation failed: ' + (e.reason || e.message || 'Unknown error'));
+                    return;
+                }
                 const btn = document.getElementById('weth10WrapBtn');
                 btn.disabled = true;
                 btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
@@ -1884,7 +1976,7 @@
                 }, 3000);
             } catch (error) {
                 console.error('Error wrapping WETH10:', error);
-                alert('Failed to wrap WETH10: ' + error.message);
+                alert('Wrap WETH10: ' + wrapUnwrapErrorMessage('wrap', error));
                 document.getElementById('weth10WrapBtn').innerHTML = '<i class="fas fa-arrow-right"></i> Wrap ETH to WETH10';
                 document.getElementById('weth10WrapBtn').disabled = false;
             }
@@ -1920,7 +2012,17 @@
                 
                 const weth10Contract = new ethers.Contract(WETH10_ADDRESS, WETH_ABI, signer);
                 const amountWei = ethers.utils.parseEther(amount);
-
+                const wethBalance = await weth10Contract.balanceOf(userAddress);
+                if (wethBalance.lt(amountWei)) {
+                    alert('Insufficient WETH10 balance. You have ' + formatEther(wethBalance) + ' WETH10.');
+                    return;
+                }
+                try {
+                    await weth10Contract.callStatic.withdraw(amountWei);
+                } catch (e) {
+                    alert('Simulation failed: ' + (e.reason || e.message || 'Unknown error'));
+                    return;
+                }
                 const btn = document.getElementById('weth10UnwrapBtn');
                 btn.disabled = true;
                 btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
@@ -1938,7 +2040,7 @@
                 }, 3000);
             } catch (error) {
                 console.error('Error unwrapping WETH10:', error);
-                alert('Failed to unwrap WETH10: ' + error.message);
+                alert('Unwrap WETH10: ' + wrapUnwrapErrorMessage('unwrap', error));
                 document.getElementById('weth10UnwrapBtn').innerHTML = '<i class="fas fa-arrow-left"></i> Unwrap WETH10 to ETH';
                 document.getElementById('weth10UnwrapBtn').disabled = false;
             }
@@ -1970,39 +2072,44 @@
 
         async function showWETHUtilities() {
             showView('weth');
+            if ((window.location.hash || '').replace(/^#/, '').split('/')[0] !== 'weth') window.location.hash = '#/weth';
             if (userAddress) {
                 await refreshWETHBalances();
             }
         }
-        window.showWETHUtilities = showWETHUtilities;
+        window._showWETHUtilities = showWETHUtilities;
 
         async function showBridgeMonitoring() {
             showView('bridge');
+            if ((window.location.hash || '').replace(/^#/, '').split('/')[0] !== 'bridge') window.location.hash = '#/bridge';
             await refreshBridgeData();
         }
-        window.showBridgeMonitoring = showBridgeMonitoring;
+        window._showBridgeMonitoring = showBridgeMonitoring;
 
         async function showHome() {
             showView('home');
+            if ((window.location.hash || '').replace(/^#/, '') !== 'home') window.location.hash = '#/home';
             await loadStats();
             await loadLatestBlocks();
             await loadLatestTransactions();
             // Start real-time transaction updates
             startTransactionUpdates();
         }
-        window.showHome = showHome;
+        window._showHome = showHome;
 
         async function showBlocks() {
             showView('blocks');
+            if ((window.location.hash || '').replace(/^#/, '').split('/')[0] !== 'blocks') window.location.hash = '#/blocks';
             await loadAllBlocks();
         }
-        window.showBlocks = showBlocks;
+        window._showBlocks = showBlocks;
 
         async function showTransactions() {
             showView('transactions');
+            if ((window.location.hash || '').replace(/^#/, '').split('/')[0] !== 'transactions') window.location.hash = '#/transactions';
             await loadAllTransactions();
         }
-        window.showTransactions = showTransactions;
+        window._showTransactions = showTransactions;
 
         // Analytics view (Track 3+)
         function showAnalytics() {
@@ -2023,7 +2130,7 @@
                 </div>
             `;
         }
-        window.showAnalytics = showAnalytics;
+        window._showAnalytics = showAnalytics;
         
         // Operator view (Track 4)
         function showOperator() {
@@ -2044,10 +2151,12 @@
                 </div>
             `;
         }
-        window.showOperator = showOperator;
+        window._showOperator = showOperator;
         
         function showView(viewName) {
             currentView = viewName;
+            var detailViews = ['blockDetail','transactionDetail','addressDetail','tokenDetail','nftDetail'];
+            if (detailViews.indexOf(viewName) === -1) currentDetailKey = '';
             document.querySelectorAll('.detail-view').forEach(v => v.classList.remove('active'));
             const homeView = document.getElementById('homeView');
             if (homeView) homeView.style.display = viewName === 'home' ? 'block' : 'none';
@@ -2057,6 +2166,7 @@
                 stopTransactionUpdates();
             }
         }
+        window.showView = showView;
 
         function toggleDarkMode() {
             document.body.classList.toggle('dark-theme');
@@ -2081,12 +2191,23 @@
             var hash = (window.location.hash || '').replace(/^#/, '');
             if (!hash) return;
             var parts = hash.split('/').filter(Boolean);
-            if (parts[0] === 'block' && parts[1]) { showBlockDetail(parts[1]); return; }
-            if (parts[0] === 'tx' && parts[1]) { showTransactionDetail(parts[1]); return; }
-            if (parts[0] === 'address' && parts[1]) { showAddressDetail(parts[1]); return; }
-            if (parts[0] === 'token' && parts[1]) { showTokenDetail(parts[1]); return; }
-            if (parts[0] === 'nft' && parts[1] && parts[2]) { showNftDetail(parts[1], parts[2]); return; }
+            var decode = function(s) { try { return decodeURIComponent(s); } catch (e) { return s; } };
+            if (parts[0] === 'block' && parts[1]) { var p1 = decode(parts[1]); if (currentDetailKey === 'block:' + p1) return; showBlockDetail(p1); return; }
+            if (parts[0] === 'tx' && parts[1]) { var p1 = decode(parts[1]); if (currentDetailKey === 'tx:' + p1) return; showTransactionDetail(p1); return; }
+            if (parts[0] === 'address' && parts[1]) { var p1 = decode(parts[1]); if (currentDetailKey === 'address:' + p1.toLowerCase()) return; showAddressDetail(p1); return; }
+            if (parts[0] === 'token' && parts[1]) { var p1 = decode(parts[1]); if (currentDetailKey === 'token:' + p1.toLowerCase()) return; showTokenDetail(p1); return; }
+            if (parts[0] === 'nft' && parts[1] && parts[2]) { var p1 = decode(parts[1]), p2 = decode(parts[2]); if (currentDetailKey === 'nft:' + p1.toLowerCase() + ':' + p2) return; showNftDetail(p1, p2); return; }
+            if (parts[0] === 'home') { if (currentView !== 'home') showHome(); return; }
+            if (parts[0] === 'blocks') { if (currentView !== 'blocks') showBlocks(); return; }
+            if (parts[0] === 'transactions') { if (currentView !== 'transactions') showTransactions(); return; }
+            if (parts[0] === 'bridge') { if (currentView !== 'bridge') showBridgeMonitoring(); return; }
+            if (parts[0] === 'weth') { if (currentView !== 'weth') showWETHUtilities(); return; }
+            if (parts[0] === 'tokens') { if (typeof showTokensList === 'function') showTokensList(); else focusSearchWithHint('token'); return; }
+            if (parts[0] === 'analytics') { if (currentView !== 'analytics') showAnalytics(); return; }
+            if (parts[0] === 'operator') { if (currentView !== 'operator') showOperator(); return; }
         }
+        window.applyHashRoute = applyHashRoute;
+        if (document.readyState !== 'loading' && window.location.hash) { applyHashRoute(); }
         window.toggleDarkMode = toggleDarkMode;
 
         function focusSearchWithHint(kind) {
@@ -2122,37 +2243,37 @@
         // Update breadcrumb navigation
         function updateBreadcrumb(type, identifier, identifierExtra) {
             let breadcrumbContainer;
-            let breadcrumbHTML = '<a href="#" onclick="showHome(); return false;">Home</a>';
+            let breadcrumbHTML = '<a href="#/home">Home</a>';
             switch (type) {
                 case 'block':
                     breadcrumbContainer = document.getElementById('blockDetailBreadcrumb');
                     breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
-                    breadcrumbHTML += '<a href="#" onclick="showBlocks(); return false;">Blocks</a>';
+                    breadcrumbHTML += '<a href="#/blocks">Blocks</a>';
                     breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
                     breadcrumbHTML += `<span class="breadcrumb-current">Block #${identifier}</span>`;
                     break;
                 case 'transaction':
                     breadcrumbContainer = document.getElementById('transactionDetailBreadcrumb');
                     breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
-                    breadcrumbHTML += '<a href="#" onclick="showTransactions(); return false;">Transactions</a>';
+                    breadcrumbHTML += '<a href="#/transactions">Transactions</a>';
                     breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
-                    breadcrumbHTML += `<span class="breadcrumb-current">${shortenHash(identifier)}</span>`;
+                    breadcrumbHTML += '<span class="breadcrumb-current">' + escapeHtml(shortenHash(identifier)) + '</span>';
                     break;
                 case 'address':
                     breadcrumbContainer = document.getElementById('addressDetailBreadcrumb');
-                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><span>Address</span><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">' + shortenHash(identifier) + '</span>';
+                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><span>Address</span><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">' + escapeHtml(shortenHash(identifier)) + '</span>';
                     break;
                 case 'token':
                     breadcrumbContainer = document.getElementById('tokenDetailBreadcrumb');
                     breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
-                    breadcrumbHTML += '<a href="#" onclick="focusSearchWithHint(\'token\'); return false;">Tokens</a>';
+                    breadcrumbHTML += '<a href="#/tokens">Tokens</a>';
                     breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
-                    breadcrumbHTML += '<span class="breadcrumb-current">Token ' + shortenHash(identifier) + '</span>';
+                    breadcrumbHTML += '<span class="breadcrumb-current">Token ' + escapeHtml(shortenHash(identifier)) + '</span>';
                     break;
                 case 'nft':
                     breadcrumbContainer = document.getElementById('nftDetailBreadcrumb');
                     breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
-                    breadcrumbHTML += '<a href="#" onclick="showAddressDetail(\'' + identifier + '\'); return false;">' + shortenHash(identifier) + '</a>';
+                    breadcrumbHTML += '<a href="#/address/' + encodeURIComponent(identifier) + '">' + escapeHtml(shortenHash(identifier)) + '</a>';
                     breadcrumbHTML += '<span class="breadcrumb-separator">/</span>';
                     breadcrumbHTML += '<span class="breadcrumb-current">Token ID ' + (identifierExtra != null ? escapeHtml(String(identifierExtra)) : '') + '</span>';
                     break;
@@ -2165,27 +2286,27 @@
         }
         function updateBreadcrumb(type, identifier, identifierExtra) {
             let breadcrumbContainer;
-            let breadcrumbHTML = '<a href="#" onclick="showHome(); return false;">Home</a>';
+            let breadcrumbHTML = '<a href="#/home">Home</a>';
             switch (type) {
                 case 'block':
                     breadcrumbContainer = document.getElementById('blockDetailBreadcrumb');
-                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><a href="#" onclick="showBlocks(); return false;">Blocks</a><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">Block #' + identifier + '</span>';
+                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><a href="#/blocks">Blocks</a><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">Block #' + identifier + '</span>';
                     break;
                 case 'transaction':
                     breadcrumbContainer = document.getElementById('transactionDetailBreadcrumb');
-                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><a href="#" onclick="showTransactions(); return false;">Transactions</a><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">' + shortenHash(identifier) + '</span>';
+                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><a href="#/transactions">Transactions</a><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">' + escapeHtml(shortenHash(identifier)) + '</span>';
                     break;
                 case 'address':
                     breadcrumbContainer = document.getElementById('addressDetailBreadcrumb');
-                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><span class="breadcrumb-separator">Address</span><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">' + shortenHash(identifier) + '</span>';
+                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><span class="breadcrumb-separator">Address</span><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">' + escapeHtml(shortenHash(identifier)) + '</span>';
                     break;
                 case 'token':
                     breadcrumbContainer = document.getElementById('tokenDetailBreadcrumb');
-                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><a href="#" onclick="focusSearchWithHint(\'token\'); return false;">Tokens</a><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">Token ' + shortenHash(identifier) + '</span>';
+                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><a href="#/tokens">Tokens</a><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">Token ' + escapeHtml(shortenHash(identifier)) + '</span>';
                     break;
                 case 'nft':
                     breadcrumbContainer = document.getElementById('nftDetailBreadcrumb');
-                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><a href="#" onclick="showAddressDetail(\'' + identifier + '\'); return false;">' + shortenHash(identifier) + '</a><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">Token ID ' + (identifierExtra != null ? escapeHtml(String(identifierExtra)) : '') + '</span>';
+                    breadcrumbHTML += '<span class="breadcrumb-separator">/</span><a href="#/address/' + encodeURIComponent(identifier) + '">' + escapeHtml(shortenHash(identifier)) + '</a><span class="breadcrumb-separator">/</span><span class="breadcrumb-current">Token ID ' + (identifierExtra != null ? escapeHtml(String(identifierExtra)) : '') + '</span>';
                     break;
                 default:
                     return;
@@ -2194,18 +2315,19 @@
         }
 
         // Retry logic with exponential backoff
-        async function fetchAPIWithRetry(url, maxRetries = 3, retryDelay = 1000) {
+        async function fetchAPIWithRetry(url, maxRetries = FETCH_MAX_RETRIES, retryDelay = RETRY_DELAY_MS) {
             for (let attempt = 0; attempt < maxRetries; attempt++) {
                 try {
                     return await fetchAPI(url);
                 } catch (error) {
                     const isLastAttempt = attempt === maxRetries - 1;
-                    const isRetryable = error.message.includes('timeout') || 
+                    const isRetryable = error.name === 'AbortError' ||
+                                       (error.message && (error.message.includes('timeout') || 
                                        error.message.includes('500') || 
                                        error.message.includes('502') || 
                                        error.message.includes('503') ||
                                        error.message.includes('504') ||
-                                       error.message.includes('NetworkError');
+                                       error.message.includes('NetworkError')));
                     
                     if (isLastAttempt || !isRetryable) {
                         throw error;
@@ -2220,23 +2342,19 @@
         }
 
         async function fetchAPI(url) {
-            return new Promise(async (resolve, reject) => {
-                const timeoutId = setTimeout(() => {
-                    reject(new Error('Request timeout. Please try again.'));
-                }, 15000); // 15 second timeout so UI shows retry sooner
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
 
-                try {
-                    const response = await fetch(url, {
-                        method: 'GET',
-                        headers: {
-                            'Accept': 'application/json',
-                        },
-                        credentials: 'omit'
-                    });
-                    
-                    clearTimeout(timeoutId);
-                    
-                    if (!response.ok) {
+            try {
+                const response = await fetch(url, {
+                    method: 'GET',
+                    headers: { 'Accept': 'application/json' },
+                    credentials: 'omit',
+                    signal: controller.signal
+                });
+                
+                clearTimeout(timeoutId);
+                if (!response.ok) {
                         let errorText = '';
                         try {
                             errorText = await response.text();
@@ -2276,34 +2394,25 @@
                             }
                         }
                         
-                        reject(new Error(`HTTP ${response.status}: ${errorText || response.statusText}`));
-                        return;
+                        throw new Error(`HTTP ${response.status}: ${errorText || response.statusText}`);
                     }
-                    
                     const contentType = response.headers.get('content-type');
                     if (contentType && contentType.includes('application/json')) {
-                        const data = await response.json();
-                        resolve(data);
-                    } else {
-                        // Try to parse as JSON anyway
-                        const text = await response.text();
-                        try {
-                            const data = JSON.parse(text);
-                            resolve(data);
-                        } catch (e) {
-                            reject(new Error(`Invalid JSON response: ${text.substring(0, 100)}`));
-                        }
+                        return await response.json();
                     }
-                } catch (error) {
-                    clearTimeout(timeoutId);
-                    if (error.message && error.message.includes('timeout')) {
-                        reject(error);
-                    } else {
-                        console.error('API Error for', url, ':', error);
-                        reject(error);
+                    const text = await response.text();
+                    try {
+                        return JSON.parse(text);
+                    } catch (e) {
+                        throw new Error(`Invalid JSON response: ${text.substring(0, 100)}`);
                     }
+            } catch (error) {
+                clearTimeout(timeoutId);
+                if (error.name === 'AbortError') {
+                    throw new Error('Request timeout. Please try again.');
                 }
-            });
+                throw error;
+            }
         }
 
         async function loadStats() {
@@ -2414,12 +2523,42 @@
                 }
                 if (statsResp.average_block_time != null) blockTimeSec = Number(statsResp.average_block_time).toFixed(1) + 's';
                 if (statsResp.transactions_per_second != null) tps = Number(statsResp.transactions_per_second).toFixed(2);
-                el.innerHTML = (gasGwei !== '-' ? 'Gas: ' + gasGwei + '<br/>' : '') + (blockTimeSec !== '-' ? 'Block: ' + blockTimeSec + '<br/>' : '') + (tps !== '-' ? 'TPS: ' + tps : '') || 'Gas / TPS';
+                el.innerHTML = (gasGwei !== '-' ? 'Gas: ' + escapeHtml(gasGwei) + '<br/>' : '') + (blockTimeSec !== '-' ? 'Block: ' + escapeHtml(blockTimeSec) + '<br/>' : '') + (tps !== '-' ? 'TPS: ' + escapeHtml(tps) : '') || 'Gas / TPS';
             } catch (e) {
                 el.textContent = '-';
             }
         }
 
+        function normalizeBlockDisplay(block) {
+            var blockNum = block.number;
+            var hash = block.hash || '';
+            var txCount = block.transaction_count || 0;
+            var date = null;
+            if (block.timestamp) {
+                if (typeof block.timestamp === 'string' && block.timestamp.indexOf('0x') === 0) {
+                    date = new Date(parseInt(block.timestamp, 16) * 1000);
+                } else {
+                    date = new Date(block.timestamp);
+                }
+            }
+            var timestampFormatted = date && !isNaN(date.getTime()) ? date.toLocaleString() : 'N/A';
+            var timeAgo = date && !isNaN(date.getTime()) ? getTimeAgo(date) : 'N/A';
+            return { blockNum: blockNum, hash: hash, txCount: txCount, timestampFormatted: timestampFormatted, timeAgo: timeAgo };
+        }
+
+        function createBlockCardHtml(block, options) {
+            options = options || {};
+            var d = normalizeBlockDisplay(block);
+            var animationClass = options.animationClass || '';
+            return '<div class="block-card ' + escapeHtml(animationClass) + '" onclick="showBlockDetail(\'' + escapeHtml(String(d.blockNum)) + '\')">' +
+                '<div class="block-number">#' + escapeHtml(String(d.blockNum)) + '</div>' +
+                '<div class="block-hash">' + escapeHtml(shortenHash(d.hash)) + '</div>' +
+                '<div class="block-info">' +
+                '<div class="block-info-item"><span class="block-info-label">Transactions</span><span class="block-info-value">' + escapeHtml(String(d.txCount)) + '</span></div>' +
+                '<div class="block-info-item"><span class="block-info-label">Time</span><span class="block-info-value">' + escapeHtml(d.timeAgo) + '</span></div>' +
+                '</div></div>';
+        }
+
         // Prevent multiple simultaneous calls
         let loadingBlocks = false;
         async function loadLatestBlocks() {
@@ -2451,11 +2590,29 @@
                             console.warn('Blockscout blocks response empty or unexpected shape:', Object.keys(response || {}));
                         }
                     } catch (blockscoutError) {
-                        console.error('❌ Blockscout API failed:', blockscoutError);
-                        if (container) {
-                            container.innerHTML = `<div class="error">Failed to load blocks: ${(blockscoutError.message || 'Unknown error').substring(0, 200)}. <button type="button" class="btn btn-primary" onclick="loadLatestBlocks()" style="margin-top: 0.5rem;">Retry</button></div>`;
+                        console.warn('Blockscout API failed, trying RPC fallback:', blockscoutError.message);
+                        try {
+                            const blockNumHex = await rpcCall('eth_blockNumber');
+                            const latestBlock = parseInt(blockNumHex, 16);
+                            if (!isNaN(latestBlock) && latestBlock >= 0) {
+                                for (let i = 0; i < Math.min(10, latestBlock + 1); i++) {
+                                    const bn = latestBlock - i;
+                                    const b = await rpcCall('eth_getBlockByNumber', ['0x' + bn.toString(16), false]);
+                                    if (b && b.number) blocks.push({ number: parseInt(b.number, 16), hash: b.hash, timestamp: b.timestamp ? (typeof b.timestamp === 'string' ? parseInt(b.timestamp, 16) * 1000 : b.timestamp) : null, transaction_count: b.transactions ? b.transactions.length : 0 });
+                                }
+                                if (blocks.length > 0) console.log('Loaded ' + blocks.length + ' blocks via RPC fallback');
+                            }
+                        } catch (rpcErr) {
+                            console.error('RPC fallback also failed:', rpcErr);
+                            if (container) {
+                                container.innerHTML = '<div class="error">API temporarily unavailable. ' + escapeHtml((blockscoutError.message || 'Unknown error').substring(0, 150)) + ' <button type="button" class="btn btn-primary" onclick="loadLatestBlocks()" style="margin-top: 0.5rem;">Retry</button></div>';
+                            }
+                            return;
+                        }
+                        if (blocks.length === 0 && container) {
+                            container.innerHTML = '<div class="error">Could not load blocks. <button type="button" class="btn btn-primary" onclick="loadLatestBlocks()" style="margin-top: 0.5rem;">Retry</button></div>';
+                            return;
                         }
-                        return;
                     }
                 } else {
                     // For other networks, use Etherscan-compatible API
@@ -2493,56 +2650,19 @@
                 if (limitedBlocks.length === 0) {
                     if (container) container.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-light);">No blocks found. <button type="button" class="btn btn-primary" onclick="loadLatestBlocks()" style="margin-top: 0.5rem;">Retry</button></div>';
                 } else {
-                    // Create block card HTML
-                    const createBlockCard = (block, index, animationClass = '') => {
-                        const blockNum = block.number;
-                        const hash = block.hash;
-                        const txCount = block.transaction_count || 0;
-                        let timestamp;
-                        
-                        if (block.timestamp) {
-                            if (typeof block.timestamp === 'string' && block.timestamp.startsWith('0x')) {
-                                timestamp = new Date(parseInt(block.timestamp, 16) * 1000);
-                            } else {
-                                timestamp = new Date(block.timestamp);
-                            }
-                        } else {
-                            timestamp = null;
-                        }
-                        
-                        const timeAgo = timestamp ? getTimeAgo(timestamp) : 'N/A';
-                        
-                        return `
-                            <div class="block-card ${animationClass}" onclick="showBlockDetail('${blockNum}')">
-                                <div class="block-number">#${blockNum}</div>
-                                <div class="block-hash">${shortenHash(hash)}</div>
-                                <div class="block-info">
-                                    <div class="block-info-item">
-                                        <span class="block-info-label">Transactions</span>
-                                        <span class="block-info-value">${txCount}</span>
-                                    </div>
-                                    <div class="block-info-item">
-                                        <span class="block-info-label">Time</span>
-                                        <span class="block-info-value">${timeAgo}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        `;
-                    };
-                    
                     // Create HTML with duplicated blocks for seamless infinite loop
                     let html = '<div class="blocks-scroll-container" id="blocksScrollContainer">';
                     html += '<div class="blocks-scroll-content">';
                     
                     // First set of blocks (with animations for first 3)
-                    limitedBlocks.forEach((block, index) => {
-                        const animationClass = index < 3 ? 'new-block' : '';
-                        html += createBlockCard(block, index, animationClass);
+                    limitedBlocks.forEach(function(block, index) {
+                        var animationClass = index < 3 ? 'new-block' : '';
+                        html += createBlockCardHtml(block, { animationClass: animationClass });
                     });
                     
                     // Duplicate blocks for seamless infinite loop
-                    limitedBlocks.forEach((block, index) => {
-                        html += createBlockCard(block, index);
+                    limitedBlocks.forEach(function(block) {
+                        html += createBlockCardHtml(block, {});
                     });
                     
                     html += '</div></div>';
@@ -2568,21 +2688,20 @@
                             isPaused = false;
                         });
                         
+                        if (_blocksScrollAnimationId != null) {
+                            cancelAnimationFrame(_blocksScrollAnimationId);
+                            _blocksScrollAnimationId = null;
+                        }
                         function animateScroll() {
                             if (!isPaused && scrollContent) {
                                 scrollPosition += scrollSpeed;
-                                // Loop back seamlessly when we've scrolled through one set
-                                if (scrollPosition >= singleSetWidth) {
-                                    scrollPosition = 0;
-                                }
-                                scrollContent.style.transform = `translateX(-${scrollPosition}px)`;
+                                if (scrollPosition >= singleSetWidth) scrollPosition = 0;
+                                scrollContent.style.transform = 'translateX(-' + scrollPosition + 'px)';
                             }
-                            requestAnimationFrame(animateScroll);
+                            _blocksScrollAnimationId = requestAnimationFrame(animateScroll);
                         }
-                        
-                        // Start animation after a short delay to let page render
-                        setTimeout(() => {
-                            requestAnimationFrame(animateScroll);
+                        setTimeout(function() {
+                            _blocksScrollAnimationId = requestAnimationFrame(animateScroll);
                         }, 500);
                     }
                     
@@ -2595,7 +2714,7 @@
                 }
             } catch (error) {
                 console.error('Failed to load latest blocks:', error);
-                if (container) container.innerHTML = `<div class="error">Failed to load blocks: ${(error.message || 'Unknown error').substring(0, 200)}. <button type="button" class="btn btn-primary" onclick="loadLatestBlocks()" style="margin-top: 0.5rem;">Retry</button></div>`;
+                if (container) container.innerHTML = '<div class="error">Failed to load blocks: ' + escapeHtml((error.message || 'Unknown error').substring(0, 200)) + '. <button type="button" class="btn btn-primary" onclick="loadLatestBlocks()" style="margin-top: 0.5rem;">Retry</button></div>';
             } finally {
                 loadingBlocks = false;
             }
@@ -2611,17 +2730,38 @@
 
             try {
                 let response;
+                let rawTransactions = [];
                 
                 // For ChainID 138, use Blockscout API
                 if (CHAIN_ID === 138) {
-                    response = await fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions?filter=to&page=1&page_size=10`);
+                    try {
+                        response = await fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/transactions?filter=to&page=1&page_size=10`);
+                        rawTransactions = Array.isArray(response?.items) ? response.items : (Array.isArray(response?.data) ? response.data : []);
+                    } catch (apiErr) {
+                        console.warn('Blockscout transactions API failed, trying RPC fallback:', apiErr.message);
+                        try {
+                            const blockNumHex = await rpcCall('eth_blockNumber');
+                            const latest = parseInt(blockNumHex, 16);
+                            for (let i = 0; i < Math.min(5, latest + 1) && rawTransactions.length < 10; i++) {
+                                const b = await rpcCall('eth_getBlockByNumber', ['0x' + (latest - i).toString(16), true]);
+                                if (b && b.transactions) {
+                                    b.transactions.forEach(tx => {
+                                        if (typeof tx === 'object' && rawTransactions.length < 10) rawTransactions.push({ hash: tx.hash, from: tx.from, to: tx.to || null, value: tx.value || '0x0', block_number: parseInt(b.number, 16), created_at: b.timestamp ? new Date(parseInt(b.timestamp, 16) * 1000).toISOString() : null });
+                                    });
+                                }
+                            }
+                            response = { items: rawTransactions };
+                        } catch (rpcErr) {
+                            console.error('RPC transactions fallback failed:', rpcErr);
+                            if (container) container.innerHTML = '<div class="error">API temporarily unavailable. <button type="button" class="btn btn-primary" onclick="loadLatestTransactions()" style="margin-top: 0.5rem;">Retry</button></div>';
+                            return;
+                        }
+                    }
                 } else {
                     response = await fetchAPIWithRetry(`${API_BASE}/v2/transactions?page=1&page_size=10`);
+                    rawTransactions = Array.isArray(response?.items) ? response.items : (Array.isArray(response?.data) ? response.data : []);
                 }
                 
-                // Blockscout returns 'items', our API returns 'data'; accept empty or missing
-                const rawTransactions = Array.isArray(response?.items) ? response.items : (Array.isArray(response?.data) ? response.data : []);
-                
                 // Normalize transactions using adapter
                 const transactions = rawTransactions.map(normalizeTransaction).filter(tx => tx !== null);
                 
@@ -2659,13 +2799,7 @@
                         const isNew = newTransactions.some(ntx => String(ntx.hash || '') === hash);
                         const animationClass = isNew ? 'new-transaction' : '';
                         
-                        html += `<tr class="${animationClass}" onclick="showTransactionDetail('${hash}')" style="cursor: pointer;">
-                            <td class="hash">${shortenHash(hash)}</td>
-                            <td class="hash">${shortenHash(from)}</td>
-                            <td class="hash">${shortenHash(to)}</td>
-                            <td>${valueFormatted} ETH</td>
-                            <td>${blockNumber}</td>
-                        </tr>`;
+                        html += '<tr class="' + animationClass + '" onclick="showTransactionDetail(\'' + escapeHtml(hash) + '\')" style="cursor: pointer;"><td class="hash">' + escapeHtml(shortenHash(hash)) + '</td><td class="hash">' + escapeHtml(shortenHash(from)) + '</td><td class="hash">' + escapeHtml(shortenHash(to)) + '</td><td>' + escapeHtml(valueFormatted) + ' ETH</td><td>' + escapeHtml(String(blockNumber)) + '</td></tr>';
                     });
                 }
                 
@@ -2681,7 +2815,7 @@
                 }
             } catch (error) {
                 console.error('Failed to load latest transactions:', error);
-                if (container) container.innerHTML = `<div class="error">Failed to load transactions: ${(error.message || 'Unknown error').substring(0, 200)}. <button type="button" class="btn btn-primary" onclick="loadLatestTransactions()" style="margin-top: 0.5rem;">Retry</button></div>`;
+                if (container) container.innerHTML = '<div class="error">Failed to load transactions: ' + escapeHtml((error.message || 'Unknown error').substring(0, 200)) + '. <button type="button" class="btn btn-primary" onclick="loadLatestTransactions()" style="margin-top: 0.5rem;">Retry</button></div>';
             }
         }
         
@@ -2757,35 +2891,16 @@
                 if (blocks.length === 0) {
                     html += '<tr><td colspan="4" style="text-align: center; padding: 2rem;">No blocks found</td></tr>';
                 } else {
-                    blocks.forEach(block => {
-                        const blockNum = block.number;
-                        const hash = block.hash;
-                        const txCount = block.transaction_count || 0;
-                        let timestamp;
-                        
-                        if (block.timestamp) {
-                            if (typeof block.timestamp === 'string' && block.timestamp.startsWith('0x')) {
-                                timestamp = new Date(parseInt(block.timestamp, 16) * 1000).toLocaleString();
-                            } else {
-                                timestamp = new Date(block.timestamp).toLocaleString();
-                            }
-                        } else {
-                            timestamp = 'N/A';
-                        }
-                        
-                        html += `<tr onclick="showBlockDetail('${blockNum}')" style="cursor: pointer;">
-                            <td>${blockNum}</td>
-                            <td class="hash">${shortenHash(hash)}</td>
-                            <td>${txCount}</td>
-                            <td>${timestamp}</td>
-                        </tr>`;
+                    blocks.forEach(function(block) {
+                        var d = normalizeBlockDisplay(block);
+                        html += '<tr onclick="showBlockDetail(\'' + escapeHtml(String(d.blockNum)) + '\')" style="cursor: pointer;"><td>' + escapeHtml(String(d.blockNum)) + '</td><td class="hash">' + escapeHtml(shortenHash(d.hash)) + '</td><td>' + escapeHtml(String(d.txCount)) + '</td><td>' + escapeHtml(d.timestampFormatted) + '</td></tr>';
                     });
                 }
                 
                 html += '</tbody></table>';
                 container.innerHTML = html;
             } catch (error) {
-                container.innerHTML = `<div class="error">Failed to load blocks: ${error.message || 'Unknown error'}. <button onclick="showBlocks()" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>`;
+                container.innerHTML = '<div class="error">Failed to load blocks: ' + escapeHtml(error.message || 'Unknown error') + '. <button onclick="showBlocks()" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>';
             }
         }
 
@@ -2859,20 +2974,14 @@
                         const value = tx.value || '0';
                         const blockNumber = tx.block_number || 'N/A';
                         const valueFormatted = formatEther(value);
-                        html += `<tr onclick="showTransactionDetail('${hash}')" style="cursor: pointer;">
-                            <td class="hash">${shortenHash(hash)}</td>
-                            <td class="hash">${shortenHash(from)}</td>
-                            <td class="hash">${shortenHash(to)}</td>
-                            <td>${valueFormatted} ETH</td>
-                            <td>${blockNumber}</td>
-                        </tr>`;
+                        html += '<tr onclick="showTransactionDetail(\'' + escapeHtml(hash) + '\')" style="cursor: pointer;"><td class="hash">' + escapeHtml(shortenHash(hash)) + '</td><td class="hash">' + escapeHtml(shortenHash(from)) + '</td><td class="hash">' + escapeHtml(shortenHash(to)) + '</td><td>' + escapeHtml(valueFormatted) + ' ETH</td><td>' + escapeHtml(String(blockNumber)) + '</td></tr>';
                     });
                 }
                 
                 html += '</tbody></table>';
                 container.innerHTML = html;
             } catch (error) {
-                container.innerHTML = `<div class="error">Failed to load transactions: ${error.message || 'Unknown error'}. <button onclick="showTransactions()" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>`;
+                container.innerHTML = '<div class="error">Failed to load transactions: ' + escapeHtml(error.message || 'Unknown error') + '. <button onclick="showTransactions()" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>';
             }
         }
 
@@ -2974,7 +3083,7 @@
                                     <tr>
                                         <td><strong>${chain.replace(/\s*\\(\\d+\\)/, '')}</strong></td>
                                         <td>${chainId}</td>
-                                        <td><span class="hash" onclick="showAddressDetail('${address}')" style="cursor: pointer;">${shortenHash(address)}</span></td>
+                                        <td><span class="hash" onclick="showAddressDetail('${escapeHtml(address)}')" style="cursor: pointer;">${escapeHtml(shortenHash(address))}</span></td>
                                     </tr>
                     `;
                 }
@@ -3010,7 +3119,7 @@
                                     <tr>
                                         <td><strong>${chain.replace(/\s*\\(\\d+\\)/, '')}</strong></td>
                                         <td>${chainId}</td>
-                                        <td><span class="hash" onclick="showAddressDetail('${address}')" style="cursor: pointer;">${shortenHash(address)}</span></td>
+                                        <td><span class="hash" onclick="showAddressDetail('${escapeHtml(address)}')" style="cursor: pointer;">${escapeHtml(shortenHash(address))}</span></td>
                                     </tr>
                     `;
                 }
@@ -3084,13 +3193,21 @@
                 
                 container.innerHTML = html;
             } catch (error) {
-                container.innerHTML = `<div class="error">Failed to load bridge data: ${error.message}</div>`;
+                container.innerHTML = '<div class="error">Failed to load bridge data: ' + escapeHtml(error.message) + '</div>';
             }
         }
 
+        function safeBlockNumber(v) { const n = String(v).replace(/[^0-9]/g, ''); return n ? n : null; }
+        function safeTxHash(v) { const s = String(v); return /^0x[a-fA-F0-9]{64}$/.test(s) ? s : null; }
+        function safeAddress(v) { const s = String(v); return /^0x[a-fA-F0-9]{40}$/i.test(s) ? s : null; }
         async function showBlockDetail(blockNumber) {
-            try { window.history.replaceState(null, '', '#' + '/block/' + blockNumber); } catch (e) {}
+            const bn = safeBlockNumber(blockNumber);
+            if (!bn) { showToast('Invalid block number', 'error'); return; }
+            blockNumber = bn;
+            currentDetailKey = 'block:' + blockNumber;
             showView('blockDetail');
+            window.location.hash = '#/block/' + blockNumber;
+            try { window.history.replaceState(null, '', '#' + '/block/' + blockNumber); } catch (e) {}
             const container = document.getElementById('blockDetail');
             updateBreadcrumb('block', blockNumber);
             container.innerHTML = createSkeletonLoader('detail');
@@ -3107,7 +3224,7 @@
                             throw new Error('Block not found');
                         }
                     } catch (error) {
-                        container.innerHTML = `<div class="error">Failed to load block: ${error.message || 'Unknown error'}. <button onclick="showBlockDetail('${blockNumber}')" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>`;
+                        container.innerHTML = '<div class="error">Failed to load block: ' + escapeHtml(error.message || 'Unknown error') + '. <button onclick="showBlockDetail(\'' + escapeHtml(String(blockNumber)) + '\')" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>';
                         return;
                     }
                 } else {
@@ -3138,19 +3255,19 @@
                         </div>
                         <div class="info-row">
                             <div class="info-label">Hash</div>
-                            <div class="info-value hash">${b.hash}</div>
+                            <div class="info-value hash">${escapeHtml(b.hash || '')}</div>
                         </div>
                         <div class="info-row">
                             <div class="info-label">Parent Hash</div>
-                            <div class="info-value hash" onclick="showBlockDetail('${parseInt(b.number) - 1}')" style="cursor: pointer;">${b.parent_hash}</div>
+                            <div class="info-value hash" onclick="showBlockDetail('${escapeHtml(String(parseInt(b.number) - 1))}')" style="cursor: pointer;">${escapeHtml(b.parent_hash || '')}</div>
                         </div>
                         <div class="info-row">
                             <div class="info-label">Timestamp</div>
-                            <div class="info-value">${timestamp}</div>
+                            <div class="info-value">${escapeHtml(timestamp)}</div>
                         </div>
                         <div class="info-row">
                             <div class="info-label">Miner</div>
-                            <div class="info-value hash" onclick="showAddressDetail('${b.miner}')" style="cursor: pointer;">${b.miner || 'N/A'}</div>
+                            <div class="info-value hash" onclick="showAddressDetail('${escapeHtml(b.miner || '')}')" style="cursor: pointer;">${escapeHtml(b.miner || 'N/A')}</div>
                         </div>
                         <div class="info-row">
                             <div class="info-label">Transaction Count</div>
@@ -3186,21 +3303,26 @@
                         </div>
                         <div class="info-row">
                             <div class="info-label">Nonce</div>
-                            <div class="info-value">${b.nonce || '0x0'}</div>
+                            <div class="info-value">${escapeHtml(String(b.nonce || '0x0'))}</div>
                         </div>
                     `;
                 } else {
                     container.innerHTML = '<div class="error">Block not found</div>';
                 }
             } catch (error) {
-                container.innerHTML = `<div class="error">Failed to load block: ${error.message}</div>`;
+                container.innerHTML = '<div class="error">Failed to load block: ' + escapeHtml(error.message) + '</div>';
             }
         }
         window.showBlockDetail = showBlockDetail;
 
         async function showTransactionDetail(txHash) {
-            try { window.history.replaceState(null, '', '#' + '/tx/' + txHash); } catch (e) {}
+            const th = safeTxHash(txHash);
+            if (!th) { showToast('Invalid transaction hash', 'error'); return; }
+            txHash = th;
+            currentDetailKey = 'tx:' + txHash;
             showView('transactionDetail');
+            window.location.hash = '#/tx/' + txHash;
+            try { window.history.replaceState(null, '', '#' + '/tx/' + txHash); } catch (e) {}
             const container = document.getElementById('transactionDetail');
             updateBreadcrumb('transaction', txHash);
             container.innerHTML = createSkeletonLoader('detail');
@@ -3216,7 +3338,7 @@
                         t = normalizeTransaction(response);
                         if (!t) throw new Error('Transaction not found');
                     } catch (error) {
-                        container.innerHTML = `<div class="error">Failed to load transaction: ${error.message || 'Unknown error'}. <button onclick="showTransactionDetail('${txHash}')" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>`;
+                        container.innerHTML = '<div class="error">Failed to load transaction: ' + escapeHtml(error.message || 'Unknown error') + '. <button onclick="showTransactionDetail(\'' + escapeHtml(String(txHash)) + '\')" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>';
                         return;
                     }
                 } else {
@@ -3272,19 +3394,19 @@
                     </div>
                     <div class="info-row">
                         <div class="info-label">Block Number</div>
-                        <div class="info-value hash" onclick="showBlockDetail('${t.block_number}')" style="cursor: pointer;">${t.block_number || 'N/A'}</div>
+                        <div class="info-value hash" onclick="showBlockDetail('${escapeHtml(String(t.block_number || ''))}')" style="cursor: pointer;">${escapeHtml(String(t.block_number || 'N/A'))}</div>
                     </div>
                     <div class="info-row">
                         <div class="info-label">Block Hash</div>
-                        <div class="info-value hash">${t.block_hash || 'N/A'}</div>
+                        <div class="info-value hash">${escapeHtml(t.block_hash || 'N/A')}</div>
                     </div>
                     <div class="info-row">
                         <div class="info-label">From</div>
-                        <div class="info-value hash" onclick="showAddressDetail('${t.from}')" style="cursor: pointer;">${t.from}</div>
+                        <div class="info-value hash" onclick="showAddressDetail('${escapeHtml(t.from || '')}')" style="cursor: pointer;">${escapeHtml(t.from || '')}</div>
                     </div>
                     <div class="info-row">
                         <div class="info-label">To</div>
-                        <div class="info-value hash" onclick="showAddressDetail('${t.to || 'N/A'}')" style="cursor: pointer;">${t.to || 'N/A'}</div>
+                        <div class="info-value hash" onclick="showAddressDetail('${escapeHtml(t.to || 'N/A')}')" style="cursor: pointer;">${escapeHtml(t.to || 'N/A')}</div>
                     </div>
                     <div class="info-row">
                         <div class="info-label">Value</div>
@@ -3308,7 +3430,7 @@
                     ${t.tx_burnt_fee && parseInt(t.tx_burnt_fee) > 0 ? `<div class="info-row"><div class="info-label">Burnt Fee</div><div class="info-value">${burntFeeEth} ETH</div></div>` : ''}
                     <div class="info-row"><div class="info-label">Nonce</div><div class="info-value">${t.nonce || 'N/A'}</div></div>
                     <div class="info-row"><div class="info-label">Timestamp</div><div class="info-value">${timestamp}</div></div>
-                    ${t.contract_address ? `<div class="info-row"><div class="info-label">Contract Address</div><div class="info-value hash" onclick="showAddressDetail('${t.contract_address}')" style="cursor: pointer;">${t.contract_address}</div></div>` : ''}
+                    ${t.contract_address ? `<div class="info-row"><div class="info-label">Contract Address</div><div class="info-value hash" onclick="showAddressDetail('${escapeHtml(t.contract_address)}')" style="cursor: pointer;">${escapeHtml(t.contract_address)}</div></div>` : ''}
                 `;
 
                 if (revertReason && t.status !== 1) {
@@ -3379,7 +3501,7 @@
                                     const to = it.to?.hash || it.to || 'N/A';
                                     const val = it.value ? formatEther(it.value) : '0';
                                     const type = it.type || it.call_type || 'call';
-                                    tbl += '<tr><td>' + escapeHtml(type) + '</td><td class="hash" onclick="showAddressDetail(\'' + from + '\')" style="cursor: pointer;">' + shortenHash(from) + '</td><td class="hash" onclick="showAddressDetail(\'' + to + '\')" style="cursor: pointer;">' + shortenHash(to) + '</td><td>' + val + ' ETH</td></tr>';
+                                    tbl += '<tr><td>' + escapeHtml(type) + '</td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(from) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(from)) + '</td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(to) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(to)) + '</td><td>' + escapeHtml(val) + ' ETH</td></tr>';
                                 });
                                 tbl += '</tbody></table>';
                                 internalEl.innerHTML = tbl;
@@ -3396,7 +3518,7 @@
                                     const addr = log.address?.hash || log.address || 'N/A';
                                     const topics = (log.topics && Array.isArray(log.topics)) ? log.topics.join(', ') : (log.topic0 || log.topics || '-');
                                     const data = log.data || log.raw_data || '0x';
-                                    tbl += '<tr><td class="hash" onclick="showAddressDetail(\'' + addr + '\')" style="cursor: pointer;">' + shortenHash(addr) + '</td><td style="word-break: break-all; font-size: 0.75rem;">' + escapeHtml(String(topics).substring(0, 80)) + (String(topics).length > 80 ? '...' : '') + '</td><td style="word-break: break-all; font-size: 0.75rem;">' + escapeHtml(String(data).substring(0, 66)) + (String(data).length > 66 ? '...' : '') + '</td></tr>';
+                                    tbl += '<tr><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(addr) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(addr)) + '</td><td style="word-break: break-all; font-size: 0.75rem;">' + escapeHtml(String(topics).substring(0, 80)) + (String(topics).length > 80 ? '...' : '') + '</td><td style="word-break: break-all; font-size: 0.75rem;">' + escapeHtml(String(data).substring(0, 66)) + (String(data).length > 66 ? '...' : '') + '</td></tr>';
                                 });
                                 tbl += '</tbody></table>';
                                 logsEl.innerHTML = tbl;
@@ -3405,7 +3527,7 @@
                     });
                 }
             } catch (error) {
-                container.innerHTML = `<div class="error">Failed to load transaction: ${error.message}</div>`;
+                container.innerHTML = '<div class="error">Failed to load transaction: ' + escapeHtml(error.message) + '</div>';
             }
         }
         function escapeHtml(str) {
@@ -3461,8 +3583,13 @@
         window.showTransactionDetail = showTransactionDetail;
 
         async function showAddressDetail(address) {
-            try { window.history.replaceState(null, '', '#' + '/address/' + address); } catch (e) {}
+            const addr = safeAddress(address);
+            if (!addr) { showToast('Invalid address', 'error'); return; }
+            address = addr;
+            currentDetailKey = 'address:' + address.toLowerCase();
             showView('addressDetail');
+            window.location.hash = '#/address/' + address;
+            try { window.history.replaceState(null, '', '#' + '/address/' + address); } catch (e) {}
             const container = document.getElementById('addressDetail');
             updateBreadcrumb('address', address);
             container.innerHTML = createSkeletonLoader('detail');
@@ -3480,12 +3607,13 @@
                 if (CHAIN_ID === 138) {
                     try {
                         const response = await fetchAPIWithRetry(`${BLOCKSCOUT_API}/v2/addresses/${address}`);
-                        a = normalizeAddress(response);
-                        if (!a) {
+                        var raw = response && (response.data !== undefined ? response.data : response.address !== undefined ? response.address : response.items && response.items[0] !== undefined ? response.items[0] : response);
+                        a = normalizeAddress(raw);
+                        if (!a || !a.hash) {
                             throw new Error('Address not found');
                         }
                     } catch (error) {
-                        container.innerHTML = `<div class="error">Failed to load address: ${error.message || 'Unknown error'}. <button onclick="showAddressDetail('${address}')" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>`;
+                        container.innerHTML = '<div class="error">Failed to load address: ' + escapeHtml(error.message || 'Unknown error') + '. <button onclick="showAddressDetail(\'' + address + '\')" class="btn btn-primary" style="margin-top: 1rem;">Retry</button></div>';
                         return;
                     }
                 } else {
@@ -3593,7 +3721,7 @@
                                 const divisor = Math.pow(10, parseInt(decimals, 10));
                                 const displayBalance = (Number(balance) / divisor).toLocaleString(undefined, { maximumFractionDigits: 6 });
                                 const type = token.type || b.token_type || 'ERC-20';
-                                tbl += '<tr><td><a href="#" onclick="showTokenDetail(\'' + contract + '\'); return false;">' + escapeHtml(symbol) + '</a></td><td class="hash" onclick="showAddressDetail(\'' + contract + '\')" style="cursor: pointer;">' + shortenHash(contract) + '</td><td>' + displayBalance + '</td><td>' + escapeHtml(type) + '</td></tr>';
+                                tbl += '<tr><td><a href="#/token/' + encodeURIComponent(contract) + '">' + escapeHtml(symbol) + '</a></td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(contract) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(contract)) + '</td><td>' + escapeHtml(displayBalance) + '</td><td>' + escapeHtml(type) + '</td></tr>';
                             });
                             tbl += '</tbody></table>';
                             el.innerHTML = tbl;
@@ -3621,7 +3749,7 @@
                                 const val = it.value ? formatEther(it.value) : '0';
                                 const block = it.block_number || it.block || '-';
                                 const txHash = it.transaction_hash || it.tx_hash || '-';
-                                tbl += '<tr><td onclick="showBlockDetail(\'' + block + '\')" style="cursor: pointer;">' + block + '</td><td class="hash" onclick="showAddressDetail(\'' + from + '\')" style="cursor: pointer;">' + shortenHash(from) + '</td><td class="hash" onclick="showAddressDetail(\'' + to + '\')" style="cursor: pointer;">' + shortenHash(to) + '</td><td>' + val + ' ETH</td><td class="hash" onclick="showTransactionDetail(\'' + txHash + '\')" style="cursor: pointer;">' + (txHash !== '-' ? shortenHash(txHash) : '-') + '</td></tr>';
+                                tbl += '<tr><td onclick="showBlockDetail(\'' + escapeHtml(block) + '\')" style="cursor: pointer;">' + escapeHtml(block) + '</td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(from) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(from)) + '</td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(to) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(to)) + '</td><td>' + escapeHtml(val) + ' ETH</td><td class="hash" onclick="showTransactionDetail(\'' + escapeHtml(txHash) + '\')" style="cursor: pointer;">' + (txHash !== '-' ? escapeHtml(shortenHash(txHash)) : '-') + '</td></tr>';
                             });
                             tbl += '</tbody></table>';
                             el.innerHTML = tbl;
@@ -3647,18 +3775,18 @@
                             }
                             el.dataset.loaded = '1';
                             if (!data) {
-                                el.innerHTML = '<p style="color: var(--text-light);">Contract source not indexed. <a href="https://explorer.d-bis.org/address/' + addr + '/contract" target="_blank" rel="noopener">Verify on Blockscout</a></p>';
+                                el.innerHTML = '<p style="color: var(--text-light);">Contract source not indexed. <a href="https://explorer.d-bis.org/address/' + encodeURIComponent(addr) + '/contract" target="_blank" rel="noopener">Verify on Blockscout</a></p>';
                                 return;
                             }
                             const abi = data.abi || data.abi_interface || [];
                             const abiStr = typeof abi === 'string' ? abi : JSON.stringify(abi, null, 2);
                             const bytecode = data.bytecode || data.deployed_bytecode || data.creation_bytecode || '-';
                             let html = '<p><strong>Verification:</strong> ' + (data.is_verified ? '<span class="badge badge-success">Verified</span>' : '<span class="badge badge-warning">Unverified</span>') + '</p>';
-                            html += '<div style="margin-top: 1rem;"><h4>ABI <button type="button" class="btn btn-primary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="navigator.clipboard.writeText(document.getElementById(\'contractAbiText\').textContent); showToast(\'Copied\', \'success\');">Copy</button> <a href="#" onclick="var blob=new Blob([document.getElementById(\'contractAbiText\').textContent],{type:\'application/json\'}); var a=document.createElement(\'a\'); a.href=URL.createObjectURL(blob); a.download=\'abi-' + addr.substring(0,10) + '.json\'; a.click(); URL.revokeObjectURL(a.href); return false;">Download</a></h4>';
+                            html += '<div style="margin-top: 1rem;"><h4>ABI <button type="button" class="btn btn-primary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="navigator.clipboard.writeText(document.getElementById(\'contractAbiText\').textContent); showToast(\'Copied\', \'success\');">Copy</button> <a href="javascript:void(0)" onclick="var blob=new Blob([document.getElementById(\'contractAbiText\').textContent],{type:\'application/json\'}); var a=document.createElement(\'a\'); a.href=URL.createObjectURL(blob); a.download=\'abi-' + addr.substring(0,10) + '.json\'; a.click(); URL.revokeObjectURL(a.href); return false;">Download</a></h4>';
                             html += '<pre id="contractAbiText" style="background: var(--light); padding: 1rem; border-radius: 8px; overflow: auto; max-height: 300px; font-size: 0.75rem;">' + escapeHtml(abiStr) + '</pre></div>';
                             html += '<div style="margin-top: 1rem;"><h4>Bytecode <button type="button" class="btn btn-primary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;" onclick="navigator.clipboard.writeText(document.getElementById(\'contractBytecodeText\').textContent); showToast(\'Copied\', \'success\');">Copy</button></h4>';
                             html += '<pre id="contractBytecodeText" style="background: var(--light); padding: 1rem; border-radius: 8px; overflow: auto; max-height: 150px; font-size: 0.7rem; word-break: break-all;">' + escapeHtml(String(bytecode).substring(0, 500)) + (String(bytecode).length > 500 ? '...' : '') + '</pre></div>';
-                            html += '<p style="margin-top: 0.5rem;"><a href="https://explorer.d-bis.org/address/' + addr + '/contract" target="_blank" rel="noopener" style="color: var(--primary);">Read / Write contract on Blockscout</a></p>';
+                            html += '<p style="margin-top: 0.5rem;"><a href="https://explorer.d-bis.org/address/' + encodeURIComponent(addr) + '/contract" target="_blank" rel="noopener" style="color: var(--primary);">Read / Write contract on Blockscout</a></p>';
                             el.innerHTML = html;
                         } catch (e) {
                             el.innerHTML = '<p class="error">Failed to load contract info</p>';
@@ -3679,7 +3807,7 @@
                             if (txs.data && txs.data.length > 0) {
                                 let txHtml = '<table class="table"><thead><tr><th>Hash</th><th>Block</th><th>From</th><th>To</th><th>Value</th></tr></thead><tbody>';
                                 txs.data.forEach(function(tx) {
-                                    txHtml += '<tr onclick="showTransactionDetail(\'' + tx.hash + '\')" style="cursor: pointer;"><td class="hash">' + shortenHash(tx.hash) + '</td><td>' + tx.block_number + '</td><td class="hash">' + shortenHash(tx.from) + '</td><td class="hash">' + shortenHash(tx.to || 'N/A') + '</td><td>' + formatEther(tx.value || '0') + ' ETH</td></tr>';
+                                    txHtml += '<tr onclick="showTransactionDetail(\'' + escapeHtml(tx.hash) + '\')" style="cursor: pointer;"><td class="hash">' + escapeHtml(shortenHash(tx.hash)) + '</td><td>' + escapeHtml(String(tx.block_number)) + '</td><td class="hash">' + escapeHtml(shortenHash(tx.from)) + '</td><td class="hash">' + escapeHtml(shortenHash(tx.to || 'N/A')) + '</td><td>' + escapeHtml(formatEther(tx.value || '0')) + ' ETH</td></tr>';
                                 });
                                 txHtml += '</tbody></table>';
                                 txContainer.innerHTML = txHtml;
@@ -3695,15 +3823,17 @@
                     container.innerHTML = '<div class="error">Address not found</div>';
                 }
             } catch (error) {
-                container.innerHTML = `<div class="error">Failed to load address: ${error.message}</div>`;
+                container.innerHTML = '<div class="error">Failed to load address: ' + escapeHtml(error.message) + '</div>';
             }
         }
         window.showAddressDetail = showAddressDetail;
 
         async function showTokenDetail(tokenAddress) {
             if (!/^0x[a-fA-F0-9]{40}$/.test(tokenAddress)) return;
-            try { window.history.replaceState(null, '', '#' + '/token/' + tokenAddress); } catch (e) {}
+            currentDetailKey = 'token:' + tokenAddress.toLowerCase();
             showView('tokenDetail');
+            window.location.hash = '#/token/' + tokenAddress;
+            try { window.history.replaceState(null, '', '#' + '/token/' + tokenAddress); } catch (e) {}
             var container = document.getElementById('tokenDetail');
             updateBreadcrumb('token', tokenAddress);
             container.innerHTML = createSkeletonLoader('detail');
@@ -3718,7 +3848,7 @@
                     } catch (e) {}
                 }
                 if (!data) {
-                    container.innerHTML = '<p class="error">Token not found or not indexed.</p><p><a href="#" onclick="showAddressDetail(\'' + tokenAddress + '\'); return false;">View as address</a></p>';
+                    container.innerHTML = '<p class="error">Token not found or not indexed.</p><p><a href="#/address/' + encodeURIComponent(tokenAddress) + '">View as address</a></p>';
                     return;
                 }
                 var name = data.name || '-';
@@ -3732,7 +3862,7 @@
                     transfersResp = await fetchAPIWithRetry(BLOCKSCOUT_API + '/v2/tokens/' + tokenAddress + '/transfers?page=1&page_size=10').catch(function() { return { items: [] }; });
                 } catch (e) {}
                 var transfers = (transfersResp && transfersResp.items) ? transfersResp.items : [];
-                var html = '<div class="info-row"><div class="info-label">Contract</div><div class="info-value hash" onclick="showAddressDetail(\'' + tokenAddress + '\')" style="cursor: pointer;">' + tokenAddress + '</div></div>';
+                var html = '<div class="info-row"><div class="info-label">Contract</div><div class="info-value hash" onclick="showAddressDetail(\'' + escapeHtml(tokenAddress) + '\')" style="cursor: pointer;">' + escapeHtml(tokenAddress) + '</div></div>';
                 html += '<div class="info-row"><div class="info-label">Name</div><div class="info-value">' + escapeHtml(name) + '</div></div>';
                 html += '<div class="info-row"><div class="info-label">Symbol</div><div class="info-value">' + escapeHtml(symbol) + '</div></div>';
                 html += '<div class="info-row"><div class="info-label">Decimals</div><div class="info-value">' + decimals + '</div></div>';
@@ -3750,7 +3880,7 @@
                         var dec = tr.token?.decimals != null ? tr.token.decimals : decimals;
                         var v = Number(val) / Math.pow(10, parseInt(dec, 10));
                         var txHash = tr.transaction_hash || tr.tx_hash || '';
-                        html += '<tr><td class="hash" onclick="showAddressDetail(\'' + from + '\')" style="cursor: pointer;">' + shortenHash(from) + '</td><td class="hash" onclick="showAddressDetail(\'' + to + '\')" style="cursor: pointer;">' + shortenHash(to) + '</td><td>' + v.toLocaleString(undefined, { maximumFractionDigits: 6 }) + '</td><td class="hash" onclick="showTransactionDetail(\'' + txHash + '\')" style="cursor: pointer;">' + (txHash ? shortenHash(txHash) : '-') + '</td></tr>';
+                        html += '<tr><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(from) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(from)) + '</td><td class="hash" onclick="showAddressDetail(\'' + escapeHtml(to) + '\')" style="cursor: pointer;">' + escapeHtml(shortenHash(to)) + '</td><td>' + escapeHtml(v.toLocaleString(undefined, { maximumFractionDigits: 6 })) + '</td><td class="hash" onclick="showTransactionDetail(\'' + escapeHtml(txHash) + '\')" style="cursor: pointer;">' + (txHash ? escapeHtml(shortenHash(txHash)) : '-') + '</td></tr>';
                     });
                     html += '</tbody></table>';
                 }
@@ -3764,8 +3894,9 @@
 
         async function showNftDetail(contractAddress, tokenId) {
             if (!/^0x[a-fA-F0-9]{40}$/.test(contractAddress)) return;
-            try { window.history.replaceState(null, '', '#' + '/nft/' + contractAddress + '/' + tokenId); } catch (e) {}
+            currentDetailKey = 'nft:' + contractAddress.toLowerCase() + ':' + tokenId;
             showView('nftDetail');
+            try { window.history.replaceState(null, '', '#' + '/nft/' + contractAddress + '/' + tokenId); } catch (e) {}
             var container = document.getElementById('nftDetail');
             updateBreadcrumb('nft', contractAddress, tokenId);
             container.innerHTML = createSkeletonLoader('detail');
@@ -3779,7 +3910,7 @@
                         if (r) { data = r; break; }
                     } catch (e) {}
                 }
-                var html = '<div class="info-row"><div class="info-label">Contract</div><div class="info-value hash" onclick="showAddressDetail(\'' + contractAddress + '\')" style="cursor: pointer;">' + contractAddress + '</div></div>';
+                var html = '<div class="info-row"><div class="info-label">Contract</div><div class="info-value hash" onclick="showAddressDetail(\'' + escapeHtml(contractAddress) + '\')" style="cursor: pointer;">' + escapeHtml(contractAddress) + '</div></div>';
                 html += '<div class="info-row"><div class="info-label">Token ID</div><div class="info-value">' + escapeHtml(String(tokenId)) + '</div></div>';
                 if (data) {
                     if (data.metadata && data.metadata.image) {
@@ -3787,9 +3918,9 @@
                     }
                     if (data.name) html += '<div class="info-row"><div class="info-label">Name</div><div class="info-value">' + escapeHtml(data.name) + '</div></div>';
                     if (data.description) html += '<div class="info-row"><div class="info-label">Description</div><div class="info-value">' + escapeHtml(data.description) + '</div></div>';
-                    if (data.owner) html += '<div class="info-row"><div class="info-label">Owner</div><div class="info-value hash" onclick="showAddressDetail(\'' + (data.owner.hash || data.owner) + '\')" style="cursor: pointer;">' + (data.owner.hash || data.owner) + '</div></div>';
+                    if (data.owner) { var ownerAddr = (data.owner.hash || data.owner); html += '<div class="info-row"><div class="info-label">Owner</div><div class="info-value hash" onclick="showAddressDetail(\'' + escapeHtml(ownerAddr) + '\')" style="cursor: pointer;">' + escapeHtml(ownerAddr) + '</div></div>'; }
                 }
-                html += '<p style="margin-top: 1rem;"><a href="https://explorer.d-bis.org/token/' + contractAddress + '/instance/' + tokenId + '" target="_blank" rel="noopener" style="color: var(--primary);">View on Blockscout</a></p>';
+                html += '<p style="margin-top: 1rem;"><a href="https://explorer.d-bis.org/token/' + encodeURIComponent(contractAddress) + '/instance/' + encodeURIComponent(tokenId) + '" target="_blank" rel="noopener" style="color: var(--primary);">View on Blockscout</a></p>';
                 container.innerHTML = html;
             } catch (err) {
                 container.innerHTML = '<div class="error">Failed to load NFT: ' + escapeHtml(err.message || 'Unknown') + '</div>';
@@ -3871,6 +4002,7 @@
                 showToast('Failed to load search results: ' + (error.message || 'Unknown error'), 'error');
             }
         }
+        window.handleSearch = handleSearch;
 
         function getTimeAgo(date) {
             if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
@@ -3972,8 +4104,13 @@
             }
         });
 
+        function setLiveRegion(text) {
+            var el = document.getElementById('explorerLiveRegion');
+            if (el) el.textContent = text || '';
+        }
         // Toast notification function
         function showToast(message, type = 'info', duration = 3000) {
+            if (type === 'error') setLiveRegion(message);
             const toast = document.createElement('div');
             toast.className = `toast toast-${type}`;
             toast.style.cssText = `
diff --git a/frontend/src/components/common/Table.tsx b/frontend/src/components/common/Table.tsx
index a42de56..4ce7ba7 100644
--- a/frontend/src/components/common/Table.tsx
+++ b/frontend/src/components/common/Table.tsx
@@ -11,9 +11,11 @@ interface TableProps<T> {
   columns: Column<T>[]
   data: T[]
   className?: string
+  /** Stable key for each row (e.g. row => row.id or row => row.hash). Falls back to index if not provided. */
+  keyExtractor?: (row: T) => string | number
 }
 
-export function Table<T>({ columns, data, className }: TableProps<T>) {
+export function Table<T>({ columns, data, className, keyExtractor }: TableProps<T>) {
   return (
     <div className={clsx('overflow-x-auto', className)}>
       <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
@@ -34,7 +36,7 @@ export function Table<T>({ columns, data, className }: TableProps<T>) {
         </thead>
         <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
           {data.map((row, rowIndex) => (
-            <tr key={rowIndex} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+            <tr key={keyExtractor ? keyExtractor(row) : rowIndex} className="hover:bg-gray-50 dark:hover:bg-gray-800">
               {columns.map((column, colIndex) => (
                 <td
                   key={colIndex}
diff --git a/frontend/src/pages/addresses/[address].tsx b/frontend/src/pages/addresses/[address].tsx
index 4f0acaa..2c2631c 100644
--- a/frontend/src/pages/addresses/[address].tsx
+++ b/frontend/src/pages/addresses/[address].tsx
@@ -5,25 +5,7 @@ import { useParams } from 'next/navigation'
 import { Card } from '@/components/common/Card'
 import { Address } from '@/components/blockchain/Address'
 import { Table } from '@/components/common/Table'
-
-interface AddressInfo {
-  address: string
-  chain_id: number
-  transaction_count: number
-  token_count: number
-  is_contract: boolean
-  label?: string
-  tags: string[]
-}
-
-interface Transaction {
-  hash: string
-  block_number: number
-  from_address: string
-  to_address?: string
-  value: string
-  status?: number
-}
+import { addressesApi, AddressInfo, TransactionSummary } from '@/services/api/addresses'
 
 export default function AddressDetailPage() {
   const params = useParams()
@@ -31,7 +13,7 @@ export default function AddressDetailPage() {
   const chainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '138')
 
   const [addressInfo, setAddressInfo] = useState<AddressInfo | null>(null)
-  const [transactions, setTransactions] = useState<Transaction[]>([])
+  const [transactions, setTransactions] = useState<TransactionSummary[]>([])
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
@@ -41,25 +23,21 @@ export default function AddressDetailPage() {
 
   const loadAddressInfo = async () => {
     try {
-      const response = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/api/v1/addresses/${chainId}/${address}`
-      )
-      const data = await response.json()
-      setAddressInfo(data.data)
+      const response = await addressesApi.get(chainId, address)
+      setAddressInfo(response.data ?? null)
     } catch (error) {
       console.error('Failed to load address info:', error)
+      setAddressInfo(null)
     }
   }
 
   const loadTransactions = async () => {
     try {
-      const response = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/api/v1/transactions?chain_id=${chainId}&from_address=${address}&page=1&page_size=20`
-      )
-      const data = await response.json()
-      setTransactions(data.data || [])
+      const response = await addressesApi.getTransactions(chainId, address, 1, 20)
+      setTransactions(response.data || [])
     } catch (error) {
       console.error('Failed to load transactions:', error)
+      setTransactions([])
     } finally {
       setLoading(false)
     }
@@ -76,7 +54,7 @@ export default function AddressDetailPage() {
   const transactionColumns = [
     {
       header: 'Hash',
-      accessor: (tx: Transaction) => (
+      accessor: (tx: TransactionSummary) => (
         <a href={`/transactions/${tx.hash}`} className="text-primary-600 hover:underline">
           <Address address={tx.hash} truncate />
         </a>
@@ -84,15 +62,15 @@ export default function AddressDetailPage() {
     },
     {
       header: 'Block',
-      accessor: (tx: Transaction) => tx.block_number,
+      accessor: (tx: TransactionSummary) => tx.block_number,
     },
     {
       header: 'To',
-      accessor: (tx: Transaction) => tx.to_address ? <Address address={tx.to_address} truncate /> : 'Contract Creation',
+      accessor: (tx: TransactionSummary) => tx.to_address ? <Address address={tx.to_address} truncate /> : 'Contract Creation',
     },
     {
       header: 'Value',
-      accessor: (tx: Transaction) => {
+      accessor: (tx: TransactionSummary) => {
         const value = BigInt(tx.value)
         const eth = Number(value) / 1e18
         return eth > 0 ? `${eth.toFixed(4)} ETH` : '0 ETH'
@@ -100,7 +78,7 @@ export default function AddressDetailPage() {
     },
     {
       header: 'Status',
-      accessor: (tx: Transaction) => (
+      accessor: (tx: TransactionSummary) => (
         <span className={tx.status === 1 ? 'text-green-600' : 'text-red-600'}>
           {tx.status === 1 ? 'Success' : 'Failed'}
         </span>
@@ -148,7 +126,7 @@ export default function AddressDetailPage() {
       </Card>
 
       <Card title="Transactions">
-        <Table columns={transactionColumns} data={transactions} />
+        <Table columns={transactionColumns} data={transactions} keyExtractor={(tx) => tx.hash} />
       </Card>
     </div>
   )
diff --git a/frontend/src/pages/blocks/[number].tsx b/frontend/src/pages/blocks/[number].tsx
index 2451e30..c5ea643 100644
--- a/frontend/src/pages/blocks/[number].tsx
+++ b/frontend/src/pages/blocks/[number].tsx
@@ -9,15 +9,22 @@ import Link from 'next/link'
 
 export default function BlockDetailPage() {
   const params = useParams()
-  const blockNumber = parseInt((params?.number as string) ?? '0')
+  const rawNumber = (params?.number as string) ?? ''
+  const blockNumber = parseInt(rawNumber, 10)
+  const isValidBlock = rawNumber !== '' && !Number.isNaN(blockNumber) && blockNumber >= 0
   const chainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '138')
-  
+
   const [block, setBlock] = useState<Block | null>(null)
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
+    if (!isValidBlock) {
+      setLoading(false)
+      setBlock(null)
+      return
+    }
     loadBlock()
-  }, [blockNumber])
+  }, [blockNumber, isValidBlock])
 
   const loadBlock = async () => {
     setLoading(true)
@@ -31,6 +38,10 @@ export default function BlockDetailPage() {
     }
   }
 
+  if (!isValidBlock) {
+    return <div className="p-8">Invalid block number. Please use a valid block number from the URL.</div>
+  }
+
   if (loading) {
     return <div className="p-8">Loading block...</div>
   }
diff --git a/frontend/src/pages/search/index.tsx b/frontend/src/pages/search/index.tsx
index 3d1f867..4fa64c0 100644
--- a/frontend/src/pages/search/index.tsx
+++ b/frontend/src/pages/search/index.tsx
@@ -32,9 +32,14 @@ export default function SearchPage() {
         `${process.env.NEXT_PUBLIC_API_URL}/api/v1/search?q=${encodeURIComponent(query)}`
       )
       const data = await response.json()
+      if (!response.ok) {
+        setResults([])
+        return
+      }
       setResults(data.results || [])
     } catch (error) {
       console.error('Search failed:', error)
+      setResults([])
     } finally {
       setLoading(false)
     }
@@ -67,7 +72,7 @@ export default function SearchPage() {
         <Card title="Search Results">
           <div className="space-y-4">
             {results.map((result, index) => (
-              <div key={index} className="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-0">
+              <div key={result.data?.hash ?? result.data?.address ?? result.data?.number ?? index} className="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-0">
                 {result.type === 'block' && result.data.number && (
                   <Link href={`/blocks/${result.data.number}`} className="text-primary-600 hover:underline">
                     Block #{result.data.number}
diff --git a/frontend/src/pages/transactions/[hash].tsx b/frontend/src/pages/transactions/[hash].tsx
index 2e86e1d..b450295 100644
--- a/frontend/src/pages/transactions/[hash].tsx
+++ b/frontend/src/pages/transactions/[hash].tsx
@@ -5,26 +5,7 @@ import { useParams } from 'next/navigation'
 import { Card } from '@/components/common/Card'
 import { Address } from '@/components/blockchain/Address'
 import Link from 'next/link'
-
-interface Transaction {
-  chain_id: number
-  hash: string
-  block_number: number
-  block_hash: string
-  transaction_index: number
-  from_address: string
-  to_address?: string
-  value: string
-  gas_price?: number
-  max_fee_per_gas?: number
-  max_priority_fee_per_gas?: number
-  gas_limit: number
-  gas_used?: number
-  status?: number
-  input_data?: string
-  contract_address?: string
-  created_at: string
-}
+import { transactionsApi, Transaction } from '@/services/api/transactions'
 
 export default function TransactionDetailPage() {
   const params = useParams()
@@ -41,13 +22,11 @@ export default function TransactionDetailPage() {
   const loadTransaction = async () => {
     setLoading(true)
     try {
-      const response = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/api/v1/transactions/${chainId}/${hash}`
-      )
-      const data = await response.json()
-      setTransaction(data.data)
+      const response = await transactionsApi.get(chainId, hash)
+      setTransaction(response.data ?? null)
     } catch (error) {
       console.error('Failed to load transaction:', error)
+      setTransaction(null)
     } finally {
       setLoading(false)
     }
diff --git a/frontend/src/services/api/addresses.ts b/frontend/src/services/api/addresses.ts
new file mode 100644
index 0000000..ae9d899
--- /dev/null
+++ b/frontend/src/services/api/addresses.ts
@@ -0,0 +1,53 @@
+import { apiClient, ApiResponse } from './client'
+
+export interface AddressInfo {
+  address: string
+  chain_id: number
+  transaction_count: number
+  token_count: number
+  is_contract: boolean
+  label?: string
+  tags: string[]
+}
+
+export interface AddressTransactionsParams {
+  chain_id: number
+  from_address: string
+  page?: number
+  page_size?: number
+}
+
+export interface TransactionSummary {
+  hash: string
+  block_number: number
+  from_address: string
+  to_address?: string
+  value: string
+  status?: number
+}
+
+export const addressesApi = {
+  get: async (chainId: number, address: string): Promise<ApiResponse<AddressInfo>> => {
+    return apiClient.get<AddressInfo>(`/api/v1/addresses/${chainId}/${address}`)
+  },
+
+  getTransactions: async (
+    chainId: number,
+    address: string,
+    page = 1,
+    pageSize = 20
+  ): Promise<ApiResponse<TransactionSummary[]>> => {
+    const params = new URLSearchParams({
+      chain_id: chainId.toString(),
+      from_address: address,
+      page: page.toString(),
+      page_size: pageSize.toString(),
+    })
+    const raw = (await apiClient.get(`/api/v1/transactions?${params.toString()}`)) as unknown as {
+      data?: TransactionSummary[]
+      items?: TransactionSummary[]
+    }
+    const data = Array.isArray(raw?.data) ? raw.data : Array.isArray(raw?.items) ? raw.items : []
+    return { data }
+  },
+}
diff --git a/frontend/src/services/api/blocks.ts b/frontend/src/services/api/blocks.ts
index 6b1a2cb..3c4bba3 100644
--- a/frontend/src/services/api/blocks.ts
+++ b/frontend/src/services/api/blocks.ts
@@ -22,6 +22,12 @@ export interface BlockListParams {
   order?: 'asc' | 'desc'
 }
 
+/** Normalize list response: backend may return { data: T[] } or { items: T[] }. */
+function normalizeListResponse<T>(raw: { data?: T[]; items?: T[] }): ApiResponse<T[]> {
+  const data = Array.isArray(raw?.data) ? raw.data : Array.isArray(raw?.items) ? raw.items : []
+  return { data }
+}
+
 export const blocksApi = {
   list: async (params: BlockListParams): Promise<ApiResponse<Block[]>> => {
     const queryParams = new URLSearchParams()
@@ -34,7 +40,8 @@ export const blocksApi = {
     if (params.sort) queryParams.append('sort', params.sort)
     if (params.order) queryParams.append('order', params.order)
 
-    return apiClient.get<Block[]>(`/api/v1/blocks?${queryParams.toString()}`)
+    const raw = (await apiClient.get(`/api/v1/blocks?${queryParams.toString()}`)) as unknown as { data?: Block[]; items?: Block[] }
+    return normalizeListResponse(raw)
   },
 
   getByNumber: async (chainId: number, number: number): Promise<ApiResponse<Block>> => {
diff --git a/frontend/src/services/api/transactions.ts b/frontend/src/services/api/transactions.ts
new file mode 100644
index 0000000..81b0f11
--- /dev/null
+++ b/frontend/src/services/api/transactions.ts
@@ -0,0 +1,27 @@
+import { apiClient, ApiResponse } from './client'
+
+export interface Transaction {
+  chain_id: number
+  hash: string
+  block_number: number
+  block_hash: string
+  transaction_index: number
+  from_address: string
+  to_address?: string
+  value: string
+  gas_price?: number
+  max_fee_per_gas?: number
+  max_priority_fee_per_gas?: number
+  gas_limit: number
+  gas_used?: number
+  status?: number
+  input_data?: string
+  contract_address?: string
+  created_at: string
+}
+
+export const transactionsApi = {
+  get: async (chainId: number, hash: string): Promise<ApiResponse<Transaction>> => {
+    return apiClient.get<Transaction>(`/api/v1/transactions/${chainId}/${hash}`)
+  },
+}
diff --git a/scripts/deploy-frontend-to-vmid5000.sh b/scripts/deploy-frontend-to-vmid5000.sh
index 4dd10c7..060cd9f 100755
--- a/scripts/deploy-frontend-to-vmid5000.sh
+++ b/scripts/deploy-frontend-to-vmid5000.sh
@@ -11,6 +11,7 @@ SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 REPO_ROOT="$(cd "$SCRIPT_DIR/../.." && pwd)"
 FRONTEND_SOURCE="${REPO_ROOT}/explorer-monorepo/frontend/public/index.html"
 [ -f "$FRONTEND_SOURCE" ] || FRONTEND_SOURCE="${SCRIPT_DIR}/../frontend/public/index.html"
+FRONTEND_PUBLIC="$(dirname "$FRONTEND_SOURCE")"
 PROXMOX_R630_02="${PROXMOX_HOST_R630_02:-192.168.11.12}"
 
 echo "=========================================="
@@ -77,7 +78,45 @@ else
 fi
 echo ""
 
-# Step 5: Update nginx (skip when remote; full config via ensure-explorer-nginx-api-proxy.sh)
+# Step 4b: Deploy favicon and apple-touch-icon
+echo "=== Step 4b: Deploying icons ==="
+for ASSET in apple-touch-icon.png favicon.ico; do
+    SRC="${FRONTEND_PUBLIC}/${ASSET}"
+    if [ ! -f "$SRC" ]; then
+        echo "⚠️  Skip $ASSET (not found)"
+        continue
+    fi
+    if [ "$DEPLOY_METHOD" = "direct" ]; then
+        cp "$SRC" "/var/www/html/$ASSET"
+        chown www-data:www-data "/var/www/html/$ASSET" 2>/dev/null || true
+        echo "✅ $ASSET deployed"
+    elif [ "$DEPLOY_METHOD" = "remote" ]; then
+        scp -o ConnectTimeout=10 -o StrictHostKeyChecking=no "$SRC" root@${PROXMOX_R630_02}:/tmp/"$ASSET"
+        ssh -o ConnectTimeout=10 -o StrictHostKeyChecking=no root@${PROXMOX_R630_02} "pct push $VMID /tmp/$ASSET /var/www/html/$ASSET --perms 0644 && pct exec $VMID -- chown www-data:www-data /var/www/html/$ASSET"
+        echo "✅ $ASSET deployed via $PROXMOX_R630_02"
+    else
+        pct push $VMID "$SRC" "/var/www/html/$ASSET"
+        $EXEC_PREFIX chown www-data:www-data "/var/www/html/$ASSET" 2>/dev/null || true
+        echo "✅ $ASSET deployed"
+    fi
+done
+echo ""
+
+# Step 5 (remote): Apply nginx config so /favicon.ico and /apple-touch-icon.png are served
+if [ "$DEPLOY_METHOD" = "remote" ]; then
+    echo "=== Step 5 (remote): Applying nginx config for icons ==="
+    FIX_NGINX_SCRIPT="${REPO_ROOT}/explorer-monorepo/scripts/fix-nginx-serve-custom-frontend.sh"
+    if [ -f "$FIX_NGINX_SCRIPT" ]; then
+        scp -o ConnectTimeout=10 -o StrictHostKeyChecking=no "$FIX_NGINX_SCRIPT" root@${PROXMOX_R630_02}:/tmp/fix-nginx-explorer.sh
+        ssh -o ConnectTimeout=10 -o StrictHostKeyChecking=no root@${PROXMOX_R630_02} "pct push $VMID /tmp/fix-nginx-explorer.sh /tmp/fix-nginx-explorer.sh --perms 0755 && pct exec $VMID -- /tmp/fix-nginx-explorer.sh"
+        echo "✅ Nginx config applied (favicon and apple-touch-icon locations)"
+    else
+        echo "⚠️  Nginx fix script not found ($FIX_NGINX_SCRIPT); icons may still 404 until nginx is updated on VM"
+    fi
+    echo ""
+fi
+
+# Step 5 (local/pct): Update nginx configuration
 if [ "$DEPLOY_METHOD" != "remote" ]; then
 echo "=== Step 5: Updating nginx configuration ==="
 $EXEC_PREFIX bash << 'NGINX_UPDATE'
@@ -158,8 +197,8 @@ else
     exit 1
 fi
 
-# Test HTTP endpoint
-HTTP_RESPONSE=$(run_in_vm "curl -s http://localhost/ 2>/dev/null | head -5")
+# Test HTTP endpoint (non-fatal: do not exit on failure)
+HTTP_RESPONSE=$(run_in_vm "curl -s --max-time 5 http://localhost/ 2>/dev/null | head -5" 2>/dev/null) || true
 if echo "$HTTP_RESPONSE" | grep -q "SolaceScanScout\|<!DOCTYPE html"; then
     echo "✅ Frontend is accessible via nginx"
 else