diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..7f8d714
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,33 @@
+---
+name: Bug Report
+about: Report a bug or unexpected behavior
+title: "[BUG] "
+labels: bug
+assignees: ''
+---
+
+## Description
+A clear and concise description of the bug.
+
+## Steps to Reproduce
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+## Expected Behavior
+What you expected to happen.
+
+## Actual Behavior
+What actually happened.
+
+## Screenshots
+If applicable, add screenshots to help explain your problem.
+
+## Environment
+- **Browser**: [e.g., Chrome 120, Firefox 121]
+- **OS**: [e.g., Windows 11, macOS 14, Ubuntu 22.04]
+- **Network**: [e.g., Ethereum Mainnet, Arbitrum, Localhost]
+
+## Additional Context
+Add any other context about the problem here.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..0ecf165
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,37 @@
+## Description
+
+<!-- Brief description of the changes in this PR -->
+
+## Related Issue
+
+<!-- Link to the related issue (e.g., Closes #123) -->
+
+## Type of Change
+
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Documentation update
+- [ ] Refactoring
+- [ ] Performance improvement
+- [ ] Other (please describe):
+
+## Changes Made
+
+<!-- List the main changes made in this PR -->
+
+## Screenshots (if applicable)
+
+<!-- Add screenshots to help explain your changes -->
+
+## Checklist
+
+- [ ] I have run `npm run format:fix` and `npm run lint:fix`
+- [ ] I have run `npm run typecheck` with no errors
+- [ ] I have run tests with `npm run test:run`
+- [ ] I have tested my changes locally
+- [ ] I have updated documentation if needed
+- [ ] My code follows the project's architecture patterns
+
+## Additional Notes
+
+<!-- Any additional information that reviewers should know -->
diff --git a/.github/workflows/deploy-pr-preview.yml b/.github/workflows/deploy-pr-preview.yml
index de09b11..e725df4 100644
--- a/.github/workflows/deploy-pr-preview.yml
+++ b/.github/workflows/deploy-pr-preview.yml
@@ -1,8 +1,7 @@
-name: Deploy PR Preview to Netlify
+name: Build and Deploy PR Preview
 
 on:
-  workflow_dispatch:
-  pull_request:
+  pull_request_target:
     types: [opened, synchronize, reopened]
 
 permissions:
@@ -10,11 +9,13 @@ permissions:
   pull-requests: write
 
 jobs:
-  deploy-preview:
+  build-and-deploy:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: Checkout PR head
         uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -22,7 +23,7 @@ jobs:
           node-version: '22'
           cache: 'npm'
           cache-dependency-path: './package-lock.json'
-      
+
       - name: Update npm to v11
         run: npm install -g npm@11
 
@@ -36,8 +37,8 @@ jobs:
           publish-dir: './dist'
           production-deploy: false
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          deploy-message: "PR Preview - ${{ github.event.pull_request.title || github.ref_name }}"
-          alias: pr-${{ github.event.pull_request.number || github.run_id }}
+          deploy-message: "PR Preview #${{ github.event.pull_request.number }}"
+          alias: pr-${{ github.event.pull_request.number }}
           enable-pull-request-comment: false
           enable-commit-comment: false
         env:
@@ -45,25 +46,25 @@ jobs:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
 
       - name: Comment PR with Preview URL
-        if: github.event_name == 'pull_request'
         uses: actions/github-script@v7
         with:
           script: |
+            const prNumber = ${{ github.event.pull_request.number }};
             const deployUrl = '${{ steps.netlify.outputs.deploy-url }}';
-            const body = `🚀 **Preview:** ${deployUrl}\n📝 **Commit:** \`${{ github.sha }}\``;
-            
+            const body = `🚀 **Preview:** ${deployUrl}\n📝 **Commit:** \`${{ github.event.pull_request.head.sha }}\``;
+
             // Find existing comment
             const { data: comments } = await github.rest.issues.listComments({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              issue_number: context.issue.number,
+              issue_number: prNumber,
             });
-            
-            const botComment = comments.find(comment => 
-              comment.user.type === 'Bot' && 
+
+            const botComment = comments.find(comment =>
+              comment.user.type === 'Bot' &&
               comment.body.includes('Preview:')
             );
-            
+
             if (botComment) {
               await github.rest.issues.updateComment({
                 owner: context.repo.owner,
@@ -75,7 +76,7 @@ jobs:
               await github.rest.issues.createComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
-                issue_number: context.issue.number,
+                issue_number: prNumber,
                 body: body
               });
             }
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
new file mode 100644
index 0000000..8d1918a
--- /dev/null
+++ b/.github/workflows/e2e.yml
@@ -0,0 +1,42 @@
+name: E2E Tests
+
+on:
+  pull_request:
+    branches: [dev]
+  workflow_dispatch:
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Build application
+        run: npm run build
+
+      - name: Run E2E tests
+        run: npm run test:e2e
+        env:
+          CI: true
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 0000000..cc28b07
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,20 @@
+name: Lint
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+        with:
+          persist-credentials: false
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+      - name: Run Biome
+        run: biome ci .
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 0810b48..827befe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,4 +52,10 @@ ehthumbs.db
 .Trashes
 
 # Dev files
-src/config/dev.json
\ No newline at end of file
+src/config/dev.json
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
index cb09156..651a002 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -12,13 +12,18 @@ OpenScan is a trustless, open-source, standalone web-app and multi-chain blockch
 
 ```bash
 npm start
-# Runs on http://localhost:3000
+# Runs on http://localhost:3030
 ```
 
 ### Build for Production
 
 ```bash
-npm run build
+# Production build
+npm run build:production
+
+# Staging build
+npm run build:staging
+
 # Output: dist/
 ```
 
@@ -28,10 +33,20 @@ npm run build
 npm run typecheck
 ```
 
-### Formatting
+### Formatting and Linting
 
 ```bash
+# Check formatting (dry run)
+npm run format
+
+# Fix formatting issues automatically
 npm run format:fix
+
+# Check linting issues (dry run)
+npm run lint
+
+# Fix linting issues automatically
+npm run lint:fix
 ```
 
 ### Test Environment with Local Node
@@ -79,11 +94,11 @@ OpenScan follows a layered architecture with clear separation between data fetch
    - Returns `DataWithMetadata<T>` when using parallel strategy, containing:
      - `data`: The primary result (from first successful provider)
      - `metadata`: Optional RPCMetadata with all provider responses, hashes, and inconsistency flags
-   - 30-second in-memory cache keyed by `chainId:type:identifier`
+   - 30-second in-memory cache keyed by `networkId:type:identifier`
    - Supports trace operations (debug_traceTransaction, etc.) for localhost networks only
 
 5. **Hook Layer** (`hooks/`) - React integration
-   - `useDataService(chainId)`: Creates DataService instance with strategy from settings
+   - `useDataService(networkId)`: Creates DataService instance with strategy from settings
    - `useProviderSelection`: Manages user's selected RPC provider in parallel mode
    - `useSelectedData`: Extracts data from specific provider based on user selection
 
@@ -166,8 +181,56 @@ OpenScan includes special support for localhost development:
 ## Code Style
 
 - **Biome** for formatting and linting (config: `biome.json`)
+  - Line width: 100 characters
+  - Indentation: 2 spaces
+  - Scope: `src/**/*.ts`, `src/**/*.tsx`, `src/**/*.json` (excludes CSS files)
+  - Enabled rules: All recommended Biome linting rules
+  - Use `npm run format:fix` to auto-format code before committing
+  - Use `npm run lint:fix` to auto-fix linting issues (max 1024 diagnostics shown)
 - **TypeScript** with strict mode (`noImplicitAny`, `noImplicitReturns`, `noUncheckedIndexedAccess`)
 - **React 19** with functional components and hooks
+- **CSS** All styles should be on `src/styles` folder, avoid using in line component styles.
+
+## Coding Standards and Workflow
+
+### Before Committing Code
+
+ALWAYS run these commands before committing to ensure code quality:
+
+```bash
+# 1. Fix formatting issues
+npm run format:fix
+
+# 2. Fix linting issues
+npm run lint:fix
+
+# 3. Verify type safety
+npm run typecheck
+
+# 4. Run tests (if applicable)
+npm run test:run
+```
+
+### Commits
+
+- Follow the convetional commit standard v1.0.0
+- Commit without claude attribution
+
+### Code Quality Requirements
+
+- All code must pass Biome formatting and linting checks
+- All TypeScript code must pass type checking with zero errors
+- Follow the 100-character line width limit
+- Use 2-space indentation consistently
+- Adhere to Biome's recommended linting rules
+- Keep documentation up to date.
+
+### When Claude Code Modifies Files
+
+- Run `npm run format:fix` and `npm run lint:fix` after making changes
+- Address any remaining linting warnings that cannot be auto-fixed
+- Ensure TypeScript compilation succeeds with `npm run typecheck`
+- Do not commit code with formatting, linting, or type errors
 
 ## Important Patterns
 
@@ -187,9 +250,9 @@ OpenScan includes special support for localhost development:
 
 ### When Working with Cache
 
-- Cache keys format: `${chainId}:${type}:${identifier}`
+- Cache keys format: `${networkId}:${type}:${identifier}`
 - Don't cache "latest" block queries
-- Clear cache when switching networks using `clearCacheForChain(chainId)`
+- Clear cache when switching networks using `clearCacheForChain(networkId)`
 - Default timeout: 30 seconds
 
 ### RPC Strategy Switching
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..f465ada
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,163 @@
+# Contributing to OpenScan
+
+Thank you for your interest in contributing to OpenScan! This guide will help you get started.
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js v22
+- npm
+
+### Setup
+
+1. Fork the repository on GitHub
+2. Clone your fork:
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/openscan.git
+   cd openscan
+   ```
+3. Install dependencies:
+   ```bash
+   npm install
+   ```
+4. Start the development server:
+   ```bash
+   npm start
+   ```
+   The app will be available at http://localhost:3030
+
+## Development Workflow
+
+### Branch Naming
+
+Create feature branches from `dev` using descriptive names:
+
+- `feature/add-new-network` - New features
+- `fix/transaction-display` - Bug fixes
+- `docs/update-readme` - Documentation changes
+- `refactor/data-service` - Code refactoring
+
+### Creating a Branch
+
+```bash
+git checkout dev
+git pull origin dev
+git checkout -b feature/your-feature-name
+```
+
+## Code Quality Checklist
+
+Before submitting a pull request, you must run these commands and ensure they pass:
+
+```bash
+# Fix formatting issues
+npm run format:fix
+
+# Fix linting issues
+npm run lint:fix
+
+# Verify type safety
+npm run typecheck
+
+# Run tests
+npm run test:run
+```
+
+All code must:
+
+- Pass Biome formatting and linting checks
+- Pass TypeScript type checking with zero errors
+- Follow the 100-character line width limit
+- Use 2-space indentation consistently
+
+## Commit Guidelines
+
+We follow [Conventional Commits v1.0.0](https://www.conventionalcommits.org/en/v1.0.0/).
+
+### Commit Message Format
+
+```
+<type>: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+### Types
+
+- `feat`: A new feature
+- `fix`: A bug fix
+- `docs`: Documentation changes
+- `style`: Code style changes (formatting, no logic change)
+- `refactor`: Code refactoring (no feature or bug fix)
+- `test`: Adding or updating tests
+- `chore`: Maintenance tasks
+
+### Examples
+
+```
+feat: add support for Polygon zkEVM network
+fix: correct gas estimation for L2 transactions
+docs: update network configuration instructions
+refactor: extract common adapter logic to base class
+```
+
+## Pull Request Process
+
+1. **Target Branch**: All PRs should target the `dev` branch
+2. **Title**: Use a clear, descriptive title following commit conventions
+3. **Description**: Explain what changed and why
+4. **Link Issues**: Reference any related issues (e.g., "Closes #123")
+5. **CI Checks**: Ensure all CI checks pass before requesting review
+
+When you open a PR, a template will be provided automatically. Please fill it out completely.
+
+## Architecture Overview
+
+OpenScan follows a layered architecture. For detailed information, see [CLAUDE.md](./CLAUDE.md).
+
+### Key Pattern: Fetcher → Adapter → Service
+
+1. **Fetcher Layer**: Makes raw RPC calls to blockchain nodes
+2. **Adapter Layer**: Transforms RPC responses into typed domain objects
+3. **Service Layer**: Orchestrates data fetching with caching
+
+When modifying data fetching:
+
+- Maintain the adapter pattern
+- Test both `fallback` and `parallel` RPC strategies
+- Update TypeScript types in `src/types/index.ts` if adding new fields
+
+## Adding a New Network
+
+1. Add chain ID to `src/types/index.ts` if creating new domain types
+2. Add default RPC endpoints to `src/config/rpcConfig.ts`
+3. Determine if network needs custom fetchers/adapters
+4. If custom: create `src/services/EVM/[Network]/fetchers/` and `adapters/`
+5. Update `DataService` constructor to detect chain ID
+6. Add network config to `ALL_NETWORKS` in `src/config/networks.ts`
+7. Add network logo to `public/` and update `logoType` in network config
+
+## Code Style
+
+- **Formatter/Linter**: Biome (see `biome.json`)
+- **Line Width**: 100 characters
+- **Indentation**: 2 spaces
+- **TypeScript**: Strict mode enabled
+- **CSS**: Place styles in `src/styles/`, avoid inline styles
+
+## Testing with Local Networks
+
+For development with local blockchain networks:
+
+```bash
+npm run dev
+```
+
+This starts a Hardhat node with sample contracts and OpenScan pointing to it.
+
+## Questions?
+
+If you have questions or need help, feel free to open an issue on GitHub.
diff --git a/README.md b/README.md
index 29c6fe3..811bdc1 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://openscan.github.io/explorer/openscan-logo.png" alt="OpenScan Logo" width="128" height="128">
+  <img src="https://openscan-explorer.github.io/explorer/openscan-logo.png" alt="OpenScan Logo" width="128" height="128">
 </p>
 
 # OpenScan
@@ -9,7 +9,7 @@
 A trustless, open-source, standalone web-app, multi-chain blockchain explorer for Ethereum, Layer 2 networks, and local development chains, allowing the direct interaction with verified smart contracts.
 
 **Official URL:** [https://openscan.eth.link/](https://openscan.eth.link/)  
-**GitHub Pages:** [https://openscan.github.io/explorer/](https://openscan.github.io/explorer/)
+**GitHub Pages:** [https://openscan-explorer.github.io/explorer/](https://openscan.github.io/explorer/)
 
 ## Features
 
@@ -60,7 +60,7 @@ A trustless, open-source, standalone web-app, multi-chain blockchain explorer fo
 
 ### Prerequisites
 
-- Node.js 16+
+- Node.js v22.21.1
 - npm or yarn
 
 ### Installation
@@ -79,11 +79,11 @@ npm install
 npm start
 ```
 
-The app will open at `http://localhost:3000`
+The app will open at `http://localhost:3030`
 
 ### Use with Anvil/Foundry
 
-After following the installation steps here https://getfoundry.sh/introduction/installation/ you can just run an anvil mainnet fork with `anvil --fork-url https://reth-ethereum.ithaca.xyz/rpc` or if you run any Anvil instance on the port 8545 it would be automatically detected by Openscan, if you run Anvil on a different port make sure to change the RPC on the app settings.
+After following the installation steps here <https://getfoundry.sh/introduction/installation/> you can just run an anvil mainnet fork with `anvil --fork-url https://reth-ethereum.ithaca.xyz/rpc` or if you run any Anvil instance on the port 8545 it would be automatically detected by Openscan, if you run Anvil on a different port make sure to change the RPC on the app settings.
 
 ### Use with Hardhat node
 
@@ -102,6 +102,7 @@ bash scripts/run-test-hardhat-env.sh
 ```
 
 This script will:
+
 1. Start a Hardhat or Anvil node on port 8545.
 2. Deploy test contracts and generate sample transactions
 3. Start OpenScan with only Ethereum Mainnet and Localhost networks enabled
@@ -110,9 +111,15 @@ This script will:
 ### Build for Production
 
 ```bash
-npm run build
+# Production build
+npm run build:production
+
+# Staging build
+npm run build:staging
 ```
 
+> **Note:** Build scripts require bash (Linux/macOS/WSL). Windows users should use WSL or run builds via CI.
+
 ### Type guards
 
 ```bash
@@ -121,12 +128,58 @@ npm run typecheck
 
 ### Lint and prettier
 
+```bash
+npm run format:fix
+```
+
 ```bash
 npm run lint:fix
 ```
 
+### End-to-End Tests
+
+The project uses Playwright for E2E testing against Ethereum mainnet data.
+
+```bash
+# Run all E2E tests
+npm run test:e2e
+
+# Run tests with UI mode (for debugging)
+npm run test:e2e:ui
+
+# Run tests in debug mode
+npm run test:e2e:debug
+```
+
+**Test Coverage:**
+
+- **Block Page** - Pre/post London blocks, hash fields, navigation
+- **Transaction Page** - Legacy and EIP-1559 transactions, from/to addresses, gas info
+- **Address Page** - EOA balances, ENS names, ERC20/ERC721/ERC1155 contracts
+- **Token Details** - NFT metadata, properties, token URI, collection info
+- **Contract Interaction** - Verified contract functions, events, verification status
+
+Tests run automatically on every PR via GitHub Actions.
+
 ## Configuration
 
+### Git pre-commit
+
+1. Create a new file under `.git/hooks/pre-commit`
+
+```bash
+#!/bin/sh
+set -eu
+
+npx @biomejs/biome check --staged --files-ignore-unknown=true --no-errors-on-unmatched
+```
+
+2. Make it executable
+
+```bash
+chmod +x pre-commit
+```
+
 ### Environment Variables
 
 #### `REACT_APP_OPENSCAN_NETWORKS`
@@ -137,6 +190,8 @@ Controls which networks are displayed in the application. This is useful for lim
 
 **Default:** If not set, all supported networks are enabled.
 
+**Note:** The Localhost network (31337) is only visible in development mode. To enable it in production/staging, explicitly include it in `REACT_APP_OPENSCAN_NETWORKS`.
+
 **Examples:**
 
 ```bash
@@ -231,15 +286,6 @@ src/
 - **Type Guards** - Runtime type checking for L2-specific fields
 - **RPC Storage** - Persistent storage for custom RPC configurations
 
-### Adding a New Network
-
-1. Add chain ID to `src/types/index.ts`
-2. Add default RPC endpoints to `src/utils/rpcStorage.ts`
-3. Create adapters and fetchers in `src/services/EVM/[Network]/`
-4. Update `DataService` conditional logic
-5. Add network card to Home page
-6. Add network logo to assets folder
-
 ## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
diff --git a/biome.json b/biome.json
index cbaf9de..698eac0 100644
--- a/biome.json
+++ b/biome.json
@@ -1,5 +1,22 @@
 {
-	"files": {
-		"includes": ["**", "!**/*.css"]
-	}
+  "files": {
+    "includes": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json", "!**/*.css"]
+  },
+  "linter": {
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "lineWidth": 100,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "off"
+      }
+    }
+  }
 }
diff --git a/e2e/fixtures/arbitrum.ts b/e2e/fixtures/arbitrum.ts
new file mode 100644
index 0000000..08dd045
--- /dev/null
+++ b/e2e/fixtures/arbitrum.ts
@@ -0,0 +1,260 @@
+// cspell:ignore arbos nitro uniswap sequencer
+export const ARBITRUM = {
+  chainId: "42161",
+
+  // Arbitrum One mainnet launched: August 31, 2021
+  // Nitro upgrade: Block #22,207,817 (August 31, 2022)
+  // Block time: ~0.25 seconds (variable)
+
+  blocks: {
+    // Genesis block - Arbitrum One launch
+    "0": {
+      number: 0,
+      txCount: 0,
+      gasUsed: "0",
+      gasLimit: "288,000,000",
+      hash: "0x7ee576b35482195fc49205cec9af72ce14f003b9ae69f6ba0faef4514be8b442",
+    },
+    // Nitro upgrade block (August 31, 2022)
+    // Massive upgrade - new architecture, faster, cheaper
+    "22207817": {
+      number: 22207817,
+      txCount: 0,
+      gasUsed: "0",
+      size: "553 bytes",
+      upgradeNote: "Nitro upgrade - new architecture",
+    },
+    // Block 100,000,000 (June 11, 2023)
+    // Post-Nitro, pre-ArbOS 11
+    "100000000": {
+      number: 100000000,
+      txCount: 4,
+      gasUsed: "2,059,307",
+      gasUsedPercent: "0.0%", // Very large gas limit on Arbitrum
+      gasLimit: "1,125,899,906,842,624",
+      size: "1,225 bytes",
+      baseFeePerGas: "0.1 Gwei",
+      // Fee recipient is the sequencer address
+      feeRecipientPartial: "0xa4b00000",
+      // More details section
+      hash: "0xb5aeb03c97e45c59596b70905d077663bccfea4533bf3b2c3264871725ea86a8",
+      parentHash: "0x1e3abf9d4545f0ed50137b68e1a5044fcad217d492ba2d92585cc101bbf03c9d",
+      nonce: "0x00000000000dd6ce",
+    },
+    // Block 200,000,000 (April 11, 2024)
+    // Post-ArbOS 20 Atlas (Dencun support)
+    "200000000": {
+      number: 200000000,
+      txCount: 2,
+      gasUsed: "55,132",
+      gasUsedPercent: "0.0%",
+      gasLimit: "1,125,899,906,842,624",
+      size: "801 bytes",
+      baseFeePerGas: "0.01 Gwei",
+      feeRecipientPartial: "0xa4b00000",
+      // More details section
+      hash: "0xfbb039d0d0e358b4d65f3df3058026fe5576beee3ed1fa2c1ad677d2efe0f3c1",
+      parentHash: "0x76bb92461bfba3e3d0dffd589b47170979891096d39f0173b41b7ce25bb9b5b1",
+    },
+    // Block 300,000,000 (January 28, 2025)
+    // Post-ArbOS 32 Bianca (Stylus)
+    "300000000": {
+      number: 300000000,
+      txCount: 4,
+      gasUsed: "913,478",
+      gasUsedPercent: "0.0%",
+      gasLimit: "1,125,899,906,842,624",
+      size: "1,073 bytes",
+      baseFeePerGas: "0.01 Gwei",
+      feeRecipientPartial: "0xa4b00000",
+    },
+  },
+
+  transactions: {
+    // ============================================
+    // LEGACY TRANSACTIONS (Type 0)
+    // ============================================
+
+    // Uniswap V3 swap via multicall - Legacy transaction
+    "0x87815a816c02b5a563a026e4a37d423734204b50972e75284b62f05e4134ae44": {
+      hash: "0x87815a816c02b5a563a026e4a37d423734204b50972e75284b62f05e4134ae44",
+      type: 0, // Legacy transaction
+      from: "0x6Cd9642Af3991e761C2785f9C958F148d6AeA4F8",
+      to: "0xE592427A0AEce92De3Edee1F18E0157C05861564", // Uniswap V3 Router
+      value: "0x31c7fb4fe7a0717", // ~0.224 ETH
+      blockNumber: 416908399,
+      gas: "1,200,000",
+      gasUsed: "143,833",
+      gasPrice: "0.01 Gwei",
+      nonce: 82,
+      status: "success" as const,
+      hasInputData: true,
+      method: "multicall",
+    },
+
+    // ============================================
+    // EIP-1559 TRANSACTIONS (Type 2)
+    // ============================================
+
+    // USDC transfer (EIP-1559)
+    "0x160687cbf03f348cf36997dbab53abbd32d91af5971bccac4cfa1577da27607e": {
+      hash: "0x160687cbf03f348cf36997dbab53abbd32d91af5971bccac4cfa1577da27607e",
+      type: 2, // EIP-1559
+      from: "0xb7990f2266a97A1f06b0F1828b2fE46B3582456F",
+      to: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // USDC
+      value: "0x0",
+      blockNumber: 416908475,
+      gas: "45,632",
+      gasUsed: "40,235",
+      maxFeePerGas: "0.01 Gwei",
+      maxPriorityFeePerGas: "0.000159827 Gwei",
+      nonce: 4,
+      status: "success" as const,
+      hasInputData: true,
+      method: "transfer",
+    },
+  },
+
+  addresses: {
+    // ============================================
+    // ERC20 TOKENS
+    // ============================================
+
+    // Native USDC on Arbitrum - Circle's native USDC
+    usdc: {
+      address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
+      type: "erc20" as const,
+      symbol: "USDC",
+      name: "USD Coin",
+      decimals: 6,
+    },
+    // Bridged USDC.e (legacy)
+    usdce: {
+      address: "0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8",
+      type: "erc20" as const,
+      symbol: "USDC.e",
+      name: "Bridged USDC",
+      decimals: 6,
+    },
+    // WETH on Arbitrum
+    weth: {
+      address: "0x82aF49447D8a07e3bd95BD0d56f35241523fBab1",
+      type: "erc20" as const,
+      symbol: "WETH",
+      name: "Wrapped Ether",
+      decimals: 18,
+    },
+    // ARB token - Arbitrum governance token
+    arb: {
+      address: "0x912CE59144191C1204E64559FE8253a0e49E6548",
+      type: "erc20" as const,
+      symbol: "ARB",
+      name: "Arbitrum",
+      decimals: 18,
+    },
+    // GMX token
+    gmx: {
+      address: "0xfc5A1A6EB076a2C7aD06eD22C90d7E710E35ad0a",
+      type: "erc20" as const,
+      symbol: "GMX",
+      name: "GMX",
+      decimals: 18,
+    },
+
+    // ============================================
+    // DEX CONTRACTS
+    // ============================================
+
+    // Uniswap V3 Router
+    uniswapV3Router: {
+      address: "0xE592427A0AEce92De3Edee1F18E0157C05861564",
+      type: "contract" as const,
+      name: "Uniswap V3: Swap Router",
+    },
+    // Uniswap Universal Router
+    uniswapUniversalRouter: {
+      address: "0x4C60051384bd2d3C01bfc845Cf5F4b44bcbE9de5",
+      type: "contract" as const,
+      name: "Uniswap: Universal Router",
+    },
+    // GMX Vault
+    gmxVault: {
+      address: "0x489ee077994B6658eAfA855C308275EAd8097C4A",
+      type: "contract" as const,
+      name: "GMX: Vault",
+    },
+    // GMX Position Router
+    gmxPositionRouter: {
+      address: "0xb87a436B93fFe9D75c5cFA7baCFFF96430b09868",
+      type: "contract" as const,
+      name: "GMX: Position Router",
+    },
+
+    // ============================================
+    // ARBITRUM SYSTEM CONTRACTS (precompiles)
+    // ============================================
+
+    // ArbSys - Arbitrum system precompile
+    arbSys: {
+      address: "0x0000000000000000000000000000000000000064",
+      type: "contract" as const,
+      name: "ArbSys",
+    },
+    // ArbRetryableTx - Retryable ticket system
+    arbRetryableTx: {
+      address: "0x000000000000000000000000000000000000006E",
+      type: "contract" as const,
+      name: "ArbRetryableTx",
+    },
+    // NodeInterface - Node queries
+    nodeInterface: {
+      address: "0x00000000000000000000000000000000000000C8",
+      type: "contract" as const,
+      name: "NodeInterface",
+    },
+  },
+
+  // ArbOS upgrade history
+  upgrades: {
+    nitro: {
+      block: 22207817,
+      date: "2022-08-31T14:32:22Z",
+      description: "Nitro upgrade - new architecture, faster, cheaper",
+    },
+    arbos11: {
+      timestamp: 1708809673,
+      date: "2024-02-24T20:01:13Z",
+      description: "Shanghai EVM support, PUSH0 opcode",
+    },
+    arbos20Atlas: {
+      timestamp: 1710424089,
+      date: "2024-03-14T13:48:09Z",
+      description: "Dencun support (EIP-4844 blobs)",
+    },
+    arbos31Bianca: {
+      timestamp: 1725386400,
+      date: "2024-09-03T17:00:00Z",
+      description: "Stylus prep",
+    },
+    arbos32Bianca: {
+      timestamp: 1727239050,
+      date: "2024-09-25T02:37:30Z",
+      description: "Stylus activation (WASM VM alongside EVM)",
+    },
+    bold: {
+      timestamp: 1739368811,
+      date: "2025-02-12T14:00:11Z",
+      description: "BoLD dispute resolution",
+    },
+    arbos40Callisto: {
+      timestamp: 1750197383,
+      date: "2025-06-17T22:56:23Z",
+      description: "Pectra support (EIP-7702)",
+    },
+    arbos51Dia: {
+      timestamp: 1736355600,
+      date: "2026-01-08T17:00:00Z",
+      description: "Fusaka support (pending)",
+    },
+  },
+};
diff --git a/e2e/fixtures/base.ts b/e2e/fixtures/base.ts
new file mode 100644
index 0000000..5b59b60
--- /dev/null
+++ b/e2e/fixtures/base.ts
@@ -0,0 +1,228 @@
+// cspell:ignore aerodrome superchain sequencer
+export const BASE = {
+  chainId: "8453",
+
+  // Base genesis: June 15, 2023 (timestamp 1686789347)
+  // Block time: 2 seconds
+  // Upgrades follow Superchain-wide activation timestamps
+
+  blocks: {
+    // Genesis block - Base mainnet launch (June 15, 2023)
+    "0": {
+      number: 0,
+      txCount: 0,
+      gasUsed: "0",
+      gasLimit: "30,000,000",
+      hash: "0xf712aa9241cc24369b143cf6dce85f0902a9731e70d66818a3a5845b296c73dd",
+      parentHash: "0x0000000000000000000000000000000000000000000000000000000000000000",
+    },
+    // Block 1,000,000 - Early Base block (July 8, 2023)
+    // 1 transaction, minimal gas usage
+    "1000000": {
+      number: 1000000,
+      txCount: 1,
+      gasUsed: "46,913",
+      gasUsedPercent: "0.2%",
+      gasLimit: "30,000,000",
+      size: "869 bytes",
+      baseFeePerGas: "50 wei",
+      feeRecipientPartial: "0x42000000",
+    },
+    // Block 10,000,000 - Pre-Ecotone (February 1, 2024)
+    // Before EIP-4844 blob support
+    "10000000": {
+      number: 10000000,
+      txCount: 11,
+      gasUsed: "979,572",
+      gasUsedPercent: "3.3%",
+      gasLimit: "30,000,000",
+      size: "4,718 bytes",
+      baseFeePerGas: "265 wei",
+      feeRecipientPartial: "0x42000000",
+    },
+    // Block 25,000,000 - Post-Holocene (January 13, 2025)
+    // Recent block with increased gas limit
+    "25000000": {
+      number: 25000000,
+      txCount: 248,
+      gasUsed: "59,984,755",
+      gasUsedPercent: "25.0%",
+      gasLimit: "240,000,000",
+      size: "91,675 bytes",
+      baseFeePerGas: "0.020162741 Gwei",
+      feeRecipientPartial: "0x42000000",
+    },
+  },
+
+  transactions: {
+    // ============================================
+    // EIP-1559 TRANSACTIONS (Type 2) - Standard on Base
+    // ============================================
+
+    // Aerodrome DEX swap transaction - swapExactTokensForTokens
+    "0x961cf2c57f006d8c6fdbe266b2ef201159dd135dc560155e8c16d307ee321681": {
+      hash: "0x961cf2c57f006d8c6fdbe266b2ef201159dd135dc560155e8c16d307ee321681",
+      type: 2,
+      from: "0xF9b6a1EB0190bf76274B0876957Ee9F4f508Af41",
+      to: "0xcF77a3Ba9A5CA399B7c97c74d54e5b1Beb874E43", // Aerodrome Router
+      value: "0x0",
+      gasUsed: "176,474",
+      status: "success" as const,
+      hasInputData: true,
+      method: "swapExactTokensForTokens",
+    },
+
+    // USDC transferWithAuthorization - ERC20 interaction
+    "0x6b212a5069286d710f388b948364452d28b8c33e0f39b8f50b394ff4deff1f03": {
+      hash: "0x6b212a5069286d710f388b948364452d28b8c33e0f39b8f50b394ff4deff1f03",
+      type: 2,
+      from: "0x3A70788150c7645a21b95b7062ab1784D3cc2104",
+      to: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // USDC
+      value: "0x0",
+      gasUsed: "86,212",
+      status: "success" as const,
+      hasInputData: true,
+      method: "transferWithAuthorization",
+    },
+
+    // ============================================
+    // SYSTEM TRANSACTIONS - OP Stack specific
+    // ============================================
+
+    // L1Block setL1BlockValues - System transaction (Type 126)
+    // First transaction in block 1 - sets L1 block attributes
+    "0x68736fb400dc3b69ab1c4c2cbe75a600aa7ba7cd8d025797ebd8a0108955c91f": {
+      hash: "0x68736fb400dc3b69ab1c4c2cbe75a600aa7ba7cd8d025797ebd8a0108955c91f",
+      type: 126, // Deposit transaction type
+      from: "0xDeaDDEaDDeAdDeAdDEAdDEaddeAddEAdDEAd0001", // System address
+      to: "0x4200000000000000000000000000000000000015", // L1Block
+      value: "0x0",
+      gasUsed: "64,013",
+      status: "success" as const,
+      hasInputData: true,
+      method: "setL1BlockValues",
+    },
+  },
+
+  addresses: {
+    // ============================================
+    // ERC20 TOKENS
+    // ============================================
+
+    // USDC on Base - Circle's native USDC
+    usdc: {
+      address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+      type: "erc20" as const,
+      symbol: "USDC",
+      name: "USD Coin",
+      decimals: 6,
+    },
+    // USDbC - Bridged USDC (legacy)
+    usdbc: {
+      address: "0xd9aAEc86B65D86f6A7B5B1b0c42FFA531710b6CA",
+      type: "erc20" as const,
+      symbol: "USDbC",
+      name: "USD Base Coin",
+      decimals: 6,
+    },
+    // WETH on Base (predeploy)
+    weth: {
+      address: "0x4200000000000000000000000000000000000006",
+      type: "erc20" as const,
+      symbol: "WETH",
+      name: "Wrapped Ether",
+      decimals: 18,
+    },
+    // AERO token - Aerodrome governance token
+    aero: {
+      address: "0x940181a94A35A4569E4529A3CDFb74e38FD98631",
+      type: "erc20" as const,
+      symbol: "AERO",
+      name: "Aerodrome",
+      decimals: 18,
+    },
+
+    // ============================================
+    // DEX CONTRACTS
+    // ============================================
+
+    // Aerodrome Router - Main DEX on Base
+    aerodromeRouter: {
+      address: "0xcF77a3Ba9A5CA399B7c97c74d54e5b1Beb874E43",
+      type: "contract" as const,
+      name: "Aerodrome: Router",
+    },
+
+    // ============================================
+    // SYSTEM CONTRACTS (OP Stack predeploys)
+    // ============================================
+
+    // SequencerFeeVault - Receives transaction fees (fee recipient)
+    sequencerFeeVault: {
+      address: "0x4200000000000000000000000000000000000011",
+      type: "contract" as const,
+      name: "SequencerFeeVault",
+    },
+    // L2CrossDomainMessenger - Bridge messaging
+    l2CrossDomainMessenger: {
+      address: "0x4200000000000000000000000000000000000007",
+      type: "contract" as const,
+      name: "L2CrossDomainMessenger",
+    },
+    // L2StandardBridge - Token bridging
+    l2StandardBridge: {
+      address: "0x4200000000000000000000000000000000000010",
+      type: "contract" as const,
+      name: "L2StandardBridge",
+    },
+    // GasPriceOracle - L1 fee calculation
+    gasPriceOracle: {
+      address: "0x420000000000000000000000000000000000000F",
+      type: "contract" as const,
+      name: "GasPriceOracle",
+    },
+    // L1Block - L1 block attributes
+    l1Block: {
+      address: "0x4200000000000000000000000000000000000015",
+      type: "contract" as const,
+      name: "L1Block",
+    },
+  },
+
+  // Upgrade timestamps (Unix) for reference
+  upgrades: {
+    canyon: {
+      timestamp: 1704992401,
+      date: "2024-01-11T16:00:01Z",
+    },
+    delta: {
+      timestamp: 1708560000,
+      date: "2024-02-22T00:00:00Z",
+    },
+    ecotone: {
+      timestamp: 1710374401,
+      date: "2024-03-14T00:00:01Z",
+      description: "EIP-4844 blob support, ~90% fee reduction",
+    },
+    fjord: {
+      timestamp: 1720627201,
+      date: "2024-07-10T16:00:01Z",
+      description: "Brotli compression, RIP-7212 secp256r1 precompile",
+    },
+    granite: {
+      timestamp: 1726070401,
+      date: "2024-09-11T16:00:01Z",
+      description: "Gas optimizations, permissionless fault proofs",
+    },
+    holocene: {
+      timestamp: 1736445601,
+      date: "2025-01-09T18:00:01Z",
+      description: "Stricter derivation, EIP-1559 configurability",
+    },
+    isthmus: {
+      timestamp: 1746806401,
+      date: "2025-05-09T16:00:01Z",
+      description: "Pectra L2 support",
+    },
+  },
+};
diff --git a/e2e/fixtures/bsc.ts b/e2e/fixtures/bsc.ts
new file mode 100644
index 0000000..97d80b7
--- /dev/null
+++ b/e2e/fixtures/bsc.ts
@@ -0,0 +1,360 @@
+// cspell:ignore pancakeswap binance busd wbnb staking validator
+export const BSC = {
+  chainId: "56",
+
+  // BNB Smart Chain mainnet launch: September 1, 2020
+  // Original block time: 3 seconds
+  // After Lorentz (April 2025): 1.5 seconds
+  // After Maxwell (June 30, 2025): 0.75 seconds
+  // Consensus: Proof-of-Staked-Authority (PoSA) with 21+ validators
+
+  blocks: {
+    // Genesis block - BSC mainnet launch (September 1, 2020)
+    // Contains initial validator setup and seed fund distribution
+    "0": {
+      number: 0,
+      txCount: 0,
+      gasUsed: "0",
+      gasLimit: "30,000,000",
+      hash: "0x0d21840abff46b96c84b2ac9e10e4f5cdaeb5693cb665db62a2f3b02d2d57b5b",
+      parentHash: "0x0000000000000000000000000000000000000000000000000000000000000000",
+    },
+    // Block 10,000,000 (December 2021)
+    // Pre-Euler, early BSC activity
+    "10000000": {
+      number: 10000000,
+      gasUsed: "36,309,493",
+      gasUsedPercent: "42.8%",
+      gasLimit: "84,934,464",
+      hash: "0xd08dca8c7d87780ca6f2faed2e12508d431939f7d7c3fa0d052f0744e1a47e55",
+      parentHash: "0x6b77d2519fc680931d57729aac79a1a30c9c7a9e684499d7ed52fa800f9c799c",
+    },
+    // Block 20,000,000 (August 2022)
+    // Post-Euler upgrade
+    "20000000": {
+      number: 20000000,
+      txCount: 321,
+      gasUsed: "26,602,654",
+      gasUsedPercent: "28.3%",
+      gasLimit: "94,082,549",
+      hash: "0xba219d00ab4ea174ead8efa90c80e9d9f9990e221bf8e7da1881ec210edbb879",
+      parentHash: "0xafbeac4631e64db3bb1a23d318b3fd9cb6c81b2d9e8bc50c5c46d25eb2aa6dfc",
+    },
+    // Block 30,000,000 (July 2023)
+    // Post-Luban, fast finality enabled
+    "30000000": {
+      number: 30000000,
+      gasUsed: "21,238,276",
+      gasUsedPercent: "15.2%",
+      gasLimit: "140,001,959",
+      hash: "0x0fe1b87f3d62477a866bbd2327139b884c0dc057f11dc273f8bed34fe699efbd",
+      parentHash: "0x577bde40f5e997be68cc6b2e98ae97024b86e6a15ac00b6a515dc373ec9d57c4",
+    },
+    // Block 40,000,000 (June 2024)
+    // Post-Feynman, after BNB Chain Fusion
+    "40000000": {
+      number: 40000000,
+      txCount: 107,
+      gasUsed: "11,270,569",
+      gasUsedPercent: "8.1%",
+      gasLimit: "139,456,038",
+      hash: "0x095f88c4f4855eab7bc6bb7161ade81adf7d60e11804d40197e4388227d1eddf",
+      parentHash: "0x5743a53c47bccbc29dad622be65ac9652b7980eefc9776e1e328b190c546851f",
+    },
+    // Block 50,000,000 (May 2025)
+    // Post-Maxwell, 0.75s block time
+    "50000000": {
+      number: 50000000,
+      txCount: 358,
+      gasUsed: "50,409,444",
+      gasUsedPercent: "72.0%",
+      gasLimit: "70,000,000",
+      hash: "0x66132739a8759cd2fc911fb31eee5a6beaefaa25cf25385b6dec775f7ba02192",
+      parentHash: "0x551190b5d3d2a5de87becc1612c03a2568e7fc1c865a0e3d68776b16573c2789",
+    },
+  },
+
+  transactions: {
+    // ============================================
+    // LEGACY TRANSACTIONS (Type 0)
+    // ============================================
+
+    // Contract interaction from block 20,000,000 - Legacy transaction
+    // Real transaction with verified on-chain data
+    "0xad5c9b13688627d670985d68a5be0fadd5f0e34d3ff20e35c655ef4bceec7e7c": {
+      hash: "0xad5c9b13688627d670985d68a5be0fadd5f0e34d3ff20e35c655ef4bceec7e7c",
+      type: 0, // Legacy transaction
+      from: "0x67e83034d88c665c661c77f8c9a1a6464224ee9d",
+      to: "0x0303d52057efef51eeea9ad36bc788df827f183d",
+      value: "0x0",
+      blockNumber: 20000000,
+      gas: "700,000",
+      gasUsed: "40,462",
+      gasPrice: "25.21 Gwei",
+      nonce: 266694,
+      position: 0,
+      status: "success" as const,
+      hasInputData: true,
+    },
+
+    // DEX swap from block 40,000,000 - Legacy transaction
+    // swapExactTokensForTokens on a DEX router
+    "0x0e3384ad2350d20921190b15e29305ed08eecfe97de975b6e015a6c6d476a90a": {
+      hash: "0x0e3384ad2350d20921190b15e29305ed08eecfe97de975b6e015a6c6d476a90a",
+      type: 0, // Legacy transaction
+      from: "0xbb6694f2ce58d9c83b35ad65da6f6423756e0585",
+      to: "0xeddb16da43daed83158417955dc0c402c61e7e7d",
+      value: "0x0",
+      blockNumber: 40000000,
+      gas: "257,348",
+      gasUsed: "170,460",
+      gasPrice: "7 Gwei",
+      nonce: 39,
+      position: 0,
+      status: "success" as const,
+      hasInputData: true,
+      method: "swapExactTokensForTokens",
+    },
+
+    // DEX aggregator swap from block 50,000,000 - Legacy transaction
+    // Complex multi-hop swap with many token transfers
+    "0x874a90a47bc3140adbffff0f4b89da4bea48f9420f97bc5a50e2e478d9a06176": {
+      hash: "0x874a90a47bc3140adbffff0f4b89da4bea48f9420f97bc5a50e2e478d9a06176",
+      type: 0, // Legacy transaction
+      from: "0x05a13e324ac38d76e06dd95f72194f1570f5fa7d",
+      to: "0x22444f9024367c1313613d54efa31f0aaf8627d7",
+      value: "0x0",
+      blockNumber: 50000000,
+      gas: "1,397,513",
+      gasUsed: "906,323",
+      gasPrice: "0.1 Gwei",
+      nonce: 20548,
+      position: 2,
+      status: "success" as const,
+      hasInputData: true,
+    },
+  },
+
+  addresses: {
+    // ============================================
+    // ERC20/BEP20 TOKENS
+    // ============================================
+
+    // Wrapped BNB (WBNB)
+    wbnb: {
+      address: "0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c",
+      type: "erc20" as const,
+      symbol: "WBNB",
+      name: "Wrapped BNB",
+      decimals: 18,
+    },
+    // USDT (Binance-Peg BSC-USD)
+    usdt: {
+      address: "0x55d398326f99059fF775485246999027B3197955",
+      type: "erc20" as const,
+      symbol: "USDT",
+      name: "Binance-Peg BSC-USD",
+      decimals: 18,
+    },
+    // BUSD (Binance-Peg BUSD Token)
+    busd: {
+      address: "0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56",
+      type: "erc20" as const,
+      symbol: "BUSD",
+      name: "Binance-Peg BUSD Token",
+      decimals: 18,
+    },
+    // USDC (Binance-Peg USD Coin)
+    usdc: {
+      address: "0x8AC76a51cc950d9822D68b83fE1Ad97B32Cd580d",
+      type: "erc20" as const,
+      symbol: "USDC",
+      name: "Binance-Peg USD Coin",
+      decimals: 18,
+    },
+    // CAKE (PancakeSwap Token)
+    cake: {
+      address: "0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82",
+      type: "erc20" as const,
+      symbol: "Cake",
+      name: "PancakeSwap Token",
+      decimals: 18,
+    },
+    // DAI (Binance-Peg Dai Token)
+    dai: {
+      address: "0x1AF3F329e8BE154074D8769D1FFa4eE058B1DBc3",
+      type: "erc20" as const,
+      symbol: "DAI",
+      name: "Binance-Peg Dai Token",
+      decimals: 18,
+    },
+
+    // ============================================
+    // DEX CONTRACTS
+    // ============================================
+
+    // PancakeSwap Router v2 - Main DEX on BSC
+    pancakeswapRouterV2: {
+      address: "0x10ED43C718714eb63d5aA57B78B54704E256024E",
+      type: "contract" as const,
+      name: "PancakeSwap: Router v2",
+    },
+    // PancakeSwap Factory v2
+    pancakeswapFactoryV2: {
+      address: "0xcA143Ce32Fe78f1f7019d7d551a6402fC5350c73",
+      type: "contract" as const,
+      name: "PancakeSwap: Factory v2",
+    },
+    // PancakeSwap Universal Router
+    pancakeswapUniversalRouter: {
+      address: "0x1A0A18AC4BECDDbd6389559687d1A73d8927E416",
+      type: "contract" as const,
+      name: "PancakeSwap: Universal Router",
+    },
+
+    // ============================================
+    // SYSTEM CONTRACTS (BSC predeploys)
+    // ============================================
+
+    // Validator Set Contract - Manages validator elections
+    validatorSet: {
+      address: "0x0000000000000000000000000000000000001000",
+      type: "contract" as const,
+      name: "BSC: Validator Set",
+    },
+    // Slash Contract - Handles validator slashing
+    slashContract: {
+      address: "0x0000000000000000000000000000000000001001",
+      type: "contract" as const,
+      name: "BSC: Slash Contract",
+    },
+    // System Reward Contract - Distributes system rewards
+    systemReward: {
+      address: "0x0000000000000000000000000000000000001002",
+      type: "contract" as const,
+      name: "BSC: System Reward",
+    },
+    // Light Client Contract
+    lightClient: {
+      address: "0x0000000000000000000000000000000000001003",
+      type: "contract" as const,
+      name: "BSC: Light Client",
+    },
+    // Token Hub - Cross-chain token management
+    tokenHub: {
+      address: "0x0000000000000000000000000000000000001004",
+      type: "contract" as const,
+      name: "BSC: Token Hub",
+    },
+    // Relayer Hub - Cross-chain relayer management
+    relayerHub: {
+      address: "0x0000000000000000000000000000000000001006",
+      type: "contract" as const,
+      name: "BSC: Relayer Hub",
+    },
+    // Staking Contract - Manages BNB staking
+    stakeHub: {
+      address: "0x0000000000000000000000000000000000002002",
+      type: "contract" as const,
+      name: "BSC: Stake Hub",
+    },
+    // Governor Contract - Governance
+    governor: {
+      address: "0x0000000000000000000000000000000000002004",
+      type: "contract" as const,
+      name: "BSC: Governor",
+    },
+
+    // ============================================
+    // STAKING CONTRACTS
+    // ============================================
+
+    // PancakeSwap Main Staking Contract
+    pancakeswapStaking: {
+      address: "0x73feaa1eE314F8c655E354234017bE2193C9E24E",
+      type: "contract" as const,
+      name: "PancakeSwap: Main Staking Contract",
+    },
+    // PancakeSwap Cake Pool
+    pancakeswapCakePool: {
+      address: "0x45c54210128a065de780C4B0Df3d16664f7f859e",
+      type: "contract" as const,
+      name: "PancakeSwap: Cake Pool",
+    },
+  },
+
+  // Upgrade block heights and timestamps for reference
+  upgrades: {
+    bruno: {
+      blockHeight: 13082000,
+      timestamp: 1638259200,
+      date: "2021-11-30T08:00:00Z",
+      description: "Real-time BNB burning mechanism (BEP-95)",
+    },
+    euler: {
+      blockHeight: 18907621,
+      timestamp: 1655884800,
+      date: "2022-06-22T08:00:00Z",
+      description: "Increased validators, enhanced decentralization (BEP-127/131)",
+    },
+    planck: {
+      blockHeight: 27281024,
+      timestamp: 1681274400,
+      date: "2023-04-12T05:30:00Z",
+      description: "Cross-chain security enhancements (ICS23)",
+    },
+    luban: {
+      blockHeight: 29020050,
+      timestamp: 1686516600,
+      date: "2023-06-11T21:30:00Z",
+      description: "Fast finality mechanism capability (BEP-126)",
+    },
+    plato: {
+      blockHeight: 30720096,
+      timestamp: 1691668800,
+      date: "2023-08-10T12:00:00Z",
+      description: "Fast finality fully enabled (BEP-126)",
+    },
+    hertz: {
+      blockHeight: 31302048,
+      timestamp: 1693382400,
+      date: "2023-08-30T07:30:00Z",
+      description: "Berlin/London EIPs for EVM compatibility",
+    },
+    feynman: {
+      timestamp: 1713430140,
+      date: "2024-04-18T05:49:00Z",
+      description: "BNB Chain Fusion, validators increased to 45",
+    },
+    tycho: {
+      timestamp: 1718668800,
+      date: "2024-06-18T00:00:00Z",
+      description: "Blob transactions support (BEP-336)",
+    },
+    bohr: {
+      timestamp: 1727350800,
+      date: "2024-09-26T12:00:00Z",
+      description: "Consecutive block production (BEP-341)",
+    },
+    pascal: {
+      timestamp: 1741996800,
+      date: "2025-03-15T00:00:00Z",
+      description: "Smart contract wallets (EIP-7702), BLS12-381",
+    },
+    lorentz: {
+      timestamp: 1745366400,
+      date: "2025-04-22T00:00:00Z",
+      description: "Block time reduced to 1.5 seconds",
+    },
+    maxwell: {
+      timestamp: 1751270400,
+      date: "2025-06-30T00:00:00Z",
+      description: "Block time reduced to 0.75 seconds (BEP-524/563/564)",
+    },
+    fermi: {
+      timestamp: 1736825400,
+      date: "2026-01-14T02:30:00Z",
+      description: "Block time reduced to 0.45 seconds (BEP-619/590)",
+    },
+  },
+};
diff --git a/e2e/fixtures/mainnet.ts b/e2e/fixtures/mainnet.ts
new file mode 100644
index 0000000..6f1c334
--- /dev/null
+++ b/e2e/fixtures/mainnet.ts
@@ -0,0 +1,446 @@
+// cspell:ignore vitalik beaverbuild dencun bayc rarible rari
+export const MAINNET = {
+  chainId: "1",
+
+  blocks: {
+    // Genesis block - special case with no transactions
+    "0": {
+      number: 0,
+      txCount: 0,
+    },
+    // Block 10,000 - Pre-London, no transactions
+    "10000": {
+      number: 10000,
+      txCount: 0,
+      gasUsed: "0",
+      gasUsedPercent: "0.0%",
+      gasLimit: "5,000",
+      size: "541 bytes",
+      feeRecipientPartial: "0xbf71642d",
+      difficulty: "598,426,820,912",
+      totalDifficulty: "598,426,820,912",
+      extraData: "Geth/v1.0.0/windows/go1.4.2",
+      // More details section
+      hash: "0xdc2d938e4cd0a149681e9e04352953ef5ab399d59bcd5b0357f6c0797470a524",
+      parentHash: "0xb9ecd2df84ee2687efc0886f5177f6674bad9aeb73de9323e254e15c5a34fc93",
+      stateRoot: "0x4de830f589266773eae1a1caa88d75def3f3a321fbd9aeb89570a57c6e7f3dbb",
+      transactionsRoot: "0x56e81f171bcc55a6ff8345e692c0f86e5b48e01b996cadc001622fb5e363b421",
+      receiptsRoot: "0x56e81f171bcc55a6ff8345e692c0f86e5b48e01b996cadc001622fb5e363b421",
+      nonce: "0xb75e5f372524d34c",
+      mixHash: "0xc6bf383db032101cc2101543db260602b709e5d9e38444bb71b680777185448b",
+      sha3Uncles: "0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347",
+    },
+    // Block 1,000,000 - Pre-London, with 2 transactions
+    "1000000": {
+      number: 1000000,
+      txCount: 2,
+      gasUsed: "50,244",
+      gasUsedPercent: "1.6%",
+      gasLimit: "3,141,592",
+      size: "768 bytes",
+      feeRecipientPartial: "0x2a65aca4",
+      difficulty: "12,549,332,509,227",
+      totalDifficulty: "12,549,332,509,227",
+      extraData: "0xd783010303844765746887676f312e352e31856c696e7578",
+      // More details section
+      hash: "0x8e38b4dbf6b11fcc3b9dee84fb7986e29ca0a02cecd8977c161ff7333329681e",
+      parentHash: "0xb4fbadf8ea452b139718e2700dc1135cfc81145031c84b7ab27cd710394f7b38",
+      stateRoot: "0x0e066f3c2297a5cb300593052617d1bca5946f0caa0635fdb1b85ac7e5236f34",
+      transactionsRoot: "0x65ba887fcb0826f616d01f736c1d2d677bcabde2f7fc25aa91cfbc0b3bad5cb3",
+      receiptsRoot: "0x20e3534540caf16378e6e86a2bf1236d9f876d3218fbc03958e6db1c634b2333",
+      nonce: "0xcd4c55b941cf9015",
+      mixHash: "0x92c4129a0ae2361b452a9edeece55c12eceeab866316195e3d87fc1b005b6645",
+      sha3Uncles: "0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347",
+    },
+    // Block 20,000,000 - Post-London (EIP-1559), with base fee and withdrawals
+    "20000000": {
+      number: 20000000,
+      txCount: 134,
+      withdrawals: 16,
+      gasUsed: "11,089,692",
+      gasUsedPercent: "37.0%",
+      gasLimit: "30,000,000",
+      size: "51,097 bytes",
+      feeRecipientPartial: "0x95222290",
+      baseFeePerGas: "4.936957716 Gwei",
+      burntFees: "0.054749340487 ETH",
+      extraData: "beaverbuild.org",
+      // More details section
+      hash: "0xd24fd73f794058a3807db926d8898c6481e902b7edb91ce0d479d6760f276183",
+      parentHash: "0xb390d63aac03bbef75de888d16bd56b91c9291c2a7e38d36ac24731351522bd1",
+      stateRoot: "0x68421c2c599dc31396a09772a073fb421c4bd25ef1462914ef13e5dfa2d31c23",
+      transactionsRoot: "0xf0280ae7fd02f2b9684be8d740830710cd62e4869c891c3a0ead32ea757e70a3",
+      receiptsRoot: "0xb39f9f7a13a342751bd2c575eca303e224393d4e11d715866b114b7e824da608",
+      withdrawalsRoot: "0xf0747de0368fb967ede9b81320a5b01a4d85b3d427e8bc8e96ff371478d80e76",
+      nonce: "0x0000000000000000",
+      mixHash: "0x85175443c2889afcb52288e0fa8804b671e582f9fd416071a70642d90c7dc0db",
+      sha3Uncles: "0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347",
+    },
+    // Block 12,964,999 - Last block before London hard fork (no base fee)
+    "12964999": {
+      number: 12964999,
+      txCount: 145,
+      gasUsed: "15,026,712",
+      gasUsedPercent: "100.0%",
+      gasLimit: "15,029,237",
+      size: "80,836 bytes",
+      feeRecipientPartial: "0x3ecef08d",
+      extraData: "vir1",
+      difficulty: "7,742,493,487,903,256",
+      totalDifficulty: "7,742,493,487,903,256",
+      // More details section
+      hash: "0x3de6bb3849a138e6ab0b83a3a00dc7433f1e83f7fd488e4bba78f2fe2631a633",
+      parentHash: "0x8e2b6ba8d440307457807fe9bbe1d3ef330ab12177166f69f8d4f7186e396de7",
+      stateRoot: "0x4035f600ba18453e0e4506b980180424c8f1853cc5dffea0be3e960993b7f828",
+      transactionsRoot: "0x113e7f3abfe0d307a0a945c3452fae7e34176d2432d5f59becd3b2ca2a3acabf",
+      receiptsRoot: "0x89b5c46add2ad67cb815fac58475de67e7ed1557477f980d37605b5d75f5efc7",
+      logsBloom:
+        "0x5ca74187e553152f19d432f6f420ba370956018791d04ce2013d6245fcc9f581823f6d58e404b7e0d545dafb3bad01100ae785e64bb4e9516d4385e212a668da58685120b002b33ecae2da1fb08877e4193c9c470e6c3309524e7d7b907f05e3be19c340bb029fa2c596fc014230bec0d233dde9f95ba6e7834573faa22d4faad9e5a17f9ed05098b3d1d3510982b83f5344cc956d61b53dbf7509f92d5a3bb2b7de5e6822213a3322b56fb49806b7a0341e4e1000b630231f739684dcbfff1d5b4016ee75ab4c4a29d29ff7c76b1de47f4df308658b4a52d26228d638d4ec600230aa923d621b68f8a7174443acc020c5a1ca307ff081f81bc8cdbeea051a7d",
+      nonce: "0xa3de6d1d51ea8f7d",
+      mixHash: "0x069f4780d57aaa74ae768c2948afaf9f5c03d26e59ccc9fd93092af8a48bed5c",
+      sha3Uncles: "0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347",
+    },
+    // Block 12,965,000 - London hard fork block (EIP-1559)
+    "12965000": {
+      number: 12965000,
+      txCount: 259,
+      gasUsed: "30,025,257",
+      gasUsedPercent: "100.0%",
+      gasLimit: "30,029,122",
+      size: "137,049 bytes",
+      feeRecipientPartial: "0x77777882",
+      baseFeePerGas: "1.000000000 Gwei",
+      burntFees: "0.030025257000 ETH",
+      extraData: "https://www.kryptex.org",
+      difficulty: "7,742,494,561,645,080",
+      totalDifficulty: "7,742,494,561,645,080",
+      // More details section
+      hash: "0x9b83c12c69edb74f6c8dd5d052765c1adf940e320bd1291696e6fa07829eee71",
+      parentHash: "0x3de6bb3849a138e6ab0b83a3a00dc7433f1e83f7fd488e4bba78f2fe2631a633",
+      stateRoot: "0x41cf6e8e60fd087d2b00360dc29e5bfb21959bce1f4c242fd1ad7c4da968eb87",
+      transactionsRoot: "0xdfcb68d3a3c41096f4a77569db7956e0a0e750fad185948e54789ea0e51779cb",
+      receiptsRoot: "0x8a8865cd785e2e9dfce7da83aca010b10b9af2abbd367114b236f149534c821d",
+      logsBloom:
+        "0x24e74ad77d9a2b27bdb8f6d6f7f1cffdd8cfb47fdebd433f011f7dfcfbb7db638fadd5ff66ed134ede2879ce61149797fbcdf7b74f6b7de153ec61bdaffeeb7b59c3ed771a2fe9eaed8ac70e335e63ff2bfe239eaff8f94ca642fdf7ee5537965be99a440f53d2ce057dbf9932be9a7b9a82ffdffe4eeee1a66c4cfb99fe4540fbff936f97dde9f6bfd9f8cefda2fc174d23dfdb7d6f7dfef5f754fe6a7eec92efdbff779b5feff3beafebd7fd6e973afebe4f5d86f3aafb1f73bf1e1d0cdd796d89827edeffe8fb6ae6d7bf639ec5f5ff4c32f31f6b525b676c7cdf5e5c75bfd5b7bd1928b6f43aac7fa0f6336576e5f7b7dfb9e8ebbe6f6efe2f9dfe8b3f56",
+      nonce: "0xb223da049adf2216",
+      mixHash: "0x9620b46a81a4795cf4449d48e3270419f58b09293a5421205f88179b563f815a",
+      sha3Uncles: "0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347",
+    },
+  },
+
+  transactions: {
+    // ============================================
+    // LEGACY TRANSACTIONS (Type 0) - Pre-EIP-2718
+    // ============================================
+
+    // First ever ETH transfer (block 46147, mined Aug 7, 2015)
+    // Type 0 - Legacy transaction with gasPrice
+    "0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060": {
+      hash: "0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060",
+      type: 0,
+      from: "0xa1e4380a3b1f749673e270229993ee55f35663b4",
+      to: "0x5df9b87991262f6ba471f09758cde1c0fc1de734",
+      value: "0x7a69", // 31337 wei
+      blockNumber: 46147,
+      gas: "21,000",
+      gasPrice: "50,000,000,000,000", // 50,000 Gwei (early Ethereum)
+      gasUsed: "21,000",
+      nonce: 0,
+      status: "success" as const,
+      // No maxFeePerGas or maxPriorityFeePerGas (pre-EIP-1559)
+    },
+
+    // ============================================
+    // EIP-1559 TRANSACTIONS (Type 2) - Post-London
+    // ============================================
+
+    // Type 2 EIP-1559 transaction from block 20,000,000
+    "0xbb4b3fc2b746877dce70862850602f1d19bd890ab4db47e6b7ee1da1fe578a0d": {
+      hash: "0xbb4b3fc2b746877dce70862850602f1d19bd890ab4db47e6b7ee1da1fe578a0d",
+      type: 2,
+      from: "0xae2fc483527b8ef99eb5d9b44875f005ba1fae13",
+      to: "0x6b75d8af000000e20b7a7ddf000ba900b4009a80",
+      value: "0x3e987a00", // ~1.05 ETH
+      blockNumber: 20000000,
+      gas: "458,541",
+      gasUsed: "321,491",
+      maxFeePerGas: "4.936957716 Gwei",
+      maxPriorityFeePerGas: "0 Gwei",
+      effectiveGasPrice: "4.936957716 Gwei",
+      nonce: 2756766,
+      status: "success" as const,
+      hasInputData: true,
+      // No gasPrice field in Type 2 transactions
+    },
+
+    // USDC approval transaction - common ERC20 interaction (Type 2)
+    "0xc55e2b90168af6972193c1f86fa4d7d7b31a29c156665d15b9cd48618b5177ef": {
+      hash: "0xc55e2b90168af6972193c1f86fa4d7d7b31a29c156665d15b9cd48618b5177ef",
+      type: 2,
+      from: "0x28C6c06298d514Db089934071355E5743bf21d60",
+      to: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+      blockNumber: 15537394,
+      status: "success" as const,
+      hasInputData: true,
+    },
+
+    // ============================================
+    // BLOB TRANSACTIONS (Type 3) - Post-Dencun (EIP-4844)
+    // ============================================
+
+    // Type 3 Blob transaction from block 21,000,000 (Base L2 batch submission)
+    "0x7ad8a2d854221c024bc84449c0eb756c81b8db95d6774765189305e28b1c029a": {
+      hash: "0x7ad8a2d854221c024bc84449c0eb756c81b8db95d6774765189305e28b1c029a",
+      type: 3,
+      from: "0x5050f69a9786f081509234f1a7f4684b5e5b76c9",
+      to: "0xff00000000000000000000000000000000008453", // Base L2 batch inbox
+      value: "0x0",
+      blockNumber: 21000000,
+      gas: "21,000",
+      gasUsed: "21,000",
+      maxFeePerGas: "36.636641947 Gwei",
+      maxPriorityFeePerGas: "2.012051071 Gwei",
+      effectiveGasPrice: "20.169830720 Gwei",
+      // Blob-specific fields
+      maxFeePerBlobGas: "1 Gwei",
+      blobGasUsed: "655,360", // 5 blobs * 131,072 bytes
+      blobGasPrice: "1 wei",
+      blobCount: 5,
+      nonce: 556803,
+      status: "success" as const,
+    },
+
+    // ============================================
+    // FAILED TRANSACTIONS
+    // ============================================
+
+    // Failed transaction (status 0x0) - reverted contract call
+    "0x15f8e5ea1079d9a0bb04a4c58ae5fe7654b5b2b4463375ff7ffb490aa0032f3a": {
+      hash: "0x15f8e5ea1079d9a0bb04a4c58ae5fe7654b5b2b4463375ff7ffb490aa0032f3a",
+      type: 0,
+      from: "0x58eb28a67731c570ef827c365c89b5751f9e6b0a",
+      to: "0xbf4ed7b27f1d666546e30d74d50d173d20bca754",
+      value: "0x0",
+      blockNumber: 2166348,
+      gas: "150,000",
+      gasUsed: "150,000", // All gas consumed on failure
+      gasPrice: "21,000,000,000", // 21 Gwei
+      nonce: 30,
+      status: "failed" as const,
+      hasInputData: true, // Contains function selector 0x3ccfd60b (withdraw)
+    },
+
+    // ============================================
+    // CONTRACT CREATION TRANSACTIONS
+    // ============================================
+
+    // Contract creation (to: null) - Type 2 EIP-1559
+    "0x452dd11bf2cac23a2c366d0adae6cc6451a3665c89449a96287aedfce1805293": {
+      hash: "0x452dd11bf2cac23a2c366d0adae6cc6451a3665c89449a96287aedfce1805293",
+      type: 2,
+      from: "0x08eec580ad41e9994599bad7d2a74a9874a2852c",
+      to: null, // Contract creation has no 'to' address
+      value: "0x0",
+      blockNumber: 24053298,
+      gas: "801,386",
+      gasUsed: "794,942",
+      maxFeePerGas: "2.181898787 Gwei",
+      maxPriorityFeePerGas: "2,000,000,000 wei",
+      effectiveGasPrice: "2.126998446 Gwei",
+      nonce: 680,
+      status: "success" as const,
+      contractAddress: "0xd5bd7a2d6e13d351e157e2a0396dac810d6af390",
+      hasInputData: true, // Contains contract bytecode
+    },
+  },
+
+  addresses: {
+    // Vitalik's address - well known EOA with ENS
+    vitalik: {
+      address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+      type: "contract" as const, // Now a contract after EIP-4337
+      hasENS: true,
+      ensName: "vitalik.eth",
+    },
+    // USDC contract - ERC20 token
+    usdc: {
+      address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+      type: "erc20" as const,
+      symbol: "USDC",
+      name: "USD Coin",
+      decimals: 6,
+    },
+    // Uniswap V2 Router - verified contract
+    uniswapRouter: {
+      address: "0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D",
+      type: "contract" as const,
+      name: "Uniswap V2: Router 2",
+    },
+    // Bored Ape Yacht Club - ERC721 NFT collection
+    bayc: {
+      address: "0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D",
+      type: "erc721" as const,
+      name: "BoredApeYachtClub",
+      fullName: "Bored Ape Yacht Club",
+      symbol: "BAYC",
+      // NFT Collection Details
+      totalMinted: "10,000 NFTs",
+      // Contract Details
+      verified: true,
+      verifiedAt: "8/8/2024",
+      matchType: "Partial Match",
+      compiler: "0.7.0+commit.9e61f92b",
+      // Read Functions (21 total)
+      readFunctions: [
+        "BAYC_PROVENANCE",
+        "MAX_APES",
+        "REVEAL_TIMESTAMP",
+        "apePrice",
+        "balanceOf",
+        "baseURI",
+        "getApproved",
+        "isApprovedForAll",
+        "maxApePurchase",
+        "name",
+        "owner",
+        "ownerOf",
+        "saleIsActive",
+        "startingIndex",
+        "startingIndexBlock",
+        "supportsInterface",
+        "symbol",
+        "tokenByIndex",
+        "tokenOfOwnerByIndex",
+        "tokenURI",
+        "totalSupply",
+      ],
+      // Write Functions (16 total)
+      writeFunctions: [
+        "approve",
+        "emergencySetStartingIndexBlock",
+        "flipSaleState",
+        "mintApe",
+        "renounceOwnership",
+        "reserveApes",
+        "safeTransferFrom",
+        "setApprovalForAll",
+        "setBaseURI",
+        "setProvenanceHash",
+        "setRevealTimestamp",
+        "setStartingIndex",
+        "transferFrom",
+        "transferOwnership",
+        "withdraw",
+      ],
+      // Events (4 total)
+      events: ["Approval", "ApprovalForAll", "OwnershipTransferred", "Transfer"],
+    },
+    // Rarible - ERC1155 multi-token collection
+    rarible: {
+      address: "0xd07dc4262BCDbf85190C01c996b4C06a461d2430",
+      type: "erc1155" as const,
+      name: "Rarible",
+      symbol: "RARI",
+      // Multi-Token Collection Details
+      metadataUri: "ipfs:/",
+      // Contract Details
+      verified: true,
+      verifiedAt: "8/8/2024",
+      matchType: "MATCH",
+      compiler: "0.5.17+commit.d19bba13",
+      // Read Functions (16 total)
+      readFunctions: [
+        "balanceOf",
+        "balanceOfBatch",
+        "contractURI",
+        "creators",
+        "fees",
+        "getFeeBps",
+        "getFeeRecipients",
+        "isApprovedForAll",
+        "isOwner",
+        "isSigner",
+        "name",
+        "owner",
+        "supportsInterface",
+        "symbol",
+        "tokenURIPrefix",
+        "uri",
+      ],
+      // Write Functions (12 total)
+      writeFunctions: [
+        "addSigner",
+        "burn",
+        "mint",
+        "removeSigner",
+        "renounceOwnership",
+        "renounceSigner",
+        "safeBatchTransferFrom",
+        "safeTransferFrom",
+        "setApprovalForAll",
+        "setContractURI",
+        "setTokenURIPrefix",
+        "transferOwnership",
+      ],
+      // Events (8 total)
+      events: [
+        "ApprovalForAll",
+        "OwnershipTransferred",
+        "SecondarySaleFees",
+        "SignerAdded",
+        "SignerRemoved",
+        "TransferBatch",
+        "TransferSingle",
+        "URI",
+      ],
+    },
+  },
+
+  // Specific NFT tokens for token detail page tests
+  tokens: {
+    // BAYC #1 - First Bored Ape
+    baycToken1: {
+      contractAddress: "0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D",
+      tokenId: "1",
+      standard: "erc721" as const,
+      collectionName: "BoredApeYachtClub",
+      collectionSymbol: "BAYC",
+      collectionSize: "10,000 NFTs",
+      tokenUri: "ipfs://QmeSjSinHpPnmXmspMjwiXyN6zS4E9zccariGR3jxcaWtq/1",
+      // Properties (5 total for token #1)
+      properties: [
+        { trait: "MOUTH", value: "Grin" },
+        { trait: "CLOTHES", value: "Vietnam Jacket" },
+        { trait: "BACKGROUND", value: "Orange" },
+        { trait: "EYES", value: "Blue Beams" },
+        { trait: "FUR", value: "Robot" },
+      ],
+    },
+    // BAYC #100 - Another well-known Bored Ape
+    baycToken100: {
+      contractAddress: "0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D",
+      tokenId: "100",
+      standard: "erc721" as const,
+      collectionName: "BoredApeYachtClub",
+      collectionSymbol: "BAYC",
+      collectionSize: "10,000 NFTs",
+      tokenUri: "ipfs://QmeSjSinHpPnmXmspMjwiXyN6zS4E9zccariGR3jxcaWtq/100",
+      // Properties (5 total for token #100)
+      properties: [
+        { trait: "BACKGROUND", value: "Yellow" },
+        { trait: "MOUTH", value: "Bored Cigarette" },
+        { trait: "HAT", value: "Party Hat 2" },
+        { trait: "FUR", value: "Dark Brown" },
+        { trait: "EYES", value: "Wide Eyed" },
+      ],
+    },
+    // Rarible token - ERC1155
+    raribleToken: {
+      contractAddress: "0xd07dc4262BCDbf85190C01c996b4C06a461d2430",
+      tokenId: "1",
+      standard: "erc1155" as const,
+      collectionName: "Rarible",
+      collectionSymbol: "RARI",
+    },
+  },
+};
diff --git a/e2e/fixtures/optimism.ts b/e2e/fixtures/optimism.ts
new file mode 100644
index 0000000..abb935c
--- /dev/null
+++ b/e2e/fixtures/optimism.ts
@@ -0,0 +1,362 @@
+// cspell:ignore velodrome bedrock ecotone fjord holocene isthmus sequencer
+export const OPTIMISM = {
+  chainId: "10",
+
+  // Optimism mainnet regenesis: November 11, 2021 (current chain)
+  // Bedrock upgrade: June 6, 2023 (block ~105,235,063)
+  // Block time: 2 seconds
+  // Upgrades follow Superchain-wide activation timestamps
+
+  blocks: {
+    // Genesis block - Optimism mainnet (post-regenesis)
+    // Note: Contains 8,893 transactions from state migration
+    "0": {
+      number: 0,
+      txCount: 8893,
+      gasUsed: "0",
+      gasLimit: "15,000,000",
+      hash: "0x7ca38a1916c42007829c55e69d3e9a73265554b586a499015373241b8a3fa48b",
+      parentHash: "0x0000000000000000000000000000000000000000000000000000000000000000",
+    },
+    // Block 100,000,000 (May 20, 2023)
+    // Pre-Bedrock block
+    "100000000": {
+      number: 100000000,
+      txCount: 1,
+      gasUsed: "108,922",
+      gasUsedPercent: "0.7%",
+      gasLimit: "15,000,000",
+      hash: "0x9bb1d3a1d3deb6f1298011d4bebf994f3ed7d02ae64a491568f78c4ed5124cb5",
+      parentHash: "0x9f423a470be5e8c2bcd3c046dd67ceb9f184af92fea432a4016da68240510ce9",
+    },
+    // Block 110,000,000 (September 24, 2023)
+    // Post-Bedrock, pre-Ecotone
+    "110000000": {
+      number: 110000000,
+      txCount: 4,
+      gasUsed: "301,587",
+      gasUsedPercent: "1.0%",
+      gasLimit: "30,000,000",
+      baseFeePerGas: "0.063 Gwei",
+      hash: "0x429308982bd568afa89a04ccbbc2f07b9058176e19fd6622fd87e346ef07ed23",
+      parentHash: "0xdd6583a74ad3d1c383d9f657268d085f6f39d11a53daf0e5fd873dfeb09f0ac7",
+      feeRecipientPartial: "0x42000000",
+    },
+    // Block 120,000,000 (May 13, 2024)
+    // Post-Ecotone (EIP-4844 blob support)
+    "120000000": {
+      number: 120000000,
+      txCount: 21,
+      gasUsed: "27,554,949",
+      gasUsedPercent: "91.9%",
+      gasLimit: "30,000,000",
+      baseFeePerGas: "0.06 Gwei",
+      hash: "0xcad6bf99757384f6f16fac0974aa234bb9bc866d8c89d9a56addbd9a3f13dc13",
+      parentHash: "0x8bce6c507e43379bef7817dbf57b9b0181e744a6c5f841d5ee57b4e09f6b09df",
+      feeRecipientPartial: "0x42000000",
+    },
+    // Block 130,000,000 (December 30, 2024)
+    // Post-Holocene
+    "130000000": {
+      number: 130000000,
+      txCount: 13,
+      gasUsed: "1,535,948",
+      gasUsedPercent: "2.6%",
+      gasLimit: "60,000,000",
+      baseFeePerGas: "0.00000026 Gwei",
+      hash: "0xaf131f54209291613f0b74e61903405ea84bf30368ea5c6cf787992351ad843d",
+      parentHash: "0x547a69b3a63b80cee045cdcb0759bad305f42aa30dbf6c4fa8fbe70d44e37e65",
+      feeRecipientPartial: "0x42000000",
+    },
+  },
+
+  transactions: {
+    // ============================================
+    // LEGACY TRANSACTIONS (Type 0)
+    // ============================================
+
+    // Velodrome Finance swap - Legacy transaction
+    "0xa8d73ea0639f39157f787a29591b36fc73c19b443bbe8416d8d6f24858063910": {
+      hash: "0xa8d73ea0639f39157f787a29591b36fc73c19b443bbe8416d8d6f24858063910",
+      type: 0, // Legacy transaction
+      from: "0x1dE686d54FA9b786870c3b67e1430BD1F08C1c5F",
+      to: "0x9c12939390052919aF3155f41Bf4160Fd3666A6f", // Velodrome Router
+      value: "0x0",
+      blockNumber: 84855387,
+      gas: "331,424",
+      gasUsed: "249,652",
+      gasPrice: "0.001 Gwei",
+      nonce: 89,
+      position: 0,
+      status: "success" as const,
+      hasInputData: true,
+      method: "swapExactTokensForTokens",
+      // L2 fee breakdown (Optimism specific)
+      l2Fee: "0.000000249652 ETH",
+      l1Fee: "0.000229678666963588 ETH",
+      txFee: "0.000229928318963588 ETH",
+    },
+
+    // ============================================
+    // EIP-1559 TRANSACTIONS (Type 2)
+    // ============================================
+
+    // OP token transfer (EIP-1559)
+    "0xdcf7c4afb479cd47f7ce263cbbb298f559b81fc592cc07737935a6166fb90f0c": {
+      hash: "0xdcf7c4afb479cd47f7ce263cbbb298f559b81fc592cc07737935a6166fb90f0c",
+      type: 2, // EIP-1559
+      from: "0x29185eB8cfD22Aa719529217bFbadE61677e0Ad2",
+      to: "0x4200000000000000000000000000000000000042", // OP Token
+      value: "0x0",
+      blockNumber: 120011272,
+      gas: "40,358",
+      gasUsed: "39,988",
+      maxFeePerGas: "0.191 Gwei",
+      maxPriorityFeePerGas: "0.004 Gwei",
+      effectiveGasPrice: "0.066 Gwei",
+      nonce: 190,
+      position: 11,
+      status: "success" as const,
+      hasInputData: true,
+      method: "transfer",
+      txFee: "0.000002714211193107 ETH",
+    },
+
+    // OP token delegate (EIP-1559)
+    "0x36a239e68d43afbb742a66e2c5456f443e20e2bf79812f8ee80d2c444bcb5d89": {
+      hash: "0x36a239e68d43afbb742a66e2c5456f443e20e2bf79812f8ee80d2c444bcb5d89",
+      type: 2, // EIP-1559
+      from: "0x7192744441e4C9845408b5928b80cA5dd40C41bF",
+      to: "0x4200000000000000000000000000000000000042", // OP Token
+      value: "0x0",
+      blockNumber: 129267009,
+      gas: "99,799",
+      gasUsed: "98,824",
+      maxFeePerGas: "0.000108 Gwei",
+      maxPriorityFeePerGas: "0.0001 Gwei",
+      nonce: 161,
+      status: "success" as const,
+      hasInputData: true,
+      method: "delegate",
+    },
+
+    // ============================================
+    // SYSTEM TRANSACTIONS (Type 126) - OP Stack specific
+    // ============================================
+
+    // L2 Cross Domain Messenger relay - System transaction (Type 126)
+    "0x5d3522dad0d0745b59e9443733f8423548f99856c00768aba9779ae288dedd0a": {
+      hash: "0x5d3522dad0d0745b59e9443733f8423548f99856c00768aba9779ae288dedd0a",
+      type: 126, // Deposit transaction type
+      from: "0x36BDE71C97B33Cc4729cf772aE268934f7AB70B2", // Aliased L1 Cross-Domain Messenger
+      to: "0x4200000000000000000000000000000000000007", // L2CrossDomainMessenger
+      value: "0x0",
+      blockNumber: 106744423,
+      gas: "387,675",
+      gasUsed: "96,955",
+      nonce: 370362,
+      status: "success" as const,
+      hasInputData: true,
+      method: "relayMessage",
+      // System transactions have zero fees
+      txFee: "0 ETH",
+    },
+  },
+
+  addresses: {
+    // ============================================
+    // ERC20 TOKENS
+    // ============================================
+
+    // Native USDC on Optimism - Circle's native USDC
+    usdc: {
+      address: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85",
+      type: "erc20" as const,
+      symbol: "USDC",
+      name: "USD Coin",
+      decimals: 6,
+    },
+    // Bridged USDC.e (legacy)
+    usdce: {
+      address: "0x7F5c764cBc14f9669B88837ca1490cCa17c31607",
+      type: "erc20" as const,
+      symbol: "USDC.e",
+      name: "Bridged USDC",
+      decimals: 6,
+    },
+    // WETH on Optimism (predeploy)
+    weth: {
+      address: "0x4200000000000000000000000000000000000006",
+      type: "erc20" as const,
+      symbol: "WETH",
+      name: "Wrapped Ether",
+      decimals: 18,
+    },
+    // OP token - Optimism governance token
+    op: {
+      address: "0x4200000000000000000000000000000000000042",
+      type: "erc20" as const,
+      symbol: "OP",
+      name: "Optimism",
+      decimals: 18,
+    },
+    // USDT on Optimism
+    usdt: {
+      address: "0x94b008aA00579c1307B0EF2c499aD98a8ce58e58",
+      type: "erc20" as const,
+      symbol: "USDT",
+      name: "Tether USD",
+      decimals: 6,
+    },
+    // DAI on Optimism
+    dai: {
+      address: "0xDA10009cBd5D07dd0CeCc66161FC93D7c9000da1",
+      type: "erc20" as const,
+      symbol: "DAI",
+      name: "Dai Stablecoin",
+      decimals: 18,
+    },
+
+    // ============================================
+    // DEX CONTRACTS
+    // ============================================
+
+    // Velodrome Finance Router - Main DEX on Optimism
+    velodromeRouter: {
+      address: "0x9c12939390052919aF3155f41Bf4160Fd3666A6f",
+      type: "contract" as const,
+      name: "Velodrome Finance: Router",
+    },
+    // Velodrome Universal Router (V2)
+    velodromeUniversalRouter: {
+      address: "0x01D40099fCD87C018969B0e8D4aB1633Fb34763C",
+      type: "contract" as const,
+      name: "Velodrome: Universal Router",
+    },
+    // Uniswap V3 Router
+    uniswapV3Router: {
+      address: "0xE592427A0AEce92De3Edee1F18E0157C05861564",
+      type: "contract" as const,
+      name: "Uniswap V3: Swap Router",
+    },
+    // Uniswap Universal Router
+    uniswapUniversalRouter: {
+      address: "0xCb1355ff08Ab38bBCE60111F1bb2B784bE25D7e8",
+      type: "contract" as const,
+      name: "Uniswap: Universal Router",
+    },
+
+    // ============================================
+    // BRIDGE CONTRACTS
+    // ============================================
+
+    // Optimism Portal (L1 to L2 deposits)
+    optimismPortal: {
+      address: "0xbEb5Fc579115071764c7423A4f12eDde41f106Ed",
+      type: "contract" as const,
+      name: "Optimism: Portal",
+    },
+
+    // ============================================
+    // SYSTEM CONTRACTS (OP Stack predeploys)
+    // ============================================
+
+    // SequencerFeeVault - Receives transaction fees (fee recipient)
+    sequencerFeeVault: {
+      address: "0x4200000000000000000000000000000000000011",
+      type: "contract" as const,
+      name: "SequencerFeeVault",
+    },
+    // L2CrossDomainMessenger - Bridge messaging
+    l2CrossDomainMessenger: {
+      address: "0x4200000000000000000000000000000000000007",
+      type: "contract" as const,
+      name: "L2CrossDomainMessenger",
+    },
+    // L2StandardBridge - Token bridging
+    l2StandardBridge: {
+      address: "0x4200000000000000000000000000000000000010",
+      type: "contract" as const,
+      name: "L2StandardBridge",
+    },
+    // GasPriceOracle - L1 fee calculation
+    gasPriceOracle: {
+      address: "0x420000000000000000000000000000000000000F",
+      type: "contract" as const,
+      name: "GasPriceOracle",
+    },
+    // L1Block - L1 block attributes
+    l1Block: {
+      address: "0x4200000000000000000000000000000000000015",
+      type: "contract" as const,
+      name: "L1Block",
+    },
+    // L2ToL1MessagePasser - Withdrawals
+    l2ToL1MessagePasser: {
+      address: "0x4200000000000000000000000000000000000016",
+      type: "contract" as const,
+      name: "L2ToL1MessagePasser",
+    },
+    // BaseFeeVault - Collects base fees
+    baseFeeVault: {
+      address: "0x4200000000000000000000000000000000000019",
+      type: "contract" as const,
+      name: "BaseFeeVault",
+    },
+    // L1FeeVault - Collects L1 data fees
+    l1FeeVault: {
+      address: "0x420000000000000000000000000000000000001A",
+      type: "contract" as const,
+      name: "L1FeeVault",
+    },
+  },
+
+  // Upgrade timestamps (Unix) for reference
+  upgrades: {
+    bedrock: {
+      timestamp: 1686079703,
+      date: "2023-06-06T16:28:23Z",
+      description: "Major architecture upgrade - modular rollup design",
+    },
+    canyon: {
+      timestamp: 1704992401,
+      date: "2024-01-11T17:00:01Z",
+      description: "Shapella support, EIP-4788 beacon root",
+    },
+    delta: {
+      timestamp: 1708560000,
+      date: "2024-02-22T00:00:00Z",
+      description: "Span batches for data compression",
+    },
+    ecotone: {
+      timestamp: 1710374401,
+      date: "2024-03-14T00:00:01Z",
+      description: "EIP-4844 blob support, ~90% fee reduction",
+    },
+    fjord: {
+      timestamp: 1720627201,
+      date: "2024-07-10T16:00:01Z",
+      description: "Brotli compression, RIP-7212 secp256r1 precompile",
+    },
+    granite: {
+      timestamp: 1726070401,
+      date: "2024-09-11T16:00:01Z",
+      description: "Permissionless fault proofs re-enabled",
+    },
+    holocene: {
+      timestamp: 1736445601,
+      date: "2025-01-09T18:00:01Z",
+      description: "Stricter derivation, EIP-1559 configurability",
+    },
+    isthmus: {
+      timestamp: 1746806401,
+      date: "2025-05-09T16:00:01Z",
+      description: "Pectra L2 support",
+    },
+    jovian: {
+      timestamp: 1764691201,
+      date: "2025-12-02T16:00:01Z",
+      description: "Future upgrade (pending)",
+    },
+  },
+};
diff --git a/e2e/fixtures/polygon.ts b/e2e/fixtures/polygon.ts
new file mode 100644
index 0000000..98dfd2e
--- /dev/null
+++ b/e2e/fixtures/polygon.ts
@@ -0,0 +1,357 @@
+// cspell:ignore quickswap uniswap aavegotchi opensea matic heimdall
+export const POLYGON = {
+  chainId: "137",
+
+  // Polygon PoS mainnet launch: May 30, 2020
+  // Originally Matic Network, rebranded to Polygon in February 2021
+  // Block time: ~2 seconds
+  // Consensus: Proof-of-Stake with Heimdall (consensus) + Bor (block production)
+  // Native token: MATIC (migrated to POL in September 2024)
+
+  blocks: {
+    // Genesis block - Polygon PoS mainnet launch (May 30, 2020)
+    "0": {
+      number: 0,
+      txCount: 0,
+      gasUsed: "0",
+      gasLimit: "10,000,000",
+      hash: "0xa9c28ce2141b56c474f1dc504bee9b01eb1bd7d1a507580d5519d4437a97de1b",
+      parentHash: "0x0000000000000000000000000000000000000000000000000000000000000000",
+    },
+    // Block 10,000,000 (January 2021)
+    // Early Polygon activity
+    "10000000": {
+      number: 10000000,
+      txCount: 5,
+      gasUsed: "4,278,607",
+      gasUsedPercent: "21.4%",
+      gasLimit: "20,000,000",
+      hash: "0x57d179b4ed2379580c46d9809c8918e28c4f1debea8e15013749694f37c14105",
+      parentHash: "0xee82cb38f164bfdb75092bcc5c1cb302385a48b2d9abd647af934ecb89db61f4",
+    },
+    // Block 20,000,000 (October 2021)
+    // Growing DeFi activity
+    "20000000": {
+      number: 20000000,
+      txCount: 110,
+      gasUsed: "19,998,514",
+      gasUsedPercent: "100.0%",
+      gasLimit: "20,000,000",
+      hash: "0x8b047896ef57b3ebe10a6b0e4cc28a1e0491b09706c6e0f2b5eff3992cf04730",
+      parentHash: "0x3a61eaf4cc52b8c3a217fbcfd0e862b59e01d504368b659db9314921879dcf9e",
+    },
+    // Block 30,000,000 (July 2022)
+    // Mature network, increased gas limit
+    "30000000": {
+      number: 30000000,
+      txCount: 133,
+      gasUsed: "18,658,580",
+      gasUsedPercent: "62.2%",
+      gasLimit: "30,000,000",
+      hash: "0xd409f8e3d2db0568634bcedc71ae48f4ed8dfcececb723db218a0fc37a5e8d44",
+      parentHash: "0xa9d361ef8ba2d3c4d05ea5bee19026e9cad27ae1e95cf9bc86ec30e246aba9f4",
+    },
+    // Block 38,189,056 (January 17, 2023)
+    // Delhi Hard Fork - reduced sprint length, smoothed baseFee
+    "38189056": {
+      number: 38189056,
+      txCount: 121,
+      gasUsed: "19,246,742",
+      gasUsedPercent: "68.2%",
+      gasLimit: "28,207,416",
+      hash: "0x19bcd5f19d3f928aae2b582b0e005c963a8ef0bfd005d1b639a5b0b5dbd632d6",
+      parentHash: "0x9c0a52241e01b66eb8987f894dea8b22d4ba1e2261217ddbaf4638c8699df79e",
+    },
+    // Block 50,000,000 (November 2023)
+    // Post-Delhi, high activity
+    "50000000": {
+      number: 50000000,
+      txCount: 564,
+      gasUsed: "26,134,824",
+      gasUsedPercent: "88.4%",
+      gasLimit: "29,563,532",
+      hash: "0xed6bc55bb3fbf391fb47a96bb0327906a2dab5f50c1330f89684b79a5195efaa",
+      parentHash: "0xafe719f6ca102ab7b7b9fd367688e73a777d02d21d6a692a8ff6a6eb3c2f7c27",
+    },
+    // Block 62,278,656 (September 25, 2024)
+    // Ahmedabad Hard Fork - MATIC to POL migration
+    "62278656": {
+      number: 62278656,
+      txCount: 65,
+      gasUsed: "7,292,621",
+      gasUsedPercent: "24.0%",
+      gasLimit: "30,442,418",
+      hash: "0xc207d13429c37fded959648b9f6d5d51d4cb65371c9b2f3a40f93f750cf000c4",
+      parentHash: "0xbfe87634499bbba796ad1b7d064c97354a12ea43c3f2f8f0a91a3d9987ef883e",
+    },
+    // Block 65,000,000 (December 2024)
+    // Post-Ahmedabad, POL era
+    "65000000": {
+      number: 65000000,
+      txCount: 103,
+      gasUsed: "13,884,738",
+      gasUsedPercent: "46.3%",
+      gasLimit: "30,000,000",
+      hash: "0x40a243f82db77b7557e7b56808e93ef72c5bc83f16ad5ede236b496a78736eb6",
+      parentHash: "0x5fa5e769a0b2bd46a7f857af0507587d2d02f67305d917dfdeeb2d6087b21a18",
+    },
+  },
+
+  transactions: {
+    // ============================================
+    // LEGACY TRANSACTIONS (Type 0)
+    // ============================================
+
+    // OpenSea NFT transfer from block 30,000,000 - Legacy transaction
+    "0xb14598e46791c2f0ab366ba2fd4a533e21a0c9894f902773e02e3869b7373c3e": {
+      hash: "0xb14598e46791c2f0ab366ba2fd4a533e21a0c9894f902773e02e3869b7373c3e",
+      type: 0, // Legacy transaction
+      from: "0x3ce07ad298ee2b3aabea8c8b3f496c3acc51e647",
+      to: "0x2953399124f0cbb46d2cbacd8a89cf0599974963", // OpenSea Storefront
+      value: "0x0",
+      blockNumber: 30000000,
+      gas: "189,792",
+      gasUsed: "89,556",
+      gasPrice: "125 Gwei",
+      nonce: 30554656,
+      position: 0,
+      status: "success" as const,
+      hasInputData: true,
+    },
+
+    // ============================================
+    // EIP-1559 TRANSACTIONS (Type 2)
+    // ============================================
+
+    // Failed DeFi swap from block 50,000,000 - EIP-1559 transaction
+    "0x1ed0c46bafb76d5a3d8201cdf8fc732efa97b000d88bd48dc203ac45d6340af0": {
+      hash: "0x1ed0c46bafb76d5a3d8201cdf8fc732efa97b000d88bd48dc203ac45d6340af0",
+      type: 2, // EIP-1559
+      from: "0x2c61d22af7b615d7d41def680b6edac29076709d",
+      to: "0x826a4f4da02588737d3c27325b14f39b5151ca3c",
+      value: "0x0",
+      blockNumber: 50000000,
+      gas: "1,000,014",
+      gasUsed: "66,787",
+      nonce: 2151,
+      position: 0,
+      status: "failed" as const, // Failed: ERC20 transfer amount exceeds balance
+      hasInputData: true,
+    },
+
+    // Contract interaction from block 65,000,000 - EIP-1559 transaction
+    "0x65edbf03a20a0317295efaeb9c20836b20b16740c8311ce51ceee91d7674b20d": {
+      hash: "0x65edbf03a20a0317295efaeb9c20836b20b16740c8311ce51ceee91d7674b20d",
+      type: 2, // EIP-1559
+      from: "0x706c7fa886ccaf510e570c5fa91f5988b15a8a56",
+      to: "0xe957a692c97566efc85f995162fa404091232b2e",
+      value: "0x0",
+      blockNumber: 65000000,
+      gas: "234,624",
+      gasUsed: "225,106",
+      nonce: 34547,
+      position: 0,
+      status: "success" as const,
+      hasInputData: true,
+    },
+  },
+
+  addresses: {
+    // ============================================
+    // ERC20 TOKENS
+    // ============================================
+
+    // Wrapped POL (WPOL) - formerly WMATIC
+    wpol: {
+      address: "0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270",
+      type: "erc20" as const,
+      symbol: "WPOL",
+      name: "Wrapped POL",
+      decimals: 18,
+    },
+    // USDC (Bridged from Ethereum)
+    usdc: {
+      address: "0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174",
+      type: "erc20" as const,
+      symbol: "USDC.e",
+      name: "USD Coin (Bridged)",
+      decimals: 6,
+    },
+    // Native USDC on Polygon
+    usdcNative: {
+      address: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
+      type: "erc20" as const,
+      symbol: "USDC",
+      name: "USD Coin",
+      decimals: 6,
+    },
+    // USDT on Polygon
+    usdt: {
+      address: "0xc2132D05D31c914a87C6611C10748AEb04B58e8F",
+      type: "erc20" as const,
+      symbol: "USDT",
+      name: "Tether USD",
+      decimals: 6,
+    },
+    // WETH on Polygon
+    weth: {
+      address: "0x7ceB23fD6bC0adD59E62ac25578270cFf1b9f619",
+      type: "erc20" as const,
+      symbol: "WETH",
+      name: "Wrapped Ether",
+      decimals: 18,
+    },
+    // DAI on Polygon
+    dai: {
+      address: "0x8f3Cf7ad23Cd3CaDbD9735AFf958023239c6A063",
+      type: "erc20" as const,
+      symbol: "DAI",
+      name: "Dai Stablecoin",
+      decimals: 18,
+    },
+    // AAVE on Polygon
+    aave: {
+      address: "0xD6DF932A45C0f255f85145f286eA0b292B21C90B",
+      type: "erc20" as const,
+      symbol: "AAVE",
+      name: "Aave",
+      decimals: 18,
+    },
+    // LINK on Polygon
+    link: {
+      address: "0x53E0bca35eC356BD5ddDFebbD1Fc0fD03FaBad39",
+      type: "erc20" as const,
+      symbol: "LINK",
+      name: "ChainLink Token",
+      decimals: 18,
+    },
+
+    // ============================================
+    // DEX CONTRACTS
+    // ============================================
+
+    // QuickSwap Router - Main DEX on Polygon
+    quickswapRouter: {
+      address: "0xa5E0829CaCEd8fFDD4De3c43696c57F7D7A678ff",
+      type: "contract" as const,
+      name: "QuickSwap: Router",
+    },
+    // Uniswap V3 Router on Polygon
+    uniswapV3Router: {
+      address: "0xE592427A0AEce92De3Edee1F18E0157C05861564",
+      type: "contract" as const,
+      name: "Uniswap V3: SwapRouter",
+    },
+    // SushiSwap Router
+    sushiswapRouter: {
+      address: "0x1b02dA8Cb0d097eB8D57A175b88c7D8b47997506",
+      type: "contract" as const,
+      name: "SushiSwap: Router",
+    },
+
+    // ============================================
+    // NFT CONTRACTS
+    // ============================================
+
+    // OpenSea Storefront (Polygon)
+    openseaStorefront: {
+      address: "0x2953399124F0cBB46d2CbACD8A89cF0599974963",
+      type: "contract" as const,
+      name: "OpenSea Shared Storefront",
+    },
+
+    // ============================================
+    // LENDING PROTOCOLS
+    // ============================================
+
+    // Aave V3 Pool on Polygon
+    aaveV3Pool: {
+      address: "0x794a61358D6845594F94dc1DB02A252b5b4814aD",
+      type: "contract" as const,
+      name: "Aave V3: Pool",
+    },
+
+    // ============================================
+    // BRIDGE CONTRACTS
+    // ============================================
+
+    // Polygon PoS Bridge (RootChainManager on Ethereum side)
+    polygonBridge: {
+      address: "0xA0c68C638235ee32657e8f720a23ceC1bFc77C77",
+      type: "contract" as const,
+      name: "Polygon: ERC20 Bridge",
+    },
+
+    // ============================================
+    // SYSTEM CONTRACTS
+    // ============================================
+
+    // Child Chain Manager - manages token deposits
+    childChainManager: {
+      address: "0xA6FA4fB5f76172d178d61B04b0ecd319C5d1C0aa",
+      type: "contract" as const,
+      name: "Polygon: ChildChainManager",
+    },
+    // State Receiver - receives state from Ethereum
+    stateReceiver: {
+      address: "0x0000000000000000000000000000000000001001",
+      type: "contract" as const,
+      name: "Polygon: StateReceiver",
+    },
+    // Matic Token (native, system address)
+    maticToken: {
+      address: "0x0000000000000000000000000000000000001010",
+      type: "contract" as const,
+      name: "Polygon: POL Token",
+    },
+  },
+
+  // Upgrade timestamps and block heights for reference
+  upgrades: {
+    mainnetLaunch: {
+      blockHeight: 0,
+      timestamp: 1590824836,
+      date: "2020-05-30T07:47:16Z",
+      description: "Polygon PoS mainnet launch (as Matic Network)",
+    },
+    rebranding: {
+      timestamp: 1613001600,
+      date: "2021-02-11T00:00:00Z",
+      description: "Matic Network rebrands to Polygon",
+    },
+    eip1559: {
+      blockHeight: 23850000,
+      timestamp: 1647619200,
+      date: "2022-03-18T08:00:00Z",
+      description: "EIP-1559 and London hard fork activation",
+    },
+    delhi: {
+      blockHeight: 38189056,
+      timestamp: 1673974800,
+      date: "2023-01-17T18:00:00Z",
+      description: "Delhi hard fork - reduced sprint length (64→16), smoothed baseFee",
+    },
+    napoli: {
+      timestamp: 1710892800,
+      date: "2024-03-20T00:00:00Z",
+      description: "Napoli hard fork - RIP-7212 secp256r1 precompile support",
+    },
+    ahmedabad: {
+      blockHeight: 62278656,
+      timestamp: 1727344800,
+      date: "2024-09-26T09:00:00Z",
+      description: "Ahmedabad hard fork - MATIC to POL migration, code size limit increase",
+    },
+    heimdallV2: {
+      heimdallHeight: 24404500,
+      timestamp: 1752159600,
+      date: "2025-07-10T14:00:00Z",
+      description: "Heimdall v2 - consensus layer upgrade to CometBFT, ~5s finality",
+    },
+    madhugiri: {
+      timestamp: 1763920800,
+      date: "2025-12-09T00:00:00Z",
+      description: "Madhugiri hard fork - 33% throughput increase, 1s consensus time",
+    },
+  },
+};
diff --git a/e2e/fixtures/test.ts b/e2e/fixtures/test.ts
new file mode 100644
index 0000000..65b2278
--- /dev/null
+++ b/e2e/fixtures/test.ts
@@ -0,0 +1,22 @@
+import { test as base } from "@playwright/test";
+
+/**
+ * Custom test fixture that increases timeout on retries.
+ * Base timeout: 60 seconds
+ * Formula: baseTimeout + (20 seconds * retryCount)
+ * - Retry 0: 60s
+ * - Retry 1: 80s
+ * - Retry 2: 100s
+ * - Retry 3: 120s
+ */
+export const test = base.extend({});
+
+const BASE_TIMEOUT = 60000;
+const TIMEOUT_INCREMENT = 20000; // 20 seconds per retry
+
+test.beforeEach(async ({}, testInfo) => {
+  const newTimeout = BASE_TIMEOUT + TIMEOUT_INCREMENT * testInfo.retry;
+  testInfo.setTimeout(newTimeout);
+});
+
+export { expect } from "@playwright/test";
diff --git a/e2e/helpers/wait.ts b/e2e/helpers/wait.ts
new file mode 100644
index 0000000..2e41859
--- /dev/null
+++ b/e2e/helpers/wait.ts
@@ -0,0 +1,129 @@
+import type { Page, TestInfo } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+/**
+ * Default timeout for assertions in e2e tests.
+ * - Local: 5000ms (5 seconds)
+ * - CI (GitHub Actions): 10000ms (10 seconds)
+ */
+export const DEFAULT_TIMEOUT = process.env.CI ? 10000 : 5000;
+
+/**
+ * Shared wait helpers for e2e tests with retry-aware timeouts.
+ *
+ * Timeout formula: baseTimeout + (increment * retryCount)
+ * - Retry 0: 30s
+ * - Retry 1: 40s
+ * - Retry 2: 50s
+ * - Retry 3: 60s
+ *
+ * This ensures flaky tests have more time on retries while keeping
+ * initial runs fast.
+ */
+
+const BASE_TIMEOUT = 30000; // 30 seconds base
+const TIMEOUT_INCREMENT = 10000; // 10 seconds per retry
+
+/**
+ * Calculate timeout based on retry count
+ */
+function getTimeout(testInfo: TestInfo): number {
+  return BASE_TIMEOUT + TIMEOUT_INCREMENT * testInfo.retry;
+}
+
+/**
+ * Wait for block page content to load or error to appear.
+ * Returns true if content loaded successfully, false if error or timeout.
+ */
+export async function waitForBlockContent(page: Page, testInfo: TestInfo): Promise<boolean> {
+  const timeout = getTimeout(testInfo);
+  try {
+    await expect(
+      page
+        .locator("text=Transactions:")
+        .or(page.locator("text=Error:"))
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout });
+
+    return (
+      !(await page.locator("text=Error:").isVisible()) &&
+      !(await page.locator("text=Something went wrong").isVisible())
+    );
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Wait for transaction page content to load or error to appear.
+ * Returns true if content loaded successfully, false if error or timeout.
+ */
+export async function waitForTxContent(page: Page, testInfo: TestInfo): Promise<boolean> {
+  const timeout = getTimeout(testInfo);
+  try {
+    await expect(
+      page
+        .locator("text=Transaction Hash:")
+        .or(page.locator("text=Error:"))
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout });
+
+    return (
+      !(await page.locator("text=Error:").isVisible()) &&
+      !(await page.locator("text=Something went wrong").isVisible())
+    );
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Wait for address page content to load or error to appear.
+ * Returns true if content loaded successfully, false if error or timeout.
+ */
+export async function waitForAddressContent(page: Page, testInfo: TestInfo): Promise<boolean> {
+  const timeout = getTimeout(testInfo);
+  try {
+    await expect(
+      page
+        .locator("text=Balance:")
+        .or(page.locator("text=Error:"))
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout });
+
+    return (
+      !(await page.locator("text=Error:").isVisible()) &&
+      !(await page.locator("text=Something went wrong").isVisible())
+    );
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Wait for token page content to load or error to appear.
+ * Returns true if content loaded successfully, false if error or timeout.
+ */
+export async function waitForTokenContent(page: Page, testInfo: TestInfo): Promise<boolean> {
+  const timeout = getTimeout(testInfo);
+  try {
+    await expect(
+      page
+        .locator(".erc721-header")
+        .or(page.locator(".erc1155-header"))
+        .or(page.locator("text=Error:"))
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout });
+
+    return (
+      !(await page.locator("text=Error:").isVisible()) &&
+      !(await page.locator("text=Something went wrong").isVisible())
+    );
+  } catch {
+    return false;
+  }
+}
diff --git a/e2e/pages/address.page.ts b/e2e/pages/address.page.ts
new file mode 100644
index 0000000..6a7e6c0
--- /dev/null
+++ b/e2e/pages/address.page.ts
@@ -0,0 +1,69 @@
+import type { Locator, Page } from "@playwright/test";
+import { DEFAULT_TIMEOUT } from "../helpers/wait";
+
+export class AddressPage {
+  readonly page: Page;
+  readonly container: Locator;
+  readonly addressType: Locator;
+  readonly ensName: Locator;
+  readonly balance: Locator;
+  readonly txDetails: Locator;
+  readonly txHistory: Locator;
+  readonly loader: Locator;
+  readonly errorText: Locator;
+  readonly contractBytecode: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.container = page.locator(".container-wide");
+    this.addressType = page.locator(".address-type-label");
+    this.ensName = page.locator(".address-ens-name");
+    this.balance = page.locator(".tx-value-highlight");
+    this.txDetails = page.locator(".tx-details");
+    this.txHistory = page.locator(".recent-transactions-table");
+    this.loader = page.locator(".loader-container");
+    this.errorText = page.locator(".text-error, .error-text");
+    this.contractBytecode = page.locator(".contract-bytecode, .bytecode-container");
+  }
+
+  async goto(address: string, chainId = "1") {
+    await this.page.goto(`/${chainId}/address/${address}`);
+  }
+
+  async waitForLoad() {
+    await this.loader.waitFor({ state: "hidden", timeout: DEFAULT_TIMEOUT * 3 });
+  }
+
+  async getAddressType(): Promise<string> {
+    return (await this.addressType.textContent()) ?? "";
+  }
+
+  async getBalance(): Promise<string> {
+    return (await this.balance.textContent()) ?? "";
+  }
+
+  async hasENSName(): Promise<boolean> {
+    return this.ensName.isVisible();
+  }
+
+  async getENSName(): Promise<string> {
+    if (await this.ensName.isVisible()) {
+      return (await this.ensName.textContent()) ?? "";
+    }
+    return "";
+  }
+
+  async getRowValue(label: string): Promise<string> {
+    const row = this.txDetails.locator(".tx-row", { hasText: label });
+    return (await row.locator(".tx-value").textContent()) ?? "";
+  }
+
+  async getTransactionCount(): Promise<string> {
+    return this.getRowValue("Transactions");
+  }
+
+  async isContract(): Promise<boolean> {
+    const type = await this.getAddressType();
+    return type.toLowerCase().includes("contract") || type.toLowerCase().includes("erc");
+  }
+}
diff --git a/e2e/pages/block.page.ts b/e2e/pages/block.page.ts
new file mode 100644
index 0000000..76ba26a
--- /dev/null
+++ b/e2e/pages/block.page.ts
@@ -0,0 +1,59 @@
+import type { Locator, Page } from "@playwright/test";
+import { DEFAULT_TIMEOUT } from "../helpers/wait";
+
+export class BlockPage {
+  readonly page: Page;
+  readonly container: Locator;
+  readonly blockNumber: Locator;
+  readonly blockLabel: Locator;
+  readonly timestampAge: Locator;
+  readonly statusBadge: Locator;
+  readonly txDetails: Locator;
+  readonly loader: Locator;
+  readonly errorText: Locator;
+  readonly navPrevBtn: Locator;
+  readonly navNextBtn: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.container = page.locator(".container-wide");
+    this.blockNumber = page.locator(".block-number");
+    this.blockLabel = page.locator(".block-label");
+    this.timestampAge = page.locator(".block-timestamp-age");
+    this.statusBadge = page.locator(".block-status-badge");
+    this.txDetails = page.locator(".tx-details");
+    this.loader = page.locator(".loader-container");
+    this.errorText = page.locator(".text-error, .error-text");
+    this.navPrevBtn = page.locator(".block-nav-btn").first();
+    this.navNextBtn = page.locator(".block-nav-btn").last();
+  }
+
+  async goto(blockNumber: number | string, chainId = "1") {
+    await this.page.goto(`/${chainId}/block/${blockNumber}`);
+  }
+
+  async waitForLoad() {
+    await this.loader.waitFor({ state: "hidden", timeout: DEFAULT_TIMEOUT * 3 });
+  }
+
+  async getBlockNumber(): Promise<string> {
+    return (await this.blockNumber.textContent()) ?? "";
+  }
+
+  async getRowValue(label: string): Promise<string> {
+    const row = this.txDetails.locator(".tx-row", { hasText: label });
+    return (await row.locator(".tx-value").textContent()) ?? "";
+  }
+
+  async getTransactionCount(): Promise<string> {
+    return this.getRowValue("Transactions");
+  }
+
+  async getGasUsed(): Promise<string> {
+    return this.getRowValue("Gas Used");
+  }
+
+  async getFeeRecipient(): Promise<string> {
+    return this.getRowValue("Fee Recipient");
+  }
+}
diff --git a/e2e/pages/transaction.page.ts b/e2e/pages/transaction.page.ts
new file mode 100644
index 0000000..812bb11
--- /dev/null
+++ b/e2e/pages/transaction.page.ts
@@ -0,0 +1,66 @@
+import type { Locator, Page } from "@playwright/test";
+import { DEFAULT_TIMEOUT } from "../helpers/wait";
+
+export class TransactionPage {
+  readonly page: Page;
+  readonly container: Locator;
+  readonly txHash: Locator;
+  readonly txLabel: Locator;
+  readonly statusBadge: Locator;
+  readonly txDetails: Locator;
+  readonly loader: Locator;
+  readonly errorText: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.container = page.locator(".container-wide");
+    this.txHash = page.locator(".header-subtitle");
+    this.txLabel = page.locator(".block-label");
+    this.statusBadge = page.locator('[class*="status-badge"]');
+    this.txDetails = page.locator(".tx-details");
+    this.loader = page.locator(".loader-container");
+    this.errorText = page.locator(".text-error, .error-text");
+  }
+
+  async goto(txHash: string, chainId = "1") {
+    await this.page.goto(`/${chainId}/tx/${txHash}`);
+  }
+
+  async waitForLoad() {
+    await this.loader.waitFor({ state: "hidden", timeout: DEFAULT_TIMEOUT * 3 });
+  }
+
+  async getStatus(): Promise<"success" | "failed"> {
+    const badge = await this.statusBadge.getAttribute("class");
+    return badge?.includes("success") ? "success" : "failed";
+  }
+
+  async getRowValue(label: string): Promise<string> {
+    const row = this.txDetails.locator(".tx-row", { hasText: label });
+    return (await row.locator(".tx-value").textContent()) ?? "";
+  }
+
+  async getFromAddress(): Promise<string> {
+    return this.getRowValue("From");
+  }
+
+  async getToAddress(): Promise<string> {
+    return this.getRowValue("To");
+  }
+
+  async getValue(): Promise<string> {
+    return this.getRowValue("Value");
+  }
+
+  async getGas(): Promise<string> {
+    return this.getRowValue("Gas");
+  }
+
+  async getBlockNumber(): Promise<string> {
+    return this.getRowValue("Block");
+  }
+
+  async getGasUsed(): Promise<string> {
+    return this.getRowValue("Gas Used");
+  }
+}
diff --git a/e2e/tests/arbitrum.spec.ts b/e2e/tests/arbitrum.spec.ts
new file mode 100644
index 0000000..a93eb4c
--- /dev/null
+++ b/e2e/tests/arbitrum.spec.ts
@@ -0,0 +1,536 @@
+import { test, expect } from "../fixtures/test";
+import { BlockPage } from "../pages/block.page";
+import { AddressPage } from "../pages/address.page";
+import { TransactionPage } from "../pages/transaction.page";
+import { ARBITRUM } from "../fixtures/arbitrum";
+import {
+  waitForBlockContent,
+  waitForTxContent,
+  waitForAddressContent,
+  DEFAULT_TIMEOUT,
+} from "../helpers/wait";
+
+const CHAIN_ID = ARBITRUM.chainId;
+
+// Transaction hash constants for readability
+const UNISWAP_SWAP = "0x87815a816c02b5a563a026e4a37d423734204b50972e75284b62f05e4134ae44";
+const USDC_TRANSFER = "0x160687cbf03f348cf36997dbab53abbd32d91af5971bccac4cfa1577da27607e";
+
+// ============================================
+// BLOCK TESTS
+// ============================================
+
+test.describe("Arbitrum One - Block Page", () => {
+  test("genesis block #0 - Arbitrum One launch", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = ARBITRUM.blocks["0"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header section
+      await expect(blockPage.blockNumber).toBeVisible();
+
+      // Genesis block should have 0 transactions
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=0 transactions in this block")).toBeVisible();
+
+      // Gas Used should be 0
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+    }
+  });
+
+  test("block #22,207,817 - Nitro upgrade block", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = ARBITRUM.blocks["22207817"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+
+      // Nitro upgrade block - 0 transactions
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=0 transactions in this block")).toBeVisible();
+
+      // Size
+      await expect(page.locator("text=Size:")).toBeVisible();
+      await expect(page.locator(`text=${block.size}`)).toBeVisible();
+    }
+  });
+
+  test("block #100,000,000 - post-Nitro with gas details", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = ARBITRUM.blocks["100000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transactions in this block`)).toBeVisible();
+
+      // Gas Used with value
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      // Size with value
+      await expect(page.locator("text=Size:")).toBeVisible();
+      await expect(page.locator(`text=${block.size}`)).toBeVisible();
+
+      // Base Fee Per Gas
+      await expect(page.locator("text=Base Fee Per Gas:")).toBeVisible();
+
+      // Fee Recipient (sequencer address)
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      const feeRecipient = await blockPage.getFeeRecipient();
+      expect(feeRecipient.toLowerCase()).toContain(block.feeRecipientPartial.toLowerCase());
+    }
+  });
+
+  test("block #100,000,000 more details section shows correct hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = ARBITRUM.blocks["100000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Verify hash field labels
+        await expect(page.getByText("Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Parent Hash:", { exact: true })).toBeVisible();
+
+        // Block hash
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        // Parent hash
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #200,000,000 - post-ArbOS 20 Atlas (Dencun)", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = ARBITRUM.blocks["200000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transactions in this block`)).toBeVisible();
+
+      // Gas Used with value
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      // Size with value
+      await expect(page.locator("text=Size:")).toBeVisible();
+      await expect(page.locator(`text=${block.size}`)).toBeVisible();
+
+      // Fee Recipient
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      const feeRecipient = await blockPage.getFeeRecipient();
+      expect(feeRecipient.toLowerCase()).toContain(block.feeRecipientPartial.toLowerCase());
+    }
+  });
+
+  test("block #200,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = ARBITRUM.blocks["200000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Block hash
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        // Parent hash
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #300,000,000 - post-ArbOS 32 Bianca (Stylus)", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = ARBITRUM.blocks["300000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transactions in this block`)).toBeVisible();
+
+      // Gas Used with value
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      // Size with value
+      await expect(page.locator("text=Size:")).toBeVisible();
+      await expect(page.locator(`text=${block.size}`)).toBeVisible();
+
+      // Base Fee Per Gas
+      await expect(page.locator("text=Base Fee Per Gas:")).toBeVisible();
+
+      // Fee Recipient
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      const feeRecipient = await blockPage.getFeeRecipient();
+      expect(feeRecipient.toLowerCase()).toContain(block.feeRecipientPartial.toLowerCase());
+    }
+  });
+
+  test("genesis block more details section shows correct hash", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = ARBITRUM.blocks["0"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Verify hash field labels
+        await expect(page.getByText("Hash:", { exact: true })).toBeVisible();
+
+        // Genesis block hash
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block navigation buttons work on Arbitrum", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(ARBITRUM.blocks["100000000"].number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.navPrevBtn).toBeVisible();
+      await expect(blockPage.navNextBtn).toBeVisible();
+    }
+  });
+
+  test("handles invalid block number gracefully", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(999999999999, CHAIN_ID);
+
+    await expect(
+      blockPage.errorText
+        .or(blockPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// TRANSACTION TESTS
+// ============================================
+
+test.describe("Arbitrum One - Transaction Page", () => {
+  test("displays Uniswap V3 swap with all details", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = ARBITRUM.transactions[UNISWAP_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify core transaction details
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=Block:")).toBeVisible();
+      await expect(page.locator("text=From:")).toBeVisible();
+      await expect(page.locator("text=To:")).toBeVisible();
+      await expect(page.locator("text=Value:")).toBeVisible();
+
+      // Verify gas information
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+      await expect(page.getByText("Gas Price:", { exact: true })).toBeVisible();
+    }
+  });
+
+  test("shows correct from and to addresses for swap", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = ARBITRUM.transactions[UNISWAP_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("displays transaction value and fee", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = ARBITRUM.transactions[UNISWAP_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify value contains ETH
+      const value = await txPage.getValue();
+      expect(value).toContain("ETH");
+
+      // Verify transaction fee is displayed
+      await expect(page.locator("text=Transaction Fee:")).toBeVisible();
+    }
+  });
+
+  test("displays USDC transfer transaction (EIP-1559)", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = ARBITRUM.transactions[USDC_TRANSFER];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=From:")).toBeVisible();
+      await expect(page.locator("text=To:")).toBeVisible();
+
+      // To address should be USDC contract
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("displays transaction with input data", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = ARBITRUM.transactions[UNISWAP_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Contract interaction should have input data
+      await expect(page.locator("text=Input Data:")).toBeVisible();
+    }
+  });
+
+  test("displays other attributes section with nonce", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = ARBITRUM.transactions[UNISWAP_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Other Attributes:")).toBeVisible();
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+    }
+  });
+
+  test("displays block number link", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = ARBITRUM.transactions[UNISWAP_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Block:")).toBeVisible();
+      const blockValue = await txPage.getBlockNumber();
+      expect(blockValue).toBeTruthy();
+    }
+  });
+
+  test("USDC transfer shows correct addresses", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = ARBITRUM.transactions[USDC_TRANSFER];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("handles invalid tx hash gracefully", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    await txPage.goto("0xinvalid", CHAIN_ID);
+
+    await expect(
+      txPage.errorText
+        .or(txPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// ADDRESS TESTS
+// ============================================
+
+test.describe("Arbitrum One - Address Page", () => {
+  test("displays native USDC contract details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = ARBITRUM.addresses.usdc;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+
+  test("displays bridged USDC.e contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = ARBITRUM.addresses.usdce;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays WETH contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = ARBITRUM.addresses.weth;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays ARB governance token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = ARBITRUM.addresses.arb;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays GMX token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = ARBITRUM.addresses.gmx;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays Uniswap V3 Router contract with details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = ARBITRUM.addresses.uniswapV3Router;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+
+  test("displays Uniswap Universal Router contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = ARBITRUM.addresses.uniswapUniversalRouter;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays GMX Vault contract with details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = ARBITRUM.addresses.gmxVault;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+
+  test("displays GMX Position Router contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = ARBITRUM.addresses.gmxPositionRouter;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays ArbSys system precompile", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = ARBITRUM.addresses.arbSys;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+});
diff --git a/e2e/tests/base.spec.ts b/e2e/tests/base.spec.ts
new file mode 100644
index 0000000..ac0a69e
--- /dev/null
+++ b/e2e/tests/base.spec.ts
@@ -0,0 +1,437 @@
+import { test, expect } from "../fixtures/test";
+import { BlockPage } from "../pages/block.page";
+import { AddressPage } from "../pages/address.page";
+import { TransactionPage } from "../pages/transaction.page";
+import { BASE } from "../fixtures/base";
+import {
+  waitForBlockContent,
+  waitForTxContent,
+  waitForAddressContent,
+  DEFAULT_TIMEOUT,
+} from "../helpers/wait";
+
+const CHAIN_ID = BASE.chainId;
+
+// Transaction hash constants for readability
+const AERODROME_SWAP = "0x961cf2c57f006d8c6fdbe266b2ef201159dd135dc560155e8c16d307ee321681";
+const USDC_TRANSFER = "0x6b212a5069286d710f388b948364452d28b8c33e0f39b8f50b394ff4deff1f03";
+
+// ============================================
+// BLOCK TESTS
+// ============================================
+
+test.describe("Base Network - Block Page", () => {
+  test("genesis block #0 - Base mainnet launch", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BASE.blocks["0"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header section
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.timestampAge).toBeVisible();
+
+      // Genesis block should have 0 transactions
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=0 transactions in this block")).toBeVisible();
+
+      // Gas Used should be 0
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #1,000,000 - early Base block with gas details", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BASE.blocks["1000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transaction`)).toBeVisible();
+
+      // Gas Used with percentage
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+
+      // Size
+      await expect(page.locator("text=Size:")).toBeVisible();
+      await expect(page.locator(`text=${block.size}`)).toBeVisible();
+
+      // Base Fee Per Gas (Base always has EIP-1559)
+      await expect(page.locator("text=Base Fee Per Gas:")).toBeVisible();
+
+      // Fee Recipient (SequencerFeeVault)
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      const feeRecipient = await blockPage.getFeeRecipient();
+      expect(feeRecipient.toLowerCase()).toContain(block.feeRecipientPartial.toLowerCase());
+    }
+  });
+
+  test("block #10,000,000 - pre-Ecotone block", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BASE.blocks["10000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transactions in this block`)).toBeVisible();
+
+      // Gas details
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+
+      // Size
+      await expect(page.locator("text=Size:")).toBeVisible();
+      await expect(page.locator(`text=${block.size}`)).toBeVisible();
+    }
+  });
+
+  test("block #25,000,000 - post-Holocene with increased gas limit", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BASE.blocks["25000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+
+      // Should have many transactions
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transactions in this block`)).toBeVisible();
+
+      // Gas details - higher gas limit post-Holocene
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+
+      // Size
+      await expect(page.locator("text=Size:")).toBeVisible();
+      await expect(page.locator(`text=${block.size}`)).toBeVisible();
+
+      // Base Fee Per Gas
+      await expect(page.locator("text=Base Fee Per Gas:")).toBeVisible();
+    }
+  });
+
+  test("genesis block more details section shows correct hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BASE.blocks["0"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Verify hash field labels
+        await expect(page.getByText("Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Parent Hash:", { exact: true })).toBeVisible();
+
+        // Genesis block hash
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        // Genesis parent hash (all zeros) - use first() as it appears in multiple places (also in logs bloom)
+        await expect(page.locator(`text=${block.parentHash}`).first()).toBeVisible();
+      }
+    }
+  });
+
+  test("block navigation buttons work on Base", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(BASE.blocks["1000000"].number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.navPrevBtn).toBeVisible();
+      await expect(blockPage.navNextBtn).toBeVisible();
+    }
+  });
+
+  test("handles invalid block number gracefully", async ({ page }) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(999999999999, CHAIN_ID);
+
+    await expect(
+      blockPage.errorText
+        .or(blockPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// TRANSACTION TESTS
+// ============================================
+
+test.describe("Base Network - Transaction Page", () => {
+  test("displays Aerodrome DEX swap with all details", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BASE.transactions[AERODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify core transaction details
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=Block:")).toBeVisible();
+      await expect(page.locator("text=From:")).toBeVisible();
+      await expect(page.locator("text=To:")).toBeVisible();
+
+      // Verify gas information
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+    }
+  });
+
+  test("shows correct from and to addresses for swap", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BASE.transactions[AERODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("displays USDC transfer transaction", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BASE.transactions[USDC_TRANSFER];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=From:")).toBeVisible();
+      await expect(page.locator("text=To:")).toBeVisible();
+
+      // To address should be USDC contract
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("displays transaction with input data", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BASE.transactions[AERODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Contract interaction should have input data
+      await expect(page.locator("text=Input Data:")).toBeVisible();
+    }
+  });
+
+  test("displays other attributes section", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BASE.transactions[AERODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Other Attributes:")).toBeVisible();
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+    }
+  });
+
+  test("displays block number link", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BASE.transactions[AERODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Block:")).toBeVisible();
+      const blockValue = await txPage.getBlockNumber();
+      expect(blockValue).toBeTruthy();
+    }
+  });
+
+  test("handles invalid tx hash gracefully", async ({ page }) => {
+    const txPage = new TransactionPage(page);
+    await txPage.goto("0xinvalid", CHAIN_ID);
+
+    await expect(
+      txPage.errorText
+        .or(txPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// ADDRESS TESTS
+// ============================================
+
+test.describe("Base Network - Address Page", () => {
+  test("displays USDC contract details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BASE.addresses.usdc;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+
+  test("displays USDbC (bridged USDC) contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BASE.addresses.usdbc;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays WETH predeploy contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BASE.addresses.weth;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays AERO token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BASE.addresses.aero;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays Aerodrome Router contract with details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BASE.addresses.aerodromeRouter;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+
+  test("displays SequencerFeeVault system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BASE.addresses.sequencerFeeVault;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays GasPriceOracle system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BASE.addresses.gasPriceOracle;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays L1Block system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BASE.addresses.l1Block;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays L2StandardBridge contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BASE.addresses.l2StandardBridge;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays L2CrossDomainMessenger contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BASE.addresses.l2CrossDomainMessenger;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+});
diff --git a/e2e/tests/bsc.spec.ts b/e2e/tests/bsc.spec.ts
new file mode 100644
index 0000000..aaf35c4
--- /dev/null
+++ b/e2e/tests/bsc.spec.ts
@@ -0,0 +1,832 @@
+import { test, expect } from "../fixtures/test";
+import { BlockPage } from "../pages/block.page";
+import { TransactionPage } from "../pages/transaction.page";
+import { AddressPage } from "../pages/address.page";
+import { BSC } from "../fixtures/bsc";
+import {
+  waitForBlockContent,
+  waitForTxContent,
+  waitForAddressContent,
+  DEFAULT_TIMEOUT,
+} from "../helpers/wait";
+
+const CHAIN_ID = BSC.chainId;
+
+// Transaction hash constants for readability
+const BLOCK_20M_TX = "0xad5c9b13688627d670985d68a5be0fadd5f0e34d3ff20e35c655ef4bceec7e7c";
+const DEX_SWAP_TX = "0x0e3384ad2350d20921190b15e29305ed08eecfe97de975b6e015a6c6d476a90a";
+const DEX_AGGREGATOR_TX = "0x874a90a47bc3140adbffff0f4b89da4bea48f9420f97bc5a50e2e478d9a06176";
+
+// ============================================
+// BLOCK TESTS
+// ============================================
+
+test.describe("BSC Block Page", () => {
+  test("genesis block #0 - BSC mainnet launch", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["0"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header section
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.timestampAge).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transactions - genesis has 0 transactions
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=0 transactions in this block")).toBeVisible();
+
+      // Gas Used (0 for genesis)
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator("text=0 (0.0%)")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("genesis block #0 more details shows hash and parent hash", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["0"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Click "Show More Details" to expand
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+
+        // Wait for details to expand
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Verify hash field labels
+        await expect(page.getByText("Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Parent Hash:", { exact: true })).toBeVisible();
+
+        // Verify hash values
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        // Parent hash is all zeros for genesis - use .first() to avoid matching logs bloom
+        await expect(page.locator(`text=${block.parentHash}`).first()).toBeVisible();
+      }
+    }
+  });
+
+  test("block #10,000,000 - Pre-Euler block with transactions", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["10000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transactions with count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+
+      // Fee Recipient (validator)
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+
+      // Gas Used
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #10,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["10000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Verify hash field labels
+        await expect(page.getByText("Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Parent Hash:", { exact: true })).toBeVisible();
+
+        // Block hash
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        // Parent hash
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #20,000,000 - Post-Euler block with gas details", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["20000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+
+      // Fee Recipient (validator)
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+
+      // Gas Used
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #20,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["20000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #30,000,000 - Post-Luban with fast finality", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["30000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transactions
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+
+      // Fee Recipient (validator)
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+
+      // Gas Used
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #30,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["30000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #40,000,000 - Post-Feynman after BNB Chain Fusion", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["40000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+
+      // Fee Recipient (validator)
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+
+      // Gas Used
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #40,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["40000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #50,000,000 - Post-Maxwell with 0.75s block time", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["50000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+
+      // Fee Recipient (validator)
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+
+      // Gas Used
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #50,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = BSC.blocks["50000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block navigation buttons work", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(BSC.blocks["10000000"].number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Verify navigation buttons exist
+      await expect(blockPage.navPrevBtn).toBeVisible();
+      await expect(blockPage.navNextBtn).toBeVisible();
+    }
+  });
+
+  test("handles invalid block number gracefully", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(999999999999, CHAIN_ID);
+
+    await expect(
+      blockPage.errorText
+        .or(blockPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// TRANSACTION TESTS
+// ============================================
+
+test.describe("BSC Transaction Page", () => {
+  test("displays transaction from block 20M with all details", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[BLOCK_20M_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify core transaction details
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=Block:")).toBeVisible();
+      await expect(page.locator("text=From:")).toBeVisible();
+      await expect(page.locator("text=To:")).toBeVisible();
+
+      // Verify gas information
+      await expect(page.getByText("Gas Price:", { exact: true })).toBeVisible();
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+
+      // Verify has input data (contract interaction)
+      await expect(page.locator("text=Input Data:")).toBeVisible();
+    }
+  });
+
+  test("shows correct from and to addresses for block 20M tx", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[BLOCK_20M_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify from address
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+
+      // Verify to address
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("displays legacy transaction type correctly (Type 0)", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[BLOCK_20M_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Legacy transaction should show Transaction Type with value 0 or "Legacy"
+      // Check for "Type:" which is how the UI displays it
+      await expect(
+        page.locator("text=Type:").or(page.locator("text=Transaction Type:")).first()
+      ).toBeVisible();
+    }
+  });
+
+  test("displays DEX swap transaction from block 40M", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[DEX_SWAP_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify core transaction details
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=Block:")).toBeVisible();
+
+      // Verify gas information
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+
+      // Verify has input data (DEX swap)
+      await expect(page.locator("text=Input Data:")).toBeVisible();
+    }
+  });
+
+  test("DEX swap shows correct addresses and gas details", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[DEX_SWAP_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+
+      // Verify gas limit is displayed
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+    }
+  });
+
+  test("displays DEX aggregator transaction from block 50M", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[DEX_AGGREGATOR_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify core transaction details
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+
+      // Verify gas information
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+
+      // Verify has input data (contract interaction)
+      await expect(page.locator("text=Input Data:")).toBeVisible();
+    }
+  });
+
+  test("displays transaction nonce and position for block 20M tx", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[BLOCK_20M_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify other attributes section
+      await expect(page.locator("text=Other Attributes:")).toBeVisible();
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+
+      // Verify nonce value (use label to avoid strict mode issues)
+      await expect(page.locator(`text=Nonce: ${tx.nonce}`)).toBeVisible();
+    }
+  });
+
+  test("displays DEX swap nonce and position", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[DEX_SWAP_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+
+      // Verify nonce value
+      await expect(page.locator(`text=Nonce: ${tx.nonce}`)).toBeVisible();
+    }
+  });
+
+  test("displays DEX aggregator nonce and position", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[DEX_AGGREGATOR_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+
+      // Verify nonce value
+      await expect(page.locator(`text=Nonce: ${tx.nonce}`)).toBeVisible();
+
+      // Verify position value
+      await expect(page.locator(`text=Position: ${tx.position}`)).toBeVisible();
+    }
+  });
+
+  test("displays transaction fee", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[BLOCK_20M_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify transaction fee is displayed
+      await expect(page.locator("text=Transaction Fee:")).toBeVisible();
+    }
+  });
+
+  test("displays block number link for transaction", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = BSC.transactions[DEX_SWAP_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Block:")).toBeVisible();
+      const blockValue = await txPage.getBlockNumber();
+      expect(blockValue).toBeTruthy();
+    }
+  });
+
+  test("handles invalid tx hash gracefully", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    await txPage.goto("0xinvalid", CHAIN_ID);
+
+    await expect(
+      txPage.errorText
+        .or(txPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// ADDRESS TESTS - BEP20 TOKENS
+// ============================================
+
+test.describe("BSC Address Page - Tokens", () => {
+  test("displays WBNB token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.wbnb;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Verify contract has balance section
+      await expect(
+        page.locator("text=Contract Balance:").or(page.locator("text=Balance:"))
+      ).toBeVisible();
+    }
+  });
+
+  test("displays USDT (BSC-USD) token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.usdt;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays BUSD token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.busd;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays CAKE (PancakeSwap Token) contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.cake;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays USDC token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.usdc;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays DAI token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.dai;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+});
+
+// ============================================
+// ADDRESS TESTS - DEX CONTRACTS
+// ============================================
+
+test.describe("BSC Address Page - DEX Contracts", () => {
+  test("displays PancakeSwap Router v2 contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.pancakeswapRouterV2;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Check for contract details section
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+
+  test("displays PancakeSwap Factory v2 contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.pancakeswapFactoryV2;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Check for contract details section
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+
+  test("displays PancakeSwap Universal Router contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.pancakeswapUniversalRouter;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Check for contract details section
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+});
+
+// ============================================
+// ADDRESS TESTS - SYSTEM CONTRACTS
+// ============================================
+
+test.describe("BSC Address Page - System Contracts", () => {
+  test("displays Validator Set system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.validatorSet;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Verify address is displayed
+      await expect(page.locator(`text=${addr.address.slice(0, 10)}`)).toBeVisible();
+    }
+  });
+
+  test("displays System Reward contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.systemReward;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Verify address is displayed
+      await expect(page.locator(`text=${addr.address.slice(0, 10)}`)).toBeVisible();
+    }
+  });
+
+  test("displays Token Hub contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.tokenHub;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Verify address is displayed
+      await expect(page.locator(`text=${addr.address.slice(0, 10)}`)).toBeVisible();
+    }
+  });
+
+  test("displays Stake Hub contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.stakeHub;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Verify address is displayed
+      await expect(page.locator(`text=${addr.address.slice(0, 10)}`)).toBeVisible();
+    }
+  });
+
+  test("displays Governor contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.governor;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Verify address is displayed
+      await expect(page.locator(`text=${addr.address.slice(0, 10)}`)).toBeVisible();
+    }
+  });
+
+  test("handles invalid address gracefully", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    await addressPage.goto("0xinvalid", CHAIN_ID);
+
+    await expect(
+      addressPage.errorText
+        .or(addressPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// ADDRESS TESTS - STAKING CONTRACTS
+// ============================================
+
+test.describe("BSC Address Page - Staking Contracts", () => {
+  test("displays PancakeSwap Main Staking contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.pancakeswapStaking;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Check for contract details section
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+
+  test("displays PancakeSwap Cake Pool contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = BSC.addresses.pancakeswapCakePool;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Check for contract details section
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+});
diff --git a/e2e/tests/mainnet/address.spec.ts b/e2e/tests/mainnet/address.spec.ts
new file mode 100644
index 0000000..741c7d1
--- /dev/null
+++ b/e2e/tests/mainnet/address.spec.ts
@@ -0,0 +1,370 @@
+import { test, expect } from "../../fixtures/test";
+import { AddressPage } from "../../pages/address.page";
+import { MAINNET } from "../../fixtures/mainnet";
+import { waitForAddressContent, DEFAULT_TIMEOUT } from "../../helpers/wait";
+
+test.describe("Address Page", () => {
+  test("displays address with balance and transaction count", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.vitalik;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify balance section shows ETH
+      await expect(page.locator("text=Balance:")).toBeVisible();
+      const balance = await addressPage.getBalance();
+      expect(balance).toContain("ETH");
+
+      // Verify transaction count is displayed
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      const txCount = await addressPage.getTransactionCount();
+      expect(txCount).toBeTruthy();
+    }
+  });
+
+  test("shows ENS name for known address", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.vitalik;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded && addr.hasENS) {
+      // Verify ENS name is displayed
+      await expect(page.locator(`text=${addr.ensName}`)).toBeVisible();
+      // Check for ENS Records section (use first() to avoid strict mode with loading state)
+      await expect(
+        page.getByText("ENS Records", { exact: true }).or(page.getByText("ENS Name", { exact: true }))
+      ).toBeVisible();
+    }
+  });
+
+  test("identifies contract type for USDC", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.usdc;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as a contract
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      // Check for contract details section
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+
+      // Contract should have verification status
+      const hasVerified = await page.locator("text=Verified").isVisible();
+      const hasNotVerified = await page.locator("text=Not Verified").isVisible();
+      expect(hasVerified || hasNotVerified).toBe(true);
+    }
+  });
+
+  test("displays contract details for Uniswap Router", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.uniswapRouter;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify contract type is displayed
+      const type = await addressPage.getAddressType();
+      expect(type.toLowerCase()).toMatch(/contract|erc/);
+
+      // Contract should have bytecode section
+      await expect(
+        page.locator("text=Contract Bytecode").or(page.locator("text=Bytecode"))
+      ).toBeVisible();
+    }
+  });
+
+  test("displays address header with partial address", async ({ page }) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.vitalik;
+
+    await addressPage.goto(addr.address);
+
+    // Verify address is displayed in header (at least partial)
+    await expect(page.locator(`text=${addr.address.slice(0, 10)}`)).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+
+  test("handles invalid address gracefully", async ({ page }) => {
+    const addressPage = new AddressPage(page);
+    await addressPage.goto("0xinvalid");
+
+    await expect(
+      addressPage.errorText
+        .or(addressPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+
+  test("displays ERC721 NFT collection (BAYC) with collection details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.bayc;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as ERC721 (type displays as "ERC-721 NFT")
+      const type = await addressPage.getAddressType();
+      expect(type.toLowerCase()).toMatch(/erc.?721/);
+
+      // Verify collection name and symbol are displayed
+      await expect(page.locator(`text=${addr.fullName}`).or(page.locator(`text=${addr.name}`))).toBeVisible();
+      await expect(page.locator(`text=${addr.symbol}`)).toBeVisible();
+
+      // Verify ERC721 badge is present (shows as "ERC-721")
+      await expect(page.locator(".token-standard-badge")).toBeVisible();
+
+      // Verify token lookup input exists
+      await expect(page.locator(".erc721-token-input")).toBeVisible();
+
+      // Verify NFT Collection Details section
+      await expect(page.locator("text=NFT Collection Details")).toBeVisible();
+
+      // Contract should have balance displayed
+      await expect(page.locator("text=Contract Balance:").or(page.locator("text=Balance:"))).toBeVisible();
+
+      // Verify contract is verified
+      await expect(page.locator("text=Verified")).toBeVisible();
+    }
+  });
+
+  test("displays BAYC contract verification details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.bayc;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Contract Details section exists (may be collapsed)
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+
+      // Click to expand Contract Details if collapsed
+      const contractDetailsHeader = page.locator("text=Contract Details").first();
+      await contractDetailsHeader.click();
+
+      // Wait for expansion and verify details
+      await expect(page.locator("text=Verified At")).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+
+      // Verify match type badge
+      await expect(page.locator(`text=${addr.matchType}`)).toBeVisible();
+
+      // Verify compiler version
+      await expect(page.locator("text=Compiler")).toBeVisible();
+      await expect(page.locator(`text=${addr.compiler}`)).toBeVisible();
+
+      // Verify bytecode and source code sections exist
+      await expect(page.locator("text=Contract Bytecode")).toBeVisible();
+      await expect(page.locator("text=Source Code")).toBeVisible();
+    }
+  });
+
+  test("displays BAYC contract read functions", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.bayc;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Click to expand Contract Details to show functions
+      const contractDetailsHeader = page.locator("text=Contract Details").first();
+      await contractDetailsHeader.click();
+
+      // Wait for Read Functions section to be visible
+      await expect(page.locator("text=/Read Functions \\(\\d+\\)/")).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+
+      // Verify some key read functions are displayed
+      const keyReadFunctions = ["name", "symbol", "totalSupply", "balanceOf", "ownerOf", "tokenURI"];
+      for (const fn of keyReadFunctions) {
+        await expect(page.locator(`button:has-text("${fn}")`).first()).toBeVisible();
+      }
+    }
+  });
+
+  test("displays BAYC contract write functions", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.bayc;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Click to expand Contract Details to show functions
+      const contractDetailsHeader = page.locator("text=Contract Details").first();
+      await contractDetailsHeader.click();
+
+      // Wait for Write Functions section to be visible
+      await expect(page.locator("text=/Write Functions \\(\\d+\\)/")).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+
+      // Verify some key write functions are displayed
+      const keyWriteFunctions = ["approve", "transferFrom", "safeTransferFrom"];
+      for (const fn of keyWriteFunctions) {
+        await expect(page.locator(`button:has-text("${fn}")`).first()).toBeVisible();
+      }
+    }
+  });
+
+  test("displays BAYC contract events", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.bayc;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Click to expand Contract Details to show events
+      const contractDetailsHeader = page.locator("text=Contract Details").first();
+      await contractDetailsHeader.click();
+
+      // Wait for Events section to be visible
+      await expect(page.locator("text=/Events \\(\\d+\\)/")).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+
+      // Verify the events are displayed
+      for (const event of addr.events) {
+        await expect(page.locator(`button:has-text("${event}")`).first()).toBeVisible();
+      }
+    }
+  });
+
+  test("displays ERC1155 multi-token contract (Rarible) with collection details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.rarible;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Verify it's identified as ERC1155 (type displays as "ERC-1155 MULTI-TOKEN")
+      const type = await addressPage.getAddressType();
+      expect(type.toLowerCase()).toMatch(/erc.?1155/);
+
+      // Verify collection name and symbol are displayed
+      await expect(page.locator(`text=${addr.name}`).or(page.locator(`text=${addr.symbol}`))).toBeVisible();
+
+      // Verify ERC1155 badge is present
+      await expect(page.locator(".token-standard-badge")).toBeVisible();
+
+      // Verify token lookup input exists
+      await expect(page.locator(".erc1155-token-input")).toBeVisible();
+
+      // Verify Multi-Token Collection Details section
+      await expect(page.locator("text=Multi-Token Collection Details")).toBeVisible();
+
+      // Contract should have balance displayed
+      await expect(page.locator("text=Contract Balance:").or(page.locator("text=Balance:"))).toBeVisible();
+
+      // Verify contract is verified
+      await expect(page.locator("text=Verified")).toBeVisible();
+    }
+  });
+
+  test("displays Rarible contract verification details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.rarible;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Contract Details section exists (may be collapsed)
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+
+      // Click to expand Contract Details if collapsed
+      const contractDetailsHeader = page.locator("text=Contract Details").first();
+      await contractDetailsHeader.click();
+
+      // Wait for expansion and verify details
+      await expect(page.locator("text=Verified At")).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+
+      // Verify match type badge (MATCH for Rarible)
+      await expect(page.locator(`text=${addr.matchType}`)).toBeVisible();
+
+      // Verify compiler version
+      await expect(page.locator("text=Compiler")).toBeVisible();
+      await expect(page.locator(`text=${addr.compiler}`)).toBeVisible();
+
+      // Verify bytecode and source code sections exist
+      await expect(page.locator("text=Contract Bytecode")).toBeVisible();
+      await expect(page.locator("text=Source Code")).toBeVisible();
+    }
+  });
+
+  test("displays Rarible contract read functions", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.rarible;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Click to expand Contract Details to show functions
+      const contractDetailsHeader = page.locator("text=Contract Details").first();
+      await contractDetailsHeader.click();
+
+      // Wait for Read Functions section to be visible
+      await expect(page.locator("text=/Read Functions \\(\\d+\\)/")).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+
+      // Verify some key read functions are displayed
+      const keyReadFunctions = ["balanceOf", "name", "symbol", "uri", "supportsInterface"];
+      for (const fn of keyReadFunctions) {
+        await expect(page.locator(`button:has-text("${fn}")`).first()).toBeVisible();
+      }
+    }
+  });
+
+  test("displays Rarible contract write functions", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.rarible;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Click to expand Contract Details to show functions
+      const contractDetailsHeader = page.locator("text=Contract Details").first();
+      await contractDetailsHeader.click();
+
+      // Wait for Write Functions section to be visible
+      await expect(page.locator("text=/Write Functions \\(\\d+\\)/")).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+
+      // Verify some key write functions are displayed
+      const keyWriteFunctions = ["mint", "burn", "safeTransferFrom", "setApprovalForAll"];
+      for (const fn of keyWriteFunctions) {
+        await expect(page.locator(`button:has-text("${fn}")`).first()).toBeVisible();
+      }
+    }
+  });
+
+  test("displays Rarible contract events", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = MAINNET.addresses.rarible;
+
+    await addressPage.goto(addr.address);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      // Click to expand Contract Details to show events
+      const contractDetailsHeader = page.locator("text=Contract Details").first();
+      await contractDetailsHeader.click();
+
+      // Wait for Events section to be visible
+      await expect(page.locator("text=/Events \\(\\d+\\)/")).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+
+      // Verify some key events are displayed
+      const keyEvents = ["TransferSingle", "TransferBatch", "ApprovalForAll", "URI"];
+      for (const event of keyEvents) {
+        await expect(page.locator(`button:has-text("${event}")`).first()).toBeVisible();
+      }
+    }
+  });
+});
diff --git a/e2e/tests/mainnet/block.spec.ts b/e2e/tests/mainnet/block.spec.ts
new file mode 100644
index 0000000..e3e098d
--- /dev/null
+++ b/e2e/tests/mainnet/block.spec.ts
@@ -0,0 +1,254 @@
+import { test, expect } from "../../fixtures/test";
+import { BlockPage } from "../../pages/block.page";
+import { MAINNET } from "../../fixtures/mainnet";
+import { waitForBlockContent, DEFAULT_TIMEOUT } from "../../helpers/wait";
+
+test.describe("Block Page", () => {
+  test("block #10,000 - pre-London block with no transactions", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = MAINNET.blocks["10000"];
+    await blockPage.goto(block.number);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header section
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.timestampAge).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transactions
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=0 transactions in this block")).toBeVisible();
+
+      // Fee Recipient
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      const feeRecipient = await blockPage.getFeeRecipient();
+      expect(feeRecipient.toLowerCase()).toContain(block.feeRecipientPartial.toLowerCase());
+
+      // Gas Used with value (0 (0.0%))
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator("text=0 (0.0%)")).toBeVisible();
+
+      // Gas Limit with value
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+
+      // Extra Data with value
+      await expect(page.locator("text=Extra Data:")).toBeVisible();
+      await expect(page.locator(`text=${block.extraData}`)).toBeVisible();
+
+      // Difficulty with value
+      await expect(page.getByText("Difficulty:", { exact: true })).toBeVisible();
+      await expect(page.getByText(block.difficulty).first()).toBeVisible();
+
+      // Total Difficulty with value
+      await expect(page.getByText("Total Difficulty:", { exact: true })).toBeVisible();
+
+      // Size with value
+      await expect(page.locator("text=Size:")).toBeVisible();
+      await expect(page.locator(`text=${block.size}`)).toBeVisible();
+
+      // Should NOT have base fee (pre-London)
+      await expect(page.locator("text=Base Fee Per Gas:")).not.toBeVisible();
+    }
+  });
+
+  test("block #1,000,000 - pre-London block with transactions", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = MAINNET.blocks["1000000"];
+    await blockPage.goto(block.number);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transactions with count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transactions in this block`)).toBeVisible();
+
+      // Fee Recipient
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      const feeRecipient = await blockPage.getFeeRecipient();
+      expect(feeRecipient.toLowerCase()).toContain(block.feeRecipientPartial.toLowerCase());
+
+      // Gas Used with value
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      // Gas Limit with value
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+
+      // Extra Data
+      await expect(page.locator("text=Extra Data:")).toBeVisible();
+
+      // Difficulty with value
+      await expect(page.getByText("Difficulty:", { exact: true })).toBeVisible();
+      await expect(page.getByText(block.difficulty).first()).toBeVisible();
+
+      // Total Difficulty with value
+      await expect(page.getByText("Total Difficulty:", { exact: true })).toBeVisible();
+
+      // Size with value
+      await expect(page.locator("text=Size:")).toBeVisible();
+      await expect(page.locator(`text=${block.size}`)).toBeVisible();
+
+      // Should NOT have base fee (pre-London)
+      await expect(page.locator("text=Base Fee Per Gas:")).not.toBeVisible();
+    }
+  });
+
+  test("block #20,000,000 - post-London block with base fee and withdrawals", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = MAINNET.blocks["20000000"];
+    await blockPage.goto(block.number);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transactions with count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transactions in this block`)).toBeVisible();
+
+      // Withdrawals with count
+      await expect(page.locator("text=Withdrawals:")).toBeVisible();
+      await expect(page.locator(`text=${block.withdrawals} withdrawals in this block`)).toBeVisible();
+
+      // Fee Recipient
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      const feeRecipient = await blockPage.getFeeRecipient();
+      expect(feeRecipient.toLowerCase()).toContain(block.feeRecipientPartial.toLowerCase());
+
+      // Gas Used with value
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      // Gas Limit with value
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+
+      // Base Fee Per Gas with value (post-London)
+      await expect(page.locator("text=Base Fee Per Gas:")).toBeVisible();
+      await expect(page.locator(`text=${block.baseFeePerGas}`)).toBeVisible();
+
+      // Burnt Fees with value
+      await expect(page.locator("text=Burnt Fees:")).toBeVisible();
+      await expect(page.locator(`text=${block.burntFees}`)).toBeVisible();
+
+      // Extra Data with value
+      await expect(page.locator("text=Extra Data:")).toBeVisible();
+      await expect(page.locator(`text=${block.extraData}`)).toBeVisible();
+
+      // Size with value
+      await expect(page.locator("text=Size:")).toBeVisible();
+      await expect(page.locator(`text=${block.size}`)).toBeVisible();
+    }
+  });
+
+  test("block #10,000 more details section shows correct hash values", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = MAINNET.blocks["10000"];
+    await blockPage.goto(block.number);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Click "Show More Details" to expand
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+
+        // Wait for details to expand (button text changes)
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Verify hash field labels are present (source text is title case, CSS transforms to uppercase)
+        await expect(page.getByText("Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Parent Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("State Root:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Transactions Root:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Receipts Root:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Nonce:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Mix Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Sha3 Uncles:", { exact: true })).toBeVisible();
+
+        // Verify actual hash values (use .first() for values that may appear multiple times)
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.stateRoot}`)).toBeVisible();
+        // transactionsRoot and receiptsRoot are identical for empty blocks, use .first()
+        await expect(page.locator(`text=${block.transactionsRoot}`).first()).toBeVisible();
+        await expect(page.locator(`text=${block.nonce}`)).toBeVisible();
+        await expect(page.locator(`text=${block.mixHash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.sha3Uncles}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #20,000,000 more details section includes withdrawals root", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = MAINNET.blocks["20000000"];
+    await blockPage.goto(block.number);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Click "Show More Details" to expand
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+
+        // Wait for details to expand
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Verify hash field labels including withdrawals root (post-Shanghai)
+        await expect(page.getByText("Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Parent Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("State Root:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Transactions Root:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Receipts Root:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Withdrawals Root:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Nonce:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Mix Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Sha3 Uncles:", { exact: true })).toBeVisible();
+
+        // Verify actual hash values
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.stateRoot}`)).toBeVisible();
+        await expect(page.locator(`text=${block.transactionsRoot}`)).toBeVisible();
+        await expect(page.locator(`text=${block.receiptsRoot}`)).toBeVisible();
+        await expect(page.locator(`text=${block.withdrawalsRoot}`)).toBeVisible();
+        await expect(page.locator(`text=${block.nonce}`)).toBeVisible();
+        await expect(page.locator(`text=${block.mixHash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.sha3Uncles}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block navigation buttons work", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(MAINNET.blocks["1000000"].number);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Verify navigation buttons exist
+      await expect(blockPage.navPrevBtn).toBeVisible();
+      await expect(blockPage.navNextBtn).toBeVisible();
+    }
+  });
+
+  test("handles invalid block number gracefully", async ({ page }) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(999999999999);
+
+    await expect(
+      blockPage.errorText
+        .or(blockPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
diff --git a/e2e/tests/mainnet/token.spec.ts b/e2e/tests/mainnet/token.spec.ts
new file mode 100644
index 0000000..7d05de1
--- /dev/null
+++ b/e2e/tests/mainnet/token.spec.ts
@@ -0,0 +1,277 @@
+import { test, expect } from "../../fixtures/test";
+import { MAINNET } from "../../fixtures/mainnet";
+import { waitForTokenContent, DEFAULT_TIMEOUT } from "../../helpers/wait";
+
+test.describe("ERC721 Token Details", () => {
+  test("displays BAYC #1 NFT details section", async ({ page }, testInfo) => {
+    const token = MAINNET.tokens.baycToken1;
+    await page.goto(`/${MAINNET.chainId}/address/${token.contractAddress}/${token.tokenId}`);
+
+    const loaded = await waitForTokenContent(page, testInfo);
+    if (loaded) {
+      // Verify ERC721 header is displayed
+      await expect(page.locator(".erc721-header")).toBeVisible();
+
+      // Verify token ID is displayed in title
+      await expect(page.locator(".erc721-header-title")).toContainText(`#${token.tokenId}`);
+
+      // Verify collection name is displayed
+      await expect(
+        page.locator(`text=${token.collectionName}`).or(page.locator(`text=${token.collectionSymbol}`))
+      ).toBeVisible();
+
+      // Verify NFT Details section
+      await expect(page.locator("text=NFT Details")).toBeVisible();
+
+      // Verify Token ID is shown
+      await expect(page.locator("text=Token ID:")).toBeVisible();
+      await expect(page.locator(`text=${token.tokenId}`).first()).toBeVisible();
+
+      // Verify Token Standard badge
+      await expect(page.locator("text=Token Standard:")).toBeVisible();
+      await expect(page.locator(".token-standard-badge")).toBeVisible();
+
+      // Verify Collection Size
+      await expect(page.locator("text=Collection Size:")).toBeVisible();
+      await expect(page.locator(`text=${token.collectionSize}`)).toBeVisible();
+
+      // Verify Owner is displayed
+      await expect(page.locator("text=Owner:")).toBeVisible();
+    }
+  });
+
+  test("displays BAYC #1 token image", async ({ page }, testInfo) => {
+    const token = MAINNET.tokens.baycToken1;
+    await page.goto(`/${MAINNET.chainId}/address/${token.contractAddress}/${token.tokenId}`);
+
+    const loaded = await waitForTokenContent(page, testInfo);
+    if (loaded) {
+      // Verify image container exists
+      await expect(page.locator(".erc721-image-container")).toBeVisible();
+
+      // Verify token image is rendered
+      await expect(page.locator(".erc721-token-image")).toBeVisible();
+    }
+  });
+
+  test("displays BAYC #1 properties/attributes", async ({ page }, testInfo) => {
+    const token = MAINNET.tokens.baycToken1;
+    await page.goto(`/${MAINNET.chainId}/address/${token.contractAddress}/${token.tokenId}`);
+
+    const loaded = await waitForTokenContent(page, testInfo);
+    if (loaded) {
+      // Verify Properties section exists
+      await expect(page.locator("text=Properties")).toBeVisible();
+
+      // Verify properties count (5 for BAYC #1)
+      await expect(page.locator("text=/Properties\\s+5/").or(page.locator("text=Properties 5"))).toBeVisible();
+
+      // Verify specific properties are displayed
+      for (const prop of token.properties) {
+        await expect(page.locator(`.erc721-attribute-type:has-text("${prop.trait}")`).first()).toBeVisible();
+        await expect(page.locator(`.erc721-attribute-value:has-text("${prop.value}")`).first()).toBeVisible();
+      }
+    }
+  });
+
+  test("displays BAYC #1 Token URI section", async ({ page }, testInfo) => {
+    const token = MAINNET.tokens.baycToken1;
+    await page.goto(`/${MAINNET.chainId}/address/${token.contractAddress}/${token.tokenId}`);
+
+    const loaded = await waitForTokenContent(page, testInfo);
+    if (loaded) {
+      // Verify Token URI section exists
+      await expect(page.locator("text=Token URI")).toBeVisible();
+
+      // Verify the IPFS URI is displayed
+      await expect(page.locator(`text=${token.tokenUri}`)).toBeVisible();
+
+      // Verify Open URI button exists
+      await expect(page.locator("text=Open URI")).toBeVisible();
+    }
+  });
+
+  test("displays BAYC #1 Raw Metadata section", async ({ page }, testInfo) => {
+    const token = MAINNET.tokens.baycToken1;
+    await page.goto(`/${MAINNET.chainId}/address/${token.contractAddress}/${token.tokenId}`);
+
+    const loaded = await waitForTokenContent(page, testInfo);
+    if (loaded) {
+      // Verify Raw Metadata section exists (expandable)
+      await expect(page.locator("text=Raw Metadata")).toBeVisible();
+    }
+  });
+
+  test("displays BAYC #100 with different properties", async ({ page }, testInfo) => {
+    const token = MAINNET.tokens.baycToken100;
+    await page.goto(`/${MAINNET.chainId}/address/${token.contractAddress}/${token.tokenId}`);
+
+    const loaded = await waitForTokenContent(page, testInfo);
+    if (loaded) {
+      // Verify token ID is displayed
+      await expect(page.locator(".erc721-header-title")).toContainText(`#${token.tokenId}`);
+
+      // Verify Properties section exists with 5 properties
+      await expect(page.locator("text=Properties")).toBeVisible();
+
+      // Verify specific properties for token #100
+      for (const prop of token.properties) {
+        await expect(page.locator(`.erc721-attribute-type:has-text("${prop.trait}")`).first()).toBeVisible();
+        await expect(page.locator(`.erc721-attribute-value:has-text("${prop.value}")`).first()).toBeVisible();
+      }
+
+      // Verify Token URI matches token #100
+      await expect(page.locator(`text=${token.tokenUri}`)).toBeVisible();
+    }
+  });
+
+  test("navigates to ERC721 token via collection lookup", async ({ page }, testInfo) => {
+    const addr = MAINNET.addresses.bayc;
+    const tokenId = "1";
+
+    // Go to collection page
+    await page.goto(`/${MAINNET.chainId}/address/${addr.address}`);
+
+    // Wait for page to load (may show error due to RPC issues)
+    await expect(
+      page
+        .locator(".erc721-token-input")
+        .or(page.locator("text=Error:"))
+        .or(page.locator("text=Failed to fetch"))
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 5 });
+
+    // Only proceed if the token input is visible (page loaded successfully)
+    if (await page.locator(".erc721-token-input").isVisible()) {
+      // Enter token ID in lookup input
+      await page.locator(".erc721-token-input").fill(tokenId);
+
+      // Click view button
+      await page.locator(".erc721-view-button").click();
+
+      // Verify navigation to token details page
+      await expect(page).toHaveURL(new RegExp(`/${MAINNET.chainId}/address/${addr.address}/${tokenId}`));
+
+      // Verify token details page loaded
+      const loaded = await waitForTokenContent(page, testInfo);
+      if (loaded) {
+        await expect(page.locator(".erc721-header")).toBeVisible();
+      }
+    }
+  });
+});
+
+test.describe("ERC1155 Token Details", () => {
+  test("displays ERC1155 token details page", async ({ page }, testInfo) => {
+    const token = MAINNET.tokens.raribleToken;
+    await page.goto(`/${MAINNET.chainId}/address/${token.contractAddress}/${token.tokenId}`);
+
+    const loaded = await waitForTokenContent(page, testInfo);
+    if (loaded) {
+      // Verify ERC1155 header is displayed
+      await expect(page.locator(".erc1155-header")).toBeVisible();
+
+      // Verify collection name is displayed
+      await expect(
+        page.locator(`text=${token.collectionName}`).or(page.locator(`text=${token.collectionSymbol}`))
+      ).toBeVisible();
+    }
+  });
+
+  test("displays ERC1155 token image container", async ({ page }, testInfo) => {
+    const token = MAINNET.tokens.raribleToken;
+    await page.goto(`/${MAINNET.chainId}/address/${token.contractAddress}/${token.tokenId}`);
+
+    const loaded = await waitForTokenContent(page, testInfo);
+    if (loaded) {
+      // Verify image container exists
+      await expect(page.locator(".erc1155-image-container")).toBeVisible();
+    }
+  });
+
+  test("displays ERC1155 balance lookup section", async ({ page }, testInfo) => {
+    const token = MAINNET.tokens.raribleToken;
+    await page.goto(`/${MAINNET.chainId}/address/${token.contractAddress}/${token.tokenId}`);
+
+    const loaded = await waitForTokenContent(page, testInfo);
+    if (loaded) {
+      // Verify balance lookup section exists (unique to ERC1155)
+      await expect(page.locator(".erc1155-balance-lookup")).toBeVisible();
+
+      // Verify balance input field exists
+      await expect(page.locator(".erc1155-balance-input")).toBeVisible();
+
+      // Verify check balance button exists
+      await expect(page.locator(".erc1155-balance-button")).toBeVisible();
+    }
+  });
+
+  test("navigates to ERC1155 token via collection lookup", async ({ page }, testInfo) => {
+    const addr = MAINNET.addresses.rarible;
+    const tokenId = "1"; // Simple token ID for navigation test
+
+    // Go to collection page
+    await page.goto(`/${MAINNET.chainId}/address/${addr.address}`);
+
+    // Wait for page to load - could be ERC1155 view, generic contract, or error
+    await expect(
+      page
+        .locator(".erc1155-token-input")
+        .or(page.locator("text=Contract Details"))
+        .or(page.locator("text=Error:"))
+        .or(page.locator("text=Failed to fetch"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 5 });
+
+    // Only proceed if the ERC1155 token input is visible (contract detected as ERC1155)
+    if (await page.locator(".erc1155-token-input").isVisible()) {
+      // Enter token ID in lookup input
+      await page.locator(".erc1155-token-input").fill(tokenId);
+
+      // Click view button
+      await page.locator(".erc1155-view-button").click();
+
+      // Verify navigation to token details page
+      await expect(page).toHaveURL(new RegExp(`/${MAINNET.chainId}/address/${addr.address}/${tokenId}`));
+
+      // Verify token details page loaded (may be ERC1155 or show loading/error for invalid token)
+      await expect(
+        page.locator(".erc1155-header").or(page.locator("text=Error:")).or(page.locator(".erc1155-detail-content"))
+      ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+    }
+    // If not detected as ERC1155, test passes (RPC may not support interface detection)
+  });
+});
+
+test.describe("Token Details - Error Handling", () => {
+  test("handles invalid token ID gracefully for ERC721", async ({ page }, testInfo) => {
+    const addr = MAINNET.addresses.bayc;
+    const invalidTokenId = "999999999"; // Non-existent token
+
+    await page.goto(`/${MAINNET.chainId}/address/${addr.address}/${invalidTokenId}`);
+
+    // Should show error or handle gracefully
+    await expect(
+      page
+        .locator("text=Error:")
+        .or(page.locator("text=Something went wrong"))
+        .or(page.locator(".erc721-header"))
+        .or(page.locator(".erc721-detail-content"))
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+
+  test("handles invalid contract for token view", async ({ page }, testInfo) => {
+    const invalidContract = "0x0000000000000000000000000000000000000000";
+    const tokenId = "1";
+
+    await page.goto(`/${MAINNET.chainId}/address/${invalidContract}/${tokenId}`);
+
+    // Should show error or handle gracefully
+    await expect(
+      page
+        .locator("text=Error:")
+        .or(page.locator("text=Something went wrong"))
+        .or(page.locator(".container-wide"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
diff --git a/e2e/tests/mainnet/transaction.spec.ts b/e2e/tests/mainnet/transaction.spec.ts
new file mode 100644
index 0000000..e1441c6
--- /dev/null
+++ b/e2e/tests/mainnet/transaction.spec.ts
@@ -0,0 +1,120 @@
+import { test, expect } from "../../fixtures/test";
+import { TransactionPage } from "../../pages/transaction.page";
+import { MAINNET } from "../../fixtures/mainnet";
+import { waitForTxContent, DEFAULT_TIMEOUT } from "../../helpers/wait";
+
+// Transaction hash constants for readability
+const FIRST_ETH_TRANSFER = "0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060";
+const USDC_APPROVAL = "0xc55e2b90168af6972193c1f86fa4d7d7b31a29c156665d15b9cd48618b5177ef";
+
+test.describe("Transaction Page", () => {
+  test("displays first ETH transfer with all details", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = MAINNET.transactions[FIRST_ETH_TRANSFER];
+
+    await txPage.goto(tx.hash);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify core transaction details
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=Block:")).toBeVisible();
+      await expect(page.locator("text=From:")).toBeVisible();
+      await expect(page.locator("text=To:")).toBeVisible();
+      await expect(page.locator("text=Value:")).toBeVisible();
+
+      // Verify gas information
+      await expect(page.locator("text=Gas Price:")).toBeVisible();
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+    }
+  });
+
+  test("shows correct from and to addresses", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = MAINNET.transactions[FIRST_ETH_TRANSFER];
+
+    await txPage.goto(tx.hash);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("displays transaction value and fee", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = MAINNET.transactions[FIRST_ETH_TRANSFER];
+
+    await txPage.goto(tx.hash);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify value contains ETH
+      const value = await txPage.getValue();
+      expect(value).toContain("ETH");
+
+      // Verify transaction fee is displayed
+      await expect(page.locator("text=Transaction Fee:")).toBeVisible();
+    }
+  });
+
+  test("displays other attributes section", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = MAINNET.transactions[FIRST_ETH_TRANSFER];
+
+    await txPage.goto(tx.hash);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify other attributes section
+      await expect(page.locator("text=Other Attributes:")).toBeVisible();
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+    }
+  });
+
+  test("displays transaction with input data", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = MAINNET.transactions[USDC_APPROVAL];
+
+    await txPage.goto(tx.hash);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify input data section exists for contract interactions
+      await expect(page.locator("text=Input Data:")).toBeVisible();
+    }
+  });
+
+  test("displays block number link", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = MAINNET.transactions[FIRST_ETH_TRANSFER];
+
+    await txPage.goto(tx.hash);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify block section is displayed (block number may be formatted with commas)
+      await expect(page.locator("text=Block:")).toBeVisible();
+      const blockValue = await txPage.getBlockNumber();
+      expect(blockValue).toBeTruthy();
+    }
+  });
+
+  test("handles invalid tx hash gracefully", async ({ page }) => {
+    const txPage = new TransactionPage(page);
+    await txPage.goto("0xinvalid");
+
+    await expect(
+      txPage.errorText
+        .or(txPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
diff --git a/e2e/tests/optimism.spec.ts b/e2e/tests/optimism.spec.ts
new file mode 100644
index 0000000..779e584
--- /dev/null
+++ b/e2e/tests/optimism.spec.ts
@@ -0,0 +1,735 @@
+import { test, expect } from "../fixtures/test";
+import { BlockPage } from "../pages/block.page";
+import { AddressPage } from "../pages/address.page";
+import { TransactionPage } from "../pages/transaction.page";
+import { OPTIMISM } from "../fixtures/optimism";
+import {
+  waitForBlockContent,
+  waitForTxContent,
+  waitForAddressContent,
+  DEFAULT_TIMEOUT,
+} from "../helpers/wait";
+
+const CHAIN_ID = OPTIMISM.chainId;
+
+// Transaction hash constants for readability
+const VELODROME_SWAP = "0xa8d73ea0639f39157f787a29591b36fc73c19b443bbe8416d8d6f24858063910";
+const OP_TRANSFER = "0xdcf7c4afb479cd47f7ce263cbbb298f559b81fc592cc07737935a6166fb90f0c";
+const SYSTEM_TX = "0x5d3522dad0d0745b59e9443733f8423548f99856c00768aba9779ae288dedd0a";
+
+// ============================================
+// BLOCK TESTS
+// ============================================
+
+test.describe("Optimism - Block Page", () => {
+  test("genesis block #0 - Optimism mainnet (post-regenesis)", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = OPTIMISM.blocks["0"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header section
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.timestampAge).toBeVisible();
+
+      // Genesis block has 8,893 transactions from state migration
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+
+      // Gas Used should be 0
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+    }
+  });
+
+  test("block #100,000,000 - pre-Bedrock block with gas details", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = OPTIMISM.blocks["100000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transaction`)).toBeVisible();
+
+      // Gas Used
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+    }
+  });
+
+  test("block #100,000,000 more details section shows correct hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = OPTIMISM.blocks["100000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Verify hash field labels
+        await expect(page.getByText("Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Parent Hash:", { exact: true })).toBeVisible();
+
+        // Block hash
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        // Parent hash
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #110,000,000 - post-Bedrock with complete gas details", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = OPTIMISM.blocks["110000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transactions in this block`)).toBeVisible();
+
+      // Gas details
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+
+      // Base Fee Per Gas (post-Bedrock)
+      await expect(page.locator("text=Base Fee Per Gas:")).toBeVisible();
+
+      // Fee Recipient (SequencerFeeVault)
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      const feeRecipient = await blockPage.getFeeRecipient();
+      expect(feeRecipient.toLowerCase()).toContain(block.feeRecipientPartial.toLowerCase());
+    }
+  });
+
+  test("block #110,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = OPTIMISM.blocks["110000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #120,000,000 - post-Ecotone (EIP-4844) high utilization", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = OPTIMISM.blocks["120000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+
+      // Should have many transactions (21)
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transactions in this block`)).toBeVisible();
+
+      // Gas details - high utilization block (91.9%)
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+
+      // Base Fee Per Gas
+      await expect(page.locator("text=Base Fee Per Gas:")).toBeVisible();
+
+      // Fee Recipient
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      const feeRecipient = await blockPage.getFeeRecipient();
+      expect(feeRecipient.toLowerCase()).toContain(block.feeRecipientPartial.toLowerCase());
+    }
+  });
+
+  test("block #120,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = OPTIMISM.blocks["120000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #130,000,000 - post-Holocene with increased gas limit (60M)", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = OPTIMISM.blocks["130000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+
+      // Transaction count
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator(`text=${block.txCount} transactions in this block`)).toBeVisible();
+
+      // Gas Used
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasUsed}`)).toBeVisible();
+
+      // Gas Limit - increased post-Holocene (60M)
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+      await expect(page.locator(`text=${block.gasLimit}`)).toBeVisible();
+
+      // Base Fee Per Gas
+      await expect(page.locator("text=Base Fee Per Gas:")).toBeVisible();
+
+      // Fee Recipient
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      const feeRecipient = await blockPage.getFeeRecipient();
+      expect(feeRecipient.toLowerCase()).toContain(block.feeRecipientPartial.toLowerCase());
+    }
+  });
+
+  test("block #130,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = OPTIMISM.blocks["130000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("genesis block more details section shows correct hash", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = OPTIMISM.blocks["0"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Verify hash field labels
+        await expect(page.getByText("Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Parent Hash:", { exact: true })).toBeVisible();
+
+        // Genesis block hash
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        // Genesis parent hash (all zeros) - use first() as it appears in multiple places
+        await expect(page.locator(`text=${block.parentHash}`).first()).toBeVisible();
+      }
+    }
+  });
+
+  test("block navigation buttons work on Optimism", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(OPTIMISM.blocks["110000000"].number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.navPrevBtn).toBeVisible();
+      await expect(blockPage.navNextBtn).toBeVisible();
+    }
+  });
+
+  test("handles invalid block number gracefully", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(999999999999, CHAIN_ID);
+
+    await expect(
+      blockPage.errorText
+        .or(blockPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// TRANSACTION TESTS
+// ============================================
+
+test.describe("Optimism - Transaction Page", () => {
+  test("displays Velodrome DEX swap (Legacy Type 0) with all details", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[VELODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify core transaction details
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=Block:")).toBeVisible();
+      await expect(page.locator("text=From:")).toBeVisible();
+      await expect(page.locator("text=To:")).toBeVisible();
+
+      // Verify gas information
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+      await expect(page.getByText("Gas Price:", { exact: true })).toBeVisible();
+    }
+  });
+
+  test("shows correct from and to addresses for Velodrome swap", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[VELODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("displays transaction fee for Velodrome swap", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[VELODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify transaction fee is displayed
+      await expect(page.locator("text=Transaction Fee:")).toBeVisible();
+    }
+  });
+
+  test("displays Velodrome swap nonce and position", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[VELODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Other Attributes:")).toBeVisible();
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+
+      // Verify nonce value is displayed (use locator that includes the label)
+      await expect(page.locator(`text=Nonce: ${tx.nonce}`)).toBeVisible();
+    }
+  });
+
+  test("displays OP token transfer transaction (EIP-1559 Type 2)", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[OP_TRANSFER];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=From:")).toBeVisible();
+      await expect(page.locator("text=To:")).toBeVisible();
+
+      // To address should be OP token contract
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("OP transfer shows correct addresses and gas details", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[OP_TRANSFER];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+
+      // Verify gas limit is displayed
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+    }
+  });
+
+  test("OP transfer shows nonce and position", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[OP_TRANSFER];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+
+      // Verify nonce value is displayed (use locator that includes the label)
+      await expect(page.locator(`text=Nonce: ${tx.nonce}`)).toBeVisible();
+    }
+  });
+
+  test("displays system transaction (Type 126) - L2CrossDomainMessenger relay", async ({
+    page,
+  }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[SYSTEM_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=From:")).toBeVisible();
+      await expect(page.locator("text=To:")).toBeVisible();
+
+      // To address should be L2CrossDomainMessenger
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("system transaction shows correct from address (Aliased L1 Messenger)", async ({
+    page,
+  }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[SYSTEM_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("displays transaction with input data", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[VELODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Contract interaction should have input data
+      await expect(page.locator("text=Input Data:")).toBeVisible();
+    }
+  });
+
+  test("displays block number link for transaction", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = OPTIMISM.transactions[VELODROME_SWAP];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Block:")).toBeVisible();
+      const blockValue = await txPage.getBlockNumber();
+      expect(blockValue).toBeTruthy();
+    }
+  });
+
+  test("handles invalid tx hash gracefully", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    await txPage.goto("0xinvalid", CHAIN_ID);
+
+    await expect(
+      txPage.errorText
+        .or(txPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// ADDRESS TESTS
+// ============================================
+
+test.describe("Optimism - Address Page", () => {
+  test("displays native USDC contract details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.usdc;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      await expect(page.locator("text=Contract Details")).toBeVisible();
+    }
+  });
+
+  test("displays bridged USDC.e contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.usdce;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays WETH predeploy contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.weth;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays OP governance token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.op;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays USDT contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.usdt;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays DAI contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.dai;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays Velodrome Router contract with details", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.velodromeRouter;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+
+      await expect(page.locator("text=Contract Details").first()).toBeVisible();
+    }
+  });
+
+  test("displays Velodrome Universal Router contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.velodromeUniversalRouter;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays Uniswap V3 Router contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.uniswapV3Router;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays Uniswap Universal Router contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.uniswapUniversalRouter;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays SequencerFeeVault system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.sequencerFeeVault;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays GasPriceOracle system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.gasPriceOracle;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays L1Block system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.l1Block;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays L2StandardBridge contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.l2StandardBridge;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays L2CrossDomainMessenger contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.l2CrossDomainMessenger;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays L2ToL1MessagePasser contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.l2ToL1MessagePasser;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays BaseFeeVault system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.baseFeeVault;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+
+  test("displays L1FeeVault system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const addr = OPTIMISM.addresses.l1FeeVault;
+
+    await addressPage.goto(addr.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      const isContract = await addressPage.isContract();
+      expect(isContract).toBe(true);
+    }
+  });
+});
diff --git a/e2e/tests/polygon.spec.ts b/e2e/tests/polygon.spec.ts
new file mode 100644
index 0000000..3d2e960
--- /dev/null
+++ b/e2e/tests/polygon.spec.ts
@@ -0,0 +1,744 @@
+import { test, expect } from "../fixtures/test";
+import { BlockPage } from "../pages/block.page";
+import { TransactionPage } from "../pages/transaction.page";
+import { AddressPage } from "../pages/address.page";
+import { POLYGON } from "../fixtures/polygon";
+import {
+  waitForBlockContent,
+  waitForTxContent,
+  waitForAddressContent,
+  DEFAULT_TIMEOUT,
+} from "../helpers/wait";
+
+const CHAIN_ID = POLYGON.chainId;
+
+// Transaction hash constants for readability
+const LEGACY_NFT_TX = "0xb14598e46791c2f0ab366ba2fd4a533e21a0c9894f902773e02e3869b7373c3e";
+const DEFI_SWAP_TX = "0x1ed0c46bafb76d5a3d8201cdf8fc732efa97b000d88bd48dc203ac45d6340af0";
+const CONTRACT_TX = "0x65edbf03a20a0317295efaeb9c20836b20b16740c8311ce51ceee91d7674b20d";
+
+// ============================================
+// BLOCK TESTS
+// ============================================
+
+test.describe("Polygon Block Page", () => {
+  test("genesis block #0 - Polygon PoS mainnet launch", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["0"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Genesis has 0 transactions
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=0 transactions")).toBeVisible();
+
+      // Gas Used should be 0
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("genesis block #0 more details shows hash and parent hash", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["0"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        // Verify hash field labels
+        await expect(page.getByText("Hash:", { exact: true })).toBeVisible();
+        await expect(page.getByText("Parent Hash:", { exact: true })).toBeVisible();
+
+        // Genesis block hash
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        // Genesis parent hash (all zeros) - use .first() to avoid matching logs bloom
+        await expect(page.locator(`text=${block.parentHash}`).first()).toBeVisible();
+      }
+    }
+  });
+
+  test("block #10,000,000 - Early Polygon activity", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["10000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Header
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+
+      // Transactions
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+
+      // Fee Recipient (validator)
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+
+      // Gas Used
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+
+      // Gas Limit
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #10,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["10000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #20,000,000 - Growing DeFi activity", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["20000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #20,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["20000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #30,000,000 - Mature network", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["30000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #30,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["30000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #38,189,056 - Delhi Hard Fork", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["38189056"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #38,189,056 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["38189056"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #50,000,000 - High activity block", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["50000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #50,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["50000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #62,278,656 - Ahmedabad Hard Fork (MATIC to POL)", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["62278656"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #62,278,656 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["62278656"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block #65,000,000 - Post-Ahmedabad POL era", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["65000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(blockPage.statusBadge).toContainText("Finalized");
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+      await expect(page.locator("text=Fee Recipient:")).toBeVisible();
+      await expect(page.locator("text=Gas Used:")).toBeVisible();
+      await expect(page.locator("text=Gas Limit:")).toBeVisible();
+    }
+  });
+
+  test("block #65,000,000 more details shows hashes", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    const block = POLYGON.blocks["65000000"];
+    await blockPage.goto(block.number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      const showMoreBtn = page.locator("text=Show More Details");
+      if (await showMoreBtn.isVisible()) {
+        await showMoreBtn.click();
+        await expect(page.locator("text=Hide More Details")).toBeVisible();
+
+        await expect(page.locator(`text=${block.hash}`)).toBeVisible();
+        await expect(page.locator(`text=${block.parentHash}`)).toBeVisible();
+      }
+    }
+  });
+
+  test("block page loads successfully", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(POLYGON.blocks["20000000"].number, CHAIN_ID);
+
+    const loaded = await waitForBlockContent(page, testInfo);
+    if (loaded) {
+      // Verify block page loaded with expected content
+      await expect(blockPage.blockNumber).toBeVisible();
+      await expect(page.locator("text=Transactions:")).toBeVisible();
+    }
+  });
+
+  test("handles invalid block number gracefully", async ({ page }, testInfo) => {
+    const blockPage = new BlockPage(page);
+    await blockPage.goto(999999999999, CHAIN_ID);
+
+    await expect(
+      blockPage.errorText
+        .or(blockPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// TRANSACTION TESTS
+// ============================================
+
+test.describe("Polygon Transaction Page", () => {
+  test("displays legacy NFT transaction from block 30M", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[LEGACY_NFT_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      // Verify core transaction details
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=Block:")).toBeVisible();
+      await expect(page.locator("text=From:")).toBeVisible();
+      await expect(page.locator("text=To:")).toBeVisible();
+
+      // Verify gas information
+      await expect(page.getByText("Gas Price:", { exact: true })).toBeVisible();
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+
+      // Verify has input data (NFT transfer)
+      await expect(page.locator("text=Input Data:")).toBeVisible();
+    }
+  });
+
+  test("shows correct from and to addresses for legacy NFT tx", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[LEGACY_NFT_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("displays legacy transaction type correctly (Type 0)", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[LEGACY_NFT_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(
+        page.locator("text=Type:").or(page.locator("text=Transaction Type:")).first()
+      ).toBeVisible();
+    }
+  });
+
+  test("displays DeFi swap transaction from block 50M", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[DEFI_SWAP_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=Block:")).toBeVisible();
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+      await expect(page.locator("text=Input Data:")).toBeVisible();
+    }
+  });
+
+  test("DeFi swap shows correct addresses", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[DEFI_SWAP_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      const from = await txPage.getFromAddress();
+      expect(from.toLowerCase()).toContain(tx.from.toLowerCase().slice(0, 10));
+
+      const to = await txPage.getToAddress();
+      expect(to?.toLowerCase()).toContain(tx.to?.toLowerCase().slice(0, 10));
+    }
+  });
+
+  test("displays contract interaction from block 65M", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[CONTRACT_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Transaction Hash:")).toBeVisible();
+      await expect(page.locator("text=Status:")).toBeVisible();
+      await expect(page.locator("text=Gas Limit")).toBeVisible();
+      await expect(page.locator("text=Input Data:")).toBeVisible();
+    }
+  });
+
+  test("displays transaction nonce and position for legacy NFT tx", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[LEGACY_NFT_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Other Attributes:")).toBeVisible();
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+
+      // Verify position value (nonce is very large, just check it's displayed)
+      await expect(page.locator(`text=Position: ${tx.position}`)).toBeVisible();
+    }
+  });
+
+  test("displays DeFi swap nonce and position", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[DEFI_SWAP_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+
+      await expect(page.locator(`text=Nonce: ${tx.nonce}`)).toBeVisible();
+    }
+  });
+
+  test("displays contract tx nonce and position", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[CONTRACT_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Nonce:")).toBeVisible();
+      await expect(page.locator("text=Position:")).toBeVisible();
+
+      await expect(page.locator(`text=Nonce: ${tx.nonce}`)).toBeVisible();
+      await expect(page.locator(`text=Position: ${tx.position}`)).toBeVisible();
+    }
+  });
+
+  test("displays transaction fee", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[LEGACY_NFT_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Transaction Fee:")).toBeVisible();
+    }
+  });
+
+  test("displays block number link for transaction", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    const tx = POLYGON.transactions[DEFI_SWAP_TX];
+
+    await txPage.goto(tx.hash, CHAIN_ID);
+
+    const loaded = await waitForTxContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Block:")).toBeVisible();
+      const blockValue = await txPage.getBlockNumber();
+      expect(blockValue).toBeTruthy();
+    }
+  });
+
+  test("handles invalid tx hash gracefully", async ({ page }, testInfo) => {
+    const txPage = new TransactionPage(page);
+    await txPage.goto("0xinvalid", CHAIN_ID);
+
+    await expect(
+      txPage.errorText
+        .or(txPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
+
+// ============================================
+// ADDRESS TESTS - ERC20 TOKENS
+// ============================================
+
+test.describe("Polygon Address Page - Tokens", () => {
+  test("displays WPOL (Wrapped POL) token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const token = POLYGON.addresses.wpol;
+    await addressPage.goto(token.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+      // Contract should show code or token info
+      await expect(
+        page.locator("text=Contract").or(page.locator("text=Token")).first()
+      ).toBeVisible();
+    }
+  });
+
+  test("displays USDC.e (Bridged USDC) token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const token = POLYGON.addresses.usdc;
+    await addressPage.goto(token.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+
+  test("displays Native USDC token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const token = POLYGON.addresses.usdcNative;
+    await addressPage.goto(token.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+
+  test("displays USDT token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const token = POLYGON.addresses.usdt;
+    await addressPage.goto(token.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+
+  test("displays WETH token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const token = POLYGON.addresses.weth;
+    await addressPage.goto(token.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+
+  test("displays DAI token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const token = POLYGON.addresses.dai;
+    await addressPage.goto(token.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+
+  test("displays AAVE token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const token = POLYGON.addresses.aave;
+    await addressPage.goto(token.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+
+  test("displays LINK token contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const token = POLYGON.addresses.link;
+    await addressPage.goto(token.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+});
+
+// ============================================
+// ADDRESS TESTS - DEX CONTRACTS
+// ============================================
+
+test.describe("Polygon Address Page - DEX Contracts", () => {
+  test("displays QuickSwap Router contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const contract = POLYGON.addresses.quickswapRouter;
+    await addressPage.goto(contract.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+      await expect(
+        page.locator("text=Contract").or(page.locator("text=Code")).first()
+      ).toBeVisible();
+    }
+  });
+
+  test("displays Uniswap V3 Router contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const contract = POLYGON.addresses.uniswapV3Router;
+    await addressPage.goto(contract.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+
+  test("displays SushiSwap Router contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const contract = POLYGON.addresses.sushiswapRouter;
+    await addressPage.goto(contract.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+});
+
+// ============================================
+// ADDRESS TESTS - NFT & LENDING
+// ============================================
+
+test.describe("Polygon Address Page - NFT & Lending", () => {
+  test("displays OpenSea Storefront contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const contract = POLYGON.addresses.openseaStorefront;
+    await addressPage.goto(contract.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+
+  test("displays Aave V3 Pool contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const contract = POLYGON.addresses.aaveV3Pool;
+    await addressPage.goto(contract.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+});
+
+// ============================================
+// ADDRESS TESTS - SYSTEM CONTRACTS
+// ============================================
+
+test.describe("Polygon Address Page - System Contracts", () => {
+  test("displays POL Token system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const contract = POLYGON.addresses.maticToken;
+    await addressPage.goto(contract.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+
+  test("displays StateReceiver system contract", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    const contract = POLYGON.addresses.stateReceiver;
+    await addressPage.goto(contract.address, CHAIN_ID);
+
+    const loaded = await waitForAddressContent(page, testInfo);
+    if (loaded) {
+      await expect(page.locator("text=Balance")).toBeVisible();
+    }
+  });
+
+  test("handles invalid address gracefully", async ({ page }, testInfo) => {
+    const addressPage = new AddressPage(page);
+    await addressPage.goto("0xinvalid", CHAIN_ID);
+
+    await expect(
+      addressPage.errorText
+        .or(addressPage.container)
+        .or(page.locator("text=Something went wrong"))
+        .or(page.locator("text=Invalid"))
+        .first()
+    ).toBeVisible({ timeout: DEFAULT_TIMEOUT * 3 });
+  });
+});
diff --git a/hardhat-node-test/contracts/OpenScanPayment.sol b/hardhat-node-test/contracts/OpenScanPayment.sol
new file mode 100644
index 0000000..12ba73f
--- /dev/null
+++ b/hardhat-node-test/contracts/OpenScanPayment.sol
@@ -0,0 +1,39 @@
+// SPDX-License-Identifier: UNLICENSED
+pragma solidity ^0.8.28;
+import "@openzeppelin/contracts/access/Ownable.sol";
+
+contract OpenScanPayment is Ownable {
+
+  event PaymentReceived(address indexed payer, uint256 amount);
+  event DonationReceived(address indexed donor, uint256 amount);
+
+  constructor(address initialOwner) Ownable(initialOwner) {}
+
+  // Pay to OpenScan with a signature to be used later for verification
+  // After payment you will need to provide the a signature off-chain of the tx hash
+  // The tx hash has to be signed by the sender of the payment
+  // The signature has to be provided on the pull request on the explorer-metadata repository
+  function pay() public payable {
+    require(msg.value > 0, "pay: payment must be greater than zero");
+    emit PaymentReceived(msg.sender, msg.value);
+    (bool success, ) = owner().call{value: msg.value}("");
+    require(success, "transfer failed");
+  }
+
+  // Donate to OpenScan with a message to be shown publicly
+  // WARNING: Messages are subject to moderation and may not be displayed
+  function donate(string calldata message) public payable {
+    require(msg.value > 0, "donate: donation must be greater than zero");
+    emit DonationReceived(msg.sender, msg.value);
+    (bool success, ) = owner().call{value: msg.value}("");
+    require(success, "transfer failed");
+    // message is stored in calldata for off-chain retrieval
+  }
+
+  // Execute arbitrary call (onlyOwner) to recover funds and tokens
+  function executeCall(address target, bytes memory data) public onlyOwner returns (bytes memory) {
+    (bool success, bytes memory returnData) = target.call(data);
+    require(success, "executeCall: call failed");
+    return returnData;
+  }
+}
diff --git a/hardhat-node-test/ignition/modules/TestSuite.ts b/hardhat-node-test/ignition/modules/TestSuite.ts
index 0711132..a3c18f9 100644
--- a/hardhat-node-test/ignition/modules/TestSuite.ts
+++ b/hardhat-node-test/ignition/modules/TestSuite.ts
@@ -44,6 +44,10 @@ export default buildModule("TestSuiteModule", (m) => {
 	// Deploy Counter
 	const counter = m.contract("Counter");
 
+	// Deploy OpenScanPayment
+	const deployer = m.getAccount(0);
+	const openScanPayment = m.contract("OpenScanPayment", [deployer]);
+
 	return {
 		tokenA,
 		tokenB,
@@ -53,5 +57,6 @@ export default buildModule("TestSuiteModule", (m) => {
 		vault,
 		multicall,
 		counter,
+		openScanPayment,
 	};
 });
diff --git a/hardhat-node-test/package-lock.json b/hardhat-node-test/package-lock.json
index 827f185..38556b8 100644
--- a/hardhat-node-test/package-lock.json
+++ b/hardhat-node-test/package-lock.json
@@ -1,2925 +1,2934 @@
 {
-  "name": "hardhat-test",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "hardhat-test",
-      "version": "1.0.0",
-      "devDependencies": {
-        "@nomicfoundation/hardhat-ignition": "^3.0.5",
-        "@nomicfoundation/hardhat-toolbox-viem": "^5.0.1",
-        "@types/node": "^22.19.1",
-        "forge-std": "github:foundry-rs/forge-std#v1.9.4",
-        "hardhat": "^3.0.15",
-        "typescript": "~5.8.0",
-        "viem": "^2.39.3"
-      }
-    },
-    "node_modules/@actions/core": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@actions/core/-/core-1.11.1.tgz",
-      "integrity": "sha512-hXJCSrkwfA46Vd9Z3q4cpEpHB1rL5NG04+/rbqW9d3+CSvtB1tYe8UTpAlixa1vj0m/ULglfEK2UKxMGxCxv5A==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@actions/exec": "^1.1.1",
-        "@actions/http-client": "^2.0.1"
-      }
-    },
-    "node_modules/@actions/exec": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@actions/exec/-/exec-1.1.1.tgz",
-      "integrity": "sha512-+sCcHHbVdk93a0XT19ECtO/gIXoxvdsgQLzb2fE2/5sIZmWQuluYyjPQtrtTHdU1YzTZ7bAPN4sITq2xi1679w==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@actions/io": "^1.0.1"
-      }
-    },
-    "node_modules/@actions/http-client": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-2.2.3.tgz",
-      "integrity": "sha512-mx8hyJi/hjFvbPokCg4uRd4ZX78t+YyRPtnKWwIl+RzNaVuFpQHfmlGVfsKEJN8LwTCvL+DfVgAM04XaHkm6bA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "tunnel": "^0.0.6",
-        "undici": "^5.25.4"
-      }
-    },
-    "node_modules/@actions/io": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@actions/io/-/io-1.1.3.tgz",
-      "integrity": "sha512-wi9JjgKLYS7U/z8PPbco+PvTb/nRWjeoFlJ1Qer83k/3C5PHQi28hiVdeE2kHXmIL99mQFawx8qt/JPjZilJ8Q==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@adraffy/ens-normalize": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.1.tgz",
-      "integrity": "sha512-96Z2IP3mYmF1Xg2cDm8f1gWGf/HUVedQ3FMifV4kG/PQ4yEP51xDtRAEfhVNt5f/uzpNkZHwWQuUcu6D6K+Ekw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
-      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
-      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
-      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
-      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
-      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
-      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
-      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
-      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
-      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
-      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
-      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
-      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
-      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
-      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
-      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
-      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
-      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
-      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
-      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
-      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
-      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
-      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
-      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@ethersproject/abi": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/abi/-/abi-5.8.0.tgz",
-      "integrity": "sha512-b9YS/43ObplgyV6SlyQsG53/vkSal0MNA1fskSC4mbnCMi8R+NkcH8K9FPYNESf6jUefBUniE4SOKms0E/KK1Q==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/address": "^5.8.0",
-        "@ethersproject/bignumber": "^5.8.0",
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/constants": "^5.8.0",
-        "@ethersproject/hash": "^5.8.0",
-        "@ethersproject/keccak256": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0",
-        "@ethersproject/properties": "^5.8.0",
-        "@ethersproject/strings": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/abstract-provider": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/abstract-provider/-/abstract-provider-5.8.0.tgz",
-      "integrity": "sha512-wC9SFcmh4UK0oKuLJQItoQdzS/qZ51EJegK6EmAWlh+OptpQ/npECOR3QqECd8iGHC0RJb4WKbVdSfif4ammrg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/bignumber": "^5.8.0",
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0",
-        "@ethersproject/networks": "^5.8.0",
-        "@ethersproject/properties": "^5.8.0",
-        "@ethersproject/transactions": "^5.8.0",
-        "@ethersproject/web": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/abstract-signer": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/abstract-signer/-/abstract-signer-5.8.0.tgz",
-      "integrity": "sha512-N0XhZTswXcmIZQdYtUnd79VJzvEwXQw6PK0dTl9VoYrEBxxCPXqS0Eod7q5TNKRxe1/5WUMuR0u0nqTF/avdCA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/abstract-provider": "^5.8.0",
-        "@ethersproject/bignumber": "^5.8.0",
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0",
-        "@ethersproject/properties": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/address": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/address/-/address-5.8.0.tgz",
-      "integrity": "sha512-GhH/abcC46LJwshoN+uBNoKVFPxUuZm6dA257z0vZkKmU1+t8xTn8oK7B9qrj8W2rFRMch4gbJl6PmVxjxBEBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/bignumber": "^5.8.0",
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/keccak256": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0",
-        "@ethersproject/rlp": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/base64": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/base64/-/base64-5.8.0.tgz",
-      "integrity": "sha512-lN0oIwfkYj9LbPx4xEkie6rAMJtySbpOAFXSDVQaBnAzYfB4X2Qr+FXJGxMoc3Bxp2Sm8OwvzMrywxyw0gLjIQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/bytes": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/bignumber": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/bignumber/-/bignumber-5.8.0.tgz",
-      "integrity": "sha512-ZyaT24bHaSeJon2tGPKIiHszWjD/54Sz8t57Toch475lCLljC6MgPmxk7Gtzz+ddNN5LuHea9qhAe0x3D+uYPA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0",
-        "bn.js": "^5.2.1"
-      }
-    },
-    "node_modules/@ethersproject/bytes": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/bytes/-/bytes-5.8.0.tgz",
-      "integrity": "sha512-vTkeohgJVCPVHu5c25XWaWQOZ4v+DkGoC42/TS2ond+PARCxTJvgTFUNDZovyQ/uAQ4EcpqqowKydcdmRKjg7A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@ethersproject/logger": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/constants": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/constants/-/constants-5.8.0.tgz",
-      "integrity": "sha512-wigX4lrf5Vu+axVTIvNsuL6YrV4O5AXl5ubcURKMEME5TnWBouUh0CDTWxZ2GpnRn1kcCgE7l8O5+VbV9QTTcg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/bignumber": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/hash": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/hash/-/hash-5.8.0.tgz",
-      "integrity": "sha512-ac/lBcTbEWW/VGJij0CNSw/wPcw9bSRgCB0AIBz8CvED/jfvDoV9hsIIiWfvWmFEi8RcXtlNwp2jv6ozWOsooA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/abstract-signer": "^5.8.0",
-        "@ethersproject/address": "^5.8.0",
-        "@ethersproject/base64": "^5.8.0",
-        "@ethersproject/bignumber": "^5.8.0",
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/keccak256": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0",
-        "@ethersproject/properties": "^5.8.0",
-        "@ethersproject/strings": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/keccak256": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/keccak256/-/keccak256-5.8.0.tgz",
-      "integrity": "sha512-A1pkKLZSz8pDaQ1ftutZoaN46I6+jvuqugx5KYNeQOPqq+JZ0Txm7dlWesCHB5cndJSu5vP2VKptKf7cksERng==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@ethersproject/bytes": "^5.8.0",
-        "js-sha3": "0.8.0"
-      }
-    },
-    "node_modules/@ethersproject/logger": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/logger/-/logger-5.8.0.tgz",
-      "integrity": "sha512-Qe6knGmY+zPPWTC+wQrpitodgBfH7XoceCGL5bJVejmH+yCS3R8jJm8iiWuvWbG76RUmyEG53oqv6GMVWqunjA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/@ethersproject/networks": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/networks/-/networks-5.8.0.tgz",
-      "integrity": "sha512-egPJh3aPVAzbHwq8DD7Po53J4OUSsA1MjQp8Vf/OZPav5rlmWUaFLiq8cvQiGK0Z5K6LYzm29+VA/p4RL1FzNg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/logger": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/properties": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/properties/-/properties-5.8.0.tgz",
-      "integrity": "sha512-PYuiEoQ+FMaZZNGrStmN7+lWjlsoufGIHdww7454FIaGdbe/p5rnaCXTr5MtBYl3NkeoVhHZuyzChPeGeKIpQw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/logger": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/rlp": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/rlp/-/rlp-5.8.0.tgz",
-      "integrity": "sha512-LqZgAznqDbiEunaUvykH2JAoXTT9NV0Atqk8rQN9nx9SEgThA/WMx5DnW8a9FOufo//6FZOCHZ+XiClzgbqV9Q==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/signing-key": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/signing-key/-/signing-key-5.8.0.tgz",
-      "integrity": "sha512-LrPW2ZxoigFi6U6aVkFN/fa9Yx/+4AtIUe4/HACTvKJdhm0eeb107EVCIQcrLZkxaSIgc/eCrX8Q1GtbH+9n3w==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0",
-        "@ethersproject/properties": "^5.8.0",
-        "bn.js": "^5.2.1",
-        "elliptic": "6.6.1",
-        "hash.js": "1.1.7"
-      }
-    },
-    "node_modules/@ethersproject/strings": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/strings/-/strings-5.8.0.tgz",
-      "integrity": "sha512-qWEAk0MAvl0LszjdfnZ2uC8xbR2wdv4cDabyHiBh3Cldq/T8dPH3V4BbBsAYJUeonwD+8afVXld274Ls+Y1xXg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/constants": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/transactions": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/transactions/-/transactions-5.8.0.tgz",
-      "integrity": "sha512-UglxSDjByHG0TuU17bDfCemZ3AnKO2vYrL5/2n2oXvKzvb7Cz+W9gOWXKARjp2URVwcWlQlPOEQyAviKwT4AHg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/address": "^5.8.0",
-        "@ethersproject/bignumber": "^5.8.0",
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/constants": "^5.8.0",
-        "@ethersproject/keccak256": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0",
-        "@ethersproject/properties": "^5.8.0",
-        "@ethersproject/rlp": "^5.8.0",
-        "@ethersproject/signing-key": "^5.8.0"
-      }
-    },
-    "node_modules/@ethersproject/web": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/@ethersproject/web/-/web-5.8.0.tgz",
-      "integrity": "sha512-j7+Ksi/9KfGviws6Qtf9Q7KCqRhpwrYKQPs+JBA/rKVFF/yaWLHJEH3zfVP2plVu+eys0d2DlFmhoQJayFewcw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/base64": "^5.8.0",
-        "@ethersproject/bytes": "^5.8.0",
-        "@ethersproject/logger": "^5.8.0",
-        "@ethersproject/properties": "^5.8.0",
-        "@ethersproject/strings": "^5.8.0"
-      }
-    },
-    "node_modules/@fastify/busboy": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
-      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@jest/schemas": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@sinclair/typebox": "^0.27.8"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@noble/ciphers": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.2.1.tgz",
-      "integrity": "sha512-rONPWMC7PeExE077uLE4oqWrZ1IvAfz3oH9LibVAcVCopJiA9R62uavnbEzdkVmJYI6M6Zgkbeb07+tWjlq2XA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@noble/curves": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.4.2.tgz",
-      "integrity": "sha512-TavHr8qycMChk8UwMld0ZDRvatedkzWfH8IiaeGCfymOP5i0hSCozz9vHOL0nkwk7HRMlFnAiKpS2jrUmSybcw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/hashes": "1.4.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@noble/curves/node_modules/@noble/hashes": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
-      "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@noble/hashes": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.7.1.tgz",
-      "integrity": "sha512-B8XBPsn4vT/KJAGqDzbwztd+6Yte3P4V7iafm24bxgDe/mlRuK6xmWPuCNrKt2vDafZ8MfJLlchDG/vYafQEjQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@nomicfoundation/edr": {
-      "version": "0.12.0-next.14",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/edr/-/edr-0.12.0-next.14.tgz",
-      "integrity": "sha512-MGHY2x7JaNdkqlQxFBYoM7Miw2EqsQrI3ReVZMwLP5mULSRTAOnt3hCw6cnjXxGi991HnejNAedJofke6OdqqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nomicfoundation/edr-darwin-arm64": "0.12.0-next.14",
-        "@nomicfoundation/edr-darwin-x64": "0.12.0-next.14",
-        "@nomicfoundation/edr-linux-arm64-gnu": "0.12.0-next.14",
-        "@nomicfoundation/edr-linux-arm64-musl": "0.12.0-next.14",
-        "@nomicfoundation/edr-linux-x64-gnu": "0.12.0-next.14",
-        "@nomicfoundation/edr-linux-x64-musl": "0.12.0-next.14",
-        "@nomicfoundation/edr-win32-x64-msvc": "0.12.0-next.14"
-      },
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@nomicfoundation/edr-darwin-arm64": {
-      "version": "0.12.0-next.14",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/edr-darwin-arm64/-/edr-darwin-arm64-0.12.0-next.14.tgz",
-      "integrity": "sha512-sl0DibKSUOS7JXhUtaQ6FJUY+nk+uq5gx+Fyd9iiqs8awZPNn6KSuvV1EbWCi+yd3mrxgZ/wO8E77C1Dxj4xQA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@nomicfoundation/edr-darwin-x64": {
-      "version": "0.12.0-next.14",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/edr-darwin-x64/-/edr-darwin-x64-0.12.0-next.14.tgz",
-      "integrity": "sha512-lfmatc1MSOaw0rDFB+ynnAGz5TWm3hSeY/+zDpPZghMODZelXm4JCqF41CQ6paLsW3X/pXcHM1HUGCUBWeoI/A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@nomicfoundation/edr-linux-arm64-gnu": {
-      "version": "0.12.0-next.14",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/edr-linux-arm64-gnu/-/edr-linux-arm64-gnu-0.12.0-next.14.tgz",
-      "integrity": "sha512-sWun3PhVgat8d4lg1d5MAXSIsFlSMBzvrpMSDFNOU9hPJEclSHbHBMRcarQuGqwm/5ZBzTwCS25u78A+UATTrg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@nomicfoundation/edr-linux-arm64-musl": {
-      "version": "0.12.0-next.14",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/edr-linux-arm64-musl/-/edr-linux-arm64-musl-0.12.0-next.14.tgz",
-      "integrity": "sha512-omWKioD8fFp7ayCeSDu2CqvG78+oYw8zdVECDwZVmE0jpszRCsTufNYflWRQnlGqH6GqjEUwq2c3yLxFgOTjFg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@nomicfoundation/edr-linux-x64-gnu": {
-      "version": "0.12.0-next.14",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/edr-linux-x64-gnu/-/edr-linux-x64-gnu-0.12.0-next.14.tgz",
-      "integrity": "sha512-vk0s4SaC7s1wa98W24a4zqunTK/yIcSEnsSLRM/Nl+JJs6iqS8tvmnh/BbFINORMBJ065OWc10qw2Lsbu/rxtg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@nomicfoundation/edr-linux-x64-musl": {
-      "version": "0.12.0-next.14",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/edr-linux-x64-musl/-/edr-linux-x64-musl-0.12.0-next.14.tgz",
-      "integrity": "sha512-/xKQD6c2RXQBIb30iTeh/NrMdYvHs6Nd+2UXS6wxlfX7GzRPOkpVDiDGD7Sda82JI459KH67dADOD6CpX8cpHQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@nomicfoundation/edr-win32-x64-msvc": {
-      "version": "0.12.0-next.14",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/edr-win32-x64-msvc/-/edr-win32-x64-msvc-0.12.0-next.14.tgz",
-      "integrity": "sha512-GZcyGdOoLWnUtfPU+6B1vUi4fwf3bouSRf3xuKFHz3p/WNhpDK+8Esq3UmOmYAZWRgFT0ZR6XUk9H2owGDTVvQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-errors": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-errors/-/hardhat-errors-3.0.5.tgz",
-      "integrity": "sha512-8Ayqf6hFM1glmrSxrXgX6n2pn5uTlHNxEB8N5Me0DOeOGB67PRIrQdiO+RzUhrNW5YgWUNWBevOLQbW06uQ79g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nomicfoundation/hardhat-utils": "^3.0.1"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-ignition": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-ignition/-/hardhat-ignition-3.0.5.tgz",
-      "integrity": "sha512-ZTaGHdDDuHE5MjlRaSbSIOuTSZcJtVd/ShEyE6E1PEt0FLTcgYZu+NNCWRc2JZG6/Cix0PAO297y+yi+USNilA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nomicfoundation/hardhat-errors": "^3.0.2",
-        "@nomicfoundation/hardhat-utils": "^3.0.5",
-        "@nomicfoundation/ignition-core": "^3.0.5",
-        "@nomicfoundation/ignition-ui": "^3.0.5",
-        "chalk": "^5.3.0",
-        "debug": "^4.3.2",
-        "json5": "^2.2.3",
-        "prompts": "^2.4.2"
-      },
-      "peerDependencies": {
-        "@nomicfoundation/hardhat-verify": "^3.0.0",
-        "hardhat": "^3.0.0"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-ignition-viem": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-ignition-viem/-/hardhat-ignition-viem-3.0.5.tgz",
-      "integrity": "sha512-bK+Rmg7m6wJxoqXOTxl/HA6AakdS6OUJjGUUYxfFpuXCH9c4tW3Qp7fpgAhI0W3cCPAeT42OANSDlCH/MRZbBA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@nomicfoundation/hardhat-errors": "^3.0.2"
-      },
-      "peerDependencies": {
-        "@nomicfoundation/hardhat-ignition": "^3.0.5",
-        "@nomicfoundation/hardhat-verify": "^3.0.0",
-        "@nomicfoundation/hardhat-viem": "^3.0.0",
-        "@nomicfoundation/ignition-core": "^3.0.5",
-        "hardhat": "^3.0.0",
-        "viem": "^2.30.0"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-keystore": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-keystore/-/hardhat-keystore-3.0.3.tgz",
-      "integrity": "sha512-rkwfdy/GsX/2SV49RGBvMsCuR+SYGJQGD3wcrS5m2Cyap5eQFEgKZbqpua6YQRA2raxRmVVH6antIIftgBFXAQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@noble/ciphers": "1.2.1",
-        "@noble/hashes": "1.7.1",
-        "@nomicfoundation/hardhat-errors": "^3.0.0",
-        "@nomicfoundation/hardhat-utils": "^3.0.5",
-        "@nomicfoundation/hardhat-zod-utils": "^3.0.0",
-        "chalk": "^5.3.0",
-        "debug": "^4.3.2",
-        "zod": "^3.23.8"
-      },
-      "peerDependencies": {
-        "hardhat": "^3.0.0"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-network-helpers": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-network-helpers/-/hardhat-network-helpers-3.0.3.tgz",
-      "integrity": "sha512-FqXD8CPFNdluEhELqNV/Q0grOQtlwRWr28LW+/NTas3rrDAXpNOIPCCq3RIXJIqsdbNPQsG2FpnfKj9myqIsKQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@nomicfoundation/hardhat-errors": "^3.0.5",
-        "@nomicfoundation/hardhat-utils": "^3.0.5"
-      },
-      "peerDependencies": {
-        "hardhat": "^3.0.0"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-node-test-reporter": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-node-test-reporter/-/hardhat-node-test-reporter-3.0.1.tgz",
-      "integrity": "sha512-p6yNKZFnJ2OMplXx7zi45KGWr4hr/qMkg+gTuSSLLlph7NL1DGjGG+N6GrZs46AGSrsnYEocKXGnavl92dxEig==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@actions/core": "^1.10.1",
-        "chalk": "^5.3.0",
-        "jest-diff": "^29.7.0"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-node-test-runner": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-node-test-runner/-/hardhat-node-test-runner-3.0.7.tgz",
-      "integrity": "sha512-MwYZef9JwUl9HaA+rZDsXWEWdpeBfnW5YNB0kN9WUkEiPPoST4LGE/56+BtkmV487Mkt2yvuF0x73YppvX/ydA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@nomicfoundation/hardhat-errors": "^3.0.2",
-        "@nomicfoundation/hardhat-node-test-reporter": "^3.0.0",
-        "@nomicfoundation/hardhat-utils": "^3.0.5",
-        "@nomicfoundation/hardhat-zod-utils": "^3.0.0",
-        "tsx": "^4.19.3",
-        "zod": "^3.23.8"
-      },
-      "peerDependencies": {
-        "hardhat": "^3.0.0"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-toolbox-viem": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-toolbox-viem/-/hardhat-toolbox-viem-5.0.1.tgz",
-      "integrity": "sha512-NhPQjHwTk356k6WS7tPeEWS5ymtlZe2lzcZzvgd2AD7wrMXE/zUu5qacXgwPq/M6HVEczSpuFeu+/koQgA2pbA==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@nomicfoundation/hardhat-ignition": "^3.0.0",
-        "@nomicfoundation/hardhat-ignition-viem": "^3.0.0",
-        "@nomicfoundation/hardhat-keystore": "^3.0.0",
-        "@nomicfoundation/hardhat-network-helpers": "^3.0.0",
-        "@nomicfoundation/hardhat-node-test-runner": "^3.0.0",
-        "@nomicfoundation/hardhat-verify": "^3.0.0",
-        "@nomicfoundation/hardhat-viem": "^3.0.0",
-        "@nomicfoundation/hardhat-viem-assertions": "^3.0.0",
-        "@nomicfoundation/ignition-core": "^3.0.0",
-        "hardhat": "^3.0.0",
-        "viem": "^2.30.0"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-utils": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-utils/-/hardhat-utils-3.0.5.tgz",
-      "integrity": "sha512-5zkQSuSxkwK7fQxKswJ1GGc/3AuWBSmxA7GhczTPLx28dAXQnubRU8nA48SkCkKesJq5x4TROP+XheSE2VkLUA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@streamparser/json-node": "^0.0.22",
-        "debug": "^4.3.2",
-        "env-paths": "^2.2.0",
-        "ethereum-cryptography": "^2.2.1",
-        "fast-equals": "^5.0.1",
-        "json-stream-stringify": "^3.1.6",
-        "rfdc": "^1.3.1",
-        "undici": "^6.16.1"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-utils/node_modules/undici": {
-      "version": "6.22.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.22.0.tgz",
-      "integrity": "sha512-hU/10obOIu62MGYjdskASR3CUAiYaFTtC9Pa6vHyf//mAipSvSQg6od2CnJswq7fvzNS3zJhxoRkgNVaHurWKw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.17"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-verify": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-verify/-/hardhat-verify-3.0.7.tgz",
-      "integrity": "sha512-2Px2Zldg2oRJvy7odx8hZ0lZ4yjkW8XLr6umqcKl5z36+XifKRanzd8phoLEGQ8SRBNaVsaw0EDHi9Q0QTUu3A==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ethersproject/abi": "^5.8.0",
-        "@nomicfoundation/hardhat-errors": "^3.0.3",
-        "@nomicfoundation/hardhat-utils": "^3.0.5",
-        "@nomicfoundation/hardhat-zod-utils": "^3.0.0",
-        "cbor2": "^1.9.0",
-        "chalk": "^5.3.0",
-        "debug": "^4.3.2",
-        "semver": "^7.6.3",
-        "zod": "^3.23.8"
-      },
-      "peerDependencies": {
-        "hardhat": "^3.0.0"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-viem": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-viem/-/hardhat-viem-3.0.1.tgz",
-      "integrity": "sha512-sUyi3Xn31vItf925YRgHp7x6FIFfG9B+jacWYyJ0RBi7BWCrC/aSUX4jRRmpzaZ4opLQ8KXAZdxS91Yka7AYtw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@nomicfoundation/hardhat-errors": "^3.0.0",
-        "@nomicfoundation/hardhat-utils": "^3.0.5"
-      },
-      "peerDependencies": {
-        "hardhat": "^3.0.0",
-        "viem": "^2.30.0"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-viem-assertions": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-viem-assertions/-/hardhat-viem-assertions-3.0.4.tgz",
-      "integrity": "sha512-MLImyHVuFEVNOcpJ0cjmpJ/IYj/mc2Kql6g9swX5Xtln13Gyv4jJFvoyjEalt8K9SYVTNY8kpDtVmQ2fP8BsDA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@nomicfoundation/hardhat-errors": "^3.0.5",
-        "@nomicfoundation/hardhat-utils": "^3.0.5"
-      },
-      "peerDependencies": {
-        "@nomicfoundation/hardhat-viem": "^3.0.0",
-        "hardhat": "^3.0.0",
-        "viem": "^2.30.0"
-      }
-    },
-    "node_modules/@nomicfoundation/hardhat-zod-utils": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-zod-utils/-/hardhat-zod-utils-3.0.1.tgz",
-      "integrity": "sha512-I6/pyYiS9p2lLkzQuedr1ScMocH+ew8l233xTi+LP92gjEiviJDxselpkzgU01MUM0t6BPpfP8yMO958LDEJVg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nomicfoundation/hardhat-errors": "^3.0.0",
-        "@nomicfoundation/hardhat-utils": "^3.0.2"
-      },
-      "peerDependencies": {
-        "zod": "^3.23.8"
-      }
-    },
-    "node_modules/@nomicfoundation/ignition-core": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/ignition-core/-/ignition-core-3.0.5.tgz",
-      "integrity": "sha512-pD3IHmePTkqwbhOaUwnSYhc9PCn2e9kFYi5nvWQFGEN3pjJ+EJeMyG0QWDJQU7beBeKNxbnb1SMPY+CBN5F+kA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@ethersproject/address": "5.6.1",
-        "@nomicfoundation/hardhat-errors": "^3.0.2",
-        "@nomicfoundation/hardhat-utils": "^3.0.5",
-        "@nomicfoundation/solidity-analyzer": "^0.1.1",
-        "cbor2": "^1.9.0",
-        "debug": "^4.3.2",
-        "ethers": "^6.14.0",
-        "immer": "10.0.2",
-        "lodash-es": "4.17.21",
-        "ndjson": "2.0.0"
-      }
-    },
-    "node_modules/@nomicfoundation/ignition-core/node_modules/@ethersproject/address": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/@ethersproject/address/-/address-5.6.1.tgz",
-      "integrity": "sha512-uOgF0kS5MJv9ZvCz7x6T2EXJSzotiybApn4XlOgoTX0xdtyVIJ7pF+6cGPxiEq/dpBiTfMiw7Yc81JcwhSYA0Q==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@ethersproject/bignumber": "^5.6.2",
-        "@ethersproject/bytes": "^5.6.1",
-        "@ethersproject/keccak256": "^5.6.1",
-        "@ethersproject/logger": "^5.6.0",
-        "@ethersproject/rlp": "^5.6.1"
-      }
-    },
-    "node_modules/@nomicfoundation/ignition-ui": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/ignition-ui/-/ignition-ui-3.0.5.tgz",
-      "integrity": "sha512-lRvbvW8hCTGs2J8w71PJRfjfs3KwVrCQ/kvmCMq3sOS7yorVYqxUw36ERvjFa1pEwc+gER/xoUycRBhfRZ3NAA==",
-      "dev": true
-    },
-    "node_modules/@nomicfoundation/solidity-analyzer": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer/-/solidity-analyzer-0.1.2.tgz",
-      "integrity": "sha512-q4n32/FNKIhQ3zQGGw5CvPF6GTvDCpYwIf7bEY/dZTZbgfDsHyjJwURxUJf3VQuuJj+fDIFl4+KkBVbw4Ef6jA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12"
-      },
-      "optionalDependencies": {
-        "@nomicfoundation/solidity-analyzer-darwin-arm64": "0.1.2",
-        "@nomicfoundation/solidity-analyzer-darwin-x64": "0.1.2",
-        "@nomicfoundation/solidity-analyzer-linux-arm64-gnu": "0.1.2",
-        "@nomicfoundation/solidity-analyzer-linux-arm64-musl": "0.1.2",
-        "@nomicfoundation/solidity-analyzer-linux-x64-gnu": "0.1.2",
-        "@nomicfoundation/solidity-analyzer-linux-x64-musl": "0.1.2",
-        "@nomicfoundation/solidity-analyzer-win32-x64-msvc": "0.1.2"
-      }
-    },
-    "node_modules/@nomicfoundation/solidity-analyzer-darwin-arm64": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-darwin-arm64/-/solidity-analyzer-darwin-arm64-0.1.2.tgz",
-      "integrity": "sha512-JaqcWPDZENCvm++lFFGjrDd8mxtf+CtLd2MiXvMNTBD33dContTZ9TWETwNFwg7JTJT5Q9HEecH7FA+HTSsIUw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/@nomicfoundation/solidity-analyzer-darwin-x64": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-darwin-x64/-/solidity-analyzer-darwin-x64-0.1.2.tgz",
-      "integrity": "sha512-fZNmVztrSXC03e9RONBT+CiksSeYcxI1wlzqyr0L7hsQlK1fzV+f04g2JtQ1c/Fe74ZwdV6aQBdd6Uwl1052sw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/@nomicfoundation/solidity-analyzer-linux-arm64-gnu": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-linux-arm64-gnu/-/solidity-analyzer-linux-arm64-gnu-0.1.2.tgz",
-      "integrity": "sha512-3d54oc+9ZVBuB6nbp8wHylk4xh0N0Gc+bk+/uJae+rUgbOBwQSfuGIbAZt1wBXs5REkSmynEGcqx6DutoK0tPA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/@nomicfoundation/solidity-analyzer-linux-arm64-musl": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-linux-arm64-musl/-/solidity-analyzer-linux-arm64-musl-0.1.2.tgz",
-      "integrity": "sha512-iDJfR2qf55vgsg7BtJa7iPiFAsYf2d0Tv/0B+vhtnI16+wfQeTbP7teookbGvAo0eJo7aLLm0xfS/GTkvHIucA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/@nomicfoundation/solidity-analyzer-linux-x64-gnu": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-linux-x64-gnu/-/solidity-analyzer-linux-x64-gnu-0.1.2.tgz",
-      "integrity": "sha512-9dlHMAt5/2cpWyuJ9fQNOUXFB/vgSFORg1jpjX1Mh9hJ/MfZXlDdHQ+DpFCs32Zk5pxRBb07yGvSHk9/fezL+g==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/@nomicfoundation/solidity-analyzer-linux-x64-musl": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-linux-x64-musl/-/solidity-analyzer-linux-x64-musl-0.1.2.tgz",
-      "integrity": "sha512-GzzVeeJob3lfrSlDKQw2bRJ8rBf6mEYaWY+gW0JnTDHINA0s2gPR4km5RLIj1xeZZOYz4zRw+AEeYgLRqB2NXg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/@nomicfoundation/solidity-analyzer-win32-x64-msvc": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-win32-x64-msvc/-/solidity-analyzer-win32-x64-msvc-0.1.2.tgz",
-      "integrity": "sha512-Fdjli4DCcFHb4Zgsz0uEJXZ2K7VEO+w5KVv7HmT7WO10iODdU9csC2az4jrhEsRtiR9Gfd74FlG0NYlw1BMdyA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/@scure/base": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.9.tgz",
-      "integrity": "sha512-8YKhl8GHiNI/pU2VMaofa2Tor7PJRAjwQLBBuilkJ9L5+13yVbC7JO/wS7piioAvPSwR3JKM1IJ/u4xQzbcXKg==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@scure/bip32": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.4.0.tgz",
-      "integrity": "sha512-sVUpc0Vq3tXCkDGYVWGIZTRfnvu8LoTDaev7vbwh0omSvVORONr960MQWdKqJDCReIEmTj3PAr73O3aoxz7OPg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/curves": "~1.4.0",
-        "@noble/hashes": "~1.4.0",
-        "@scure/base": "~1.1.6"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@scure/bip32/node_modules/@noble/hashes": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
-      "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@scure/bip39": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.3.0.tgz",
-      "integrity": "sha512-disdg7gHuTDZtY+ZdkmLpPCk7fxZSu3gBiEGuoC1XYxv9cGx3Z6cpTggCgW6odSOOIXCiDjuGejW+aJKCY/pIQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/hashes": "~1.4.0",
-        "@scure/base": "~1.1.6"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@scure/bip39/node_modules/@noble/hashes": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
-      "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@sentry/core": {
-      "version": "9.47.1",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-9.47.1.tgz",
-      "integrity": "sha512-KX62+qIt4xgy8eHKHiikfhz2p5fOciXd0Cl+dNzhgPFq8klq4MGMNaf148GB3M/vBqP4nw/eFvRMAayFCgdRQw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sinclair/typebox": {
-      "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@streamparser/json": {
-      "version": "0.0.22",
-      "resolved": "https://registry.npmjs.org/@streamparser/json/-/json-0.0.22.tgz",
-      "integrity": "sha512-b6gTSBjJ8G8SuO3Gbbj+zXbVx8NSs1EbpbMKpzGLWMdkR+98McH9bEjSz3+0mPJf68c5nxa3CrJHp5EQNXM6zQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@streamparser/json-node": {
-      "version": "0.0.22",
-      "resolved": "https://registry.npmjs.org/@streamparser/json-node/-/json-node-0.0.22.tgz",
-      "integrity": "sha512-sJT2ptNRwqB1lIsQrQlCoWk5rF4tif9wDh+7yluAGijJamAhrHGYpFB/Zg3hJeceoZypi74ftXk8DHzwYpbZSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@streamparser/json": "^0.0.22"
-      }
-    },
-    "node_modules/@types/node": {
-      "version": "22.19.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.1.tgz",
-      "integrity": "sha512-LCCV0HdSZZZb34qifBsyWlUmok6W7ouER+oQIGBScS8EsZsQbrtFTUrDX4hOl+CS6p7cnNC4td+qrSVGSCTUfQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~6.21.0"
-      }
-    },
-    "node_modules/abitype": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/abitype/-/abitype-1.1.0.tgz",
-      "integrity": "sha512-6Vh4HcRxNMLA0puzPjM5GBgT4aAcFGKZzSgAXvuZ27shJP6NEpielTuqbBmZILR5/xd0PizkBGy5hReKz9jl5A==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/wevm"
-      },
-      "peerDependencies": {
-        "typescript": ">=5.0.4",
-        "zod": "^3.22.0 || ^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        },
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/adm-zip": {
-      "version": "0.4.16",
-      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.16.tgz",
-      "integrity": "sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.3.0"
-      }
-    },
-    "node_modules/aes-js": {
-      "version": "4.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz",
-      "integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/ansi-colors": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
-      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/bn.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.2.tgz",
-      "integrity": "sha512-v2YAxEmKaBLahNwE1mjp4WON6huMNeuDvagFZW+ASCuA/ku0bXR9hSMw0XpiqMoA3+rmnyck/tPRSFQkoC9Cuw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/brorand": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
-      "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/cbor2": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/cbor2/-/cbor2-1.12.0.tgz",
-      "integrity": "sha512-3Cco8XQhi27DogSp9Ri6LYNZLi/TBY/JVnDe+mj06NkBjW/ZYOtekaEU4wZ4xcRMNrFkDv8KNtOAqHyDfz3lYg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.7"
-      }
-    },
-    "node_modules/chalk": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
-      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/diff-sequences": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
-      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/elliptic": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.6.1.tgz",
-      "integrity": "sha512-RaddvvMatK2LJHqFJ+YA4WysVN5Ita9E35botqIYspQ4TkRAlCicdzKOjlyv/1Za5RyTNn7di//eEV0uTAfe3g==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "bn.js": "^4.11.9",
-        "brorand": "^1.1.0",
-        "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.1",
-        "inherits": "^2.0.4",
-        "minimalistic-assert": "^1.0.1",
-        "minimalistic-crypto-utils": "^1.0.1"
-      }
-    },
-    "node_modules/elliptic/node_modules/bn.js": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.2.tgz",
-      "integrity": "sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/enquirer": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
-      "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-colors": "^4.1.1",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/env-paths": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
-      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/esbuild": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
-      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.12",
-        "@esbuild/android-arm": "0.25.12",
-        "@esbuild/android-arm64": "0.25.12",
-        "@esbuild/android-x64": "0.25.12",
-        "@esbuild/darwin-arm64": "0.25.12",
-        "@esbuild/darwin-x64": "0.25.12",
-        "@esbuild/freebsd-arm64": "0.25.12",
-        "@esbuild/freebsd-x64": "0.25.12",
-        "@esbuild/linux-arm": "0.25.12",
-        "@esbuild/linux-arm64": "0.25.12",
-        "@esbuild/linux-ia32": "0.25.12",
-        "@esbuild/linux-loong64": "0.25.12",
-        "@esbuild/linux-mips64el": "0.25.12",
-        "@esbuild/linux-ppc64": "0.25.12",
-        "@esbuild/linux-riscv64": "0.25.12",
-        "@esbuild/linux-s390x": "0.25.12",
-        "@esbuild/linux-x64": "0.25.12",
-        "@esbuild/netbsd-arm64": "0.25.12",
-        "@esbuild/netbsd-x64": "0.25.12",
-        "@esbuild/openbsd-arm64": "0.25.12",
-        "@esbuild/openbsd-x64": "0.25.12",
-        "@esbuild/openharmony-arm64": "0.25.12",
-        "@esbuild/sunos-x64": "0.25.12",
-        "@esbuild/win32-arm64": "0.25.12",
-        "@esbuild/win32-ia32": "0.25.12",
-        "@esbuild/win32-x64": "0.25.12"
-      }
-    },
-    "node_modules/ethereum-cryptography": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ethereum-cryptography/-/ethereum-cryptography-2.2.1.tgz",
-      "integrity": "sha512-r/W8lkHSiTLxUxW8Rf3u4HGB0xQweG2RyETjywylKZSzLWoWAijRz8WCuOtJ6wah+avllXBqZuk29HCCvhEIRg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/curves": "1.4.2",
-        "@noble/hashes": "1.4.0",
-        "@scure/bip32": "1.4.0",
-        "@scure/bip39": "1.3.0"
-      }
-    },
-    "node_modules/ethereum-cryptography/node_modules/@noble/hashes": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
-      "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ethers": {
-      "version": "6.15.0",
-      "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.15.0.tgz",
-      "integrity": "sha512-Kf/3ZW54L4UT0pZtsY/rf+EkBU7Qi5nnhonjUb8yTXcxH3cdcWrV2cRyk0Xk/4jK6OoHhxxZHriyhje20If2hQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/ethers-io/"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@adraffy/ens-normalize": "1.10.1",
-        "@noble/curves": "1.2.0",
-        "@noble/hashes": "1.3.2",
-        "@types/node": "22.7.5",
-        "aes-js": "4.0.0-beta.5",
-        "tslib": "2.7.0",
-        "ws": "8.17.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/ethers/node_modules/@noble/curves": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.2.0.tgz",
-      "integrity": "sha512-oYclrNgRaM9SsBUBVbb8M6DTV7ZHRTKugureoYEncY5c65HOmRzvSiTE3y5CYaPYJA/GVkrhXEoF0M3Ya9PMnw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/hashes": "1.3.2"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ethers/node_modules/@noble/hashes": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.2.tgz",
-      "integrity": "sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ethers/node_modules/@types/node": {
-      "version": "22.7.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.5.tgz",
-      "integrity": "sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~6.19.2"
-      }
-    },
-    "node_modules/ethers/node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/fast-equals": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.3.3.tgz",
-      "integrity": "sha512-/boTcHZeIAQ2r/tL11voclBHDeP9WPxLt+tyAbVSyyXuUFyh0Tne7gJZTqGbxnvj79TjLdCXLOY7UIPhyG5MTw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/forge-std": {
-      "version": "1.9.4",
-      "resolved": "git+ssh://git@github.com/foundry-rs/forge-std.git#1eea5bae12ae557d589f9f0f0edae2faa47cb262",
-      "dev": true,
-      "license": "(Apache-2.0 OR MIT)"
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/get-tsconfig": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
-      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "resolve-pkg-maps": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
-      }
-    },
-    "node_modules/hardhat": {
-      "version": "3.0.15",
-      "resolved": "https://registry.npmjs.org/hardhat/-/hardhat-3.0.15.tgz",
-      "integrity": "sha512-cXxaeSxFJ+u0MfbvWsS3Gdr7/uP7wjo4xviYcGdu9AKtwY6YsU+v0quK/j1NWmvO1Y4gk350SdZzQw++hJy4LA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nomicfoundation/edr": "0.12.0-next.14",
-        "@nomicfoundation/hardhat-errors": "^3.0.4",
-        "@nomicfoundation/hardhat-utils": "^3.0.5",
-        "@nomicfoundation/hardhat-zod-utils": "^3.0.1",
-        "@nomicfoundation/solidity-analyzer": "^0.1.1",
-        "@sentry/core": "^9.4.0",
-        "adm-zip": "^0.4.16",
-        "chalk": "^5.3.0",
-        "chokidar": "^4.0.3",
-        "debug": "^4.3.2",
-        "enquirer": "^2.3.0",
-        "ethereum-cryptography": "^2.2.1",
-        "micro-eth-signer": "^0.14.0",
-        "p-map": "^7.0.2",
-        "resolve.exports": "^2.0.3",
-        "semver": "^7.6.3",
-        "tsx": "^4.19.3",
-        "ws": "^8.18.0",
-        "zod": "^3.23.8"
-      },
-      "bin": {
-        "hardhat": "dist/src/cli.js"
-      }
-    },
-    "node_modules/hardhat/node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/hash.js": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
-      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "minimalistic-assert": "^1.0.1"
-      }
-    },
-    "node_modules/hmac-drbg": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
-      "integrity": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "hash.js": "^1.0.3",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.1"
-      }
-    },
-    "node_modules/immer": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.2.tgz",
-      "integrity": "sha512-Rx3CqeqQ19sxUtYV9CU911Vhy8/721wRFnJv3REVGWUmoAcIwzifTsdmJte/MV+0/XpM35LZdQMBGkRIoLPwQA==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/isows": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/isows/-/isows-1.0.7.tgz",
-      "integrity": "sha512-I1fSfDCZL5P0v33sVqeTDSpcstAg/N+wF5HS033mogOVIp4B+oHC7oOCsA3axAbBSGTJ8QubbNmnIRN/h8U7hg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/wevm"
-        }
-      ],
-      "license": "MIT",
-      "peerDependencies": {
-        "ws": "*"
-      }
-    },
-    "node_modules/jest-diff": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
-      "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^29.6.3",
-        "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-diff/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-diff/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/jest-get-type": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
-      "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/js-sha3": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
-      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/json-stream-stringify": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/json-stream-stringify/-/json-stream-stringify-3.1.6.tgz",
-      "integrity": "sha512-x7fpwxOkbhFCaJDJ8vb1fBY3DdSa4AlITaz+HHILQJzdPMnHEFjxPwVUi1ALIbcIxDE0PNe/0i7frnY8QnBQog==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=7.10.1"
-      }
-    },
-    "node_modules/json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/micro-eth-signer": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/micro-eth-signer/-/micro-eth-signer-0.14.0.tgz",
-      "integrity": "sha512-5PLLzHiVYPWClEvZIXXFu5yutzpadb73rnQCpUqIHu3No3coFuWQNfE5tkBQJ7djuLYl6aRLaS0MgWJYGoqiBw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/curves": "~1.8.1",
-        "@noble/hashes": "~1.7.1",
-        "micro-packed": "~0.7.2"
-      }
-    },
-    "node_modules/micro-eth-signer/node_modules/@noble/curves": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.8.2.tgz",
-      "integrity": "sha512-vnI7V6lFNe0tLAuJMu+2sX+FcL14TaCWy1qiczg1VwRmPrpQCdq5ESXQMqUc2tluRNf6irBXrWbl1mGN8uaU/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/hashes": "1.7.2"
-      },
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/micro-eth-signer/node_modules/@noble/hashes": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.7.2.tgz",
-      "integrity": "sha512-biZ0NUSxyjLLqo6KxEJ1b+C2NAx0wtDoFvCaXHGgUkeHzf3Xc1xKumFKREuT7f7DARNZ/slvYUwFG6B0f2b6hQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/micro-packed": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/micro-packed/-/micro-packed-0.7.3.tgz",
-      "integrity": "sha512-2Milxs+WNC00TRlem41oRswvw31146GiSaoCT7s3Xi2gMUglW5QBeqlQaZeHr5tJx9nm3i57LNXPqxOOaWtTYg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@scure/base": "~1.2.5"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/micro-packed/node_modules/@scure/base": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.2.6.tgz",
-      "integrity": "sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/minimalistic-assert": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
-      "dev": true,
-      "license": "ISC",
-      "peer": true
-    },
-    "node_modules/minimalistic-crypto-utils": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
-      "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/ndjson": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ndjson/-/ndjson-2.0.0.tgz",
-      "integrity": "sha512-nGl7LRGrzugTtaFcJMhLbpzJM6XdivmbkdlaGcrk/LXg2KL/YBC6z1g70xh0/al+oFuVFP8N8kiWRucmeEH/qQ==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "json-stringify-safe": "^5.0.1",
-        "minimist": "^1.2.5",
-        "readable-stream": "^3.6.0",
-        "split2": "^3.0.0",
-        "through2": "^4.0.0"
-      },
-      "bin": {
-        "ndjson": "cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/ox": {
-      "version": "0.9.6",
-      "resolved": "https://registry.npmjs.org/ox/-/ox-0.9.6.tgz",
-      "integrity": "sha512-8SuCbHPvv2eZLYXrNmC0EC12rdzXQLdhnOMlHDW2wiCPLxBrOOJwX5L5E61by+UjTPOryqQiRSnjIKCI+GykKg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/wevm"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@adraffy/ens-normalize": "^1.11.0",
-        "@noble/ciphers": "^1.3.0",
-        "@noble/curves": "1.9.1",
-        "@noble/hashes": "^1.8.0",
-        "@scure/bip32": "^1.7.0",
-        "@scure/bip39": "^1.6.0",
-        "abitype": "^1.0.9",
-        "eventemitter3": "5.0.1"
-      },
-      "peerDependencies": {
-        "typescript": ">=5.4.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ox/node_modules/@adraffy/ens-normalize": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.11.1.tgz",
-      "integrity": "sha512-nhCBV3quEgesuf7c7KYfperqSS14T8bYuvJ8PcLJp6znkZpFc0AuW4qBtr8eKVyPPe/8RSr7sglCWPU5eaxwKQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/ox/node_modules/@noble/ciphers": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
-      "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/@noble/curves": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.9.1.tgz",
-      "integrity": "sha512-k11yZxZg+t+gWvBbIswW0yoJlu8cHOC7dhunwOzoWH/mXGBiYyR4YY6hAEK/3EUs4UpB8la1RfdRpeGsFHkWsA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/hashes": "1.8.0"
-      },
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/@noble/hashes": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
-      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/@scure/base": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.2.6.tgz",
-      "integrity": "sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/@scure/bip32": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.7.0.tgz",
-      "integrity": "sha512-E4FFX/N3f4B80AKWp5dP6ow+flD1LQZo/w8UnLGYZO674jS6YnYeepycOOksv+vLPSpgN35wgKgy+ybfTb2SMw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/curves": "~1.9.0",
-        "@noble/hashes": "~1.8.0",
-        "@scure/base": "~1.2.5"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/ox/node_modules/@scure/bip39": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.6.0.tgz",
-      "integrity": "sha512-+lF0BbLiJNwVlev4eKelw1WWLaiKXw7sSl8T6FvBlWkdX+94aGJ4o8XjUdlyhTCjd8c+B3KT3JfS8P0bLRNU6A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/hashes": "~1.8.0",
-        "@scure/base": "~1.2.5"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/p-map": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
-      "integrity": "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/prompts": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "kleur": "^3.0.3",
-        "sisteransi": "^1.0.5"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/resolve-pkg-maps": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
-      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
-      }
-    },
-    "node_modules/resolve.exports": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
-      "integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/rfdc": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
-      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/sisteransi": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/split2": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
-      "integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "readable-stream": "^3.0.0"
-      }
-    },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/through2": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
-      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "readable-stream": "3"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
-      "dev": true,
-      "license": "0BSD"
-    },
-    "node_modules/tsx": {
-      "version": "4.20.6",
-      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.20.6.tgz",
-      "integrity": "sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "esbuild": "~0.25.0",
-        "get-tsconfig": "^4.7.5"
-      },
-      "bin": {
-        "tsx": "dist/cli.mjs"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      }
-    },
-    "node_modules/tunnel": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
-      "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=0.6.11 <=0.7.0 || >=0.7.3"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "5.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
-      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
-    "node_modules/undici": {
-      "version": "5.29.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz",
-      "integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@fastify/busboy": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14.0"
-      }
-    },
-    "node_modules/undici-types": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
-      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/viem": {
-      "version": "2.39.3",
-      "resolved": "https://registry.npmjs.org/viem/-/viem-2.39.3.tgz",
-      "integrity": "sha512-s11rPQRvUEdc5qHK3xT4fIk4qvgPAaLwaTFq+EbFlcJJD+Xn3R4mc9H6B6fquEiHl/mdsdbG/uKCnYpoNtHNHw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/wevm"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@noble/curves": "1.9.1",
-        "@noble/hashes": "1.8.0",
-        "@scure/bip32": "1.7.0",
-        "@scure/bip39": "1.6.0",
-        "abitype": "1.1.0",
-        "isows": "1.0.7",
-        "ox": "0.9.6",
-        "ws": "8.18.3"
-      },
-      "peerDependencies": {
-        "typescript": ">=5.0.4"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/viem/node_modules/@noble/curves": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.9.1.tgz",
-      "integrity": "sha512-k11yZxZg+t+gWvBbIswW0yoJlu8cHOC7dhunwOzoWH/mXGBiYyR4YY6hAEK/3EUs4UpB8la1RfdRpeGsFHkWsA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/hashes": "1.8.0"
-      },
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/viem/node_modules/@noble/hashes": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
-      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^14.21.3 || >=16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/viem/node_modules/@scure/base": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.2.6.tgz",
-      "integrity": "sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/viem/node_modules/@scure/bip32": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.7.0.tgz",
-      "integrity": "sha512-E4FFX/N3f4B80AKWp5dP6ow+flD1LQZo/w8UnLGYZO674jS6YnYeepycOOksv+vLPSpgN35wgKgy+ybfTb2SMw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/curves": "~1.9.0",
-        "@noble/hashes": "~1.8.0",
-        "@scure/base": "~1.2.5"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/viem/node_modules/@scure/bip39": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.6.0.tgz",
-      "integrity": "sha512-+lF0BbLiJNwVlev4eKelw1WWLaiKXw7sSl8T6FvBlWkdX+94aGJ4o8XjUdlyhTCjd8c+B3KT3JfS8P0bLRNU6A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@noble/hashes": "~1.8.0",
-        "@scure/base": "~1.2.5"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/viem/node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ws": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    }
-  }
+	"name": "hardhat-node-test",
+	"version": "1.0.0",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "hardhat-node-test",
+			"version": "1.0.0",
+			"dependencies": {
+				"@openzeppelin/contracts": "^5.4.0"
+			},
+			"devDependencies": {
+				"@nomicfoundation/hardhat-ignition": "^3.0.5",
+				"@nomicfoundation/hardhat-toolbox-viem": "^5.0.1",
+				"@types/node": "^22.19.1",
+				"forge-std": "github:foundry-rs/forge-std#v1.9.4",
+				"hardhat": "^3.0.15",
+				"typescript": "~5.8.0",
+				"viem": "^2.39.3"
+			}
+		},
+		"node_modules/@actions/core": {
+			"version": "1.11.1",
+			"resolved": "https://registry.npmjs.org/@actions/core/-/core-1.11.1.tgz",
+			"integrity": "sha512-hXJCSrkwfA46Vd9Z3q4cpEpHB1rL5NG04+/rbqW9d3+CSvtB1tYe8UTpAlixa1vj0m/ULglfEK2UKxMGxCxv5A==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@actions/exec": "^1.1.1",
+				"@actions/http-client": "^2.0.1"
+			}
+		},
+		"node_modules/@actions/exec": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@actions/exec/-/exec-1.1.1.tgz",
+			"integrity": "sha512-+sCcHHbVdk93a0XT19ECtO/gIXoxvdsgQLzb2fE2/5sIZmWQuluYyjPQtrtTHdU1YzTZ7bAPN4sITq2xi1679w==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@actions/io": "^1.0.1"
+			}
+		},
+		"node_modules/@actions/http-client": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-2.2.3.tgz",
+			"integrity": "sha512-mx8hyJi/hjFvbPokCg4uRd4ZX78t+YyRPtnKWwIl+RzNaVuFpQHfmlGVfsKEJN8LwTCvL+DfVgAM04XaHkm6bA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"tunnel": "^0.0.6",
+				"undici": "^5.25.4"
+			}
+		},
+		"node_modules/@actions/io": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@actions/io/-/io-1.1.3.tgz",
+			"integrity": "sha512-wi9JjgKLYS7U/z8PPbco+PvTb/nRWjeoFlJ1Qer83k/3C5PHQi28hiVdeE2kHXmIL99mQFawx8qt/JPjZilJ8Q==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/@adraffy/ens-normalize": {
+			"version": "1.10.1",
+			"resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.1.tgz",
+			"integrity": "sha512-96Z2IP3mYmF1Xg2cDm8f1gWGf/HUVedQ3FMifV4kG/PQ4yEP51xDtRAEfhVNt5f/uzpNkZHwWQuUcu6D6K+Ekw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@esbuild/aix-ppc64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+			"integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"aix"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-arm": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+			"integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+			"integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+			"integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/darwin-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+			"integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/darwin-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+			"integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/freebsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/freebsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+			"integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-arm": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+			"integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+			"integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-ia32": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+			"integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-loong64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+			"integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-mips64el": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+			"integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+			"cpu": [
+				"mips64el"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-ppc64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+			"integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-riscv64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+			"integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-s390x": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+			"integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+			"integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openharmony-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+			"integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/sunos-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+			"integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"sunos"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+			"integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-ia32": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+			"integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+			"integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@ethersproject/abi": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/abi/-/abi-5.8.0.tgz",
+			"integrity": "sha512-b9YS/43ObplgyV6SlyQsG53/vkSal0MNA1fskSC4mbnCMi8R+NkcH8K9FPYNESf6jUefBUniE4SOKms0E/KK1Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/address": "^5.8.0",
+				"@ethersproject/bignumber": "^5.8.0",
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/constants": "^5.8.0",
+				"@ethersproject/hash": "^5.8.0",
+				"@ethersproject/keccak256": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0",
+				"@ethersproject/properties": "^5.8.0",
+				"@ethersproject/strings": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/abstract-provider": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/abstract-provider/-/abstract-provider-5.8.0.tgz",
+			"integrity": "sha512-wC9SFcmh4UK0oKuLJQItoQdzS/qZ51EJegK6EmAWlh+OptpQ/npECOR3QqECd8iGHC0RJb4WKbVdSfif4ammrg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/bignumber": "^5.8.0",
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0",
+				"@ethersproject/networks": "^5.8.0",
+				"@ethersproject/properties": "^5.8.0",
+				"@ethersproject/transactions": "^5.8.0",
+				"@ethersproject/web": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/abstract-signer": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/abstract-signer/-/abstract-signer-5.8.0.tgz",
+			"integrity": "sha512-N0XhZTswXcmIZQdYtUnd79VJzvEwXQw6PK0dTl9VoYrEBxxCPXqS0Eod7q5TNKRxe1/5WUMuR0u0nqTF/avdCA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/abstract-provider": "^5.8.0",
+				"@ethersproject/bignumber": "^5.8.0",
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0",
+				"@ethersproject/properties": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/address": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/address/-/address-5.8.0.tgz",
+			"integrity": "sha512-GhH/abcC46LJwshoN+uBNoKVFPxUuZm6dA257z0vZkKmU1+t8xTn8oK7B9qrj8W2rFRMch4gbJl6PmVxjxBEBA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/bignumber": "^5.8.0",
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/keccak256": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0",
+				"@ethersproject/rlp": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/base64": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/base64/-/base64-5.8.0.tgz",
+			"integrity": "sha512-lN0oIwfkYj9LbPx4xEkie6rAMJtySbpOAFXSDVQaBnAzYfB4X2Qr+FXJGxMoc3Bxp2Sm8OwvzMrywxyw0gLjIQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/bytes": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/bignumber": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/bignumber/-/bignumber-5.8.0.tgz",
+			"integrity": "sha512-ZyaT24bHaSeJon2tGPKIiHszWjD/54Sz8t57Toch475lCLljC6MgPmxk7Gtzz+ddNN5LuHea9qhAe0x3D+uYPA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0",
+				"bn.js": "^5.2.1"
+			}
+		},
+		"node_modules/@ethersproject/bytes": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/bytes/-/bytes-5.8.0.tgz",
+			"integrity": "sha512-vTkeohgJVCPVHu5c25XWaWQOZ4v+DkGoC42/TS2ond+PARCxTJvgTFUNDZovyQ/uAQ4EcpqqowKydcdmRKjg7A==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@ethersproject/logger": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/constants": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/constants/-/constants-5.8.0.tgz",
+			"integrity": "sha512-wigX4lrf5Vu+axVTIvNsuL6YrV4O5AXl5ubcURKMEME5TnWBouUh0CDTWxZ2GpnRn1kcCgE7l8O5+VbV9QTTcg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/bignumber": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/hash": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/hash/-/hash-5.8.0.tgz",
+			"integrity": "sha512-ac/lBcTbEWW/VGJij0CNSw/wPcw9bSRgCB0AIBz8CvED/jfvDoV9hsIIiWfvWmFEi8RcXtlNwp2jv6ozWOsooA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/abstract-signer": "^5.8.0",
+				"@ethersproject/address": "^5.8.0",
+				"@ethersproject/base64": "^5.8.0",
+				"@ethersproject/bignumber": "^5.8.0",
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/keccak256": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0",
+				"@ethersproject/properties": "^5.8.0",
+				"@ethersproject/strings": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/keccak256": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/keccak256/-/keccak256-5.8.0.tgz",
+			"integrity": "sha512-A1pkKLZSz8pDaQ1ftutZoaN46I6+jvuqugx5KYNeQOPqq+JZ0Txm7dlWesCHB5cndJSu5vP2VKptKf7cksERng==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@ethersproject/bytes": "^5.8.0",
+				"js-sha3": "0.8.0"
+			}
+		},
+		"node_modules/@ethersproject/logger": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/logger/-/logger-5.8.0.tgz",
+			"integrity": "sha512-Qe6knGmY+zPPWTC+wQrpitodgBfH7XoceCGL5bJVejmH+yCS3R8jJm8iiWuvWbG76RUmyEG53oqv6GMVWqunjA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/@ethersproject/networks": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/networks/-/networks-5.8.0.tgz",
+			"integrity": "sha512-egPJh3aPVAzbHwq8DD7Po53J4OUSsA1MjQp8Vf/OZPav5rlmWUaFLiq8cvQiGK0Z5K6LYzm29+VA/p4RL1FzNg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/logger": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/properties": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/properties/-/properties-5.8.0.tgz",
+			"integrity": "sha512-PYuiEoQ+FMaZZNGrStmN7+lWjlsoufGIHdww7454FIaGdbe/p5rnaCXTr5MtBYl3NkeoVhHZuyzChPeGeKIpQw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/logger": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/rlp": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/rlp/-/rlp-5.8.0.tgz",
+			"integrity": "sha512-LqZgAznqDbiEunaUvykH2JAoXTT9NV0Atqk8rQN9nx9SEgThA/WMx5DnW8a9FOufo//6FZOCHZ+XiClzgbqV9Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/signing-key": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/signing-key/-/signing-key-5.8.0.tgz",
+			"integrity": "sha512-LrPW2ZxoigFi6U6aVkFN/fa9Yx/+4AtIUe4/HACTvKJdhm0eeb107EVCIQcrLZkxaSIgc/eCrX8Q1GtbH+9n3w==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0",
+				"@ethersproject/properties": "^5.8.0",
+				"bn.js": "^5.2.1",
+				"elliptic": "6.6.1",
+				"hash.js": "1.1.7"
+			}
+		},
+		"node_modules/@ethersproject/strings": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/strings/-/strings-5.8.0.tgz",
+			"integrity": "sha512-qWEAk0MAvl0LszjdfnZ2uC8xbR2wdv4cDabyHiBh3Cldq/T8dPH3V4BbBsAYJUeonwD+8afVXld274Ls+Y1xXg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/constants": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/transactions": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/transactions/-/transactions-5.8.0.tgz",
+			"integrity": "sha512-UglxSDjByHG0TuU17bDfCemZ3AnKO2vYrL5/2n2oXvKzvb7Cz+W9gOWXKARjp2URVwcWlQlPOEQyAviKwT4AHg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/address": "^5.8.0",
+				"@ethersproject/bignumber": "^5.8.0",
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/constants": "^5.8.0",
+				"@ethersproject/keccak256": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0",
+				"@ethersproject/properties": "^5.8.0",
+				"@ethersproject/rlp": "^5.8.0",
+				"@ethersproject/signing-key": "^5.8.0"
+			}
+		},
+		"node_modules/@ethersproject/web": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@ethersproject/web/-/web-5.8.0.tgz",
+			"integrity": "sha512-j7+Ksi/9KfGviws6Qtf9Q7KCqRhpwrYKQPs+JBA/rKVFF/yaWLHJEH3zfVP2plVu+eys0d2DlFmhoQJayFewcw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/base64": "^5.8.0",
+				"@ethersproject/bytes": "^5.8.0",
+				"@ethersproject/logger": "^5.8.0",
+				"@ethersproject/properties": "^5.8.0",
+				"@ethersproject/strings": "^5.8.0"
+			}
+		},
+		"node_modules/@fastify/busboy": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+			"integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/@jest/schemas": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+			"integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@sinclair/typebox": "^0.27.8"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@noble/ciphers": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.2.1.tgz",
+			"integrity": "sha512-rONPWMC7PeExE077uLE4oqWrZ1IvAfz3oH9LibVAcVCopJiA9R62uavnbEzdkVmJYI6M6Zgkbeb07+tWjlq2XA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@noble/curves": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.4.2.tgz",
+			"integrity": "sha512-TavHr8qycMChk8UwMld0ZDRvatedkzWfH8IiaeGCfymOP5i0hSCozz9vHOL0nkwk7HRMlFnAiKpS2jrUmSybcw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "1.4.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@noble/curves/node_modules/@noble/hashes": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+			"integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@noble/hashes": {
+			"version": "1.7.1",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.7.1.tgz",
+			"integrity": "sha512-B8XBPsn4vT/KJAGqDzbwztd+6Yte3P4V7iafm24bxgDe/mlRuK6xmWPuCNrKt2vDafZ8MfJLlchDG/vYafQEjQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@nomicfoundation/edr": {
+			"version": "0.12.0-next.14",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/edr/-/edr-0.12.0-next.14.tgz",
+			"integrity": "sha512-MGHY2x7JaNdkqlQxFBYoM7Miw2EqsQrI3ReVZMwLP5mULSRTAOnt3hCw6cnjXxGi991HnejNAedJofke6OdqqA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@nomicfoundation/edr-darwin-arm64": "0.12.0-next.14",
+				"@nomicfoundation/edr-darwin-x64": "0.12.0-next.14",
+				"@nomicfoundation/edr-linux-arm64-gnu": "0.12.0-next.14",
+				"@nomicfoundation/edr-linux-arm64-musl": "0.12.0-next.14",
+				"@nomicfoundation/edr-linux-x64-gnu": "0.12.0-next.14",
+				"@nomicfoundation/edr-linux-x64-musl": "0.12.0-next.14",
+				"@nomicfoundation/edr-win32-x64-msvc": "0.12.0-next.14"
+			},
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@nomicfoundation/edr-darwin-arm64": {
+			"version": "0.12.0-next.14",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/edr-darwin-arm64/-/edr-darwin-arm64-0.12.0-next.14.tgz",
+			"integrity": "sha512-sl0DibKSUOS7JXhUtaQ6FJUY+nk+uq5gx+Fyd9iiqs8awZPNn6KSuvV1EbWCi+yd3mrxgZ/wO8E77C1Dxj4xQA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@nomicfoundation/edr-darwin-x64": {
+			"version": "0.12.0-next.14",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/edr-darwin-x64/-/edr-darwin-x64-0.12.0-next.14.tgz",
+			"integrity": "sha512-lfmatc1MSOaw0rDFB+ynnAGz5TWm3hSeY/+zDpPZghMODZelXm4JCqF41CQ6paLsW3X/pXcHM1HUGCUBWeoI/A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@nomicfoundation/edr-linux-arm64-gnu": {
+			"version": "0.12.0-next.14",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/edr-linux-arm64-gnu/-/edr-linux-arm64-gnu-0.12.0-next.14.tgz",
+			"integrity": "sha512-sWun3PhVgat8d4lg1d5MAXSIsFlSMBzvrpMSDFNOU9hPJEclSHbHBMRcarQuGqwm/5ZBzTwCS25u78A+UATTrg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@nomicfoundation/edr-linux-arm64-musl": {
+			"version": "0.12.0-next.14",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/edr-linux-arm64-musl/-/edr-linux-arm64-musl-0.12.0-next.14.tgz",
+			"integrity": "sha512-omWKioD8fFp7ayCeSDu2CqvG78+oYw8zdVECDwZVmE0jpszRCsTufNYflWRQnlGqH6GqjEUwq2c3yLxFgOTjFg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@nomicfoundation/edr-linux-x64-gnu": {
+			"version": "0.12.0-next.14",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/edr-linux-x64-gnu/-/edr-linux-x64-gnu-0.12.0-next.14.tgz",
+			"integrity": "sha512-vk0s4SaC7s1wa98W24a4zqunTK/yIcSEnsSLRM/Nl+JJs6iqS8tvmnh/BbFINORMBJ065OWc10qw2Lsbu/rxtg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@nomicfoundation/edr-linux-x64-musl": {
+			"version": "0.12.0-next.14",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/edr-linux-x64-musl/-/edr-linux-x64-musl-0.12.0-next.14.tgz",
+			"integrity": "sha512-/xKQD6c2RXQBIb30iTeh/NrMdYvHs6Nd+2UXS6wxlfX7GzRPOkpVDiDGD7Sda82JI459KH67dADOD6CpX8cpHQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@nomicfoundation/edr-win32-x64-msvc": {
+			"version": "0.12.0-next.14",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/edr-win32-x64-msvc/-/edr-win32-x64-msvc-0.12.0-next.14.tgz",
+			"integrity": "sha512-GZcyGdOoLWnUtfPU+6B1vUi4fwf3bouSRf3xuKFHz3p/WNhpDK+8Esq3UmOmYAZWRgFT0ZR6XUk9H2owGDTVvQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-errors": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-errors/-/hardhat-errors-3.0.5.tgz",
+			"integrity": "sha512-8Ayqf6hFM1glmrSxrXgX6n2pn5uTlHNxEB8N5Me0DOeOGB67PRIrQdiO+RzUhrNW5YgWUNWBevOLQbW06uQ79g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@nomicfoundation/hardhat-utils": "^3.0.1"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-ignition": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-ignition/-/hardhat-ignition-3.0.5.tgz",
+			"integrity": "sha512-ZTaGHdDDuHE5MjlRaSbSIOuTSZcJtVd/ShEyE6E1PEt0FLTcgYZu+NNCWRc2JZG6/Cix0PAO297y+yi+USNilA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@nomicfoundation/hardhat-errors": "^3.0.2",
+				"@nomicfoundation/hardhat-utils": "^3.0.5",
+				"@nomicfoundation/ignition-core": "^3.0.5",
+				"@nomicfoundation/ignition-ui": "^3.0.5",
+				"chalk": "^5.3.0",
+				"debug": "^4.3.2",
+				"json5": "^2.2.3",
+				"prompts": "^2.4.2"
+			},
+			"peerDependencies": {
+				"@nomicfoundation/hardhat-verify": "^3.0.0",
+				"hardhat": "^3.0.0"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-ignition-viem": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-ignition-viem/-/hardhat-ignition-viem-3.0.5.tgz",
+			"integrity": "sha512-bK+Rmg7m6wJxoqXOTxl/HA6AakdS6OUJjGUUYxfFpuXCH9c4tW3Qp7fpgAhI0W3cCPAeT42OANSDlCH/MRZbBA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@nomicfoundation/hardhat-errors": "^3.0.2"
+			},
+			"peerDependencies": {
+				"@nomicfoundation/hardhat-ignition": "^3.0.5",
+				"@nomicfoundation/hardhat-verify": "^3.0.0",
+				"@nomicfoundation/hardhat-viem": "^3.0.0",
+				"@nomicfoundation/ignition-core": "^3.0.5",
+				"hardhat": "^3.0.0",
+				"viem": "^2.30.0"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-keystore": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-keystore/-/hardhat-keystore-3.0.3.tgz",
+			"integrity": "sha512-rkwfdy/GsX/2SV49RGBvMsCuR+SYGJQGD3wcrS5m2Cyap5eQFEgKZbqpua6YQRA2raxRmVVH6antIIftgBFXAQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@noble/ciphers": "1.2.1",
+				"@noble/hashes": "1.7.1",
+				"@nomicfoundation/hardhat-errors": "^3.0.0",
+				"@nomicfoundation/hardhat-utils": "^3.0.5",
+				"@nomicfoundation/hardhat-zod-utils": "^3.0.0",
+				"chalk": "^5.3.0",
+				"debug": "^4.3.2",
+				"zod": "^3.23.8"
+			},
+			"peerDependencies": {
+				"hardhat": "^3.0.0"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-network-helpers": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-network-helpers/-/hardhat-network-helpers-3.0.3.tgz",
+			"integrity": "sha512-FqXD8CPFNdluEhELqNV/Q0grOQtlwRWr28LW+/NTas3rrDAXpNOIPCCq3RIXJIqsdbNPQsG2FpnfKj9myqIsKQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@nomicfoundation/hardhat-errors": "^3.0.5",
+				"@nomicfoundation/hardhat-utils": "^3.0.5"
+			},
+			"peerDependencies": {
+				"hardhat": "^3.0.0"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-node-test-reporter": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-node-test-reporter/-/hardhat-node-test-reporter-3.0.1.tgz",
+			"integrity": "sha512-p6yNKZFnJ2OMplXx7zi45KGWr4hr/qMkg+gTuSSLLlph7NL1DGjGG+N6GrZs46AGSrsnYEocKXGnavl92dxEig==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@actions/core": "^1.10.1",
+				"chalk": "^5.3.0",
+				"jest-diff": "^29.7.0"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-node-test-runner": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-node-test-runner/-/hardhat-node-test-runner-3.0.7.tgz",
+			"integrity": "sha512-MwYZef9JwUl9HaA+rZDsXWEWdpeBfnW5YNB0kN9WUkEiPPoST4LGE/56+BtkmV487Mkt2yvuF0x73YppvX/ydA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@nomicfoundation/hardhat-errors": "^3.0.2",
+				"@nomicfoundation/hardhat-node-test-reporter": "^3.0.0",
+				"@nomicfoundation/hardhat-utils": "^3.0.5",
+				"@nomicfoundation/hardhat-zod-utils": "^3.0.0",
+				"tsx": "^4.19.3",
+				"zod": "^3.23.8"
+			},
+			"peerDependencies": {
+				"hardhat": "^3.0.0"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-toolbox-viem": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-toolbox-viem/-/hardhat-toolbox-viem-5.0.1.tgz",
+			"integrity": "sha512-NhPQjHwTk356k6WS7tPeEWS5ymtlZe2lzcZzvgd2AD7wrMXE/zUu5qacXgwPq/M6HVEczSpuFeu+/koQgA2pbA==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"@nomicfoundation/hardhat-ignition": "^3.0.0",
+				"@nomicfoundation/hardhat-ignition-viem": "^3.0.0",
+				"@nomicfoundation/hardhat-keystore": "^3.0.0",
+				"@nomicfoundation/hardhat-network-helpers": "^3.0.0",
+				"@nomicfoundation/hardhat-node-test-runner": "^3.0.0",
+				"@nomicfoundation/hardhat-verify": "^3.0.0",
+				"@nomicfoundation/hardhat-viem": "^3.0.0",
+				"@nomicfoundation/hardhat-viem-assertions": "^3.0.0",
+				"@nomicfoundation/ignition-core": "^3.0.0",
+				"hardhat": "^3.0.0",
+				"viem": "^2.30.0"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-utils": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-utils/-/hardhat-utils-3.0.5.tgz",
+			"integrity": "sha512-5zkQSuSxkwK7fQxKswJ1GGc/3AuWBSmxA7GhczTPLx28dAXQnubRU8nA48SkCkKesJq5x4TROP+XheSE2VkLUA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@streamparser/json-node": "^0.0.22",
+				"debug": "^4.3.2",
+				"env-paths": "^2.2.0",
+				"ethereum-cryptography": "^2.2.1",
+				"fast-equals": "^5.0.1",
+				"json-stream-stringify": "^3.1.6",
+				"rfdc": "^1.3.1",
+				"undici": "^6.16.1"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-utils/node_modules/undici": {
+			"version": "6.22.0",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-6.22.0.tgz",
+			"integrity": "sha512-hU/10obOIu62MGYjdskASR3CUAiYaFTtC9Pa6vHyf//mAipSvSQg6od2CnJswq7fvzNS3zJhxoRkgNVaHurWKw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.17"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-verify": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-verify/-/hardhat-verify-3.0.7.tgz",
+			"integrity": "sha512-2Px2Zldg2oRJvy7odx8hZ0lZ4yjkW8XLr6umqcKl5z36+XifKRanzd8phoLEGQ8SRBNaVsaw0EDHi9Q0QTUu3A==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@ethersproject/abi": "^5.8.0",
+				"@nomicfoundation/hardhat-errors": "^3.0.3",
+				"@nomicfoundation/hardhat-utils": "^3.0.5",
+				"@nomicfoundation/hardhat-zod-utils": "^3.0.0",
+				"cbor2": "^1.9.0",
+				"chalk": "^5.3.0",
+				"debug": "^4.3.2",
+				"semver": "^7.6.3",
+				"zod": "^3.23.8"
+			},
+			"peerDependencies": {
+				"hardhat": "^3.0.0"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-viem": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-viem/-/hardhat-viem-3.0.1.tgz",
+			"integrity": "sha512-sUyi3Xn31vItf925YRgHp7x6FIFfG9B+jacWYyJ0RBi7BWCrC/aSUX4jRRmpzaZ4opLQ8KXAZdxS91Yka7AYtw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@nomicfoundation/hardhat-errors": "^3.0.0",
+				"@nomicfoundation/hardhat-utils": "^3.0.5"
+			},
+			"peerDependencies": {
+				"hardhat": "^3.0.0",
+				"viem": "^2.30.0"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-viem-assertions": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-viem-assertions/-/hardhat-viem-assertions-3.0.4.tgz",
+			"integrity": "sha512-MLImyHVuFEVNOcpJ0cjmpJ/IYj/mc2Kql6g9swX5Xtln13Gyv4jJFvoyjEalt8K9SYVTNY8kpDtVmQ2fP8BsDA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@nomicfoundation/hardhat-errors": "^3.0.5",
+				"@nomicfoundation/hardhat-utils": "^3.0.5"
+			},
+			"peerDependencies": {
+				"@nomicfoundation/hardhat-viem": "^3.0.0",
+				"hardhat": "^3.0.0",
+				"viem": "^2.30.0"
+			}
+		},
+		"node_modules/@nomicfoundation/hardhat-zod-utils": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/hardhat-zod-utils/-/hardhat-zod-utils-3.0.1.tgz",
+			"integrity": "sha512-I6/pyYiS9p2lLkzQuedr1ScMocH+ew8l233xTi+LP92gjEiviJDxselpkzgU01MUM0t6BPpfP8yMO958LDEJVg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@nomicfoundation/hardhat-errors": "^3.0.0",
+				"@nomicfoundation/hardhat-utils": "^3.0.2"
+			},
+			"peerDependencies": {
+				"zod": "^3.23.8"
+			}
+		},
+		"node_modules/@nomicfoundation/ignition-core": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/ignition-core/-/ignition-core-3.0.5.tgz",
+			"integrity": "sha512-pD3IHmePTkqwbhOaUwnSYhc9PCn2e9kFYi5nvWQFGEN3pjJ+EJeMyG0QWDJQU7beBeKNxbnb1SMPY+CBN5F+kA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@ethersproject/address": "5.6.1",
+				"@nomicfoundation/hardhat-errors": "^3.0.2",
+				"@nomicfoundation/hardhat-utils": "^3.0.5",
+				"@nomicfoundation/solidity-analyzer": "^0.1.1",
+				"cbor2": "^1.9.0",
+				"debug": "^4.3.2",
+				"ethers": "^6.14.0",
+				"immer": "10.0.2",
+				"lodash-es": "4.17.21",
+				"ndjson": "2.0.0"
+			}
+		},
+		"node_modules/@nomicfoundation/ignition-core/node_modules/@ethersproject/address": {
+			"version": "5.6.1",
+			"resolved": "https://registry.npmjs.org/@ethersproject/address/-/address-5.6.1.tgz",
+			"integrity": "sha512-uOgF0kS5MJv9ZvCz7x6T2EXJSzotiybApn4XlOgoTX0xdtyVIJ7pF+6cGPxiEq/dpBiTfMiw7Yc81JcwhSYA0Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@ethersproject/bignumber": "^5.6.2",
+				"@ethersproject/bytes": "^5.6.1",
+				"@ethersproject/keccak256": "^5.6.1",
+				"@ethersproject/logger": "^5.6.0",
+				"@ethersproject/rlp": "^5.6.1"
+			}
+		},
+		"node_modules/@nomicfoundation/ignition-ui": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/ignition-ui/-/ignition-ui-3.0.5.tgz",
+			"integrity": "sha512-lRvbvW8hCTGs2J8w71PJRfjfs3KwVrCQ/kvmCMq3sOS7yorVYqxUw36ERvjFa1pEwc+gER/xoUycRBhfRZ3NAA==",
+			"dev": true
+		},
+		"node_modules/@nomicfoundation/solidity-analyzer": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer/-/solidity-analyzer-0.1.2.tgz",
+			"integrity": "sha512-q4n32/FNKIhQ3zQGGw5CvPF6GTvDCpYwIf7bEY/dZTZbgfDsHyjJwURxUJf3VQuuJj+fDIFl4+KkBVbw4Ef6jA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			},
+			"optionalDependencies": {
+				"@nomicfoundation/solidity-analyzer-darwin-arm64": "0.1.2",
+				"@nomicfoundation/solidity-analyzer-darwin-x64": "0.1.2",
+				"@nomicfoundation/solidity-analyzer-linux-arm64-gnu": "0.1.2",
+				"@nomicfoundation/solidity-analyzer-linux-arm64-musl": "0.1.2",
+				"@nomicfoundation/solidity-analyzer-linux-x64-gnu": "0.1.2",
+				"@nomicfoundation/solidity-analyzer-linux-x64-musl": "0.1.2",
+				"@nomicfoundation/solidity-analyzer-win32-x64-msvc": "0.1.2"
+			}
+		},
+		"node_modules/@nomicfoundation/solidity-analyzer-darwin-arm64": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-darwin-arm64/-/solidity-analyzer-darwin-arm64-0.1.2.tgz",
+			"integrity": "sha512-JaqcWPDZENCvm++lFFGjrDd8mxtf+CtLd2MiXvMNTBD33dContTZ9TWETwNFwg7JTJT5Q9HEecH7FA+HTSsIUw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/@nomicfoundation/solidity-analyzer-darwin-x64": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-darwin-x64/-/solidity-analyzer-darwin-x64-0.1.2.tgz",
+			"integrity": "sha512-fZNmVztrSXC03e9RONBT+CiksSeYcxI1wlzqyr0L7hsQlK1fzV+f04g2JtQ1c/Fe74ZwdV6aQBdd6Uwl1052sw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/@nomicfoundation/solidity-analyzer-linux-arm64-gnu": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-linux-arm64-gnu/-/solidity-analyzer-linux-arm64-gnu-0.1.2.tgz",
+			"integrity": "sha512-3d54oc+9ZVBuB6nbp8wHylk4xh0N0Gc+bk+/uJae+rUgbOBwQSfuGIbAZt1wBXs5REkSmynEGcqx6DutoK0tPA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/@nomicfoundation/solidity-analyzer-linux-arm64-musl": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-linux-arm64-musl/-/solidity-analyzer-linux-arm64-musl-0.1.2.tgz",
+			"integrity": "sha512-iDJfR2qf55vgsg7BtJa7iPiFAsYf2d0Tv/0B+vhtnI16+wfQeTbP7teookbGvAo0eJo7aLLm0xfS/GTkvHIucA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/@nomicfoundation/solidity-analyzer-linux-x64-gnu": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-linux-x64-gnu/-/solidity-analyzer-linux-x64-gnu-0.1.2.tgz",
+			"integrity": "sha512-9dlHMAt5/2cpWyuJ9fQNOUXFB/vgSFORg1jpjX1Mh9hJ/MfZXlDdHQ+DpFCs32Zk5pxRBb07yGvSHk9/fezL+g==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/@nomicfoundation/solidity-analyzer-linux-x64-musl": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-linux-x64-musl/-/solidity-analyzer-linux-x64-musl-0.1.2.tgz",
+			"integrity": "sha512-GzzVeeJob3lfrSlDKQw2bRJ8rBf6mEYaWY+gW0JnTDHINA0s2gPR4km5RLIj1xeZZOYz4zRw+AEeYgLRqB2NXg==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/@nomicfoundation/solidity-analyzer-win32-x64-msvc": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@nomicfoundation/solidity-analyzer-win32-x64-msvc/-/solidity-analyzer-win32-x64-msvc-0.1.2.tgz",
+			"integrity": "sha512-Fdjli4DCcFHb4Zgsz0uEJXZ2K7VEO+w5KVv7HmT7WO10iODdU9csC2az4jrhEsRtiR9Gfd74FlG0NYlw1BMdyA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/@openzeppelin/contracts": {
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/@openzeppelin/contracts/-/contracts-5.4.0.tgz",
+			"integrity": "sha512-eCYgWnLg6WO+X52I16TZt8uEjbtdkgLC0SUX/xnAksjjrQI4Xfn4iBRoI5j55dmlOhDv1Y7BoR3cU7e3WWhC6A==",
+			"license": "MIT"
+		},
+		"node_modules/@scure/base": {
+			"version": "1.1.9",
+			"resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.9.tgz",
+			"integrity": "sha512-8YKhl8GHiNI/pU2VMaofa2Tor7PJRAjwQLBBuilkJ9L5+13yVbC7JO/wS7piioAvPSwR3JKM1IJ/u4xQzbcXKg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@scure/bip32": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.4.0.tgz",
+			"integrity": "sha512-sVUpc0Vq3tXCkDGYVWGIZTRfnvu8LoTDaev7vbwh0omSvVORONr960MQWdKqJDCReIEmTj3PAr73O3aoxz7OPg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/curves": "~1.4.0",
+				"@noble/hashes": "~1.4.0",
+				"@scure/base": "~1.1.6"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@scure/bip32/node_modules/@noble/hashes": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+			"integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@scure/bip39": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.3.0.tgz",
+			"integrity": "sha512-disdg7gHuTDZtY+ZdkmLpPCk7fxZSu3gBiEGuoC1XYxv9cGx3Z6cpTggCgW6odSOOIXCiDjuGejW+aJKCY/pIQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "~1.4.0",
+				"@scure/base": "~1.1.6"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@scure/bip39/node_modules/@noble/hashes": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+			"integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@sentry/core": {
+			"version": "9.47.1",
+			"resolved": "https://registry.npmjs.org/@sentry/core/-/core-9.47.1.tgz",
+			"integrity": "sha512-KX62+qIt4xgy8eHKHiikfhz2p5fOciXd0Cl+dNzhgPFq8klq4MGMNaf148GB3M/vBqP4nw/eFvRMAayFCgdRQw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@sinclair/typebox": {
+			"version": "0.27.8",
+			"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+			"integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/@streamparser/json": {
+			"version": "0.0.22",
+			"resolved": "https://registry.npmjs.org/@streamparser/json/-/json-0.0.22.tgz",
+			"integrity": "sha512-b6gTSBjJ8G8SuO3Gbbj+zXbVx8NSs1EbpbMKpzGLWMdkR+98McH9bEjSz3+0mPJf68c5nxa3CrJHp5EQNXM6zQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@streamparser/json-node": {
+			"version": "0.0.22",
+			"resolved": "https://registry.npmjs.org/@streamparser/json-node/-/json-node-0.0.22.tgz",
+			"integrity": "sha512-sJT2ptNRwqB1lIsQrQlCoWk5rF4tif9wDh+7yluAGijJamAhrHGYpFB/Zg3hJeceoZypi74ftXk8DHzwYpbZSg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@streamparser/json": "^0.0.22"
+			}
+		},
+		"node_modules/@types/node": {
+			"version": "22.19.1",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.1.tgz",
+			"integrity": "sha512-LCCV0HdSZZZb34qifBsyWlUmok6W7ouER+oQIGBScS8EsZsQbrtFTUrDX4hOl+CS6p7cnNC4td+qrSVGSCTUfQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~6.21.0"
+			}
+		},
+		"node_modules/abitype": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/abitype/-/abitype-1.1.0.tgz",
+			"integrity": "sha512-6Vh4HcRxNMLA0puzPjM5GBgT4aAcFGKZzSgAXvuZ27shJP6NEpielTuqbBmZILR5/xd0PizkBGy5hReKz9jl5A==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/wevm"
+			},
+			"peerDependencies": {
+				"typescript": ">=5.0.4",
+				"zod": "^3.22.0 || ^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				},
+				"zod": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/adm-zip": {
+			"version": "0.4.16",
+			"resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.16.tgz",
+			"integrity": "sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.3.0"
+			}
+		},
+		"node_modules/aes-js": {
+			"version": "4.0.0-beta.5",
+			"resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz",
+			"integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/ansi-colors": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+			"integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ansi-styles": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+			"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/bn.js": {
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.2.tgz",
+			"integrity": "sha512-v2YAxEmKaBLahNwE1mjp4WON6huMNeuDvagFZW+ASCuA/ku0bXR9hSMw0XpiqMoA3+rmnyck/tPRSFQkoC9Cuw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/brorand": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+			"integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/cbor2": {
+			"version": "1.12.0",
+			"resolved": "https://registry.npmjs.org/cbor2/-/cbor2-1.12.0.tgz",
+			"integrity": "sha512-3Cco8XQhi27DogSp9Ri6LYNZLi/TBY/JVnDe+mj06NkBjW/ZYOtekaEU4wZ4xcRMNrFkDv8KNtOAqHyDfz3lYg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.7"
+			}
+		},
+		"node_modules/chalk": {
+			"version": "5.6.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+			"integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^12.17.0 || ^14.13 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/chokidar": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"readdirp": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 14.16.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/debug": {
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+			"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/diff-sequences": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+			"integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/elliptic": {
+			"version": "6.6.1",
+			"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.6.1.tgz",
+			"integrity": "sha512-RaddvvMatK2LJHqFJ+YA4WysVN5Ita9E35botqIYspQ4TkRAlCicdzKOjlyv/1Za5RyTNn7di//eEV0uTAfe3g==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"bn.js": "^4.11.9",
+				"brorand": "^1.1.0",
+				"hash.js": "^1.0.0",
+				"hmac-drbg": "^1.0.1",
+				"inherits": "^2.0.4",
+				"minimalistic-assert": "^1.0.1",
+				"minimalistic-crypto-utils": "^1.0.1"
+			}
+		},
+		"node_modules/elliptic/node_modules/bn.js": {
+			"version": "4.12.2",
+			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.2.tgz",
+			"integrity": "sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/enquirer": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
+			"integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-colors": "^4.1.1",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8.6"
+			}
+		},
+		"node_modules/env-paths": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+			"integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/esbuild": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+			"integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"bin": {
+				"esbuild": "bin/esbuild"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"@esbuild/aix-ppc64": "0.25.12",
+				"@esbuild/android-arm": "0.25.12",
+				"@esbuild/android-arm64": "0.25.12",
+				"@esbuild/android-x64": "0.25.12",
+				"@esbuild/darwin-arm64": "0.25.12",
+				"@esbuild/darwin-x64": "0.25.12",
+				"@esbuild/freebsd-arm64": "0.25.12",
+				"@esbuild/freebsd-x64": "0.25.12",
+				"@esbuild/linux-arm": "0.25.12",
+				"@esbuild/linux-arm64": "0.25.12",
+				"@esbuild/linux-ia32": "0.25.12",
+				"@esbuild/linux-loong64": "0.25.12",
+				"@esbuild/linux-mips64el": "0.25.12",
+				"@esbuild/linux-ppc64": "0.25.12",
+				"@esbuild/linux-riscv64": "0.25.12",
+				"@esbuild/linux-s390x": "0.25.12",
+				"@esbuild/linux-x64": "0.25.12",
+				"@esbuild/netbsd-arm64": "0.25.12",
+				"@esbuild/netbsd-x64": "0.25.12",
+				"@esbuild/openbsd-arm64": "0.25.12",
+				"@esbuild/openbsd-x64": "0.25.12",
+				"@esbuild/openharmony-arm64": "0.25.12",
+				"@esbuild/sunos-x64": "0.25.12",
+				"@esbuild/win32-arm64": "0.25.12",
+				"@esbuild/win32-ia32": "0.25.12",
+				"@esbuild/win32-x64": "0.25.12"
+			}
+		},
+		"node_modules/ethereum-cryptography": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/ethereum-cryptography/-/ethereum-cryptography-2.2.1.tgz",
+			"integrity": "sha512-r/W8lkHSiTLxUxW8Rf3u4HGB0xQweG2RyETjywylKZSzLWoWAijRz8WCuOtJ6wah+avllXBqZuk29HCCvhEIRg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/curves": "1.4.2",
+				"@noble/hashes": "1.4.0",
+				"@scure/bip32": "1.4.0",
+				"@scure/bip39": "1.3.0"
+			}
+		},
+		"node_modules/ethereum-cryptography/node_modules/@noble/hashes": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+			"integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/ethers": {
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/ethers/-/ethers-6.15.0.tgz",
+			"integrity": "sha512-Kf/3ZW54L4UT0pZtsY/rf+EkBU7Qi5nnhonjUb8yTXcxH3cdcWrV2cRyk0Xk/4jK6OoHhxxZHriyhje20If2hQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/ethers-io/"
+				},
+				{
+					"type": "individual",
+					"url": "https://www.buymeacoffee.com/ricmoo"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@adraffy/ens-normalize": "1.10.1",
+				"@noble/curves": "1.2.0",
+				"@noble/hashes": "1.3.2",
+				"@types/node": "22.7.5",
+				"aes-js": "4.0.0-beta.5",
+				"tslib": "2.7.0",
+				"ws": "8.17.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/ethers/node_modules/@noble/curves": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.2.0.tgz",
+			"integrity": "sha512-oYclrNgRaM9SsBUBVbb8M6DTV7ZHRTKugureoYEncY5c65HOmRzvSiTE3y5CYaPYJA/GVkrhXEoF0M3Ya9PMnw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "1.3.2"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/ethers/node_modules/@noble/hashes": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.2.tgz",
+			"integrity": "sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/ethers/node_modules/@types/node": {
+			"version": "22.7.5",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.5.tgz",
+			"integrity": "sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~6.19.2"
+			}
+		},
+		"node_modules/ethers/node_modules/undici-types": {
+			"version": "6.19.8",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/eventemitter3": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+			"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/fast-equals": {
+			"version": "5.3.3",
+			"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.3.3.tgz",
+			"integrity": "sha512-/boTcHZeIAQ2r/tL11voclBHDeP9WPxLt+tyAbVSyyXuUFyh0Tne7gJZTqGbxnvj79TjLdCXLOY7UIPhyG5MTw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/forge-std": {
+			"version": "1.9.4",
+			"resolved": "git+ssh://git@github.com/foundry-rs/forge-std.git#1eea5bae12ae557d589f9f0f0edae2faa47cb262",
+			"dev": true,
+			"license": "(Apache-2.0 OR MIT)"
+		},
+		"node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
+		"node_modules/get-tsconfig": {
+			"version": "4.13.0",
+			"resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+			"integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"resolve-pkg-maps": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+			}
+		},
+		"node_modules/hardhat": {
+			"version": "3.0.15",
+			"resolved": "https://registry.npmjs.org/hardhat/-/hardhat-3.0.15.tgz",
+			"integrity": "sha512-cXxaeSxFJ+u0MfbvWsS3Gdr7/uP7wjo4xviYcGdu9AKtwY6YsU+v0quK/j1NWmvO1Y4gk350SdZzQw++hJy4LA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@nomicfoundation/edr": "0.12.0-next.14",
+				"@nomicfoundation/hardhat-errors": "^3.0.4",
+				"@nomicfoundation/hardhat-utils": "^3.0.5",
+				"@nomicfoundation/hardhat-zod-utils": "^3.0.1",
+				"@nomicfoundation/solidity-analyzer": "^0.1.1",
+				"@sentry/core": "^9.4.0",
+				"adm-zip": "^0.4.16",
+				"chalk": "^5.3.0",
+				"chokidar": "^4.0.3",
+				"debug": "^4.3.2",
+				"enquirer": "^2.3.0",
+				"ethereum-cryptography": "^2.2.1",
+				"micro-eth-signer": "^0.14.0",
+				"p-map": "^7.0.2",
+				"resolve.exports": "^2.0.3",
+				"semver": "^7.6.3",
+				"tsx": "^4.19.3",
+				"ws": "^8.18.0",
+				"zod": "^3.23.8"
+			},
+			"bin": {
+				"hardhat": "dist/src/cli.js"
+			}
+		},
+		"node_modules/hardhat/node_modules/ws": {
+			"version": "8.18.3",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+			"integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/hash.js": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+			"integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"minimalistic-assert": "^1.0.1"
+			}
+		},
+		"node_modules/hmac-drbg": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+			"integrity": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"hash.js": "^1.0.3",
+				"minimalistic-assert": "^1.0.0",
+				"minimalistic-crypto-utils": "^1.0.1"
+			}
+		},
+		"node_modules/immer": {
+			"version": "10.0.2",
+			"resolved": "https://registry.npmjs.org/immer/-/immer-10.0.2.tgz",
+			"integrity": "sha512-Rx3CqeqQ19sxUtYV9CU911Vhy8/721wRFnJv3REVGWUmoAcIwzifTsdmJte/MV+0/XpM35LZdQMBGkRIoLPwQA==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/immer"
+			}
+		},
+		"node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/isows": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/isows/-/isows-1.0.7.tgz",
+			"integrity": "sha512-I1fSfDCZL5P0v33sVqeTDSpcstAg/N+wF5HS033mogOVIp4B+oHC7oOCsA3axAbBSGTJ8QubbNmnIRN/h8U7hg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/wevm"
+				}
+			],
+			"license": "MIT",
+			"peerDependencies": {
+				"ws": "*"
+			}
+		},
+		"node_modules/jest-diff": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
+			"integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"chalk": "^4.0.0",
+				"diff-sequences": "^29.6.3",
+				"jest-get-type": "^29.6.3",
+				"pretty-format": "^29.7.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-diff/node_modules/ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"color-convert": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/jest-diff/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/jest-get-type": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
+			"integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/js-sha3": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+			"integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/json-stream-stringify": {
+			"version": "3.1.6",
+			"resolved": "https://registry.npmjs.org/json-stream-stringify/-/json-stream-stringify-3.1.6.tgz",
+			"integrity": "sha512-x7fpwxOkbhFCaJDJ8vb1fBY3DdSa4AlITaz+HHILQJzdPMnHEFjxPwVUi1ALIbcIxDE0PNe/0i7frnY8QnBQog==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=7.10.1"
+			}
+		},
+		"node_modules/json-stringify-safe": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+			"integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/json5": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"json5": "lib/cli.js"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/kleur": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+			"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/lodash-es": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/micro-eth-signer": {
+			"version": "0.14.0",
+			"resolved": "https://registry.npmjs.org/micro-eth-signer/-/micro-eth-signer-0.14.0.tgz",
+			"integrity": "sha512-5PLLzHiVYPWClEvZIXXFu5yutzpadb73rnQCpUqIHu3No3coFuWQNfE5tkBQJ7djuLYl6aRLaS0MgWJYGoqiBw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/curves": "~1.8.1",
+				"@noble/hashes": "~1.7.1",
+				"micro-packed": "~0.7.2"
+			}
+		},
+		"node_modules/micro-eth-signer/node_modules/@noble/curves": {
+			"version": "1.8.2",
+			"resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.8.2.tgz",
+			"integrity": "sha512-vnI7V6lFNe0tLAuJMu+2sX+FcL14TaCWy1qiczg1VwRmPrpQCdq5ESXQMqUc2tluRNf6irBXrWbl1mGN8uaU/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "1.7.2"
+			},
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/micro-eth-signer/node_modules/@noble/hashes": {
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.7.2.tgz",
+			"integrity": "sha512-biZ0NUSxyjLLqo6KxEJ1b+C2NAx0wtDoFvCaXHGgUkeHzf3Xc1xKumFKREuT7f7DARNZ/slvYUwFG6B0f2b6hQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/micro-packed": {
+			"version": "0.7.3",
+			"resolved": "https://registry.npmjs.org/micro-packed/-/micro-packed-0.7.3.tgz",
+			"integrity": "sha512-2Milxs+WNC00TRlem41oRswvw31146GiSaoCT7s3Xi2gMUglW5QBeqlQaZeHr5tJx9nm3i57LNXPqxOOaWtTYg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@scure/base": "~1.2.5"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/micro-packed/node_modules/@scure/base": {
+			"version": "1.2.6",
+			"resolved": "https://registry.npmjs.org/@scure/base/-/base-1.2.6.tgz",
+			"integrity": "sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/minimalistic-assert": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+			"integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+			"dev": true,
+			"license": "ISC",
+			"peer": true
+		},
+		"node_modules/minimalistic-crypto-utils": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+			"integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/minimist": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/ndjson": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ndjson/-/ndjson-2.0.0.tgz",
+			"integrity": "sha512-nGl7LRGrzugTtaFcJMhLbpzJM6XdivmbkdlaGcrk/LXg2KL/YBC6z1g70xh0/al+oFuVFP8N8kiWRucmeEH/qQ==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"json-stringify-safe": "^5.0.1",
+				"minimist": "^1.2.5",
+				"readable-stream": "^3.6.0",
+				"split2": "^3.0.0",
+				"through2": "^4.0.0"
+			},
+			"bin": {
+				"ndjson": "cli.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/ox": {
+			"version": "0.9.6",
+			"resolved": "https://registry.npmjs.org/ox/-/ox-0.9.6.tgz",
+			"integrity": "sha512-8SuCbHPvv2eZLYXrNmC0EC12rdzXQLdhnOMlHDW2wiCPLxBrOOJwX5L5E61by+UjTPOryqQiRSnjIKCI+GykKg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/wevm"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@adraffy/ens-normalize": "^1.11.0",
+				"@noble/ciphers": "^1.3.0",
+				"@noble/curves": "1.9.1",
+				"@noble/hashes": "^1.8.0",
+				"@scure/bip32": "^1.7.0",
+				"@scure/bip39": "^1.6.0",
+				"abitype": "^1.0.9",
+				"eventemitter3": "5.0.1"
+			},
+			"peerDependencies": {
+				"typescript": ">=5.4.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/ox/node_modules/@adraffy/ens-normalize": {
+			"version": "1.11.1",
+			"resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.11.1.tgz",
+			"integrity": "sha512-nhCBV3quEgesuf7c7KYfperqSS14T8bYuvJ8PcLJp6znkZpFc0AuW4qBtr8eKVyPPe/8RSr7sglCWPU5eaxwKQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/ox/node_modules/@noble/ciphers": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
+			"integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/ox/node_modules/@noble/curves": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.9.1.tgz",
+			"integrity": "sha512-k11yZxZg+t+gWvBbIswW0yoJlu8cHOC7dhunwOzoWH/mXGBiYyR4YY6hAEK/3EUs4UpB8la1RfdRpeGsFHkWsA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "1.8.0"
+			},
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/ox/node_modules/@noble/hashes": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+			"integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/ox/node_modules/@scure/base": {
+			"version": "1.2.6",
+			"resolved": "https://registry.npmjs.org/@scure/base/-/base-1.2.6.tgz",
+			"integrity": "sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/ox/node_modules/@scure/bip32": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.7.0.tgz",
+			"integrity": "sha512-E4FFX/N3f4B80AKWp5dP6ow+flD1LQZo/w8UnLGYZO674jS6YnYeepycOOksv+vLPSpgN35wgKgy+ybfTb2SMw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/curves": "~1.9.0",
+				"@noble/hashes": "~1.8.0",
+				"@scure/base": "~1.2.5"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/ox/node_modules/@scure/bip39": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.6.0.tgz",
+			"integrity": "sha512-+lF0BbLiJNwVlev4eKelw1WWLaiKXw7sSl8T6FvBlWkdX+94aGJ4o8XjUdlyhTCjd8c+B3KT3JfS8P0bLRNU6A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "~1.8.0",
+				"@scure/base": "~1.2.5"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/p-map": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
+			"integrity": "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/pretty-format": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+			"integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@jest/schemas": "^29.6.3",
+				"ansi-styles": "^5.0.0",
+				"react-is": "^18.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/prompts": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+			"integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"kleur": "^3.0.3",
+				"sisteransi": "^1.0.5"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/react-is": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+			"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/readdirp": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 14.18.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/resolve-pkg-maps": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+			"integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+			}
+		},
+		"node_modules/resolve.exports": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
+			"integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/rfdc": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+			"integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/safe-buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/semver": {
+			"version": "7.7.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+			"integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/sisteransi": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+			"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/split2": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
+			"integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"readable-stream": "^3.0.0"
+			}
+		},
+		"node_modules/string_decoder": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+			"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"safe-buffer": "~5.2.0"
+			}
+		},
+		"node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/through2": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+			"integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"readable-stream": "3"
+			}
+		},
+		"node_modules/tslib": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+			"integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/tsx": {
+			"version": "4.20.6",
+			"resolved": "https://registry.npmjs.org/tsx/-/tsx-4.20.6.tgz",
+			"integrity": "sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"esbuild": "~0.25.0",
+				"get-tsconfig": "^4.7.5"
+			},
+			"bin": {
+				"tsx": "dist/cli.mjs"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.3"
+			}
+		},
+		"node_modules/tunnel": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
+			"integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=0.6.11 <=0.7.0 || >=0.7.3"
+			}
+		},
+		"node_modules/typescript": {
+			"version": "5.8.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+			"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=14.17"
+			}
+		},
+		"node_modules/undici": {
+			"version": "5.29.0",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz",
+			"integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@fastify/busboy": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.0"
+			}
+		},
+		"node_modules/undici-types": {
+			"version": "6.21.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+			"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/viem": {
+			"version": "2.39.3",
+			"resolved": "https://registry.npmjs.org/viem/-/viem-2.39.3.tgz",
+			"integrity": "sha512-s11rPQRvUEdc5qHK3xT4fIk4qvgPAaLwaTFq+EbFlcJJD+Xn3R4mc9H6B6fquEiHl/mdsdbG/uKCnYpoNtHNHw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/wevm"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@noble/curves": "1.9.1",
+				"@noble/hashes": "1.8.0",
+				"@scure/bip32": "1.7.0",
+				"@scure/bip39": "1.6.0",
+				"abitype": "1.1.0",
+				"isows": "1.0.7",
+				"ox": "0.9.6",
+				"ws": "8.18.3"
+			},
+			"peerDependencies": {
+				"typescript": ">=5.0.4"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/viem/node_modules/@noble/curves": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.9.1.tgz",
+			"integrity": "sha512-k11yZxZg+t+gWvBbIswW0yoJlu8cHOC7dhunwOzoWH/mXGBiYyR4YY6hAEK/3EUs4UpB8la1RfdRpeGsFHkWsA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "1.8.0"
+			},
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/viem/node_modules/@noble/hashes": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+			"integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/viem/node_modules/@scure/base": {
+			"version": "1.2.6",
+			"resolved": "https://registry.npmjs.org/@scure/base/-/base-1.2.6.tgz",
+			"integrity": "sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/viem/node_modules/@scure/bip32": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/@scure/bip32/-/bip32-1.7.0.tgz",
+			"integrity": "sha512-E4FFX/N3f4B80AKWp5dP6ow+flD1LQZo/w8UnLGYZO674jS6YnYeepycOOksv+vLPSpgN35wgKgy+ybfTb2SMw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/curves": "~1.9.0",
+				"@noble/hashes": "~1.8.0",
+				"@scure/base": "~1.2.5"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/viem/node_modules/@scure/bip39": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.6.0.tgz",
+			"integrity": "sha512-+lF0BbLiJNwVlev4eKelw1WWLaiKXw7sSl8T6FvBlWkdX+94aGJ4o8XjUdlyhTCjd8c+B3KT3JfS8P0bLRNU6A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "~1.8.0",
+				"@scure/base": "~1.2.5"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/viem/node_modules/ws": {
+			"version": "8.18.3",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+			"integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/ws": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+			"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/zod": {
+			"version": "3.25.76",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+			"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
+			}
+		}
+	}
 }
diff --git a/hardhat-node-test/package.json b/hardhat-node-test/package.json
index d853ec8..a334806 100644
--- a/hardhat-node-test/package.json
+++ b/hardhat-node-test/package.json
@@ -13,5 +13,8 @@
 		"hardhat": "^3.0.15",
 		"typescript": "~5.8.0",
 		"viem": "^2.39.3"
+	},
+	"dependencies": {
+		"@openzeppelin/contracts": "^5.4.0"
 	}
 }
diff --git a/hardhat-node-test/test/OpenScanPayment.ts b/hardhat-node-test/test/OpenScanPayment.ts
new file mode 100644
index 0000000..0404d9a
--- /dev/null
+++ b/hardhat-node-test/test/OpenScanPayment.ts
@@ -0,0 +1,142 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import { network } from "hardhat";
+import { parseEther, decodeFunctionData, getAddress } from "viem";
+
+describe("OpenScanPayment", async function () {
+  const { viem } = await network.connect();
+  const publicClient = await viem.getPublicClient();
+  const [deployer, payer] = await viem.getWalletClients();
+
+  it("Should deploy with deployer as owner", async function () {
+    const payment = await viem.deployContract("OpenScanPayment", [deployer.account.address]);
+    const owner = await payment.read.owner();
+    assert.equal(owner.toLowerCase(), deployer.account.address.toLowerCase());
+  });
+
+  it("Should emit PaymentReceived event on pay()", async function () {
+    const payment = await viem.deployContract("OpenScanPayment", [deployer.account.address]);
+    const amount = parseEther("1");
+
+    await viem.assertions.emitWithArgs(
+      payment.write.pay({ value: amount, account: payer.account }),
+      payment,
+      "PaymentReceived",
+      [getAddress(payer.account.address), amount],
+    );
+  });
+
+  it("Should revert pay() with zero value", async function () {
+    const payment = await viem.deployContract("OpenScanPayment", [deployer.account.address]);
+
+    await assert.rejects(
+      payment.write.pay({ value: 0n, account: payer.account }),
+      /payment must be greater than zero/,
+    );
+  });
+
+  it("Should forward ETH to owner on pay()", async function () {
+    const payment = await viem.deployContract("OpenScanPayment", [deployer.account.address]);
+    const amount = parseEther("1");
+
+    const ownerBalanceBefore = await publicClient.getBalance({
+      address: deployer.account.address,
+    });
+
+    await payment.write.pay({ value: amount, account: payer.account });
+
+    const ownerBalanceAfter = await publicClient.getBalance({
+      address: deployer.account.address,
+    });
+
+    assert.equal(ownerBalanceAfter - ownerBalanceBefore, amount);
+  });
+
+  it("Should emit DonationReceived event on donate()", async function () {
+    const payment = await viem.deployContract("OpenScanPayment", [deployer.account.address]);
+    const amount = parseEther("0.5");
+    const message = "Thanks for OpenScan!";
+
+    await viem.assertions.emitWithArgs(
+      payment.write.donate([message], { value: amount, account: payer.account }),
+      payment,
+      "DonationReceived",
+      [getAddress(payer.account.address), amount],
+    );
+  });
+
+  it("Should revert donate() with zero value", async function () {
+    const payment = await viem.deployContract("OpenScanPayment", [deployer.account.address]);
+
+    await assert.rejects(
+      payment.write.donate(["Hello"], { value: 0n, account: payer.account }),
+      /donation must be greater than zero/,
+    );
+  });
+
+  it("Should store message in calldata on donate()", async function () {
+    const payment = await viem.deployContract("OpenScanPayment", [deployer.account.address]);
+    const amount = parseEther("0.1");
+    const message = "Hello from donor!";
+
+    const txHash = await payment.write.donate([message], {
+      value: amount,
+      account: payer.account,
+    });
+
+    const tx = await publicClient.getTransaction({ hash: txHash });
+
+    // Decode the calldata to extract the message
+    const decoded = decodeFunctionData({
+      abi: payment.abi,
+      data: tx.input,
+    });
+
+    assert.equal(decoded.functionName, "donate");
+    assert.equal((decoded.args as [string])[0], message);
+  });
+
+  it("Should allow owner to executeCall", async function () {
+    const payment = await viem.deployContract("OpenScanPayment", [deployer.account.address]);
+
+    // Deploy a counter to test executeCall
+    const counter = await viem.deployContract("Counter");
+    const initialValue = await counter.read.x();
+
+    // Encode the inc() call
+    const { encodeFunctionData } = await import("viem");
+    const callData = encodeFunctionData({
+      abi: counter.abi,
+      functionName: "inc",
+      args: [],
+    });
+
+    // Execute via payment contract
+    await payment.write.executeCall([counter.address, callData], {
+      account: deployer.account,
+    });
+
+    const newValue = await counter.read.x();
+    assert.equal(newValue, initialValue + 1n);
+  });
+
+  it("Should revert executeCall for non-owner", async function () {
+    const payment = await viem.deployContract("OpenScanPayment", [deployer.account.address]);
+    const counter = await viem.deployContract("Counter");
+
+    const { encodeFunctionData } = await import("viem");
+    const callData = encodeFunctionData({
+      abi: counter.abi,
+      functionName: "inc",
+      args: [],
+    });
+
+    await assert.rejects(
+      payment.write.executeCall([counter.address, callData], {
+        account: payer.account,
+      }),
+      /OwnableUnauthorizedAccount/,
+    );
+  });
+});
diff --git a/package-lock.json b/package-lock.json
index d6933d7..8b878b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,9 +14,11 @@
 				"@testing-library/react": "^16.2.0",
 				"@testing-library/user-event": "^13.5.0",
 				"ethers": "^6.14.4",
+				"explorer-network-connectors": "^0.1.0",
 				"jszip": "^3.10.1",
 				"react": "^19.1.0",
 				"react-dom": "^19.1.0",
+				"react-markdown": "^10.1.0",
 				"react-router-dom": "^7.4.1",
 				"vitest": "^4.0.14",
 				"wagmi": "^2.15.6",
@@ -27,6 +29,7 @@
 				"@babel/preset-env": "^7.23.1",
 				"@babel/preset-react": "^7.22.15",
 				"@biomejs/biome": "2.3.7",
+				"@playwright/test": "^1.57.0",
 				"@svgr/webpack": "^8.1.0",
 				"@types/react": "^19.1.8",
 				"@types/react-dom": "^19.1.6",
@@ -43,6 +46,15 @@
 				"webpack-dev-server": "^4.15.1"
 			}
 		},
+		"../explorer-network-connectors": {
+			"version": "0.0.1",
+			"extraneous": true,
+			"devDependencies": {
+				"@tsconfig/node24": "^24.0.3",
+				"@types/node": "^24.10.0",
+				"typescript": "^5.9.3"
+			}
+		},
 		"node_modules/@acemir/cssom": {
 			"version": "0.9.24",
 			"resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.24.tgz",
@@ -182,6 +194,7 @@
 			"integrity": "sha512-bXYxrXFubeYdvB0NhD/NBB3Qi6aZeV20GOWVI47t2dkecCEoneR4NPVcb7abpXDEvejgrUfFtG6vG/zxAKmg+g==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.0",
 				"@babel/code-frame": "^7.27.1",
@@ -1826,7 +1839,6 @@
 			"resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.3.7.tgz",
 			"integrity": "sha512-CTbAS/jNAiUc6rcq94BrTB8z83O9+BsgWj2sBCQg9rD6Wkh2gjfR87usjx0Ncx0zGXP1NKgT7JNglay5Zfs9jw==",
 			"dev": true,
-			"license": "MIT OR Apache-2.0",
 			"bin": {
 				"biome": "bin/biome"
 			},
@@ -2072,6 +2084,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=18"
 			},
@@ -2115,6 +2128,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=18"
 			}
@@ -3104,6 +3118,7 @@
 			"resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
 			"integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": "^14.21.3 || >=16"
 			},
@@ -3145,6 +3160,22 @@
 				"url": "https://paulmillr.com/funding/"
 			}
 		},
+		"node_modules/@playwright/test": {
+			"version": "1.57.0",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
+			"integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright": "1.57.0"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@rainbow-me/rainbowkit": {
 			"version": "2.2.8",
 			"resolved": "https://registry.npmjs.org/@rainbow-me/rainbowkit/-/rainbowkit-2.2.8.tgz",
@@ -3616,6 +3647,7 @@
 			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
 			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=8.3.0"
 			},
@@ -4261,6 +4293,7 @@
 			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
 			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=8.3.0"
 			},
@@ -4684,6 +4717,7 @@
 			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
 			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=8.3.0"
 			},
@@ -5232,6 +5266,7 @@
 			"integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/core": "^7.21.3",
 				"@svgr/babel-preset": "8.1.0",
@@ -5365,7 +5400,6 @@
 			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.0.tgz",
 			"integrity": "sha512-lFsd8NBhkh26vzaq8uOOM2o3r4NtJros7kASI+TTMBmKT8C43HVN/2mOI9PFX9kzmxLThBzOLa4NI8ORhX8N9g==",
 			"license": "MIT",
-			"peer": true,
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
@@ -5393,6 +5427,7 @@
 			"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
 			"integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/code-frame": "^7.10.4",
 				"@babel/runtime": "^7.12.5",
@@ -5600,6 +5635,15 @@
 			"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
 			"license": "MIT"
 		},
+		"node_modules/@types/estree-jsx": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+			"integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "*"
+			}
+		},
 		"node_modules/@types/express": {
 			"version": "4.17.23",
 			"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.23.tgz",
@@ -5639,6 +5683,15 @@
 				"@types/send": "*"
 			}
 		},
+		"node_modules/@types/hast": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+			"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
 		"node_modules/@types/html-minifier-terser": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -5670,6 +5723,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/mdast": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
 		"node_modules/@types/mime": {
 			"version": "1.3.5",
 			"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -5689,6 +5751,7 @@
 			"integrity": "sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg==",
 			"devOptional": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"undici-types": "~7.8.0"
 			}
@@ -5721,8 +5784,8 @@
 			"version": "19.1.8",
 			"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
 			"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
-			"devOptional": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"csstype": "^3.0.2"
 			}
@@ -5733,6 +5796,7 @@
 			"integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
 			"devOptional": true,
 			"license": "MIT",
+			"peer": true,
 			"peerDependencies": {
 				"@types/react": "^19.0.0"
 			}
@@ -5793,6 +5857,18 @@
 			"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
 			"license": "MIT"
 		},
+		"node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
+		"node_modules/@ungap/structured-clone": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+			"integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+			"license": "ISC"
+		},
 		"node_modules/@vanilla-extract/css": {
 			"version": "1.17.3",
 			"resolved": "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.17.3.tgz",
@@ -6337,6 +6413,7 @@
 			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
 			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=8.3.0"
 			},
@@ -6358,6 +6435,7 @@
 			"resolved": "https://registry.npmjs.org/@wagmi/core/-/core-2.17.3.tgz",
 			"integrity": "sha512-fgZR9fAiCFtGaosTspkTx5lidccq9Z5xRWOk1HG0VfB6euQGw2//Db7upiP4uQ7DPst2YS9yQN2A1m9+iJLYCw==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"eventemitter3": "5.0.1",
 				"mipd": "0.0.7",
@@ -6890,6 +6968,7 @@
 			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"fast-deep-equal": "^3.1.3",
 				"fast-uri": "^3.0.1",
@@ -7107,6 +7186,16 @@
 				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
 			}
 		},
+		"node_modules/bail": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+			"integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -7299,6 +7388,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"caniuse-lite": "^1.0.30001718",
 				"electron-to-chromium": "^1.5.160",
@@ -7358,6 +7448,7 @@
 			"integrity": "sha512-WDtdLmJvAuNNPzByAYpRo2rF1Mmradw6gvWsQKf63476DDXmomT9zUiGypLcG4ibIM67vhAj8jJRdbmEws2Aqw==",
 			"hasInstallScript": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"node-gyp-build": "^4.3.0"
 			},
@@ -7491,6 +7582,16 @@
 				"sha.js": "^2.4.11"
 			}
 		},
+		"node_modules/ccount": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+			"integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/chai": {
 			"version": "6.2.1",
 			"resolved": "https://registry.npmjs.org/chai/-/chai-6.2.1.tgz",
@@ -7516,6 +7617,46 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
+		"node_modules/character-entities": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+			"integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-html4": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+			"integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-legacy": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+			"integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-reference-invalid": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+			"integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/chokidar": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -7614,6 +7755,16 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/commander": {
 			"version": "8.3.0",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -7850,6 +8001,7 @@
 			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.1.0.tgz",
 			"integrity": "sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"node-fetch": "^2.7.0"
 			}
@@ -8191,6 +8343,19 @@
 			"devOptional": true,
 			"license": "MIT"
 		},
+		"node_modules/decode-named-character-reference": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
+			"integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==",
+			"license": "MIT",
+			"dependencies": {
+				"character-entities": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/decode-uri-component": {
 			"version": "0.2.2",
 			"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
@@ -8339,6 +8504,19 @@
 			"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
 			"license": "MIT"
 		},
+		"node_modules/devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/dijkstrajs": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
@@ -8511,6 +8689,7 @@
 			"resolved": "https://registry.npmjs.org/eciesjs/-/eciesjs-0.4.15.tgz",
 			"integrity": "sha512-r6kEJXDKecVOCj2nLMuXK/FCPeurW33+3JRpfXVbjLja3XUYFfD9I/JBreH6sUyzcm3G/YQboBjMla6poKeSdA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@ecies/ciphers": "^0.2.3",
 				"@noble/ciphers": "^1.3.0",
@@ -8853,6 +9032,16 @@
 				"node": ">=4.0"
 			}
 		},
+		"node_modules/estree-util-is-identifier-name": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+			"integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/estree-walker": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -9061,7 +9250,8 @@
 			"version": "6.4.9",
 			"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz",
 			"integrity": "sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/eventemitter3": {
 			"version": "5.0.1",
@@ -9111,6 +9301,11 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/explorer-network-connectors": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/explorer-network-connectors/-/explorer-network-connectors-0.1.0.tgz",
+			"integrity": "sha512-QrlExGXXZR9Zf9h58ZO2MDouMdjIGEHBnxo6h/EmPFGOXZ727kTTkqThCMEnlx2B5P7DzYcEZg9oxdE7EpQPbg=="
+		},
 		"node_modules/express": {
 			"version": "4.21.2",
 			"resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
@@ -9185,6 +9380,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/extend": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+			"license": "MIT"
+		},
 		"node_modules/extension-port-stream": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/extension-port-stream/-/extension-port-stream-3.0.0.tgz",
@@ -9687,6 +9888,46 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/hast-util-to-jsx-runtime": {
+			"version": "2.3.6",
+			"resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+			"integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"devlop": "^1.0.0",
+				"estree-util-is-identifier-name": "^3.0.0",
+				"hast-util-whitespace": "^3.0.0",
+				"mdast-util-mdx-expression": "^2.0.0",
+				"mdast-util-mdx-jsx": "^3.0.0",
+				"mdast-util-mdxjs-esm": "^2.0.0",
+				"property-information": "^7.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"style-to-js": "^1.0.0",
+				"unist-util-position": "^5.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-whitespace": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/he": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -9795,6 +10036,16 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/html-url-attributes": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+			"integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/html-webpack-plugin": {
 			"version": "5.6.3",
 			"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz",
@@ -9994,7 +10245,8 @@
 			"version": "6.2.2",
 			"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.2.tgz",
 			"integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
-			"license": "Apache-2.0"
+			"license": "Apache-2.0",
+			"peer": true
 		},
 		"node_modules/ieee754": {
 			"version": "1.2.1",
@@ -10175,6 +10427,12 @@
 			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
 			"license": "ISC"
 		},
+		"node_modules/inline-style-parser": {
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+			"integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+			"license": "MIT"
+		},
 		"node_modules/interpret": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
@@ -10204,6 +10462,30 @@
 				"url": "https://github.com/sponsors/brc-dd"
 			}
 		},
+		"node_modules/is-alphabetical": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+			"integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-alphanumerical": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+			"integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+			"license": "MIT",
+			"dependencies": {
+				"is-alphabetical": "^2.0.0",
+				"is-decimal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/is-arguments": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
@@ -10268,6 +10550,16 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/is-decimal": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+			"integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/is-docker": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -10334,6 +10626,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/is-hexadecimal": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+			"integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/is-number": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -10529,6 +10831,7 @@
 			"integrity": "sha512-454TI39PeRDW1LgpyLPyURtB4Zx1tklSr6+OFOipsxGUH1WMTvk6C65JQdrj455+DP2uJ1+veBEHTGFKWVLFoA==",
 			"devOptional": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@acemir/cssom": "^0.9.23",
 				"@asamuzakjp/dom-selector": "^6.7.4",
@@ -10826,12 +11129,21 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/longest-streak": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+			"integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/loose-envify": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
 			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"js-tokens": "^3.0.0 || ^4.0.0"
 			},
@@ -10886,6 +11198,159 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/mdast-util-from-markdown": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
+			"integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"@types/unist": "^3.0.0",
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-to-string": "^4.0.0",
+				"micromark": "^4.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-decode-string": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-mdx-expression": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+			"integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree-jsx": "^1.0.0",
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-mdx-jsx": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+			"integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree-jsx": "^1.0.0",
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@types/unist": "^3.0.0",
+				"ccount": "^2.0.0",
+				"devlop": "^1.1.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0",
+				"parse-entities": "^4.0.0",
+				"stringify-entities": "^4.0.0",
+				"unist-util-stringify-position": "^4.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-mdxjs-esm": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+			"integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree-jsx": "^1.0.0",
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-phrasing": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+			"integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"unist-util-is": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-hast": {
+			"version": "13.2.1",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+			"integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"trim-lines": "^3.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-markdown": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+			"integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"@types/unist": "^3.0.0",
+				"longest-streak": "^3.0.0",
+				"mdast-util-phrasing": "^4.0.0",
+				"mdast-util-to-string": "^4.0.0",
+				"micromark-util-classify-character": "^2.0.0",
+				"micromark-util-decode-string": "^2.0.0",
+				"unist-util-visit": "^5.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-string": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+			"integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -10958,14 +11423,456 @@
 			"integrity": "sha512-/0LLxhzP0tfiR5hcQebtudP56gUurs2CLkGarnCiB/OqEyUFQ6U3paQi/tgLv0hBJYt2rnr9MNpxz4fiiugstg==",
 			"license": "MIT"
 		},
-		"node_modules/micromatch": {
-			"version": "4.0.8",
-			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"braces": "^3.0.3",
+		"node_modules/micromark": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+			"integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@types/debug": "^4.0.0",
+				"debug": "^4.0.0",
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-core-commonmark": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-combine-extensions": "^2.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-resolve-all": "^2.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"micromark-util-subtokenize": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-core-commonmark": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+			"integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-factory-destination": "^2.0.0",
+				"micromark-factory-label": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-factory-title": "^2.0.0",
+				"micromark-factory-whitespace": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-classify-character": "^2.0.0",
+				"micromark-util-html-tag-name": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-resolve-all": "^2.0.0",
+				"micromark-util-subtokenize": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-destination": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+			"integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-label": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+			"integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-space": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+			"integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-title": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+			"integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-whitespace": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+			"integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-character": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+			"integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-chunked": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+			"integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-classify-character": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+			"integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-combine-extensions": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+			"integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-decode-numeric-character-reference": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+			"integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-decode-string": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+			"integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"decode-named-character-reference": "^1.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-encode": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+			"integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-html-tag-name": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+			"integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-normalize-identifier": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+			"integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-resolve-all": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+			"integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-sanitize-uri": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+			"integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-subtokenize": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+			"integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-symbol": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+			"integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-types": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+			"integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromatch": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"braces": "^3.0.3",
 				"picomatch": "^2.3.1"
 			},
 			"engines": {
@@ -11599,6 +12506,31 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/parse-entities": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+			"integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"character-entities-legacy": "^3.0.0",
+				"character-reference-invalid": "^2.0.0",
+				"decode-named-character-reference": "^1.0.0",
+				"is-alphanumerical": "^2.0.0",
+				"is-decimal": "^2.0.0",
+				"is-hexadecimal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/parse-entities/node_modules/@types/unist": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
+		},
 		"node_modules/parse-json": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -11806,6 +12738,53 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/playwright": {
+			"version": "1.57.0",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
+			"integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright-core": "1.57.0"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"fsevents": "2.3.2"
+			}
+		},
+		"node_modules/playwright-core": {
+			"version": "1.57.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
+			"integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"bin": {
+				"playwright-core": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/playwright/node_modules/fsevents": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
 		"node_modules/pngjs": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
@@ -11852,6 +12831,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"nanoid": "^3.3.11",
 				"picocolors": "^1.1.1",
@@ -12004,6 +12984,16 @@
 			"integrity": "sha512-du4wfLyj4yCZq1VupnVSZmRsPJsNuxoDQFdCFHLaYiEbFBD7QE0a+I4D7hOxrVnh78QE/YipFAj9lXHiXocV+Q==",
 			"license": "MIT"
 		},
+		"node_modules/property-information": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+			"integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/proxy-addr": {
 			"version": "2.0.7",
 			"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -12032,8 +13022,7 @@
 			"version": "2.5.1",
 			"resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.5.1.tgz",
 			"integrity": "sha512-oyfc0Tx87Cpwva5ZXezSp5V9vht1c7dZBhvuV/y3ctkgMVUmiAGDVeeB0dKhGSyT0v1ZTEQYpe/RXlBVBNuCLA==",
-			"license": "MIT",
-			"peer": true
+			"license": "MIT"
 		},
 		"node_modules/pump": {
 			"version": "3.0.3",
@@ -12172,6 +13161,7 @@
 			"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
 			"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -12181,6 +13171,7 @@
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
 			"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"scheduler": "^0.26.0"
 			},
@@ -12194,6 +13185,33 @@
 			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
 			"license": "MIT"
 		},
+		"node_modules/react-markdown": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+			"integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"hast-util-to-jsx-runtime": "^2.0.0",
+				"html-url-attributes": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"remark-parse": "^11.0.0",
+				"remark-rehype": "^11.0.0",
+				"unified": "^11.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			},
+			"peerDependencies": {
+				"@types/react": ">=18",
+				"react": ">=18"
+			}
+		},
 		"node_modules/react-remove-scroll": {
 			"version": "2.6.2",
 			"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz",
@@ -12306,6 +13324,7 @@
 			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
 			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"inherits": "^2.0.3",
 				"string_decoder": "^1.1.1",
@@ -12444,6 +13463,39 @@
 				"node": ">= 0.10"
 			}
 		},
+		"node_modules/remark-parse": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+			"integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-rehype": {
+			"version": "11.1.2",
+			"resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+			"integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"unified": "^11.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/renderkid": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
@@ -13098,6 +14150,7 @@
 			"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
 			"integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@socket.io/component-emitter": "~3.1.0",
 				"debug": "~4.3.2",
@@ -13206,6 +14259,16 @@
 				"source-map": "^0.6.0"
 			}
 		},
+		"node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/spdy": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -13316,6 +14379,20 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/stringify-entities": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+			"integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+			"license": "MIT",
+			"dependencies": {
+				"character-entities-html4": "^2.0.0",
+				"character-entities-legacy": "^3.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/strip-ansi": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -13367,6 +14444,24 @@
 				"webpack": "^5.27.0"
 			}
 		},
+		"node_modules/style-to-js": {
+			"version": "1.1.21",
+			"resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+			"integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+			"license": "MIT",
+			"dependencies": {
+				"style-to-object": "1.0.14"
+			}
+		},
+		"node_modules/style-to-object": {
+			"version": "1.0.14",
+			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+			"integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+			"license": "MIT",
+			"dependencies": {
+				"inline-style-parser": "0.2.7"
+			}
+		},
 		"node_modules/superstruct": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/superstruct/-/superstruct-1.0.4.tgz",
@@ -13543,6 +14638,7 @@
 			"integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
 			"devOptional": true,
 			"license": "BSD-2-Clause",
+			"peer": true,
 			"dependencies": {
 				"@jridgewell/source-map": "^0.3.3",
 				"acorn": "^8.14.0",
@@ -13664,6 +14760,7 @@
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
 			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=12"
 			},
@@ -13742,6 +14839,26 @@
 			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
 			"license": "MIT"
 		},
+		"node_modules/trim-lines": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+			"integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/trough": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+			"integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/ts-loader": {
 			"version": "9.5.2",
 			"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.2.tgz",
@@ -13919,6 +15036,105 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/unified": {
+			"version": "11.0.5",
+			"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+			"integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"bail": "^2.0.0",
+				"devlop": "^1.0.0",
+				"extend": "^3.0.0",
+				"is-plain-obj": "^4.0.0",
+				"trough": "^2.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unified/node_modules/is-plain-obj": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+			"integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/unist-util-is": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+			"integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+			"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-stringify-position": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+			"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+			"integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0",
+				"unist-util-visit-parents": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+			"integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/unpipe": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -14106,6 +15322,7 @@
 			"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
 			"integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
 			"license": "MIT",
+			"peer": true,
 			"peerDependencies": {
 				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
 			}
@@ -14116,6 +15333,7 @@
 			"integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
 			"hasInstallScript": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"node-gyp-build": "^4.3.0"
 			},
@@ -14173,7 +15391,6 @@
 			"resolved": "https://registry.npmjs.org/valtio/-/valtio-1.11.2.tgz",
 			"integrity": "sha512-1XfIxnUXzyswPAPXo1P3Pdx2mq/pIqZICkWN60Hby0d9Iqb+MEIpqgYVlbflvHdrp2YR/q3jyKWRPJJ100yxaw==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"proxy-compare": "2.5.1",
 				"use-sync-external-store": "1.2.0"
@@ -14199,7 +15416,6 @@
 			"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
 			"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
 			"license": "MIT",
-			"peer": true,
 			"peerDependencies": {
 				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
 			}
@@ -14214,6 +15430,34 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/vfile": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+			"integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-message": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+			"integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/viem": {
 			"version": "2.31.4",
 			"resolved": "https://registry.npmjs.org/viem/-/viem-2.31.4.tgz",
@@ -14225,6 +15469,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@noble/curves": "1.9.2",
 				"@noble/hashes": "1.8.0",
@@ -14333,6 +15578,7 @@
 			"resolved": "https://registry.npmjs.org/vite/-/vite-7.2.4.tgz",
 			"integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.25.0",
 				"fdir": "^6.5.0",
@@ -14424,6 +15670,7 @@
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
 			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=12"
 			},
@@ -14538,6 +15785,7 @@
 			"resolved": "https://registry.npmjs.org/wagmi/-/wagmi-2.15.6.tgz",
 			"integrity": "sha512-tR4tm+7eE0UloQe1oi4hUIjIDyjv5ImQlzq/QcvvfJYWF/EquTfGrmht6+nTYGCIeSzeEvbK90KgWyNqa+HD7Q==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@wagmi/connectors": "5.8.5",
 				"@wagmi/core": "2.17.3",
@@ -14606,6 +15854,7 @@
 			"integrity": "sha512-brOPwM3JnmOa+7kd3NsmOUOwbDAj8FT9xDsG3IW0MgbN9yZV7Oi/s/+MNQ/EcSMqw7qfoRyXPoeEWT8zLVdVGg==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/eslint-scope": "^3.7.7",
 				"@types/estree": "^1.0.6",
@@ -14654,6 +15903,7 @@
 			"integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@discoveryjs/json-ext": "^0.5.0",
 				"@webpack-cli/configtest": "^2.1.1",
@@ -15023,6 +16273,7 @@
 			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.2.tgz",
 			"integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=10.0.0"
 			},
@@ -15223,6 +16474,16 @@
 					"optional": true
 				}
 			}
+		},
+		"node_modules/zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
 		}
 	}
 }
diff --git a/package.json b/package.json
index 4d1e7bc..e4c1064 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,11 @@
 		"@testing-library/react": "^16.2.0",
 		"@testing-library/user-event": "^13.5.0",
 		"ethers": "^6.14.4",
+		"explorer-network-connectors": "^0.1.0",
 		"jszip": "^3.10.1",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
+		"react-markdown": "^10.1.0",
 		"react-router-dom": "^7.4.1",
 		"vitest": "^4.0.14",
 		"wagmi": "^2.15.6",
@@ -19,12 +21,20 @@
 	},
 	"scripts": {
 		"start": "NODE_ENV=development webpack serve --config webpack.config.js --mode development",
-		"build": "NODE_ENV=production webpack --config webpack.config.js --mode production",
-    	"test": "npx vitest",
+		"build:production": "bash ./scripts/build-production.sh",
+		"build:staging": "bash ./scripts/build-staging.sh",
+		"test": "npx vitest",
 		"test:run": "npx vitest run",
+		"test:e2e": "playwright test",
+		"test:e2e:ui": "playwright test --ui",
+		"test:e2e:debug": "playwright test --debug",
 		"dev": "bash scripts/run-test-env.sh",
 		"typecheck": "tsc --noEmit",
-		"format:fix": "npx @biomejs/biome format --write"
+		"format": "npx @biomejs/biome format",
+		"format:fix": "npx @biomejs/biome format --write",
+		"lint": "npx @biomejs/biome lint",
+		"lint:fix": "npx @biomejs/biome lint --write --max-diagnostics 1024",
+		"check": "npx @biomejs/biome check --max-diagnostics 1024"
 	},
 	"eslintConfig": {
 		"extends": [
@@ -49,6 +59,7 @@
 		"@babel/preset-env": "^7.23.1",
 		"@babel/preset-react": "^7.22.15",
 		"@biomejs/biome": "2.3.7",
+		"@playwright/test": "^1.57.0",
 		"@svgr/webpack": "^8.1.0",
 		"@types/react": "^19.1.8",
 		"@types/react-dom": "^19.1.6",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..40caa93
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e/tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 3 : 1,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  timeout: 60000,
+  use: {
+    baseURL: "http://localhost:3030",
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    headless: true,
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+  webServer: {
+    command: "npm start",
+    url: "http://localhost:3030",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+});
diff --git a/public/index.html b/public/index.html
index 6c3b021..1c920f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,13 +9,13 @@
     content=""
     />
 
-    <link id="favicon" rel="icon" href="/openscan-logo.png" />
+    <link id="favicon" rel="icon" href="<%= htmlWebpackPlugin.options.publicPath %>openscan-logo.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&display=swap" rel="stylesheet">
 
-    <link id="apple-touch-icon" rel="apple-touch-icon" href="/openscan-logo.png" />
-    <link id="manifest" rel="manifest" href="/manifest.json" />
+    <link id="apple-touch-icon" rel="apple-touch-icon" href="<%= htmlWebpackPlugin.options.publicPath %>openscan-logo.png" />
+    <link id="manifest" rel="manifest" href="<%= htmlWebpackPlugin.options.publicPath %>manifest.json" />
 
     <title>Openscan</title>
   </head>
diff --git a/scripts/build-production.sh b/scripts/build-production.sh
index 22db4e3..2d32298 100755
--- a/scripts/build-production.sh
+++ b/scripts/build-production.sh
@@ -23,7 +23,7 @@ rm -r dist || true
 
 # Build the app
 echo "Building React app on commit $COMMIT_HASH"
-NODE_ENV=production REACT_APP_COMMIT_HASH=$COMMIT_HASH npm run build
+NODE_ENV=production REACT_APP_COMMIT_HASH=$COMMIT_HASH webpack --config webpack.config.js --mode production
 
 echo "Production build completed!"
 echo "Build output is in ./dist/"
diff --git a/scripts/build-staging.sh b/scripts/build-staging.sh
index 53e38dc..f263500 100755
--- a/scripts/build-staging.sh
+++ b/scripts/build-staging.sh
@@ -16,7 +16,6 @@ COMMIT_HASH=$(git rev-parse HEAD)
 
 # Build the app
 echo "Building React app on commit $COMMIT_HASH"
-NODE_ENV=staging REACT_APP_COMMIT_HASH=$COMMIT_HASH npm run build
-
+NODE_ENV=staging REACT_APP_COMMIT_HASH=$COMMIT_HASH webpack --config webpack.config.js --mode production
 echo "Staging build completed!"
 echo "Build output is in ./dist/"
\ No newline at end of file
diff --git a/scripts/run-test-env.sh b/scripts/run-test-env.sh
index 69b5e05..eeaf2b7 100755
--- a/scripts/run-test-env.sh
+++ b/scripts/run-test-env.sh
@@ -96,7 +96,7 @@ echo "✨ Test Environment Ready!"
 echo "================================================"
 echo ""
 echo "📍 Local Test Node: http://127.0.0.1:8545 (Chain ID: 31337)"
-echo "📍 OpenScan:     http://localhost:3000"
+echo "📍 OpenScan:     http://localhost:3030"
 echo ""
 echo "🌐 Available Networks:"
 echo "   - Ethereum Mainnet (Chain ID: 1)"
diff --git a/src/App.tsx b/src/App.tsx
index 02af886..86323fd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,174 +1,211 @@
+import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useCallback, useEffect } from "react";
 import {
-	BrowserRouter as Router,
-	HashRouter,
-	Routes,
-	Route,
-	Navigate,
+  HashRouter,
+  Navigate,
+  Route,
+  BrowserRouter as Router,
+  Routes,
+  useLocation,
+  useNavigate,
 } from "react-router-dom";
-import { useCallback } from "react";
 import { WagmiProvider } from "wagmi";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-// @ts-ignore
-import {
-	RainbowKitProvider,
-	darkTheme,
-	lightTheme,
-} from "@rainbow-me/rainbowkit";
+import { cssVariables, getRainbowKitTheme } from "./theme";
 import { networkConfig } from "./utils/networkConfig";
-import "./styles/rainbowkit.css";
+import { getBaseDomainUrl, getSubdomain, getSubdomainRedirect } from "./utils/subdomainUtils";
+import "@rainbow-me/rainbowkit/styles.css";
 
 // Detect if we're running on GitHub Pages and get the correct basename
 function getBasename(): string {
-	const { hostname, pathname } = window.location;
-
-	// Check if we're on GitHub Pages
-	if (hostname.includes("github.io")) {
-		// Extract repo name from pathname (first segment after domain)
-		const pathSegments = pathname.split("/").filter(Boolean);
-		if (pathSegments.length > 0) {
-			return `/${pathSegments[0]}`;
-		}
-	}
-
-	// For local development or custom domains, no basename needed
-	return "";
+  const { hostname, pathname } = window.location;
+
+  // Check if we're on GitHub Pages
+  if (hostname.includes("github.io")) {
+    // Extract repo name from pathname (first segment after domain)
+    const pathSegments = pathname.split("/").filter(Boolean);
+    if (pathSegments.length > 0) {
+      return `/${pathSegments[0]}`;
+    }
+  }
+
+  // For local development or custom domains, no basename needed
+  return "";
 }
-import Navbar from "./components/common/Navbar";
-import Footer from "./components/common/Footer";
-import NotificationDisplay from "./components/common/NotificationDisplay";
+
 import ErrorBoundary from "./components/common/ErrorBoundary";
+import Footer from "./components/common/Footer";
 import { IsometricBlocks } from "./components/common/IsometricBlocks";
+import NotificationDisplay from "./components/common/NotificationDisplay";
+import Navbar from "./components/navbar";
+import "./styles/base.css";
 import "./styles/styles.css";
 import "./styles/layouts.css";
 import "./styles/components.css";
 import "./styles/tables.css";
 import "./styles/forms.css";
-import { useAppReady, useOnAppReady } from "./hooks/useAppReady";
 import Loading from "./components/common/Loading";
 import {
-	LazyHome,
-	LazyChain,
-	LazyBlocks,
-	LazyBlock,
-	LazyTxs,
-	LazyTx,
-	LazyAddress,
-	LazyMempool,
-	LazySettings,
-	LazyDevTools,
-	LazyAbout,
+  LazyAbout,
+  LazyAddress,
+  LazyBlock,
+  LazyBlocks,
+  LazyChain,
+  LazyDevTools,
+  LazyHome,
+  LazyMempool,
+  LazyProfile,
+  LazySettings,
+  LazySubscriptions,
+  LazySupporters,
+  LazyTokenDetails,
+  LazyTx,
+  LazyTxs,
 } from "./components/LazyComponents";
 import { NotificationProvider } from "./context/NotificationContext";
-import {
-	SettingsProvider,
-	useTheme,
-	useSettings,
-} from "./context/SettingsContext";
+import { SettingsProvider, useSettings, useTheme } from "./context/SettingsContext";
+import { useAppReady, useOnAppReady } from "./hooks/useAppReady";
 
 // Detect GH Pages once
-const isGhPages =
-	typeof window !== "undefined" &&
-	window.location.hostname.includes("github.io");
+const isGhPages = typeof window !== "undefined" && window.location.hostname.includes("github.io");
 
 // Create a client for React Query
 const queryClient = new QueryClient();
 
+// Component that handles subdomain redirects
+function SubdomainRedirect() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    const subdomain = getSubdomain();
+
+    // If there's a subdomain, check if it's valid
+    if (subdomain) {
+      const redirectPath = getSubdomainRedirect();
+
+      if (redirectPath) {
+        // Valid subdomain - redirect to configured path (only on root)
+        if (location.pathname === "/") {
+          navigate(redirectPath, { replace: true });
+        }
+      } else {
+        // Invalid subdomain - redirect to base domain
+        const baseDomainUrl = getBaseDomainUrl();
+        if (baseDomainUrl) {
+          window.location.href = baseDomainUrl;
+        }
+      }
+    }
+  }, [location.pathname, navigate]);
+
+  return null;
+}
+
 // Separate component that uses the theme context
 function AppContent() {
-	const onAppReadyCallback = useCallback(async () => {}, []);
-
-	useOnAppReady(onAppReadyCallback);
-
-	const { fullyReady } = useAppReady();
-	const { isDarkMode } = useTheme(); // Now this is inside ThemeProvider
-	const { settings } = useSettings();
-
-	return (
-		<>
-			{!fullyReady ? (
-				<Loading />
-			) : (
-				<>
-					{/* Background animated blocks - full screen (conditionally rendered) */}
-					{settings.showBackgroundBlocks && (
-						<div className="app-background-blocks">
-							<IsometricBlocks
-								width={window.innerWidth}
-								height={window.innerHeight}
-								cubeSize={32}
-								maxCubes={80}
-								spawnInterval={100}
-							/>
-						</div>
-					)}
-
-					<div className="app-content">
-						<Navbar />
-						<NotificationDisplay />
-						<Routes>
-							<Route path="/" element={<LazyHome />} />
-							<Route path="settings" element={<LazySettings />} />
-							<Route path="about" element={<LazyAbout />} />
-							<Route path="devtools" element={<LazyDevTools />} />
-							<Route path=":chainId" element={<LazyChain />} />
-							<Route path=":chainId/blocks" element={<LazyBlocks />} />
-							<Route path=":chainId/block/:filter" element={<LazyBlock />} />
-							<Route path=":chainId/txs" element={<LazyTxs />} />
-							<Route path=":chainId/tx/:filter" element={<LazyTx />} />
-							<Route
-								path=":chainId/address/:address"
-								element={<LazyAddress />}
-							/>
-							<Route path=":chainId/mempool" element={<LazyMempool />} />
-							<Route path=":chainId/mempool/:filter" element={<LazyTx />} />
-							<Route path="*" element={<Navigate to="/" replace />} />
-						</Routes>
-						<Footer />
-					</div>
-				</>
-			)}
-		</>
-	);
+  const onAppReadyCallback = useCallback(async () => {}, []);
+
+  useOnAppReady(onAppReadyCallback);
+
+  const { fullyReady } = useAppReady();
+  const { settings } = useSettings();
+
+  return (
+    <>
+      {!fullyReady ? (
+        <Loading />
+      ) : (
+        <>
+          {/* Background animated blocks - full screen (conditionally rendered) */}
+          {settings.showBackgroundBlocks && (
+            <div className="app-background-blocks">
+              <IsometricBlocks
+                width={window.innerWidth}
+                height={window.innerHeight}
+                cubeSize={32}
+                maxCubes={80}
+                spawnInterval={100}
+              />
+            </div>
+          )}
+
+          <div className="app-content">
+            <Navbar />
+            <NotificationDisplay />
+            <SubdomainRedirect />
+            <Routes>
+              <Route path="/" element={<LazyHome />} />
+              <Route path="settings" element={<LazySettings />} />
+              <Route path="about" element={<LazyAbout />} />
+              <Route path="devtools" element={<LazyDevTools />} />
+              <Route path="subscriptions" element={<LazySubscriptions />} />
+              <Route path="profile/:profileType/:profileId" element={<LazyProfile />} />
+              <Route path="supporters" element={<LazySupporters />} />
+              <Route path=":networkId" element={<LazyChain />} />
+              <Route path=":networkId/blocks" element={<LazyBlocks />} />
+              <Route path=":networkId/block/:filter" element={<LazyBlock />} />
+              <Route path=":networkId/txs" element={<LazyTxs />} />
+              <Route path=":networkId/tx/:filter" element={<LazyTx />} />
+              <Route path=":networkId/address/:address" element={<LazyAddress />} />
+              <Route path=":networkId/address/:address/:tokenId" element={<LazyTokenDetails />} />
+              <Route path=":networkId/mempool" element={<LazyMempool />} />
+              <Route path=":networkId/mempool/:filter" element={<LazyTx />} />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+            <Footer />
+          </div>
+        </>
+      )}
+    </>
+  );
 }
 
 // Main App component that provides the theme context
 function App() {
-	const BaseRouter = isGhPages ? HashRouter : Router;
-	// IMPORTANT: no basename for HashRouter
-	const basename = isGhPages ? "" : getBasename();
-
-	return (
-		<ErrorBoundary>
-			<WagmiProvider config={networkConfig}>
-				<QueryClientProvider client={queryClient}>
-					<NotificationProvider>
-						<SettingsProvider>
-							<RainbowKitProviderWrapper>
-								<BaseRouter basename={basename}>
-									<AppContent />
-								</BaseRouter>
-							</RainbowKitProviderWrapper>
-						</SettingsProvider>
-					</NotificationProvider>
-				</QueryClientProvider>
-			</WagmiProvider>
-		</ErrorBoundary>
-	);
+  const BaseRouter = isGhPages ? HashRouter : Router;
+  // IMPORTANT: no basename for HashRouter
+  const basename = isGhPages ? "" : getBasename();
+
+  return (
+    <ErrorBoundary>
+      <WagmiProvider config={networkConfig}>
+        <QueryClientProvider client={queryClient}>
+          <NotificationProvider>
+            <SettingsProvider>
+              <RainbowKitProviderWrapper>
+                <BaseRouter basename={basename}>
+                  <AppContent />
+                </BaseRouter>
+              </RainbowKitProviderWrapper>
+            </SettingsProvider>
+          </NotificationProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    </ErrorBoundary>
+  );
 }
 
 // Wrapper component to use theme inside SettingsProvider
-function RainbowKitProviderWrapper({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
-	const { isDarkMode } = useTheme();
-
-	return (
-		<RainbowKitProvider theme={isDarkMode ? darkTheme() : lightTheme()}>
-			{children}
-		</RainbowKitProvider>
-	);
+function RainbowKitProviderWrapper({ children }: { children: React.ReactNode }) {
+  const { isDarkMode } = useTheme();
+
+  // Inject CSS variables and set data-theme attribute
+  useEffect(() => {
+    // Inject CSS variables if not already present
+    const styleId = "openscan-theme-variables";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = cssVariables;
+      document.head.appendChild(style);
+    }
+
+    // Set data-theme attribute for CSS variable switching
+    document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
+  }, [isDarkMode]);
+
+  return <RainbowKitProvider theme={getRainbowKitTheme(isDarkMode)}>{children}</RainbowKitProvider>;
 }
 
 export default App;
diff --git a/src/assets/arbitrum-logo.svg b/src/assets/arbitrum-logo.svg
deleted file mode 100644
index dd17407..0000000
--- a/src/assets/arbitrum-logo.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2500 2500" style="enable-background:new 0 0 2500 2500;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;}
-	.st1{fill:#213147;}
-	.st2{fill:#12AAFF;}
-	.st3{fill:#9DCCED;}
-	.st4{fill:#FFFFFF;}
-</style>
-<g id="Layer_x0020_1">
-	<g id="_2405588477232">
-		<rect class="st0" width="2500" height="2500"></rect>
-		<g>
-			<g>
-				<path class="st1" d="M226,760v980c0,63,33,120,88,152l849,490c54,31,121,31,175,0l849-490c54-31,88-89,88-152V760      c0-63-33-120-88-152l-849-490c-54-31-121-31-175,0L314,608c-54,31-87,89-87,152H226z"></path>
-				<g>
-					<g>
-						<g>
-							<path class="st2" d="M1435,1440l-121,332c-3,9-3,19,0,29l208,571l241-139l-289-793C1467,1422,1442,1422,1435,1440z"></path>
-						</g>
-						<g>
-							<path class="st2" d="M1678,882c-7-18-32-18-39,0l-121,332c-3,9-3,19,0,29l341,935l241-139L1678,883V882z"></path>
-						</g>
-					</g>
-				</g>
-				<g>
-					<path class="st3" d="M1250,155c6,0,12,2,17,5l918,530c11,6,17,18,17,30v1060c0,12-7,24-17,30l-918,530c-5,3-11,5-17,5       s-12-2-17-5l-918-530c-11-6-17-18-17-30V719c0-12,7-24,17-30l918-530c5-3,11-5,17-5l0,0V155z M1250,0c-33,0-65,8-95,25L237,555       c-59,34-95,96-95,164v1060c0,68,36,130,95,164l918,530c29,17,62,25,95,25s65-8,95-25l918-530c59-34,95-96,95-164V719       c0-68-36-130-95-164L1344,25c-29-17-62-25-95-25l0,0H1250z"></path>
-				</g>
-				<polygon class="st1" points="642,2179 727,1947 897,2088 738,2234     "></polygon>
-				<g>
-					<path class="st4" d="M1172,644H939c-17,0-33,11-39,27L401,2039l241,139l550-1507c5-14-5-28-19-28L1172,644z"></path>
-					<path class="st4" d="M1580,644h-233c-17,0-33,11-39,27L738,2233l241,139l620-1701c5-14-5-28-19-28V644z"></path>
-				</g>
-			</g>
-		</g>
-	</g>
-</g>
-</svg>
diff --git a/src/assets/base-logo.svg b/src/assets/base-logo.svg
deleted file mode 100644
index 22d8935..0000000
--- a/src/assets/base-logo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="111" height="111" viewBox="0 0 111 111" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M54.921 110.034C85.359 110.034 110.034 85.402 110.034 55.017C110.034 24.6319 85.359 0 54.921 0C26.0432 0 2.35281 22.1714 0 50.3923H72.8467V59.6416H3.9565e-07C2.35281 87.8625 26.0432 110.034 54.921 110.034Z" fill="#0052FF"/>
-</svg>
diff --git a/src/assets/hardhat-logo.svg b/src/assets/hardhat-logo.svg
deleted file mode 100644
index c7fcb1b..0000000
--- a/src/assets/hardhat-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><defs><linearGradient id="a" x1="10.561" x2="10.561" y1="30.514" y2="6.186" gradientTransform="translate(-2.326 11.158) scale(2.56617)" gradientUnits="userSpaceOnUse"><stop stop-color="#EDCF00"/><stop offset=".33" stop-color="#F0D500"/><stop offset=".77" stop-color="#F9E500"/><stop offset="1" stop-color="#FFF100"/></linearGradient><linearGradient id="b" x1="46.089" x2="46.089" y1="30.692" y2="13.092" gradientTransform="translate(-2.326 11.158) scale(2.56617)" gradientUnits="userSpaceOnUse"><stop stop-color="#EDCF00"/><stop offset=".59" stop-color="#F7E100"/><stop offset="1" stop-color="#FFF100"/></linearGradient><radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="matrix(47.57621 0 0 47.25236 7.172 132.114)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF100"/><stop offset=".23" stop-color="#F9E500"/><stop offset=".67" stop-color="#F0D500"/><stop offset="1" stop-color="#EDCF00"/></radialGradient></defs><path fill="#fff100" d="M127.99 98.893V92.68c0-1.155-1.943-2.256-5.43-3.249l.084-7.732a57.71 57.71 0 0 0-10.588-33.296A58.573 58.573 0 0 0 84.121 27.13l-.25-1.55a4.419 4.419 0 0 0-1.046-2.238 4.483 4.483 0 0 0-2.092-1.337 59.402 59.402 0 0 0-33.167 0c-.814.239-1.54.7-2.1 1.335a4.398 4.398 0 0 0-1.051 2.237l-.24 1.445a58.588 58.588 0 0 0-28.13 21.256A57.734 57.734 0 0 0 5.374 81.697v7.765c-3.439.99-5.356 2.079-5.356 3.226V98.9a1.514 1.514 0 0 0 .224 1.047 15.017 15.017 0 0 1 5.766-2.604 113.37 113.37 0 0 1 16.174-2.684 10.906 10.906 0 0 1 8.487 2.712 22.967 22.967 0 0 0 15.42 5.933h35.834a22.95 22.95 0 0 0 15.417-5.938 10.914 10.914 0 0 1 8.489-2.743A114.1 114.1 0 0 1 122 97.297a13.498 13.498 0 0 1 5.466 2.373c.09.09.2.17.277.254a1.54 1.54 0 0 0 .246-1.031z"/><path fill="url(#a)" d="M30.752 85.818a136.171 136.171 0 0 1-.077-4.293c.018-21.597 5.112-40.966 13.503-54.493a58.588 58.588 0 0 0-28.13 21.253A57.734 57.734 0 0 0 5.373 81.697v7.765a143.449 143.449 0 0 1 25.38-3.644Z"/><path fill="url(#b)" d="M122.639 81.697a57.546 57.546 0 0 0-13.383-36.943 119.455 119.455 0 0 1 5.548 36.76c0 2.105-.056 4.183-.153 6.25a73.11 73.11 0 0 1 7.888 1.662l.097-7.73z"/><path fill="url(#c)" d="M122 97.32a113.49 113.49 0 0 0-16.175-2.685 10.911 10.911 0 0 0-8.488 2.726 22.95 22.95 0 0 1-15.42 5.935h-35.82a22.962 22.962 0 0 1-15.411-5.933 10.904 10.904 0 0 0-8.49-2.748 113.787 113.787 0 0 0-16.174 2.682A15.215 15.215 0 0 0 .26 99.9c2.72 4.127 30.234 8.456 63.758 8.456 33.527 0 61.029-4.345 63.754-8.453-.095-.082-.2-.162-.28-.252A14.019 14.019 0 0 0 122 97.32Z"/><path fill="#0a0a0a" d="M64 37.882 50.28 61.034 64 69.477V37.88Z"/><path fill="#4b4d4d" d="M64.005 37.89v31.579l13.716-8.427zm0 36.165v11.011c.256-.364 13.716-19.451 13.716-19.46l-13.716 8.451z"/><path fill="#0a0a0a" d="m64.005 74.06-13.72-8.438 13.72 19.452v-11.02Z"/></svg>
diff --git a/src/assets/optimism-logo.svg b/src/assets/optimism-logo.svg
deleted file mode 100644
index 1a99930..0000000
--- a/src/assets/optimism-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 36.22v8.967c-9.224 0-16.703-7.48-16.703-16.703 0-9.224 7.48-16.704 16.703-16.704V2.813c9.224 0 16.703 7.48 16.703 16.703 0 9.224-7.48 16.704-16.703 16.704Z" style="fill:#fff"/><path d="M24 0C10.746 0 0 10.746 0 24s10.746 24 24 24 24-10.746 24-24S37.254 0 24 0Zm0 36.22v8.967c-9.224 0-16.703-7.48-16.703-16.703 0-9.224 7.48-16.704 16.703-16.704V2.813c9.224 0 16.703 7.48 16.703 16.703 0 9.224-7.48 16.704-16.703 16.704Zm8.264-12.297v.154c-3.643 1.815-6.372 4.544-8.187 8.187h-.154c-1.815-3.643-4.544-6.372-8.187-8.187v-.154c3.643-1.815 6.372-4.544 8.187-8.187h.154c1.815 3.643 4.544 6.372 8.187 8.187Z" style="fill:#ff0420"/></svg>
\ No newline at end of file
diff --git a/src/assets/paymentHelp1.png b/src/assets/paymentHelp1.png
new file mode 100644
index 0000000..f1036c0
Binary files /dev/null and b/src/assets/paymentHelp1.png differ
diff --git a/src/assets/paymentHelp2.png b/src/assets/paymentHelp2.png
new file mode 100644
index 0000000..911d59b
Binary files /dev/null and b/src/assets/paymentHelp2.png differ
diff --git a/src/assets/paymentHelp3.png b/src/assets/paymentHelp3.png
new file mode 100644
index 0000000..bb45cba
Binary files /dev/null and b/src/assets/paymentHelp3.png differ
diff --git a/src/components/LazyComponents.tsx b/src/components/LazyComponents.tsx
index 1f00f29..64102e8 100644
--- a/src/components/LazyComponents.tsx
+++ b/src/components/LazyComponents.tsx
@@ -2,27 +2,33 @@ import { lazy, Suspense } from "react";
 import Loading from "./common/Loading";
 
 // Lazy load page components
-const Home = lazy(() => import("./pages/Home"));
-const Chain = lazy(() => import("./pages/Chain"));
-const Blocks = lazy(() => import("./pages/Blocks"));
-const Block = lazy(() => import("./pages/Block"));
-const Txs = lazy(() => import("./pages/Txs"));
-const Tx = lazy(() => import("./pages/Tx"));
-const Address = lazy(() => import("./pages/Address"));
-const Mempool = lazy(() => import("./pages/Mempool"));
-const Settings = lazy(() => import("./pages/Settings"));
-const DevTools = lazy(() => import("./pages/DevTools"));
-const About = lazy(() => import("./pages/About"));
+const Home = lazy(() => import("./pages/home"));
+const Chain = lazy(() => import("./pages/network"));
+const Blocks = lazy(() => import("./pages/blocks"));
+const Block = lazy(() => import("./pages/block"));
+const Txs = lazy(() => import("./pages/txs"));
+const Tx = lazy(() => import("./pages/tx"));
+const Address = lazy(() => import("./pages/address"));
+const TokenDetails = lazy(() => import("./pages/tokenDetails"));
+const Mempool = lazy(() => import("./pages/mempool"));
+const Settings = lazy(() => import("./pages/settings"));
+const DevTools = lazy(() => import("./pages/devtools"));
+const About = lazy(() => import("./pages/about"));
+const Subscriptions = lazy(() => import("./pages/subscriptions"));
+const Profile = lazy(() => import("./pages/profile"));
+const Supporters = lazy(() => import("./pages/supporters"));
 
 // Higher-order component to wrap lazy components with Suspense
+// biome-ignore lint/suspicious/noExplicitAny: <TODO>
 export const withSuspense = (Component: React.ComponentType<any>) => {
-	return function SuspenseWrapper(props: any) {
-		return (
-			<Suspense fallback={<Loading />}>
-				<Component {...props} />
-			</Suspense>
-		);
-	};
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  return function SuspenseWrapper(props: any) {
+    return (
+      <Suspense fallback={<Loading />}>
+        <Component {...props} />
+      </Suspense>
+    );
+  };
 };
 
 // Export lazy components wrapped with Suspense
@@ -33,9 +39,13 @@ export const LazyBlock = withSuspense(Block);
 export const LazyTxs = withSuspense(Txs);
 export const LazyTx = withSuspense(Tx);
 export const LazyAddress = withSuspense(Address);
+export const LazyTokenDetails = withSuspense(TokenDetails);
 export const LazyMempool = withSuspense(Mempool);
 export const LazySettings = withSuspense(Settings);
 export const LazyDevTools = withSuspense(DevTools);
 export const LazyAbout = withSuspense(About);
+export const LazySubscriptions = withSuspense(Subscriptions);
+export const LazyProfile = withSuspense(Profile);
+export const LazySupporters = withSuspense(Supporters);
 // Default exports for backward compatibility
 export { Home };
diff --git a/src/components/common/AddressDisplay.tsx b/src/components/common/AddressDisplay.tsx
deleted file mode 100644
index bf1e503..0000000
--- a/src/components/common/AddressDisplay.tsx
+++ /dev/null
@@ -1,1799 +0,0 @@
-import React, { useContext, useState, useMemo, useCallback } from "react";
-import { Link } from "react-router-dom";
-import { useSourcify } from "../../hooks/useSourcify";
-import type {
-	Address,
-	AddressTransactionsResult,
-	Transaction,
-	RPCMetadata,
-} from "../../types";
-import { AppContext } from "../../context";
-import {
-	useWriteContract,
-	useWaitForTransactionReceipt,
-} from "wagmi";
-import { parseEther, encodeFunctionData } from "viem";
-import { RPCIndicator } from "./RPCIndicator";
-
-import { ConnectButton } from "@rainbow-me/rainbowkit";
-
-interface AddressDisplayProps {
-	address: Address;
-	addressHash: string;
-	chainId?: string;
-	transactionsResult?: AddressTransactionsResult | null;
-	transactionDetails?: Transaction[];
-	loadingTxDetails?: boolean;
-	metadata?: RPCMetadata;
-	selectedProvider?: string | null;
-	onProviderSelect?: (provider: string) => void;
-}
-
-const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
-	({
-		address,
-		addressHash,
-		chainId = "1",
-		transactionsResult,
-		transactionDetails = [],
-		loadingTxDetails = false,
-		metadata,
-		selectedProvider,
-		onProviderSelect,
-	}) => {
-		const [storageSlot, setStorageSlot] = useState("");
-		const [storageValue, setStorageValue] = useState("");
-		const [showContractDetails, setShowContractDetails] = useState(false);
-		const [selectedWriteFunction, setSelectedWriteFunction] =
-			useState<any>(null);
-		const [selectedReadFunction, setSelectedReadFunction] = useState<any>(null);
-		const [functionInputs, setFunctionInputs] = useState<
-			Record<string, string>
-		>({});
-		const [readFunctionResult, setReadFunctionResult] = useState<any>(null);
-		const [isReadingFunction, setIsReadingFunction] = useState(false);
-		const { jsonFiles, rpcUrls } = useContext(AppContext);
-
-		// Wagmi hooks for contract interaction
-		const {
-			data: hash,
-			writeContract,
-			isPending,
-			isError,
-			error,
-		} = useWriteContract();
-		const { isLoading: isConfirming, isSuccess: isConfirmed } =
-			useWaitForTransactionReceipt({ hash });
-
-		const isContract = useMemo(
-			() => address.code && address.code !== "0x",
-			[address.code],
-		);
-
-		// Fetch Sourcify data only if it's a contract
-		const {
-			data: sourcifyData,
-			loading: sourcifyLoading,
-			isVerified,
-		} = useSourcify(
-			Number(chainId),
-			isContract ? addressHash : undefined,
-			true,
-		);
-
-		// Memoized helper functions
-		const truncate = useCallback((str: string, start = 6, end = 4) => {
-			if (!str) return "";
-			if (str.length <= start + end) return str;
-			return `${str.slice(0, start)}...${str.slice(-end)}`;
-		}, []);
-
-		const formatBalance = useCallback((balance: string) => {
-			try {
-				const eth = Number(balance) / 1e18;
-				return `${eth.toFixed(6)} ETH`;
-			} catch (e) {
-				return balance;
-			}
-		}, []);
-
-		const formatValue = useCallback((value: string) => {
-			try {
-				const eth = Number(value) / 1e18;
-				return `${eth.toFixed(6)} ETH`;
-			} catch (e) {
-				return "0 ETH";
-			}
-		}, []);
-
-		// Memoized formatted balance
-		const formattedBalance = useMemo(
-			() => formatBalance(address.balance),
-			[address.balance, formatBalance],
-		);
-
-		const handleGetStorage = useCallback(() => {
-			// Check if the slot exists in the storeageAt object
-			if (address.storeageAt?.[storageSlot]) {
-				setStorageValue(address.storeageAt[storageSlot]);
-			} else {
-				setStorageValue(
-					"0x0000000000000000000000000000000000000000000000000000000000000000",
-				);
-			}
-		}, [address.storeageAt, storageSlot]);
-
-		// Check if we have local artifact data for this address
-		const localArtifact = jsonFiles[addressHash.toLowerCase()];
-
-		// Parse local artifact to sourcify format if it exists - memoized
-		const parsedLocalData = useMemo(() => {
-			if (!localArtifact) return null;
-			return {
-				name: localArtifact.contractName,
-				compilerVersion: localArtifact.buildInfo?.solcLongVersion,
-				evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
-				abi: localArtifact.abi,
-				files: localArtifact.sourceCode
-					? [
-							{
-								name: localArtifact.sourceName || "Contract.sol",
-								path: localArtifact.sourceName || "Contract.sol",
-								content: localArtifact.sourceCode,
-							},
-						]
-					: undefined,
-				metadata: {
-					language: localArtifact.buildInfo?.input?.language,
-					compiler: localArtifact.buildInfo
-						? {
-								version: localArtifact.buildInfo.solcVersion,
-							}
-						: undefined,
-				},
-				match: "perfect" as const,
-				creation_match: null,
-				runtime_match: null,
-				chainId: chainId,
-				address: addressHash,
-				verifiedAt: undefined,
-			};
-		}, [localArtifact, chainId, addressHash]);
-
-		// Use local artifact data if available and sourcify is not verified, otherwise use sourcify
-		const contractData = useMemo(
-			() => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
-			[isVerified, sourcifyData, parsedLocalData],
-		);
-
-		const handleWriteFunction = useCallback(async () => {
-			if (!selectedWriteFunction) return;
-
-			try {
-				// Prepare function arguments
-				const args: any[] = [];
-				if (
-					selectedWriteFunction.inputs &&
-					selectedWriteFunction.inputs.length > 0
-				) {
-					for (const input of selectedWriteFunction.inputs) {
-						const paramName =
-							input.name ||
-							`param${selectedWriteFunction.inputs.indexOf(input)}`;
-						const value = functionInputs[paramName];
-
-						if (!value && value !== "0") {
-							alert(`Please provide value for ${paramName}`);
-							return;
-						}
-
-						args.push(value);
-					}
-				}
-
-				// Prepare transaction value for payable functions
-				let txValue: bigint | undefined;
-				if (
-					selectedWriteFunction.stateMutability === "payable" &&
-					functionInputs["_value"]
-				) {
-					try {
-						txValue = parseEther(functionInputs["_value"]);
-					} catch (e) {
-						alert("Invalid ETH value");
-						return;
-					}
-				}
-
-				// Call the contract
-				writeContract({
-					address: addressHash as `0x${string}`,
-					abi: contractData?.abi || [],
-					functionName: selectedWriteFunction.name,
-					args: args,
-					value: txValue,
-				});
-			} catch (err) {
-				console.error("Error writing to contract:", err);
-				alert(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
-			}
-		}, [
-			selectedWriteFunction,
-			functionInputs,
-			addressHash,
-			contractData?.abi,
-			writeContract,
-		]);
-
-		const handleReadFunction = useCallback(async () => {
-			if (!selectedReadFunction || !contractData) return;
-
-			setIsReadingFunction(true);
-			setReadFunctionResult(null);
-
-			try {
-				// Get RPC URL for the current chain
-				const chainIdNum = Number(chainId);
-				const rpcUrlsForChain = rpcUrls[chainIdNum as keyof typeof rpcUrls];
-
-				if (!rpcUrlsForChain) {
-					throw new Error(`No RPC URL configured for chain ${chainId}`);
-				}
-
-				// Get first RPC URL (could be string or array)
-				const rpcUrl = Array.isArray(rpcUrlsForChain)
-					? rpcUrlsForChain[0]
-					: rpcUrlsForChain;
-
-				if (!rpcUrl) {
-					// Defensive: ensure rpcUrl is defined before calling fetch
-					throw new Error(`No RPC URL configured for chain ${chainId}`);
-				}
-
-				// Prepare function arguments
-				const args: any[] = [];
-				if (
-					selectedReadFunction.inputs &&
-					selectedReadFunction.inputs.length > 0
-				) {
-					for (const input of selectedReadFunction.inputs) {
-						const paramName =
-							input.name ||
-							`param${selectedReadFunction.inputs.indexOf(input)}`;
-						const value = functionInputs[paramName];
-
-						if (!value && value !== "0") {
-							alert(`Please provide value for ${paramName}`);
-							setIsReadingFunction(false);
-							return;
-						}
-
-						args.push(value);
-					}
-				}
-
-				// Use fetch to call the RPC directly for read functions
-				const response = await fetch(rpcUrl, {
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-					},
-					body: JSON.stringify({
-						jsonrpc: "2.0",
-						method: "eth_call",
-						params: [
-							{
-								to: addressHash,
-								data: encodeFunctionData({
-									abi: contractData.abi,
-									functionName: selectedReadFunction.name,
-									args: args,
-								}),
-							},
-							"latest",
-						],
-						id: 1,
-					}),
-				});
-
-				const data = await response.json();
-
-				if (data.error) {
-					throw new Error(data.error.message || "Contract call failed");
-				}
-
-				setReadFunctionResult(data.result);
-			} catch (err) {
-				console.error("Error reading from contract:", err);
-				setReadFunctionResult(
-					`Error: ${err instanceof Error ? err.message : "Unknown error"}`,
-				);
-			} finally {
-				setIsReadingFunction(false);
-			}
-		}, [
-			selectedReadFunction,
-			contractData,
-			chainId,
-			functionInputs,
-			addressHash,
-		]);
-
-		return (
-			<div className="block-display-card">
-				<div
-					className="block-display-header"
-					style={{
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "center",
-					}}
-				>
-					<div>
-						<span className="block-label">Address</span>
-						<span className="tx-mono header-subtitle">{addressHash}</span>
-					</div>
-					{metadata && selectedProvider !== undefined && onProviderSelect && (
-						<RPCIndicator
-							metadata={metadata}
-							selectedProvider={selectedProvider}
-							onProviderSelect={onProviderSelect}
-						/>
-					)}
-				</div>
-
-				<div className="address-section-content">
-					{/* Address Details Section */}
-					<div className="tx-details">
-						<div className="tx-section">
-							<span className="tx-section-title">Address Details</span>
-						</div>
-
-						{/* Type */}
-						<div className="tx-row">
-							<span className="tx-label">Type:</span>
-							<span className="tx-value">
-								{isContract ? (
-									<span className="tx-value-highlight text-blue">
-										📄 Contract
-									</span>
-								) : (
-									<span className="tx-value-highlight">
-										👤 Externally Owned Account (EOA)
-									</span>
-								)}
-							</span>
-						</div>
-
-						{/* Balance */}
-						<div className="tx-row">
-							<span className="tx-label">Balance:</span>
-							<span className="tx-value">
-								<span className="tx-value-highlight">
-									{formatBalance(address.balance)}
-								</span>
-							</span>
-						</div>
-
-						{/* Transaction Count (Nonce) */}
-						<div className="tx-row">
-							<span className="tx-label">Transactions:</span>
-							<span className="tx-value">
-								{Number(address.txCount).toLocaleString()} txns
-							</span>
-						</div>
-
-						{/* Verification Status (only for contracts) */}
-						{isContract && (
-							<>
-								<div className="tx-row">
-									<span className="tx-label">Contract Verified:</span>
-									<span className="tx-value">
-										{sourcifyLoading ? (
-											<span className="verification-checking">
-												Checking Sourcify...
-											</span>
-										) : isVerified || parsedLocalData ? (
-											<span className="flex-align-center-gap-8">
-												<span className="tx-value-highlight">✓ Verified</span>
-												{contractData?.match && (
-													<span className="match-badge match-badge-full">
-														{contractData.match === "perfect"
-															? parsedLocalData
-																? "Local JSON"
-																: "Perfect Match"
-															: "Partial Match"}
-													</span>
-												)}
-											</span>
-										) : (
-											<span className="verification-not-verified">
-												Not Verified
-											</span>
-										)}
-									</span>
-								</div>
-							</>
-						)}
-
-						{/* Contract Name (if verified) */}
-						{isContract && contractData?.name && (
-							<div className="tx-row">
-								<span className="tx-label">Contract Name:</span>
-								<span className="tx-value">{contractData.name}</span>
-							</div>
-						)}
-
-						{/* Compiler Version (if verified) */}
-						{isContract && contractData?.compilerVersion && (
-							<div className="tx-row">
-								<span className="tx-label">Compiler:</span>
-								<span className="tx-value tx-mono">
-									{contractData.compilerVersion}
-								</span>
-							</div>
-						)}
-					</div>
-
-					{/* Contract Verification Details */}
-					{isContract && (isVerified || parsedLocalData) && contractData && (
-						<div className="tx-details">
-							<div
-								className="tx-section cursor-pointer"
-								onClick={() => setShowContractDetails(!showContractDetails)}
-							>
-								<span className="tx-section-title">Contract Details</span>
-								<span className="contract-section-toggle">
-									{showContractDetails ? " ▼" : " ▶"}
-								</span>
-							</div>
-
-							{showContractDetails && (
-								<>
-									{contractData.name && (
-										<div className="tx-row">
-											<span className="tx-label">Contract Name</span>
-											<span className="tx-value tx-value-success">
-												{contractData.name}
-											</span>
-										</div>
-									)}
-
-									{contractData.compilerVersion && (
-										<div className="tx-row">
-											<span className="tx-label">Compiler Version</span>
-											<span className="tx-value tx-mono">
-												{contractData.compilerVersion}
-											</span>
-										</div>
-									)}
-
-									{contractData.evmVersion && (
-										<div className="tx-row">
-											<span className="tx-label">EVM Version</span>
-											<span className="tx-value">
-												{contractData.evmVersion}
-											</span>
-										</div>
-									)}
-
-									{contractData.chainId && (
-										<div className="tx-row">
-											<span className="tx-label">Chain ID</span>
-											<span className="tx-value">{contractData.chainId}</span>
-										</div>
-									)}
-
-									{contractData.verifiedAt && (
-										<div className="tx-row">
-											<span className="tx-label">Verified At</span>
-											<span className="tx-value">
-												{new Date(contractData.verifiedAt).toLocaleString()}
-											</span>
-										</div>
-									)}
-
-									{contractData.match && (
-										<div className="tx-row">
-											<span className="tx-label">Match Type</span>
-											<span
-												className={`tx-value font-weight-600 ${contractData.match === "perfect" ? "text-success" : "text-warning"}`}
-											>
-												{contractData.match.toUpperCase()}
-											</span>
-										</div>
-									)}
-
-									{contractData.metadata?.compiler && (
-										<div className="tx-row">
-											<span className="tx-label">Compiler</span>
-											<span className="tx-value tx-mono">
-												{contractData.metadata.compiler.version}
-											</span>
-										</div>
-									)}
-
-									{contractData.creation_match && (
-										<div className="tx-row">
-											<span className="tx-label">Creation Match</span>
-											<span
-												className={`tx-value font-weight-600 ${contractData.creation_match === "perfect" ? "text-success" : "text-warning"}`}
-											>
-												{contractData.creation_match.toUpperCase()}
-											</span>
-										</div>
-									)}
-
-									{contractData.runtime_match && (
-										<div className="tx-row">
-											<span className="tx-label">Runtime Match</span>
-											<span
-												className={`tx-value font-weight-600 ${contractData.runtime_match === "perfect" ? "text-success" : "text-warning"}`}
-											>
-												{contractData.runtime_match.toUpperCase()}
-											</span>
-										</div>
-									)}
-
-									{/* Contract Bytecode */}
-									<div className="tx-row-vertical">
-										<div
-											className="source-toggle-container"
-											onClick={() => {
-												const elem =
-													document.getElementById("bytecode-content");
-												const icon = document.getElementById("bytecode-icon");
-												if (elem && icon) {
-													const isHidden = elem.style.display === "none";
-													elem.style.display = isHidden ? "block" : "none";
-													icon.textContent = isHidden ? "▼" : "▶";
-												}
-											}}
-										>
-											<span className="tx-label">Contract Bytecode</span>
-											<span id="bytecode-icon" className="source-toggle-icon">
-												▶
-											</span>
-										</div>
-										<div
-											id="bytecode-content"
-											className="tx-input-data"
-											style={{ display: "none" }}
-										>
-											<code>{address.code}</code>
-										</div>
-									</div>
-
-									{/* Source Code */}
-									{((contractData.files && contractData.files.length > 0) ||
-										(contractData as any).sources) &&
-										(() => {
-											// Prepare source files array - either from files or sources object
-											const sources = (contractData as any).sources;
-											const sourceFiles =
-												contractData.files && contractData.files.length > 0
-													? contractData.files
-													: sources
-														? Object.entries(sources).map(
-																([path, source]: [string, any]) => ({
-																	name: path,
-																	path: path,
-																	content: source.content || "",
-																}),
-															)
-														: [];
-
-											return sourceFiles.length > 0 ? (
-												<div className="tx-row-vertical">
-													<div
-														className="source-toggle-container"
-														onClick={() => {
-															const elem = document.getElementById(
-																"source-code-content",
-															);
-															const icon =
-																document.getElementById("source-code-icon");
-															if (elem && icon) {
-																const isHidden = elem.style.display === "none";
-																elem.style.display = isHidden
-																	? "block"
-																	: "none";
-																icon.textContent = isHidden ? "▼" : "▶";
-															}
-														}}
-													>
-														<span className="tx-label">Source Code</span>
-														<span
-															id="source-code-icon"
-															className="source-toggle-icon"
-														>
-															▶
-														</span>
-													</div>
-													<div
-														id="source-code-content"
-														className="margin-top-8"
-														style={{ display: "none" }}
-													>
-														{sourceFiles.map((file: any, idx: number) => (
-															<div key={idx} className="source-file-container">
-																<div className="source-file-header">
-																	📄 {file.name || file.path}
-																</div>
-																<pre className="source-file-code">
-																	{file.content}
-																</pre>
-															</div>
-														))}
-													</div>
-												</div>
-											) : null;
-										})()}
-
-									{/* Raw ABI */}
-									{contractData.abi && contractData.abi.length > 0 && (
-										<div className="tx-row-vertical">
-											<div
-												className="source-toggle-container"
-												onClick={() => {
-													const elem =
-														document.getElementById("raw-abi-content");
-													const icon = document.getElementById("raw-abi-icon");
-													if (elem && icon) {
-														const isHidden = elem.style.display === "none";
-														elem.style.display = isHidden ? "block" : "none";
-														icon.textContent = isHidden ? "▼" : "▶";
-													}
-												}}
-											>
-												<span className="tx-label">Raw ABI</span>
-												<span id="raw-abi-icon" className="source-toggle-icon">
-													▶
-												</span>
-											</div>
-											<div
-												id="raw-abi-content"
-												className="tx-input-data"
-												style={{ display: "none" }}
-											>
-												<code>{JSON.stringify(contractData.abi, null, 2)}</code>
-											</div>
-										</div>
-									)}
-
-									{/* Contract ABI */}
-									{contractData.abi && contractData.abi.length > 0 && (
-										<div className="tx-row-vertical">
-											<div
-												style={{
-													display: "flex",
-													justifyContent: "space-between",
-													alignItems: "center",
-													marginBottom: "8px",
-												}}
-											>
-												<span className="tx-label">Functions</span>
-												<ConnectButton.Custom>
-													{({
-														account,
-														chain,
-														openAccountModal,
-														openChainModal,
-														openConnectModal,
-														authenticationStatus,
-														mounted,
-													}: any) => {
-														const ready =
-															mounted && authenticationStatus !== "loading";
-														const connected =
-															ready &&
-															account &&
-															chain &&
-															(!authenticationStatus ||
-																authenticationStatus === "authenticated");
-
-														return (
-															<div
-																{...(!ready && {
-																	"aria-hidden": true,
-																	style: {
-																		opacity: 0,
-																		pointerEvents: "none",
-																		userSelect: "none",
-																	},
-																})}
-															>
-																{(() => {
-																	if (!connected) {
-																		return (
-																			<button
-																				onClick={openConnectModal}
-																				type="button"
-																				style={{
-																					padding: "8px 16px",
-																					background:
-																						"rgba(16, 185, 129, 0.15)",
-																					color: "#10b981",
-																					border:
-																						"1px solid rgba(16, 185, 129, 0.3)",
-																					borderRadius: "6px",
-																					fontSize: "0.85rem",
-																					fontWeight: "600",
-																					cursor: "pointer",
-																					transition: "all 0.2s",
-																				}}
-																				onMouseEnter={(e) => {
-																					e.currentTarget.style.background =
-																						"rgba(16, 185, 129, 0.25)";
-																				}}
-																				onMouseLeave={(e) => {
-																					e.currentTarget.style.background =
-																						"rgba(16, 185, 129, 0.15)";
-																				}}
-																			>
-																				Connect Wallet
-																			</button>
-																		);
-																	}
-
-																	if (chain.unsupported) {
-																		return (
-																			<button
-																				onClick={openChainModal}
-																				type="button"
-																				style={{
-																					padding: "8px 16px",
-																					background: "rgba(239, 68, 68, 0.15)",
-																					color: "#ef4444",
-																					border:
-																						"1px solid rgba(239, 68, 68, 0.3)",
-																					borderRadius: "6px",
-																					fontSize: "0.85rem",
-																					fontWeight: "600",
-																					cursor: "pointer",
-																				}}
-																			>
-																				Wrong Network
-																			</button>
-																		);
-																	}
-
-																	return (
-																		<div
-																			style={{
-																				display: "flex",
-																				gap: "8px",
-																				alignItems: "center",
-																			}}
-																		>
-																			<button
-																				onClick={openChainModal}
-																				type="button"
-																				style={{
-																					padding: "6px 12px",
-																					background:
-																						"rgba(59, 130, 246, 0.15)",
-																					color: "#3b82f6",
-																					border:
-																						"1px solid rgba(59, 130, 246, 0.3)",
-																					borderRadius: "6px",
-																					fontSize: "0.8rem",
-																					display: "flex",
-																					alignItems: "center",
-																					gap: "6px",
-																					cursor: "pointer",
-																				}}
-																			>
-																				{chain.hasIcon && chain.iconUrl && (
-																					<img
-																						alt={chain.name ?? "Chain icon"}
-																						src={chain.iconUrl}
-																						style={{
-																							width: 16,
-																							height: 16,
-																							borderRadius: "50%",
-																						}}
-																					/>
-																				)}
-																				{chain.name}
-																			</button>
-																			<button
-																				onClick={openAccountModal}
-																				type="button"
-																				style={{
-																					padding: "6px 12px",
-																					background:
-																						"rgba(16, 185, 129, 0.15)",
-																					color: "#10b981",
-																					border:
-																						"1px solid rgba(16, 185, 129, 0.3)",
-																					borderRadius: "6px",
-																					fontSize: "0.8rem",
-																					cursor: "pointer",
-																					fontFamily: "monospace",
-																				}}
-																			>
-																				{account.displayName}
-																			</button>
-																		</div>
-																	);
-																})()}
-															</div>
-														);
-													}}
-												</ConnectButton.Custom>
-											</div>
-											<div style={{ marginTop: "8px" }}>
-												{/* Read Functions (view/pure) */}
-												{(() => {
-													const readFunctions = contractData.abi.filter(
-														(item: any) =>
-															item.type === "function" &&
-															(item.stateMutability === "view" ||
-																item.stateMutability === "pure"),
-													);
-													return (
-														readFunctions.length > 0 && (
-															<div style={{ marginBottom: "12px" }}>
-																<div
-																	style={{
-																		fontSize: "0.85rem",
-																		color: "#10b981",
-																		marginBottom: "6px",
-																		fontWeight: "600",
-																	}}
-																>
-																	Read Functions ({readFunctions.length})
-																</div>
-																<div
-																	style={{
-																		display: "flex",
-																		flexWrap: "wrap",
-																		gap: "8px",
-																	}}
-																>
-																	{readFunctions.map(
-																		(func: any, idx: number) => (
-																			<button
-																				key={idx}
-																				onClick={() => {
-																					setSelectedReadFunction(func);
-																					setSelectedWriteFunction(null);
-																					setFunctionInputs({});
-																					setReadFunctionResult(null);
-																				}}
-																				style={{
-																					padding: "4px 10px",
-																					background:
-																						selectedReadFunction?.name ===
-																						func.name
-																							? "rgba(59, 130, 246, 0.3)"
-																							: "rgba(59, 130, 246, 0.15)",
-																					color: "#3b82f6",
-																					border:
-																						selectedReadFunction?.name ===
-																						func.name
-																							? "1px solid rgba(59, 130, 246, 0.5)"
-																							: "1px solid transparent",
-																					borderRadius: "6px",
-																					fontSize: "0.8rem",
-																					fontFamily: "monospace",
-																					cursor: "pointer",
-																					transition: "all 0.2s",
-																				}}
-																				onMouseEnter={(e) => {
-																					if (
-																						selectedReadFunction?.name !==
-																						func.name
-																					) {
-																						e.currentTarget.style.background =
-																							"rgba(59, 130, 246, 0.25)";
-																					}
-																				}}
-																				onMouseLeave={(e) => {
-																					if (
-																						selectedReadFunction?.name !==
-																						func.name
-																					) {
-																						e.currentTarget.style.background =
-																							"rgba(59, 130, 246, 0.15)";
-																					}
-																				}}
-																			>
-																				{func.name}
-																			</button>
-																		),
-																	)}
-																</div>
-															</div>
-														)
-													);
-												})()}
-
-												{/* Write Functions (payable/nonpayable) */}
-												{(() => {
-													const writeFunctions = contractData.abi.filter(
-														(item: any) =>
-															item.type === "function" &&
-															(item.stateMutability === "payable" ||
-																item.stateMutability === "nonpayable" ||
-																!item.stateMutability),
-													);
-													return (
-														writeFunctions.length > 0 && (
-															<div style={{ marginBottom: "12px" }}>
-																<div
-																	style={{
-																		fontSize: "0.85rem",
-																		color: "#f59e0b",
-																		marginBottom: "6px",
-																		fontWeight: "600",
-																	}}
-																>
-																	Write Functions ({writeFunctions.length})
-																</div>
-																<div
-																	style={{
-																		display: "flex",
-																		flexWrap: "wrap",
-																		gap: "8px",
-																	}}
-																>
-																	{writeFunctions.map(
-																		(func: any, idx: number) => (
-																			<button
-																				key={idx}
-																				onClick={() => {
-																					setSelectedWriteFunction(func);
-																					setSelectedReadFunction(null);
-																					setFunctionInputs({});
-																					setReadFunctionResult(null);
-																				}}
-																				style={{
-																					padding: "4px 10px",
-																					background:
-																						selectedWriteFunction?.name ===
-																						func.name
-																							? "rgba(245, 158, 11, 0.3)"
-																							: "rgba(245, 158, 11, 0.15)",
-																					color: "#f59e0b",
-																					border:
-																						selectedWriteFunction?.name ===
-																						func.name
-																							? "1px solid rgba(245, 158, 11, 0.5)"
-																							: "1px solid transparent",
-																					borderRadius: "6px",
-																					fontSize: "0.8rem",
-																					fontFamily: "monospace",
-																					cursor: "pointer",
-																					transition: "all 0.2s",
-																				}}
-																				onMouseEnter={(e) => {
-																					if (
-																						selectedWriteFunction?.name !==
-																						func.name
-																					) {
-																						e.currentTarget.style.background =
-																							"rgba(245, 158, 11, 0.25)";
-																					}
-																				}}
-																				onMouseLeave={(e) => {
-																					if (
-																						selectedWriteFunction?.name !==
-																						func.name
-																					) {
-																						e.currentTarget.style.background =
-																							"rgba(245, 158, 11, 0.15)";
-																					}
-																				}}
-																			>
-																				{func.name}
-																			</button>
-																		),
-																	)}
-																</div>
-															</div>
-														)
-													);
-												})()}
-
-												{/* Events */}
-												{contractData.abi.filter(
-													(item: any) => item.type === "event",
-												).length > 0 && (
-													<div style={{ marginBottom: "12px" }}>
-														<div
-															style={{
-																fontSize: "0.85rem",
-																color: "#10b981",
-																marginBottom: "6px",
-																fontWeight: "600",
-															}}
-														>
-															Events (
-															{
-																contractData.abi.filter(
-																	(item: any) => item.type === "event",
-																).length
-															}
-															)
-														</div>
-														<div
-															style={{
-																display: "flex",
-																flexWrap: "wrap",
-																gap: "8px",
-															}}
-														>
-															{contractData.abi
-																.filter((item: any) => item.type === "event")
-																.slice(0, 10)
-																.map((event: any, idx: number) => (
-																	<span
-																		key={idx}
-																		style={{
-																			padding: "4px 10px",
-																			background: "rgba(139, 92, 246, 0.15)",
-																			color: "#8b5cf6",
-																			borderRadius: "6px",
-																			fontSize: "0.8rem",
-																			fontFamily: "monospace",
-																		}}
-																	>
-																		{event.name}
-																	</span>
-																))}
-															{contractData.abi.filter(
-																(item: any) => item.type === "event",
-															).length > 10 && (
-																<span
-																	style={{
-																		color: "rgba(255, 255, 255, 0.5)",
-																		fontSize: "0.85rem",
-																		alignSelf: "center",
-																	}}
-																>
-																	+
-																	{contractData.abi.filter(
-																		(item: any) => item.type === "event",
-																	).length - 10}{" "}
-																	more
-																</span>
-															)}
-														</div>
-													</div>
-												)}
-
-												{/* Read Function Form */}
-												{selectedReadFunction && (
-													<div
-														style={{
-															marginTop: "16px",
-															padding: "16px",
-															background: "rgba(59, 130, 246, 0.05)",
-															border: "1px solid rgba(59, 130, 246, 0.2)",
-															borderRadius: "8px",
-														}}
-													>
-														<div
-															style={{
-																fontSize: "0.9rem",
-																color: "#3b82f6",
-																marginBottom: "12px",
-																fontWeight: "600",
-																fontFamily: "monospace",
-															}}
-														>
-															{selectedReadFunction.name}
-														</div>
-
-														{selectedReadFunction.inputs &&
-														selectedReadFunction.inputs.length > 0 ? (
-															<div style={{ marginBottom: "12px" }}>
-																{selectedReadFunction.inputs.map(
-																	(input: any, idx: number) => (
-																		<div
-																			key={idx}
-																			style={{ marginBottom: "10px" }}
-																		>
-																			<label
-																				style={{
-																					display: "block",
-																					fontSize: "0.8rem",
-																					color: "rgba(255, 255, 255, 0.7)",
-																					marginBottom: "4px",
-																					fontFamily: "monospace",
-																				}}
-																			>
-																				{input.name || `param${idx}`} (
-																				{input.type})
-																			</label>
-																			<input
-																				type="text"
-																				value={
-																					functionInputs[
-																						input.name || `param${idx}`
-																					] || ""
-																				}
-																				onChange={(e) =>
-																					setFunctionInputs({
-																						...functionInputs,
-																						[input.name || `param${idx}`]:
-																							e.target.value,
-																					})
-																				}
-																				placeholder={`Enter ${input.type}`}
-																				style={{
-																					width: "100%",
-																					padding: "8px 12px",
-																					background: "rgba(0, 0, 0, 0.3)",
-																					border:
-																						"1px solid rgba(59, 130, 246, 0.3)",
-																					borderRadius: "6px",
-																					color: "#fff",
-																					fontSize: "0.85rem",
-																					fontFamily: "monospace",
-																				}}
-																			/>
-																		</div>
-																	),
-																)}
-															</div>
-														) : (
-															<div
-																style={{
-																	fontSize: "0.8rem",
-																	color: "#10b981",
-																	marginBottom: "12px",
-																	fontStyle: "italic",
-																}}
-															>
-																No parameters required
-															</div>
-														)}
-
-														{/* Read Result */}
-														{readFunctionResult !== null && (
-															<div
-																style={{
-																	marginBottom: "12px",
-																	padding: "10px",
-																	borderRadius: "6px",
-																	fontSize: "0.85rem",
-																	background: readFunctionResult?.startsWith(
-																		"Error",
-																	)
-																		? "rgba(239, 68, 68, 0.1)"
-																		: "rgba(16, 185, 129, 0.1)",
-																	border: `1px solid ${
-																		readFunctionResult?.startsWith("Error")
-																			? "rgba(239, 68, 68, 0.3)"
-																			: "rgba(16, 185, 129, 0.3)"
-																	}`,
-																	color: readFunctionResult?.startsWith("Error")
-																		? "#ef4444"
-																		: "#10b981",
-																	wordBreak: "break-all",
-																	fontFamily: "monospace",
-																}}
-															>
-																<div
-																	style={{
-																		fontWeight: "600",
-																		marginBottom: "4px",
-																	}}
-																>
-																	{readFunctionResult?.startsWith("Error")
-																		? "❌ Error"
-																		: "✅ Result"}
-																</div>
-																{readFunctionResult}
-															</div>
-														)}
-
-														<div style={{ display: "flex", gap: "8px" }}>
-															<button
-																onClick={handleReadFunction}
-																disabled={isReadingFunction}
-																style={{
-																	flex: 1,
-																	padding: "10px 16px",
-																	background: isReadingFunction
-																		? "rgba(59, 130, 246, 0.1)"
-																		: "rgba(59, 130, 246, 0.2)",
-																	color: isReadingFunction
-																		? "rgba(59, 130, 246, 0.5)"
-																		: "#3b82f6",
-																	border: "1px solid rgba(59, 130, 246, 0.4)",
-																	borderRadius: "6px",
-																	fontSize: "0.85rem",
-																	fontWeight: "600",
-																	cursor: isReadingFunction
-																		? "not-allowed"
-																		: "pointer",
-																	transition: "all 0.2s",
-																	opacity: isReadingFunction ? 0.6 : 1,
-																}}
-																onMouseEnter={(e) => {
-																	if (!isReadingFunction) {
-																		e.currentTarget.style.background =
-																			"rgba(59, 130, 246, 0.3)";
-																	}
-																}}
-																onMouseLeave={(e) => {
-																	if (!isReadingFunction) {
-																		e.currentTarget.style.background =
-																			"rgba(59, 130, 246, 0.2)";
-																	}
-																}}
-															>
-																{isReadingFunction ? "Reading..." : "Query"}
-															</button>
-															<button
-																onClick={() => {
-																	setSelectedReadFunction(null);
-																	setReadFunctionResult(null);
-																}}
-																style={{
-																	padding: "10px 16px",
-																	background: "rgba(239, 68, 68, 0.2)",
-																	color: "#ef4444",
-																	border: "1px solid rgba(239, 68, 68, 0.4)",
-																	borderRadius: "6px",
-																	fontSize: "0.85rem",
-																	fontWeight: "600",
-																	cursor: "pointer",
-																	transition: "all 0.2s",
-																}}
-																onMouseEnter={(e) => {
-																	e.currentTarget.style.background =
-																		"rgba(239, 68, 68, 0.3)";
-																}}
-																onMouseLeave={(e) => {
-																	e.currentTarget.style.background =
-																		"rgba(239, 68, 68, 0.2)";
-																}}
-															>
-																Cancel
-															</button>
-														</div>
-													</div>
-												)}
-
-												{/* Write Function Form */}
-												{selectedWriteFunction && (
-													<div
-														style={{
-															marginTop: "16px",
-															padding: "16px",
-															background: "rgba(245, 158, 11, 0.05)",
-															border: "1px solid rgba(245, 158, 11, 0.2)",
-															borderRadius: "8px",
-														}}
-													>
-														<div
-															style={{
-																fontSize: "0.9rem",
-																color: "#f59e0b",
-																marginBottom: "12px",
-																fontWeight: "600",
-																fontFamily: "monospace",
-															}}
-														>
-															{selectedWriteFunction.name}
-															{selectedWriteFunction.stateMutability ===
-																"payable" && (
-																<span
-																	style={{
-																		marginLeft: "8px",
-																		fontSize: "0.75rem",
-																		padding: "2px 6px",
-																		background: "rgba(16, 185, 129, 0.15)",
-																		color: "#10b981",
-																		borderRadius: "4px",
-																	}}
-																>
-																	payable
-																</span>
-															)}
-														</div>
-
-														{selectedWriteFunction.inputs &&
-														selectedWriteFunction.inputs.length > 0 ? (
-															<div style={{ marginBottom: "12px" }}>
-																{selectedWriteFunction.inputs.map(
-																	(input: any, idx: number) => (
-																		<div
-																			key={idx}
-																			style={{ marginBottom: "10px" }}
-																		>
-																			<label
-																				style={{
-																					display: "block",
-																					fontSize: "0.8rem",
-																					color: "rgba(255, 255, 255, 0.7)",
-																					marginBottom: "4px",
-																					fontFamily: "monospace",
-																				}}
-																			>
-																				{input.name || `param${idx}`} (
-																				{input.type})
-																			</label>
-																			<input
-																				type="text"
-																				value={
-																					functionInputs[
-																						input.name || `param${idx}`
-																					] || ""
-																				}
-																				onChange={(e) =>
-																					setFunctionInputs({
-																						...functionInputs,
-																						[input.name || `param${idx}`]:
-																							e.target.value,
-																					})
-																				}
-																				placeholder={`Enter ${input.type}`}
-																				style={{
-																					width: "100%",
-																					padding: "8px 12px",
-																					background: "rgba(0, 0, 0, 0.3)",
-																					border:
-																						"1px solid rgba(245, 158, 11, 0.3)",
-																					borderRadius: "6px",
-																					color: "#fff",
-																					fontSize: "0.85rem",
-																					fontFamily: "monospace",
-																				}}
-																			/>
-																		</div>
-																	),
-																)}
-															</div>
-														) : (
-															<div
-																style={{
-																	fontSize: "0.8rem",
-																	color: "#10b981",
-																	marginBottom: "12px",
-																	fontStyle: "italic",
-																}}
-															>
-																No parameters required
-															</div>
-														)}
-
-														{selectedWriteFunction.stateMutability ===
-															"payable" && (
-															<div style={{ marginBottom: "12px" }}>
-																<label
-																	style={{
-																		display: "block",
-																		fontSize: "0.8rem",
-																		color: "rgba(255, 255, 255, 0.7)",
-																		marginBottom: "4px",
-																		fontFamily: "monospace",
-																	}}
-																>
-																	Value (ETH)
-																</label>
-																<input
-																	type="text"
-																	value={functionInputs["_value"] || ""}
-																	onChange={(e) =>
-																		setFunctionInputs({
-																			...functionInputs,
-																			_value: e.target.value,
-																		})
-																	}
-																	placeholder="0.0"
-																	style={{
-																		width: "100%",
-																		padding: "8px 12px",
-																		background: "rgba(0, 0, 0, 0.3)",
-																		border: "1px solid rgba(16, 185, 129, 0.3)",
-																		borderRadius: "6px",
-																		color: "#fff",
-																		fontSize: "0.85rem",
-																		fontFamily: "monospace",
-																	}}
-																/>
-															</div>
-														)}
-
-														{/* Transaction Status */}
-														{(isPending ||
-															isConfirming ||
-															isConfirmed ||
-															isError) && (
-															<div
-																style={{
-																	marginBottom: "12px",
-																	padding: "10px",
-																	borderRadius: "6px",
-																	fontSize: "0.85rem",
-																	background: isError
-																		? "rgba(239, 68, 68, 0.1)"
-																		: isConfirmed
-																			? "rgba(16, 185, 129, 0.1)"
-																			: "rgba(59, 130, 246, 0.1)",
-																	border: `1px solid ${
-																		isError
-																			? "rgba(239, 68, 68, 0.3)"
-																			: isConfirmed
-																				? "rgba(16, 185, 129, 0.3)"
-																				: "rgba(59, 130, 246, 0.3)"
-																	}`,
-																	color: isError
-																		? "#ef4444"
-																		: isConfirmed
-																			? "#10b981"
-																			: "#3b82f6",
-																}}
-															>
-																{isPending &&
-																	"⏳ Waiting for wallet confirmation..."}
-																{isConfirming &&
-																	"⏳ Waiting for transaction confirmation..."}
-																{isConfirmed && (
-																	<div>
-																		✅ Transaction confirmed!
-																		{hash && (
-																			<div
-																				style={{
-																					marginTop: "4px",
-																					fontFamily: "monospace",
-																					fontSize: "0.75rem",
-																				}}
-																			>
-																				<Link
-																					to={`/${chainId}/tx/${hash}`}
-																					style={{
-																						color: "#10b981",
-																						textDecoration: "underline",
-																					}}
-																				>
-																					View transaction
-																				</Link>
-																			</div>
-																		)}
-																	</div>
-																)}
-																{isError && (
-																	<div>
-																		❌ Error:{" "}
-																		{error?.message || "Transaction failed"}
-																	</div>
-																)}
-															</div>
-														)}
-
-														<div style={{ display: "flex", gap: "8px" }}>
-															<button
-																onClick={handleWriteFunction}
-																disabled={isPending || isConfirming}
-																style={{
-																	flex: 1,
-																	padding: "10px 16px",
-																	background:
-																		isPending || isConfirming
-																			? "rgba(245, 158, 11, 0.1)"
-																			: "rgba(245, 158, 11, 0.2)",
-																	color:
-																		isPending || isConfirming
-																			? "rgba(245, 158, 11, 0.5)"
-																			: "#f59e0b",
-																	border: "1px solid rgba(245, 158, 11, 0.4)",
-																	borderRadius: "6px",
-																	fontSize: "0.85rem",
-																	fontWeight: "600",
-																	cursor:
-																		isPending || isConfirming
-																			? "not-allowed"
-																			: "pointer",
-																	transition: "all 0.2s",
-																	opacity: isPending || isConfirming ? 0.6 : 1,
-																}}
-																onMouseEnter={(e) => {
-																	if (!isPending && !isConfirming) {
-																		e.currentTarget.style.background =
-																			"rgba(245, 158, 11, 0.3)";
-																	}
-																}}
-																onMouseLeave={(e) => {
-																	if (!isPending && !isConfirming) {
-																		e.currentTarget.style.background =
-																			"rgba(245, 158, 11, 0.2)";
-																	}
-																}}
-															>
-																{isPending
-																	? "Confirming in Wallet..."
-																	: isConfirming
-																		? "Processing..."
-																		: "Write"}
-															</button>
-															<button
-																onClick={() => setSelectedWriteFunction(null)}
-																style={{
-																	padding: "10px 16px",
-																	background: "rgba(239, 68, 68, 0.2)",
-																	color: "#ef4444",
-																	border: "1px solid rgba(239, 68, 68, 0.4)",
-																	borderRadius: "6px",
-																	fontSize: "0.85rem",
-																	fontWeight: "600",
-																	cursor: "pointer",
-																	transition: "all 0.2s",
-																}}
-																onMouseEnter={(e) => {
-																	e.currentTarget.style.background =
-																		"rgba(239, 68, 68, 0.3)";
-																}}
-																onMouseLeave={(e) => {
-																	e.currentTarget.style.background =
-																		"rgba(239, 68, 68, 0.2)";
-																}}
-															>
-																Cancel
-															</button>
-														</div>
-													</div>
-												)}
-											</div>
-										</div>
-									)}
-
-									{sourcifyData && (
-										<div className="tx-row">
-											<span className="tx-label">Sourcify</span>
-											<a
-												href={`https://repo.sourcify.dev/contracts/full_match/${chainId}/${addressHash}/`}
-												target="_blank"
-												rel="noopener noreferrer"
-												style={{
-													color: "#10b981",
-													textDecoration: "none",
-													fontWeight: "600",
-													display: "inline-flex",
-													alignItems: "center",
-													gap: "6px",
-												}}
-											>
-												View Full Contract on Sourcify ↗
-											</a>
-										</div>
-									)}
-								</>
-							)}
-						</div>
-					)}
-
-					{/* Last Transactions Section */}
-					<div className="tx-details">
-						<div
-							className="tx-section"
-							style={{
-								display: "flex",
-								justifyContent: "space-between",
-								alignItems: "center",
-							}}
-						>
-							<span className="tx-section-title">Last Transactions</span>
-							{transactionsResult && (
-								<span
-									style={{
-										fontSize: "0.85rem",
-										color: transactionsResult.isComplete
-											? "#10b981"
-											: "#f59e0b",
-										display: "flex",
-										alignItems: "center",
-										gap: "6px",
-									}}
-								>
-									{transactionsResult.source === "trace_filter" && (
-										<>
-											<span style={{ color: "#10b981" }}>●</span>
-											Complete history ({transactionDetails.length}{" "}
-											transactions)
-										</>
-									)}
-									{transactionsResult.source === "logs" && (
-										<>
-											<span style={{ color: "#f59e0b" }}>●</span>
-											Partial (logs only) - {transactionDetails.length}{" "}
-											transactions
-										</>
-									)}
-									{transactionsResult.source === "none" && (
-										<>
-											<span style={{ color: "#ef4444" }}>●</span>
-											No data available
-										</>
-									)}
-								</span>
-							)}
-						</div>
-
-						{/* Warning message for partial data */}
-						{transactionsResult?.message && (
-							<div
-								style={{
-									padding: "12px 16px",
-									background:
-										transactionsResult.source === "none"
-											? "rgba(239, 68, 68, 0.1)"
-											: "rgba(245, 158, 11, 0.1)",
-									borderBottom: "1px solid rgba(0, 0, 0, 0.1)",
-									fontSize: "0.85rem",
-									color:
-										transactionsResult.source === "none"
-											? "#ef4444"
-											: "#f59e0b",
-									display: "flex",
-									alignItems: "center",
-									gap: "8px",
-								}}
-							>
-								<span style={{ fontSize: "1rem" }}>
-									{transactionsResult.source === "none" ? "⚠️" : "ℹ️"}
-								</span>
-								{transactionsResult.message}
-							</div>
-						)}
-
-						{/* Loading state */}
-						{loadingTxDetails && (
-							<div className="tx-history-empty">
-								Loading transaction details...
-							</div>
-						)}
-
-						{/* Transaction table */}
-						{!loadingTxDetails && transactionDetails.length > 0 && (
-							<div className="address-table-container">
-								<table className="recent-transactions-table">
-									<thead>
-										<tr>
-											<th>TX Hash</th>
-											<th>From</th>
-											<th>To</th>
-											<th>Value</th>
-											<th>Status</th>
-										</tr>
-									</thead>
-									<tbody>
-										{transactionDetails.map((tx) => (
-											<tr key={tx.hash}>
-												<td>
-													<Link
-														to={`/${chainId}/tx/${tx.hash}`}
-														className="address-table-link"
-													>
-														{truncate(tx.hash, 8, 6)}
-													</Link>
-												</td>
-												<td>
-													<Link
-														to={`/${chainId}/address/${tx.from}`}
-														className="address-table-link"
-													>
-														{tx.from?.toLowerCase() ===
-														addressHash.toLowerCase()
-															? "This Address"
-															: truncate(tx.from || "", 6, 4)}
-													</Link>
-												</td>
-												<td>
-													{tx.to ? (
-														<Link
-															to={`/${chainId}/address/${tx.to}`}
-															style={{
-																color:
-																	tx.to?.toLowerCase() ===
-																	addressHash.toLowerCase()
-																		? "#f59e0b"
-																		: "#10b981",
-																textDecoration: "none",
-																fontFamily: "monospace",
-																fontSize: "0.9rem",
-															}}
-														>
-															{tx.to?.toLowerCase() ===
-															addressHash.toLowerCase()
-																? "This Address"
-																: truncate(tx.to, 6, 4)}
-														</Link>
-													) : (
-														<span className="contract-creation-badge">
-															Contract Creation
-														</span>
-													)}
-												</td>
-												<td className="table-right">
-													<span className="address-table-value">
-														{formatValue(tx.value)}
-													</span>
-												</td>
-												<td className="table-center">
-													{tx.receipt?.status === "0x1" ? (
-														<span className="table-status-badge table-status-success">
-															✓ Success
-														</span>
-													) : tx.receipt?.status === "0x0" ? (
-														<span className="table-status-badge table-status-failed">
-															✗ Failed
-														</span>
-													) : (
-														<span className="table-status-badge table-status-pending">
-															⏳ Pending
-														</span>
-													)}
-												</td>
-											</tr>
-										))}
-									</tbody>
-								</table>
-							</div>
-						)}
-
-						{/* Empty state */}
-						{!loadingTxDetails &&
-							transactionDetails.length === 0 &&
-							!transactionsResult?.message && (
-								<div className="tx-history-empty">
-									No transactions found for this address
-								</div>
-							)}
-					</div>
-
-					{/* Storage Section (for contracts) */}
-					{isContract && (
-						<div className="block-display-card">
-							<div className="block-display-header">
-								<span className="block-label">Contract Storage</span>
-							</div>
-							<div className="tx-details">
-								<div className="tx-row">
-									<span className="tx-label">Storage Slot:</span>
-									<span className="tx-value">
-										<div className="storage-input-row">
-											<input
-												type="text"
-												placeholder="e.g., 0x0"
-												value={storageSlot}
-												onChange={(e) => setStorageSlot(e.target.value)}
-												className="storage-input"
-											/>
-											<button
-												onClick={handleGetStorage}
-												className="storage-button"
-											>
-												Get
-											</button>
-										</div>
-									</span>
-								</div>
-								{storageValue && (
-									<div className="tx-row">
-										<span className="tx-label">Value:</span>
-										<span className="tx-value">
-											<div className="storage-value-display">
-												{storageValue}
-											</div>
-										</span>
-									</div>
-								)}
-							</div>
-						</div>
-					)}
-				</div>
-			</div>
-		);
-	},
-);
-
-AddressDisplay.displayName = "AddressDisplay";
-
-export default AddressDisplay;
diff --git a/src/components/common/BlockDisplay.tsx b/src/components/common/BlockDisplay.tsx
deleted file mode 100644
index f7a765a..0000000
--- a/src/components/common/BlockDisplay.tsx
+++ /dev/null
@@ -1,492 +0,0 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import type { Block, BlockArbitrum, RPCMetadata } from "../../types";
-import { RPCIndicator } from "./RPCIndicator";
-
-interface BlockDisplayProps {
-	block: Block | BlockArbitrum;
-	chainId?: string;
-	metadata?: RPCMetadata;
-	selectedProvider?: string | null;
-	onProviderSelect?: (provider: string) => void;
-}
-
-const BlockDisplay: React.FC<BlockDisplayProps> = React.memo(
-	({ block, chainId, metadata, selectedProvider, onProviderSelect }) => {
-		const [showWithdrawals, setShowWithdrawals] = useState(false);
-		const [showTransactions, setShowTransactions] = useState(false);
-		const [showMoreDetails, setShowMoreDetails] = useState(false);
-
-		// Check if this is an Arbitrum block
-		const isArbitrumBlock = (
-			block: Block | BlockArbitrum,
-		): block is BlockArbitrum => {
-			return "l1BlockNumber" in block;
-		};
-
-		// Helper to format timestamp
-		const formatTimestamp = (timestamp: string) => {
-			try {
-				const ts = Number(timestamp);
-				const date = new Date(ts * 1000);
-				return new Intl.DateTimeFormat(undefined, {
-					year: "numeric",
-					month: "short",
-					day: "2-digit",
-					hour: "2-digit",
-					minute: "2-digit",
-					second: "2-digit",
-					timeZoneName: "short",
-				}).format(date);
-			} catch (e) {
-				return timestamp;
-			}
-		};
-
-		const formatTimeAgo = (timestamp: string) => {
-			const ts = Number(timestamp) * 1000;
-			const diffMs = Date.now() - ts;
-			const diffSeconds = Math.floor(Math.abs(diffMs) / 1000);
-
-			if (diffSeconds < 5) {
-				return diffMs >= 0 ? "just now" : "in a few seconds";
-			}
-
-			const units = [
-				{ label: "day", seconds: 60 * 60 * 24 },
-				{ label: "hour", seconds: 60 * 60 },
-				{ label: "minute", seconds: 60 },
-			];
-
-			for (const unit of units) {
-				if (diffSeconds >= unit.seconds) {
-					const value = Math.floor(diffSeconds / unit.seconds);
-					const plural = value === 1 ? "" : "s";
-					return diffMs >= 0
-						? `${value} ${unit.label}${plural} ago`
-						: `in ${value} ${unit.label}${plural}`;
-				}
-			}
-
-			return diffMs >= 0
-				? `${diffSeconds} second${diffSeconds === 1 ? "" : "s"} ago`
-				: `in ${diffSeconds} second${diffSeconds === 1 ? "" : "s"}`;
-		};
-
-		const formatGwei = (value: string) => {
-			try {
-				const gwei = Number(value) / 1e9;
-				return `${gwei.toFixed(9)} Gwei`;
-			} catch (e) {
-				return value;
-			}
-		};
-
-		const formatEth = (value: string) => {
-			try {
-				const eth = Number(value) / 1e18;
-				return `${eth.toFixed(12)} ETH`;
-			} catch (e) {
-				return value;
-			}
-		};
-
-		const blockNumber = Number(block.number);
-		const timestampFormatted = formatTimestamp(block.timestamp);
-		const timestampAge = formatTimeAgo(block.timestamp);
-		const gasUsedPct = (
-			(Number(block.gasUsed) / Number(block.gasLimit)) *
-			100
-		).toFixed(1);
-
-		// Calculate burnt fees if baseFeePerGas exists
-		const burntFees = block.baseFeePerGas
-			? (BigInt(block.gasUsed) * BigInt(block.baseFeePerGas)).toString()
-			: null;
-
-		return (
-			<div className="block-display-card">
-				<div
-					className="block-display-header"
-					style={{
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "center",
-					}}
-				>
-					<span className="block-label">Block Details</span>
-					{metadata && selectedProvider !== undefined && onProviderSelect && (
-						<RPCIndicator
-							metadata={metadata}
-							selectedProvider={selectedProvider}
-							onProviderSelect={onProviderSelect}
-						/>
-					)}
-				</div>
-
-				<div className="tx-details">
-					{/* Block Height */}
-					<div className="tx-row">
-						<span className="tx-label">Block Height:</span>
-						<span className="tx-value">
-							<span className="block-height-value">
-								{blockNumber.toLocaleString()}
-							</span>
-							{chainId && (
-								<span className="block-nav">
-									{blockNumber > 0 && (
-										<Link
-											to={`/${chainId}/block/${blockNumber - 1}`}
-											className="block-nav-btn"
-											title="Previous block"
-										>
-											←
-										</Link>
-									)}
-									<Link
-										to={`/${chainId}/block/${blockNumber + 1}`}
-										className="block-nav-btn"
-										title="Next block"
-									>
-										→
-									</Link>
-								</span>
-							)}
-						</span>
-					</div>
-
-					{/* Timestamp */}
-					<div className="tx-row">
-						<span className="tx-label">Timestamp:</span>
-						<span className="tx-value">
-							<span className="tx-age">{timestampAge}</span>
-							<span className="tx-timestamp-full">({timestampFormatted})</span>
-						</span>
-					</div>
-
-					{/* Transactions */}
-					<div className="tx-row">
-						<span className="tx-label">Transactions:</span>
-						<span className="tx-value">
-							<span className="tx-value-highlight">
-								{block.transactions ? block.transactions.length : 0}{" "}
-								transactions
-							</span>{" "}
-							in this block
-						</span>
-					</div>
-
-					{/* Withdrawals count */}
-					{block.withdrawals && block.withdrawals.length > 0 && (
-						<div className="tx-row">
-							<span className="tx-label">Withdrawals:</span>
-							<span className="tx-value">
-								{block.withdrawals.length} withdrawal
-								{block.withdrawals.length !== 1 ? "s" : ""} in this block
-							</span>
-						</div>
-					)}
-
-					{/* Fee Recipient (Miner) */}
-					<div className="tx-row">
-						<span className="tx-label">Fee Recipient:</span>
-						<span className="tx-value tx-mono">
-							{chainId ? (
-								<Link
-									to={`/${chainId}/address/${block.miner}`}
-									className="link-accent"
-								>
-									{block.miner}
-								</Link>
-							) : (
-								block.miner
-							)}
-						</span>
-					</div>
-
-					{/* Gas Used */}
-					<div className="tx-row">
-						<span className="tx-label">Gas Used:</span>
-						<span className="tx-value">
-							{Number(block.gasUsed).toLocaleString()}
-							<span className="tx-gas-pct"> ({gasUsedPct}%)</span>
-						</span>
-					</div>
-
-					{/* Gas Limit */}
-					<div className="tx-row">
-						<span className="tx-label">Gas Limit:</span>
-						<span className="tx-value">
-							{Number(block.gasLimit).toLocaleString()}
-						</span>
-					</div>
-
-					{/* Base Fee Per Gas */}
-					{block.baseFeePerGas && (
-						<div className="tx-row">
-							<span className="tx-label">Base Fee Per Gas:</span>
-							<span className="tx-value">
-								{formatGwei(block.baseFeePerGas)}
-							</span>
-						</div>
-					)}
-
-					{/* Burnt Fees */}
-					{burntFees && (
-						<div className="tx-row">
-							<span className="tx-label">Burnt Fees:</span>
-							<span className="tx-value">
-								<span className="burnt-fees">🔥 {formatEth(burntFees)}</span>
-							</span>
-						</div>
-					)}
-
-					{/* Extra Data */}
-					{block.extraData && block.extraData !== "0x" && (
-						<div className="tx-row">
-							<span className="tx-label">Extra Data:</span>
-							<span className="tx-value tx-mono">{block.extraData}</span>
-						</div>
-					)}
-
-					{/* Difficulty */}
-					{Number(block.difficulty) > 0 && (
-						<div className="tx-row">
-							<span className="tx-label">Difficulty:</span>
-							<span className="tx-value">
-								{Number(block.difficulty).toLocaleString()}
-							</span>
-						</div>
-					)}
-
-					{/* Total Difficulty */}
-					{Number(block.totalDifficulty) > 0 && (
-						<div className="tx-row">
-							<span className="tx-label">Total Difficulty:</span>
-							<span className="tx-value">
-								{Number(block.totalDifficulty).toLocaleString()}
-							</span>
-						</div>
-					)}
-
-					{/* Size */}
-					<div className="tx-row">
-						<span className="tx-label">Size:</span>
-						<span className="tx-value">
-							{Number(block.size).toLocaleString()} bytes
-						</span>
-					</div>
-
-					{/* Arbitrum-specific fields */}
-					{isArbitrumBlock(block) && (
-						<>
-							<div className="tx-row tx-row-arbitrum">
-								<span className="tx-label">L1 Block Number:</span>
-								<span className="tx-value">
-									{Number(block.l1BlockNumber).toLocaleString()}
-								</span>
-							</div>
-							<div className="tx-row tx-row-arbitrum">
-								<span className="tx-label">Send Count:</span>
-								<span className="tx-value">{block.sendCount}</span>
-							</div>
-							<div className="tx-row tx-row-arbitrum">
-								<span className="tx-label">Send Root:</span>
-								<span className="tx-value tx-mono">{block.sendRoot}</span>
-							</div>
-						</>
-					)}
-
-					{/* More Details (collapsible) */}
-					<div className="tx-row tx-row-vertical">
-						<button
-							className="more-details-toggle"
-							onClick={() => setShowMoreDetails(!showMoreDetails)}
-						>
-							{showMoreDetails ? "− Hide" : "+ Show"} More Details
-						</button>
-
-						{showMoreDetails && (
-							<div className="more-details-content">
-								<div className="detail-row">
-									<span className="detail-label">Hash:</span>
-									<span className="detail-value tx-mono">{block.hash}</span>
-								</div>
-								<div className="detail-row">
-									<span className="detail-label">Parent Hash:</span>
-									<span className="detail-value tx-mono">
-										{chainId &&
-										block.parentHash !==
-											"0x0000000000000000000000000000000000000000000000000000000000000000" ? (
-											<Link
-												to={`/${chainId}/block/${blockNumber - 1}`}
-												className="link-accent"
-											>
-												{block.parentHash}
-											</Link>
-										) : (
-											block.parentHash
-										)}
-									</span>
-								</div>
-								<div className="detail-row">
-									<span className="detail-label">State Root:</span>
-									<span className="detail-value tx-mono">
-										{block.stateRoot}
-									</span>
-								</div>
-								<div className="detail-row">
-									<span className="detail-label">Transactions Root:</span>
-									<span className="detail-value tx-mono">
-										{block.transactionsRoot}
-									</span>
-								</div>
-								<div className="detail-row">
-									<span className="detail-label">Receipts Root:</span>
-									<span className="detail-value tx-mono">
-										{block.receiptsRoot}
-									</span>
-								</div>
-								{block.withdrawalsRoot && (
-									<div className="detail-row">
-										<span className="detail-label">Withdrawals Root:</span>
-										<span className="detail-value tx-mono">
-											{block.withdrawalsRoot}
-										</span>
-									</div>
-								)}
-								<div className="detail-row">
-									<span className="detail-label">Logs Bloom:</span>
-									<div className="detail-value">
-										<code className="logs-bloom">{block.logsBloom}</code>
-									</div>
-								</div>
-								<div className="detail-row">
-									<span className="detail-label">Nonce:</span>
-									<span className="detail-value">{block.nonce}</span>
-								</div>
-								<div className="detail-row">
-									<span className="detail-label">Mix Hash:</span>
-									<span className="detail-value tx-mono">{block.mixHash}</span>
-								</div>
-								<div className="detail-row">
-									<span className="detail-label">Sha3 Uncles:</span>
-									<span className="detail-value tx-mono">
-										{block.sha3Uncles}
-									</span>
-								</div>
-							</div>
-						)}
-					</div>
-				</div>
-
-				{/* Transactions List */}
-				{block.transactions && block.transactions.length > 0 && (
-					<div className="tx-section">
-						<div className="tx-section-header">
-							<button
-								className="tx-section-toggle"
-								onClick={() => setShowTransactions(!showTransactions)}
-							>
-								<span className="tx-section-title">
-									Transactions ({block.transactions.length})
-								</span>
-								<span className="tx-section-arrow">
-									{showTransactions ? "▼" : "▶"}
-								</span>
-							</button>
-						</div>
-						{showTransactions && (
-							<div className="tx-list">
-								{block.transactions.map((txHash, index) => (
-									<div key={index} className="tx-list-item">
-										<span className="tx-list-index">{index}</span>
-										<span className="tx-list-hash tx-mono">
-											{chainId ? (
-												<Link
-													to={`/${chainId}/tx/${txHash}`}
-													className="link-accent"
-												>
-													{txHash}
-												</Link>
-											) : (
-												txHash
-											)}
-										</span>
-									</div>
-								))}
-							</div>
-						)}
-					</div>
-				)}
-
-				{/* Withdrawals List */}
-				{block.withdrawals && block.withdrawals.length > 0 && (
-					<div className="tx-section">
-						<div className="tx-section-header">
-							<button
-								className="tx-section-toggle"
-								onClick={() => setShowWithdrawals(!showWithdrawals)}
-							>
-								<span className="tx-section-title">
-									Withdrawals ({block.withdrawals.length})
-								</span>
-								<span className="tx-section-arrow">
-									{showWithdrawals ? "▼" : "▶"}
-								</span>
-							</button>
-						</div>
-						{showWithdrawals && (
-							<div className="tx-logs">
-								{block.withdrawals.map((withdrawal, index) => (
-									<div key={index} className="tx-log">
-										<div className="tx-log-index">{index}</div>
-										<div className="tx-log-content">
-											<div className="tx-log-row">
-												<span className="tx-log-label">Index</span>
-												<span className="tx-log-value">
-													{Number(withdrawal.index).toLocaleString()}
-												</span>
-											</div>
-											<div className="tx-log-row">
-												<span className="tx-log-label">Validator</span>
-												<span className="tx-log-value">
-													{Number(withdrawal.validatorIndex).toLocaleString()}
-												</span>
-											</div>
-											<div className="tx-log-row">
-												<span className="tx-log-label">Address</span>
-												<span className="tx-log-value tx-mono">
-													{chainId ? (
-														<Link
-															to={`/${chainId}/address/${withdrawal.address}`}
-															className="link-accent"
-														>
-															{withdrawal.address}
-														</Link>
-													) : (
-														withdrawal.address
-													)}
-												</span>
-											</div>
-											<div className="tx-log-row">
-												<span className="tx-log-label">Amount</span>
-												<span className="tx-log-value tx-value-highlight">
-													{(Number(withdrawal.amount) / 1e9).toFixed(9)} ETH
-												</span>
-											</div>
-										</div>
-									</div>
-								))}
-							</div>
-						)}
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-
-BlockDisplay.displayName = "BlockDisplay";
-
-export default BlockDisplay;
diff --git a/src/components/common/ErrorBoundary.tsx b/src/components/common/ErrorBoundary.tsx
index 16b93a8..0514729 100644
--- a/src/components/common/ErrorBoundary.tsx
+++ b/src/components/common/ErrorBoundary.tsx
@@ -1,125 +1,129 @@
-import React, { Component, ErrorInfo, ReactNode } from "react";
+import React, { Component, type ErrorInfo, type ReactNode } from "react";
 
 interface Props {
-	children: ReactNode;
-	fallback?: ReactNode;
+  children: ReactNode;
+  fallback?: ReactNode;
 }
 
 interface State {
-	hasError: boolean;
-	error?: Error;
-	errorInfo?: ErrorInfo;
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: ErrorInfo;
 }
 
 export class ErrorBoundary extends Component<Props, State> {
-	constructor(props: Props) {
-		super(props);
-		this.state = { hasError: false };
-	}
-
-	static getDerivedStateFromError(error: Error): State {
-		// Update state so the next render will show the fallback UI
-		return { hasError: true, error };
-	}
-
-	componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-		// Log error details
-		console.error("ErrorBoundary caught an error:", error, errorInfo);
-
-		this.setState({
-			error,
-			errorInfo,
-		});
-
-		// You can also log the error to an error reporting service here
-		// Example: errorReportingService.captureException(error, { extra: errorInfo });
-	}
-
-	private handleReload = () => {
-		window.location.reload();
-	};
-
-	private handleGoHome = () => {
-		window.location.href = "/";
-	};
-
-	render() {
-		if (this.state.hasError) {
-			// Custom fallback UI
-			if (this.props.fallback) {
-				return this.props.fallback;
-			}
-
-			// Default error UI
-			return (
-				<div className="error-boundary">
-					<div className="error-boundary-container">
-						<div className="error-boundary-content">
-							<h2>⚠️ Something went wrong</h2>
-							<p>
-								We're sorry, but something unexpected happened. The application
-								encountered an error.
-							</p>
-
-							<div className="error-boundary-actions">
-								<button className="btn-md primary" onClick={this.handleReload}>
-									Reload Page
-								</button>
-								<button className="btn-md outline" onClick={this.handleGoHome}>
-									Go Home
-								</button>
-							</div>
-
-							{process.env.NODE_ENV === "development" && this.state.error && (
-								<details className="error-boundary-details">
-									<summary>Error Details (Development Mode)</summary>
-									<div className="error-boundary-debug">
-										<h4>Error:</h4>
-										<pre>{this.state.error.toString()}</pre>
-
-										{this.state.errorInfo && (
-											<>
-												<h4>Component Stack:</h4>
-												<pre>{this.state.errorInfo.componentStack}</pre>
-											</>
-										)}
-									</div>
-								</details>
-							)}
-						</div>
-					</div>
-				</div>
-			);
-		}
-
-		return this.props.children;
-	}
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Log error details
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+
+    this.setState({
+      error,
+      errorInfo,
+    });
+
+    // You can also log the error to an error reporting service here
+    // Example: errorReportingService.captureException(error, { extra: errorInfo });
+  }
+
+  private handleReload = () => {
+    window.location.reload();
+  };
+
+  private handleGoHome = () => {
+    const isGhPages =
+      typeof window !== "undefined" && window.location.hostname.includes("github.io");
+    window.location.href = isGhPages ? "/explorer/" : "/";
+  };
+
+  render() {
+    if (this.state.hasError) {
+      // Custom fallback UI
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      // Default error UI
+      return (
+        <div className="error-boundary">
+          <div className="error-boundary-container">
+            <div className="error-boundary-content">
+              <h2>⚠️ Something went wrong</h2>
+              <p>
+                We're sorry, but something unexpected happened. The application encountered an
+                error.
+              </p>
+
+              <div className="error-boundary-actions">
+                {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                <button className="btn-md primary" onClick={this.handleReload}>
+                  Reload Page
+                </button>
+                {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                <button className="btn-md outline" onClick={this.handleGoHome}>
+                  Go Home
+                </button>
+              </div>
+
+              {process.env.NODE_ENV === "development" && this.state.error && (
+                <details className="error-boundary-details">
+                  <summary>Error Details (Development Mode)</summary>
+                  <div className="error-boundary-debug">
+                    <h4>Error:</h4>
+                    <pre>{this.state.error.toString()}</pre>
+
+                    {this.state.errorInfo && (
+                      <>
+                        <h4>Component Stack:</h4>
+                        <pre>{this.state.errorInfo.componentStack}</pre>
+                      </>
+                    )}
+                  </div>
+                </details>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
 }
 
 // Hook version for functional components that need error boundary functionality
 export const useErrorHandler = () => {
-	const [error, setError] = React.useState<Error | null>(null);
-
-	const resetError = React.useCallback(() => {
-		setError(null);
-	}, []);
-
-	const captureError = React.useCallback((error: Error) => {
-		console.error("Error captured:", error);
-		setError(error);
-	}, []);
-
-	React.useEffect(() => {
-		if (error) {
-			throw error;
-		}
-	}, [error]);
-
-	return {
-		captureError,
-		resetError,
-		hasError: !!error,
-	};
+  const [error, setError] = React.useState<Error | null>(null);
+
+  const resetError = React.useCallback(() => {
+    setError(null);
+  }, []);
+
+  const captureError = React.useCallback((error: Error) => {
+    console.error("Error captured:", error);
+    setError(error);
+  }, []);
+
+  React.useEffect(() => {
+    if (error) {
+      throw error;
+    }
+  }, [error]);
+
+  return {
+    captureError,
+    resetError,
+    hasError: !!error,
+  };
 };
 
 export default ErrorBoundary;
diff --git a/src/components/common/ExtraDataDisplay.tsx b/src/components/common/ExtraDataDisplay.tsx
new file mode 100644
index 0000000..2316ee0
--- /dev/null
+++ b/src/components/common/ExtraDataDisplay.tsx
@@ -0,0 +1,74 @@
+import type React from "react";
+import { useMemo, useState } from "react";
+
+interface ExtraDataDisplayProps {
+  hexData: string;
+  showToggle?: boolean;
+}
+
+const ExtraDataDisplay: React.FC<ExtraDataDisplayProps> = ({ hexData, showToggle = true }) => {
+  const [showRaw, setShowRaw] = useState(false);
+
+  const decoded = useMemo(() => {
+    if (!hexData || hexData === "0x") return null;
+
+    try {
+      // Remove 0x prefix
+      const hex = hexData.startsWith("0x") ? hexData.slice(2) : hexData;
+
+      // Convert hex to bytes
+      const bytes: number[] = [];
+      for (let i = 0; i < hex.length; i += 2) {
+        bytes.push(Number.parseInt(hex.substr(i, 2), 16));
+      }
+
+      // Check if all bytes are printable ASCII (32-126)
+      const isPrintable = bytes.every((b) => b >= 32 && b <= 126);
+
+      if (isPrintable && bytes.length > 0) {
+        return String.fromCharCode(...bytes);
+      }
+
+      // Try UTF-8 decoding
+      const decoder = new TextDecoder("utf-8", { fatal: true });
+      const uint8Array = new Uint8Array(bytes);
+      const decoded = decoder.decode(uint8Array);
+
+      // Check if result contains mostly printable characters
+      const printableCount = decoded.split("").filter((c) => c.charCodeAt(0) >= 32).length;
+      if (printableCount / decoded.length > 0.8) {
+        return decoded;
+      }
+
+      return null;
+    } catch {
+      return null;
+    }
+  }, [hexData]);
+
+  const hasDecodedValue = decoded !== null && decoded.length > 0;
+  const displayValue = showRaw || !hasDecodedValue ? hexData : decoded;
+
+  return (
+    <div className="extra-data-display">
+      <span className={`extra-data-value ${showRaw ? "tx-mono" : ""}`}>
+        {hasDecodedValue && !showRaw && (
+          <span className="extra-data-decoded">"{displayValue}"</span>
+        )}
+        {(!hasDecodedValue || showRaw) && <span className="tx-mono">{displayValue}</span>}
+      </span>
+      {showToggle && hasDecodedValue && (
+        <button
+          type="button"
+          className="extra-data-toggle"
+          onClick={() => setShowRaw(!showRaw)}
+          title={showRaw ? "Show decoded" : "Show raw hex"}
+        >
+          {showRaw ? "UTF-8" : "Hex"}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ExtraDataDisplay;
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
index 128bc32..cac2c08 100644
--- a/src/components/common/Footer.tsx
+++ b/src/components/common/Footer.tsx
@@ -1,73 +1,105 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import type React from "react";
+import { useNavigate } from "react-router";
 import { ENVIRONMENT } from "../../utils/constants";
 
 interface FooterProps {
-	className?: string;
+  className?: string;
 }
 
 const Footer: React.FC<FooterProps> = ({ className = "" }) => {
-	// Get commit hash from environment variable, fallback to 'development'
-	const commitHash = process.env.REACT_APP_COMMIT_HASH || "development";
+  const navigate = useNavigate();
 
-	// Format commit hash - show first 7 characters if it's a full hash
-	const formattedCommitHash =
-		commitHash.length > 7 ? commitHash.substring(0, 7) : commitHash;
+  // Get commit hash from environment variable, fallback to 'development'
+  const commitHash = process.env.REACT_APP_COMMIT_HASH || "development";
 
-	// Get version from environment variable or fallback
-	const appVersion = process.env.REACT_APP_VERSION || "0.1.0";
+  // Format commit hash - show first 7 characters if it's a full hash
+  const formattedCommitHash = commitHash.length > 7 ? commitHash.substring(0, 7) : commitHash;
 
-	// Get the GitHub repository URL from package.json or environment
-	const repoUrl =
-		process.env.REACT_APP_GITHUB_REPO || "https://github.com/openscan-explorer/explorer";
+  // Get version from environment variable or fallback
+  const appVersion = process.env.REACT_APP_VERSION || "0.1.0";
 
-	// Determine footer version class based on environment
-	const getVersionClass = () => {
-		if (ENVIRONMENT === "staging") return "footer-version-staging";
-		if (ENVIRONMENT === "development") return "footer-version-development";
-		return "";
-	};
-	return (
-		<footer className={`app-footer ${className}`}>
-			<div className="footer-content">
-				<div className="footer-left">
-					<span className="footer-link">Donations: openscan.eth</span>
-				</div>
-				<div className={`footer-version ${getVersionClass()}`}>
-					<span className="version-label">Version:</span>
-					<a
-						href={`${repoUrl}/commit/${commitHash}`}
-						target="_blank"
-						rel="noopener noreferrer"
-						className="commit-link"
-						title={`View commit ${formattedCommitHash} on GitHub`}
-					>
-						{appVersion} {formattedCommitHash}
-					</a>
-					{ENVIRONMENT !== "production" && (
-						<span className="commit-link environment-tag">{ENVIRONMENT}</span>
-					)}
-					<a
-						href={repoUrl}
-						target="_blank"
-						rel="noopener noreferrer"
-						className="github-btn-footer"
-						title="View on GitHub"
-					>
-						<svg
-							width="16"
-							height="16"
-							viewBox="0 0 24 24"
-							fill="currentColor"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
-						</svg>
-					</a>
-				</div>
-			</div>
-		</footer>
-	);
+  // Get the GitHub repository URL from package.json or environment
+  const repoUrl =
+    process.env.REACT_APP_GITHUB_REPO || "https://github.com/openscan-explorer/explorer";
+
+  // Determine footer version class based on environment
+  const getVersionClass = () => {
+    if (ENVIRONMENT === "staging") return "footer-version-staging";
+    if (ENVIRONMENT === "development") return "footer-version-development";
+    return "";
+  };
+
+  const goToSubscriptions = () => {
+    navigate("/subscriptions");
+  };
+
+  const goToSupporters = () => {
+    navigate("/supporters");
+  };
+  return (
+    <footer className={`app-footer ${className}`}>
+      <div className="footer-content">
+        <div className="footer-left">
+          <button
+            type="button"
+            onClick={() => navigate("/about")}
+            className="footer-link btn-reset"
+          >
+            About Openscan
+          </button>
+          |
+          <button type="button" onClick={goToSubscriptions} className="footer-link btn-reset">
+            Subscribe
+          </button>
+          |
+          <button type="button" onClick={goToSupporters} className="footer-link btn-reset">
+            Our Supporters ❤️
+          </button>
+        </div>
+        <div className={`footer-right ${getVersionClass()}`}>
+          <a
+            href={`${repoUrl}/issues/new?template=bug_report.md`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="footer-link"
+            title="Report a bug"
+          >
+            Report a Bug
+          </a>
+          <a
+            href={`${repoUrl}/commit/${commitHash}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="commit-link"
+            title={`View commit ${formattedCommitHash} on GitHub`}
+          >
+            v{appVersion} {formattedCommitHash}
+          </a>
+          {ENVIRONMENT !== "production" && (
+            <span className="commit-link environment-tag">{ENVIRONMENT}</span>
+          )}
+          <a
+            href={repoUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="github-btn-footer"
+            title="View on GitHub"
+          >
+            {/** biome-ignore lint/a11y/noSvgWithoutTitle: <TODO> */}
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
 };
 
 export default Footer;
diff --git a/src/components/common/IsometricBlocks.tsx b/src/components/common/IsometricBlocks.tsx
index fe97bcb..90f8c0a 100644
--- a/src/components/common/IsometricBlocks.tsx
+++ b/src/components/common/IsometricBlocks.tsx
@@ -1,162 +1,139 @@
-import React, {
-	useState,
-	useEffect,
-	useCallback,
-	useMemo,
-	useRef,
-} from "react";
+import type React from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 // Network colors matching the logo - Ethereum weighted more heavily
 const NETWORKS = [
-	{ color: "#627EEA", weight: 70 }, // Ethereum - most common
-	{ color: "#FFF100", weight: 6 }, // Hardhat/Local
-	{ color: "#28A0F0", weight: 6 }, // Arbitrum
-	{ color: "#FF0420", weight: 6 }, // Optimism
-	{ color: "#0052FF", weight: 6 }, // Base
-	{ color: "#CFB4FF", weight: 6 }, // Sepolia
+  { color: "#627EEA", weight: 70 }, // Ethereum - most common
+  { color: "#FFF100", weight: 6 }, // Hardhat/Local
+  { color: "#28A0F0", weight: 6 }, // Arbitrum
+  { color: "#FF0420", weight: 6 }, // Optimism
+  { color: "#0052FF", weight: 6 }, // Base
+  { color: "#CFB4FF", weight: 6 }, // Sepolia
 ];
 
 // Create weighted array for random selection
 const WEIGHTED_COLORS = NETWORKS.flatMap((n) => Array(n.weight).fill(n.color));
 
 interface CubeData {
-	id: number;
-	x: number;
-	y: number;
-	color: string;
+  id: number;
+  x: number;
+  y: number;
+  color: string;
 }
 
 interface IsometricCubeProps {
-	x: number;
-	y: number;
-	size: number;
-	color: string;
+  x: number;
+  y: number;
+  size: number;
+  color: string;
 }
 
 const IsometricCube: React.FC<IsometricCubeProps> = ({ x, y, size, color }) => {
-	// Isometric cube dimensions
-	const h = size * 0.5; // height offset for 3D effect
-
-	// Top face (brightest)
-	const topPoints = `${x},${y - h} ${x + size},${y} ${x},${y + h} ${x - size},${y}`;
-
-	// Left face (medium)
-	const leftPoints = `${x - size},${y} ${x},${y + h} ${x},${y + h + size} ${x - size},${y + size}`;
-
-	// Right face (darkest)
-	const rightPoints = `${x},${y + h} ${x + size},${y} ${x + size},${y + size} ${x},${y + h + size}`;
-
-	return (
-		<g className="isometric-cube isometric-blocks-container">
-			{/* Right face - darkest */}
-			<polygon
-				points={rightPoints}
-				fill={color}
-				opacity={0.6}
-				stroke={color}
-				strokeWidth={0.5}
-			/>
-			{/* Left face - medium */}
-			<polygon
-				points={leftPoints}
-				fill={color}
-				opacity={0.8}
-				stroke={color}
-				strokeWidth={0.5}
-			/>
-			{/* Top face - brightest */}
-			<polygon
-				points={topPoints}
-				fill={color}
-				opacity={1}
-				stroke={color}
-				strokeWidth={0.5}
-			/>
-		</g>
-	);
+  // Isometric cube dimensions
+  const h = size * 0.5; // height offset for 3D effect
+
+  // Top face (brightest)
+  const topPoints = `${x},${y - h} ${x + size},${y} ${x},${y + h} ${x - size},${y}`;
+
+  // Left face (medium)
+  const leftPoints = `${x - size},${y} ${x},${y + h} ${x},${y + h + size} ${x - size},${y + size}`;
+
+  // Right face (darkest)
+  const rightPoints = `${x},${y + h} ${x + size},${y} ${x + size},${y + size} ${x},${y + h + size}`;
+
+  return (
+    <g className="isometric-cube isometric-blocks-container">
+      {/* Right face - darkest */}
+      <polygon points={rightPoints} fill={color} opacity={0.6} stroke={color} strokeWidth={0.5} />
+      {/* Left face - medium */}
+      <polygon points={leftPoints} fill={color} opacity={0.8} stroke={color} strokeWidth={0.5} />
+      {/* Top face - brightest */}
+      <polygon points={topPoints} fill={color} opacity={1} stroke={color} strokeWidth={0.5} />
+    </g>
+  );
 };
 
 interface IsometricBlocksProps {
-	width: number;
-	height: number;
-	cubeSize?: number;
-	maxCubes?: number;
-	spawnInterval?: number;
+  width: number;
+  height: number;
+  cubeSize?: number;
+  maxCubes?: number;
+  spawnInterval?: number;
 }
 
 export const IsometricBlocks: React.FC<IsometricBlocksProps> = ({
-	width,
-	height,
-	cubeSize = 24,
-	maxCubes = 50,
-	spawnInterval = 400,
+  width,
+  height,
+  cubeSize = 24,
+  maxCubes = 50,
+  spawnInterval = 400,
 }) => {
-	const [cubes, setCubes] = useState<CubeData[]>([]);
-	const nextIdRef = useRef(0);
-
-	// Calculate grid positions for isometric layout
-	const gridPositions = useMemo(() => {
-		const positions: { x: number; y: number }[] = [];
-		const stepX = cubeSize * 2;
-		const stepY = cubeSize * 1.5;
-
-		for (let row = -2; row < height / stepY + 2; row++) {
-			const offsetX = (row % 2) * cubeSize;
-			for (let col = -2; col < width / stepX + 2; col++) {
-				positions.push({
-					x: col * stepX + offsetX + cubeSize,
-					y: row * stepY + cubeSize,
-				});
-			}
-		}
-		return positions;
-	}, [width, height, cubeSize]);
-
-	// Spawn new cubes periodically
-	const spawnCube = useCallback(() => {
-		const pos = gridPositions[Math.floor(Math.random() * gridPositions.length)];
-		if (!pos) return;
-		const network =
-			WEIGHTED_COLORS[Math.floor(Math.random() * WEIGHTED_COLORS.length)];
-		if (!network) return;
-
-		const cubeId = nextIdRef.current++;
-		const newCube: CubeData = {
-			id: cubeId,
-			x: pos.x,
-			y: pos.y,
-			color: network,
-		};
-
-		setCubes((prev) => {
-			const updated = [...prev, newCube];
-			// Remove oldest cubes if we exceed max
-			if (updated.length > maxCubes) {
-				return updated.slice(-maxCubes);
-			}
-			return updated;
-		});
-	}, [gridPositions, maxCubes]);
-
-	// Spawn cubes periodically
-	useEffect(() => {
-		const spawn = setInterval(spawnCube, spawnInterval);
-		return () => clearInterval(spawn);
-	}, [spawnCube, spawnInterval]);
-
-	return (
-		<svg
-			width={width}
-			height={height}
-			style={{
-				position: "absolute",
-				top: 0,
-				left: 0,
-				pointerEvents: "none",
-			}}
-		>
-			<style>
-				{`
+  const [cubes, setCubes] = useState<CubeData[]>([]);
+  const nextIdRef = useRef(0);
+
+  // Calculate grid positions for isometric layout
+  const gridPositions = useMemo(() => {
+    const positions: { x: number; y: number }[] = [];
+    const stepX = cubeSize * 2;
+    const stepY = cubeSize * 1.5;
+
+    for (let row = -2; row < height / stepY + 2; row++) {
+      const offsetX = (row % 2) * cubeSize;
+      for (let col = -2; col < width / stepX + 2; col++) {
+        positions.push({
+          x: col * stepX + offsetX + cubeSize,
+          y: row * stepY + cubeSize,
+        });
+      }
+    }
+    return positions;
+  }, [width, height, cubeSize]);
+
+  // Spawn new cubes periodically
+  const spawnCube = useCallback(() => {
+    const pos = gridPositions[Math.floor(Math.random() * gridPositions.length)];
+    if (!pos) return;
+    const network = WEIGHTED_COLORS[Math.floor(Math.random() * WEIGHTED_COLORS.length)];
+    if (!network) return;
+
+    const cubeId = nextIdRef.current++;
+    const newCube: CubeData = {
+      id: cubeId,
+      x: pos.x,
+      y: pos.y,
+      color: network,
+    };
+
+    setCubes((prev) => {
+      const updated = [...prev, newCube];
+      // Remove oldest cubes if we exceed max
+      if (updated.length > maxCubes) {
+        return updated.slice(-maxCubes);
+      }
+      return updated;
+    });
+  }, [gridPositions, maxCubes]);
+
+  // Spawn cubes periodically
+  useEffect(() => {
+    const spawn = setInterval(spawnCube, spawnInterval);
+    return () => clearInterval(spawn);
+  }, [spawnCube, spawnInterval]);
+
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: <TODO>
+    <svg
+      width={width}
+      height={height}
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+      }}
+    >
+      <style>
+        {`
 					.isometric-cube {
 						opacity: 0;
 						animation: fadeInCube 0.8s ease-out forwards;
@@ -165,18 +142,12 @@ export const IsometricBlocks: React.FC<IsometricBlocksProps> = ({
 						to { opacity: 0.7; }
 					}
 				`}
-			</style>
-			{cubes.map((cube) => (
-				<IsometricCube
-					key={cube.id}
-					x={cube.x}
-					y={cube.y}
-					size={cubeSize}
-					color={cube.color}
-				/>
-			))}
-		</svg>
-	);
+      </style>
+      {cubes.map((cube) => (
+        <IsometricCube key={cube.id} x={cube.x} y={cube.y} size={cubeSize} color={cube.color} />
+      ))}
+    </svg>
+  );
 };
 
 export default IsometricBlocks;
diff --git a/src/components/common/Loader.tsx b/src/components/common/Loader.tsx
index a2022ad..f7a315f 100644
--- a/src/components/common/Loader.tsx
+++ b/src/components/common/Loader.tsx
@@ -1,29 +1,27 @@
 import React from "react";
 
 interface LoaderProps {
-	size?: number;
-	color?: string;
-	text?: string;
+  size?: number;
+  color?: string;
+  text?: string;
 }
 
-const Loader: React.FC<LoaderProps> = React.memo(
-	({ size = 40, color = "#10b981", text }) => {
-		return (
-			<div className="loader-container">
-				<div
-					className="loader-spinner"
-					style={{
-						width: `${size}px`,
-						height: `${size}px`,
-						border: `3px solid rgba(16, 185, 129, 0.2)`,
-						borderTop: `3px solid ${color}`,
-					}}
-				/>
-				{text && <p className="loader-text">{text}</p>}
-			</div>
-		);
-	},
-);
+const Loader: React.FC<LoaderProps> = React.memo(({ size = 40, color = "#10b981", text }) => {
+  return (
+    <div className="loader-container">
+      <div
+        className="loader-spinner"
+        style={{
+          width: `${size}px`,
+          height: `${size}px`,
+          border: `3px solid rgba(16, 185, 129, 0.2)`,
+          borderTop: `3px solid ${color}`,
+        }}
+      />
+      {text && <p className="loader-text">{text}</p>}
+    </div>
+  );
+});
 
 Loader.displayName = "Loader";
 
diff --git a/src/components/common/Loading.tsx b/src/components/common/Loading.tsx
index ddee629..703a51a 100644
--- a/src/components/common/Loading.tsx
+++ b/src/components/common/Loading.tsx
@@ -2,13 +2,13 @@ import React from "react";
 import "../../styles/styles.css";
 
 const Loading = React.memo(() => (
-	<div className="loading-container">
-		<div className="wave-loading">
-			<div className="wave"></div>
-			<div className="wave"></div>
-			<div className="wave"></div>
-		</div>
-	</div>
+  <div className="loading-container">
+    <div className="wave-loading">
+      <div className="wave"></div>
+      <div className="wave"></div>
+      <div className="wave"></div>
+    </div>
+  </div>
 ));
 
 Loading.displayName = "Loading";
diff --git a/src/components/common/LongString.tsx b/src/components/common/LongString.tsx
index 4b6eafc..c59939a 100644
--- a/src/components/common/LongString.tsx
+++ b/src/components/common/LongString.tsx
@@ -1,43 +1,40 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 
 interface LongStringProps {
-	value: string;
-	start?: number;
-	end?: number;
-	style?: React.CSSProperties;
+  value: string;
+  start?: number;
+  end?: number;
+  style?: React.CSSProperties;
 }
 
-const LongString: React.FC<LongStringProps> = ({
-	value,
-	start = 10,
-	end = 8,
-	style = {},
-}) => {
-	const [isHovered, setIsHovered] = useState(false);
+const LongString: React.FC<LongStringProps> = ({ value, start = 10, end = 8, style = {} }) => {
+  const [isHovered, setIsHovered] = useState(false);
 
-	const truncate = (str: string) => {
-		if (!str) return "";
-		if (str.length <= start + end) return str;
-		return `${str.slice(0, start)}...${str.slice(-end)}`;
-	};
+  const truncate = (str: string) => {
+    if (!str) return "";
+    if (str.length <= start + end) return str;
+    return `${str.slice(0, start)}...${str.slice(-end)}`;
+  };
 
-	const shouldTruncate = value && value.length > start + end;
+  const shouldTruncate = value && value.length > start + end;
 
-	return (
-		<span
-			onMouseEnter={() => setIsHovered(true)}
-			onMouseLeave={() => setIsHovered(false)}
-			style={{
-				wordBreak: isHovered && shouldTruncate ? "break-all" : "normal",
-				transition: "all 0.2s ease",
-				cursor: shouldTruncate ? "pointer" : "default",
-				...style,
-			}}
-			title={shouldTruncate ? value : undefined}
-		>
-			{isHovered && shouldTruncate ? value : truncate(value)}
-		</span>
-	);
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: <TODO>
+    <span
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        wordBreak: isHovered && shouldTruncate ? "break-all" : "normal",
+        transition: "all 0.2s ease",
+        cursor: shouldTruncate ? "pointer" : "default",
+        ...style,
+      }}
+      title={shouldTruncate ? value : undefined}
+    >
+      {isHovered && shouldTruncate ? value : truncate(value)}
+    </span>
+  );
 };
 
 export default LongString;
diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
deleted file mode 100644
index 80ad316..0000000
--- a/src/components/common/Navbar.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import { Link, useNavigate, useLocation } from "react-router-dom";
-import { ConnectButton } from "@rainbow-me/rainbowkit";
-import { useAccount } from "wagmi";
-import { useState } from "react";
-import { NetworkBlockIndicator } from "./NetworkBlockIndicator";
-import VersionWarningIcon from "./VersionWarningIcon";
-
-const Navbar = () => {
-	const { address } = useAccount();
-	const navigate = useNavigate();
-	const location = useLocation();
-	const [searchInput, setSearchInput] = useState("");
-
-	// Extract chainId from the pathname (e.g., /1/blocks -> 1)
-	const pathSegments = location.pathname.split("/").filter(Boolean);
-	const chainId =
-		pathSegments[0] && !isNaN(Number(pathSegments[0]))
-			? pathSegments[0]
-			: undefined;
-
-	// Check if we should show the search box (on blocks, block, txs, tx pages)
-	const shouldShowSearch =
-		chainId &&
-		pathSegments.length >= 2 &&
-		pathSegments[1] &&
-		["blocks", "block", "txs", "tx", "address"].includes(pathSegments[1]);
-
-	console.log(
-		"Navbar chainId from URL:",
-		chainId,
-		"pathname:",
-		location.pathname,
-	);
-
-	const handleSearch = (e: React.FormEvent) => {
-		e.preventDefault();
-		if (!searchInput.trim() || !chainId) return;
-
-		const input = searchInput.trim();
-
-		// Check if it's a transaction hash (0x followed by 64 hex chars)
-		if (/^0x[a-fA-F0-9]{64}$/.test(input)) {
-			navigate(`/${chainId}/tx/${input}`);
-		}
-		// Check if it's an address (0x followed by 40 hex chars)
-		else if (/^0x[a-fA-F0-9]{40}$/.test(input)) {
-			navigate(`/${chainId}/address/${input}`);
-		}
-		// Check if it's a block number
-		else if (/^\d+$/.test(input)) {
-			navigate(`/${chainId}/block/${input}`);
-		}
-		// Check if it's a block hash (0x followed by 64 hex chars - same as tx)
-		else if (/^0x[a-fA-F0-9]{64}$/.test(input)) {
-			navigate(`/${chainId}/block/${input}`);
-		}
-
-		setSearchInput("");
-	};
-
-	const goToSettings = () => {
-		navigate("/settings");
-	};
-
-	return (
-		<nav className="navbar">
-			<div className="navbar-inner">
-				<ul>
-					<li>
-						<Link to="/" className="home-cube-link" title="Home">
-							<svg
-								width="32"
-								height="32"
-								viewBox="0 0 36 36"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								{/* Top face - brightest */}
-								<polygon points="20,6 34,14 20,22 6,14" fill="#067455ff" />
-								{/* Left face - medium */}
-								<polygon points="6,14 20,22 20,36 6,28" fill="#07634aff" />
-								{/* Right face - darkest */}
-								<polygon points="20,22 34,14 34,28 20,36" fill="#065743ff" />
-							</svg>
-						</Link>
-					</li>
-					{chainId && (
-						<>
-							<li>
-								<Link to={`/${chainId}/blocks`}>BLOCKS</Link>
-							</li>
-							<li>
-								<Link to={`/${chainId}/txs`}>TRANSACTIONS</Link>
-							</li>
-						</>
-					)}
-				</ul>
-
-				{/* Search Box */}
-				{shouldShowSearch && (
-					<div className="search-container">
-						<form onSubmit={handleSearch} className="search-form">
-							<input
-								type="text"
-								value={searchInput}
-								onChange={(e) => setSearchInput(e.target.value)}
-								placeholder="Search by Address / Tx Hash / Block"
-								className="search-input"
-							/>
-							<button
-								type="submit"
-								className="search-button"
-								aria-label="Search"
-								title="Search"
-							>
-								<svg
-									width="20"
-									height="20"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<circle
-										cx="11"
-										cy="11"
-										r="8"
-										stroke="currentColor"
-										strokeWidth="2"
-									/>
-									<path
-										d="M21 21l-4.35-4.35"
-										stroke="currentColor"
-										strokeWidth="2"
-										strokeLinecap="round"
-									/>
-								</svg>
-							</button>
-						</form>
-					</div>
-				)}
-
-				<div className="navbar-right">
-					<NetworkBlockIndicator />
-					<VersionWarningIcon />
-					<ul>
-						<li>
-							<button
-								onClick={() => navigate("/devtools")}
-								className="navbar-toggle-btn"
-								aria-label="Dev Tools"
-								title="Dev Tools"
-							>
-								<svg
-									width="18"
-									height="18"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
-										stroke="currentColor"
-										strokeWidth="2"
-										strokeLinecap="round"
-										strokeLinejoin="round"
-									/>
-								</svg>
-							</button>
-						</li>
-						<li>
-							<button
-								onClick={() => navigate("/about")}
-								className="navbar-toggle-btn"
-								aria-label="About"
-								title="About"
-							>
-								<svg
-									width="20"
-									height="20"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<circle
-										cx="12"
-										cy="12"
-										r="10"
-										stroke="currentColor"
-										strokeWidth="2"
-									/>
-									<path
-										d="M12 16v-4"
-										stroke="currentColor"
-										strokeWidth="2"
-										strokeLinecap="round"
-										strokeLinejoin="round"
-									/>
-									<path
-										d="M12 8h.01"
-										stroke="currentColor"
-										strokeWidth="2"
-										strokeLinecap="round"
-										strokeLinejoin="round"
-									/>
-								</svg>
-							</button>
-						</li>
-						<li>
-							<button
-								onClick={() => goToSettings()}
-								className="navbar-toggle-btn"
-								aria-label="Settings"
-								title="Settings"
-							>
-								<svg
-									width="16"
-									height="16"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<circle
-										cx="12"
-										cy="12"
-										r="3"
-										stroke="currentColor"
-										strokeWidth="2"
-									/>
-									<path
-										d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
-										stroke="currentColor"
-										strokeWidth="2"
-									/>
-								</svg>
-							</button>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</nav>
-	);
-};
-
-export default Navbar;
diff --git a/src/components/common/NetworkBlockIndicator.tsx b/src/components/common/NetworkBlockIndicator.tsx
deleted file mode 100644
index f8e1713..0000000
--- a/src/components/common/NetworkBlockIndicator.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { useEffect, useState, useContext, useMemo } from "react";
-import { useLocation } from "react-router-dom";
-import { AppContext } from "../../context/AppContext";
-import { RPCClient } from "../../services/EVM/common/RPCClient";
-import { getRPCUrls } from "../../config/rpcConfig";
-
-// Network configuration with logos
-import arbitrumLogo from "../../assets/arbitrum-logo.svg";
-import optimismLogo from "../../assets/optimism-logo.svg";
-import baseLogo from "../../assets/base-logo.svg";
-import hardhatLogo from "../../assets/hardhat-logo.svg";
-
-interface NetworkInfo {
-	name: string;
-	logo: string | null;
-	color: string;
-}
-
-const NETWORK_INFO: Record<number, NetworkInfo> = {
-	1: { name: "Ethereum", logo: null, color: "#627EEA" },
-	11155111: { name: "Sepolia", logo: null, color: "#F0CDC2" },
-	42161: { name: "Arbitrum", logo: arbitrumLogo, color: "#28A0F0" },
-	10: { name: "Optimism", logo: optimismLogo, color: "#FF0420" },
-	8453: { name: "Base", logo: baseLogo, color: "#0052FF" },
-	56: { name: "BSC", logo: "bsc", color: "#F0B90B" },
-	97: { name: "BSC Testnet", logo: "bsc", color: "#F0B90B" },
-	137: { name: "Polygon", logo: "polygon", color: "#8247E5" },
-	31337: { name: "Localhost", logo: hardhatLogo, color: "#FFF100" },
-};
-
-// Ethereum SVG for networks without a logo
-const EthereumIcon = ({ color }: { color: string }) => (
-	<svg
-		width="20"
-		height="20"
-		viewBox="0 0 256 417"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fill={color}
-			d="m127.961 0-2.795 9.5v275.668l2.795 2.79 127.962-75.638z"
-		/>
-		<path fill={`${color}99`} d="M127.962 0 0 212.32l127.962 75.639V154.158z" />
-		<path
-			fill={color}
-			d="m127.961 312.187-1.575 1.92v98.199l1.575 4.6L256 236.587z"
-		/>
-		<path fill={`${color}99`} d="M127.962 416.905v-104.72L0 236.585z" />
-	</svg>
-);
-
-// BSC/BNB SVG icon
-const BscIcon = ({
-	color,
-	opacity = 1,
-}: {
-	color: string;
-	opacity?: number;
-}) => (
-	<svg
-		width="20"
-		height="20"
-		viewBox="0 0 126.61 126.61"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fill={color}
-			fillOpacity={opacity}
-			d="m38.73 53.2 24.59-24.58 24.6 24.6 14.3-14.31L63.32 0l-38.9 38.9zM0 63.31l14.3-14.31 14.31 14.31-14.31 14.3zM38.73 73.41l24.59 24.59 24.6-24.6 14.31 14.29-38.9 38.91-38.91-38.88zM97.99 63.31l14.3-14.31 14.32 14.31-14.31 14.3z"
-		/>
-		<path
-			fill={color}
-			fillOpacity={opacity}
-			d="m77.83 63.3-14.51-14.52-10.73 10.73-1.24 1.23-2.54 2.54 14.51 14.5 14.51-14.47z"
-		/>
-	</svg>
-);
-
-// Polygon SVG icon
-const PolygonIcon = ({ color }: { color: string }) => (
-	<svg
-		width="20"
-		height="20"
-		viewBox="0 0 38 33"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fill={color}
-			d="M29 10.2c-.7-.4-1.6-.4-2.4 0L21 13.5l-3.8 2.1-5.5 3.3c-.7.4-1.6.4-2.4 0L5 16.3c-.7-.4-1.2-1.2-1.2-2.1v-5c0-.8.4-1.6 1.2-2.1l4.3-2.5c.7-.4 1.6-.4 2.4 0L16 7.2c.7.4 1.2 1.2 1.2 2.1v3.3l3.8-2.2V7c0-.8-.4-1.6-1.2-2.1l-8-4.7c-.7-.4-1.6-.4-2.4 0L1.2 5C.4 5.4 0 6.2 0 7v9.4c0 .8.4 1.6 1.2 2.1l8.1 4.7c.7.4 1.6.4 2.4 0l5.5-3.2 3.8-2.2 5.5-3.2c.7-.4 1.6-.4 2.4 0l4.3 2.5c.7.4 1.2 1.2 1.2 2.1v5c0 .8-.4 1.6-1.2 2.1L29 29.5c-.7.4-1.6.4-2.4 0l-4.3-2.5c-.7-.4-1.2-1.2-1.2-2.1v-3.2l-3.8 2.2v3.3c0 .8.4 1.6 1.2 2.1l8.1 4.7c.7.4 1.6.4 2.4 0l8.1-4.7c.7-.4 1.2-1.2 1.2-2.1V18c0-.8-.4-1.6-1.2-2.1L29 10.2z"
-		/>
-	</svg>
-);
-
-interface NetworkBlockIndicatorProps {
-	className?: string;
-}
-
-export function NetworkBlockIndicator({
-	className,
-}: NetworkBlockIndicatorProps) {
-	const location = useLocation();
-	const { rpcUrls } = useContext(AppContext);
-	const [blockNumber, setBlockNumber] = useState<number | null>(null);
-	const [isLoading, setIsLoading] = useState(false);
-
-	// Extract chainId from the pathname (e.g., /1/blocks -> 1)
-	const chainId = useMemo(() => {
-		const pathSegments = location.pathname.split("/").filter(Boolean);
-		return pathSegments[0] && !isNaN(Number(pathSegments[0]))
-			? Number(pathSegments[0])
-			: null;
-	}, [location.pathname]);
-
-	const networkInfo = chainId ? NETWORK_INFO[chainId] : null;
-
-	useEffect(() => {
-		if (!chainId) {
-			setBlockNumber(null);
-			return;
-		}
-
-		let isMounted = true;
-		let intervalId: NodeJS.Timeout | null = null;
-
-		const fetchBlockNumber = async () => {
-			try {
-				const urls = getRPCUrls(chainId, rpcUrls);
-				const client = new RPCClient(urls);
-				const result = await client.call<string>("eth_blockNumber", []);
-				if (isMounted) {
-					setBlockNumber(parseInt(result, 16));
-					setIsLoading(false);
-				}
-			} catch (error) {
-				console.error("Failed to fetch block number:", error);
-				if (isMounted) {
-					setIsLoading(false);
-				}
-			}
-		};
-
-		setIsLoading(true);
-		fetchBlockNumber();
-
-		// Poll for new blocks every 12 seconds (Ethereum average block time)
-		intervalId = setInterval(fetchBlockNumber, 12000);
-
-		return () => {
-			isMounted = false;
-			if (intervalId) {
-				clearInterval(intervalId);
-			}
-		};
-	}, [chainId, rpcUrls]);
-
-	if (!chainId || !networkInfo) return null;
-
-	return (
-		<div
-			className={`network-block-indicator ${className || ""}`}
-			style={{ borderColor: `${networkInfo.color}40` }}
-			title={networkInfo.name}
-		>
-			<div
-				className="network-block-pulse"
-				style={{ background: networkInfo.color }}
-			/>
-			<div className="network-block-logo">
-				{networkInfo.logo === "bsc" ? (
-					<BscIcon color={networkInfo.color} />
-				) : networkInfo.logo === "polygon" ? (
-					<PolygonIcon color={networkInfo.color} />
-				) : networkInfo.logo ? (
-					<img src={networkInfo.logo} alt={networkInfo.name} />
-				) : (
-					<EthereumIcon color={networkInfo.color} />
-				)}
-			</div>
-			<span className="network-block-number">
-				{isLoading
-					? "..."
-					: blockNumber !== null
-						? `#${blockNumber.toLocaleString()}`
-						: "---"}
-			</span>
-		</div>
-	);
-}
-
-export default NetworkBlockIndicator;
diff --git a/src/components/common/NetworkIcon.tsx b/src/components/common/NetworkIcon.tsx
index d4b8ed8..9a73ee4 100644
--- a/src/components/common/NetworkIcon.tsx
+++ b/src/components/common/NetworkIcon.tsx
@@ -1,116 +1,44 @@
-import React from "react";
-import arbitrumLogo from "../../assets/arbitrum-logo.svg";
-import optimismLogo from "../../assets/optimism-logo.svg";
-import baseLogo from "../../assets/base-logo.svg";
-import hardhatLogo from "../../assets/hardhat-logo.svg";
-import type { NetworkConfig } from "../../config/networks";
+import type React from "react";
+import { useState } from "react";
+import { getNetworkLogoUrl } from "../../services/MetadataService";
+import type { NetworkConfig } from "../../types";
 
 interface NetworkIconProps {
-	network: NetworkConfig;
-	size?: number;
+  network: NetworkConfig;
+  size?: number;
 }
 
-// Ethereum SVG icon
-const EthereumIcon: React.FC<{ color: string; size: number }> = ({
-	color,
-	size,
-}) => (
-	<svg
-		width={size}
-		height={size}
-		viewBox="0 0 256 417"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fill={color}
-			d="m127.961 0-2.795 9.5v275.668l2.795 2.79 127.962-75.638z"
-		/>
-		<path fill={`${color}99`} d="M127.962 0 0 212.32l127.962 75.639V154.158z" />
-		<path
-			fill={color}
-			d="m127.961 312.187-1.575 1.92v98.199l1.575 4.6L256 236.587z"
-		/>
-		<path fill={`${color}99`} d="M127.962 416.905v-104.72L0 236.585z" />
-	</svg>
+// Fallback Ethereum SVG icon (used when logo fails to load)
+const EthereumIcon: React.FC<{ color: string; size: number }> = ({ color, size }) => (
+  // biome-ignore lint/a11y/noSvgWithoutTitle: <TODO>
+  <svg width={size} height={size} viewBox="0 0 256 417" xmlns="http://www.w3.org/2000/svg">
+    <path fill={color} d="m127.961 0-2.795 9.5v275.668l2.795 2.79 127.962-75.638z" />
+    <path fill={`${color}99`} d="M127.962 0 0 212.32l127.962 75.639V154.158z" />
+    <path fill={color} d="m127.961 312.187-1.575 1.92v98.199l1.575 4.6L256 236.587z" />
+    <path fill={`${color}99`} d="M127.962 416.905v-104.72L0 236.585z" />
+  </svg>
 );
 
-// BSC/BNB SVG icon
-const BscIcon: React.FC<{ color: string; size: number; opacity?: number }> = ({
-	color,
-	size,
-	opacity = 1,
-}) => (
-	<svg
-		width={size}
-		height={size}
-		viewBox="0 0 126.61 126.61"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fill={color}
-			fillOpacity={opacity}
-			d="m38.73 53.2 24.59-24.58 24.6 24.6 14.3-14.31L63.32 0l-38.9 38.9zM0 63.31l14.3-14.31 14.31 14.31-14.31 14.3zM38.73 73.41l24.59 24.59 24.6-24.6 14.31 14.29-38.9 38.91-38.91-38.88zM97.99 63.31l14.3-14.31 14.32 14.31-14.31 14.3z"
-		/>
-		<path
-			fill={color}
-			fillOpacity={opacity}
-			d="m77.83 63.3-14.51-14.52-10.73 10.73-1.24 1.23-2.54 2.54 14.51 14.5 14.51-14.47z"
-		/>
-	</svg>
-);
+export const NetworkIcon: React.FC<NetworkIconProps> = ({ network, size = 32 }) => {
+  const [imageError, setImageError] = useState(false);
 
-// Polygon SVG icon
-const PolygonIcon: React.FC<{ color: string; size: number }> = ({
-	color,
-	size,
-}) => (
-	<svg
-		width={size}
-		height={size}
-		viewBox="0 0 38 33"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fill={color}
-			d="M29 10.2c-.7-.4-1.6-.4-2.4 0L21 13.5l-3.8 2.1-5.5 3.3c-.7.4-1.6.4-2.4 0L5 16.3c-.7-.4-1.2-1.2-1.2-2.1v-5c0-.8.4-1.6 1.2-2.1l4.3-2.5c.7-.4 1.6-.4 2.4 0L16 7.2c.7.4 1.2 1.2 1.2 2.1v3.3l3.8-2.2V7c0-.8-.4-1.6-1.2-2.1l-8-4.7c-.7-.4-1.6-.4-2.4 0L1.2 5C.4 5.4 0 6.2 0 7v9.4c0 .8.4 1.6 1.2 2.1l8.1 4.7c.7.4 1.6.4 2.4 0l5.5-3.2 3.8-2.2 5.5-3.2c.7-.4 1.6-.4 2.4 0l4.3 2.5c.7.4 1.2 1.2 1.2 2.1v5c0 .8-.4 1.6-1.2 2.1L29 29.5c-.7.4-1.6.4-2.4 0l-4.3-2.5c-.7-.4-1.2-1.2-1.2-2.1v-3.2l-3.8 2.2v3.3c0 .8.4 1.6 1.2 2.1l8.1 4.7c.7.4 1.6.4 2.4 0l8.1-4.7c.7-.4 1.2-1.2 1.2-2.1V18c0-.8-.4-1.6-1.2-2.1L29 10.2z"
-		/>
-	</svg>
-);
+  // If logo failed to load, show fallback
+  if (imageError || !network.logo) {
+    return <EthereumIcon color={network.color ?? "#627EEA"} size={size} />;
+  }
+
+  const logoUrl = getNetworkLogoUrl(network.logo);
 
-export const NetworkIcon: React.FC<NetworkIconProps> = ({
-	network,
-	size = 32,
-}) => {
-	switch (network.logoType) {
-		case "ethereum":
-			return <EthereumIcon color={network.color} size={size} />;
-		case "bsc":
-			return (
-				<BscIcon
-					color={network.color}
-					size={size}
-					opacity={network.isTestnet ? 0.7 : 1}
-				/>
-			);
-		case "polygon":
-			return <PolygonIcon color={network.color} size={size} />;
-		case "arbitrum":
-			return (
-				<img src={arbitrumLogo} alt="Arbitrum" width={size} height={size} />
-			);
-		case "optimism":
-			return (
-				<img src={optimismLogo} alt="Optimism" width={size} height={size} />
-			);
-		case "base":
-			return <img src={baseLogo} alt="Base" width={size} height={size} />;
-		case "hardhat":
-			return (
-				<img src={hardhatLogo} alt="Localhost" width={size} height={size} />
-			);
-		default:
-			return <EthereumIcon color={network.color} size={size} />;
-	}
+  return (
+    <img
+      src={logoUrl}
+      alt={network.name}
+      width={size}
+      height={size}
+      onError={() => setImageError(true)}
+      className="object-contain"
+    />
+  );
 };
 
 export default NetworkIcon;
diff --git a/src/components/common/NetworkStatsDisplay.tsx b/src/components/common/NetworkStatsDisplay.tsx
deleted file mode 100644
index 4912fde..0000000
--- a/src/components/common/NetworkStatsDisplay.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import React from "react";
-import type { NetworkStats, RPCMetadata } from "../../types";
-import { RPCIndicator } from "./RPCIndicator";
-
-interface NetworkStatsDisplayProps {
-	networkStats: NetworkStats | null;
-	loading?: boolean;
-	error?: string | null;
-	chainId?: number;
-	metadata?: RPCMetadata;
-	selectedProvider?: string | null;
-	onProviderSelect?: (provider: string) => void;
-}
-
-const NetworkStatsDisplay: React.FC<NetworkStatsDisplayProps> = React.memo(
-	({
-		networkStats,
-		loading = false,
-		error = null,
-		chainId,
-		metadata,
-		selectedProvider,
-		onProviderSelect,
-	}) => {
-		if (loading) {
-			return (
-				<div className="container-wide network-stats-container">
-					<div className="block-display-card">
-						<div className="text-center network-stats-loading">
-							Loading network statistics...
-						</div>
-					</div>
-				</div>
-			);
-		}
-
-		if (error) {
-			return (
-				<div className="container-wide network-stats-container">
-					<div className="block-display-card">
-						<div className="text-center network-stats-error">
-							Error loading network stats: {error}
-						</div>
-					</div>
-				</div>
-			);
-		}
-
-		if (!networkStats) {
-			return null;
-		}
-
-		// Format gas price from Wei to Gwei
-		const formatGasPrice = (weiPrice: string): string => {
-			try {
-				const gwei = Number(weiPrice) / 1e9;
-				return `${gwei.toFixed(2)} Gwei`;
-			} catch {
-				return weiPrice;
-			}
-		};
-
-		// Format block number with commas
-		const formatBlockNumber = (blockNumber: string): string => {
-			try {
-				return Number(blockNumber).toLocaleString();
-			} catch {
-				return blockNumber;
-			}
-		};
-
-		// Parse protocol version from metadata (localhost/Hardhat only)
-		const getProtocolVersion = (): string | null => {
-			if (chainId !== 31337 || !networkStats.metadata) {
-				return null;
-			}
-
-			try {
-				return networkStats.metadata.clientVersion || null;
-			} catch (err) {
-				console.error("Failed to parse metadata:", err);
-				return null;
-			}
-		};
-
-		// Get forked network info (localhost/Hardhat only)
-		const getForkedNetworkInfo = (): {
-			chainId: number;
-			blockNumber: number;
-			blockHash: string;
-		} | null => {
-			if (
-				chainId !== 31337 ||
-				!networkStats.metadata ||
-				!networkStats.metadata.forkedNetwork
-			) {
-				return null;
-			}
-
-			try {
-				const forked = networkStats.metadata.forkedNetwork;
-				return {
-					chainId: forked.chainId,
-					blockNumber: forked.forkBlockNumber,
-					blockHash: forked.forkBlockHash,
-				};
-			} catch (err) {
-				console.error("Failed to parse forked network info:", err);
-				return null;
-			}
-		};
-
-		const protocolVersion = getProtocolVersion();
-		const forkedNetwork = getForkedNetworkInfo();
-
-		return (
-			<div className="container-wide network-stats-container">
-				<div className="block-display-card">
-					<div
-						style={{
-							display: "flex",
-							justifyContent: "space-between",
-							alignItems: "center",
-							marginBottom: "1rem",
-						}}
-					>
-						<h2 className="network-stats-title" style={{ margin: 0 }}>
-							Network Statistics
-						</h2>
-						{metadata && selectedProvider !== undefined && onProviderSelect && (
-							<RPCIndicator
-								metadata={metadata}
-								selectedProvider={selectedProvider}
-								onProviderSelect={onProviderSelect}
-							/>
-						)}
-					</div>
-
-					<div className="data-grid-3">
-						<div className="block-detail-item">
-							<span className="detail-label">Current Gas Price</span>
-							<span className="detail-value">
-								{formatGasPrice(networkStats.currentGasPrice)}
-							</span>
-						</div>
-
-						<div className="block-detail-item">
-							<span className="detail-label">Current Block Number</span>
-							<span className="detail-value">
-								{formatBlockNumber(networkStats.currentBlockNumber)}
-							</span>
-						</div>
-
-						<div className="block-detail-item">
-							<span className="detail-label">Sync Status</span>
-							<span className="detail-value">
-								<span className="sync-status-indicator">
-									<span
-										className={`sync-dot ${networkStats.isSyncing ? "sync-dot-warning" : "sync-dot-success"}`}
-									/>
-									{networkStats.isSyncing ? "Syncing" : "Synced"}
-								</span>
-							</span>
-						</div>
-
-						{networkStats.clientVersion && (
-							<div className="block-detail-item network-stat-full-width">
-								<span className="detail-label">Client Version</span>
-								<span className="detail-value tx-mono">
-									{networkStats.clientVersion}
-								</span>
-							</div>
-						)}
-
-						{protocolVersion && (
-							<div className="block-detail-item">
-								<span className="detail-label">Protocol Version</span>
-								<span className="detail-value">{protocolVersion}</span>
-							</div>
-						)}
-
-						{forkedNetwork && (
-							<>
-								<div className="block-detail-item">
-									<span className="detail-label">Forked Network</span>
-									<span className="detail-value">
-										Chain ID: {forkedNetwork.chainId}
-									</span>
-								</div>
-
-								<div className="block-detail-item">
-									<span className="detail-label">Fork Block Number</span>
-									<span className="detail-value">
-										{formatBlockNumber(forkedNetwork.blockNumber.toString())}
-									</span>
-								</div>
-
-								<div className="block-detail-item network-stat-full-width">
-									<span className="detail-label">Fork Block Hash</span>
-									<span className="detail-value tx-mono fork-hash-value">
-										{forkedNetwork.blockHash}
-									</span>
-								</div>
-							</>
-						)}
-					</div>
-				</div>
-			</div>
-		);
-	},
-);
-
-NetworkStatsDisplay.displayName = "NetworkStatsDisplay";
-
-export default NetworkStatsDisplay;
diff --git a/src/components/common/NotificationDisplay.tsx b/src/components/common/NotificationDisplay.tsx
index 0980fc8..4eab1a8 100644
--- a/src/components/common/NotificationDisplay.tsx
+++ b/src/components/common/NotificationDisplay.tsx
@@ -2,35 +2,31 @@ import React from "react";
 import { useNotifications } from "../../context/NotificationContext";
 
 const NotificationDisplay: React.FC = React.memo(() => {
-	const { notifications, removeNotification } = useNotifications();
+  const { notifications, removeNotification } = useNotifications();
 
-	if (notifications.length === 0) {
-		return null;
-	}
+  if (notifications.length === 0) {
+    return null;
+  }
 
-	return (
-		<div className="notification-container">
-			{notifications.map((notification) => (
-				<div
-					key={notification.id}
-					className={`notification notification--${notification.type}`}
-				>
-					<div className="notification__content">
-						<span className="notification__message">
-							{notification.message}
-						</span>
-						<button
-							className="notification__close"
-							onClick={() => removeNotification(notification.id)}
-							aria-label="Close notification"
-						>
-							×
-						</button>
-					</div>
-				</div>
-			))}
-		</div>
-	);
+  return (
+    <div className="notification-container">
+      {notifications.map((notification) => (
+        <div key={notification.id} className={`notification notification--${notification.type}`}>
+          <div className="notification__content">
+            <span className="notification__message">{notification.message}</span>
+            {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+            <button
+              className="notification__close"
+              onClick={() => removeNotification(notification.id)}
+              aria-label="Close notification"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
 });
 
 NotificationDisplay.displayName = "NotificationDisplay";
diff --git a/src/components/common/RPCIndicator.tsx b/src/components/common/RPCIndicator.tsx
index 9475f1a..52a73c8 100644
--- a/src/components/common/RPCIndicator.tsx
+++ b/src/components/common/RPCIndicator.tsx
@@ -1,11 +1,11 @@
-import { useState, useRef, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { RPCMetadata } from "../../types";
 
 interface RPCIndicatorProps {
-	metadata: RPCMetadata;
-	selectedProvider: string | null;
-	onProviderSelect: (url: string) => void;
-	className?: string;
+  metadata: RPCMetadata;
+  selectedProvider: string | null;
+  onProviderSelect: (url: string) => void;
+  className?: string;
 }
 
 /**
@@ -13,131 +13,117 @@ interface RPCIndicatorProps {
  * Expands on click to show detailed provider information
  */
 export function RPCIndicator({
-	metadata,
-	selectedProvider,
-	onProviderSelect,
-	className,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  className,
 }: RPCIndicatorProps) {
-	const [isExpanded, setIsExpanded] = useState(false);
-	const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-	const successCount = metadata.responses.filter(
-		(r) => r.status === "success",
-	).length;
-	const totalCount = metadata.responses.length;
+  const successCount = metadata.responses.filter((r) => r.status === "success").length;
+  const totalCount = metadata.responses.length;
 
-	// Close dropdown when clicking outside
-	useEffect(() => {
-		const handleClickOutside = (event: MouseEvent) => {
-			if (
-				dropdownRef.current &&
-				!dropdownRef.current.contains(event.target as Node)
-			) {
-				setIsExpanded(false);
-			}
-		};
-		document.addEventListener("mousedown", handleClickOutside);
-		return () => document.removeEventListener("mousedown", handleClickOutside);
-	}, []);
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsExpanded(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
 
-	return (
-		<div className={`rpc-indicator ${className || ""}`} ref={dropdownRef}>
-			{/* Compact Badge */}
-			<div
-				className="rpc-indicator-badge"
-				onClick={() => setIsExpanded(!isExpanded)}
-				title="Click to see RPC provider details"
-			>
-				{metadata.hasInconsistencies && (
-					<span className="rpc-indicator-warning" title="Inconsistent responses">
-						⚠️
-					</span>
-				)}
-				<span className="rpc-indicator-status">
-					✓ {successCount}/{totalCount}
-				</span>
-			</div>
+  return (
+    <div className={`rpc-indicator ${className || ""}`} ref={dropdownRef}>
+      {/* Compact Badge */}
+      {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+      {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+      <div
+        className="rpc-indicator-badge"
+        onClick={() => setIsExpanded(!isExpanded)}
+        title="Click to see RPC provider details"
+      >
+        {metadata.hasInconsistencies && (
+          <span className="rpc-indicator-warning" title="Inconsistent responses">
+            ⚠️
+          </span>
+        )}
+        <span className="rpc-indicator-status">
+          ✓ {successCount}/{totalCount}
+        </span>
+      </div>
 
-			{/* Expanded Dropdown */}
-			{isExpanded && (
-				<div className="rpc-indicator-dropdown">
-					<div className="rpc-indicator-header">
-						<strong>RPC Providers</strong>
-						<span className="rpc-indicator-strategy">
-							Strategy: {metadata.strategy}
-						</span>
-					</div>
+      {/* Expanded Dropdown */}
+      {isExpanded && (
+        <div className="rpc-indicator-dropdown">
+          <div className="rpc-indicator-header">
+            <strong>RPC Providers</strong>
+            <span className="rpc-indicator-strategy">Strategy: {metadata.strategy}</span>
+          </div>
 
-					{metadata.hasInconsistencies && (
-						<div className="rpc-indicator-warning-banner">
-							⚠️ Responses differ between providers
-						</div>
-					)}
+          {metadata.hasInconsistencies && (
+            <div className="rpc-indicator-warning-banner">⚠️ Responses differ between providers</div>
+          )}
 
-					<div className="rpc-indicator-list">
-						{metadata.responses.map((response, idx) => {
-							const isSelected = selectedProvider === response.url;
-							const urlDisplay = truncateUrl(response.url);
+          <div className="rpc-indicator-list">
+            {metadata.responses.map((response, idx) => {
+              const isSelected = selectedProvider === response.url;
+              const urlDisplay = truncateUrl(response.url);
 
-							return (
-								<div
-									key={response.url}
-									className={`rpc-indicator-item ${isSelected ? "selected" : ""} ${response.status}`}
-									onClick={() => {
-										if (response.status === "success") {
-											onProviderSelect(response.url);
-											setIsExpanded(false);
-										}
-									}}
-								>
-									<div className="rpc-indicator-item-header">
-										<span className="rpc-indicator-item-index">#{idx + 1}</span>
-										<span
-											className="rpc-indicator-item-url"
-											title={response.url}
-										>
-											{urlDisplay}
-										</span>
-										<span
-											className={`rpc-indicator-item-status ${response.status}`}
-										>
-											{response.status === "success" ? "✓" : "✗"}
-										</span>
-									</div>
+              return (
+                // biome-ignore lint/a11y/noStaticElementInteractions: <TODO>
+                // biome-ignore lint/a11y/useKeyWithClickEvents: <TODO>
+                <div
+                  key={response.url}
+                  className={`rpc-indicator-item ${isSelected ? "selected" : ""} ${response.status}`}
+                  onClick={() => {
+                    if (response.status === "success") {
+                      onProviderSelect(response.url);
+                      setIsExpanded(false);
+                    }
+                  }}
+                >
+                  <div className="rpc-indicator-item-header">
+                    <span className="rpc-indicator-item-index">#{idx + 1}</span>
+                    <span className="rpc-indicator-item-url" title={response.url}>
+                      {urlDisplay}
+                    </span>
+                    <span className={`rpc-indicator-item-status ${response.status}`}>
+                      {response.status === "success" ? "✓" : "✗"}
+                    </span>
+                  </div>
 
-									{response.status === "error" && (
-										<div className="rpc-indicator-item-error">
-											{response.error}
-										</div>
-									)}
+                  {response.status === "error" && (
+                    <div className="rpc-indicator-item-error">{response.error}</div>
+                  )}
 
-									{isSelected && (
-										<div className="rpc-indicator-item-badge">Selected</div>
-									)}
-								</div>
-							);
-						})}
-					</div>
-				</div>
-			)}
-		</div>
-	);
+                  {isSelected && <div className="rpc-indicator-item-badge">Selected</div>}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }
 
 /**
  * Truncate URL to show hostname only
  */
 function truncateUrl(url: string): string {
-	try {
-		const urlObj = new URL(url);
-		const hostname = urlObj.hostname;
-		if (hostname.length > 30) {
-			return hostname.slice(0, 15) + "..." + hostname.slice(-12);
-		}
-		return hostname;
-	} catch {
-		return url.length > 30 ? url.slice(0, 15) + "..." + url.slice(-12) : url;
-	}
+  try {
+    const urlObj = new URL(url);
+    const hostname = urlObj.hostname;
+    if (hostname.length > 30) {
+      return `${hostname.slice(0, 15)}...${hostname.slice(-12)}`;
+    }
+    return hostname;
+  } catch {
+    return url.length > 30 ? `${url.slice(0, 15)}...${url.slice(-12)}` : url;
+  }
 }
 
 export default RPCIndicator;
diff --git a/src/components/common/SearchBox.tsx b/src/components/common/SearchBox.tsx
index 6272432..28899c3 100644
--- a/src/components/common/SearchBox.tsx
+++ b/src/components/common/SearchBox.tsx
@@ -1,56 +1,29 @@
-import React, { useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useSearch } from "../../hooks/useSearch";
 
 const SearchBox = () => {
-	const [searchTerm, setSearchTerm] = useState("");
-	const navigate = useNavigate();
-	const location = useLocation();
+  const { searchTerm, setSearchTerm, isResolving, error, clearError, handleSearch } = useSearch();
 
-	// Extract chainId from the pathname (e.g., /1/blocks -> 1)
-	const pathSegments = location.pathname.split("/").filter(Boolean);
-	const chainId =
-		pathSegments[0] && !isNaN(Number(pathSegments[0]))
-			? pathSegments[0]
-			: undefined;
-
-	const handleSearch = (e: React.FormEvent) => {
-		e.preventDefault();
-		if (!searchTerm.trim()) return;
-
-		// Basic routing logic placeholder
-		// In a real app, we would detect the type of input (address, tx, block)
-		// For now, we'll just log it or maybe navigate to a search result page if it existed.
-		// Since the user just asked for the UI, we'll keep the logic minimal but functional enough to show interaction.
-		console.log("Searching for:", searchTerm);
-
-		// Example logic:
-		if (searchTerm.startsWith("0x")) {
-			if (searchTerm.length === 42) {
-				navigate(`/${chainId}/address/${searchTerm}`);
-			} else if (searchTerm.length === 66) {
-				navigate(`/${chainId}/tx/${searchTerm}`);
-			}
-		} else if (!isNaN(Number(searchTerm))) {
-			navigate(`/${chainId}/block/${searchTerm}`);
-		}
-	};
-
-	return (
-		<div className="search-box-container">
-			<form onSubmit={handleSearch} className="search-form">
-				<input
-					type="text"
-					className="search-input"
-					placeholder="Search by Address / Txn Hash / Block / Token"
-					value={searchTerm}
-					onChange={(e) => setSearchTerm(e.target.value)}
-				/>
-				<button type="submit" className="search-button">
-					Scan
-				</button>
-			</form>
-		</div>
-	);
+  return (
+    <div className="search-box-container">
+      <form onSubmit={handleSearch} className="search-form">
+        <input
+          type="text"
+          className="search-input"
+          placeholder="Search by Address / Txn Hash / Block / ENS Name"
+          value={searchTerm}
+          onChange={(e) => {
+            setSearchTerm(e.target.value);
+            clearError();
+          }}
+          disabled={isResolving}
+        />
+        <button type="submit" className="search-button" disabled={isResolving}>
+          {isResolving ? "..." : "Scan"}
+        </button>
+      </form>
+      {error && <div className="search-error">{error}</div>}
+    </div>
+  );
 };
 
 export default SearchBox;
diff --git a/src/components/common/TierBadge.tsx b/src/components/common/TierBadge.tsx
new file mode 100644
index 0000000..580c132
--- /dev/null
+++ b/src/components/common/TierBadge.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { getSubscriptionTierName, isSubscriptionActive } from "../../services/MetadataService";
+import type { NetworkSubscription } from "../../types";
+
+interface TierBadgeProps {
+  subscription: NetworkSubscription | undefined;
+  /** Size variant */
+  size?: "small" | "medium";
+  /** Whether to show "Subscriber" suffix */
+  showSuffix?: boolean;
+  /** Additional CSS class */
+  className?: string;
+}
+
+/**
+ * Displays a subscription tier badge (Backer, Partner, or Ally)
+ * Only renders if the subscription is active
+ */
+const TierBadge: React.FC<TierBadgeProps> = React.memo(
+  ({ subscription, size = "medium", showSuffix = false, className = "" }) => {
+    if (!subscription || !isSubscriptionActive(subscription)) {
+      return null;
+    }
+
+    const tierName = getSubscriptionTierName(subscription.tier);
+    const sizeClass = size === "small" ? "tier-badge-small" : "tier-badge-medium";
+
+    return (
+      <span
+        className={`tier-badge tier-badge-${subscription.tier} ${sizeClass} ${className}`.trim()}
+      >
+        {tierName}
+        {showSuffix}
+      </span>
+    );
+  },
+);
+
+TierBadge.displayName = "TierBadge";
+
+export default TierBadge;
diff --git a/src/components/common/TransactionDisplay.tsx b/src/components/common/TransactionDisplay.tsx
deleted file mode 100644
index 260b6c3..0000000
--- a/src/components/common/TransactionDisplay.tsx
+++ /dev/null
@@ -1,773 +0,0 @@
-import React, {
-	useState,
-	useEffect,
-	useRef,
-	useMemo,
-	useCallback,
-} from "react";
-import { Link } from "react-router-dom";
-import type {
-	Transaction,
-	TransactionArbitrum,
-	TransactionReceiptArbitrum,
-	TransactionReceiptOptimism,
-	RPCMetadata,
-} from "../../types";
-import LongString from "./LongString";
-import { DataService } from "../../services/DataService";
-import { TraceResult } from "../../services/EVM/L1/fetchers/trace";
-import {
-	decodeEventLog,
-	DecodedEvent,
-	formatDecodedValue,
-	getEventTypeColor,
-} from "../../utils/eventDecoder";
-import { RPCIndicator } from "./RPCIndicator";
-
-interface TransactionDisplayProps {
-	transaction: Transaction | TransactionArbitrum;
-	chainId?: string;
-	currentBlockNumber?: number;
-	dataService?: DataService;
-	metadata?: RPCMetadata;
-	selectedProvider?: string | null;
-	onProviderSelect?: (provider: string) => void;
-}
-
-const TransactionDisplay: React.FC<TransactionDisplayProps> = React.memo(
-	({
-		transaction,
-		chainId,
-		currentBlockNumber,
-		dataService,
-		metadata,
-		selectedProvider,
-		onProviderSelect,
-	}) => {
-		const [showRawData, setShowRawData] = useState(false);
-		const [showLogs, setShowLogs] = useState(false);
-		const [showTrace, setShowTrace] = useState(false);
-		const [traceData, setTraceData] = useState<TraceResult | null>(null);
-		const [callTrace, setCallTrace] = useState<any>(null);
-		const [loadingTrace, setLoadingTrace] = useState(false);
-		const [copiedField, setCopiedField] = useState<string | null>(null);
-		const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-		// Check if trace is available (localhost only)
-		const isTraceAvailable = dataService?.isTraceAvailable() || false;
-
-		// Load trace data when trace section is expanded
-		useEffect(() => {
-			if (
-				showTrace &&
-				isTraceAvailable &&
-				dataService &&
-				!traceData &&
-				!callTrace
-			) {
-				setLoadingTrace(true);
-				Promise.all([
-					dataService.getTransactionTrace(transaction.hash),
-					dataService.getCallTrace(transaction.hash),
-				])
-					.then(([trace, call]) => {
-						setTraceData(trace);
-						setCallTrace(call);
-					})
-					.catch((err) => console.error("Error loading trace:", err))
-					.finally(() => setLoadingTrace(false));
-			}
-		}, [
-			showTrace,
-			isTraceAvailable,
-			dataService,
-			transaction.hash,
-			traceData,
-			callTrace,
-		]);
-
-		useEffect(() => {
-			return () => {
-				if (copyTimeoutRef.current) {
-					clearTimeout(copyTimeoutRef.current);
-				}
-			};
-		}, []);
-
-		// Check if this is an Arbitrum transaction
-		const isArbitrumTx = useCallback(
-			(tx: Transaction | TransactionArbitrum): tx is TransactionArbitrum => {
-				return "requestId" in tx;
-			},
-			[],
-		);
-
-		// Check if receipt is Arbitrum receipt
-		const isArbitrumReceipt = useCallback(
-			(receipt: any): receipt is TransactionReceiptArbitrum => {
-				return receipt && "l1BlockNumber" in receipt;
-			},
-			[],
-		);
-
-		// Check if receipt is Optimism receipt
-		const isOptimismReceipt = useCallback(
-			(receipt: any): receipt is TransactionReceiptOptimism => {
-				return receipt && "l1Fee" in receipt;
-			},
-			[],
-		);
-
-		const truncate = useCallback((str: string, start = 6, end = 4) => {
-			if (!str) return "";
-			if (str.length <= start + end) return str;
-			return `${str.slice(0, start)}...${str.slice(-end)}`;
-		}, []);
-
-		const formatValue = useCallback((value: string) => {
-			try {
-				const eth = Number(value) / 1e18;
-				return `${eth.toFixed(6)} ETH`;
-			} catch (e) {
-				return value;
-			}
-		}, []);
-
-		const formatGwei = useCallback((value: string) => {
-			try {
-				const gwei = Number(value) / 1e9;
-				return `${gwei.toFixed(2)} Gwei`;
-			} catch (e) {
-				return value;
-			}
-		}, []);
-
-		const parseTimestampToMs = useCallback((timestamp?: string) => {
-			if (!timestamp) return null;
-			const parsed = parseInt(timestamp, timestamp.startsWith("0x") ? 16 : 10);
-			if (Number.isNaN(parsed)) return null;
-			return parsed * 1000;
-		}, []);
-
-		const formatAbsoluteTimestamp = useCallback((timestampMs: number) => {
-			try {
-				return new Intl.DateTimeFormat(undefined, {
-					year: "numeric",
-					month: "short",
-					day: "2-digit",
-					hour: "2-digit",
-					minute: "2-digit",
-					second: "2-digit",
-					timeZoneName: "short",
-				}).format(new Date(timestampMs));
-			} catch (error) {
-				return new Date(timestampMs).toISOString();
-			}
-		}, []);
-
-		const formatTimeAgo = useCallback((timestampMs: number) => {
-			const diffMs = Date.now() - timestampMs;
-			const diffSeconds = Math.floor(Math.abs(diffMs) / 1000);
-			if (diffSeconds < 5) {
-				return diffMs >= 0 ? "just now" : "in a few seconds";
-			}
-
-			const units = [
-				{ label: "day", seconds: 60 * 60 * 24 },
-				{ label: "hour", seconds: 60 * 60 },
-				{ label: "minute", seconds: 60 },
-			];
-
-			for (const unit of units) {
-				if (diffSeconds >= unit.seconds) {
-					const value = Math.floor(diffSeconds / unit.seconds);
-					const plural = value === 1 ? "" : "s";
-					return diffMs >= 0
-						? `${value} ${unit.label}${plural} ago`
-						: `in ${value} ${unit.label}${plural}`;
-				}
-			}
-
-			return diffMs >= 0
-				? `${diffSeconds} second${diffSeconds === 1 ? "" : "s"} ago`
-				: `in ${diffSeconds} second${diffSeconds === 1 ? "" : "s"}`;
-		}, []);
-
-		const timestampMs = useMemo(
-			() => parseTimestampToMs(transaction.timestamp),
-			[parseTimestampToMs, transaction.timestamp],
-		);
-		const formattedTimestamp = useMemo(
-			() => (timestampMs ? formatAbsoluteTimestamp(timestampMs) : null),
-			[timestampMs, formatAbsoluteTimestamp],
-		);
-		const timestampAge = useMemo(
-			() => (timestampMs ? formatTimeAgo(timestampMs) : null),
-			[timestampMs, formatTimeAgo],
-		);
-
-		const getStatusBadge = useCallback((status?: string) => {
-			if (!status) return null;
-			const isSuccess = status === "0x1" || status === "1";
-			return (
-				<span
-					className={`status-badge ${isSuccess ? "status-badge-success" : "status-badge-failed"}`}
-				>
-					{isSuccess ? "Success" : "Failed"}
-				</span>
-			);
-		}, []);
-
-		const confirmations = useMemo(
-			() =>
-				currentBlockNumber
-					? currentBlockNumber - Number(transaction.blockNumber)
-					: null,
-			[currentBlockNumber, transaction.blockNumber],
-		);
-
-		return (
-			<div className="block-display-card">
-				<div
-					className="block-display-header"
-					style={{
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "center",
-					}}
-				>
-					<span className="block-label">Transaction Details</span>
-					{metadata && selectedProvider !== undefined && onProviderSelect && (
-						<RPCIndicator
-							metadata={metadata}
-							selectedProvider={selectedProvider}
-							onProviderSelect={onProviderSelect}
-						/>
-					)}
-				</div>
-
-				{/* Row-based layout like Etherscan */}
-				<div className="tx-details">
-					{/* Transaction Hash */}
-					<div className="tx-row">
-						<span className="tx-label">Transaction Hash:</span>
-						<span className="tx-value tx-mono">
-							<LongString value={transaction.hash} start={20} end={16} />
-						</span>
-					</div>
-
-					{/* Status */}
-					<div className="tx-row">
-						<span className="tx-label">Status:</span>
-						<span className="tx-value">
-							{getStatusBadge(transaction.receipt?.status)}
-						</span>
-					</div>
-
-					{/* Block */}
-					<div className="tx-row">
-						<span className="tx-label">Block:</span>
-						<span className="tx-value">
-							{chainId ? (
-								<Link
-									to={`/${chainId}/block/${transaction.blockNumber}`}
-									className="link-accent"
-								>
-									{Number(transaction.blockNumber).toLocaleString()}
-								</Link>
-							) : (
-								Number(transaction.blockNumber).toLocaleString()
-							)}
-							{confirmations !== null && (
-								<span className="tx-confirmations">
-									{confirmations > 100
-										? "+100"
-										: confirmations.toLocaleString()}{" "}
-									Block Confirmations
-								</span>
-							)}
-						</span>
-					</div>
-
-					{/* Timestamp */}
-					{formattedTimestamp && (
-						<div className="tx-row">
-							<span className="tx-label">Timestamp:</span>
-							<span className="tx-value">
-								{timestampAge && <span className="tx-age">{timestampAge}</span>}
-								<span className="tx-timestamp-full">
-									({formattedTimestamp})
-								</span>
-							</span>
-						</div>
-					)}
-
-					{/* From */}
-					<div className="tx-row">
-						<span className="tx-label">From:</span>
-						<span className="tx-value tx-mono">
-							{chainId ? (
-								<Link
-									to={`/${chainId}/address/${transaction.from}`}
-									className="link-accent"
-								>
-									{transaction.from}
-								</Link>
-							) : (
-								transaction.from
-							)}
-						</span>
-					</div>
-
-					{/* To */}
-					<div className="tx-row">
-						<span className="tx-label">
-							{transaction.to ? "To:" : "Interacted With:"}
-						</span>
-						<span className="tx-value tx-mono">
-							{transaction.to ? (
-								chainId ? (
-									<Link
-										to={`/${chainId}/address/${transaction.to}`}
-										className="link-accent"
-									>
-										{transaction.to}
-									</Link>
-								) : (
-									transaction.to
-								)
-							) : (
-								<span className="contract-creation-badge">
-									Contract Creation
-								</span>
-							)}
-						</span>
-					</div>
-
-					{/* Contract Address (if created) */}
-					{transaction.receipt?.contractAddress && (
-						<div className="tx-row">
-							<span className="tx-label">Contract Created:</span>
-							<span className="tx-value tx-mono">
-								{chainId ? (
-									<Link
-										to={`/${chainId}/address/${transaction.receipt.contractAddress}`}
-										className="link-accent"
-									>
-										{transaction.receipt.contractAddress}
-									</Link>
-								) : (
-									transaction.receipt.contractAddress
-								)}
-							</span>
-						</div>
-					)}
-
-					{/* Value */}
-					<div className="tx-row">
-						<span className="tx-label">Value:</span>
-						<span className="tx-value tx-value-highlight">
-							{formatValue(transaction.value)}
-						</span>
-					</div>
-
-					{/* Transaction Fee */}
-					<div className="tx-row">
-						<span className="tx-label">Transaction Fee:</span>
-						<span className="tx-value">
-							{transaction.receipt
-								? formatValue(
-										(
-											BigInt(transaction.receipt.gasUsed) *
-											BigInt(transaction.receipt.effectiveGasPrice)
-										).toString(),
-									)
-								: "Pending"}
-						</span>
-					</div>
-
-					{/* Gas Price */}
-					<div className="tx-row">
-						<span className="tx-label">Gas Price:</span>
-						<span className="tx-value">{formatGwei(transaction.gasPrice)}</span>
-					</div>
-
-					{/* Gas Limit & Usage */}
-					<div className="tx-row">
-						<span className="tx-label">Gas Limit & Usage:</span>
-						<span className="tx-value">
-							{Number(transaction.gas).toLocaleString()}
-							{transaction.receipt && (
-								<>
-									{" | "}
-									{Number(transaction.receipt.gasUsed).toLocaleString()}
-									<span className="tx-gas-pct">
-										(
-										{(
-											(Number(transaction.receipt.gasUsed) /
-												Number(transaction.gas)) *
-											100
-										).toFixed(1)}
-										%)
-									</span>
-								</>
-							)}
-						</span>
-					</div>
-
-					{/* Effective Gas Price (if different from gas price) */}
-					{transaction.receipt &&
-						transaction.receipt.effectiveGasPrice !== transaction.gasPrice && (
-							<div className="tx-row">
-								<span className="tx-label">Effective Gas Price:</span>
-								<span className="tx-value">
-									{formatGwei(transaction.receipt.effectiveGasPrice)}
-								</span>
-							</div>
-						)}
-
-					{/* Arbitrum-specific fields */}
-					{isArbitrumTx(transaction) &&
-						transaction.receipt &&
-						isArbitrumReceipt(transaction.receipt) && (
-							<>
-								<div className="tx-row tx-row-arbitrum">
-									<span className="tx-label">L1 Block Number:</span>
-									<span className="tx-value">
-										{Number(transaction.receipt.l1BlockNumber).toLocaleString()}
-									</span>
-								</div>
-								<div className="tx-row tx-row-arbitrum">
-									<span className="tx-label">Gas Used for L1:</span>
-									<span className="tx-value">
-										{Number(transaction.receipt.gasUsedForL1).toLocaleString()}
-									</span>
-								</div>
-							</>
-						)}
-
-					{/* OP Stack fields (Optimism, Base) */}
-					{transaction.receipt && isOptimismReceipt(transaction.receipt) && (
-						<>
-							<div
-								className={`tx-row ${chainId === "8453" ? "tx-row-base" : "tx-row-optimism"}`}
-							>
-								<span className="tx-label">L1 Fee:</span>
-								<span className="tx-value">
-									{formatValue(transaction.receipt.l1Fee)}
-								</span>
-							</div>
-							<div
-								className={`tx-row ${chainId === "8453" ? "tx-row-base" : "tx-row-optimism"}`}
-							>
-								<span className="tx-label">L1 Gas Price:</span>
-								<span className="tx-value">
-									{formatGwei(transaction.receipt.l1GasPrice)}
-								</span>
-							</div>
-							<div
-								className={`tx-row ${chainId === "8453" ? "tx-row-base" : "tx-row-optimism"}`}
-							>
-								<span className="tx-label">L1 Gas Used:</span>
-								<span className="tx-value">
-									{Number(transaction.receipt.l1GasUsed).toLocaleString()}
-								</span>
-							</div>
-							<div
-								className={`tx-row ${chainId === "8453" ? "tx-row-base" : "tx-row-optimism"}`}
-							>
-								<span className="tx-label">L1 Fee Scalar:</span>
-								<span className="tx-value">
-									{transaction.receipt.l1FeeScalar}
-								</span>
-							</div>
-						</>
-					)}
-
-					{/* Other Attributes (Nonce, Index, Type) */}
-					<div className="tx-row">
-						<span className="tx-label">Other Attributes:</span>
-						<span className="tx-value tx-attrs">
-							<span className="tx-attr">Nonce: {transaction.nonce}</span>
-							<span className="tx-attr">
-								Position: {transaction.transactionIndex}
-							</span>
-							<span className="tx-attr">Type: {transaction.type}</span>
-						</span>
-					</div>
-
-					{/* Input Data */}
-					<div className="tx-row tx-row-vertical">
-						<span className="tx-label">Input Data:</span>
-						{transaction.data && transaction.data !== "0x" ? (
-							<div className="tx-input-data">
-								<code>{transaction.data}</code>
-							</div>
-						) : (
-							<span className="tx-empty">0x</span>
-						)}
-					</div>
-				</div>
-
-				{/* Event Logs Section - Always visible */}
-				{transaction.receipt && transaction.receipt.logs.length > 0 && (
-					<div className="tx-section">
-						<div className="tx-section-header">
-							<span className="tx-section-title">
-								Event Logs ({transaction.receipt.logs.length})
-							</span>
-						</div>
-						<div className="tx-logs">
-							{transaction.receipt.logs.map((log: any, index: number) => {
-								const decoded: DecodedEvent | null = log.topics
-									? decodeEventLog(log.topics, log.data || "0x")
-									: null;
-
-								return (
-									<div key={index} className="tx-log">
-										<div className="tx-log-index">{index}</div>
-										<div className="tx-log-content">
-											{/* Decoded Event Header */}
-											{decoded && (
-												<div className="tx-log-decoded">
-													<span
-														className="tx-event-badge"
-														style={{
-															backgroundColor: getEventTypeColor(decoded.type),
-														}}
-													>
-														{decoded.name}
-													</span>
-													<span
-														className="tx-event-signature"
-														title={decoded.description}
-													>
-														{decoded.fullSignature}
-													</span>
-												</div>
-											)}
-
-											{/* Address */}
-											<div className="tx-log-row">
-												<span className="tx-log-label">Address</span>
-												<span className="tx-log-value tx-mono">
-													{chainId ? (
-														<Link
-															to={`/${chainId}/address/${log.address}`}
-															className="link-accent"
-														>
-															{log.address}
-														</Link>
-													) : (
-														log.address
-													)}
-												</span>
-											</div>
-
-											{/* Decoded Parameters */}
-											{decoded && decoded.params.length > 0 && (
-												<div className="tx-log-row tx-log-params">
-													<span className="tx-log-label">Decoded</span>
-													<div className="tx-log-value">
-														{decoded.params.map((param, i) => (
-															<div key={i} className="tx-decoded-param">
-																<span className="tx-param-name">
-																	{param.name}
-																</span>
-																<span className="tx-param-type">
-																	({param.type})
-																</span>
-																<span
-																	className={`tx-param-value ${param.type === "address" ? "tx-mono" : ""}`}
-																>
-																	{param.type === "address" && chainId ? (
-																		<Link
-																			to={`/${chainId}/address/${param.value}`}
-																			className="link-accent"
-																		>
-																			{param.value}
-																		</Link>
-																	) : (
-																		formatDecodedValue(param.value, param.type)
-																	)}
-																</span>
-																{param.indexed && (
-																	<span className="tx-param-indexed">
-																		indexed
-																	</span>
-																)}
-															</div>
-														))}
-													</div>
-												</div>
-											)}
-
-											{/* Raw Topics (collapsed if decoded) */}
-											{log.topics && log.topics.length > 0 && (
-												<div className="tx-log-row tx-log-topics">
-													<span className="tx-log-label">
-														{decoded ? "Raw Topics" : "Topics"}
-													</span>
-													<div className="tx-log-value">
-														{log.topics.map((topic: string, i: number) => (
-															<div key={i} className="tx-topic">
-																<span className="tx-topic-index">[{i}]</span>
-																<code className="tx-topic-value">{topic}</code>
-															</div>
-														))}
-													</div>
-												</div>
-											)}
-
-											{/* Raw Data */}
-											{log.data && log.data !== "0x" && (
-												<div className="tx-log-row">
-													<span className="tx-log-label">
-														{decoded ? "Raw Data" : "Data"}
-													</span>
-													<div className="tx-log-value">
-														<code className="tx-log-data">{log.data}</code>
-													</div>
-												</div>
-											)}
-										</div>
-									</div>
-								);
-							})}
-						</div>
-					</div>
-				)}
-
-				{/* Debug Trace Section (Localhost Only) */}
-				{isTraceAvailable && (
-					<div className="collapsible-container">
-						<button
-							className="collapsible-button-purple"
-							onClick={() => setShowTrace(!showTrace)}
-						>
-							{showTrace ? "Hide" : "Show"} Debug Trace
-						</button>
-
-						{showTrace && (
-							<div className="collapsible-content">
-								{loadingTrace && (
-									<div className="trace-loading">Loading trace data...</div>
-								)}
-
-								{/* Call Trace */}
-								{callTrace && (
-									<div className="trace-container">
-										<div className="trace-title">Call Trace</div>
-										<div className="trace-details">
-											<div>
-												<span className="log-label">Type:</span>{" "}
-												{callTrace.type}
-											</div>
-											<div>
-												<span className="log-label">From:</span>{" "}
-												<LongString value={callTrace.from} start={10} end={8} />
-											</div>
-											<div>
-												<span className="log-label">To:</span>{" "}
-												<LongString value={callTrace.to} start={10} end={8} />
-											</div>
-											<div>
-												<span className="log-label">Value:</span>{" "}
-												{callTrace.value}
-											</div>
-											<div>
-												<span className="log-label">Gas:</span> {callTrace.gas}
-											</div>
-											<div>
-												<span className="log-label">Gas Used:</span>{" "}
-												{callTrace.gasUsed}
-											</div>
-											{callTrace.error && (
-												<div className="trace-error">
-													<span className="log-label">Error:</span>{" "}
-													{callTrace.error}
-												</div>
-											)}
-											{callTrace.calls && callTrace.calls.length > 0 && (
-												<div className="margin-top-10">
-													<div className="trace-calls-header">
-														Internal Calls ({callTrace.calls.length}):
-													</div>
-													<div className="trace-calls-container">
-														{JSON.stringify(callTrace.calls, null, 2)}
-													</div>
-												</div>
-											)}
-										</div>
-									</div>
-								)}
-
-								{/* Opcode Trace */}
-								{traceData && (
-									<div className="trace-container">
-										<div className="trace-title">Execution Trace</div>
-										<div className="trace-details margin-bottom-15">
-											<div>
-												<span className="log-label">Total Gas Used:</span>{" "}
-												{traceData.gas}
-											</div>
-											<div>
-												<span className="log-label">Failed:</span>{" "}
-												{traceData.failed ? "Yes" : "No"}
-											</div>
-											<div>
-												<span className="log-label">Return Value:</span>{" "}
-												<LongString
-													value={traceData.returnValue || "0x"}
-													start={20}
-													end={20}
-												/>
-											</div>
-											<div>
-												<span className="log-label">Opcodes Executed:</span>{" "}
-												{traceData.structLogs.length}
-											</div>
-										</div>
-
-										<div className="trace-opcode-header">
-											Opcode Execution Log:
-										</div>
-										<div className="trace-opcode-container">
-											{traceData.structLogs.slice(0, 100).map((log, index) => (
-												<div key={index} className="trace-opcode-step">
-													<div className="trace-opcode-name">
-														Step {index}: {log.op}
-													</div>
-													<div className="trace-opcode-info">
-														PC: {log.pc} | Gas: {log.gas} | Cost: {log.gasCost}{" "}
-														| Depth: {log.depth}
-													</div>
-													{log.stack && log.stack.length > 0 && (
-														<div className="trace-opcode-stack">
-															Stack: [{log.stack.slice(0, 3).join(", ")}
-															{log.stack.length > 3 ? "..." : ""}]
-														</div>
-													)}
-												</div>
-											))}
-											{traceData.structLogs.length > 100 && (
-												<div className="trace-more-text">
-													... showing first 100 of {traceData.structLogs.length}{" "}
-													steps
-												</div>
-											)}
-										</div>
-									</div>
-								)}
-							</div>
-						)}
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-
-TransactionDisplay.displayName = "TransactionDisplay";
-
-export default TransactionDisplay;
diff --git a/src/components/common/TransactionReceiptDisplay.tsx b/src/components/common/TransactionReceiptDisplay.tsx
deleted file mode 100644
index c926c6e..0000000
--- a/src/components/common/TransactionReceiptDisplay.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from "react";
-import { TransactionReceipt } from "../../types";
-
-interface TransactionReceiptDisplayProps {
-	receipt: TransactionReceipt;
-}
-
-const TransactionReceiptDisplay: React.FC<TransactionReceiptDisplayProps> = ({
-	receipt,
-}) => {
-	const truncate = (str: string, start = 6, end = 4) => {
-		if (!str) return "";
-		if (str.length <= start + end) return str;
-		return `${str.slice(0, start)}...${str.slice(-end)}`;
-	};
-
-	const getStatusText = (status: string) => {
-		return status === "1" || status === "0x1" ? "Success" : "Failed";
-	};
-
-	return (
-		<div className="block-display-card">
-			<div className="block-display-header">
-				<span className="block-label">Receipt:</span>
-				<span className="block-number">
-					{truncate(receipt.transactionHash, 8, 6)}
-				</span>
-			</div>
-
-			<div className="block-display-grid">
-				<div className="block-detail-item">
-					<span className="detail-label">Status</span>
-					<span className="detail-value">{getStatusText(receipt.status)}</span>
-				</div>
-
-				<div className="block-detail-item">
-					<span className="detail-label">Block Number</span>
-					<span className="detail-value">{receipt.blockNumber}</span>
-				</div>
-
-				<div className="block-detail-item">
-					<span className="detail-label">From</span>
-					<span className="detail-value" title={receipt.from}>
-						{truncate(receipt.from)}
-					</span>
-				</div>
-
-				<div className="block-detail-item">
-					<span className="detail-label">To</span>
-					<span className="detail-value" title={receipt.to}>
-						{truncate(receipt.to)}
-					</span>
-				</div>
-
-				<div className="block-detail-item">
-					<span className="detail-label">Gas Used</span>
-					<span className="detail-value">
-						{Number(receipt.gasUsed).toLocaleString()}
-					</span>
-				</div>
-
-				<div className="block-detail-item">
-					<span className="detail-label">Cumulative Gas Used</span>
-					<span className="detail-value">
-						{Number(receipt.cumulativeGasUsed).toLocaleString()}
-					</span>
-				</div>
-
-				<div className="block-detail-item">
-					<span className="detail-label">Contract Address</span>
-					<span className="detail-value">
-						{receipt.contractAddress || "N/A"}
-					</span>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default TransactionReceiptDisplay;
diff --git a/src/components/common/VersionWarningIcon.tsx b/src/components/common/VersionWarningIcon.tsx
deleted file mode 100644
index 4969090..0000000
--- a/src/components/common/VersionWarningIcon.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useState, useMemo } from "react";
-import { ENVIRONMENT } from "../../utils/constants";
-
-interface VersionWarningIconProps {
-	readonly className?: string;
-}
-
-// Constants outside component to avoid recreating
-const TOOLTIP_TEXT = "This is not a production verified version";
-const ICON_COLORS = {
-	development: "#ef4444",
-	staging: "#f59e0b",
-	default: "#6b7280"
-} as const;
-
-const VersionWarningIcon: React.FC<VersionWarningIconProps> = ({ className = "" }) => {
-	const [showTooltip, setShowTooltip] = useState(false);
-
-	// Memoize color calculation
-	const iconColor = useMemo(() => {
-		return ICON_COLORS[ENVIRONMENT as keyof typeof ICON_COLORS] || ICON_COLORS.default;
-	}, []);
-
-	if (ENVIRONMENT === "production") {
-		return null;
-	}
-
-	return (
-		<div
-			className={`version-warning-icon ${className}`}
-			onMouseEnter={() => setShowTooltip(true)}
-			onMouseLeave={() => setShowTooltip(false)}
-		>
-			<svg
-				width="20"
-				height="20"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					d="M12 9v3m0 3h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-					stroke={iconColor}
-					strokeWidth="2"
-					strokeLinecap="round"
-					strokeLinejoin="round"
-				/>
-			</svg>
-			{showTooltip && (
-				<div className="version-warning-tooltip">
-					{TOOLTIP_TEXT}
-				</div>
-			)}
-		</div>
-	);
-};
-
-export default VersionWarningIcon;
\ No newline at end of file
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
deleted file mode 100644
index ccf01bd..0000000
--- a/src/components/common/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as ErrorBoundary } from "./ErrorBoundary";
-export { default as Loading } from "./Loading";
-export { default as Navbar } from "./Navbar";
-export { default as NetworkBlockIndicator } from "./NetworkBlockIndicator";
-export { default as NotificationDisplay } from "./NotificationDisplay";
diff --git a/src/components/common/modal/BaseModal.tsx b/src/components/common/modal/BaseModal.tsx
deleted file mode 100644
index 7316c03..0000000
--- a/src/components/common/modal/BaseModal.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { ReactNode } from "react";
-import "../../../styles/styles.css";
-
-export interface BaseModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-	title: string;
-	children: ReactNode;
-	isLoading?: boolean;
-	size?: "sm" | "md" | "lg";
-	closeOnOverlayClick?: boolean;
-}
-
-export default function BaseModal({
-	isOpen,
-	onClose,
-	title,
-	children,
-	isLoading = false,
-	size = "md",
-	closeOnOverlayClick = true,
-}: BaseModalProps) {
-	if (!isOpen) return null;
-
-	const handleOverlayClick = (e: React.MouseEvent) => {
-		if (closeOnOverlayClick && !isLoading) {
-			onClose();
-		}
-	};
-
-	const handleContentClick = (e: React.MouseEvent) => {
-		e.stopPropagation();
-	};
-
-	const getSizeClass = () => {
-		switch (size) {
-			case "sm":
-				return "modal-sm";
-			case "lg":
-				return "modal-lg";
-			default:
-				return "";
-		}
-	};
-
-	return (
-		<div className="modal-overlay" onClick={handleOverlayClick}>
-			<div className={`modal ${getSizeClass()}`} onClick={handleContentClick}>
-				<div className="modal-header">
-					<h3 className="modal-title">{title}</h3>
-					<button
-						className="modal-close"
-						onClick={onClose}
-						disabled={isLoading}
-						aria-label="Close modal"
-					>
-						×
-					</button>
-				</div>
-
-				<div className="modal-body">{children}</div>
-			</div>
-		</div>
-	);
-}
diff --git a/src/components/common/modal/index.tsx b/src/components/common/modal/index.tsx
deleted file mode 100644
index 6dd177a..0000000
--- a/src/components/common/modal/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Modal Components System
- *
- * This folder contains all modal-related components for the application.
- * The system is designed with reusability and consistency in mind.
- *
- * Architecture:
- * - BaseModal: Core modal wrapper with overlay, title, close button
- * - ModalActions: Reusable action button layouts
- * - ModalLoading: Standard loading animation component
- * - Specific Modals: ActionModal, NewTokenDepositModal, DiscoverTokensModal
- *
- * Usage Examples:
- *
- * 1. Using BaseModal for custom modals:
- * ```tsx
- * import { BaseModal, StandardActions } from '../common/modal';
- *
- * <BaseModal isOpen={isOpen} onClose={onClose} title="Custom Modal">
- *   <p>Custom content here</p>
- *   <StandardActions onCancel={onClose} onConfirm={handleConfirm} />
- * </BaseModal>
- * ```
- *
- * 2. Using specific modals:
- * ```tsx
- * import { ActionModal, DiscoverTokensModal } from '../common/modal';
- * ```
- *
- * Features:
- * - Consistent styling across all modals
- * - Reusable action buttons and loading states
- * - Accessibility support (ESC key, focus management)
- * - Dark mode support through CSS variables
- * - Responsive design
- */
-
-// Base modal components
-export { default as BaseModal } from "./BaseModal";
-export type { BaseModalProps } from "./BaseModal";
diff --git a/src/components/devtools/ContractsSection.tsx b/src/components/devtools/ContractsSection.tsx
deleted file mode 100644
index a139b3c..0000000
--- a/src/components/devtools/ContractsSection.tsx
+++ /dev/null
@@ -1,541 +0,0 @@
-import React, { useState } from "react";
-
-const NETWORKS: Record<number, { name: string }> = {
-	1: { name: "Ethereum Mainnet" },
-	10: { name: "Optimism" },
-	42161: { name: "Arbitrum One" },
-	8453: { name: "Base" },
-	137: { name: "Polygon" },
-	11155111: { name: "Sepolia" },
-	84532: { name: "Base Sepolia" },
-};
-
-const SOURCIFY_API = "https://sourcify.dev/server";
-
-const ContractsSection: React.FC = () => {
-	// Standard JSON Verification
-	const [showStandardVerify, setShowStandardVerify] = useState(true);
-	const [stdChainId, setStdChainId] = useState<number>(1);
-	const [stdAddress, setStdAddress] = useState("");
-	const [stdContractName, setStdContractName] = useState("");
-	const [stdSources, setStdSources] = useState(JSON.stringify({
-		"MyContract.sol": {
-			content: "// SPDX-License-Identifier: MIT\npragma solidity ^0.8.0;\n\ncontract MyContract {\n    uint256 public value;\n    \n    constructor(uint256 _value) {\n        value = _value;\n    }\n}"
-		}
-	}, null, 2));
-	const [stdSettings, setStdSettings] = useState(JSON.stringify({
-		optimizer: {
-			enabled: true,
-			runs: 200
-		},
-		evmVersion: "paris"
-	}, null, 2));
-	const [stdVerifying, setStdVerifying] = useState(false);
-	const [stdResult, setStdResult] = useState<any>(null);
-	const [stdError, setStdError] = useState<string | null>(null);
-
-	// Metadata Verification
-	const [showMetadataVerify, setShowMetadataVerify] = useState(false);
-	const [metaChainId, setMetaChainId] = useState<number>(1);
-	const [metaAddress, setMetaAddress] = useState("");
-	const [metadataJson, setMetadataJson] = useState("");
-	const [metaVerifying, setMetaVerifying] = useState(false);
-	const [metaResult, setMetaResult] = useState<any>(null);
-	const [metaError, setMetaError] = useState<string | null>(null);
-
-	// Etherscan Import
-	const [showEtherscanImport, setShowEtherscanImport] = useState(false);
-	const [etherscanChainId, setEtherscanChainId] = useState<number>(1);
-	const [etherscanAddress, setEtherscanAddress] = useState("");
-	const [etherscanApiKey, setEtherscanApiKey] = useState("");
-	const [etherscanImporting, setEtherscanImporting] = useState(false);
-	const [etherscanResult, setEtherscanResult] = useState<any>(null);
-	const [etherscanError, setEtherscanError] = useState<string | null>(null);
-
-	// Similarity Verification
-	const [showSimilarityVerify, setShowSimilarityVerify] = useState(false);
-	const [simChainId, setSimChainId] = useState<number>(1);
-	const [simAddress, setSimAddress] = useState("");
-	const [simVerifying, setSimVerifying] = useState(false);
-	const [simResult, setSimResult] = useState<any>(null);
-	const [simError, setSimError] = useState<string | null>(null);
-
-	// Standard JSON Verification
-	const verifyStandardJson = async () => {
-		setStdVerifying(true);
-		setStdError(null);
-		setStdResult(null);
-
-		try {
-			if (!stdAddress || !stdContractName) {
-				throw new Error("Address and contract name are required");
-			}
-
-			const sources = JSON.parse(stdSources);
-			const settings = JSON.parse(stdSettings);
-
-			const response = await fetch(`${SOURCIFY_API}/v2/verify/${stdChainId}/${stdAddress}`, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify({
-					contractName: stdContractName,
-					compilerVersion: "0.8.0",
-					sourceFiles: sources,
-					settings: settings,
-				}),
-			});
-
-			const data = await response.json();
-			
-			if (!response.ok) {
-				throw new Error(data.error || `HTTP ${response.status}: ${response.statusText}`);
-			}
-
-			setStdResult(data);
-			
-			// Poll for verification status if we got a verification ID
-			if (data.verificationId) {
-				pollVerificationStatus(data.verificationId, setStdResult, setStdError);
-			}
-		} catch (err: any) {
-			setStdError(err.message || String(err));
-		} finally {
-			setStdVerifying(false);
-		}
-	};
-
-	// Metadata Verification
-	const verifyMetadata = async () => {
-		setMetaVerifying(true);
-		setMetaError(null);
-		setMetaResult(null);
-
-		try {
-			if (!metaAddress || !metadataJson) {
-				throw new Error("Address and metadata JSON are required");
-			}
-
-			const metadata = JSON.parse(metadataJson);
-
-			const response = await fetch(`${SOURCIFY_API}/v2/verify/metadata/${metaChainId}/${metaAddress}`, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify({
-					metadata: metadata,
-				}),
-			});
-
-			const data = await response.json();
-			
-			if (!response.ok) {
-				throw new Error(data.error || `HTTP ${response.status}: ${response.statusText}`);
-			}
-
-			setMetaResult(data);
-			
-			if (data.verificationId) {
-				pollVerificationStatus(data.verificationId, setMetaResult, setMetaError);
-			}
-		} catch (err: any) {
-			setMetaError(err.message || String(err));
-		} finally {
-			setMetaVerifying(false);
-		}
-	};
-
-	// Etherscan Import
-	const importFromEtherscan = async () => {
-		setEtherscanImporting(true);
-		setEtherscanError(null);
-		setEtherscanResult(null);
-
-		try {
-			if (!etherscanAddress) {
-				throw new Error("Address is required");
-			}
-
-			const url = new URL(`${SOURCIFY_API}/v2/verify/etherscan/${etherscanChainId}/${etherscanAddress}`);
-			if (etherscanApiKey) {
-				url.searchParams.append("apiKey", etherscanApiKey);
-			}
-
-			const response = await fetch(url.toString(), {
-				method: "POST",
-			});
-
-			const data = await response.json();
-			
-			if (!response.ok) {
-				throw new Error(data.error || `HTTP ${response.status}: ${response.statusText}`);
-			}
-
-			setEtherscanResult(data);
-			
-			if (data.verificationId) {
-				pollVerificationStatus(data.verificationId, setEtherscanResult, setEtherscanError);
-			}
-		} catch (err: any) {
-			setEtherscanError(err.message || String(err));
-		} finally {
-			setEtherscanImporting(false);
-		}
-	};
-
-	// Similarity Verification
-	const verifySimilarity = async () => {
-		setSimVerifying(true);
-		setSimError(null);
-		setSimResult(null);
-
-		try {
-			if (!simAddress) {
-				throw new Error("Address is required");
-			}
-
-			const response = await fetch(`${SOURCIFY_API}/v2/verify/similarity/${simChainId}/${simAddress}`, {
-				method: "POST",
-			});
-
-			const data = await response.json();
-			
-			if (!response.ok) {
-				throw new Error(data.error || `HTTP ${response.status}: ${response.statusText}`);
-			}
-
-			setSimResult(data);
-			
-			if (data.verificationId) {
-				pollVerificationStatus(data.verificationId, setSimResult, setSimError);
-			}
-		} catch (err: any) {
-			setSimError(err.message || String(err));
-		} finally {
-			setSimVerifying(false);
-		}
-	};
-
-	// Poll verification status
-	const pollVerificationStatus = async (
-		verificationId: string,
-		setResult: (data: any) => void,
-		setError: (error: string) => void
-	) => {
-		let attempts = 0;
-		const maxAttempts = 30;
-		const pollInterval = 2000;
-
-		const poll = async () => {
-			try {
-				const response = await fetch(`${SOURCIFY_API}/v2/verify/${verificationId}`);
-				const data = await response.json();
-
-				if (data.status === "completed" || data.status === "failed") {
-					setResult(data);
-					return;
-				}
-
-				attempts++;
-				if (attempts < maxAttempts) {
-					setTimeout(poll, pollInterval);
-				} else {
-					setError("Verification timed out. Check status manually.");
-				}
-			} catch (err: any) {
-				setError(err.message || String(err));
-			}
-		};
-
-		poll();
-	};
-
-	const renderResult = (result: any) => {
-		if (!result) return null;
-		return (
-			<div className="devtools-results">
-				<pre className="mono sourcify-result-json">{JSON.stringify(result, null, 2)}</pre>
-			</div>
-		);
-	};
-
-	return (
-		<div className="devtools-section">
-			{/* Standard JSON Verification */}
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowStandardVerify(!showStandardVerify)}
-				>
-					<h3 className="devtools-tool-title">✅ Verify Contract (Standard JSON)</h3>
-					<span className="devtools-section-toggle">
-						{showStandardVerify ? "▼" : "▶"}
-					</span>
-				</div>
-				{showStandardVerify && (
-					<div className="devtools-flex-column devtools-gap-12">
-						<div className="sourcify-grid-2col">
-							<div className="devtools-flex-column devtools-gap-4">
-								<label className="input-label">Chain ID</label>
-								<select
-									className="devtools-input"
-									value={stdChainId}
-									onChange={(e) => setStdChainId(Number(e.target.value))}
-								>
-									{Object.entries(NETWORKS).map(([id, net]) => (
-										<option key={id} value={id}>
-											{net.name} ({id})
-										</option>
-									))}
-								</select>
-							</div>
-							<div className="devtools-flex-column devtools-gap-4">
-								<label className="input-label">Contract Address</label>
-								<input
-									type="text"
-									className="devtools-input mono"
-									placeholder="0x..."
-									value={stdAddress}
-									onChange={(e) => setStdAddress(e.target.value)}
-								/>
-							</div>
-						</div>
-
-						<div className="devtools-flex-column devtools-gap-4">
-							<label className="input-label">Contract Name</label>
-							<input
-								type="text"
-								className="devtools-input"
-								placeholder="MyContract"
-								value={stdContractName}
-								onChange={(e) => setStdContractName(e.target.value)}
-							/>
-						</div>
-
-						<div className="devtools-flex-column devtools-gap-4">
-							<label className="input-label">Sources (JSON)</label>
-							<textarea
-								className="devtools-input mono sourcify-sources-textarea"
-								placeholder='{"MyContract.sol": {"content": "pragma solidity..."}}'
-								value={stdSources}
-								onChange={(e) => setStdSources(e.target.value)}
-							/>
-						</div>
-
-						<div className="devtools-flex-column devtools-gap-4">
-							<label className="input-label">Compiler Settings (JSON)</label>
-							<textarea
-								className="devtools-input mono sourcify-settings-textarea"
-								placeholder='{"optimizer": {"enabled": true, "runs": 200}}'
-								value={stdSettings}
-								onChange={(e) => setStdSettings(e.target.value)}
-							/>
-						</div>
-
-						<button
-							className="devtools-button"
-							onClick={verifyStandardJson}
-							disabled={stdVerifying}
-						>
-							{stdVerifying ? "Verifying..." : "Verify Contract"}
-						</button>
-
-						{stdError && <div className="devtools-error">{stdError}</div>}
-						{stdResult && renderResult(stdResult)}
-					</div>
-				)}
-			</div>
-
-			{/* Metadata Verification */}
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowMetadataVerify(!showMetadataVerify)}
-				>
-					<h3 className="devtools-tool-title">🧾 Verify with Metadata</h3>
-					<span className="devtools-section-toggle">
-						{showMetadataVerify ? "▼" : "▶"}
-					</span>
-				</div>
-				{showMetadataVerify && (
-					<div className="devtools-flex-column devtools-gap-12">
-						<div className="sourcify-grid-2col">
-							<div className="devtools-flex-column devtools-gap-4">
-								<label className="input-label">Chain ID</label>
-								<select
-									className="devtools-input"
-									value={metaChainId}
-									onChange={(e) => setMetaChainId(Number(e.target.value))}
-								>
-									{Object.entries(NETWORKS).map(([id, net]) => (
-										<option key={id} value={id}>
-											{net.name} ({id})
-										</option>
-									))}
-								</select>
-							</div>
-							<div className="devtools-flex-column devtools-gap-4">
-								<label className="input-label">Contract Address</label>
-								<input
-									type="text"
-									className="devtools-input mono"
-									placeholder="0x..."
-									value={metaAddress}
-									onChange={(e) => setMetaAddress(e.target.value)}
-								/>
-							</div>
-						</div>
-
-						<div className="devtools-flex-column devtools-gap-4">
-							<label className="input-label">Metadata JSON</label>
-							<textarea
-								className="devtools-input mono sourcify-metadata-textarea"
-								placeholder='{"compiler": {...}, "sources": {...}, ...}'
-								value={metadataJson}
-								onChange={(e) => setMetadataJson(e.target.value)}
-							/>
-						</div>
-
-						<button
-							className="devtools-button"
-							onClick={verifyMetadata}
-							disabled={metaVerifying}
-						>
-							{metaVerifying ? "Verifying..." : "Verify with Metadata"}
-						</button>
-
-						{metaError && <div className="devtools-error">{metaError}</div>}
-						{metaResult && renderResult(metaResult)}
-					</div>
-				)}
-			</div>
-
-			{/* Etherscan Import */}
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowEtherscanImport(!showEtherscanImport)}
-				>
-					<h3 className="devtools-tool-title">🔗 Import to Sourcify from Etherscan</h3>
-					<span className="devtools-section-toggle">
-						{showEtherscanImport ? "▼" : "▶"}
-					</span>
-				</div>
-				{showEtherscanImport && (
-					<div className="devtools-flex-column devtools-gap-12">
-						<div className="sourcify-grid-2col">
-							<div className="devtools-flex-column devtools-gap-4">
-								<label className="input-label">Chain ID</label>
-								<select
-									className="devtools-input"
-									value={etherscanChainId}
-									onChange={(e) => setEtherscanChainId(Number(e.target.value))}
-								>
-									{Object.entries(NETWORKS).map(([id, net]) => (
-										<option key={id} value={id}>
-											{net.name} ({id})
-										</option>
-									))}
-								</select>
-							</div>
-							<div className="devtools-flex-column devtools-gap-4">
-								<label className="input-label">Contract Address</label>
-								<input
-									type="text"
-									className="devtools-input mono"
-									placeholder="0x..."
-									value={etherscanAddress}
-									onChange={(e) => setEtherscanAddress(e.target.value)}
-								/>
-							</div>
-						</div>
-
-						<div className="devtools-flex-column devtools-gap-4">
-							<label className="input-label">Etherscan API Key (Optional)</label>
-							<input
-								type="text"
-								className="devtools-input mono"
-								placeholder="Your Etherscan API key..."
-								value={etherscanApiKey}
-								onChange={(e) => setEtherscanApiKey(e.target.value)}
-							/>
-						</div>
-
-						<button
-							className="devtools-button"
-							onClick={importFromEtherscan}
-							disabled={etherscanImporting}
-						>
-							{etherscanImporting ? "Importing..." : "Import from Etherscan"}
-						</button>
-
-						{etherscanError && <div className="devtools-error">{etherscanError}</div>}
-						{etherscanResult && renderResult(etherscanResult)}
-					</div>
-				)}
-			</div>
-
-			{/* Similarity Verification */}
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowSimilarityVerify(!showSimilarityVerify)}
-				>
-					<h3 className="devtools-tool-title">🔍 Verify via Similarity</h3>
-					<span className="devtools-section-toggle">
-						{showSimilarityVerify ? "▼" : "▶"}
-					</span>
-				</div>
-				{showSimilarityVerify && (
-					<div className="devtools-flex-column devtools-gap-12">
-						<p className="sourcify-similarity-hint">
-							This will attempt to find a similar verified contract and use it for verification.
-						</p>
-						
-						<div className="sourcify-grid-2col">
-							<div className="devtools-flex-column devtools-gap-4">
-								<label className="input-label">Chain ID</label>
-								<select
-									className="devtools-input"
-									value={simChainId}
-									onChange={(e) => setSimChainId(Number(e.target.value))}
-								>
-									{Object.entries(NETWORKS).map(([id, net]) => (
-										<option key={id} value={id}>
-											{net.name} ({id})
-										</option>
-									))}
-								</select>
-							</div>
-							<div className="devtools-flex-column devtools-gap-4">
-								<label className="input-label">Contract Address</label>
-								<input
-									type="text"
-									className="devtools-input mono"
-									placeholder="0x..."
-									value={simAddress}
-									onChange={(e) => setSimAddress(e.target.value)}
-								/>
-							</div>
-						</div>
-
-						<button
-							className="devtools-button"
-							onClick={verifySimilarity}
-							disabled={simVerifying}
-						>
-							{simVerifying ? "Verifying..." : "Verify via Similarity"}
-						</button>
-
-						{simError && <div className="devtools-error">{simError}</div>}
-						{simResult && renderResult(simResult)}
-					</div>
-				)}
-			</div>
-		</div>
-	);
-};
-
-export default ContractsSection;
diff --git a/src/components/devtools/DevelopmentSection.tsx b/src/components/devtools/DevelopmentSection.tsx
deleted file mode 100644
index d025f2a..0000000
--- a/src/components/devtools/DevelopmentSection.tsx
+++ /dev/null
@@ -1,440 +0,0 @@
-import React, { useState, useCallback, useContext } from "react";
-import { useNavigate } from "react-router-dom";
-import { AppContext } from "../../context/AppContext";
-import { useZipJsonReader } from "../../hooks/useZipJsonReader";
-
-const DevelopmentSection: React.FC = () => {
-
-  const [files, setFiles] = useState<File[]>([]);
-  const [isDragging, setIsDragging] = useState(false);
-  const { jsonFiles, setJsonFiles } = useContext(AppContext);
-  const { processZip, loading, error } = useZipJsonReader();
-  const navigate = useNavigate();
-
-  const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-  }, []);
-
-  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
-
-  const handleDrop = useCallback(
-    async (e: React.DragEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setIsDragging(false);
-
-      const droppedFiles = Array.from(e.dataTransfer.files);
-      setFiles((prevFiles) => [...prevFiles, ...droppedFiles]);
-
-      // Process zip files and merge JSON data
-      for (const file of droppedFiles) {
-        if (file.name.endsWith(".zip")) {
-          const jsonData = await processZip(file);
-          // Merge new JSON files with existing ones
-          setJsonFiles((prev: Record<string, any>) => ({
-            ...prev,
-            ...jsonData,
-          }));
-        }
-      }
-    },
-    [processZip, setJsonFiles],
-  );
-
-  const handleFileInput = useCallback(
-    async (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (e.target.files) {
-        const selectedFiles = Array.from(e.target.files);
-        setFiles((prevFiles) => [...prevFiles, ...selectedFiles]);
-
-        // Process zip files and merge JSON data
-        for (const file of selectedFiles) {
-          if (file.name.endsWith(".zip")) {
-            const jsonData = await processZip(file);
-            // Merge new JSON files with existing ones
-            setJsonFiles(jsonData);
-          }
-        }
-      }
-    },
-    [processZip, setJsonFiles],
-  );
-
-  const handleRemoveFile = useCallback((index: number) => {
-    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
-  }, []);
-
-  const handleClearAll = useCallback(() => {
-    setFiles([]);
-  }, []);
-
-  const handleClearArtifacts = useCallback(() => {
-    setJsonFiles({});
-  }, [setJsonFiles]);
-
-  const formatFileSize = (bytes: number): string => {
-    if (bytes === 0) return "0 Bytes";
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
-  };
-
-	return (
-		<div className="devtools-section">
-      <div
-        className="info-box"
-        style={{
-          background: "#ffffff",
-          borderRadius: "16px",
-          padding: "24px",
-          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.05)",
-          border: "1px solid rgba(16, 185, 129, 0.1)",
-          display: "block",
-        }}
-      >
-        <h3
-          style={{
-            fontSize: "1.1rem",
-            fontWeight: "700",
-            color: "#10b981",
-            marginBottom: "8px",
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            marginTop: 0,
-          }}
-        >
-          🚀 Hardhat Ignition
-        </h3>
-        <p
-          style={{
-            marginBottom: 20,
-            color: "#6b7280",
-            fontSize: "1rem",
-            marginTop: 0,
-          }}
-        >
-          Provide a .zip file with the project’s <b>contracts/</b> and{" "}
-          <b>ignition/</b> directories inside. This will be used as local
-          verification method
-        </p>
-
-        <div
-          onDragEnter={handleDragEnter}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-          style={{
-            border: isDragging
-              ? "2px dashed #10b981"
-              : "2px dashed rgba(16, 185, 129, 0.3)",
-            borderRadius: 12,
-            padding: 40,
-            textAlign: "center",
-            backgroundColor: isDragging
-              ? "rgba(16, 185, 129, 0.05)"
-              : "rgba(16, 185, 129, 0.02)",
-            transition: "all 0.3s ease",
-            cursor: "pointer",
-            marginBottom: 20,
-          }}
-        >
-          <div style={{ fontSize: 48, marginBottom: 12 }}>📁</div>
-          <h4
-            style={{
-              marginBottom: 8,
-              marginTop: 0,
-              fontSize: "0.95rem",
-              fontWeight: "600",
-              color: "#1f2937",
-            }}
-          >
-            {isDragging ? "Drop files here" : "Drag and drop ZIP files here"}
-          </h4>
-          <p
-            style={{
-              color: "#6b7280",
-              marginBottom: 16,
-              fontSize: "0.85rem",
-              margin: "0 0 16px 0",
-            }}
-          >
-            or
-          </p>
-          <label
-            htmlFor="file-input"
-            style={{
-              display: "inline-block",
-              padding: "10px 20px",
-              background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
-              color: "white",
-              borderRadius: 8,
-              cursor: "pointer",
-              fontSize: "0.85rem",
-              fontWeight: "600",
-              border: "none",
-            }}
-          >
-            Browse Files
-          </label>
-          <input
-            id="file-input"
-            type="file"
-            multiple
-            onChange={handleFileInput}
-            style={{ display: "none" }}
-          />
-        </div>
-
-        {files.length > 0 && (
-          <div>
-            <div className="flex-between mb-medium">
-              <h4
-                style={{
-                  margin: 0,
-                  fontSize: "0.95rem",
-                  fontWeight: "600",
-                  color: "#1f2937",
-                }}
-              >
-                Uploaded Files ({files.length})
-              </h4>
-              <button
-                onClick={handleClearAll}
-                style={{
-                  padding: "6px 12px",
-                  background: "#ef4444",
-                  color: "white",
-                  border: "none",
-                  borderRadius: 8,
-                  cursor: "pointer",
-                  fontSize: "0.8rem",
-                  fontWeight: "600",
-                }}
-              >
-                Clear All
-              </button>
-            </div>
-
-            <div className="flex-column" style={{ gap: 12 }}>
-              {files.map((file, index) => (
-                <div
-                  key={`${file.name}-${index}`}
-                  style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    padding: 12,
-                    backgroundColor: "rgba(16, 185, 129, 0.02)",
-                    border: "1px solid rgba(16, 185, 129, 0.15)",
-                    borderRadius: 8,
-                    boxShadow: "0 1px 3px rgba(0,0,0,0.03)",
-                  }}
-                >
-                  <div style={{ flex: 1 }}>
-                    <div
-                      style={{
-                        fontWeight: 600,
-                        marginBottom: 4,
-                        wordBreak: "break-all",
-                        fontSize: "0.85rem",
-                        color: "#1f2937",
-                      }}
-                    >
-                      {file.name}
-                    </div>
-                    <div
-                      style={{
-                        fontSize: "0.75rem",
-                        color: "#6b7280",
-                        display: "flex",
-                        gap: 16,
-                      }}
-                    >
-                      <span>Size: {formatFileSize(file.size)}</span>
-                      <span>Type: {file.type || "Unknown"}</span>
-                    </div>
-                  </div>
-                  <button
-                    onClick={() => handleRemoveFile(index)}
-                    style={{
-                      padding: "6px 12px",
-                      background: "#ef4444",
-                      color: "white",
-                      border: "none",
-                      borderRadius: 6,
-                      cursor: "pointer",
-                      fontSize: "0.75rem",
-                      marginLeft: 16,
-                      fontWeight: "600",
-                    }}
-                  >
-                    Remove
-                  </button>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {files.length === 0 &&
-          !loading &&
-          Object.keys(jsonFiles).length === 0 && (
-            <div
-              style={{
-                textAlign: "center",
-                padding: 32,
-                color: "#6b7280",
-                backgroundColor: "rgba(16, 185, 129, 0.02)",
-                borderRadius: 8,
-                fontSize: "0.85rem",
-              }}
-            >
-              No files uploaded yet. Drag and drop or browse to add files.
-            </div>
-          )}
-
-        {loading && (
-          <div
-            style={{
-              textAlign: "center",
-              padding: 32,
-              color: "#10b981",
-              backgroundColor: "rgba(16, 185, 129, 0.05)",
-              borderRadius: 8,
-              marginTop: 20,
-              border: "1px solid rgba(16, 185, 129, 0.2)",
-            }}
-          >
-            <div style={{ fontSize: 32, marginBottom: 12 }}>⏳</div>
-            <div style={{ fontSize: "0.9rem", fontWeight: "600" }}>
-              Processing ZIP file...
-            </div>
-          </div>
-        )}
-
-        {error && (
-          <div
-            style={{
-              textAlign: "center",
-              padding: 20,
-              color: "#dc2626",
-              backgroundColor: "rgba(239, 68, 68, 0.05)",
-              borderRadius: 8,
-              marginTop: 20,
-              border: "1px solid rgba(239, 68, 68, 0.2)",
-            }}
-          >
-            <div style={{ fontSize: 24, marginBottom: 8 }}>⚠️</div>
-            <div style={{ fontWeight: 600, fontSize: "0.9rem" }}>{error}</div>
-          </div>
-        )}
-
-        {Object.keys(jsonFiles).length > 0 && (
-          <div className="mt-large">
-            <div className="flex-between mb-medium">
-              <h4
-                style={{
-                  margin: 0,
-                  fontSize: "0.95rem",
-                  fontWeight: "600",
-                  color: "#1f2937",
-                }}
-              >
-                Extracted JSON Files ({Object.keys(jsonFiles).length})
-              </h4>
-              <button
-                onClick={handleClearArtifacts}
-                style={{
-                  padding: "6px 12px",
-                  background: "#ef4444",
-                  color: "white",
-                  border: "none",
-                  borderRadius: 8,
-                  cursor: "pointer",
-                  fontSize: "0.8rem",
-                  fontWeight: "600",
-                }}
-              >
-                Clear Artifacts
-              </button>
-            </div>
-            <div className="flex-column" style={{ gap: 10 }}>
-              {Object.entries(jsonFiles).map(([path, data]) => (
-                <div
-                  key={path}
-                  style={{
-                    padding: 12,
-                    backgroundColor: "rgba(16, 185, 129, 0.02)",
-                    border: "1px solid rgba(16, 185, 129, 0.15)",
-                    borderRadius: 8,
-                    boxShadow: "0 1px 3px rgba(0,0,0,0.03)",
-                  }}
-                >
-                  <div
-                    onClick={() => navigate(`/31337/address/${path}`)}
-                    style={{
-                      fontWeight: 600,
-                      marginBottom: 8,
-                      color: "#10b981",
-                      wordBreak: "break-all",
-                      fontSize: "0.85rem",
-                      cursor: "pointer",
-                      textDecoration: "underline",
-                    }}
-                  >
-                    {path}
-                  </div>
-                  <details>
-                    <summary
-                      style={{
-                        cursor: "pointer",
-                        padding: "4px 0",
-                        color: "#6b7280",
-                        fontSize: "0.8rem",
-                        fontWeight: "600",
-                      }}
-                    >
-                      View JSON content
-                    </summary>
-                    <pre
-                      style={{
-                        backgroundColor: "rgba(16, 185, 129, 0.04)",
-                        padding: 12,
-                        borderRadius: 8,
-                        overflow: "auto",
-                        maxHeight: 400,
-                        fontSize: "0.75rem",
-                        marginTop: 8,
-                        border: "1px solid rgba(16, 185, 129, 0.1)",
-                        color: "#1f2937",
-                        fontFamily: "monospace",
-                        lineHeight: "1.5",
-                      }}
-                    >
-                      {JSON.stringify(data, null, 2)}
-                    </pre>
-                  </details>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-		</div>
-	);
-};
-
-export default DevelopmentSection;
diff --git a/src/components/devtools/SignaturesSection.tsx b/src/components/devtools/SignaturesSection.tsx
deleted file mode 100644
index 06e1a34..0000000
--- a/src/components/devtools/SignaturesSection.tsx
+++ /dev/null
@@ -1,478 +0,0 @@
-import React, { useState } from "react";
-import {
-	hashMessage,
-	TypedDataEncoder,
-	recoverAddress,
-	Signature,
-	getBytes,
-	AbiCoder,
-} from "ethers";
-
-const SignaturesSection: React.FC = () => {
-	const [showSignatureInspector, setShowSignatureInspector] = useState(false);
-	const [showEIP712Tool, setShowEIP712Tool] = useState(false);
-	
-	// Signature Inspector state
-	const [sigMessage, setSigMessage] = useState("");
-	const [sigSignature, setSigSignature] = useState("");
-	const [sigExpectedAddress] = useState("");
-	const [sigResults, setSigResults] = useState<{
-		format?: string;
-		messageFormat?: string;
-		messageHash?: string;
-		recoveredAddress?: string;
-		r?: string;
-		s?: string;
-		v?: number;
-		isCompact?: boolean;
-		yParity?: number;
-		addressMatch?: boolean;
-		error?: string;
-	} | null>(null);
-	
-	// EIP-712 Tool state
-	const [eip712Mode, setEip712Mode] = useState<"encode" | "decode">("encode");
-	const [eip712Input, setEip712Input] = useState(JSON.stringify({
-		domain: {
-			name: "MyApp",
-			version: "1",
-			chainId: 1,
-			verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC"
-		},
-		types: {
-			Person: [
-				{ name: "name", type: "string" },
-				{ name: "wallet", type: "address" }
-			]
-		},
-		message: {
-			name: "Alice",
-			wallet: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
-		}
-	}, null, 2));
-	const [eip712DecodeTypes, setEip712DecodeTypes] = useState(JSON.stringify({
-		Person: [
-			{ name: "name", type: "string" },
-			{ name: "wallet", type: "address" }
-		]
-	}, null, 2));
-	const [eip712DecodeData, setEip712DecodeData] = useState("");
-	const [eip712Results, setEip712Results] = useState<{
-		domainSeparator?: string;
-		structHash?: string;
-		messageHash?: string;
-		encodedData?: string;
-		decodedMessage?: string;
-		error?: string;
-	} | null>(null);
-
-	const verifySignature = () => {
-		try {
-			if (!sigSignature) {
-				setSigResults({ error: "Please provide a signature" });
-				return;
-			}
-
-			const sig = sigSignature.trim();
-			
-			// Parse the signature
-			let signature: Signature;
-			let format: string;
-			let isCompact = false;
-			let yParity: number | undefined;
-
-			// Detect signature format by length
-			const sigBytes = getBytes(sig);
-			
-			if (sigBytes.length === 64) {
-				// EIP-2098 compact signature (r || yParityAndS)
-				format = "EIP-2098 Compact (64 bytes)";
-				isCompact = true;
-				signature = Signature.from(sig);
-				yParity = signature.yParity;
-			} else if (sigBytes.length === 65) {
-				// Standard signature (r || s || v)
-				format = "Standard (65 bytes)";
-				signature = Signature.from(sig);
-			} else {
-				setSigResults({ error: `Invalid signature length: ${sigBytes.length} bytes (expected 64 or 65)` });
-				return;
-			}
-
-			const r = signature.r;
-			const s = signature.s;
-			const v = signature.v;
-
-			// Determine message hash based on input format
-			let messageHash: string = "";
-			let detectedMessageFormat: string;
-			
-			if (sigMessage.startsWith("0x") && sigMessage.length === 66) {
-				// Already a hash
-				messageHash = sigMessage;
-				detectedMessageFormat = "Pre-hashed (32 bytes)";
-			} else if (sigMessage.trim().startsWith("{")) {
-				// Try to parse as JSON for EIP-712
-				try {
-					const parsed = JSON.parse(sigMessage);
-					if (parsed.domain && parsed.types && parsed.message) {
-						// EIP-712 typed data
-						messageHash = TypedDataEncoder.hash(parsed.domain, parsed.types, parsed.message);
-						detectedMessageFormat = "EIP-712 Typed Data";
-					} else {
-						// Not valid EIP-712, treat as string
-						messageHash = hashMessage(sigMessage);
-						detectedMessageFormat = "EIP-191 Personal Sign";
-					}
-				} catch {
-					// Invalid JSON, treat as string
-					messageHash = hashMessage(sigMessage);
-					detectedMessageFormat = "EIP-191 Personal Sign";
-				}
-			} else {
-				// EIP-191 personal sign (most common)
-				messageHash = hashMessage(sigMessage);
-				detectedMessageFormat = "EIP-191 Personal Sign";
-			}
-
-			// Recover the address
-			const recoveredAddress = recoverAddress(messageHash, signature);
-
-			// Check if it matches expected address
-			let addressMatch: boolean | undefined;
-			if (sigExpectedAddress) {
-				addressMatch = recoveredAddress.toLowerCase() === sigExpectedAddress.toLowerCase();
-			}
-
-			setSigResults({
-				format,
-				messageFormat: detectedMessageFormat!,
-				messageHash,
-				recoveredAddress,
-				r,
-				s,
-				v,
-				isCompact,
-				yParity,
-				addressMatch,
-			});
-		} catch (err: any) {
-			setSigResults({ error: err.message || "Failed to verify signature" });
-		}
-	};
-
-	const encodeEIP712 = () => {
-		try {
-			const parsed = JSON.parse(eip712Input);
-			const { domain, types, message } = parsed;
-
-			if (!domain || !types || !message) {
-				setEip712Results({ error: "JSON must contain domain, types, and message fields" });
-				return;
-			}
-
-			// Get the primary type (first key in types that isn't EIP712Domain)
-			const primaryType = Object.keys(types).find(t => t !== "EIP712Domain");
-			if (!primaryType) {
-				setEip712Results({ error: "No primary type found in types" });
-				return;
-			}
-
-			// Calculate domain separator
-			const domainSeparator = TypedDataEncoder.hashDomain(domain);
-
-			// Calculate struct hash of the message
-			const structHash = TypedDataEncoder.from(types).hash(message);
-
-			// Calculate the final message hash (what gets signed)
-			const messageHash = TypedDataEncoder.hash(domain, types, message);
-
-			// Get the encoded data
-			const encodedData = TypedDataEncoder.from(types).encodeData(primaryType, message);
-
-			setEip712Results({
-				domainSeparator,
-				structHash,
-				messageHash,
-				encodedData,
-			});
-		} catch (err: any) {
-			setEip712Results({ error: err.message || "Failed to encode EIP-712 data" });
-		}
-	};
-
-	const decodeEIP712 = () => {
-		try {
-			const types = JSON.parse(eip712DecodeTypes);
-			const data = eip712DecodeData.trim();
-
-			if (!data.startsWith("0x")) {
-				setEip712Results({ error: "Encoded data must be a hex string starting with 0x" });
-				return;
-			}
-
-			// Get the primary type
-			const primaryType = Object.keys(types).find(t => t !== "EIP712Domain");
-			if (!primaryType) {
-				setEip712Results({ error: "No primary type found in types" });
-				return;
-			}
-
-			// Build ABI types array from the EIP-712 types
-			const typeFields = types[primaryType];
-			const abiTypes: string[] = ["bytes32"]; // First 32 bytes is the type hash
-			for (const field of typeFields) {
-				// Map EIP-712 types to ABI types
-				let abiType = field.type;
-				if (abiType === "string" || abiType === "bytes") {
-					abiType = "bytes32"; // Strings and bytes are hashed
-				} else if (types[abiType]) {
-					abiType = "bytes32"; // Nested structs are hashed
-				}
-				abiTypes.push(abiType);
-			}
-
-			// Decode the data
-			const abiCoder = AbiCoder.defaultAbiCoder();
-			const decoded = abiCoder.decode(abiTypes, data);
-
-			// Build the decoded message object
-			const decodedMessage: Record<string, any> = {};
-			decodedMessage["_typeHash"] = decoded[0]; // First value is the type hash
-			
-			for (let i = 0; i < typeFields.length; i++) {
-				const field = typeFields[i];
-				let value = decoded[i + 1];
-				
-				// Convert BigInt to string for display
-				if (typeof value === "bigint") {
-					value = value.toString();
-				}
-				
-				// Note if value is a hash (for string/bytes/struct types)
-				if (field.type === "string" || field.type === "bytes" || types[field.type]) {
-					decodedMessage[field.name] = `${value} (hashed ${field.type})`;
-				} else {
-					decodedMessage[field.name] = value;
-				}
-			}
-
-			setEip712Results({
-				decodedMessage: JSON.stringify(decodedMessage, null, 2),
-			});
-		} catch (err: any) {
-			setEip712Results({ error: err.message || "Failed to decode EIP-712 data" });
-		}
-	};
-
-	return (
-		<div className="devtools-section">
-			{/* Signature Inspector */}
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowSignatureInspector(!showSignatureInspector)}
-				>
-					<h3 className="devtools-tool-title">🔍 Signature Inspector</h3>
-					<span className="devtools-section-toggle">
-						{showSignatureInspector ? "▼" : "▶"}
-					</span>
-				</div>
-				{showSignatureInspector && (
-					<div className="devtools-flex-column devtools-gap-12">
-						<div className="devtools-flex-column devtools-gap-4">
-							<label className="input-label">Message (string, hex hash, or EIP-712 JSON)</label>
-							<textarea
-								placeholder='Hello World, 0x1234...abcd, or {"domain":...}'
-								value={sigMessage}
-								onChange={(e) => setSigMessage(e.target.value)}
-								className="devtools-input sig-message-textarea"
-							/>
-						</div>
-						<div className="devtools-flex-column devtools-gap-4">
-							<label className="input-label">Signature (65 or 64 bytes hex)</label>
-							<input
-								type="text"
-								placeholder="0x..."
-								value={sigSignature}
-								onChange={(e) => setSigSignature(e.target.value)}
-								className="devtools-input"
-							/>
-						</div>
-						<button 
-							onClick={verifySignature}
-							className="devtools-button"
-						>
-							Verify Signature
-						</button>
-
-						{sigResults && (
-							<div className="devtools-results">
-								{sigResults.error ? (
-									<div className="devtools-error">{sigResults.error}</div>
-								) : (
-									<div className="signature-results">
-										<div className="sig-result-row">
-											<span className="sig-result-label">Signature Format:</span>
-											<span className="sig-result-value">{sigResults.format}</span>
-										</div>
-										<div className="sig-result-row">
-											<span className="sig-result-label">Message Format:</span>
-											<span className="sig-result-value">{sigResults.messageFormat}</span>
-										</div>
-										<div className="sig-result-row">
-											<span className="sig-result-label">Message Hash:</span>
-											<span className="sig-result-value mono">{sigResults.messageHash}</span>
-										</div>
-										<div className="sig-result-row">
-											<span className="sig-result-label">Recovered Address:</span>
-											<span className="sig-result-value mono">{sigResults.recoveredAddress}</span>
-										</div>
-										<div className="sig-components">
-											<div className="sig-component-title">Signature Components</div>
-											<div className="sig-result-row">
-												<span className="sig-result-label">r:</span>
-												<span className="sig-result-value mono">{sigResults.r}</span>
-											</div>
-											<div className="sig-result-row">
-												<span className="sig-result-label">s:</span>
-												<span className="sig-result-value mono">{sigResults.s}</span>
-											</div>
-											<div className="sig-result-row">
-												<span className="sig-result-label">v:</span>
-												<span className="sig-result-value">{sigResults.v}</span>
-											</div>
-											{sigResults.isCompact && sigResults.yParity !== undefined && (
-												<div className="sig-result-row">
-													<span className="sig-result-label">yParity:</span>
-													<span className="sig-result-value">{sigResults.yParity}</span>
-												</div>
-											)}
-										</div>
-									</div>
-								)}
-							</div>
-						)}
-					</div>
-				)}
-			</div>
-
-			{/* EIP-712 Encoder/Decoder */}
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowEIP712Tool(!showEIP712Tool)}
-				>
-					<h3 className="devtools-tool-title">📋 EIP-712 Encoder/Decoder</h3>
-					<span className="devtools-section-toggle">
-						{showEIP712Tool ? "▼" : "▶"}
-					</span>
-				</div>
-				{showEIP712Tool && (
-					<div className="devtools-flex-column devtools-gap-12">
-						{/* Mode Toggle */}
-						<div className="keccak-mode-toggle">
-							<button
-								className={`keccak-mode-btn ${eip712Mode === "encode" ? "active" : ""}`}
-								onClick={() => { setEip712Mode("encode"); setEip712Results(null); }}
-							>
-								Encode
-							</button>
-							<button
-								className={`keccak-mode-btn ${eip712Mode === "decode" ? "active" : ""}`}
-								onClick={() => { setEip712Mode("decode"); setEip712Results(null); }}
-							>
-								Decode
-							</button>
-						</div>
-
-						{eip712Mode === "encode" ? (
-							<>
-								<div className="devtools-flex-column devtools-gap-4">
-									<label className="input-label">EIP-712 JSON (domain, types, message)</label>
-									<textarea
-										placeholder='{"domain": {...}, "types": {...}, "message": {...}}'
-										value={eip712Input}
-										onChange={(e) => setEip712Input(e.target.value)}
-										className="devtools-input mono eip712-input-textarea"
-									/>
-								</div>
-								<button 
-									onClick={encodeEIP712}
-									className="devtools-button"
-								>
-									Encode EIP-712
-								</button>
-							</>
-						) : (
-							<>
-								<div className="devtools-flex-column devtools-gap-4">
-									<label className="input-label">Types Definition</label>
-									<textarea
-										placeholder='{"Person": [{"name": "name", "type": "string"}]}'
-										value={eip712DecodeTypes}
-										onChange={(e) => setEip712DecodeTypes(e.target.value)}
-										className="devtools-input mono eip712-types-textarea"
-									/>
-								</div>
-								<div className="devtools-flex-column devtools-gap-4">
-									<label className="input-label">Encoded Data (hex)</label>
-									<textarea
-										placeholder="0x..."
-										value={eip712DecodeData}
-										onChange={(e) => setEip712DecodeData(e.target.value)}
-										className="devtools-input mono eip712-data-textarea"
-									/>
-								</div>
-								<button 
-									onClick={decodeEIP712}
-									className="devtools-button"
-								>
-									Decode EIP-712
-								</button>
-							</>
-						)}
-
-						{eip712Results && (
-							<div className="devtools-results">
-								{eip712Results.error ? (
-									<div className="devtools-error">{eip712Results.error}</div>
-								) : eip712Mode === "encode" ? (
-									<div className="eip712-results">
-										<div className="sig-result-row">
-											<span className="sig-result-label">Domain Separator:</span>
-											<span className="sig-result-value mono">{eip712Results.domainSeparator}</span>
-										</div>
-										<div className="sig-result-row">
-											<span className="sig-result-label">Struct Hash:</span>
-											<span className="sig-result-value mono">{eip712Results.structHash}</span>
-										</div>
-										<div className="sig-result-row">
-											<span className="sig-result-label">Message Hash (signable):</span>
-											<span className="sig-result-value mono">{eip712Results.messageHash}</span>
-										</div>
-										<div className="sig-result-row">
-											<span className="sig-result-label">Encoded Data:</span>
-											<span className="sig-result-value mono eip712-encoded-data">{eip712Results.encodedData}</span>
-										</div>
-									</div>
-								) : (
-									<div className="eip712-results">
-										<div className="eip712-decoded-row">
-											<span className="sig-result-label">Decoded Message:</span>
-											<pre className="eip712-decoded-pre">
-												{eip712Results.decodedMessage}
-											</pre>
-										</div>
-									</div>
-								)}
-							</div>
-						)}
-					</div>
-				)}
-			</div>
-		</div>
-	);
-};
-
-export default SignaturesSection;
diff --git a/src/components/devtools/TransactionsSection.tsx b/src/components/devtools/TransactionsSection.tsx
deleted file mode 100644
index 4cc7db0..0000000
--- a/src/components/devtools/TransactionsSection.tsx
+++ /dev/null
@@ -1,437 +0,0 @@
-import React, { useState, useEffect } from "react";
-import {
-	JsonRpcProvider,
-	BrowserProvider,
-	Wallet,
-	parseEther,
-	formatEther,
-	parseUnits,
-	formatUnits,
-	TransactionResponse,
-	TransactionRequest,
-} from "ethers";
-
-const NETWORKS: Record<number, { name: string; rpc: string }> = {
-	1: { name: "Ethereum Mainnet", rpc: "https://eth.llamarpc.com" },
-	10: { name: "Optimism", rpc: "https://mainnet.optimism.io" },
-	42161: { name: "Arbitrum One", rpc: "https://arb1.arbitrum.io/rpc" },
-	8453: { name: "Base", rpc: "https://mainnet.base.org" },
-	137: { name: "Polygon", rpc: "https://polygon-rpc.com" },
-};
-
-const TransactionsSection: React.FC = () => {
-	const [showTransactionBuilder, setShowTransactionBuilder] = useState(true);
-	const [txFrom, setTxFrom] = useState("");
-	const [txTo, setTxTo] = useState("");
-	const [txValue, setTxValue] = useState("");
-	const [txData, setTxData] = useState("");
-	const [txGasLimit, setTxGasLimit] = useState<string | undefined>(undefined);
-	const [txGasPrice, setTxGasPrice] = useState<string | undefined>(undefined);
-	const [txMaxFeePerGas, setTxMaxFeePerGas] = useState<string | undefined>(undefined);
-	const [txMaxPriorityFeePerGas, setTxMaxPriorityFeePerGas] = useState<string | undefined>(undefined);
-	const [txNonce, setTxNonce] = useState<number | undefined>(undefined);
-	const [txChainId, setTxChainId] = useState<number | undefined>(undefined);
-	const [txType, setTxType] = useState<0 | 2>(2);
-	const [useMetaMask, setUseMetaMask] = useState(true);
-	const [localPrivateKey, setLocalPrivateKey] = useState("");
-	const [estimatedGas, setEstimatedGas] = useState<string | null>(null);
-	const [suggestedFees, setSuggestedFees] = useState<any>(null);
-	const [ethUsdPrice, setEthUsdPrice] = useState<number | null>(null);
-	const [estimatedCostEth, setEstimatedCostEth] = useState<string | null>(null);
-	const [estimatedCostUsd, setEstimatedCostUsd] = useState<string | null>(null);
-	const [txSending, setTxSending] = useState(false);
-	const [txHashResult, setTxHashResult] = useState<string | null>(null);
-	const [txError, setTxError] = useState<string | null>(null);
-	const [txWillRevert, setTxWillRevert] = useState<boolean>(false);
-	const [revertReason, setRevertReason] = useState<string | null>(null);
-	const [builtTx, setBuiltTx] = useState<string | null>(null);
-	const [showAdvancedRaw, setShowAdvancedRaw] = useState(false);
-	const [rawRlp, setRawRlp] = useState("");
-
-	useEffect(() => {
-		const fetchEthPrice = async () => {
-			try {
-				const res = await fetch("https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd");
-				const json = await res.json();
-				const price = json?.ethereum?.usd;
-				if (price) setEthUsdPrice(price);
-			} catch (err) {
-				// ignore
-			}
-		};
-		fetchEthPrice();
-	}, []);
-
-	const parseEtherSafe = (v?: string): bigint => {
-		if (!v) return BigInt(0);
-		try {
-			return parseEther(v);
-		} catch {
-			return BigInt(0);
-		}
-	};
-
-	const formatEthValue = (bn: bigint) => formatEther(bn);
-
-	const estimateGasAndFees = async () => {
-		setTxError(null);
-		setTxWillRevert(false);
-		setRevertReason(null);
-		try {
-			const chainId = txChainId || 1;
-			const net = NETWORKS[chainId];
-			if (!net) throw new Error("Unknown network - select a supported chainId");
-			const provider = new JsonRpcProvider(net.rpc);
-
-			const to = txTo || undefined;
-			const value = parseEtherSafe(txValue);
-			const txReq: any = { to, value, data: txData || undefined };
-
-			let gas: bigint;
-			let willRevert = false;
-			let revertMsg: string | null = null;
-
-			try {
-				await provider.call(txReq);
-			} catch (callErr: any) {
-				willRevert = true;
-				const errMsg = callErr.message || String(callErr);
-				if (callErr.data) {
-					revertMsg = `Revert data: ${callErr.data}`;
-				} else if (errMsg.includes("revert")) {
-					revertMsg = errMsg;
-				} else if (errMsg.includes("execution reverted")) {
-					revertMsg = errMsg;
-				} else {
-					revertMsg = `Transaction will fail: ${errMsg}`;
-				}
-			}
-
-			try {
-				gas = await provider.estimateGas(txReq);
-			} catch (estErr: any) {
-				gas = BigInt(500000);
-				if (!willRevert) {
-					willRevert = true;
-					revertMsg = estErr.message || "Gas estimation failed - transaction may revert";
-				}
-			}
-
-			setEstimatedGas(gas.toString());
-			setTxWillRevert(willRevert);
-			setRevertReason(revertMsg);
-
-			const feeData = await provider.getFeeData();
-			setSuggestedFees(feeData);
-
-			const gasPriceBN = txType === 0 ? (feeData.gasPrice ?? BigInt(0)) : (feeData.maxFeePerGas ?? BigInt(0));
-			const cost = gas * gasPriceBN;
-			setEstimatedCostEth(formatEthValue(cost));
-			if (ethUsdPrice) setEstimatedCostUsd((parseFloat(formatEthValue(cost)) * ethUsdPrice).toFixed(6));
-		} catch (err: any) {
-			setTxError(err.message || String(err));
-		}
-	};
-
-	const fetchNonceForAddress = async (address: string, chainId?: number) => {
-		try {
-			const cid = chainId || txChainId || 1;
-			const net = NETWORKS[cid];
-			if (!net) throw new Error("Unknown network");
-			const provider = new JsonRpcProvider(net.rpc);
-			const n = await provider.getTransactionCount(address);
-			setTxNonce(n);
-			return n;
-		} catch (err) {
-			return undefined;
-		}
-	};
-
-	const sendTransaction = async () => {
-		setTxError(null);
-		setTxHashResult(null);
-		setTxSending(true);
-		try {
-			const chainId = txChainId || 1;
-			const net = NETWORKS[chainId];
-			if (!net) throw new Error("Unknown network");
-			const provider = new JsonRpcProvider(net.rpc);
-
-			// Validate gasLimit is a valid number
-			let gasLimit: bigint | undefined;
-			if (txGasLimit) {
-				if (!/^\d+$/.test(txGasLimit.trim())) {
-					throw new Error("Gas limit must be a valid number");
-				}
-				gasLimit = BigInt(txGasLimit.trim());
-			} else if (estimatedGas) {
-				gasLimit = BigInt(estimatedGas);
-			}
-
-			const txRequest: TransactionRequest = {
-				to: txTo || undefined,
-				value: parseEtherSafe(txValue),
-				data: txData || undefined,
-				gasLimit,
-			};
-
-			if (txType === 2) {
-				if (txMaxFeePerGas) txRequest.maxFeePerGas = parseUnits(txMaxFeePerGas, "gwei");
-				if (txMaxPriorityFeePerGas) txRequest.maxPriorityFeePerGas = parseUnits(txMaxPriorityFeePerGas, "gwei");
-			} else {
-				if (txGasPrice) txRequest.gasPrice = parseUnits(txGasPrice, "gwei");
-			}
-
-			if (typeof txNonce === "number") txRequest.nonce = txNonce;
-			txRequest.chainId = BigInt(chainId);
-
-			let sentTx: TransactionResponse;
-
-			if (!useMetaMask && localPrivateKey) {
-				const wallet = new Wallet(localPrivateKey, provider);
-				sentTx = await wallet.sendTransaction(txRequest);
-			} else {
-				if (!(window as any).ethereum) throw new Error("No injected wallet (window.ethereum) found");
-				const web3Provider = new BrowserProvider((window as any).ethereum as any);
-				const signer = await web3Provider.getSigner();
-				sentTx = await signer.sendTransaction(txRequest);
-			}
-
-			setTxHashResult(sentTx.hash);
-			setTxSending(false);
-		} catch (err: any) {
-			setTxError(err.message || String(err));
-			setTxSending(false);
-		}
-	};
-
-	const buildTransaction = () => {
-		setTxError(null);
-		setBuiltTx(null);
-		try {
-			const chainId = txChainId || 1;
-			const txObj: Record<string, any> = {
-				type: txType,
-				chainId: chainId,
-				to: txTo || null,
-				value: txValue ? parseEtherSafe(txValue).toString() : "0",
-				data: txData || "0x",
-				gasLimit: txGasLimit || estimatedGas || null,
-			};
-
-			if (txFrom) txObj.from = txFrom;
-			if (typeof txNonce === "number") txObj.nonce = txNonce;
-
-			if (txType === 2) {
-				txObj.maxFeePerGas = txMaxFeePerGas ? parseUnits(txMaxFeePerGas, "gwei").toString() : null;
-				txObj.maxPriorityFeePerGas = txMaxPriorityFeePerGas ? parseUnits(txMaxPriorityFeePerGas, "gwei").toString() : null;
-			} else {
-				txObj.gasPrice = txGasPrice ? parseUnits(txGasPrice, "gwei").toString() : null;
-			}
-
-			setBuiltTx(JSON.stringify(txObj, null, 2));
-		} catch (err: any) {
-			setTxError(err.message || String(err));
-		}
-	};
-
-	const sendRawRlpTx = async () => {
-		setTxSending(true);
-		setTxError(null);
-		try {
-			const chainId = txChainId || 1;
-			const net = NETWORKS[chainId];
-			if (!net) throw new Error("Unknown network");
-			const provider = new JsonRpcProvider(net.rpc);
-			const res = await provider.broadcastTransaction(rawRlp);
-			setTxHashResult(res.hash);
-		} catch (err: any) {
-			setTxError(err.message || String(err));
-		} finally {
-			setTxSending(false);
-		}
-	};
-
-	return (
-		<div className="devtools-section">
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowTransactionBuilder(!showTransactionBuilder)}
-				>
-					<h3 className="devtools-tool-title">🧾 Transaction Builder</h3>
-					<span className="devtools-section-toggle">
-						{showTransactionBuilder ? "▼" : "▶"}
-					</span>
-				</div>
-				{showTransactionBuilder && (
-				<div className="devtools-flex-column devtools-gap-10">
-					<div className="tx-builder-network-row">
-						<label className="input-label">Network</label>
-						<select
-							value={txChainId ?? 1}
-							onChange={(e) => setTxChainId(parseInt(e.target.value, 10))}
-							className="devtools-input"
-						>
-							<option value={1}>Ethereum Mainnet (1)</option>
-							<option value={10}>Optimism (10)</option>
-							<option value={42161}>Arbitrum One (42161)</option>
-							<option value={8453}>Base (8453)</option>
-							<option value={137}>Polygon (137)</option>
-						</select>
-					</div>
-
-					<div className="tx-builder-address-row">
-						<div className="devtools-flex-1">
-							<label className="input-label">From (address, optional)</label>
-							<input type="text" className="devtools-input" value={txFrom} onChange={(e) => setTxFrom(e.target.value)} placeholder="0x... (for building unsigned tx)" />
-						</div>
-						<div className="devtools-flex-1">
-							<label className="input-label">To (address)</label>
-							<input type="text" className="devtools-input" value={txTo} onChange={(e) => setTxTo(e.target.value)} placeholder="0x..." />
-						</div>
-					</div>
-
-					<div className="tx-builder-value-row">
-						<div className="devtools-flex-1">
-							<label className="input-label">Value (ETH)</label>
-							<input type="text" className="devtools-input" value={txValue} onChange={(e) => setTxValue(e.target.value)} placeholder="0.01" />
-						</div>
-						<div className="devtools-width-220">
-							<label className="input-label">Nonce (optional)</label>
-							<input type="number" className="devtools-input" value={txNonce ?? ""} onChange={(e) => setTxNonce(e.target.value === "" ? undefined : parseInt(e.target.value, 10))} placeholder="auto" />
-						</div>
-					</div>
-
-					<div className="devtools-flex-column">
-						<label className="input-label">Data (hex, optional)</label>
-						<textarea className="devtools-input mono tx-builder-data-textarea" value={txData} onChange={(e) => setTxData(e.target.value)} placeholder="0x..." />
-					</div>
-
-					<div className="tx-builder-gas-row">
-						<div>
-							<label className="input-label">Tx Type</label>
-							<select className="devtools-input" value={txType} onChange={(e) => setTxType(Number(e.target.value) as 0 | 2)}>
-								<option value={2}>EIP-1559 (type 2)</option>
-								<option value={0}>Legacy (type 0)</option>
-							</select>
-						</div>
-						<div className="devtools-flex-1">
-							<label className="input-label">Gas Limit (optional)</label>
-							<input className="devtools-input" value={txGasLimit ?? ""} onChange={(e) => setTxGasLimit(e.target.value === "" ? undefined : e.target.value)} placeholder="auto-estimate" />
-						</div>
-					</div>
-
-					{txType === 0 ? (
-						<div className="tx-builder-fee-row">
-							<div className="devtools-flex-1">
-								<label className="input-label">Gas Price (gwei)</label>
-								<input className="devtools-input" value={txGasPrice ?? ""} onChange={(e) => setTxGasPrice(e.target.value === "" ? undefined : e.target.value)} placeholder="suggested" />
-							</div>
-						</div>
-					) : (
-						<div className="tx-builder-fee-row">
-							<div className="devtools-flex-1">
-								<label className="input-label">Max Fee Per Gas (gwei)</label>
-								<input className="devtools-input" value={txMaxFeePerGas ?? ""} onChange={(e) => setTxMaxFeePerGas(e.target.value === "" ? undefined : e.target.value)} placeholder="suggested" />
-							</div>
-							<div className="devtools-width-220">
-								<label className="input-label">Max Priority Fee (gwei)</label>
-								<input className="devtools-input" value={txMaxPriorityFeePerGas ?? ""} onChange={(e) => setTxMaxPriorityFeePerGas(e.target.value === "" ? undefined : e.target.value)} placeholder="suggested" />
-							</div>
-						</div>
-					)}
-
-					<div className="tx-builder-signing-row">
-						<label className="input-label devtools-margin-right-8">Signing</label>
-						<select className="devtools-input devtools-width-220" value={useMetaMask ? "metamask" : "local"} onChange={(e) => setUseMetaMask(e.target.value === "metamask")}>
-							<option value="metamask">MetaMask / Injected</option>
-							<option value="local">Local Private Key</option>
-						</select>
-						{!useMetaMask && (
-							<input className="devtools-input mono tx-builder-pk-input" placeholder="0xYOURPRIVATEKEY" value={localPrivateKey} onChange={(e) => setLocalPrivateKey(e.target.value)} />
-						)}
-					</div>
-
-					<div className="tx-builder-buttons">
-						<button className="devtools-button" onClick={estimateGasAndFees}>Estimate Gas & Fees</button>
-						<button className="devtools-button" onClick={() => { if ((window as any).ethereum) fetchNonceForAddress((window as any).ethereum.selectedAddress || (window as any).ethereum?.accounts?.[0]); }}>Fetch Nonce</button>
-						<button className="devtools-button" onClick={buildTransaction}>Build Transaction</button>
-						<button className="devtools-button devtools-button-primary" onClick={sendTransaction} disabled={txSending}>{txSending ? "Sending..." : "Sign & Send"}</button>
-					</div>
-
-					{estimatedGas && (
-						<div className="devtools-results">
-							<div>Estimated Gas: <span className="mono">{estimatedGas}</span>{txWillRevert && <span className="tx-fallback-estimate">(fallback estimate)</span>}</div>
-							{suggestedFees && (
-								<div>Suggested: <span className="mono">{txType === 0 ? `${suggestedFees.gasPrice ? formatUnits(suggestedFees.gasPrice, 'gwei') : 'N/A'} gwei` : `${suggestedFees.maxFeePerGas ? formatUnits(suggestedFees.maxFeePerGas, 'gwei') : 'N/A'} / ${suggestedFees.maxPriorityFeePerGas ? formatUnits(suggestedFees.maxPriorityFeePerGas, 'gwei') : 'N/A'} gwei`}</span></div>
-							)}
-							{estimatedCostEth && (
-								<div>Estimated Cost: <span className="mono">{estimatedCostEth} ETH</span> {estimatedCostUsd && <span> (~${estimatedCostUsd} USD)</span>}</div>
-							)}
-						</div>
-					)}
-
-					{builtTx && (
-						<div className="devtools-results">
-							<div className="tx-built-header">Unsigned Transaction:</div>
-							<textarea 
-								className="devtools-input mono tx-builder-built-tx-textarea" 
-								value={builtTx} 
-								readOnly 
-							/>
-							<button 
-								className="devtools-button devtools-margin-top-8"
-								onClick={() => navigator.clipboard.writeText(builtTx)}
-							>
-								Copy to Clipboard
-							</button>
-						</div>
-					)}
-
-					{txWillRevert && (
-						<div className="devtools-error tx-revert-warning">
-							⚠️ Transaction will likely revert!
-							{revertReason && <div className="tx-revert-warning-text">{revertReason}</div>}
-						</div>
-					)}
-
-					{txHashResult && (
-						<div className="devtools-results">Transaction sent: <a className="mono devtools-results-link" href={`https://etherscan.io/tx/${txHashResult}`} target="_blank" rel="noreferrer">{txHashResult}</a></div>
-					)}
-
-					{txError && (
-						<div className="devtools-error">{txError}</div>
-					)}
-				</div>
-				)}
-			</div>
-
-			{/* Advanced: Raw RLP Section */}
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowAdvancedRaw(!showAdvancedRaw)}
-				>
-					<h3 className="devtools-tool-title">📦 Raw RLP Transaction</h3>
-					<span className="devtools-section-toggle">
-						{showAdvancedRaw ? "▼" : "▶"}
-					</span>
-				</div>
-				{showAdvancedRaw && (
-					<div className="raw-rlp-container">
-						<div className="devtools-flex-column devtools-gap-4">
-							<label className="input-label">Signed Transaction (RLP hex)</label>
-							<textarea className="devtools-input mono tx-builder-raw-rlp-textarea" value={rawRlp} onChange={(e) => setRawRlp(e.target.value)} placeholder="0x..." />
-						</div>
-						<div className="raw-rlp-buttons">
-							<button className="devtools-button" onClick={sendRawRlpTx} disabled={txSending}>{txSending ? "Sending..." : "Send Raw Transaction"}</button>
-						</div>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-};
-
-export default TransactionsSection;
diff --git a/src/components/devtools/UtilsSection.tsx b/src/components/devtools/UtilsSection.tsx
deleted file mode 100644
index b91c4ca..0000000
--- a/src/components/devtools/UtilsSection.tsx
+++ /dev/null
@@ -1,388 +0,0 @@
-import React, { useState } from "react";
-import { convertEthUnits, computeKeccak, stringToHex, hexToString, type EthUnit } from "../../utils/devtools";
-
-type SolidityType = "string" | "bytes" | "address" | "uint256" | "uint128" | "uint64" | "uint32" | "uint8" | "int256" | "bool" | "bytes32" | "bytes4";
-
-const UtilsSection: React.FC = () => {
-	const [showUnitConverter, setShowUnitConverter] = useState(false);
-	const [showKeccakHasher, setShowKeccakHasher] = useState(false);
-	const [showHexEncoder, setShowHexEncoder] = useState(false);
-
-	// Unit converter state
-	const [ethAmount, setEthAmount] = useState("");
-	const [finneyAmount, setFinneyAmount] = useState("");
-	const [szaboAmount, setSzaboAmount] = useState("");
-	const [gweiAmount, setGweiAmount] = useState("");
-	const [mweiAmount, setMweiAmount] = useState("");
-	const [kweiAmount, setKweiAmount] = useState("");
-	const [weiAmount, setWeiAmount] = useState("");
-
-	// Keccak tool state
-	const [keccakInput, setKeccakInput] = useState("");
-	const [keccakInputType, setKeccakInputType] = useState<SolidityType>("string");
-	const [keccakResults, setKeccakResults] = useState<{
-		encodedBytes?: string;
-		rawHash?: string;
-		solidityEncodePacked?: string;
-		solidityEncode?: string;
-		functionSelector?: string | null;
-		isFunctionSignature?: boolean;
-		error?: string;
-	} | null>(null);
-
-	// Hex encoder state
-	const [encodedData, setEncodedData] = useState("");
-	const [decodedData, setDecodedData] = useState("");
-
-	const convertEth = (value: string, from: EthUnit) => {
-		const result = convertEthUnits(value, from);
-		if (!result) return;
-
-		// Update all fields except the source
-		if (from !== "eth") setEthAmount(result.eth);
-		if (from !== "finney") setFinneyAmount(result.finney);
-		if (from !== "szabo") setSzaboAmount(result.szabo);
-		if (from !== "gwei") setGweiAmount(result.gwei);
-		if (from !== "mwei") setMweiAmount(result.mwei);
-		if (from !== "kwei") setKweiAmount(result.kwei);
-		if (from !== "wei") setWeiAmount(result.wei);
-	};
-
-	const handleComputeKeccak = () => {
-		const results = computeKeccak(keccakInput, keccakInputType);
-		setKeccakResults(results);
-	};
-
-	const convertToHex = (data: string) => {
-		try {
-			const result = stringToHex(data);
-			setDecodedData(result);
-		} catch (err: any) {
-			setDecodedData("Error: " + err.message);
-		}
-	};
-
-	const convertFromHex = (hexData: string) => {
-		try {
-			const result = hexToString(hexData);
-			setDecodedData(result);
-		} catch (err: any) {
-			setDecodedData("Error: " + err.message);
-		}
-	};
-
-	const copyToClipboard = (text: string) => {
-		navigator.clipboard.writeText(text);
-	};
-
-	return (
-		<div className="devtools-section">
-			{/* Unit Converter */}
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowUnitConverter(!showUnitConverter)}
-				>
-					<h3 className="devtools-tool-title">⇄ Unit Converter</h3>
-					<span className="devtools-section-toggle">
-						{showUnitConverter ? "▼" : "▶"}
-					</span>
-				</div>
-				{showUnitConverter && (
-					<div className="unit-converter-list">
-						<div className="unit-converter-row">
-							<label className="unit-converter-label">ETH (10¹⁸)</label>
-							<input
-								type="text"
-								placeholder="1.0"
-								value={ethAmount}
-								onChange={(e) => {
-									setEthAmount(e.target.value);
-									convertEth(e.target.value, "eth");
-								}}
-								className="devtools-input"
-							/>
-						</div>
-						<div className="unit-converter-row">
-							<label className="unit-converter-label">Finney (10¹⁵)</label>
-							<input
-								type="text"
-								placeholder="1000"
-								value={finneyAmount}
-								onChange={(e) => {
-									setFinneyAmount(e.target.value);
-									convertEth(e.target.value, "finney");
-								}}
-								className="devtools-input"
-							/>
-						</div>
-						<div className="unit-converter-row">
-							<label className="unit-converter-label">Szabo (10¹²)</label>
-							<input
-								type="text"
-								placeholder="1000000"
-								value={szaboAmount}
-								onChange={(e) => {
-									setSzaboAmount(e.target.value);
-									convertEth(e.target.value, "szabo");
-								}}
-								className="devtools-input"
-							/>
-						</div>
-						<div className="unit-converter-row">
-							<label className="unit-converter-label">Gwei (10⁹)</label>
-							<input
-								type="text"
-								placeholder="1000000000"
-								value={gweiAmount}
-								onChange={(e) => {
-									setGweiAmount(e.target.value);
-									convertEth(e.target.value, "gwei");
-								}}
-								className="devtools-input"
-							/>
-						</div>
-						<div className="unit-converter-row">
-							<label className="unit-converter-label">Mwei (10⁶)</label>
-							<input
-								type="text"
-								placeholder="1000000000000"
-								value={mweiAmount}
-								onChange={(e) => {
-									setMweiAmount(e.target.value);
-									convertEth(e.target.value, "mwei");
-								}}
-								className="devtools-input"
-							/>
-						</div>
-						<div className="unit-converter-row">
-							<label className="unit-converter-label">Kwei (10³)</label>
-							<input
-								type="text"
-								placeholder="1000000000000000"
-								value={kweiAmount}
-								onChange={(e) => {
-									setKweiAmount(e.target.value);
-									convertEth(e.target.value, "kwei");
-								}}
-								className="devtools-input"
-							/>
-						</div>
-						<div className="unit-converter-row">
-							<label className="unit-converter-label">Wei (10⁰)</label>
-							<input
-								type="text"
-								placeholder="1000000000000000000"
-								value={weiAmount}
-								onChange={(e) => {
-									setWeiAmount(e.target.value);
-									convertEth(e.target.value, "wei");
-								}}
-								className="devtools-input"
-							/>
-						</div>
-					</div>
-				)}
-			</div>
-
-			{/* Keccak256 Tool */}
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowKeccakHasher(!showKeccakHasher)}
-				>
-					<h3 className="devtools-tool-title">#️⃣ Keccak256 Hasher</h3>
-					<span className="devtools-section-toggle">
-						{showKeccakHasher ? "▼" : "▶"}
-					</span>
-				</div>
-				{showKeccakHasher && (
-					<div className="devtools-flex-column devtools-gap-12">
-						<div className="keccak-input-row">
-							<select
-								value={keccakInputType}
-								onChange={(e) => setKeccakInputType(e.target.value as SolidityType)}
-								className="devtools-select keccak-type-select"
-							>
-								<optgroup label="Dynamic Types">
-									<option value="string">string</option>
-									<option value="bytes">bytes</option>
-								</optgroup>
-								<optgroup label="Fixed Types">
-									<option value="address">address</option>
-									<option value="bool">bool</option>
-									<option value="bytes32">bytes32</option>
-									<option value="bytes4">bytes4</option>
-								</optgroup>
-								<optgroup label="Numeric Types">
-									<option value="uint256">uint256</option>
-									<option value="uint128">uint128</option>
-									<option value="uint64">uint64</option>
-									<option value="uint32">uint32</option>
-									<option value="uint8">uint8</option>
-									<option value="int256">int256</option>
-								</optgroup>
-							</select>
-							<input
-								type="text"
-								placeholder={
-									keccakInputType === "string" ? "Enter text (e.g., transfer(address,uint256))" :
-									keccakInputType === "address" ? "Enter address (0x...)" :
-									keccakInputType === "bool" ? "Enter true/false or 1/0" :
-									keccakInputType.startsWith("uint") || keccakInputType.startsWith("int") ? "Enter number" :
-									"Enter hex value (0x...)"
-								}
-								value={keccakInput}
-								onChange={(e) => setKeccakInput(e.target.value)}
-								className="devtools-input"
-							/>
-						</div>
-
-						<button
-							onClick={handleComputeKeccak}
-							className="devtools-button"
-						>
-							Hash
-						</button>
-
-						{keccakResults && !keccakResults.error && keccakResults.rawHash && (
-							<div className="keccak-results">
-								{keccakResults.encodedBytes && (
-									<div className="keccak-result-item">
-										<div className="keccak-result-header">
-											<span className="keccak-result-label">Encoded Bytes</span>
-											<button
-												onClick={() => copyToClipboard(keccakResults.encodedBytes!)}
-												className="devtools-copy-btn"
-											>
-												📋
-											</button>
-										</div>
-										<div className="keccak-result-value">{keccakResults.encodedBytes}</div>
-									</div>
-								)}
-
-								<div className="keccak-result-item">
-									<div className="keccak-result-header">
-										<span className="keccak-result-label">Keccak256 Hash</span>
-										<button
-											onClick={() => copyToClipboard(keccakResults.rawHash!)}
-											className="devtools-copy-btn"
-										>
-											📋
-										</button>
-									</div>
-									<div className="keccak-result-value">{keccakResults.rawHash}</div>
-								</div>
-
-								<div className="keccak-result-item">
-									<div className="keccak-result-header">
-										<span className="keccak-result-label">keccak256(abi.encodePacked(input))</span>
-										<button
-											onClick={() => copyToClipboard(keccakResults.solidityEncodePacked!)}
-											className="devtools-copy-btn"
-										>
-											📋
-										</button>
-									</div>
-									<div className="keccak-result-value">{keccakResults.solidityEncodePacked}</div>
-								</div>
-
-								<div className="keccak-result-item">
-									<div className="keccak-result-header">
-										<span className="keccak-result-label">keccak256(abi.encode(input))</span>
-										<button
-											onClick={() => copyToClipboard(keccakResults.solidityEncode!)}
-											className="devtools-copy-btn"
-										>
-											📋
-										</button>
-									</div>
-									<div className="keccak-result-value">{keccakResults.solidityEncode}</div>
-								</div>
-
-								{keccakResults.isFunctionSignature && keccakResults.functionSelector && (
-									<div className="keccak-result-item keccak-selector">
-										<div className="keccak-result-header">
-											<span className="keccak-result-label">
-												🎯 Function Selector (bytes4)
-											</span>
-											<button
-												onClick={() => copyToClipboard(keccakResults.functionSelector!)}
-												className="devtools-copy-btn"
-											>
-												📋
-											</button>
-										</div>
-										<div className="keccak-result-value keccak-selector-value">
-											{keccakResults.functionSelector}
-										</div>
-									</div>
-								)}
-							</div>
-						)}
-
-						{keccakResults?.error && (
-							<div className="keccak-error">
-								⚠️ {keccakResults.error}
-							</div>
-						)}
-					</div>
-				)}
-			</div>
-
-			{/* Hex Encoder/Decoder */}
-			<div className="devtools-card">
-				<div 
-					className="devtools-tool-header cursor-pointer"
-					onClick={() => setShowHexEncoder(!showHexEncoder)}
-				>
-					<h3 className="devtools-tool-title">🔤 Hex Encoder/Decoder</h3>
-					<span className="devtools-section-toggle">
-						{showHexEncoder ? "▼" : "▶"}
-					</span>
-				</div>
-				{showHexEncoder && (
-					<div className="devtools-flex-column devtools-gap-12">
-						<textarea
-							placeholder="Enter text or hex data"
-							value={encodedData}
-							onChange={(e) => setEncodedData(e.target.value)}
-							className="devtools-input hex-encoder-textarea"
-						/>
-						<div className="hex-encoder-buttons">
-							<button
-								onClick={() => convertToHex(encodedData)}
-								className="devtools-button"
-							>
-								Encode to Hex
-							</button>
-							<button
-								onClick={() => convertFromHex(encodedData)}
-								className="devtools-button"
-							>
-								Decode from Hex
-							</button>
-						</div>
-						{decodedData && (
-							<div className="devtools-results">
-								<div className="hex-result-header">
-									<span className="hex-result-label">Result:</span>
-									<button
-										onClick={() => copyToClipboard(decodedData)}
-										className="devtools-copy-btn"
-									>
-										📋 Copy
-									</button>
-								</div>
-								<div className="hex-result-value">{decodedData}</div>
-							</div>
-						)}
-					</div>
-				)}
-			</div>
-		</div>
-	);
-};
-
-export default UtilsSection;
diff --git a/src/components/navbar/NavbarLogo.tsx b/src/components/navbar/NavbarLogo.tsx
new file mode 100644
index 0000000..a33edca
--- /dev/null
+++ b/src/components/navbar/NavbarLogo.tsx
@@ -0,0 +1,217 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import type { NetworkConfig } from "../../config/networks";
+import { getSubdomainForNetwork, subdomainConfig } from "../../config/subdomains";
+import { useNetworks } from "../../context/AppContext";
+import { getBaseDomainUrl, getSubdomain, getSubdomainRedirect } from "../../utils/subdomainUtils";
+import NetworkIcon from "../common/NetworkIcon";
+
+// OpenScan cube SVG component
+const OpenScanCube = () => (
+  // biome-ignore lint/a11y/noSvgWithoutTitle: decorative icon
+  <svg width="32" height="32" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    {/* Top face - brightest */}
+    <polygon points="20,6 34,14 20,22 6,14" fill="#067455ff" />
+    {/* Left face - medium */}
+    <polygon points="6,14 20,22 20,36 6,28" fill="#07634aff" />
+    {/* Right face - darkest */}
+    <polygon points="20,22 34,14 34,28 20,36" fill="#065743ff" />
+  </svg>
+);
+
+// Arrow icon for dropdown toggle
+const ChevronDown = ({ size = 12 }: { size?: number }) => (
+  // biome-ignore lint/a11y/noSvgWithoutTitle: decorative icon
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 9l6 6 6-6"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default function NavbarLogo() {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // Get current subdomain info
+  const subdomain = getSubdomain();
+  const subdomainRedirect = getSubdomainRedirect();
+
+  // Extract network ID from subdomain redirect path (e.g., "/1" -> 1)
+  const networkIdFromSubdomain =
+    subdomainRedirect && /^\/\d+$/.test(subdomainRedirect)
+      ? Number(subdomainRedirect.slice(1))
+      : null;
+
+  // Extract network ID from URL path (e.g., "/1/blocks" -> 1)
+  const pathSegments = location.pathname.split("/").filter(Boolean);
+  const networkIdFromPath =
+    pathSegments[0] && /^\d+$/.test(pathSegments[0]) ? Number(pathSegments[0]) : null;
+
+  // Check if the network from path has a configured subdomain
+  const networkFromPathHasSubdomain = networkIdFromPath
+    ? getSubdomainForNetwork(networkIdFromPath)
+    : null;
+
+  // Determine which network to show:
+  // 1. If on a subdomain, use that network
+  // 2. If on a network page (from path) that has a subdomain configured, use that
+  const activeNetworkId =
+    networkIdFromSubdomain ?? (networkFromPathHasSubdomain ? networkIdFromPath : null);
+
+  // Get network config from enabled networks only
+  const { enabledNetworks } = useNetworks();
+  const network = useMemo(() => {
+    if (!activeNetworkId) return undefined;
+    return enabledNetworks.find((n) => n.networkId === activeNetworkId);
+  }, [activeNetworkId, enabledNetworks]);
+
+  // Get all networks that have subdomain support (enabled networks with subdomain config)
+  const networksWithSubdomain = useMemo(() => {
+    const networkSubdomains = subdomainConfig.filter(
+      (config) => config.enabled && /^\/\d+$/.test(config.redirect),
+    );
+
+    const networks: NetworkConfig[] = [];
+    for (const config of networkSubdomains) {
+      const networkId = Number(config.redirect.slice(1));
+      const networkConfig = enabledNetworks.find((n) => n.networkId === networkId);
+      if (networkConfig) {
+        networks.push(networkConfig);
+      }
+    }
+    return networks;
+  }, [enabledNetworks]);
+
+  // Other networks (not the current one) for the dropdown
+  const otherNetworks = useMemo(() => {
+    return networksWithSubdomain.filter((n) => n.networkId !== activeNetworkId);
+  }, [networksWithSubdomain, activeNetworkId]);
+
+  // Determine if we're currently on the subdomain for this network
+  const isOnSubdomain = Boolean(subdomain && networkIdFromSubdomain);
+
+  // Only show network logo if we have a valid enabled network with subdomain support
+  const showNetworkLogo = activeNetworkId && network;
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleGoToHome = useCallback(() => {
+    if (isOnSubdomain) {
+      // If on subdomain, go to base domain
+      const baseDomainUrl = getBaseDomainUrl();
+      if (baseDomainUrl) {
+        window.location.href = baseDomainUrl;
+      }
+    } else {
+      // If on path, just go to root
+      window.location.href = "/";
+    }
+    setIsDropdownOpen(false);
+  }, [isOnSubdomain]);
+
+  const handleGoToNetwork = useCallback(
+    (networkId?: number) => {
+      const targetNetworkId = networkId ?? activeNetworkId;
+      if (!targetNetworkId) return;
+
+      // Navigate to network page path using React Router
+      navigate(`/${targetNetworkId}`);
+      setIsDropdownOpen(false);
+    },
+    [activeNetworkId, navigate],
+  );
+
+  // If not on a network subdomain, show the regular OpenScan cube
+  if (!showNetworkLogo) {
+    return (
+      <Link to="/" className="home-cube-link" title="Home">
+        <OpenScanCube />
+      </Link>
+    );
+  }
+
+  // On a network subdomain - show network icon with dropdown
+  return (
+    <div className="navbar-logo-container" ref={dropdownRef}>
+      <div className="navbar-logo-group">
+        <button
+          type="button"
+          className="navbar-logo-arrow"
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+          aria-label="Toggle menu"
+          title="Toggle menu"
+        >
+          <ChevronDown size={14} />
+        </button>
+
+        <button
+          type="button"
+          className="navbar-logo-network"
+          onClick={() => handleGoToNetwork()}
+          title={`Go to ${network.name}`}
+        >
+          <NetworkIcon network={network} size={28} />
+        </button>
+      </div>
+
+      {isDropdownOpen && (
+        <div className="navbar-logo-dropdown">
+          {/* Current network first */}
+          <button
+            type="button"
+            className="navbar-logo-dropdown-item active"
+            onClick={() => handleGoToNetwork()}
+          >
+            <NetworkIcon network={network} size={24} />
+            <span>{network.name}</span>
+          </button>
+
+          {/* Other networks with subdomain support */}
+          {otherNetworks.map((otherNetwork) => (
+            <button
+              key={otherNetwork.networkId}
+              type="button"
+              className="navbar-logo-dropdown-item"
+              onClick={() => handleGoToNetwork(otherNetwork.networkId)}
+            >
+              <NetworkIcon network={otherNetwork} size={24} />
+              <span>{otherNetwork.name}</span>
+            </button>
+          ))}
+
+          {/* Divider */}
+          <div className="navbar-logo-dropdown-divider" />
+
+          {/* OpenScan home */}
+          <button type="button" className="navbar-logo-dropdown-item" onClick={handleGoToHome}>
+            <OpenScanCube />
+            <span>OpenScan</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/navbar/NetworkBlockIndicator.tsx b/src/components/navbar/NetworkBlockIndicator.tsx
new file mode 100644
index 0000000..90ba7eb
--- /dev/null
+++ b/src/components/navbar/NetworkBlockIndicator.tsx
@@ -0,0 +1,88 @@
+import { useContext, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { getRPCUrls } from "../../config/rpcConfig";
+import { AppContext, useNetworks } from "../../context/AppContext";
+import { RpcClient } from "explorer-network-connectors";
+import { NetworkIcon } from "../common/NetworkIcon";
+
+interface NetworkBlockIndicatorProps {
+  className?: string;
+}
+
+export function NetworkBlockIndicator({ className }: NetworkBlockIndicatorProps) {
+  const location = useLocation();
+  const { rpcUrls } = useContext(AppContext);
+  const { getNetwork } = useNetworks();
+  const [blockNumber, setBlockNumber] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Extract networkId from the pathname (e.g., /1/blocks -> 1)
+  const networkId = useMemo(() => {
+    const pathSegments = location.pathname.split("/").filter(Boolean);
+    return pathSegments[0] && !Number.isNaN(Number(pathSegments[0]))
+      ? Number(pathSegments[0])
+      : null;
+  }, [location.pathname]);
+
+  const network = networkId ? getNetwork(networkId) : undefined;
+
+  useEffect(() => {
+    if (!networkId) {
+      setBlockNumber(null);
+      return;
+    }
+
+    let isMounted = true;
+    let intervalId: NodeJS.Timeout | null = null;
+
+    const fetchBlockNumber = async () => {
+      try {
+        const urls = getRPCUrls(networkId, rpcUrls);
+        const client = new RpcClient(urls[0] || "");
+        const result = await client.call<string>("eth_blockNumber", []);
+        if (isMounted) {
+          setBlockNumber(parseInt(result, 16));
+          setIsLoading(false);
+        }
+      } catch (error) {
+        console.error("Failed to fetch block number:", error);
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    setIsLoading(true);
+    fetchBlockNumber();
+
+    // Poll for new blocks every 12 seconds (Ethereum average block time)
+    intervalId = setInterval(fetchBlockNumber, 12000);
+
+    return () => {
+      isMounted = false;
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [networkId, rpcUrls]);
+
+  if (!networkId || !network) return null;
+
+  return (
+    <div
+      className={`network-block-indicator ${className || ""}`}
+      style={{ "--network-color": network.color } as React.CSSProperties}
+      title={network.name}
+    >
+      <div className="network-block-pulse" />
+      <div className="network-block-logo">
+        <NetworkIcon network={network} size={20} />
+      </div>
+      <span className="network-block-number">
+        {isLoading ? "..." : blockNumber !== null ? `#${blockNumber.toLocaleString()}` : "---"}
+      </span>
+    </div>
+  );
+}
+
+export default NetworkBlockIndicator;
diff --git a/src/components/navbar/VersionWarningIcon.tsx b/src/components/navbar/VersionWarningIcon.tsx
new file mode 100644
index 0000000..56653b2
--- /dev/null
+++ b/src/components/navbar/VersionWarningIcon.tsx
@@ -0,0 +1,57 @@
+import type React from "react";
+import { useMemo, useState } from "react";
+import { ENVIRONMENT } from "../../utils/constants";
+
+interface VersionWarningIconProps {
+  readonly className?: string;
+}
+
+// Constants outside component to avoid recreating
+const TOOLTIP_TEXT = "This is not a production verified version";
+const ICON_COLORS = {
+  development: "#ef4444",
+  staging: "#f59e0b",
+  default: "#6b7280",
+} as const;
+
+const VersionWarningIcon: React.FC<VersionWarningIconProps> = ({ className = "" }) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  // Memoize color calculation
+  const iconColor = useMemo(() => {
+    return ICON_COLORS[ENVIRONMENT as keyof typeof ICON_COLORS] || ICON_COLORS.default;
+  }, []);
+
+  if (ENVIRONMENT === "production") {
+    return null;
+  }
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: <TODO>
+    <div
+      className={`version-warning-icon ${className}`}
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+    >
+      {/** biome-ignore lint/a11y/noSvgWithoutTitle: <TODO> */}
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 9v3m0 3h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          stroke={iconColor}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      {showTooltip && <div className="version-warning-tooltip">{TOOLTIP_TEXT}</div>}
+    </div>
+  );
+};
+
+export default VersionWarningIcon;
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
new file mode 100644
index 0000000..1e45444
--- /dev/null
+++ b/src/components/navbar/index.tsx
@@ -0,0 +1,224 @@
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useTheme } from "../../context/SettingsContext";
+import { useSearch } from "../../hooks/useSearch";
+import NavbarLogo from "./NavbarLogo";
+import { NetworkBlockIndicator } from "./NetworkBlockIndicator";
+import VersionWarningIcon from "./VersionWarningIcon";
+
+const Navbar = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { searchTerm, setSearchTerm, isResolving, handleSearch, networkId } = useSearch();
+  const { isDarkMode, toggleTheme } = useTheme();
+
+  // Check if we should show the search box (on blocks, block, txs, tx pages)
+  const pathSegments = location.pathname.split("/").filter(Boolean);
+  const shouldShowSearch =
+    networkId &&
+    pathSegments.length >= 2 &&
+    pathSegments[1] &&
+    ["blocks", "block", "txs", "tx", "address"].includes(pathSegments[1]);
+
+  const goToSettings = () => {
+    navigate("/settings");
+  };
+
+  return (
+    <nav className="navbar">
+      <div className="navbar-inner">
+        <ul>
+          <li>
+            <NavbarLogo />
+          </li>
+          {networkId && (
+            <>
+              <li>
+                <Link to={`/${networkId}/blocks`}>BLOCKS</Link>
+              </li>
+              <li>
+                <Link to={`/${networkId}/txs`}>TRANSACTIONS</Link>
+              </li>
+            </>
+          )}
+        </ul>
+
+        {/* Search Box */}
+        {shouldShowSearch && (
+          <div className="search-container">
+            <form onSubmit={handleSearch} className="search-form">
+              <input
+                type="text"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                placeholder="Search by Address / Tx Hash / Block / ENS"
+                className="search-input"
+                disabled={isResolving}
+              />
+              <button
+                type="submit"
+                className="search-button"
+                aria-label="Search"
+                title="Search"
+                disabled={isResolving}
+              >
+                {/** biome-ignore lint/a11y/noSvgWithoutTitle: <TODO> */}
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle cx="11" cy="11" r="8" stroke="currentColor" strokeWidth="2" />
+                  <path
+                    d="M21 21l-4.35-4.35"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                  />
+                </svg>
+              </button>
+            </form>
+          </div>
+        )}
+
+        <div className="navbar-right">
+          <NetworkBlockIndicator />
+          <VersionWarningIcon />
+          <ul>
+            <li>
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button
+                onClick={() => navigate("/devtools")}
+                className="navbar-toggle-btn"
+                aria-label="Dev Tools"
+                title="Dev Tools"
+              >
+                {/** biome-ignore lint/a11y/noSvgWithoutTitle: <TODO> */}
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+            </li>
+            <li>
+              {/* biome-ignore lint/a11y/useButtonType: nav buttons don't submit forms */}
+              <button
+                onClick={toggleTheme}
+                className="navbar-toggle-btn"
+                aria-label={isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
+                title={isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
+              >
+                {isDarkMode ? (
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <circle cx="12" cy="12" r="5" stroke="currentColor" strokeWidth="2" />
+                    <path d="M12 1v2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+                    <path
+                      d="M12 21v2"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                    <path
+                      d="M4.22 4.22l1.42 1.42"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                    <path
+                      d="M18.36 18.36l1.42 1.42"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                    <path d="M1 12h2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+                    <path
+                      d="M21 12h2"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                    <path
+                      d="M4.22 19.78l1.42-1.42"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                    <path
+                      d="M18.36 5.64l1.42-1.42"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                ) : (
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                )}
+              </button>
+            </li>
+            <li>
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button
+                onClick={() => goToSettings()}
+                className="navbar-toggle-btn"
+                aria-label="Settings"
+                title="Settings"
+              >
+                {/** biome-ignore lint/a11y/noSvgWithoutTitle: <TODO> */}
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="2" />
+                  <path
+                    d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  />
+                </svg>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/src/components/pages/About.tsx b/src/components/pages/About.tsx
deleted file mode 100644
index 285d855..0000000
--- a/src/components/pages/About.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React from "react";
-
-const About: React.FC = () => {
-	const appVersion = process.env.REACT_APP_VERSION || "0.1.0";
-	const commitHash = process.env.REACT_APP_COMMIT_HASH || "development";
-	const formattedCommitHash =
-		commitHash.length > 7 ? commitHash.substring(0, 7) : commitHash;
-
-	return (
-		<div className="container-medium page-container-padded">
-			<div className="page-card">
-				{/* Header */}
-				<div className="text-center mb-large">
-					<h1 className="page-heading">About OpenScan</h1>
-					<p className="page-subtitle">
-						An open-source, lightweight, multi-chain blockchain explorer
-					</p>
-				</div>
-
-				{/* Version Info Card */}
-				<div className="version-card">
-					<div className="version-card-grid">
-						<div className="version-info-item">
-							<div className="version-info-label">Version</div>
-							<div className="version-info-value">{appVersion}</div>
-						</div>
-						<div className="version-info-item">
-							<div className="version-info-label">Commit</div>
-							<div className="version-info-value-mono">
-								{formattedCommitHash}
-							</div>
-						</div>
-					</div>
-				</div>
-
-				{/* Features Grid */}
-				<h2 className="page-heading-large text-center">Features</h2>
-
-				<div className="data-grid-3 mb-large">
-					{[
-						{
-							title: "🌐 Multi-Chain Support",
-							description:
-								"Explore Ethereum Mainnet, Sepolia, Arbitrum One, Optimism, and local development networks.",
-						},
-						{
-							title: "🔍 Block Explorer",
-							description:
-								"View detailed information about blocks, transactions, and addresses across all supported chains.",
-						},
-						{
-							title: "✅ Contract Verification",
-							description:
-								"Integration with Sourcify API to display verified contract source code, ABI, and metadata.",
-						},
-						{
-							title: "📊 Real-Time Data",
-							description:
-								"Live network statistics, gas prices, and mempool monitoring for supported chains.",
-						},
-						{
-							title: "🎨 Modern UI",
-							description:
-								"Clean, responsive interface with dark theme optimized for blockchain data visualization.",
-						},
-						{
-							title: "⚡ Fast Performance",
-							description:
-								"Efficient caching and lazy loading for quick data access and smooth user experience.",
-						},
-					].map((feature, index) => (
-						<div key={index} className="feature-card">
-							<h3 className="feature-card-title">{feature.title}</h3>
-							<p className="feature-card-description">{feature.description}</p>
-						</div>
-					))}
-				</div>
-
-				{/* Supported Networks */}
-				<h2 className="page-heading-large text-center">Supported Networks</h2>
-
-				<div className="data-grid-3 mb-large">
-					{[
-						{ name: "Ethereum Mainnet", chainId: "1", icon: "⟠" },
-						{ name: "Sepolia Testnet", chainId: "11155111", icon: "🧪" },
-						{ name: "Arbitrum One", chainId: "42161", icon: "🔷" },
-						{ name: "Optimism", chainId: "10", icon: "🔴" },
-						{ name: "Localhost", chainId: "31337", icon: "💻" },
-					].map((network, index) => (
-						<div key={index} className="network-item">
-							<div className="network-icon-box">{network.icon}</div>
-							<div className="network-info">
-								<div className="network-name">{network.name}</div>
-								<div className="network-chain-id">
-									Chain ID: {network.chainId}
-								</div>
-							</div>
-						</div>
-					))}
-				</div>
-
-				{/* Open Source */}
-				<div className="text-center mb-large opensource-card">
-					<h2 className="opensource-title">Open Source</h2>
-					<p className="opensource-description">
-						OpenScan is free and open source software. Contributions, issues,
-						and feature requests are welcome!
-					</p>
-					<a
-						href="https://github.com/openscan-explorer/explorer"
-						target="_blank"
-						rel="noopener noreferrer"
-						className="button-primary-inline"
-					>
-						View on GitHub ↗
-					</a>
-				</div>
-
-				{/* License */}
-				<div className="text-center license-footer">
-					<p>OpenScan is licensed under the MIT License</p>
-					<p className="license-footer-spacing">
-						Built with ❤️ for the Ethereum community
-					</p>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default About;
diff --git a/src/components/pages/Address.tsx b/src/components/pages/Address.tsx
deleted file mode 100644
index 6dbff2a..0000000
--- a/src/components/pages/Address.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { useParams } from "react-router-dom";
-import { useDataService } from "../../hooks/useDataService";
-import { useEffect, useState } from "react";
-import type {
-	Address as AddressType,
-	AddressTransactionsResult,
-	Transaction,
-	DataWithMetadata,
-} from "../../types";
-import AddressDisplay from "../common/AddressDisplay";
-import Loader from "../common/Loader";
-import { useProviderSelection } from "../../hooks/useProviderSelection";
-import { useSelectedData } from "../../hooks/useSelectedData";
-
-export default function Address() {
-	const { chainId, address } = useParams<{
-		chainId?: string;
-		address?: string;
-	}>();
-	const numericChainId = Number(chainId) || 1;
-	const dataService = useDataService(numericChainId);
-	const [addressResult, setAddressResult] =
-		useState<DataWithMetadata<AddressType> | null>(null);
-	const [transactionsResult, setTransactionsResult] =
-		useState<AddressTransactionsResult | null>(null);
-	const [transactionDetails, setTransactionDetails] = useState<Transaction[]>(
-		[],
-	);
-	const [loadingTxDetails, setLoadingTxDetails] = useState(false);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-
-	// Provider selection state
-	const [selectedProvider, setSelectedProvider] = useProviderSelection(
-		`address_${numericChainId}_${address}`,
-	);
-
-	// Extract actual address data based on selected provider
-	const addressData = useSelectedData(addressResult, selectedProvider);
-
-	useEffect(() => {
-		if (!dataService || !address) {
-			setLoading(false);
-			return;
-		}
-
-		console.log(
-			"Fetching address data for:",
-			address,
-			"on chain:",
-			numericChainId,
-		);
-		setLoading(true);
-		setError(null);
-
-		// Fetch address data
-		dataService
-			.getAddress(address)
-			.then((result) => {
-				console.log("Fetched address:", result);
-				setAddressResult(result);
-			})
-			.catch((err) => {
-				console.error("Error fetching address:", err);
-				setError(err.message || "Failed to fetch address data");
-			})
-			.finally(() => setLoading(false));
-
-		// Fetch transactions separately using new trace_filter/logs method
-		dataService
-			.getAddressTransactions(address)
-			.then(async (result) => {
-				console.log("Fetched transactions result:", result);
-				setTransactionsResult(result);
-
-				// Fetch full transaction details for first 25 transactions
-				if (result.transactions.length > 0) {
-					setLoadingTxDetails(true);
-					const txsToFetch = result.transactions.slice(0, 25);
-					const txResults = await Promise.all(
-						txsToFetch.map((hash) =>
-							dataService.getTransaction(hash).catch((err) => {
-								console.error(`Failed to fetch tx ${hash}:`, err);
-								return null;
-							}),
-						),
-					);
-					setTransactionDetails(
-						txResults
-							.filter((result): result is DataWithMetadata<Transaction> => result !== null)
-							.map((result) => result.data),
-					);
-					setLoadingTxDetails(false);
-				}
-			})
-			.catch((err) => {
-				console.error("Error fetching address transactions:", err);
-				// Non-critical error, don't set main error state
-				setTransactionsResult({
-					transactions: [],
-					source: "none",
-					isComplete: false,
-					message: "Failed to fetch transaction history: " + err.message,
-				});
-			});
-	}, [dataService, address, numericChainId]);
-
-	if (loading) {
-		return (
-			<div className="container-wide container-padded">
-				<div className="block-display-card">
-					<div className="block-display-header">
-						<span className="block-label">Address</span>
-						<span className="tx-mono header-subtitle">{address}</span>
-					</div>
-					<div className="card-content-loading">
-						<Loader text="Loading address data..." />
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<div className="container-wide container-padded">
-				<div className="block-display-card">
-					<div className="block-display-header">
-						<span className="block-label">Address</span>
-						<span className="tx-mono header-subtitle">{address}</span>
-					</div>
-					<div className="card-content">
-						<p className="text-error margin-0">Error: {error}</p>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	if (!address) {
-		return (
-			<div className="container-wide container-padded">
-				<div className="block-display-card">
-					<div className="block-display-header">
-						<span className="block-label">Address</span>
-					</div>
-					<div className="card-content">
-						<p className="text-muted margin-0">No address provided</p>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="container-wide container-padded">
-			{addressData ? (
-				<AddressDisplay
-					address={addressData}
-					addressHash={address}
-					chainId={chainId}
-					transactionsResult={transactionsResult}
-					transactionDetails={transactionDetails}
-					loadingTxDetails={loadingTxDetails}
-					metadata={addressResult?.metadata}
-					selectedProvider={selectedProvider}
-					onProviderSelect={setSelectedProvider}
-				/>
-			) : (
-				<p>Address data not found</p>
-			)}
-		</div>
-	);
-}
diff --git a/src/components/pages/Block.tsx b/src/components/pages/Block.tsx
deleted file mode 100644
index c4aa9cf..0000000
--- a/src/components/pages/Block.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useParams } from "react-router-dom";
-import { useDataService } from "../../hooks/useDataService";
-import { useEffect, useState } from "react";
-import type { Block, DataWithMetadata } from "../../types";
-import BlockDisplay from "../common/BlockDisplay";
-import Loader from "../common/Loader";
-import { useProviderSelection } from "../../hooks/useProviderSelection";
-import { useSelectedData } from "../../hooks/useSelectedData";
-
-export default function BlockPage() {
-	const { chainId, filter } = useParams<{
-		chainId?: string;
-		filter?: string;
-	}>();
-	const { chainId: chainIdParam, blockNumber: blockNumberParam } = useParams<{
-		chainId: string;
-		blockNumber: string;
-	}>();
-
-	const blockNumber = filter === "latest" ? "latest" : Number(filter);
-	const numericChainId = Number(chainId) || 1;
-
-	const dataService = useDataService(numericChainId);
-	const [blockResult, setBlockResult] = useState<DataWithMetadata<Block> | null>(
-		null,
-	);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-
-	// Provider selection state
-	const [selectedProvider, setSelectedProvider] = useProviderSelection(
-		`block_${numericChainId}_${blockNumber}`,
-	);
-
-	// Extract actual block data based on selected provider
-	const block = useSelectedData(blockResult, selectedProvider);
-
-	useEffect(() => {
-		if (!dataService || blockNumber === undefined) {
-			setLoading(false);
-			return;
-		}
-
-		console.log("Fetching block:", blockNumber, "for chain:", numericChainId);
-		setLoading(true);
-		setError(null);
-
-		dataService
-			.getBlock(blockNumber)
-			.then((result) => {
-				console.log("Fetched block:", result);
-				setBlockResult(result);
-			})
-			.catch((err) => {
-				console.error("Error fetching block:", err);
-				setError(err.message || "Failed to fetch block");
-			})
-			.finally(() => setLoading(false));
-	}, [dataService, blockNumber, numericChainId]);
-
-	if (loading) {
-		return (
-			<div className="container-wide container-padded">
-				<div className="block-display-card">
-					<div className="block-display-header">
-						<span className="block-label">Block</span>
-						<span className="tx-mono header-subtitle">#{filter}</span>
-					</div>
-					<div className="card-content-loading">
-						<Loader text="Loading block data..." />
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<div className="container-wide container-padded">
-				<div className="block-display-card">
-					<div className="block-display-header">
-						<span className="block-label">Block</span>
-						<span className="tx-mono header-subtitle">#{filter}</span>
-					</div>
-					<div className="card-content">
-						<p className="text-error margin-0">Error: {error}</p>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="container-wide container-padded">
-			{block ? (
-				<BlockDisplay
-					block={block}
-					chainId={chainId}
-					metadata={blockResult?.metadata}
-					selectedProvider={selectedProvider}
-					onProviderSelect={setSelectedProvider}
-				/>
-			) : (
-				<div className="block-display-card">
-					<div className="block-display-header">
-						<span className="block-label">Block</span>
-					</div>
-					<div className="card-content">
-						<p className="text-muted margin-0">Block not found</p>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
diff --git a/src/components/pages/Blocks.tsx b/src/components/pages/Blocks.tsx
deleted file mode 100644
index 54093bd..0000000
--- a/src/components/pages/Blocks.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import {
-	useParams,
-	Link,
-	useSearchParams,
-	useNavigate,
-} from "react-router-dom";
-import { useDataService } from "../../hooks/useDataService";
-import { useEffect, useState } from "react";
-import type { Block } from "../../types";
-import Loader from "../common/Loader";
-
-const BLOCKS_PER_PAGE = 10;
-
-export default function Blocks() {
-	const { chainId } = useParams<{ chainId?: string }>();
-	const [searchParams] = useSearchParams();
-	const navigate = useNavigate();
-	const numericChainId = Number(chainId) || 1;
-	const dataService = useDataService(numericChainId);
-	const [blocks, setBlocks] = useState<Block[]>([]);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-	const [latestBlockNumber, setLatestBlockNumber] = useState<number | null>(
-		null,
-	);
-
-	// Get fromBlock from URL params, default to null (latest)
-	const fromBlockParam = searchParams.get("fromBlock");
-	const fromBlock = fromBlockParam ? Number(fromBlockParam) : null;
-
-	useEffect(() => {
-		if (!dataService) {
-			setLoading(false);
-			return;
-		}
-
-		const fetchBlocks = async () => {
-			setLoading(true);
-			setError(null);
-
-			try {
-				// Get the latest block number first
-				const latestBlock = await dataService.getLatestBlockNumber();
-				setLatestBlockNumber(latestBlock);
-
-				// Determine starting block
-				const startBlock = fromBlock !== null ? fromBlock : latestBlock;
-
-				// Calculate block numbers to fetch (going backwards from startBlock)
-				const blockNumbers = Array.from(
-					{ length: BLOCKS_PER_PAGE },
-					(_, i) => startBlock - i,
-				).filter((num) => num >= 0);
-
-				// Fetch blocks in parallel
-				const blockResults = await Promise.all(
-					blockNumbers.map((num) => dataService.getBlock(num)),
-				);
-
-				console.log("Fetched blocks:", blockResults);
-				// Extract data from results
-				setBlocks(blockResults.map((result) => result.data));
-			} catch (err: any) {
-				console.error("Error fetching blocks:", err);
-				setError(err.message || "Failed to fetch blocks");
-			} finally {
-				setLoading(false);
-			}
-		};
-
-		fetchBlocks();
-	}, [dataService, fromBlock]);
-
-	const truncate = (str: string, start = 10, end = 8) => {
-		if (!str) return "";
-		if (str.length <= start + end) return str;
-		return `${str.slice(0, start)}...${str.slice(-end)}`;
-	};
-
-	const formatTime = (timestamp: string) => {
-		try {
-			const date = new Date(Number(timestamp) * 1000);
-			return date.toLocaleString();
-		} catch (e) {
-			return timestamp;
-		}
-	};
-
-	// Navigation handlers
-	const goToNewerBlocks = () => {
-		if (blocks.length === 0 || latestBlockNumber === null || !blocks[0]) return;
-		const newestBlockInPage = Number(blocks[0].number);
-		const newFromBlock = Math.min(
-			newestBlockInPage + BLOCKS_PER_PAGE,
-			latestBlockNumber,
-		);
-
-		if (newFromBlock >= latestBlockNumber) {
-			// Go to latest (remove fromBlock param)
-			navigate(`/${chainId}/blocks`);
-		} else {
-			navigate(`/${chainId}/blocks?fromBlock=${newFromBlock}`);
-		}
-	};
-
-	const goToOlderBlocks = () => {
-		if (blocks.length === 0) return;
-		const lastBlock = blocks[blocks.length - 1];
-		if (!lastBlock) return;
-		const oldestBlockInPage = Number(lastBlock.number);
-		const newFromBlock = oldestBlockInPage - 1;
-
-		if (newFromBlock >= 0) {
-			navigate(`/${chainId}/blocks?fromBlock=${newFromBlock}`);
-		}
-	};
-
-	const goToLatest = () => {
-		navigate(`/${chainId}/blocks`);
-	};
-
-	// Determine if we can navigate
-	const lastBlock = blocks[blocks.length - 1];
-	const canGoNewer =
-		fromBlock !== null &&
-		latestBlockNumber !== null &&
-		fromBlock < latestBlockNumber;
-	const canGoOlder =
-		blocks.length > 0 && lastBlock && Number(lastBlock.number) > 0;
-	const isAtLatest =
-		fromBlock === null ||
-		(latestBlockNumber !== null && fromBlock >= latestBlockNumber);
-
-	if (loading) {
-		return (
-			<div className="container-wide page-container-padded text-center page-card">
-				<h1 className="page-title-small">Latest Blocks</h1>
-				<Loader text="Loading blocks..." />
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<div className="container-wide page-container-padded text-center page-card">
-				<h1 className="page-title-small">Latest Blocks</h1>
-				<p className="error-text">Error: {error}</p>
-			</div>
-		);
-	}
-
-	return (
-		<div className="container-wide page-container-padded text-center page-card">
-			<h1 className="page-title-small">Latest Blocks</h1>
-			<p className="page-subtitle-text">
-				{isAtLatest
-					? `Showing ${blocks.length} most recent blocks`
-					: `Showing blocks ${Number(blocks[blocks.length - 1]?.number || 0).toLocaleString()} - ${Number(blocks[0]?.number || 0).toLocaleString()}`}
-			</p>
-
-			<div className="table-wrapper">
-				<table className="dash-table">
-					<thead>
-						<tr>
-							<th>Block</th>
-							<th>Timestamp</th>
-							<th>Txns</th>
-							<th>Miner</th>
-							<th>Gas Used</th>
-							<th>Gas Limit</th>
-							<th>Size</th>
-						</tr>
-					</thead>
-					<tbody>
-						{blocks.map((block) => (
-							<tr key={block.number}>
-								<td>
-									<Link
-										to={`/${chainId}/block/${Number(block.number).toString()}`}
-										className="table-cell-number"
-									>
-										{Number(block.number).toLocaleString()}
-									</Link>
-								</td>
-								<td className="table-cell-text">
-									{formatTime(block.timestamp)}
-								</td>
-								<td className="table-cell-value">
-									{block.transactions ? block.transactions.length : 0}
-								</td>
-								<td className="table-cell-mono" title={block.miner}>
-									<Link
-										to={`/${chainId}/address/${block.miner}`}
-										className="table-cell-address"
-									>
-										{truncate(block.miner)}
-									</Link>
-								</td>
-								<td className="table-cell-text">
-									{Number(block.gasUsed).toLocaleString()}
-								</td>
-								<td className="table-cell-muted">
-									{Number(block.gasLimit).toLocaleString()}
-								</td>
-								<td className="table-cell-muted">
-									{Number(block.size).toLocaleString()} bytes
-								</td>
-							</tr>
-						))}
-					</tbody>
-				</table>
-			</div>
-
-			{/* Pagination */}
-			<div className="pagination-container">
-				<button
-					onClick={goToLatest}
-					disabled={isAtLatest}
-					className="pagination-btn"
-					title="Go to latest blocks"
-				>
-					Latest
-				</button>
-				<button
-					onClick={goToNewerBlocks}
-					disabled={!canGoNewer}
-					className="pagination-btn"
-					title="View newer blocks"
-				>
-					← Newer
-				</button>
-				<button
-					onClick={goToOlderBlocks}
-					disabled={!canGoOlder}
-					className="pagination-btn"
-					title="View older blocks"
-				>
-					Older →
-				</button>
-			</div>
-		</div>
-	);
-}
diff --git a/src/components/pages/Chain.tsx b/src/components/pages/Chain.tsx
deleted file mode 100644
index 272d8f4..0000000
--- a/src/components/pages/Chain.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useParams } from "react-router-dom";
-import { useDataService } from "../../hooks/useDataService";
-import { useEffect, useState } from "react";
-import SearchBox from "../common/SearchBox";
-import NetworkStatsDisplay from "../common/NetworkStatsDisplay";
-import Loader from "../common/Loader";
-import type { NetworkStats, DataWithMetadata } from "../../types";
-import { useProviderSelection } from "../../hooks/useProviderSelection";
-import { useSelectedData } from "../../hooks/useSelectedData";
-
-export default function Chain() {
-	const { chainId } = useParams<{ chainId?: string }>();
-	const numericChainId = Number(chainId) || 1;
-	const dataService = useDataService(numericChainId);
-	const [networkStatsResult, setNetworkStatsResult] =
-		useState<DataWithMetadata<NetworkStats> | null>(null);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-
-	// Provider selection state
-	const [selectedProvider, setSelectedProvider] = useProviderSelection(
-		`networkStats_${numericChainId}`,
-	);
-
-	// Extract actual network stats based on selected provider
-	const networkStats = useSelectedData(networkStatsResult, selectedProvider);
-
-	useEffect(() => {
-		if (!dataService) {
-			setLoading(false);
-			return;
-		}
-
-		setLoading(true);
-		setError(null);
-
-		dataService
-			.getNetworkStats()
-			.then((result) => {
-				setNetworkStatsResult(result);
-			})
-			.catch((err) => {
-				setError(err.message || "Failed to fetch network stats");
-			})
-			.finally(() => setLoading(false));
-	}, [dataService]);
-
-	return (
-		<div className="home-container">
-			<div className="home-content page-card">
-				<h1 className="home-title">OPENSCAN</h1>
-				<SearchBox />
-				{loading && <Loader text="Loading network stats..." />}
-				{error && <p className="error-text-center">Error: {error}</p>}
-				{networkStats && (
-					<NetworkStatsDisplay
-						networkStats={networkStats}
-						chainId={numericChainId}
-						metadata={networkStatsResult?.metadata}
-						selectedProvider={selectedProvider}
-						onProviderSelect={setSelectedProvider}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
diff --git a/src/components/pages/DevTools.test.ts b/src/components/pages/DevTools.test.ts
deleted file mode 100644
index e71c5fe..0000000
--- a/src/components/pages/DevTools.test.ts
+++ /dev/null
@@ -1,493 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import {
-	convertEthUnits,
-	parseInputValue,
-	computeKeccak,
-	stringToHex,
-	hexToString,
-	isValidAddress,
-	isValidHex,
-	isValidSignature,
-	detectMessageFormat,
-	parseSignatureComponents,
-	addressesMatch,
-} from '../../utils/devtools';
-
-describe('DevTools Utils', () => {
-	describe('convertEthUnits', () => {
-		it('should convert 1 ETH to all units', () => {
-			const result = convertEthUnits('1', 'eth');
-			expect(result).not.toBeNull();
-			expect(result!.eth).toBe('1');
-			expect(result!.gwei).toBe('1000000000');
-			expect(result!.wei).toBe('1000000000000000000');
-		});
-
-		it('should convert 1 gwei to all units', () => {
-			const result = convertEthUnits('1', 'gwei');
-			expect(result).not.toBeNull();
-			expect(result!.gwei).toBe('1');
-			expect(result!.wei).toBe('1000000000');
-			expect(result!.eth).toBe('0.000000001');
-		});
-
-		it('should return null for invalid input', () => {
-			const result = convertEthUnits('invalid', 'eth');
-			expect(result).toBeNull();
-		});
-	});
-
-	describe('parseInputValue', () => {
-		it('should parse string type', () => {
-			expect(parseInputValue('hello', 'string')).toBe('hello');
-		});
-
-		it('should parse uint256 as bigint', () => {
-			const result = parseInputValue('12345', 'uint256');
-			expect(result).toBe(BigInt(12345));
-		});
-
-		it('should parse bool true', () => {
-			expect(parseInputValue('true', 'bool')).toBe(true);
-			expect(parseInputValue('1', 'bool')).toBe(true);
-		});
-
-		it('should parse bool false', () => {
-			expect(parseInputValue('false', 'bool')).toBe(false);
-			expect(parseInputValue('0', 'bool')).toBe(false);
-		});
-
-		it('should add 0x prefix to address without it', () => {
-			const result = parseInputValue('d8dA6BF26964aF9D7eEd9e03E53415D37aA96045', 'address');
-			expect(result).toBe('0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045');
-		});
-
-		it('should keep 0x prefix for address that has it', () => {
-			const result = parseInputValue('0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045', 'address');
-			expect(result).toBe('0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045');
-		});
-
-		it('should throw for invalid address', () => {
-			expect(() => parseInputValue('invalid', 'address')).toThrow('Invalid address format');
-		});
-	});
-
-	describe('computeKeccak', () => {
-		it('should compute keccak256 for string input', () => {
-			const result = computeKeccak('hello', 'string');
-			expect(result.rawHash).toBeDefined();
-			expect(result.rawHash).toMatch(/^0x[a-f0-9]{64}$/i);
-		});
-
-		it('should return empty object for empty input', () => {
-			const result = computeKeccak('', 'string');
-			expect(result).toEqual({});
-		});
-
-		it('should detect function signature pattern', () => {
-			const result = computeKeccak('transfer(address,uint256)', 'string');
-			expect(result.isFunctionSignature).toBe(true);
-			expect(result.functionSelector).toBeDefined();
-			expect(result.functionSelector).toMatch(/^0x[a-f0-9]{8}$/i);
-		});
-
-		it('should not detect function signature for regular string', () => {
-			const result = computeKeccak('hello world', 'string');
-			expect(result.isFunctionSignature).toBe(false);
-			expect(result.functionSelector).toBeNull();
-		});
-
-		it('should compute correct transfer function selector', () => {
-			// transfer(address,uint256) = 0xa9059cbb
-			const result = computeKeccak('transfer(address,uint256)', 'string');
-			expect(result.functionSelector).toBe('0xa9059cbb');
-		});
-	});
-
-	describe('stringToHex', () => {
-		it('should convert string to hex', () => {
-			expect(stringToHex('hello')).toBe('0x68656c6c6f');
-		});
-
-		it('should return hex unchanged if already hex', () => {
-			expect(stringToHex('0xabcdef')).toBe('0xabcdef');
-		});
-	});
-
-	describe('hexToString', () => {
-		it('should convert hex to string', () => {
-			expect(hexToString('0x68656c6c6f')).toBe('hello');
-		});
-
-		it('should throw for invalid hex format', () => {
-			expect(() => hexToString('invalid')).toThrow('Invalid hex format');
-		});
-	});
-
-	describe('isValidAddress', () => {
-		it('should return true for valid address', () => {
-			expect(isValidAddress('0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045')).toBe(true);
-		});
-
-		it('should return false for address without 0x', () => {
-			expect(isValidAddress('d8dA6BF26964aF9D7eEd9e03E53415D37aA96045')).toBe(false);
-		});
-
-		it('should return false for too short address', () => {
-			expect(isValidAddress('0xd8dA6BF')).toBe(false);
-		});
-
-		it('should return false for invalid characters', () => {
-			expect(isValidAddress('0xZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ')).toBe(false);
-		});
-	});
-
-	describe('isValidHex', () => {
-		it('should return true for valid hex', () => {
-			expect(isValidHex('0xabcdef123')).toBe(true);
-		});
-
-		it('should return true for empty hex', () => {
-			expect(isValidHex('0x')).toBe(true);
-		});
-
-		it('should return false for hex without 0x', () => {
-			expect(isValidHex('abcdef')).toBe(false);
-		});
-
-		it('should return false for invalid characters', () => {
-			expect(isValidHex('0xghijkl')).toBe(false);
-		});
-	});
-
-	// ================================================
-	// Signature Section Tests
-	// ================================================
-
-	// Test data from real signatures
-	const TEST_ADDRESS = '0x8ba1f109551bD432803012645Ac136ddd64DBA72';
-
-	// Test case 1: Simple string message (eth_sign style)
-	const SIMPLE_MESSAGE = 'Hello Augusto!';
-	const SIMPLE_MESSAGE_HASH = '0xccad321f97da4a306ba3a0a5bb26487d32f821a3a32bda39d4d8362c59811cb8';
-	const SIMPLE_SIGNATURE = '0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd73254f82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d81c';
-	const SIMPLE_SIG_R = '0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd7325';
-	const SIMPLE_SIG_S = '0x4f82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d8';
-	const SIMPLE_SIG_V = 28; // 0x1c
-
-	// Test case 2: Raw hex hash signature
-	const RAW_HASH = '0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
-	const RAW_HASH_SIGNATURE = '0x5d8bd006953f0e4e24843f6d70ac7100dfc272afbb7c6baedbcd8beeb7fdb94902d539f30fcb46a1ec63c6fdb8f9f51a9af1c2a01f8aaa1ed9f1a5c32f7b54fc1c';
-
-	// Test case 3: EIP-191 arbitrary data (0x45 version)
-	const EIP191_MESSAGE = '0x457468657265756d2d4c32';
-	const EIP191_SIGNATURE = '0x80c65f13df0840455fe9194c7a8d17dfb2d9696dbb669f53b06ba7f3a8888f0b51612b97d37b5226f0a4dc7dcfe5e8ce7f6618c0a5b75e56200de6f0d773f98c1b';
-
-	// Test case 4: EIP-712 Typed Data
-	const EIP712_DATA = {
-		domain: {
-			name: 'ExplorerDevtools',
-			version: '1',
-			chainId: 1,
-			verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC'
-		},
-		types: {
-			Person: [
-				{ name: 'name', type: 'string' },
-				{ name: 'wallet', type: 'address' }
-			],
-			Mail: [
-				{ name: 'from', type: 'Person' },
-				{ name: 'to', type: 'Person' },
-				{ name: 'contents', type: 'string' }
-			]
-		},
-		primaryType: 'Mail',
-		message: {
-			from: {
-				name: 'Vikingo',
-				wallet: '0x8ba1f109551bd432803012645ac136ddd64dba72'
-			},
-			to: {
-				name: 'Augusto',
-				wallet: '0x000000000000000000000000000000000000dEaD'
-			},
-			contents: 'Testing signatures'
-		}
-	};
-	const EIP712_HASH = '0xe661c65b3febe03dcdee58850110f8c763c42e87d9dbd8d6fdfed142e7ba46f3';
-	const EIP712_SIGNATURE = '0x2d480fdcd216ca933662705a13a539a8f979b29d69ee83a92389db8dd9e7f36a0f1dca546b14b8af72cbb02ca81237e9474413f6506c792da060e9981373bd051c';
-
-	// Test case 5: EIP-191 Personal Sign with UTF-8 emoji
-	const EMOJI_MESSAGE = '🔥 Test message for Augusto 🔥';
-	const EMOJI_SIGNATURE = '0x06f6fd97a02e3b4811a53f17ef449f7d0be7ed96775847c63742aede1ac6b97875512c66af08b8e8dfa38f9a0eed3c28ba632a2c00c2522dbf316efee375d3161b';
-
-	describe('isValidSignature', () => {
-		it('should recognize 65-byte standard signature', () => {
-			const result = isValidSignature(SIMPLE_SIGNATURE);
-			expect(result.valid).toBe(true);
-			expect(result.length).toBe(65);
-			expect(result.format).toBe('Standard (65 bytes)');
-		});
-
-		it('should recognize all test signatures as valid', () => {
-			expect(isValidSignature(SIMPLE_SIGNATURE).valid).toBe(true);
-			expect(isValidSignature(RAW_HASH_SIGNATURE).valid).toBe(true);
-			expect(isValidSignature(EIP191_SIGNATURE).valid).toBe(true);
-			expect(isValidSignature(EIP712_SIGNATURE).valid).toBe(true);
-			expect(isValidSignature(EMOJI_SIGNATURE).valid).toBe(true);
-		});
-
-		it('should recognize 64-byte EIP-2098 compact signature', () => {
-			// 64 bytes = 128 hex chars + 0x prefix
-			const compactSig = '0x' + 'b'.repeat(128);
-			const result = isValidSignature(compactSig);
-			expect(result.valid).toBe(true);
-			expect(result.length).toBe(64);
-			expect(result.format).toBe('EIP-2098 Compact (64 bytes)');
-		});
-
-		it('should reject signature without 0x prefix', () => {
-			const sig = SIMPLE_SIGNATURE.slice(2);
-			const result = isValidSignature(sig);
-			expect(result.valid).toBe(false);
-		});
-
-		it('should reject signature with wrong length', () => {
-			const sig = '0x' + 'a'.repeat(100);
-			const result = isValidSignature(sig);
-			expect(result.valid).toBe(false);
-		});
-
-		it('should reject signature with invalid hex characters', () => {
-			const sig = '0x' + 'g'.repeat(130);
-			const result = isValidSignature(sig);
-			expect(result.valid).toBe(false);
-		});
-	});
-
-	describe('detectMessageFormat', () => {
-		it('should detect pre-hashed message (32 bytes hex)', () => {
-			expect(detectMessageFormat(RAW_HASH)).toBe('hash');
-			expect(detectMessageFormat(SIMPLE_MESSAGE_HASH)).toBe('hash');
-			expect(detectMessageFormat(EIP712_HASH)).toBe('hash');
-		});
-
-		it('should detect EIP-712 typed data', () => {
-			const eip712Json = JSON.stringify(EIP712_DATA);
-			expect(detectMessageFormat(eip712Json)).toBe('eip712');
-		});
-
-		it('should detect personal sign for plain text', () => {
-			expect(detectMessageFormat(SIMPLE_MESSAGE)).toBe('personal');
-			expect(detectMessageFormat(EMOJI_MESSAGE)).toBe('personal');
-		});
-
-		it('should detect personal sign for invalid JSON', () => {
-			expect(detectMessageFormat('{ invalid json')).toBe('personal');
-		});
-
-		it('should detect personal sign for JSON without EIP-712 fields', () => {
-			const json = JSON.stringify({ foo: 'bar' });
-			expect(detectMessageFormat(json)).toBe('personal');
-		});
-
-		it('should detect personal sign for hex that is not 32 bytes', () => {
-			expect(detectMessageFormat(EIP191_MESSAGE)).toBe('personal');
-		});
-	});
-
-	describe('parseSignatureComponents', () => {
-		it('should parse simple message signature correctly', () => {
-			const result = parseSignatureComponents(SIMPLE_SIGNATURE);
-			expect(result).not.toBeNull();
-			expect(result!.r).toBe(SIMPLE_SIG_R);
-			expect(result!.s).toBe(SIMPLE_SIG_S);
-			expect(result!.v).toBe(SIMPLE_SIG_V);
-			expect(result!.yParity).toBe(1); // v=28 means yParity=1
-		});
-
-		it('should parse raw hash signature correctly', () => {
-			const result = parseSignatureComponents(RAW_HASH_SIGNATURE);
-			expect(result).not.toBeNull();
-			expect(result!.r).toBe('0x5d8bd006953f0e4e24843f6d70ac7100dfc272afbb7c6baedbcd8beeb7fdb949');
-			expect(result!.s).toBe('0x02d539f30fcb46a1ec63c6fdb8f9f51a9af1c2a01f8aaa1ed9f1a5c32f7b54fc');
-			expect(result!.v).toBe(28);
-		});
-
-		it('should parse EIP-712 signature correctly', () => {
-			const result = parseSignatureComponents(EIP712_SIGNATURE);
-			expect(result).not.toBeNull();
-			expect(result!.r).toBe('0x2d480fdcd216ca933662705a13a539a8f979b29d69ee83a92389db8dd9e7f36a');
-			expect(result!.s).toBe('0x0f1dca546b14b8af72cbb02ca81237e9474413f6506c792da060e9981373bd05');
-			expect(result!.v).toBe(28);
-		});
-
-		it('should parse EIP-191 signature correctly', () => {
-			const result = parseSignatureComponents(EIP191_SIGNATURE);
-			expect(result).not.toBeNull();
-			expect(result!.v).toBe(27); // 0x1b
-			expect(result!.yParity).toBe(0);
-		});
-
-		it('should parse emoji message signature correctly', () => {
-			const result = parseSignatureComponents(EMOJI_SIGNATURE);
-			expect(result).not.toBeNull();
-			expect(result!.v).toBe(27); // 0x1b
-		});
-
-		it('should return null for invalid signature', () => {
-			expect(parseSignatureComponents('invalid')).toBeNull();
-			expect(parseSignatureComponents('0xabc')).toBeNull();
-		});
-	});
-
-	describe('addressesMatch', () => {
-		it('should match identical addresses', () => {
-			expect(addressesMatch(TEST_ADDRESS, TEST_ADDRESS)).toBe(true);
-		});
-
-		it('should match addresses with different case', () => {
-			const lowerCase = TEST_ADDRESS.toLowerCase();
-			const upperCase = TEST_ADDRESS.toUpperCase();
-			expect(addressesMatch(lowerCase, upperCase)).toBe(true);
-		});
-
-		it('should not match different addresses', () => {
-			expect(addressesMatch(TEST_ADDRESS, '0x1234567890123456789012345678901234567890')).toBe(false);
-		});
-
-		it('should return false for empty addresses', () => {
-			expect(addressesMatch('', TEST_ADDRESS)).toBe(false);
-			expect(addressesMatch(TEST_ADDRESS, '')).toBe(false);
-			expect(addressesMatch('', '')).toBe(false);
-		});
-	});
-
-	// ================================================
-	// Invalid Signature Tests
-	// ================================================
-
-	// Invalid test data
-	
-	// 1) ECDSA malleability - high-s value (s' = n - s)
-	const MALLEATED_SIGNATURE = '0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd7325b07d1d9596e8871bb3dc4253d5f43675859f1f9097ad80b13b6538f13814d9621c';
-	
-	// 2) Invalid recovery id (v = 0x35, should be 27, 28, 0, or 1)
-	const BAD_V_SIGNATURE = '0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd73254f82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d835';
-	
-	// 3) Signature that recovers to wrong address
-	const WRONG_SIGNER_SIGNATURE = '0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa1b';
-	
-	// 4) Incomplete / malformed signatures
-	const TOO_SHORT_SIGNATURE = '0x1234abcd';
-	const MISSING_S_SIGNATURE = '0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd7325'; // only 32 bytes (r)
-	const MISSING_V_SIGNATURE = '0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd73254f82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d8'; // only 64 bytes (r + s)
-	const INVALID_HEX_SIGNATURE = '0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd7325ZZ82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d81c';
-	const EXTRA_BYTES_SIGNATURE = '0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd73254f82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d81cdeadbeef';
-
-	describe('isValidSignature - invalid cases', () => {
-		it('should still recognize malleated signature as structurally valid (65 bytes)', () => {
-			// Note: Malleability is a semantic issue, not a structural one
-			// The signature is still 65 bytes and valid hex
-			const result = isValidSignature(MALLEATED_SIGNATURE);
-			expect(result.valid).toBe(true);
-			expect(result.length).toBe(65);
-		});
-
-		it('should recognize signature with bad v as structurally valid', () => {
-			// Bad v is a semantic issue - the structure is still valid
-			const result = isValidSignature(BAD_V_SIGNATURE);
-			expect(result.valid).toBe(true);
-			expect(result.length).toBe(65);
-		});
-
-		it('should recognize wrong signer signature as structurally valid', () => {
-			// Wrong signer is a semantic issue - the structure is still valid
-			const result = isValidSignature(WRONG_SIGNER_SIGNATURE);
-			expect(result.valid).toBe(true);
-			expect(result.length).toBe(65);
-		});
-
-		it('should reject too short signature', () => {
-			const result = isValidSignature(TOO_SHORT_SIGNATURE);
-			expect(result.valid).toBe(false);
-			expect(result.length).toBe(4); // 8 hex chars = 4 bytes
-		});
-
-		it('should reject signature missing s (only 32 bytes)', () => {
-			const result = isValidSignature(MISSING_S_SIGNATURE);
-			expect(result.valid).toBe(false);
-			expect(result.length).toBe(32);
-		});
-
-		it('should recognize 64-byte signature as EIP-2098 compact (missing v case)', () => {
-			// 64 bytes is valid as EIP-2098 compact format
-			const result = isValidSignature(MISSING_V_SIGNATURE);
-			expect(result.valid).toBe(true);
-			expect(result.length).toBe(64);
-			expect(result.format).toBe('EIP-2098 Compact (64 bytes)');
-		});
-
-		it('should reject signature with invalid hex characters', () => {
-			const result = isValidSignature(INVALID_HEX_SIGNATURE);
-			expect(result.valid).toBe(false);
-		});
-
-		it('should reject signature with extra bytes', () => {
-			const result = isValidSignature(EXTRA_BYTES_SIGNATURE);
-			expect(result.valid).toBe(false);
-			expect(result.length).toBe(69); // 65 + 4 extra bytes
-		});
-	});
-
-	describe('parseSignatureComponents - invalid cases', () => {
-		it('should parse malleated signature components (high-s)', () => {
-			const result = parseSignatureComponents(MALLEATED_SIGNATURE);
-			expect(result).not.toBeNull();
-			// Same r as original
-			expect(result!.r).toBe('0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd7325');
-			// Different s (high-s value)
-			expect(result!.s).toBe('0xb07d1d9596e8871bb3dc4253d5f43675859f1f9097ad80b13b6538f13814d962');
-			expect(result!.v).toBe(28);
-		});
-
-		it('should parse signature with bad v (returns raw v value)', () => {
-			const result = parseSignatureComponents(BAD_V_SIGNATURE);
-			expect(result).not.toBeNull();
-			// v = 0x35 = 53, which is > 27 so stays as-is
-			expect(result!.v).toBe(53);
-		});
-
-		it('should return null for too short signature', () => {
-			expect(parseSignatureComponents(TOO_SHORT_SIGNATURE)).toBeNull();
-		});
-
-		it('should return null for signature missing s', () => {
-			expect(parseSignatureComponents(MISSING_S_SIGNATURE)).toBeNull();
-		});
-
-		it('should parse 64-byte signature as EIP-2098 compact', () => {
-			const result = parseSignatureComponents(MISSING_V_SIGNATURE);
-			expect(result).not.toBeNull();
-			// In EIP-2098, yParity is encoded in high bit of s
-		});
-
-		it('should return null for signature with invalid hex', () => {
-			expect(parseSignatureComponents(INVALID_HEX_SIGNATURE)).toBeNull();
-		});
-
-		it('should return null for signature with extra bytes', () => {
-			expect(parseSignatureComponents(EXTRA_BYTES_SIGNATURE)).toBeNull();
-		});
-	});
-
-	describe('addressesMatch - wrong signer detection', () => {
-		it('should not match when signature recovers to wrong address', () => {
-			// The random signature would recover to some address, but not TEST_ADDRESS
-			// This tests the concept - in real usage you'd recover the address first
-			const randomRecoveredAddress = '0x1111111111111111111111111111111111111111';
-			expect(addressesMatch(randomRecoveredAddress, TEST_ADDRESS)).toBe(false);
-		});
-	});
-});
diff --git a/src/components/pages/DevTools.tsx b/src/components/pages/DevTools.tsx
deleted file mode 100644
index 8e3c853..0000000
--- a/src/components/pages/DevTools.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import TransactionsSection from '../devtools/TransactionsSection';
-import SignaturesSection from '../devtools/SignaturesSection';
-import UtilsSection from '../devtools/UtilsSection';
-import ContractsSection from '../devtools/ContractsSection';
-import DevelopmentSection from '../devtools/DevelopmentSection';
-import '../../styles/devtools.css';
-
-const DevTools: React.FC = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const searchParams = new URLSearchParams(location.search);
-  const sectionParam = searchParams.get('section') || 'transactions';
-  const [activeSection, setActiveSection] = useState(sectionParam);
-
-  useEffect(() => {
-    const newSection = searchParams.get('section') || 'transactions';
-    const validSections = ['transactions', 'signatures', 'utils', 'contracts', 'development'];
-    setActiveSection(validSections.includes(newSection) ? newSection : 'transactions');
-  }, [location.search]);
-
-  const tabs = [
-    { name: 'transactions', label: 'Transactions' },
-    { name: 'signatures', label: 'Signatures' },
-    { name: 'utils', label: 'Utils' },
-    { name: 'contracts', label: 'Contracts' },
-    { name: 'development', label: 'Development' },
-  ];
-
-  const handleTabClick = (tabName: string) => {
-    navigate(`/devtools?section=${tabName}`);
-    setActiveSection(tabName);
-  };
-
-  return (
-    <div className="page">
-      <div className="devtools-content-wrapper">
-				<div className="devtools-tabs">
-					{tabs.map((tab) => (
-						<button
-							key={tab.name}
-							onClick={() => handleTabClick(tab.name)}
-							className={`devtools-tab ${activeSection === tab.name ? 'active' : ''}`}
-						>
-							{tab.label}
-						</button>
-					))}
-				</div>
-
-        <div className="devtools-content">
-          {activeSection === 'transactions' && <TransactionsSection />}
-          {activeSection === 'signatures' && <SignaturesSection />}
-          {activeSection === 'utils' && <UtilsSection />}
-          {activeSection === 'contracts' && <ContractsSection />}
-          {activeSection === 'development' && <DevelopmentSection />}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DevTools;
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
deleted file mode 100644
index e6496a7..0000000
--- a/src/components/pages/Home.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Link } from "react-router-dom";
-import { useState, useMemo } from "react";
-import { getEnabledNetworks, type NetworkConfig } from "../../config/networks";
-import NetworkIcon from "../common/NetworkIcon";
-
-interface NetworkCardProps {
-	network: NetworkConfig;
-}
-
-const NetworkCard: React.FC<NetworkCardProps> = ({ network }) => {
-	const [isHovered, setIsHovered] = useState(false);
-
-	return (
-		<Link
-			to={`/${network.chainId}`}
-			className="network-card-link"
-			onMouseEnter={() => setIsHovered(true)}
-			onMouseLeave={() => setIsHovered(false)}
-		>
-			<div
-				className="network-card"
-				style={{
-					border: `2px solid ${isHovered ? network.color : "rgba(255, 255, 255, 0.1)"}`,
-					transform: isHovered ? "translateY(-4px)" : "translateY(0)",
-					boxShadow: isHovered
-						? `0 8px 32px ${network.color}40`
-						: "0 4px 16px rgba(0, 0, 0, 0.2)",
-				}}
-			>
-				<div className="network-card-header">
-					<div
-						className="network-card-icon"
-						style={{
-							background: `${network.color}20`,
-						}}
-					>
-						<NetworkIcon network={network} size={32} />
-					</div>
-					<div className="network-card-info">
-						<h3 className="network-card-title">{network.name}</h3>
-						<div className="network-card-chain-id">
-							Chain ID: {network.chainId}
-						</div>
-					</div>
-				</div>
-				<p className="network-card-description">{network.description}</p>
-			</div>
-		</Link>
-	);
-};
-
-export default function Home() {
-	const enabledNetworks = useMemo(() => {
-		const allNetworks = getEnabledNetworks();
-		const environment = process.env.REACT_APP_ENVIRONMENT;
-		const isDevelopment = environment === "development";
-		const envNetworks = process.env.REACT_APP_OPENSCAN_NETWORKS;
-
-		// Check if Hardhat (31337) is explicitly enabled in REACT_APP_OPENSCAN_NETWORKS
-		const hardhatChainId = 31337;
-		const isHardhatExplicitlyEnabled = envNetworks &&
-			envNetworks.split(",").map(id => parseInt(id.trim(), 10)).includes(hardhatChainId);
-
-		// Filter out Hardhat from home page if not in development and not explicitly enabled
-		if (!isDevelopment && !isHardhatExplicitlyEnabled) {
-			return allNetworks.filter((n) => n.chainId !== hardhatChainId);
-		}
-
-		return allNetworks;
-	}, []);
-
-	return (
-		<div className="home-container">
-			<div className="home-content page-card">
-				<h1 className="home-title">OPENSCAN</h1>
-				<p className="subtitle">Select a blockchain network to explore</p>
-
-				<div className="network-grid">
-					{enabledNetworks.map((network) => (
-						<NetworkCard key={network.chainId} network={network} />
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/src/components/pages/Mempool.tsx b/src/components/pages/Mempool.tsx
deleted file mode 100644
index c02f7cf..0000000
--- a/src/components/pages/Mempool.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useParams } from "react-router-dom";
-
-export default function Mempool() {
-	const { chainId, filter } = useParams<{
-		chainId?: string;
-		filter?: string;
-	}>();
-
-	return (
-		<div>
-			<h1>Mempool</h1>
-			<p>chainId: {chainId ?? "none"}</p>
-			<p>filter: {filter ?? "none"}</p>
-		</div>
-	);
-}
diff --git a/src/components/pages/Settings.tsx b/src/components/pages/Settings.tsx
deleted file mode 100644
index a958301..0000000
--- a/src/components/pages/Settings.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import React, { useContext, useState, useMemo } from "react";
-import { AppContext } from "../../context/AppContext";
-import { useSettings } from "../../context/SettingsContext";
-import { getEnabledNetworks } from "../../config/networks";
-import type { RpcUrlsContextType, RPCUrls } from "../../types";
-
-const Settings: React.FC = () => {
-	const { rpcUrls, setRpcUrls } = useContext(AppContext);
-	const { settings, updateSettings } = useSettings();
-	const [localRpc, setLocalRpc] = useState<Record<number, string | RPCUrls>>({
-		...rpcUrls,
-	});
-	const [saveSuccess, setSaveSuccess] = useState(false);
-
-	const updateField = (key: keyof RpcUrlsContextType, value: string) => {
-		setLocalRpc((prev) => ({ ...prev, [key]: value }));
-	};
-
-	const save = () => {
-		// Convert comma-separated strings into arrays for each chainId
-		const parsed: RpcUrlsContextType = Object.keys(localRpc).reduce(
-			(acc, key) => {
-				const k = Number(key) as unknown as keyof RpcUrlsContextType;
-				const val = (localRpc as any)[k];
-				if (typeof val === "string") {
-					const arr = val
-						.split(",")
-						.map((s) => s.trim())
-						.filter(Boolean); // Previene errores por multiples comas (,,,)
-					(acc as any)[k] = arr;
-				} else {
-					(acc as any)[k] = val;
-				}
-				return acc;
-			},
-			{} as RpcUrlsContextType,
-		);
-
-		setRpcUrls(parsed);
-		setSaveSuccess(true);
-		setTimeout(() => setSaveSuccess(false), 3000);
-	};
-
-	// Get enabled networks from config
-	const chainConfigs = useMemo(() => {
-		return getEnabledNetworks().map((network) => ({
-			id: network.chainId,
-			name: network.name,
-		}));
-	}, []);
-
-	return (
-		<div className="container-wide settings-container">
-			{/* Success Message */}
-			{saveSuccess && (
-				<div className="settings-success-message">
-					✓ Settings saved successfully!
-				</div>
-			)}
-
-			{/* Appearance Settings Section */}
-			<div className="settings-section no-margin">
-				<h2 className="settings-section-title">🎨 Appearance</h2>
-				<p className="settings-section-description">
-					Customize the visual appearance of the application.
-				</p>
-
-				<div className="settings-item">
-					<div>
-						<div className="settings-item-label">Funny Background Blocks</div>
-						<div className="settings-item-description">
-							Show animated isometric blocks in the background
-						</div>
-					</div>
-					<label className="settings-toggle">
-						<input
-							type="checkbox"
-							checked={settings.showBackgroundBlocks ?? true}
-							onChange={(e) =>
-								updateSettings({ showBackgroundBlocks: e.target.checked })
-							}
-							className="settings-toggle-input"
-						/>
-						<span
-							className={`settings-toggle-slider ${settings.showBackgroundBlocks ? "active" : ""}`}
-						>
-							<span
-								className={`settings-toggle-knob ${settings.showBackgroundBlocks ? "active" : ""}`}
-							/>
-						</span>
-					</label>
-				</div>
-			</div>
-
-			{/* RPC Strategy Section */}
-			<div className="settings-section">
-				<h2 className="settings-section-title">⚡ RPC Request Strategy</h2>
-				<p className="settings-section-description">
-					Choose how requests are sent to multiple RPC endpoints.
-				</p>
-
-				<div className="settings-item">
-					<div>
-						<div className="settings-item-label">Request Strategy</div>
-						<div className="settings-item-description">
-							<strong>Fallback:</strong> Try endpoints one by one until one
-							succeeds (reliable, slower).
-							<br />
-							<strong>Parallel:</strong> Query all endpoints simultaneously and
-							use the first successful response (faster, more bandwidth).
-						</div>
-					</div>
-					<select
-						value={settings.rpcStrategy || "fallback"}
-						onChange={(e) =>
-							updateSettings({
-								rpcStrategy: e.target.value as "fallback" | "parallel",
-							})
-						}
-						className="settings-select"
-					>
-						<option value="fallback">Fallback (Default)</option>
-						<option value="parallel">Parallel</option>
-					</select>
-				</div>
-			</div>
-
-			{/* RPC Configuration Section */}
-			<div className="settings-section">
-				<h2 className="settings-section-title">🔗 RPC Endpoints</h2>
-				<p className="settings-section-description">
-					Enter comma-separated RPC URLs for each network. Multiple URLs provide
-					fallback support.
-				</p>
-
-				<div className="flex-column settings-chain-list">
-					{chainConfigs.map((chain) => (
-						<div key={chain.id} className="settings-chain-item">
-							<label className="flex-column settings-chain-label">
-								<div className="settings-chain-name">
-									{chain.name}
-									<span className="settings-chain-id-badge">
-										Chain ID: {chain.id}
-									</span>
-								</div>
-								<input
-									className="settings-rpc-input"
-									value={localRpc[chain.id]}
-									onChange={(e) =>
-										updateField(
-											chain.id as keyof RpcUrlsContextType,
-											e.target.value,
-										)
-									}
-									placeholder="https://eth-mainnet.g.alchemy.com/v2/YOUR-API-KEY"
-								/>
-
-								{/* Help text for localhost network */}
-								{chain.id === 31337 && (
-									<div className="settings-help-text">
-										💡 Need to access your local network remotely?{" "}
-										<a
-											href="https://dashboard.ngrok.com/get-started/setup"
-											target="_blank"
-											rel="noopener noreferrer"
-											className="settings-link"
-										>
-											Learn how to set up a tunnel with ngrok
-										</a>
-									</div>
-								)}
-
-								{/* Display current RPC list as tags */}
-								{rpcUrls[chain.id as keyof RpcUrlsContextType] &&
-									Array.isArray(
-										rpcUrls[chain.id as keyof RpcUrlsContextType],
-									) &&
-									(rpcUrls[chain.id as keyof RpcUrlsContextType] as string[])
-										.length > 0 && (
-										<div className="flex-column settings-rpc-list">
-											<span className="settings-rpc-list-label">
-												Current RPCs:
-											</span>
-											<div className="flex-start settings-rpc-tags">
-												{(
-													rpcUrls[
-														chain.id as keyof RpcUrlsContextType
-													] as string[]
-												).map((url, idx) => (
-													<div key={idx} className="settings-rpc-tag">
-														<span className="settings-rpc-tag-index">
-															{idx + 1}
-														</span>
-														<span className="settings-rpc-tag-url">{url}</span>
-													</div>
-												))}
-											</div>
-										</div>
-									)}
-							</label>
-						</div>
-					))}
-
-					<button onClick={save} className="settings-save-button">
-						💾 Save Configuration
-					</button>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default Settings;
diff --git a/src/components/pages/Tx.tsx b/src/components/pages/Tx.tsx
deleted file mode 100644
index e823139..0000000
--- a/src/components/pages/Tx.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useParams } from "react-router-dom";
-import { useDataService } from "../../hooks/useDataService";
-import { useEffect, useState } from "react";
-import type { Transaction, DataWithMetadata } from "../../types";
-import TransactionDisplay from "../common/TransactionDisplay";
-import Loader from "../common/Loader";
-import { useProviderSelection } from "../../hooks/useProviderSelection";
-import { useSelectedData } from "../../hooks/useSelectedData";
-
-export default function Tx() {
-	const { chainId, filter } = useParams<{
-		chainId?: string;
-		filter?: string;
-	}>();
-
-	const txHash = filter;
-	const numericChainId = Number(chainId) || 1;
-
-	const dataService = useDataService(numericChainId);
-	const [transactionResult, setTransactionResult] =
-		useState<DataWithMetadata<Transaction> | null>(null);
-	const [currentBlockNumber, setCurrentBlockNumber] = useState<number | null>(
-		null,
-	);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-
-	// Provider selection state
-	const [selectedProvider, setSelectedProvider] = useProviderSelection(
-		`tx_${numericChainId}_${txHash}`,
-	);
-
-	// Extract actual transaction data based on selected provider
-	const transaction = useSelectedData(transactionResult, selectedProvider);
-
-	useEffect(() => {
-		if (!dataService || !txHash) {
-			setLoading(false);
-			return;
-		}
-
-		console.log("Fetching transaction:", txHash, "for chain:", numericChainId);
-		setLoading(true);
-		setError(null);
-
-		Promise.all([
-			dataService.getTransaction(txHash),
-			dataService.getLatestBlockNumber(),
-		])
-			.then(([result, latestBlock]) => {
-				console.log("Fetched transaction:", result);
-				console.log("Latest block number:", latestBlock);
-				setTransactionResult(result);
-				setCurrentBlockNumber(latestBlock);
-			})
-			.catch((err) => {
-				console.error("Error fetching transaction:", err);
-				setError(err.message || "Failed to fetch transaction");
-			})
-			.finally(() => setLoading(false));
-	}, [dataService, txHash, numericChainId]);
-
-	if (loading) {
-		return (
-			<div className="container-wide container-padded">
-				<div className="block-display-card">
-					<div className="block-display-header">
-						<span className="block-label">Transaction</span>
-						<span className="tx-mono header-subtitle">{txHash}</span>
-					</div>
-					<div className="card-content-loading">
-						<Loader text="Loading transaction..." />
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<div className="container-wide container-padded">
-				<div className="block-display-card">
-					<div className="block-display-header">
-						<span className="block-label">Transaction</span>
-						<span className="tx-mono header-subtitle">{txHash}</span>
-					</div>
-					<div className="card-content">
-						<p className="error-text margin-0">Error: {error}</p>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="container-wide container-padded">
-			{transaction ? (
-				<TransactionDisplay
-					transaction={transaction}
-					chainId={chainId}
-					currentBlockNumber={currentBlockNumber || undefined}
-					dataService={dataService}
-					metadata={transactionResult?.metadata}
-					selectedProvider={selectedProvider}
-					onProviderSelect={setSelectedProvider}
-				/>
-			) : (
-				<div className="block-display-card">
-					<div className="block-display-header">
-						<span className="block-label">Transaction</span>
-					</div>
-					<div className="card-content">
-						<p className="text-muted margin-0">Transaction not found</p>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
diff --git a/src/components/pages/Txs.tsx b/src/components/pages/Txs.tsx
deleted file mode 100644
index 585b6e6..0000000
--- a/src/components/pages/Txs.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-import {
-	useParams,
-	Link,
-	useSearchParams,
-	useNavigate,
-} from "react-router-dom";
-import { useDataService } from "../../hooks/useDataService";
-import { useEffect, useState } from "react";
-import { Transaction } from "../../types";
-import Loader from "../common/Loader";
-
-const BLOCKS_PER_PAGE = 10;
-
-export default function Txs() {
-	const { chainId } = useParams<{ chainId?: string }>();
-	const [searchParams] = useSearchParams();
-	const navigate = useNavigate();
-	const numericChainId = Number(chainId) || 1;
-	const dataService = useDataService(numericChainId);
-	const [transactions, setTransactions] = useState<
-		Array<Transaction & { blockNumber: string }>
-	>([]);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-	const [latestBlockNumber, setLatestBlockNumber] = useState<number | null>(
-		null,
-	);
-	const [blockRange, setBlockRange] = useState<{
-		from: number;
-		to: number;
-	} | null>(null);
-
-	// Get fromBlock from URL params, default to null (latest)
-	const fromBlockParam = searchParams.get("fromBlock");
-	const fromBlock = fromBlockParam ? Number(fromBlockParam) : null;
-
-	useEffect(() => {
-		if (!dataService) {
-			setLoading(false);
-			return;
-		}
-
-		const fetchTransactions = async () => {
-			setLoading(true);
-			setError(null);
-
-			try {
-				// Get the latest block number first
-				const latestBlock = await dataService.getLatestBlockNumber();
-				setLatestBlockNumber(latestBlock);
-
-				// Determine starting block
-				const startBlock = fromBlock !== null ? fromBlock : latestBlock;
-
-				// Calculate block range
-				const endBlock = Math.max(startBlock - BLOCKS_PER_PAGE + 1, 0);
-				setBlockRange({ from: endBlock, to: startBlock });
-
-				// Fetch transactions from block range
-				const fetchedTransactions =
-					await dataService.getTransactionsFromBlockRange(
-						startBlock,
-						BLOCKS_PER_PAGE,
-					);
-
-				console.log("Fetched transactions:", fetchedTransactions);
-				setTransactions(fetchedTransactions);
-			} catch (err: any) {
-				console.error("Error fetching transactions:", err);
-				setError(err.message || "Failed to fetch transactions");
-			} finally {
-				setLoading(false);
-			}
-		};
-
-		fetchTransactions();
-	}, [dataService, numericChainId, fromBlock]);
-
-	const truncate = (str: string, start = 10, end = 8) => {
-		if (!str) return "";
-		if (str.length <= start + end) return str;
-		return `${str.slice(0, start)}...${str.slice(-end)}`;
-	};
-
-	const formatValue = (value: string) => {
-		try {
-			const eth = Number(value) / 1e18;
-			return `${eth.toFixed(6)} ETH`;
-		} catch (e) {
-			return value;
-		}
-	};
-
-	const formatGasPrice = (gasPrice: string) => {
-		try {
-			const gwei = Number(gasPrice) / 1e9;
-			return `${gwei.toFixed(2)} Gwei`;
-		} catch (e) {
-			return gasPrice;
-		}
-	};
-
-	// Navigation handlers
-	const goToNewerBlocks = () => {
-		if (!blockRange || latestBlockNumber === null) return;
-		const newFromBlock = Math.min(
-			blockRange.to + BLOCKS_PER_PAGE,
-			latestBlockNumber,
-		);
-
-		if (newFromBlock >= latestBlockNumber) {
-			// Go to latest (remove fromBlock param)
-			navigate(`/${chainId}/txs`);
-		} else {
-			navigate(`/${chainId}/txs?fromBlock=${newFromBlock}`);
-		}
-	};
-
-	const goToOlderBlocks = () => {
-		if (!blockRange) return;
-		const newFromBlock = blockRange.from - 1;
-
-		if (newFromBlock >= 0) {
-			navigate(`/${chainId}/txs?fromBlock=${newFromBlock}`);
-		}
-	};
-
-	const goToLatest = () => {
-		navigate(`/${chainId}/txs`);
-	};
-
-	// Determine if we can navigate
-	const canGoNewer =
-		fromBlock !== null &&
-		latestBlockNumber !== null &&
-		fromBlock < latestBlockNumber;
-	const canGoOlder = blockRange !== null && blockRange.from > 0;
-	const isAtLatest =
-		fromBlock === null ||
-		(latestBlockNumber !== null && fromBlock >= latestBlockNumber);
-
-	if (loading) {
-		return (
-			<div className="container-wide page-container-padded text-center page-card">
-				<h1 className="page-title-small">Latest Transactions</h1>
-				<Loader text="Loading transactions..." />
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<div className="container-wide page-container-padded text-center page-card">
-				<h1 className="page-title-small">Latest Transactions</h1>
-				<p className="error-text">Error: {error}</p>
-			</div>
-		);
-	}
-
-	const Pagination = () => {
-		// Pagination
-		return (
-			<div className="pagination-container no-margin-top">
-				<button
-					onClick={goToLatest}
-					disabled={isAtLatest}
-					className="pagination-btn"
-					title="Go to latest transactions"
-				>
-					Latest
-				</button>
-				<button
-					onClick={goToNewerBlocks}
-					disabled={!canGoNewer}
-					className="pagination-btn"
-					title="View newer transactions"
-				>
-					← Newer
-				</button>
-				<button
-					onClick={goToOlderBlocks}
-					disabled={!canGoOlder}
-					className="pagination-btn"
-					title="View older transactions"
-				>
-					Older →
-				</button>
-			</div>
-		);
-	};
-
-	return (
-		<div className="container-wide page-container-padded text-center page-card">
-			<h1 className="page-title-small">Latest Transactions</h1>
-			<p className="page-subtitle-text no-margin-bottom">
-				{isAtLatest
-					? `Showing ${transactions.length} transactions from the last ${BLOCKS_PER_PAGE} blocks`
-					: blockRange
-						? `Showing ${transactions.length} transactions from blocks ${blockRange.from.toLocaleString()} - ${blockRange.to.toLocaleString()}`
-						: `Showing ${transactions.length} transactions`}
-			</p>
-
-			<Pagination />
-
-			{transactions.length === 0 ? (
-				<p className="table-cell-muted">
-					No transactions found in the selected block range
-				</p>
-			) : (
-				<div className="table-wrapper">
-					<table className="dash-table">
-						<thead>
-							<tr>
-								<th>Tx Hash</th>
-								<th>Block</th>
-								<th>From</th>
-								<th>To</th>
-								<th>Value</th>
-								<th>Gas Price</th>
-								<th>Gas</th>
-							</tr>
-						</thead>
-						<tbody>
-							{transactions.map((transaction) => (
-								<tr key={transaction.hash}>
-									<td>
-										<Link
-											to={`/${chainId}/tx/${transaction.hash}`}
-											className="table-cell-hash"
-											title={transaction.hash}
-										>
-											{truncate(transaction.hash)}
-										</Link>
-									</td>
-									<td>
-										<Link
-											to={`/${chainId}/block/${transaction.blockNumber}`}
-											className="table-cell-value"
-										>
-											{transaction.blockNumber}
-										</Link>
-									</td>
-									<td className="table-cell-mono" title={transaction.from}>
-										<Link
-											to={`/${chainId}/address/${transaction.from}`}
-											className="table-cell-address"
-										>
-											{truncate(transaction.from)}
-										</Link>
-									</td>
-									<td className="table-cell-mono" title={transaction.to}>
-										{transaction.to ? (
-											<Link
-												to={`/${chainId}/address/${transaction.to}`}
-												className="table-cell-address"
-											>
-												{truncate(transaction.to)}
-											</Link>
-										) : (
-											<span className="table-cell-italic">
-												Contract Creation
-											</span>
-										)}
-									</td>
-									<td className="table-cell-value">
-										{formatValue(transaction.value)}
-									</td>
-									<td className="table-cell-muted">
-										{formatGasPrice(transaction.gasPrice)}
-									</td>
-									<td className="table-cell-muted">
-										{Number(transaction.gas).toLocaleString()}
-									</td>
-								</tr>
-							))}
-						</tbody>
-					</table>
-				</div>
-			)}
-
-			<Pagination />
-		</div>
-	);
-}
diff --git a/src/components/pages/about/index.tsx b/src/components/pages/about/index.tsx
new file mode 100644
index 0000000..8beb6ad
--- /dev/null
+++ b/src/components/pages/about/index.tsx
@@ -0,0 +1,213 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { getEnabledNetworks } from "../../../config/networks";
+import NetworkIcon from "../../common/NetworkIcon";
+
+interface GitHubStats {
+  commits: number | null;
+  contributors: number | null;
+}
+
+const About: React.FC = () => {
+  const appVersion = process.env.REACT_APP_VERSION || "0.1.0";
+  const commitHash = process.env.REACT_APP_COMMIT_HASH || "development";
+  const formattedCommitHash = commitHash.length > 7 ? commitHash.substring(0, 7) : commitHash;
+
+  const [githubStats, setGithubStats] = useState<GitHubStats>({
+    commits: null,
+    contributors: null,
+  });
+
+  useEffect(() => {
+    const fetchGitHubStats = async () => {
+      try {
+        const contributorsRes = await fetch(
+          "https://api.github.com/repos/openscan-explorer/explorer/contributors?per_page=1",
+        );
+        if (contributorsRes.ok) {
+          const linkHeader = contributorsRes.headers.get("Link");
+          if (linkHeader) {
+            const match = linkHeader.match(/page=(\d+)>; rel="last"/);
+            const lastPage = match?.[1];
+            if (lastPage) {
+              setGithubStats((prev) => ({ ...prev, contributors: parseInt(lastPage, 10) }));
+            }
+          } else {
+            const contributors = await contributorsRes.json();
+            setGithubStats((prev) => ({ ...prev, contributors: contributors.length }));
+          }
+        }
+
+        const repoRes = await fetch(
+          "https://api.github.com/repos/openscan-explorer/explorer/commits?per_page=1",
+        );
+        if (repoRes.ok) {
+          const linkHeader = repoRes.headers.get("Link");
+          if (linkHeader) {
+            const match = linkHeader.match(/page=(\d+)>; rel="last"/);
+            const lastPage = match?.[1];
+            if (lastPage) {
+              setGithubStats((prev) => ({ ...prev, commits: parseInt(lastPage, 10) }));
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Failed to fetch GitHub stats:", error);
+      }
+    };
+
+    fetchGitHubStats();
+  }, []);
+
+  const corePrinciples = [
+    {
+      title: "Free & Open Source",
+      description:
+        "100% open source, publicly auditable, and free for all users. No vendor lock-in.",
+    },
+    {
+      title: "Privacy First",
+      description: "No advertising, no trackers, no user data harvesting. Your data stays yours.",
+    },
+    {
+      title: "Trustless by Design",
+      description:
+        "Direct RPC connections to blockchain nodes. Verify data independently, no intermediaries.",
+    },
+    {
+      title: "Public Infrastructure",
+      description:
+        "Built as a public good for the decentralized ecosystem, sustained by ethical funding.",
+    },
+  ];
+
+  const features = [
+    {
+      title: "Multi-Chain Explorer",
+      description: "Explore blocks, transactions, and addresses across multiple EVM networks.",
+    },
+    {
+      title: "Contract Interaction",
+      description: "Read and write to verified smart contracts directly from the explorer.",
+    },
+    {
+      title: "Local Development",
+      description: "Full support for Hardhat and Anvil local networks with trace capabilities.",
+    },
+    {
+      title: "RPC Transparency",
+      description: "Compare responses across multiple RPC providers. Detect inconsistencies.",
+    },
+  ];
+
+  const networks = getEnabledNetworks();
+
+  return (
+    <div className="container-medium page-container-padded">
+      <div className="page-card">
+        {/* Header */}
+        <div className="text-center mb-large">
+          <h1 className="page-heading">OPENSCAN</h1>
+          <p className="page-subtitle">Trustless Blockchain Exploration</p>
+        </div>
+
+        {/* Mission Statement */}
+        <div className="about-section">
+          <p className="about-section-intro">
+            OpenScan is an open-source, lightweight blockchain explorer built to provide
+            transparency and true openness. We connect directly to blockchain nodes, giving you
+            unfettered access to on-chain data without intermediaries or centralized services.
+          </p>
+        </div>
+
+        {/* Core Principles */}
+        <div className="about-section">
+          <h2 className="page-heading-large text-center">Principles</h2>
+          <div className="data-grid-2 mb-large">
+            {corePrinciples.map((principle) => (
+              <div key={principle.title} className="feature-card text-center">
+                <h3 className="feature-card-title">{principle.title}</h3>
+                <p className="feature-card-description">{principle.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Features */}
+        <div className="about-section">
+          <h2 className="page-heading-large text-center">Features</h2>
+          <div className="data-grid-2 mb-large">
+            {features.map((feature) => (
+              <div key={feature.title} className="feature-card text-center">
+                <h3 className="feature-card-title">{feature.title}</h3>
+                <p className="feature-card-description">{feature.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Supported Networks */}
+        <h2 className="page-heading-large text-center">Supported Networks</h2>
+        <div className="data-grid-3-centered mb-large">
+          {networks.map((network) => (
+            <div key={network.networkId} className="network-item text-center">
+              <div className="network-info">
+                <NetworkIcon network={network} size={32} />
+                <div className="network-name">{network.name}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Open Source */}
+        <div className="text-center mb-large opensource-card">
+          <h2 className="opensource-title">Open Source</h2>
+          <p className="opensource-description">
+            The entire codebase is publicly available and welcomes community contributions.
+          </p>
+          <a
+            href="https://github.com/openscan-explorer/explorer"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="button-primary-inline"
+          >
+            View on GitHub
+          </a>
+        </div>
+
+        {/* Version Info */}
+        <div className="version-card">
+          <div className="version-card-grid-4 text-center">
+            <div className="version-info-item">
+              <div className="version-info-label">Version</div>
+              <div className="version-info-value">{appVersion}</div>
+            </div>
+            <div className="version-info-item">
+              <div className="version-info-label">Commit</div>
+              <div className="version-info-value-mono">{formattedCommitHash}</div>
+            </div>
+            <div className="version-info-item">
+              <div className="version-info-label">Total Commits</div>
+              <div className="version-info-value">
+                {githubStats.commits !== null ? githubStats.commits.toLocaleString() : "—"}
+              </div>
+            </div>
+            <div className="version-info-item">
+              <div className="version-info-label">Contributors</div>
+              <div className="version-info-value">
+                {githubStats.contributors !== null ? githubStats.contributors : "—"}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* License */}
+        <div className="text-center license-footer">
+          <p>Licensed under MIT</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default About;
diff --git a/src/components/pages/address/AddressDetails.tsx b/src/components/pages/address/AddressDetails.tsx
new file mode 100644
index 0000000..2c893df
--- /dev/null
+++ b/src/components/pages/address/AddressDetails.tsx
@@ -0,0 +1,1231 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import React, { useCallback, useContext, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { encodeFunctionData, parseEther, toFunctionSelector } from "viem";
+import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { AppContext } from "../../../context";
+import { useSourcify } from "../../../hooks/useSourcify";
+import type {
+  ABI,
+  ABIParameter,
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  EventABI,
+  FunctionABI,
+  RPCMetadata,
+  Transaction,
+} from "../../../types";
+import { RPCIndicator } from "../../common/RPCIndicator";
+import ENSRecordsDisplay from "./shared/ENSRecordsDisplay";
+
+interface AddressDisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId?: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails?: Transaction[];
+  loadingTxDetails?: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const AddressDisplay: React.FC<AddressDisplayProps> = React.memo(
+  ({
+    address,
+    addressHash,
+    networkId = "1",
+    transactionsResult,
+    transactionDetails = [],
+    loadingTxDetails = false,
+    metadata,
+    selectedProvider,
+    onProviderSelect,
+    ensName,
+    reverseResult,
+    ensRecords,
+    decodedContenthash,
+    ensLoading = false,
+    isMainnet = true,
+  }) => {
+    const [storageSlot, setStorageSlot] = useState("");
+    const [storageValue, setStorageValue] = useState("");
+    const [showContractDetails, setShowContractDetails] = useState(false);
+    const [selectedWriteFunction, setSelectedWriteFunction] = useState<FunctionABI | null>(null);
+    const [selectedReadFunction, setSelectedReadFunction] = useState<FunctionABI | null>(null);
+    const [functionInputs, setFunctionInputs] = useState<Record<string, string>>({});
+    const [readFunctionResult, setReadFunctionResult] = useState<string | null>(null);
+    const [isReadingFunction, setIsReadingFunction] = useState(false);
+    const { jsonFiles, rpcUrls } = useContext(AppContext);
+
+    // Wagmi hooks for contract interaction
+    const { data: hash, writeContract, isPending, isError, error } = useWriteContract();
+    const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
+      hash,
+    });
+
+    const isContract = useMemo(() => address.code && address.code !== "0x", [address.code]);
+
+    // Fetch Sourcify data only if it's a contract
+    const {
+      data: sourcifyData,
+      loading: sourcifyLoading,
+      isVerified,
+    } = useSourcify(Number(networkId), isContract ? addressHash : undefined, true);
+
+    // Memoized helper functions
+    const truncate = useCallback((str: string, start = 6, end = 4) => {
+      if (!str) return "";
+      if (str.length <= start + end) return str;
+      return `${str.slice(0, start)}...${str.slice(-end)}`;
+    }, []);
+
+    const formatBalance = useCallback((balance: string) => {
+      try {
+        const eth = Number(balance) / 1e18;
+        return `${eth.toFixed(6)} ETH`;
+      } catch (_e) {
+        return balance;
+      }
+    }, []);
+
+    const formatValue = useCallback((value: string) => {
+      try {
+        const eth = Number(value) / 1e18;
+        return `${eth.toFixed(6)} ETH`;
+      } catch (_e) {
+        return "0 ETH";
+      }
+    }, []);
+
+    // Memoized formatted balance
+    const _formattedBalance = useMemo(
+      () => formatBalance(address.balance),
+      [address.balance, formatBalance],
+    );
+
+    const handleGetStorage = useCallback(() => {
+      // Check if the slot exists in the storageAt object
+      if (address.storageAt?.[storageSlot]) {
+        setStorageValue(address.storageAt[storageSlot]);
+      } else {
+        setStorageValue("0x0000000000000000000000000000000000000000000000000000000000000000");
+      }
+    }, [address.storageAt, storageSlot]);
+
+    // Check if we have local artifact data for this address
+    const localArtifact = jsonFiles[addressHash.toLowerCase()];
+
+    // Parse local artifact to sourcify format if it exists - memoized
+    const parsedLocalData = useMemo(() => {
+      if (!localArtifact) return null;
+      return {
+        name: localArtifact.contractName,
+        compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+        evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+        abi: localArtifact.abi,
+        files: localArtifact.sourceCode
+          ? [
+              {
+                name: localArtifact.sourceName || "Contract.sol",
+                path: localArtifact.sourceName || "Contract.sol",
+                content: localArtifact.sourceCode,
+              },
+            ]
+          : undefined,
+        metadata: {
+          language: localArtifact.buildInfo?.input?.language,
+          compiler: localArtifact.buildInfo
+            ? {
+                version: localArtifact.buildInfo.solcVersion,
+              }
+            : undefined,
+        },
+        match: "perfect" as const,
+        creation_match: null,
+        runtime_match: null,
+        chainId: networkId,
+        address: addressHash,
+        verifiedAt: undefined,
+      };
+    }, [localArtifact, networkId, addressHash]);
+
+    // Use local artifact data if available and sourcify is not verified, otherwise use sourcify
+    const contractData = useMemo(
+      () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+      [isVerified, sourcifyData, parsedLocalData],
+    );
+
+    // Decode function name from calldata using ABI
+    const decodeFunctionName = useCallback(
+      (data: string | undefined): string | null => {
+        if (!data || data === "0x" || data.length < 10) return null;
+        if (!contractData?.abi) return null;
+
+        const selector = data.slice(0, 10).toLowerCase();
+
+        // Find matching function in ABI
+        for (const item of contractData.abi) {
+          // biome-ignore lint/suspicious/noExplicitAny: ABI item type
+          const abiItem = item as any;
+          if (abiItem.type !== "function") continue;
+
+          // Calculate function selector: keccak256(name(type1,type2,...))
+          const inputs = abiItem.inputs || [];
+          // biome-ignore lint/suspicious/noExplicitAny: ABI input type
+          const signature = `${abiItem.name}(${inputs.map((i: any) => i.type).join(",")})`;
+
+          try {
+            const computedSelector = toFunctionSelector(signature).toLowerCase();
+            if (computedSelector === selector) {
+              return abiItem.name;
+            }
+          } catch {}
+        }
+
+        return null;
+      },
+      [contractData?.abi],
+    );
+
+    const handleWriteFunction = useCallback(async () => {
+      if (!selectedWriteFunction) return;
+
+      try {
+        // Prepare function arguments
+        const args: unknown[] = [];
+        if (selectedWriteFunction.inputs && selectedWriteFunction.inputs.length > 0) {
+          for (const input of selectedWriteFunction.inputs) {
+            const paramName = input.name || `param${selectedWriteFunction.inputs.indexOf(input)}`;
+            const value = functionInputs[paramName];
+
+            if (!value && value !== "0") {
+              alert(`Please provide value for ${paramName}`);
+              return;
+            }
+
+            args.push(value);
+          }
+        }
+
+        // Prepare transaction value for payable functions
+        let txValue: bigint | undefined;
+        const valueKey = "_value";
+        if (selectedWriteFunction.stateMutability === "payable" && functionInputs[valueKey]) {
+          try {
+            txValue = parseEther(functionInputs[valueKey]);
+          } catch (_e) {
+            alert("Invalid ETH value");
+            return;
+          }
+        }
+
+        // Call the contract
+        writeContract({
+          address: addressHash as `0x${string}`,
+          abi: contractData?.abi || [],
+          functionName: selectedWriteFunction.name,
+          args: args,
+          value: txValue,
+        });
+      } catch (err) {
+        console.error("Error writing to contract:", err);
+        alert(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
+      }
+    }, [selectedWriteFunction, functionInputs, addressHash, contractData?.abi, writeContract]);
+
+    const handleReadFunction = useCallback(async () => {
+      if (!selectedReadFunction || !contractData) return;
+
+      setIsReadingFunction(true);
+      setReadFunctionResult(null);
+
+      try {
+        // Get RPC URL for the current chain
+        const networkIdNum = Number(networkId);
+        const rpcUrlsForChain = rpcUrls[networkIdNum as keyof typeof rpcUrls];
+
+        if (!rpcUrlsForChain) {
+          throw new Error(`No RPC URL configured for chain ${networkId}`);
+        }
+
+        // Get first RPC URL (could be string or array)
+        const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+
+        if (!rpcUrl) {
+          // Defensive: ensure rpcUrl is defined before calling fetch
+          throw new Error(`No RPC URL configured for chain ${networkId}`);
+        }
+
+        // Prepare function arguments
+        const args: unknown[] = [];
+        if (selectedReadFunction.inputs && selectedReadFunction.inputs.length > 0) {
+          for (const input of selectedReadFunction.inputs) {
+            const paramName = input.name || `param${selectedReadFunction.inputs.indexOf(input)}`;
+            const value = functionInputs[paramName];
+
+            if (!value && value !== "0") {
+              alert(`Please provide value for ${paramName}`);
+              setIsReadingFunction(false);
+              return;
+            }
+
+            args.push(value);
+          }
+        }
+
+        // Use fetch to call the RPC directly for read functions
+        const response = await fetch(rpcUrl, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            jsonrpc: "2.0",
+            method: "eth_call",
+            params: [
+              {
+                to: addressHash,
+                data: encodeFunctionData({
+                  abi: contractData.abi,
+                  functionName: selectedReadFunction.name,
+                  args: args,
+                }),
+              },
+              "latest",
+            ],
+            id: 1,
+          }),
+        });
+
+        const data = await response.json();
+
+        if (data.error) {
+          throw new Error(data.error.message || "Contract call failed");
+        }
+
+        setReadFunctionResult(data.result);
+      } catch (err) {
+        console.error("Error reading from contract:", err);
+        setReadFunctionResult(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
+      } finally {
+        setIsReadingFunction(false);
+      }
+    }, [selectedReadFunction, contractData, networkId, functionInputs, addressHash, rpcUrls]);
+
+    return (
+      <div className="block-display-card">
+        <div className="block-display-header address-header">
+          <div>
+            <span className="block-label">Address</span>
+            {(ensName || reverseResult?.ensName) && (
+              <span className="address-ens-name">{ensName || reverseResult?.ensName}</span>
+            )}
+            <span className="tx-mono header-subtitle">{addressHash}</span>
+          </div>
+          {metadata && selectedProvider !== undefined && onProviderSelect && (
+            <RPCIndicator
+              metadata={metadata}
+              selectedProvider={selectedProvider}
+              onProviderSelect={onProviderSelect}
+            />
+          )}
+        </div>
+
+        <div className="address-section-content">
+          {/* Address Details Section */}
+          <div className="tx-details">
+            <div className="tx-section">
+              <span className="tx-section-title">Address Details</span>
+            </div>
+
+            {/* Type */}
+            <div className="tx-row">
+              <span className="tx-label">Type:</span>
+              <span className="tx-value">
+                {isContract ? (
+                  <span className="tx-value-highlight text-blue">📄 Contract</span>
+                ) : (
+                  <span className="tx-value-highlight">👤 Externally Owned Account (EOA)</span>
+                )}
+              </span>
+            </div>
+
+            {/* Balance */}
+            <div className="tx-row">
+              <span className="tx-label">Balance:</span>
+              <span className="tx-value">
+                <span className="tx-value-highlight">{formatBalance(address.balance)}</span>
+              </span>
+            </div>
+
+            {/* Transaction Count (Nonce) */}
+            <div className="tx-row">
+              <span className="tx-label">Transactions:</span>
+              <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+            </div>
+
+            {/* Verification Status (only for contracts) */}
+            {isContract && (
+              <div className="tx-row">
+                <span className="tx-label">Contract Verified:</span>
+                <span className="tx-value">
+                  {sourcifyLoading ? (
+                    <span className="verification-checking">Checking Sourcify...</span>
+                  ) : isVerified || parsedLocalData ? (
+                    <span className="flex-align-center-gap-8">
+                      <span className="tx-value-highlight">✓ Verified</span>
+                      {contractData?.match && (
+                        <span className="match-badge match-badge-full">
+                          {contractData.match === "perfect"
+                            ? parsedLocalData
+                              ? "Local JSON"
+                              : "Perfect Match"
+                            : "Partial Match"}
+                        </span>
+                      )}
+                    </span>
+                  ) : (
+                    <span className="verification-not-verified">Not Verified</span>
+                  )}
+                </span>
+              </div>
+            )}
+
+            {/* Contract Name (if verified) */}
+            {isContract && contractData?.name && (
+              <div className="tx-row">
+                <span className="tx-label">Contract Name:</span>
+                <span className="tx-value">{contractData.name}</span>
+              </div>
+            )}
+
+            {/* Compiler Version (if verified) */}
+            {isContract && contractData?.compilerVersion && (
+              <div className="tx-row">
+                <span className="tx-label">Compiler:</span>
+                <span className="tx-value tx-mono">{contractData.compilerVersion}</span>
+              </div>
+            )}
+          </div>
+
+          {/* ENS Records Section */}
+          {(ensName || reverseResult?.ensName || ensLoading) && (
+            <ENSRecordsDisplay
+              ensName={ensName || null}
+              reverseResult={reverseResult}
+              records={ensRecords}
+              decodedContenthash={decodedContenthash}
+              loading={ensLoading}
+              isMainnet={isMainnet}
+            />
+          )}
+
+          {/* Contract Verification Details */}
+          {isContract && (isVerified || parsedLocalData) && contractData && (
+            <div className="tx-details">
+              <button
+                type="button"
+                className="tx-section btn-toggle-section"
+                onClick={() => setShowContractDetails(!showContractDetails)}
+              >
+                <span className="tx-section-title">Contract Details</span>
+                <span className="contract-section-toggle">{showContractDetails ? " ▼" : " ▶"}</span>
+              </button>
+
+              {showContractDetails && (
+                <>
+                  {contractData.name && (
+                    <div className="tx-row">
+                      <span className="tx-label">Contract Name</span>
+                      <span className="tx-value tx-value-success">{contractData.name}</span>
+                    </div>
+                  )}
+
+                  {contractData.compilerVersion && (
+                    <div className="tx-row">
+                      <span className="tx-label">Compiler Version</span>
+                      <span className="tx-value tx-mono">{contractData.compilerVersion}</span>
+                    </div>
+                  )}
+
+                  {contractData.evmVersion && (
+                    <div className="tx-row">
+                      <span className="tx-label">EVM Version</span>
+                      <span className="tx-value">{contractData.evmVersion}</span>
+                    </div>
+                  )}
+
+                  {contractData.chainId && (
+                    <div className="tx-row">
+                      <span className="tx-label">Chain ID</span>
+                      <span className="tx-value">{contractData.chainId}</span>
+                    </div>
+                  )}
+
+                  {contractData.verifiedAt && (
+                    <div className="tx-row">
+                      <span className="tx-label">Verified At</span>
+                      <span className="tx-value">
+                        {new Date(contractData.verifiedAt).toLocaleString()}
+                      </span>
+                    </div>
+                  )}
+
+                  {contractData.match && (
+                    <div className="tx-row">
+                      <span className="tx-label">Match Type</span>
+                      <span
+                        className={`tx-value font-weight-600 ${contractData.match === "perfect" ? "text-success" : "text-warning"}`}
+                      >
+                        {contractData.match.toUpperCase()}
+                      </span>
+                    </div>
+                  )}
+
+                  {contractData.metadata?.compiler && (
+                    <div className="tx-row">
+                      <span className="tx-label">Compiler</span>
+                      <span className="tx-value tx-mono">
+                        {contractData.metadata.compiler.version}
+                      </span>
+                    </div>
+                  )}
+
+                  {contractData.creation_match && (
+                    <div className="tx-row">
+                      <span className="tx-label">Creation Match</span>
+                      <span
+                        className={`tx-value font-weight-600 ${contractData.creation_match === "perfect" ? "text-success" : "text-warning"}`}
+                      >
+                        {contractData.creation_match.toUpperCase()}
+                      </span>
+                    </div>
+                  )}
+
+                  {contractData.runtime_match && (
+                    <div className="tx-row">
+                      <span className="tx-label">Runtime Match</span>
+                      <span
+                        className={`tx-value font-weight-600 ${contractData.runtime_match === "perfect" ? "text-success" : "text-warning"}`}
+                      >
+                        {contractData.runtime_match.toUpperCase()}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Contract Bytecode */}
+                  <div className="tx-row-vertical">
+                    <button
+                      type="button"
+                      className="source-toggle-container btn-reset-block"
+                      onClick={() => {
+                        const elem = document.getElementById("bytecode-content");
+                        const icon = document.getElementById("bytecode-icon");
+                        if (elem && icon) {
+                          const isHidden = elem.style.display === "none";
+                          elem.style.display = isHidden ? "block" : "none";
+                          icon.textContent = isHidden ? "▼" : "▶";
+                        }
+                      }}
+                    >
+                      <span className="tx-label">Contract Bytecode</span>
+                      <span id="bytecode-icon" className="source-toggle-icon">
+                        ▶
+                      </span>
+                    </button>
+                    <div id="bytecode-content" className="tx-input-data hidden">
+                      <code>{address.code}</code>
+                    </div>
+                  </div>
+
+                  {/* Source Code */}
+                  {((contractData.files && contractData.files.length > 0) ||
+                    ("sources" in contractData && contractData.sources)) &&
+                    (() => {
+                      // Prepare source files array - either from files or sources object
+                      const sources = "sources" in contractData ? contractData.sources : undefined;
+                      const sourceFiles =
+                        contractData.files && contractData.files.length > 0
+                          ? contractData.files
+                          : sources
+                            ? Object.entries(sources).map(([path, source]) => ({
+                                name: path,
+                                path: path,
+                                content: source.content || "",
+                              }))
+                            : [];
+
+                      return sourceFiles.length > 0 ? (
+                        <div className="tx-row-vertical">
+                          <button
+                            type="button"
+                            className="source-toggle-container btn-reset-block"
+                            onClick={() => {
+                              const elem = document.getElementById("source-code-content");
+                              const icon = document.getElementById("source-code-icon");
+                              if (elem && icon) {
+                                const isHidden = elem.style.display === "none";
+                                elem.style.display = isHidden ? "block" : "none";
+                                icon.textContent = isHidden ? "▼" : "▶";
+                              }
+                            }}
+                          >
+                            <span className="tx-label">Source Code</span>
+                            <span id="source-code-icon" className="source-toggle-icon">
+                              ▶
+                            </span>
+                          </button>
+                          <div id="source-code-content" className="margin-top-8 hidden">
+                            {sourceFiles.map((file) => (
+                              <div key={file.path} className="source-file-container">
+                                <div className="source-file-header">
+                                  📄 {file.name || file.path}
+                                </div>
+                                <pre className="source-file-code">{file.content}</pre>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      ) : null;
+                    })()}
+
+                  {/* Raw ABI */}
+                  {contractData.abi && contractData.abi.length > 0 && (
+                    <div className="tx-row-vertical">
+                      <button
+                        type="button"
+                        className="source-toggle-container btn-reset-block"
+                        onClick={() => {
+                          const elem = document.getElementById("raw-abi-content");
+                          const icon = document.getElementById("raw-abi-icon");
+                          if (elem && icon) {
+                            const isHidden = elem.style.display === "none";
+                            elem.style.display = isHidden ? "block" : "none";
+                            icon.textContent = isHidden ? "▼" : "▶";
+                          }
+                        }}
+                      >
+                        <span className="tx-label">Raw ABI</span>
+                        <span id="raw-abi-icon" className="source-toggle-icon">
+                          ▶
+                        </span>
+                      </button>
+                      <div id="raw-abi-content" className="tx-input-data hidden">
+                        <code>{JSON.stringify(contractData.abi, null, 2)}</code>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Contract ABI */}
+                  {contractData.abi && contractData.abi.length > 0 && (
+                    <div className="tx-row-vertical">
+                      <div className="contract-functions-header">
+                        <span className="tx-label">Functions</span>
+                        <ConnectButton.Custom>
+                          {({
+                            account,
+                            chain,
+                            openAccountModal,
+                            openChainModal,
+                            openConnectModal,
+                            authenticationStatus,
+                            mounted,
+                          }: Parameters<
+                            Parameters<typeof ConnectButton.Custom>[0]["children"]
+                          >[0]) => {
+                            const ready = mounted && authenticationStatus !== "loading";
+                            const connected =
+                              ready &&
+                              account &&
+                              chain &&
+                              (!authenticationStatus || authenticationStatus === "authenticated");
+
+                            return (
+                              <div
+                                {...(!ready && {
+                                  "aria-hidden": true,
+                                  className: "wallet-hidden",
+                                })}
+                              >
+                                {(() => {
+                                  if (!connected) {
+                                    return (
+                                      <button
+                                        onClick={openConnectModal}
+                                        type="button"
+                                        className="btn-connect-wallet"
+                                      >
+                                        Connect Wallet
+                                      </button>
+                                    );
+                                  }
+
+                                  if (chain.unsupported) {
+                                    return (
+                                      <button
+                                        onClick={openChainModal}
+                                        type="button"
+                                        className="btn-wrong-network"
+                                      >
+                                        Wrong Network
+                                      </button>
+                                    );
+                                  }
+
+                                  return (
+                                    <div className="wallet-connected-container">
+                                      <button
+                                        onClick={openChainModal}
+                                        type="button"
+                                        className="btn-chain-selector"
+                                      >
+                                        {chain.hasIcon && chain.iconUrl && (
+                                          <img
+                                            alt={chain.name ?? "Chain icon"}
+                                            src={chain.iconUrl}
+                                            className="chain-icon"
+                                          />
+                                        )}
+                                        {chain.name}
+                                      </button>
+                                      <button
+                                        onClick={openAccountModal}
+                                        type="button"
+                                        className="btn-account"
+                                      >
+                                        {account.displayName}
+                                      </button>
+                                    </div>
+                                  );
+                                })()}
+                              </div>
+                            );
+                          }}
+                        </ConnectButton.Custom>
+                      </div>
+                      <div className="contract-functions-content">
+                        {/* Read Functions (view/pure) */}
+                        {(() => {
+                          const readFunctions = contractData.abi.filter(
+                            (item: ABI): item is FunctionABI =>
+                              item.type === "function" &&
+                              ((item as FunctionABI).stateMutability === "view" ||
+                                (item as FunctionABI).stateMutability === "pure"),
+                          );
+                          return (
+                            readFunctions.length > 0 && (
+                              <div className="functions-section">
+                                <div className="functions-section-title functions-section-title-read">
+                                  Read Functions ({readFunctions.length})
+                                </div>
+                                <div className="functions-list">
+                                  {readFunctions.map((func: FunctionABI) => (
+                                    <button
+                                      type="button"
+                                      key={func.name}
+                                      onClick={() => {
+                                        setSelectedReadFunction(func);
+                                        setSelectedWriteFunction(null);
+                                        setFunctionInputs({});
+                                        setReadFunctionResult(null);
+                                      }}
+                                      className={`btn-function btn-function-read ${selectedReadFunction?.name === func.name ? "selected" : ""}`}
+                                    >
+                                      {func.name}
+                                    </button>
+                                  ))}
+                                </div>
+                              </div>
+                            )
+                          );
+                        })()}
+
+                        {/* Write Functions (payable/nonpayable) */}
+                        {(() => {
+                          const writeFunctions = contractData.abi.filter(
+                            (item: ABI): item is FunctionABI =>
+                              item.type === "function" &&
+                              ((item as FunctionABI).stateMutability === "payable" ||
+                                (item as FunctionABI).stateMutability === "nonpayable" ||
+                                !(item as FunctionABI).stateMutability),
+                          );
+                          return (
+                            writeFunctions.length > 0 && (
+                              <div className="functions-section">
+                                <div className="functions-section-title functions-section-title-write">
+                                  Write Functions ({writeFunctions.length})
+                                </div>
+                                <div className="functions-list">
+                                  {writeFunctions.map((func: FunctionABI) => (
+                                    <button
+                                      type="button"
+                                      key={func.name}
+                                      onClick={() => {
+                                        setSelectedWriteFunction(func);
+                                        setSelectedReadFunction(null);
+                                        setFunctionInputs({});
+                                        setReadFunctionResult(null);
+                                      }}
+                                      className={`btn-function btn-function-write ${selectedWriteFunction?.name === func.name ? "selected" : ""}`}
+                                    >
+                                      {func.name}
+                                    </button>
+                                  ))}
+                                </div>
+                              </div>
+                            )
+                          );
+                        })()}
+
+                        {/* Events */}
+                        {contractData.abi.filter((item: ABI) => item.type === "event").length >
+                          0 && (
+                          <div className="functions-section">
+                            <div className="functions-section-title functions-section-title-events">
+                              Events (
+                              {contractData.abi.filter((item: ABI) => item.type === "event").length}
+                              )
+                            </div>
+                            <div className="functions-list">
+                              {contractData.abi
+                                .filter((item: ABI): item is EventABI => item.type === "event")
+                                .slice(0, 10)
+                                .map((event: EventABI) => (
+                                  <span key={event.name} className="event-badge">
+                                    {event.name}
+                                  </span>
+                                ))}
+                              {contractData.abi.filter((item: ABI) => item.type === "event")
+                                .length > 10 && (
+                                <span className="events-more">
+                                  +
+                                  {contractData.abi.filter((item: ABI) => item.type === "event")
+                                    .length - 10}{" "}
+                                  more
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Read Function Form */}
+                        {selectedReadFunction && (
+                          <div className="function-form function-form-read">
+                            <div className="function-form-title function-form-title-read">
+                              {selectedReadFunction.name}
+                            </div>
+
+                            {selectedReadFunction.inputs &&
+                            selectedReadFunction.inputs.length > 0 ? (
+                              <div className="function-inputs">
+                                {selectedReadFunction.inputs.map(
+                                  (input: ABIParameter, idx: number) => (
+                                    <label
+                                      key={`${input.name || idx}-${input.type}`}
+                                      className="function-input-label"
+                                    >
+                                      <span className="function-input-name">
+                                        {input.name || `param${idx}`} ({input.type})
+                                      </span>
+                                      <input
+                                        type="text"
+                                        value={functionInputs[input.name || `param${idx}`] || ""}
+                                        onChange={(e) =>
+                                          setFunctionInputs({
+                                            ...functionInputs,
+                                            [input.name || `param${idx}`]: e.target.value,
+                                          })
+                                        }
+                                        placeholder={`Enter ${input.type}`}
+                                        className="function-input function-input-read"
+                                      />
+                                    </label>
+                                  ),
+                                )}
+                              </div>
+                            ) : (
+                              <div className="function-no-params">No parameters required</div>
+                            )}
+
+                            {/* Read Result */}
+                            {readFunctionResult !== null && (
+                              <div
+                                className={`function-result ${readFunctionResult?.startsWith("Error") ? "function-result-error" : "function-result-success"}`}
+                              >
+                                <div className="function-result-title">
+                                  {readFunctionResult?.startsWith("Error")
+                                    ? "❌ Error"
+                                    : "✅ Result"}
+                                </div>
+                                {readFunctionResult}
+                              </div>
+                            )}
+
+                            <div className="function-actions">
+                              <button
+                                type="button"
+                                onClick={handleReadFunction}
+                                disabled={isReadingFunction}
+                                className="btn-function-action btn-query"
+                              >
+                                {isReadingFunction ? "Reading..." : "Query"}
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  setSelectedReadFunction(null);
+                                  setReadFunctionResult(null);
+                                }}
+                                className="btn-cancel"
+                              >
+                                Cancel
+                              </button>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Write Function Form */}
+                        {selectedWriteFunction && (
+                          <div className="function-form function-form-write">
+                            <div className="function-form-title function-form-title-write">
+                              {selectedWriteFunction.name}
+                              {selectedWriteFunction.stateMutability === "payable" && (
+                                <span className="payable-badge">payable</span>
+                              )}
+                            </div>
+
+                            {selectedWriteFunction.inputs &&
+                            selectedWriteFunction.inputs.length > 0 ? (
+                              <div className="function-inputs">
+                                {selectedWriteFunction.inputs.map(
+                                  (input: ABIParameter, idx: number) => (
+                                    <label
+                                      key={`${input.name || idx}-${input.type}`}
+                                      className="function-input-label"
+                                    >
+                                      <span className="function-input-name">
+                                        {input.name || `param${idx}`} ({input.type})
+                                      </span>
+                                      <input
+                                        type="text"
+                                        value={functionInputs[input.name || `param${idx}`] || ""}
+                                        onChange={(e) =>
+                                          setFunctionInputs({
+                                            ...functionInputs,
+                                            [input.name || `param${idx}`]: e.target.value,
+                                          })
+                                        }
+                                        placeholder={`Enter ${input.type}`}
+                                        className="function-input function-input-write"
+                                      />
+                                    </label>
+                                  ),
+                                )}
+                              </div>
+                            ) : (
+                              <div className="function-no-params">No parameters required</div>
+                            )}
+
+                            {selectedWriteFunction.stateMutability === "payable" && (
+                              <label className="function-input-label">
+                                <span className="function-input-name">Value (ETH)</span>
+                                <input
+                                  type="text"
+                                  // biome-ignore lint/complexity/useLiteralKeys: _value is a special key for ETH value
+                                  value={functionInputs["_value"] || ""}
+                                  onChange={(e) =>
+                                    setFunctionInputs({
+                                      ...functionInputs,
+                                      _value: e.target.value,
+                                    })
+                                  }
+                                  placeholder="0.0"
+                                  className="function-input function-input-value"
+                                />
+                              </label>
+                            )}
+
+                            {/* Transaction Status */}
+                            {(isPending || isConfirming || isConfirmed || isError) && (
+                              <div
+                                className={`tx-status-box ${isError ? "tx-status-error" : isConfirmed ? "tx-status-success" : "tx-status-pending"}`}
+                              >
+                                {isPending && "⏳ Waiting for wallet confirmation..."}
+                                {isConfirming && "⏳ Waiting for transaction confirmation..."}
+                                {isConfirmed && (
+                                  <div>
+                                    ✅ Transaction confirmed!
+                                    {hash && (
+                                      <div className="tx-hash-link">
+                                        <Link to={`/${networkId}/tx/${hash}`}>
+                                          View transaction
+                                        </Link>
+                                      </div>
+                                    )}
+                                  </div>
+                                )}
+                                {isError && (
+                                  <div>❌ Error: {error?.message || "Transaction failed"}</div>
+                                )}
+                              </div>
+                            )}
+
+                            <div className="function-actions">
+                              <button
+                                type="button"
+                                onClick={handleWriteFunction}
+                                disabled={isPending || isConfirming}
+                                className="btn-function-action btn-write-action"
+                              >
+                                {isPending
+                                  ? "Confirming in Wallet..."
+                                  : isConfirming
+                                    ? "Processing..."
+                                    : "Write"}
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => setSelectedWriteFunction(null)}
+                                className="btn-cancel"
+                              >
+                                Cancel
+                              </button>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {sourcifyData && (
+                    <div className="tx-row">
+                      <span className="tx-label">Sourcify</span>
+                      <a
+                        href={`https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="sourcify-link"
+                      >
+                        View Full Contract on Sourcify ↗
+                      </a>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+
+          {/* Last Transactions Section */}
+          <div className="tx-details">
+            <div className="tx-section tx-history-header">
+              <span className="tx-section-title">Last Transactions</span>
+              {transactionsResult && (
+                <span
+                  className={`tx-history-status ${transactionsResult.source === "trace_filter" ? "tx-history-status-complete" : transactionsResult.source === "logs" ? "tx-history-status-partial" : "tx-history-status-none"}`}
+                >
+                  {transactionsResult.source === "trace_filter" && (
+                    <>
+                      <span className="tx-history-dot">●</span>
+                      Complete history ({transactionDetails.length} transactions)
+                    </>
+                  )}
+                  {transactionsResult.source === "logs" && (
+                    <>
+                      <span className="tx-history-dot">●</span>
+                      Partial (logs only) - {transactionDetails.length} transactions
+                    </>
+                  )}
+                  {transactionsResult.source === "none" && (
+                    <>
+                      <span className="tx-history-dot">●</span>
+                      No data available
+                    </>
+                  )}
+                </span>
+              )}
+            </div>
+
+            {/* Warning message for partial data */}
+            {transactionsResult?.message && (
+              <div
+                className={`tx-history-message ${transactionsResult.source === "none" ? "tx-history-message-error" : "tx-history-message-warning"}`}
+              >
+                <span className="tx-history-message-icon">
+                  {transactionsResult.source === "none" ? "⚠️" : "ℹ️"}
+                </span>
+                {transactionsResult.message}
+              </div>
+            )}
+
+            {/* Loading state */}
+            {loadingTxDetails && (
+              <div className="tx-history-empty">Loading transaction details...</div>
+            )}
+
+            {/* Transaction table */}
+            {!loadingTxDetails && transactionDetails.length > 0 && (
+              <div className="address-table-container">
+                <table className="recent-transactions-table">
+                  <thead>
+                    <tr>
+                      <th>TX Hash</th>
+                      {contractData && <th>Method</th>}
+                      <th>From</th>
+                      <th>To</th>
+                      <th>Value</th>
+                      <th>Status</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {transactionDetails.map((tx) => (
+                      <tr key={tx.hash}>
+                        <td>
+                          <Link to={`/${networkId}/tx/${tx.hash}`} className="address-table-link">
+                            {truncate(tx.hash, 8, 6)}
+                          </Link>
+                        </td>
+                        {contractData && (
+                          <td>
+                            {tx.to?.toLowerCase() === addressHash.toLowerCase() ? (
+                              (() => {
+                                const funcName = decodeFunctionName(tx.data);
+                                const selector = tx.data?.slice(0, 10);
+                                return funcName ? (
+                                  <span className="method-badge method-badge-decoded">
+                                    {funcName}
+                                  </span>
+                                ) : selector && selector !== "0x" ? (
+                                  <span
+                                    className="method-badge method-badge-selector"
+                                    title={selector}
+                                  >
+                                    {selector}
+                                  </span>
+                                ) : (
+                                  <span className="method-badge method-badge-transfer">
+                                    Transfer
+                                  </span>
+                                );
+                              })()
+                            ) : !tx.data || tx.data === "0x" ? (
+                              <span className="method-badge method-badge-transfer">Transfer</span>
+                            ) : (
+                              <span
+                                className="method-badge method-badge-selector"
+                                title={tx.data?.slice(0, 10)}
+                              >
+                                {tx.data?.slice(0, 10)}
+                              </span>
+                            )}
+                          </td>
+                        )}
+                        <td>
+                          <Link
+                            to={`/${networkId}/address/${tx.from}`}
+                            className="address-table-link"
+                          >
+                            {tx.from?.toLowerCase() === addressHash.toLowerCase()
+                              ? "This Address"
+                              : truncate(tx.from || "", 6, 4)}
+                          </Link>
+                        </td>
+                        <td>
+                          {tx.to ? (
+                            <Link
+                              to={`/${networkId}/address/${tx.to}`}
+                              className={`tx-table-to-link ${tx.to?.toLowerCase() === addressHash.toLowerCase() ? "tx-table-to-link-self" : "tx-table-to-link-other"}`}
+                            >
+                              {tx.to?.toLowerCase() === addressHash.toLowerCase()
+                                ? "This Address"
+                                : truncate(tx.to, 6, 4)}
+                            </Link>
+                          ) : (
+                            <span className="contract-creation-badge">Contract Creation</span>
+                          )}
+                        </td>
+                        <td>
+                          <span className="address-table-value">{formatValue(tx.value)}</span>
+                        </td>
+                        <td>
+                          {tx.receipt?.status === "0x1" ? (
+                            <span className="table-status-badge table-status-success">
+                              ✓ Success
+                            </span>
+                          ) : tx.receipt?.status === "0x0" ? (
+                            <span className="table-status-badge table-status-failed">✗ Failed</span>
+                          ) : (
+                            <span className="table-status-badge table-status-pending">
+                              ⏳ Pending
+                            </span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {/* Empty state */}
+            {!loadingTxDetails &&
+              transactionDetails.length === 0 &&
+              !transactionsResult?.message && (
+                <div className="tx-history-empty">No transactions found for this address</div>
+              )}
+          </div>
+
+          {/* Storage Section (for contracts) */}
+          {isContract && (
+            <div className="block-display-card">
+              <div className="block-display-header">
+                <span className="block-label">Contract Storage</span>
+              </div>
+              <div className="tx-details">
+                <div className="tx-row">
+                  <span className="tx-label">Storage Slot:</span>
+                  <span className="tx-value">
+                    <div className="storage-input-row">
+                      <input
+                        type="text"
+                        placeholder="e.g., 0x0"
+                        value={storageSlot}
+                        onChange={(e) => setStorageSlot(e.target.value)}
+                        className="storage-input"
+                      />
+                      <button type="button" onClick={handleGetStorage} className="storage-button">
+                        Get
+                      </button>
+                    </div>
+                  </span>
+                </div>
+                {storageValue && (
+                  <div className="tx-row">
+                    <span className="tx-label">Value:</span>
+                    <span className="tx-value">
+                      <div className="storage-value-display">{storageValue}</div>
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+AddressDisplay.displayName = "AddressDisplay";
+
+export default AddressDisplay;
diff --git a/src/components/pages/address/displays/AccountDisplay.tsx b/src/components/pages/address/displays/AccountDisplay.tsx
new file mode 100644
index 0000000..66d5688
--- /dev/null
+++ b/src/components/pages/address/displays/AccountDisplay.tsx
@@ -0,0 +1,90 @@
+import type React from "react";
+import type {
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  RPCMetadata,
+  Transaction,
+} from "../../../../types";
+import { AddressHeader, BalanceSection, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
+
+interface AccountDisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const AccountDisplay: React.FC<AccountDisplayProps> = ({
+  address,
+  addressHash,
+  networkId,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  ensName,
+  reverseResult,
+  ensRecords,
+  decodedContenthash,
+  ensLoading = false,
+  isMainnet = true,
+}) => {
+  return (
+    <div className="block-display-card">
+      <AddressHeader
+        addressHash={addressHash}
+        addressType="account"
+        ensName={ensName || reverseResult?.ensName}
+        metadata={metadata}
+        selectedProvider={selectedProvider}
+        onProviderSelect={onProviderSelect}
+      />
+
+      <div className="address-section-content">
+        {/* Balance Section */}
+        <BalanceSection address={address} />
+
+        {/* ENS Records Section */}
+        {(ensName || reverseResult?.ensName || ensLoading) && (
+          <ENSRecordsDetails
+            ensName={ensName || null}
+            reverseResult={reverseResult}
+            records={ensRecords}
+            decodedContenthash={decodedContenthash}
+            loading={ensLoading}
+            isMainnet={isMainnet}
+          />
+        )}
+
+        {/* Transaction History */}
+        <TransactionHistory
+          networkId={networkId}
+          addressHash={addressHash}
+          transactionsResult={transactionsResult}
+          transactionDetails={transactionDetails}
+          loadingTxDetails={loadingTxDetails}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AccountDisplay;
diff --git a/src/components/pages/address/displays/ContractDisplay.tsx b/src/components/pages/address/displays/ContractDisplay.tsx
new file mode 100644
index 0000000..7e38a90
--- /dev/null
+++ b/src/components/pages/address/displays/ContractDisplay.tsx
@@ -0,0 +1,253 @@
+import type React from "react";
+import { useContext, useMemo, useState } from "react";
+import { AppContext } from "../../../../context";
+import { useSourcify } from "../../../../hooks/useSourcify";
+import type {
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  RPCMetadata,
+  Transaction,
+} from "../../../../types";
+import { AddressHeader, ContractDetails, ContractStorage, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
+
+interface ContractDisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const ContractDisplay: React.FC<ContractDisplayProps> = ({
+  address,
+  addressHash,
+  networkId,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  ensName,
+  reverseResult,
+  ensRecords,
+  decodedContenthash,
+  ensLoading = false,
+  isMainnet = true,
+}) => {
+  const { jsonFiles } = useContext(AppContext);
+  const [showBytecode, setShowBytecode] = useState(false);
+
+  // Fetch Sourcify data
+  const {
+    data: sourcifyData,
+    loading: sourcifyLoading,
+    isVerified,
+  } = useSourcify(Number(networkId), addressHash, true);
+
+  // Check if we have local artifact data for this address
+  const localArtifact = jsonFiles[addressHash.toLowerCase()];
+
+  // Parse local artifact to sourcify format if it exists
+  const parsedLocalData = useMemo(() => {
+    if (!localArtifact) return null;
+    return {
+      name: localArtifact.contractName,
+      compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+      evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+      abi: localArtifact.abi,
+      files: localArtifact.sourceCode
+        ? [
+            {
+              name: localArtifact.sourceName || "Contract.sol",
+              path: localArtifact.sourceName || "Contract.sol",
+              content: localArtifact.sourceCode,
+            },
+          ]
+        : undefined,
+      metadata: {
+        language: localArtifact.buildInfo?.input?.language,
+        compiler: localArtifact.buildInfo
+          ? { version: localArtifact.buildInfo.solcVersion }
+          : undefined,
+      },
+      match: "perfect" as const,
+      creation_match: null,
+      runtime_match: null,
+      chainId: networkId,
+      address: addressHash,
+      verifiedAt: undefined,
+    };
+  }, [localArtifact, networkId, addressHash]);
+
+  // Use local artifact data if available and sourcify is not verified
+  const contractData = useMemo(
+    () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+    [isVerified, sourcifyData, parsedLocalData],
+  );
+
+  const hasVerifiedContract = isVerified || parsedLocalData;
+
+  return (
+    <div className="block-display-card">
+      <AddressHeader
+        addressHash={addressHash}
+        addressType="contract"
+        ensName={ensName || reverseResult?.ensName}
+        metadata={metadata}
+        selectedProvider={selectedProvider}
+        onProviderSelect={onProviderSelect}
+      />
+
+      <div className="address-section-content">
+        {/* Address Details Section */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">Contract Details</span>
+          </div>
+
+          {/* Balance */}
+          <div className="tx-row">
+            <span className="tx-label">Balance:</span>
+            <span className="tx-value">
+              <span className="tx-value-highlight">
+                {(() => {
+                  try {
+                    const eth = Number(address.balance) / 1e18;
+                    return `${eth.toFixed(6)} ETH`;
+                  } catch {
+                    return address.balance;
+                  }
+                })()}
+              </span>
+            </span>
+          </div>
+
+          {/* Transaction Count */}
+          <div className="tx-row">
+            <span className="tx-label">Transactions:</span>
+            <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+          </div>
+
+          {/* Verification Status */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Verified:</span>
+            <span className="tx-value">
+              {sourcifyLoading ? (
+                <span className="verification-checking">Checking Sourcify...</span>
+              ) : hasVerifiedContract ? (
+                <span className="flex-align-center-gap-8">
+                  <span className="tx-value-highlight">✓ Verified</span>
+                  {contractData?.match && (
+                    <span className="match-badge match-badge-full">
+                      {contractData.match === "perfect"
+                        ? parsedLocalData
+                          ? "Local JSON"
+                          : "Perfect Match"
+                        : "Partial Match"}
+                    </span>
+                  )}
+                </span>
+              ) : (
+                <span className="verification-not-verified">Not Verified</span>
+              )}
+            </span>
+          </div>
+
+          {/* Contract Name (if verified) */}
+          {contractData?.name && (
+            <div className="tx-row">
+              <span className="tx-label">Contract Name:</span>
+              <span className="tx-value">{contractData.name}</span>
+            </div>
+          )}
+
+          {/* Compiler Version (if verified) */}
+          {contractData?.compilerVersion && (
+            <div className="tx-row">
+              <span className="tx-label">Compiler:</span>
+              <span className="tx-value tx-mono">{contractData.compilerVersion}</span>
+            </div>
+          )}
+
+          {/* Bytecode for unverified contracts */}
+          {!hasVerifiedContract && address.code && address.code !== "0x" && (
+            <div className="tx-row-vertical">
+              <button
+                type="button"
+                className="source-toggle-container btn-reset-block"
+                onClick={() => setShowBytecode(!showBytecode)}
+              >
+                <span className="tx-label">Contract Bytecode</span>
+                <span className="source-toggle-icon">{showBytecode ? "▼" : "▶"}</span>
+              </button>
+              {showBytecode && (
+                <div className="tx-input-data">
+                  <code>{address.code}</code>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* ENS Records Section */}
+        {(ensName || reverseResult?.ensName || ensLoading) && (
+          <ENSRecordsDetails
+            ensName={ensName || null}
+            reverseResult={reverseResult}
+            records={ensRecords}
+            decodedContenthash={decodedContenthash}
+            loading={ensLoading}
+            isMainnet={isMainnet}
+          />
+        )}
+
+        {/* Contract Verification Details */}
+        {hasVerifiedContract && contractData && (
+          <ContractDetails
+            addressHash={addressHash}
+            networkId={networkId}
+            code={address.code}
+            contractData={contractData}
+            isLocalArtifact={!!parsedLocalData && !isVerified}
+            sourcifyUrl={
+              sourcifyData
+                ? `https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`
+                : undefined
+            }
+          />
+        )}
+
+        {/* Transaction History */}
+        <TransactionHistory
+          networkId={networkId}
+          addressHash={addressHash}
+          transactionsResult={transactionsResult}
+          transactionDetails={transactionDetails}
+          loadingTxDetails={loadingTxDetails}
+          contractAbi={contractData?.abi}
+        />
+
+        {/* Contract Storage */}
+        <ContractStorage address={address} />
+      </div>
+    </div>
+  );
+};
+
+export default ContractDisplay;
diff --git a/src/components/pages/address/displays/ERC1155Display.tsx b/src/components/pages/address/displays/ERC1155Display.tsx
new file mode 100644
index 0000000..1e6ceb2
--- /dev/null
+++ b/src/components/pages/address/displays/ERC1155Display.tsx
@@ -0,0 +1,385 @@
+import type React from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { AppContext } from "../../../../context";
+import { useSourcify } from "../../../../hooks/useSourcify";
+import { fetchToken, getAssetUrl, type TokenMetadata } from "../../../../services/MetadataService";
+import type {
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  RPCMetadata,
+  Transaction,
+} from "../../../../types";
+import { decodeAbiString } from "../../../../utils/hexUtils";
+import { AddressHeader, ContractDetails, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
+
+interface ERC1155DisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const ERC1155Display: React.FC<ERC1155DisplayProps> = ({
+  address,
+  addressHash,
+  networkId,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  ensName,
+  reverseResult,
+  ensRecords,
+  decodedContenthash,
+  ensLoading = false,
+  isMainnet = true,
+}) => {
+  const { jsonFiles, rpcUrls } = useContext(AppContext);
+  const [tokenMetadata, setTokenMetadata] = useState<TokenMetadata | null>(null);
+  const [onChainData, setOnChainData] = useState<{
+    uri?: string;
+    name?: string;
+    symbol?: string;
+  } | null>(null);
+  const [tokenIdInput, setTokenIdInput] = useState("");
+
+  // Fetch Sourcify data
+  const {
+    data: sourcifyData,
+    loading: sourcifyLoading,
+    isVerified,
+  } = useSourcify(Number(networkId), addressHash, true);
+
+  // Fetch token metadata from explorer-metadata
+  useEffect(() => {
+    fetchToken(Number(networkId), addressHash).then(setTokenMetadata).catch(console.error);
+  }, [networkId, addressHash]);
+
+  // Fetch on-chain ERC1155 data
+  useEffect(() => {
+    const fetchOnChainData = async () => {
+      const chainId = Number(networkId);
+      const rpcUrlsForChain = rpcUrls[chainId as keyof typeof rpcUrls];
+      if (!rpcUrlsForChain) return;
+
+      const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+      if (!rpcUrl) return;
+
+      const results: { uri?: string; name?: string; symbol?: string } = {};
+
+      // Fetch name and symbol
+      const calls = [
+        { selector: "0x06fdde03", key: "name" }, // name()
+        { selector: "0x95d89b41", key: "symbol" }, // symbol()
+      ];
+
+      for (const call of calls) {
+        try {
+          const response = await fetch(rpcUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              jsonrpc: "2.0",
+              method: "eth_call",
+              params: [{ to: addressHash, data: call.selector }, "latest"],
+              id: 1,
+            }),
+          });
+          const data = await response.json();
+          if (!data.error && data.result && data.result !== "0x") {
+            const decoded = decodeAbiString(data.result);
+            if (decoded) {
+              results[call.key as "name" | "symbol"] = decoded;
+            }
+          }
+        } catch {
+          // Continue
+        }
+      }
+
+      // Try to get URI for token ID 0 as a sample
+      // uri(uint256) with tokenId = 0
+      const uriSelector =
+        "0x0e89341c0000000000000000000000000000000000000000000000000000000000000000";
+
+      try {
+        const response = await fetch(rpcUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            jsonrpc: "2.0",
+            method: "eth_call",
+            params: [{ to: addressHash, data: uriSelector }, "latest"],
+            id: 1,
+          }),
+        });
+        const data = await response.json();
+        if (!data.error && data.result && data.result !== "0x") {
+          const uri = decodeAbiString(data.result);
+          if (uri) {
+            results.uri = uri;
+          }
+        }
+      } catch {
+        // Continue
+      }
+
+      if (Object.keys(results).length > 0) {
+        setOnChainData(results);
+      }
+    };
+
+    fetchOnChainData();
+  }, [networkId, addressHash, rpcUrls]);
+
+  // Check if we have local artifact data
+  const localArtifact = jsonFiles[addressHash.toLowerCase()];
+
+  const parsedLocalData = useMemo(() => {
+    if (!localArtifact) return null;
+    return {
+      name: localArtifact.contractName,
+      compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+      evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+      abi: localArtifact.abi,
+      files: localArtifact.sourceCode
+        ? [
+            {
+              name: localArtifact.sourceName || "Contract.sol",
+              path: localArtifact.sourceName || "Contract.sol",
+              content: localArtifact.sourceCode,
+            },
+          ]
+        : undefined,
+      metadata: {
+        language: localArtifact.buildInfo?.input?.language,
+        compiler: localArtifact.buildInfo
+          ? { version: localArtifact.buildInfo.solcVersion }
+          : undefined,
+      },
+      match: "perfect" as const,
+      creation_match: null,
+      runtime_match: null,
+      chainId: networkId,
+      address: addressHash,
+      verifiedAt: undefined,
+    };
+  }, [localArtifact, networkId, addressHash]);
+
+  const contractData = useMemo(
+    () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+    [isVerified, sourcifyData, parsedLocalData],
+  );
+
+  const hasVerifiedContract = isVerified || parsedLocalData;
+
+  // Combine token data
+  const collectionName = tokenMetadata?.name || onChainData?.name || contractData?.name;
+  const collectionSymbol = tokenMetadata?.symbol || onChainData?.symbol;
+  const collectionLogo = tokenMetadata?.logo
+    ? getAssetUrl(tokenMetadata.logo)
+    : getAssetUrl(`assets/tokens/${networkId}/${addressHash.toLowerCase()}.png`);
+
+  return (
+    <div className="block-display-card">
+      <AddressHeader
+        addressHash={addressHash}
+        addressType="erc1155"
+        ensName={ensName || reverseResult?.ensName}
+        metadata={metadata}
+        selectedProvider={selectedProvider}
+        onProviderSelect={onProviderSelect}
+        tokenSymbol={collectionSymbol}
+        tokenName={collectionName}
+      />
+
+      <div className="address-section-content">
+        {/* Multi-Token Collection Details */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">Multi-Token Collection Details</span>
+          </div>
+
+          {/* Collection Logo and Name */}
+          <div className="tx-row">
+            <span className="tx-label">Collection:</span>
+            <span className="tx-value">
+              <div className="token-info-row">
+                <img
+                  src={collectionLogo}
+                  alt={collectionSymbol || "Multi-Token Collection"}
+                  className="token-logo"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+                <span className="token-name-symbol">
+                  {collectionName && <span className="token-name">{collectionName}</span>}
+                  {collectionSymbol && <span className="token-symbol">({collectionSymbol})</span>}
+                </span>
+              </div>
+            </span>
+          </div>
+
+          {/* Token Standard */}
+          <div className="tx-row">
+            <span className="tx-label">Token Standard:</span>
+            <span className="tx-value">
+              <span className="token-standard-badge token-standard-erc1155">ERC-1155</span>
+            </span>
+          </div>
+
+          {/* Metadata URI */}
+          {onChainData?.uri && (
+            <div className="tx-row">
+              <span className="tx-label">Metadata URI:</span>
+              <span className="tx-value">
+                <span className="tx-mono word-break-all">
+                  {onChainData.uri.length > 60
+                    ? `${onChainData.uri.slice(0, 60)}...`
+                    : onChainData.uri}
+                </span>
+              </span>
+            </div>
+          )}
+
+          {/* Balance */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Balance:</span>
+            <span className="tx-value">
+              <span className="tx-value-highlight">
+                {(() => {
+                  try {
+                    const eth = Number(address.balance) / 1e18;
+                    return `${eth.toFixed(6)} ETH`;
+                  } catch {
+                    return address.balance;
+                  }
+                })()}
+              </span>
+            </span>
+          </div>
+
+          {/* Transaction Count */}
+          <div className="tx-row">
+            <span className="tx-label">Transactions:</span>
+            <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+          </div>
+
+          {/* Verification Status */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Verified:</span>
+            <span className="tx-value">
+              {sourcifyLoading ? (
+                <span className="verification-checking">Checking Sourcify...</span>
+              ) : hasVerifiedContract ? (
+                <span className="flex-align-center-gap-8">
+                  <span className="tx-value-highlight">✓ Verified</span>
+                  {contractData?.match && (
+                    <span className="match-badge match-badge-full">
+                      {contractData.match === "perfect"
+                        ? parsedLocalData
+                          ? "Local JSON"
+                          : "Perfect Match"
+                        : "Partial Match"}
+                    </span>
+                  )}
+                </span>
+              ) : (
+                <span className="verification-not-verified">Not Verified</span>
+              )}
+            </span>
+          </div>
+        </div>
+
+        {/* Token ID Lookup */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">View Token</span>
+          </div>
+          <div className="erc1155-token-lookup">
+            <div className="erc1155-token-lookup-row">
+              <input
+                type="text"
+                placeholder="Enter Token ID"
+                value={tokenIdInput}
+                onChange={(e) => setTokenIdInput(e.target.value)}
+                className="erc1155-token-input"
+              />
+              <Link
+                to={tokenIdInput ? `/${networkId}/address/${addressHash}/${tokenIdInput}` : "#"}
+                className={`erc1155-view-button ${!tokenIdInput ? "disabled" : ""}`}
+                onClick={(e) => {
+                  if (!tokenIdInput) {
+                    e.preventDefault();
+                  }
+                }}
+              >
+                View Token
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        {/* ENS Records Section */}
+        {(ensName || reverseResult?.ensName || ensLoading) && (
+          <ENSRecordsDetails
+            ensName={ensName || null}
+            reverseResult={reverseResult}
+            records={ensRecords}
+            decodedContenthash={decodedContenthash}
+            loading={ensLoading}
+            isMainnet={isMainnet}
+          />
+        )}
+
+        {/* Contract Verification Details */}
+        {hasVerifiedContract && contractData && (
+          <ContractDetails
+            addressHash={addressHash}
+            networkId={networkId}
+            code={address.code}
+            contractData={contractData}
+            isLocalArtifact={!!parsedLocalData && !isVerified}
+            sourcifyUrl={
+              sourcifyData
+                ? `https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`
+                : undefined
+            }
+          />
+        )}
+
+        {/* Transaction History */}
+        <TransactionHistory
+          networkId={networkId}
+          addressHash={addressHash}
+          transactionsResult={transactionsResult}
+          transactionDetails={transactionDetails}
+          loadingTxDetails={loadingTxDetails}
+          contractAbi={contractData?.abi}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ERC1155Display;
diff --git a/src/components/pages/address/displays/ERC20Display.tsx b/src/components/pages/address/displays/ERC20Display.tsx
new file mode 100644
index 0000000..bae539f
--- /dev/null
+++ b/src/components/pages/address/displays/ERC20Display.tsx
@@ -0,0 +1,368 @@
+import type React from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { AppContext } from "../../../../context";
+import { useSourcify } from "../../../../hooks/useSourcify";
+import { fetchToken, getAssetUrl, type TokenMetadata } from "../../../../services/MetadataService";
+import type {
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  RPCMetadata,
+  Transaction,
+} from "../../../../types";
+import { AddressHeader, ContractDetails, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
+
+interface ERC20DisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const ERC20Display: React.FC<ERC20DisplayProps> = ({
+  address,
+  addressHash,
+  networkId,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  ensName,
+  reverseResult,
+  ensRecords,
+  decodedContenthash,
+  ensLoading = false,
+  isMainnet = true,
+}) => {
+  const { jsonFiles, rpcUrls } = useContext(AppContext);
+  const [tokenMetadata, setTokenMetadata] = useState<TokenMetadata | null>(null);
+  const [onChainData, setOnChainData] = useState<{
+    name?: string;
+    symbol?: string;
+    decimals?: number;
+    totalSupply?: string;
+  } | null>(null);
+
+  // Fetch Sourcify data
+  const {
+    data: sourcifyData,
+    loading: sourcifyLoading,
+    isVerified,
+  } = useSourcify(Number(networkId), addressHash, true);
+
+  // Fetch token metadata from explorer-metadata
+  useEffect(() => {
+    fetchToken(Number(networkId), addressHash).then(setTokenMetadata).catch(console.error);
+  }, [networkId, addressHash]);
+
+  // Fetch on-chain token data
+  useEffect(() => {
+    const fetchOnChainData = async () => {
+      const chainId = Number(networkId);
+      const rpcUrlsForChain = rpcUrls[chainId as keyof typeof rpcUrls];
+      if (!rpcUrlsForChain) return;
+
+      const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+      if (!rpcUrl) return;
+
+      const calls = [
+        { selector: "0x06fdde03", key: "name" }, // name()
+        { selector: "0x95d89b41", key: "symbol" }, // symbol()
+        { selector: "0x313ce567", key: "decimals" }, // decimals()
+        { selector: "0x18160ddd", key: "totalSupply" }, // totalSupply()
+      ];
+
+      const results: Record<string, string> = {};
+
+      for (const call of calls) {
+        try {
+          const response = await fetch(rpcUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              jsonrpc: "2.0",
+              method: "eth_call",
+              params: [{ to: addressHash, data: call.selector }, "latest"],
+              id: 1,
+            }),
+          });
+          const data = await response.json();
+          if (!data.error && data.result && data.result !== "0x") {
+            results[call.key] = data.result;
+          }
+        } catch {
+          // Continue
+        }
+      }
+
+      // Decode results
+      const decoded: typeof onChainData = {};
+
+      // Decode string (name, symbol)
+      const decodeString = (hex: string): string => {
+        try {
+          // Remove 0x prefix
+          const data = hex.slice(2);
+          // Check if it's dynamic string (offset + length + data)
+          if (data.length >= 128) {
+            const lengthHex = data.slice(64, 128);
+            const length = parseInt(lengthHex, 16);
+            const strHex = data.slice(128, 128 + length * 2);
+            return Buffer.from(strHex, "hex").toString("utf8");
+          }
+          return "";
+        } catch {
+          return "";
+        }
+      };
+
+      if (results.name) {
+        decoded.name = decodeString(results.name);
+      }
+      if (results.symbol) {
+        decoded.symbol = decodeString(results.symbol);
+      }
+      if (results.decimals) {
+        decoded.decimals = parseInt(results.decimals, 16);
+      }
+      if (results.totalSupply) {
+        decoded.totalSupply = BigInt(results.totalSupply).toString();
+      }
+
+      setOnChainData(decoded);
+    };
+
+    fetchOnChainData();
+  }, [networkId, addressHash, rpcUrls]);
+
+  // Check if we have local artifact data
+  const localArtifact = jsonFiles[addressHash.toLowerCase()];
+
+  const parsedLocalData = useMemo(() => {
+    if (!localArtifact) return null;
+    return {
+      name: localArtifact.contractName,
+      compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+      evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+      abi: localArtifact.abi,
+      files: localArtifact.sourceCode
+        ? [
+            {
+              name: localArtifact.sourceName || "Contract.sol",
+              path: localArtifact.sourceName || "Contract.sol",
+              content: localArtifact.sourceCode,
+            },
+          ]
+        : undefined,
+      metadata: {
+        language: localArtifact.buildInfo?.input?.language,
+        compiler: localArtifact.buildInfo
+          ? { version: localArtifact.buildInfo.solcVersion }
+          : undefined,
+      },
+      match: "perfect" as const,
+      creation_match: null,
+      runtime_match: null,
+      chainId: networkId,
+      address: addressHash,
+      verifiedAt: undefined,
+    };
+  }, [localArtifact, networkId, addressHash]);
+
+  const contractData = useMemo(
+    () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+    [isVerified, sourcifyData, parsedLocalData],
+  );
+
+  const hasVerifiedContract = isVerified || parsedLocalData;
+
+  // Combine token data from metadata and on-chain
+  const tokenName = tokenMetadata?.name || onChainData?.name;
+  const tokenSymbol = tokenMetadata?.symbol || onChainData?.symbol;
+  const tokenDecimals = tokenMetadata?.decimals ?? onChainData?.decimals;
+  const tokenTotalSupply = onChainData?.totalSupply;
+  const tokenLogo = tokenMetadata?.logo
+    ? getAssetUrl(tokenMetadata.logo)
+    : getAssetUrl(`assets/tokens/${networkId}/${addressHash.toLowerCase()}.png`);
+
+  // Format total supply
+  const formattedTotalSupply = useMemo(() => {
+    if (!tokenTotalSupply || tokenDecimals === undefined) return null;
+    try {
+      const supply = BigInt(tokenTotalSupply);
+      const divisor = BigInt(10 ** tokenDecimals);
+      const whole = supply / divisor;
+      return whole.toLocaleString();
+    } catch {
+      return tokenTotalSupply;
+    }
+  }, [tokenTotalSupply, tokenDecimals]);
+
+  return (
+    <div className="block-display-card">
+      <AddressHeader
+        addressHash={addressHash}
+        addressType="erc20"
+        ensName={ensName || reverseResult?.ensName}
+        metadata={metadata}
+        selectedProvider={selectedProvider}
+        onProviderSelect={onProviderSelect}
+        tokenSymbol={tokenSymbol}
+        tokenName={tokenName}
+      />
+
+      <div className="address-section-content">
+        {/* Token Details Section */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">Token Details</span>
+          </div>
+
+          {/* Token Logo and Name */}
+          <div className="tx-row">
+            <span className="tx-label">Token:</span>
+            <span className="tx-value">
+              <div className="token-info-row">
+                <img
+                  src={tokenLogo}
+                  alt={tokenSymbol || "Token"}
+                  className="token-logo"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+                <span className="token-name-symbol">
+                  {tokenName && <span className="token-name">{tokenName}</span>}
+                  {tokenSymbol && <span className="token-symbol">({tokenSymbol})</span>}
+                </span>
+              </div>
+            </span>
+          </div>
+
+          {/* Decimals */}
+          {tokenDecimals !== undefined && (
+            <div className="tx-row">
+              <span className="tx-label">Decimals:</span>
+              <span className="tx-value">{tokenDecimals}</span>
+            </div>
+          )}
+
+          {/* Total Supply */}
+          {formattedTotalSupply && (
+            <div className="tx-row">
+              <span className="tx-label">Total Supply:</span>
+              <span className="tx-value">
+                {formattedTotalSupply} {tokenSymbol}
+              </span>
+            </div>
+          )}
+
+          {/* Balance */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Balance:</span>
+            <span className="tx-value">
+              <span className="tx-value-highlight">
+                {(() => {
+                  try {
+                    const eth = Number(address.balance) / 1e18;
+                    return `${eth.toFixed(6)} ETH`;
+                  } catch {
+                    return address.balance;
+                  }
+                })()}
+              </span>
+            </span>
+          </div>
+
+          {/* Transaction Count */}
+          <div className="tx-row">
+            <span className="tx-label">Transactions:</span>
+            <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+          </div>
+
+          {/* Verification Status */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Verified:</span>
+            <span className="tx-value">
+              {sourcifyLoading ? (
+                <span className="verification-checking">Checking Sourcify...</span>
+              ) : hasVerifiedContract ? (
+                <span className="flex-align-center-gap-8">
+                  <span className="tx-value-highlight">✓ Verified</span>
+                  {contractData?.match && (
+                    <span className="match-badge match-badge-full">
+                      {contractData.match === "perfect"
+                        ? parsedLocalData
+                          ? "Local JSON"
+                          : "Perfect Match"
+                        : "Partial Match"}
+                    </span>
+                  )}
+                </span>
+              ) : (
+                <span className="verification-not-verified">Not Verified</span>
+              )}
+            </span>
+          </div>
+        </div>
+
+        {/* ENS Records Section */}
+        {(ensName || reverseResult?.ensName || ensLoading) && (
+          <ENSRecordsDetails
+            ensName={ensName || null}
+            reverseResult={reverseResult}
+            records={ensRecords}
+            decodedContenthash={decodedContenthash}
+            loading={ensLoading}
+            isMainnet={isMainnet}
+          />
+        )}
+
+        {/* Contract Verification Details */}
+        {hasVerifiedContract && contractData && (
+          <ContractDetails
+            addressHash={addressHash}
+            networkId={networkId}
+            code={address.code}
+            contractData={contractData}
+            isLocalArtifact={!!parsedLocalData && !isVerified}
+            sourcifyUrl={
+              sourcifyData
+                ? `https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`
+                : undefined
+            }
+          />
+        )}
+
+        {/* Transaction History */}
+        <TransactionHistory
+          networkId={networkId}
+          addressHash={addressHash}
+          transactionsResult={transactionsResult}
+          transactionDetails={transactionDetails}
+          loadingTxDetails={loadingTxDetails}
+          contractAbi={contractData?.abi}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ERC20Display;
diff --git a/src/components/pages/address/displays/ERC721Display.tsx b/src/components/pages/address/displays/ERC721Display.tsx
new file mode 100644
index 0000000..aba098c
--- /dev/null
+++ b/src/components/pages/address/displays/ERC721Display.tsx
@@ -0,0 +1,361 @@
+import type React from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { AppContext } from "../../../../context";
+import { useSourcify } from "../../../../hooks/useSourcify";
+import { fetchToken, getAssetUrl, type TokenMetadata } from "../../../../services/MetadataService";
+import type {
+  Address,
+  AddressTransactionsResult,
+  DecodedContenthash,
+  ENSRecords,
+  ENSReverseResult,
+  RPCMetadata,
+  Transaction,
+} from "../../../../types";
+import { decodeAbiString } from "../../../../utils/hexUtils";
+import { AddressHeader, ContractDetails, TransactionHistory } from "../shared";
+import ENSRecordsDetails from "../shared/ENSRecordsDisplay";
+
+interface ERC721DisplayProps {
+  address: Address;
+  addressHash: string;
+  networkId: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  // ENS props
+  ensName?: string | null;
+  reverseResult?: ENSReverseResult | null;
+  ensRecords?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  ensLoading?: boolean;
+  isMainnet?: boolean;
+}
+
+const ERC721Display: React.FC<ERC721DisplayProps> = ({
+  address,
+  addressHash,
+  networkId,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  ensName,
+  reverseResult,
+  ensRecords,
+  decodedContenthash,
+  ensLoading = false,
+  isMainnet = true,
+}) => {
+  const { jsonFiles, rpcUrls } = useContext(AppContext);
+  const [tokenMetadata, setTokenMetadata] = useState<TokenMetadata | null>(null);
+  const [onChainData, setOnChainData] = useState<{
+    name?: string;
+    symbol?: string;
+    totalSupply?: string;
+  } | null>(null);
+  const [tokenIdInput, setTokenIdInput] = useState("");
+
+  // Fetch Sourcify data
+  const {
+    data: sourcifyData,
+    loading: sourcifyLoading,
+    isVerified,
+  } = useSourcify(Number(networkId), addressHash, true);
+
+  // Fetch token metadata from explorer-metadata
+  useEffect(() => {
+    fetchToken(Number(networkId), addressHash).then(setTokenMetadata).catch(console.error);
+  }, [networkId, addressHash]);
+
+  // Fetch on-chain NFT data
+  useEffect(() => {
+    const fetchOnChainData = async () => {
+      const chainId = Number(networkId);
+      const rpcUrlsForChain = rpcUrls[chainId as keyof typeof rpcUrls];
+      if (!rpcUrlsForChain) return;
+
+      const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+      if (!rpcUrl) return;
+
+      const calls = [
+        { selector: "0x06fdde03", key: "name" }, // name()
+        { selector: "0x95d89b41", key: "symbol" }, // symbol()
+        { selector: "0x18160ddd", key: "totalSupply" }, // totalSupply()
+      ];
+
+      const results: Record<string, string> = {};
+
+      for (const call of calls) {
+        try {
+          const response = await fetch(rpcUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              jsonrpc: "2.0",
+              method: "eth_call",
+              params: [{ to: addressHash, data: call.selector }, "latest"],
+              id: 1,
+            }),
+          });
+          const data = await response.json();
+          if (!data.error && data.result && data.result !== "0x") {
+            results[call.key] = data.result;
+          }
+        } catch {
+          // Continue
+        }
+      }
+
+      // Decode results
+      const decoded: typeof onChainData = {};
+
+      if (results.name) {
+        decoded.name = decodeAbiString(results.name);
+      }
+      if (results.symbol) {
+        decoded.symbol = decodeAbiString(results.symbol);
+      }
+      if (results.totalSupply) {
+        decoded.totalSupply = BigInt(results.totalSupply).toString();
+      }
+
+      setOnChainData(decoded);
+    };
+
+    fetchOnChainData();
+  }, [networkId, addressHash, rpcUrls]);
+
+  // Check if we have local artifact data
+  const localArtifact = jsonFiles[addressHash.toLowerCase()];
+
+  const parsedLocalData = useMemo(() => {
+    if (!localArtifact) return null;
+    return {
+      name: localArtifact.contractName,
+      compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+      evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+      abi: localArtifact.abi,
+      files: localArtifact.sourceCode
+        ? [
+            {
+              name: localArtifact.sourceName || "Contract.sol",
+              path: localArtifact.sourceName || "Contract.sol",
+              content: localArtifact.sourceCode,
+            },
+          ]
+        : undefined,
+      metadata: {
+        language: localArtifact.buildInfo?.input?.language,
+        compiler: localArtifact.buildInfo
+          ? { version: localArtifact.buildInfo.solcVersion }
+          : undefined,
+      },
+      match: "perfect" as const,
+      creation_match: null,
+      runtime_match: null,
+      chainId: networkId,
+      address: addressHash,
+      verifiedAt: undefined,
+    };
+  }, [localArtifact, networkId, addressHash]);
+
+  const contractData = useMemo(
+    () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+    [isVerified, sourcifyData, parsedLocalData],
+  );
+
+  const hasVerifiedContract = isVerified || parsedLocalData;
+
+  // Combine NFT data
+  const collectionName = tokenMetadata?.name || onChainData?.name;
+  const collectionSymbol = tokenMetadata?.symbol || onChainData?.symbol;
+  const totalSupply = onChainData?.totalSupply;
+  const collectionLogo = tokenMetadata?.logo
+    ? getAssetUrl(tokenMetadata.logo)
+    : getAssetUrl(`assets/tokens/${networkId}/${addressHash.toLowerCase()}.png`);
+
+  return (
+    <div className="block-display-card">
+      <AddressHeader
+        addressHash={addressHash}
+        addressType="erc721"
+        ensName={ensName || reverseResult?.ensName}
+        metadata={metadata}
+        selectedProvider={selectedProvider}
+        onProviderSelect={onProviderSelect}
+        tokenSymbol={collectionSymbol}
+        tokenName={collectionName}
+      />
+
+      <div className="address-section-content">
+        {/* NFT Collection Details */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">NFT Collection Details</span>
+          </div>
+
+          {/* Collection Logo and Name */}
+          <div className="tx-row">
+            <span className="tx-label">Collection:</span>
+            <span className="tx-value">
+              <div className="token-info-row">
+                <img
+                  src={collectionLogo}
+                  alt={collectionSymbol || "NFT Collection"}
+                  className="token-logo"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+                <span className="token-name-symbol">
+                  {collectionName && <span className="token-name">{collectionName}</span>}
+                  {collectionSymbol && <span className="token-symbol">({collectionSymbol})</span>}
+                </span>
+              </div>
+            </span>
+          </div>
+
+          {/* Token Standard */}
+          <div className="tx-row">
+            <span className="tx-label">Token Standard:</span>
+            <span className="tx-value">
+              <span className="token-standard-badge token-standard-erc721">ERC-721</span>
+            </span>
+          </div>
+
+          {/* Total Supply */}
+          {totalSupply && (
+            <div className="tx-row">
+              <span className="tx-label">Total Minted:</span>
+              <span className="tx-value">{Number(totalSupply).toLocaleString()} NFTs</span>
+            </div>
+          )}
+
+          {/* Balance */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Balance:</span>
+            <span className="tx-value">
+              <span className="tx-value-highlight">
+                {(() => {
+                  try {
+                    const eth = Number(address.balance) / 1e18;
+                    return `${eth.toFixed(6)} ETH`;
+                  } catch {
+                    return address.balance;
+                  }
+                })()}
+              </span>
+            </span>
+          </div>
+
+          {/* Transaction Count */}
+          <div className="tx-row">
+            <span className="tx-label">Transactions:</span>
+            <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+          </div>
+
+          {/* Verification Status */}
+          <div className="tx-row">
+            <span className="tx-label">Contract Verified:</span>
+            <span className="tx-value">
+              {sourcifyLoading ? (
+                <span className="verification-checking">Checking Sourcify...</span>
+              ) : hasVerifiedContract ? (
+                <span className="flex-align-center-gap-8">
+                  <span className="tx-value-highlight">✓ Verified</span>
+                  {contractData?.match && (
+                    <span className="match-badge match-badge-full">
+                      {contractData.match === "perfect"
+                        ? parsedLocalData
+                          ? "Local JSON"
+                          : "Perfect Match"
+                        : "Partial Match"}
+                    </span>
+                  )}
+                </span>
+              ) : (
+                <span className="verification-not-verified">Not Verified</span>
+              )}
+            </span>
+          </div>
+        </div>
+
+        {/* Token ID Lookup */}
+        <div className="tx-details">
+          <div className="tx-section">
+            <span className="tx-section-title">View NFT</span>
+          </div>
+          <div className="erc721-token-lookup">
+            <div className="erc721-token-lookup-row">
+              <input
+                type="text"
+                placeholder="Enter Token ID"
+                value={tokenIdInput}
+                onChange={(e) => setTokenIdInput(e.target.value)}
+                className="erc721-token-input"
+              />
+              <Link
+                to={tokenIdInput ? `/${networkId}/address/${addressHash}/${tokenIdInput}` : "#"}
+                className={`erc721-view-button ${!tokenIdInput ? "disabled" : ""}`}
+                onClick={(e) => {
+                  if (!tokenIdInput) {
+                    e.preventDefault();
+                  }
+                }}
+              >
+                View NFT
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        {/* ENS Records Section */}
+        {(ensName || reverseResult?.ensName || ensLoading) && (
+          <ENSRecordsDetails
+            ensName={ensName || null}
+            reverseResult={reverseResult}
+            records={ensRecords}
+            decodedContenthash={decodedContenthash}
+            loading={ensLoading}
+            isMainnet={isMainnet}
+          />
+        )}
+
+        {/* Contract Verification Details */}
+        {hasVerifiedContract && contractData && (
+          <ContractDetails
+            addressHash={addressHash}
+            networkId={networkId}
+            code={address.code}
+            contractData={contractData}
+            isLocalArtifact={!!parsedLocalData && !isVerified}
+            sourcifyUrl={
+              sourcifyData
+                ? `https://repo.sourcify.dev/contracts/full_match/${networkId}/${addressHash}/`
+                : undefined
+            }
+          />
+        )}
+
+        {/* Transaction History */}
+        <TransactionHistory
+          networkId={networkId}
+          addressHash={addressHash}
+          transactionsResult={transactionsResult}
+          transactionDetails={transactionDetails}
+          loadingTxDetails={loadingTxDetails}
+          contractAbi={contractData?.abi}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ERC721Display;
diff --git a/src/components/pages/address/displays/index.ts b/src/components/pages/address/displays/index.ts
new file mode 100644
index 0000000..42830a0
--- /dev/null
+++ b/src/components/pages/address/displays/index.ts
@@ -0,0 +1,5 @@
+export { default as AccountDisplay } from "./AccountDisplay";
+export { default as ContractDisplay } from "./ContractDisplay";
+export { default as ERC20Display } from "./ERC20Display";
+export { default as ERC721Display } from "./ERC721Display";
+export { default as ERC1155Display } from "./ERC1155Display";
diff --git a/src/components/pages/address/index.tsx b/src/components/pages/address/index.tsx
new file mode 100644
index 0000000..e270fd1
--- /dev/null
+++ b/src/components/pages/address/index.tsx
@@ -0,0 +1,298 @@
+import { useContext, useEffect, useMemo, useState } from "react";
+import { useLocation, useParams } from "react-router-dom";
+import { AppContext } from "../../../context";
+import { useDataService } from "../../../hooks/useDataService";
+import { useENS } from "../../../hooks/useENS";
+import { ENSService } from "../../../services/ENS/ENSService";
+import type {
+  Address as AddressData,
+  AddressTransactionsResult,
+  AddressType,
+  DataWithMetadata,
+  Transaction,
+} from "../../../types";
+import { fetchAddressWithType } from "../../../utils/addressTypeDetection";
+import Loader from "../../common/Loader";
+import {
+  AccountDisplay,
+  ContractDisplay,
+  ERC20Display,
+  ERC721Display,
+  ERC1155Display,
+} from "./displays";
+
+export default function Address() {
+  const { networkId, address: addressParam } = useParams<{
+    networkId?: string;
+    address?: string;
+  }>();
+  const location = useLocation();
+  const numericNetworkId = Number(networkId) || 1;
+  const { rpcUrls } = useContext(AppContext);
+  const [addressData, setAddressData] = useState<AddressData | null>(null);
+  const [addressType, setAddressType] = useState<AddressType>("account");
+  const [transactionsResult, setTransactionsResult] = useState<AddressTransactionsResult | null>(
+    null,
+  );
+  const [transactionDetails, setTransactionDetails] = useState<Transaction[]>([]);
+  const [loadingTxDetails, setLoadingTxDetails] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // ENS resolution state
+  const [resolvedAddress, setResolvedAddress] = useState<string | null>(null);
+  const [ensResolving, setEnsResolving] = useState(false);
+  const [ensError, setEnsError] = useState<string | null>(null);
+
+  // Detect if the URL parameter is an ENS name
+  const isEnsName = useMemo(() => {
+    return addressParam ? ENSService.isENSName(addressParam) : false;
+  }, [addressParam]);
+
+  // The actual address to use (resolved from ENS or direct from URL)
+  const address = isEnsName ? resolvedAddress : addressParam;
+
+  // Get ENS name from navigation state or from URL if it's an ENS name
+  const initialEnsName =
+    (location.state as { ensName?: string })?.ensName || (isEnsName ? addressParam : undefined);
+
+  // Create dataService after we know the address
+  const dataService = useDataService(numericNetworkId);
+
+  // Resolve ENS name to address
+  useEffect(() => {
+    if (!isEnsName || !addressParam) {
+      setResolvedAddress(null);
+      setEnsResolving(false);
+      setEnsError(null);
+      return;
+    }
+
+    const mainnetRpcUrls = rpcUrls[1];
+    if (!mainnetRpcUrls || mainnetRpcUrls.length === 0) {
+      setEnsError("No Ethereum mainnet RPC configured for ENS resolution");
+      setEnsResolving(false);
+      return;
+    }
+
+    setEnsResolving(true);
+    setEnsError(null);
+
+    const ensService = new ENSService(mainnetRpcUrls);
+    ensService
+      .resolve(addressParam)
+      .then((resolved) => {
+        if (resolved) {
+          setResolvedAddress(resolved);
+        } else {
+          setEnsError(`Could not resolve ENS name: ${addressParam}`);
+        }
+      })
+      .catch((err) => {
+        setEnsError(`Error resolving ENS: ${err instanceof Error ? err.message : "Unknown error"}`);
+      })
+      .finally(() => {
+        setEnsResolving(false);
+      });
+  }, [isEnsName, addressParam, rpcUrls]);
+
+  // Use ENS hook to get reverse lookup and records
+  const {
+    ensName,
+    reverseResult,
+    records: ensRecords,
+    decodedContenthash,
+    loading: ensLoading,
+    isMainnet,
+  } = useENS(address ?? undefined, numericNetworkId, initialEnsName);
+
+  // Fetch address data and detect type in a single flow
+  useEffect(() => {
+    if (!address) {
+      setLoading(false);
+      return;
+    }
+
+    const rpcUrlsForChain = rpcUrls[numericNetworkId as keyof typeof rpcUrls];
+    if (!rpcUrlsForChain) {
+      setError("No RPC URL configured for this network");
+      setLoading(false);
+      return;
+    }
+
+    const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+    if (!rpcUrl) {
+      setError("No RPC URL configured for this network");
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    fetchAddressWithType({
+      addressHash: address,
+      chainId: numericNetworkId,
+      rpcUrl,
+    })
+      .then((result) => {
+        setAddressData(result.address);
+        setAddressType(result.addressType);
+      })
+      .catch((err) => {
+        setError(err.message || "Failed to fetch address data");
+      })
+      .finally(() => setLoading(false));
+  }, [address, numericNetworkId, rpcUrls]);
+
+  // Fetch transactions separately (still uses dataService for caching benefits)
+  useEffect(() => {
+    if (!dataService || !address) return;
+
+    dataService.networkAdapter
+      .getAddressTransactions(address)
+      .then(async (result) => {
+        setTransactionsResult(result);
+
+        if (result.transactions.length > 0) {
+          setLoadingTxDetails(true);
+          const txsToFetch = result.transactions.slice(0, 25);
+          const txResults = await Promise.all(
+            txsToFetch.map((hash) =>
+              dataService.networkAdapter.getTransaction(hash).catch(() => null),
+            ),
+          );
+          setTransactionDetails(
+            txResults
+              .filter((result): result is DataWithMetadata<Transaction> => result !== null)
+              .map((result) => result.data),
+          );
+          setLoadingTxDetails(false);
+        }
+      })
+      .catch((err) => {
+        setTransactionsResult({
+          transactions: [],
+          source: "none",
+          isComplete: false,
+          message: `Failed to fetch transaction history: ${err.message}`,
+        });
+      });
+  }, [dataService, address]);
+
+  // Show ENS resolving state (must come first before other checks)
+  if (isEnsName && (ensResolving || (!resolvedAddress && !ensError))) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">ENS Name</span>
+            <span className="tx-mono header-subtitle">{addressParam}</span>
+          </div>
+          <div className="card-content-loading">
+            <Loader text={`Resolving ENS name: ${addressParam}...`} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Show ENS resolution error
+  if (ensError) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">ENS Name</span>
+            <span className="tx-mono header-subtitle">{addressParam}</span>
+          </div>
+          <div className="card-content">
+            <p className="text-error margin-0">Error: {ensError}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">Address</span>
+            <span className="tx-mono header-subtitle">{address}</span>
+          </div>
+          <div className="card-content-loading">
+            <Loader text="Loading address data..." />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">Address</span>
+            <span className="tx-mono header-subtitle">{address}</span>
+          </div>
+          <div className="card-content">
+            <p className="text-error margin-0">Error: {error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!address) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">Address</span>
+          </div>
+          <div className="card-content">
+            <p className="text-muted margin-0">No address provided</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!addressData) {
+    return (
+      <div className="container-wide">
+        <p>Address data not found</p>
+      </div>
+    );
+  }
+
+  // Common props for all display components
+  const displayProps = {
+    address: addressData,
+    addressHash: address,
+    networkId: networkId || "1",
+    transactionsResult,
+    transactionDetails,
+    loadingTxDetails,
+    ensName,
+    reverseResult,
+    ensRecords,
+    decodedContenthash,
+    ensLoading,
+    isMainnet,
+  };
+
+  // Render appropriate display component based on detected type
+  return (
+    <div className="container-wide">
+      {addressType === "account" && <AccountDisplay {...displayProps} />}
+      {addressType === "contract" && <ContractDisplay {...displayProps} />}
+      {addressType === "erc20" && <ERC20Display {...displayProps} />}
+      {addressType === "erc721" && <ERC721Display {...displayProps} />}
+      {addressType === "erc1155" && <ERC1155Display {...displayProps} />}
+    </div>
+  );
+}
diff --git a/src/components/pages/address/shared/AddressHeader.tsx b/src/components/pages/address/shared/AddressHeader.tsx
new file mode 100644
index 0000000..403cc22
--- /dev/null
+++ b/src/components/pages/address/shared/AddressHeader.tsx
@@ -0,0 +1,49 @@
+import type React from "react";
+import type { AddressType, RPCMetadata } from "../../../../types";
+import { getAddressTypeIcon, getAddressTypeLabel } from "../../../../utils/addressTypeDetection";
+import { RPCIndicator } from "../../../common/RPCIndicator";
+
+interface AddressHeaderProps {
+  addressHash: string;
+  addressType: AddressType;
+  ensName?: string | null;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+  tokenSymbol?: string;
+  tokenName?: string;
+}
+
+const AddressHeader: React.FC<AddressHeaderProps> = ({
+  addressHash,
+  addressType,
+  ensName,
+  metadata,
+  selectedProvider,
+  onProviderSelect,
+  tokenSymbol,
+  tokenName,
+}) => {
+  return (
+    <div className="block-display-header address-header">
+      <div>
+        <div className="address-type-indicator">
+          <span className="address-type-icon">{getAddressTypeIcon(addressType)}</span>
+          <span className="address-type-label">{getAddressTypeLabel(addressType)}</span>
+          {tokenSymbol && <span className="address-token-symbol">{tokenSymbol}</span>}
+        </div>
+        {(ensName || tokenName) && <span className="address-ens-name">{ensName || tokenName}</span>}
+        <span className="tx-mono header-subtitle">{addressHash}</span>
+      </div>
+      {metadata && selectedProvider !== undefined && onProviderSelect && (
+        <RPCIndicator
+          metadata={metadata}
+          selectedProvider={selectedProvider}
+          onProviderSelect={onProviderSelect}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AddressHeader;
diff --git a/src/components/pages/address/shared/BalanceSection.tsx b/src/components/pages/address/shared/BalanceSection.tsx
new file mode 100644
index 0000000..aa3971a
--- /dev/null
+++ b/src/components/pages/address/shared/BalanceSection.tsx
@@ -0,0 +1,41 @@
+import type React from "react";
+import { useMemo } from "react";
+import type { Address } from "../../../../types";
+
+interface BalanceSectionProps {
+  address: Address;
+  currency?: string;
+}
+
+const BalanceSection: React.FC<BalanceSectionProps> = ({ address, currency = "ETH" }) => {
+  const formattedBalance = useMemo(() => {
+    try {
+      const eth = Number(address.balance) / 1e18;
+      return `${eth.toFixed(6)} ${currency}`;
+    } catch {
+      return address.balance;
+    }
+  }, [address.balance, currency]);
+
+  return (
+    <div className="tx-details">
+      <div className="tx-section">
+        <span className="tx-section-title">Balance</span>
+      </div>
+
+      <div className="tx-row">
+        <span className="tx-label">Balance:</span>
+        <span className="tx-value">
+          <span className="tx-value-highlight">{formattedBalance}</span>
+        </span>
+      </div>
+
+      <div className="tx-row">
+        <span className="tx-label">Transactions:</span>
+        <span className="tx-value">{Number(address.txCount).toLocaleString()} txns</span>
+      </div>
+    </div>
+  );
+};
+
+export default BalanceSection;
diff --git a/src/components/pages/address/shared/ContractDetails.tsx b/src/components/pages/address/shared/ContractDetails.tsx
new file mode 100644
index 0000000..b49c0ba
--- /dev/null
+++ b/src/components/pages/address/shared/ContractDetails.tsx
@@ -0,0 +1,255 @@
+import type React from "react";
+import { useState } from "react";
+import type { ABI } from "../../../../types";
+import ContractInteraction from "./ContractInteraction";
+
+interface ContractData {
+  name?: string;
+  compilerVersion?: string;
+  evmVersion?: string;
+  chainId?: string;
+  verifiedAt?: string;
+  match?: "perfect" | "partial" | null;
+  metadata?: {
+    compiler?: { version: string };
+    language?: string;
+  };
+  creation_match?: string | null;
+  runtime_match?: string | null;
+  abi?: ABI[];
+  files?: Array<{ name: string; path: string; content: string }>;
+  sources?: Record<string, { content: string }>;
+}
+
+interface ContractDetailsProps {
+  addressHash: string;
+  networkId: string;
+  code: string;
+  contractData: ContractData;
+  isLocalArtifact?: boolean;
+  sourcifyUrl?: string;
+}
+
+const ContractDetails: React.FC<ContractDetailsProps> = ({
+  addressHash,
+  networkId,
+  code,
+  contractData,
+  isLocalArtifact = false,
+  sourcifyUrl,
+}) => {
+  const [showContractDetails, setShowContractDetails] = useState(false);
+
+  // Prepare source files array
+  const sourceFiles =
+    contractData.files && contractData.files.length > 0
+      ? contractData.files
+      : contractData.sources
+        ? Object.entries(contractData.sources).map(([path, source]) => ({
+            name: path,
+            path: path,
+            content: source.content || "",
+          }))
+        : [];
+
+  return (
+    <div className="tx-details">
+      <button
+        type="button"
+        className="tx-section btn-toggle-section"
+        onClick={() => setShowContractDetails(!showContractDetails)}
+      >
+        <span className="tx-section-title">Contract Details</span>
+        <span className="contract-section-toggle">{showContractDetails ? " ▼" : " ▶"}</span>
+      </button>
+
+      {showContractDetails && (
+        <>
+          {contractData.compilerVersion && (
+            <div className="tx-row">
+              <span className="tx-label">Compiler Version</span>
+              <span className="tx-value tx-mono">{contractData.compilerVersion}</span>
+            </div>
+          )}
+
+          {contractData.evmVersion && (
+            <div className="tx-row">
+              <span className="tx-label">EVM Version</span>
+              <span className="tx-value">{contractData.evmVersion}</span>
+            </div>
+          )}
+
+          {contractData.chainId && (
+            <div className="tx-row">
+              <span className="tx-label">Network ID</span>
+              <span className="tx-value">{contractData.chainId}</span>
+            </div>
+          )}
+
+          {contractData.name && (
+            <div className="tx-row">
+              <span className="tx-label">Contract Name</span>
+              <span className="tx-value tx-value-success">{contractData.name}</span>
+            </div>
+          )}
+
+          {contractData.verifiedAt && (
+            <div className="tx-row">
+              <span className="tx-label">Verified At</span>
+              <span className="tx-value">{new Date(contractData.verifiedAt).toLocaleString()}</span>
+            </div>
+          )}
+
+          {contractData.match && (
+            <div className="tx-row">
+              <span className="tx-label">Match Type</span>
+              <span
+                className={`tx-value font-weight-600 ${contractData.match === "perfect" ? "text-success" : "text-warning"}`}
+              >
+                {isLocalArtifact ? "Local JSON" : contractData.match.toUpperCase()}
+              </span>
+            </div>
+          )}
+
+          {contractData.metadata?.compiler && (
+            <div className="tx-row">
+              <span className="tx-label">Compiler</span>
+              <span className="tx-value tx-mono">{contractData.metadata.compiler.version}</span>
+            </div>
+          )}
+
+          {contractData.creation_match && (
+            <div className="tx-row">
+              <span className="tx-label">Creation Match</span>
+              <span
+                className={`tx-value font-weight-600 ${contractData.creation_match === "perfect" ? "text-success" : "text-warning"}`}
+              >
+                {contractData.creation_match.toUpperCase()}
+              </span>
+            </div>
+          )}
+
+          {contractData.runtime_match && (
+            <div className="tx-row">
+              <span className="tx-label">Runtime Match</span>
+              <span
+                className={`tx-value font-weight-600 ${contractData.runtime_match === "perfect" ? "text-success" : "text-warning"}`}
+              >
+                {contractData.runtime_match.toUpperCase()}
+              </span>
+            </div>
+          )}
+
+          {/* Contract Bytecode */}
+          <div className="tx-row-vertical">
+            <button
+              type="button"
+              className="source-toggle-container btn-reset-block"
+              onClick={() => {
+                const elem = document.getElementById("bytecode-content");
+                const icon = document.getElementById("bytecode-icon");
+                if (elem && icon) {
+                  const isHidden = elem.style.display === "none";
+                  elem.style.display = isHidden ? "block" : "none";
+                  icon.textContent = isHidden ? "▼" : "▶";
+                }
+              }}
+            >
+              <span className="tx-label">Contract Bytecode</span>
+              <span id="bytecode-icon" className="source-toggle-icon">
+                ▶
+              </span>
+            </button>
+            <div id="bytecode-content" className="tx-input-data hidden">
+              <code>{code}</code>
+            </div>
+          </div>
+
+          {/* Source Code */}
+          {sourceFiles.length > 0 && (
+            <div className="tx-row-vertical">
+              <button
+                type="button"
+                className="source-toggle-container btn-reset-block"
+                onClick={() => {
+                  const elem = document.getElementById("source-code-content");
+                  const icon = document.getElementById("source-code-icon");
+                  if (elem && icon) {
+                    const isHidden = elem.style.display === "none";
+                    elem.style.display = isHidden ? "block" : "none";
+                    icon.textContent = isHidden ? "▼" : "▶";
+                  }
+                }}
+              >
+                <span className="tx-label">Source Code</span>
+                <span id="source-code-icon" className="source-toggle-icon">
+                  ▶
+                </span>
+              </button>
+              <div id="source-code-content" className="margin-top-8 hidden">
+                {sourceFiles.map((file) => (
+                  <div key={file.path} className="source-file-container">
+                    <div className="source-file-header">📄 {file.name || file.path}</div>
+                    <pre className="source-file-code">{file.content}</pre>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Raw ABI */}
+          {contractData.abi && contractData.abi.length > 0 && (
+            <div className="tx-row-vertical">
+              <button
+                type="button"
+                className="source-toggle-container btn-reset-block"
+                onClick={() => {
+                  const elem = document.getElementById("raw-abi-content");
+                  const icon = document.getElementById("raw-abi-icon");
+                  if (elem && icon) {
+                    const isHidden = elem.style.display === "none";
+                    elem.style.display = isHidden ? "block" : "none";
+                    icon.textContent = isHidden ? "▼" : "▶";
+                  }
+                }}
+              >
+                <span className="tx-label">Raw ABI</span>
+                <span id="raw-abi-icon" className="source-toggle-icon">
+                  ▶
+                </span>
+              </button>
+              <div id="raw-abi-content" className="tx-input-data hidden">
+                <code>{JSON.stringify(contractData.abi, null, 2)}</code>
+              </div>
+            </div>
+          )}
+
+          {/* Contract Functions */}
+          {contractData.abi && contractData.abi.length > 0 && (
+            <ContractInteraction
+              addressHash={addressHash}
+              networkId={networkId}
+              abi={contractData.abi}
+            />
+          )}
+
+          {sourcifyUrl && (
+            <div className="tx-row">
+              <span className="tx-label">Sourcify</span>
+              <a
+                href={sourcifyUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="sourcify-link"
+              >
+                View Full Contract on Sourcify ↗
+              </a>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ContractDetails;
diff --git a/src/components/pages/address/shared/ContractInteraction.tsx b/src/components/pages/address/shared/ContractInteraction.tsx
new file mode 100644
index 0000000..d80de1d
--- /dev/null
+++ b/src/components/pages/address/shared/ContractInteraction.tsx
@@ -0,0 +1,483 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import type React from "react";
+import { useCallback, useContext, useState } from "react";
+import { Link } from "react-router-dom";
+import { encodeFunctionData, parseEther } from "viem";
+import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { AppContext } from "../../../../context";
+import type { ABI, ABIParameter, EventABI, FunctionABI } from "../../../../types";
+
+interface ContractInteractionProps {
+  addressHash: string;
+  networkId: string;
+  abi: ABI[];
+}
+
+const ContractInteraction: React.FC<ContractInteractionProps> = ({
+  addressHash,
+  networkId,
+  abi,
+}) => {
+  const [selectedWriteFunction, setSelectedWriteFunction] = useState<FunctionABI | null>(null);
+  const [selectedReadFunction, setSelectedReadFunction] = useState<FunctionABI | null>(null);
+  const [functionInputs, setFunctionInputs] = useState<Record<string, string>>({});
+  const [readFunctionResult, setReadFunctionResult] = useState<string | null>(null);
+  const [isReadingFunction, setIsReadingFunction] = useState(false);
+  const { rpcUrls } = useContext(AppContext);
+
+  // Wagmi hooks for contract interaction
+  const { data: hash, writeContract, isPending, isError, error } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
+    hash,
+  });
+
+  const handleWriteFunction = useCallback(async () => {
+    if (!selectedWriteFunction) return;
+
+    try {
+      const args: unknown[] = [];
+      if (selectedWriteFunction.inputs && selectedWriteFunction.inputs.length > 0) {
+        for (const input of selectedWriteFunction.inputs) {
+          const paramName = input.name || `param${selectedWriteFunction.inputs.indexOf(input)}`;
+          const value = functionInputs[paramName];
+
+          if (!value && value !== "0") {
+            alert(`Please provide value for ${paramName}`);
+            return;
+          }
+
+          args.push(value);
+        }
+      }
+
+      let txValue: bigint | undefined;
+      const valueKey = "_value";
+      if (selectedWriteFunction.stateMutability === "payable" && functionInputs[valueKey]) {
+        try {
+          txValue = parseEther(functionInputs[valueKey]);
+        } catch {
+          alert("Invalid ETH value");
+          return;
+        }
+      }
+
+      writeContract({
+        address: addressHash as `0x${string}`,
+        abi: abi,
+        functionName: selectedWriteFunction.name,
+        args: args,
+        value: txValue,
+      });
+    } catch (err) {
+      console.error("Error writing to contract:", err);
+      alert(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
+    }
+  }, [selectedWriteFunction, functionInputs, addressHash, abi, writeContract]);
+
+  const handleReadFunction = useCallback(async () => {
+    if (!selectedReadFunction) return;
+
+    setIsReadingFunction(true);
+    setReadFunctionResult(null);
+
+    try {
+      const networkIdNum = Number(networkId);
+      const rpcUrlsForChain = rpcUrls[networkIdNum as keyof typeof rpcUrls];
+
+      if (!rpcUrlsForChain) {
+        throw new Error(`No RPC URL configured for chain ${networkId}`);
+      }
+
+      const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+
+      if (!rpcUrl) {
+        throw new Error(`No RPC URL configured for chain ${networkId}`);
+      }
+
+      const args: unknown[] = [];
+      if (selectedReadFunction.inputs && selectedReadFunction.inputs.length > 0) {
+        for (const input of selectedReadFunction.inputs) {
+          const paramName = input.name || `param${selectedReadFunction.inputs.indexOf(input)}`;
+          const value = functionInputs[paramName];
+
+          if (!value && value !== "0") {
+            alert(`Please provide value for ${paramName}`);
+            setIsReadingFunction(false);
+            return;
+          }
+
+          args.push(value);
+        }
+      }
+
+      const response = await fetch(rpcUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          jsonrpc: "2.0",
+          method: "eth_call",
+          params: [
+            {
+              to: addressHash,
+              data: encodeFunctionData({
+                abi: abi,
+                functionName: selectedReadFunction.name,
+                args: args,
+              }),
+            },
+            "latest",
+          ],
+          id: 1,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (data.error) {
+        throw new Error(data.error.message || "Contract call failed");
+      }
+
+      setReadFunctionResult(data.result);
+    } catch (err) {
+      console.error("Error reading from contract:", err);
+      setReadFunctionResult(`Error: ${err instanceof Error ? err.message : "Unknown error"}`);
+    } finally {
+      setIsReadingFunction(false);
+    }
+  }, [selectedReadFunction, functionInputs, addressHash, abi, networkId, rpcUrls]);
+
+  const readFunctions = abi.filter(
+    (item: ABI): item is FunctionABI =>
+      item.type === "function" &&
+      ((item as FunctionABI).stateMutability === "view" ||
+        (item as FunctionABI).stateMutability === "pure"),
+  );
+
+  const writeFunctions = abi.filter(
+    (item: ABI): item is FunctionABI =>
+      item.type === "function" &&
+      ((item as FunctionABI).stateMutability === "payable" ||
+        (item as FunctionABI).stateMutability === "nonpayable" ||
+        !(item as FunctionABI).stateMutability),
+  );
+
+  const events = abi.filter((item: ABI): item is EventABI => item.type === "event");
+
+  return (
+    <div className="tx-row-vertical">
+      <div className="contract-functions-header">
+        <span className="tx-label">Functions</span>
+        <ConnectButton.Custom>
+          {({
+            account,
+            chain,
+            openAccountModal,
+            openChainModal,
+            openConnectModal,
+            authenticationStatus,
+            mounted,
+          }: Parameters<Parameters<typeof ConnectButton.Custom>[0]["children"]>[0]) => {
+            const ready = mounted && authenticationStatus !== "loading";
+            const connected =
+              ready &&
+              account &&
+              chain &&
+              (!authenticationStatus || authenticationStatus === "authenticated");
+
+            return (
+              <div
+                {...(!ready && {
+                  "aria-hidden": true,
+                  className: "wallet-hidden",
+                })}
+              >
+                {(() => {
+                  if (!connected) {
+                    return (
+                      <button
+                        onClick={openConnectModal}
+                        type="button"
+                        className="btn-connect-wallet"
+                      >
+                        Connect Wallet
+                      </button>
+                    );
+                  }
+
+                  if (chain.unsupported) {
+                    return (
+                      <button onClick={openChainModal} type="button" className="btn-wrong-network">
+                        Wrong Network
+                      </button>
+                    );
+                  }
+
+                  return (
+                    <div className="wallet-connected-container">
+                      <button onClick={openChainModal} type="button" className="btn-chain-selector">
+                        {chain.hasIcon && chain.iconUrl && (
+                          <img
+                            alt={chain.name ?? "Chain icon"}
+                            src={chain.iconUrl}
+                            className="chain-icon"
+                          />
+                        )}
+                        {chain.name}
+                      </button>
+                      <button onClick={openAccountModal} type="button" className="btn-account">
+                        {account.displayName}
+                      </button>
+                    </div>
+                  );
+                })()}
+              </div>
+            );
+          }}
+        </ConnectButton.Custom>
+      </div>
+      <div className="contract-functions-content">
+        {/* Read Functions */}
+        {readFunctions.length > 0 && (
+          <div className="functions-section">
+            <div className="functions-section-title functions-section-title-read">
+              Read Functions ({readFunctions.length})
+            </div>
+            <div className="functions-list">
+              {readFunctions.map((func: FunctionABI) => (
+                <button
+                  type="button"
+                  key={func.name}
+                  onClick={() => {
+                    setSelectedReadFunction(func);
+                    setSelectedWriteFunction(null);
+                    setFunctionInputs({});
+                    setReadFunctionResult(null);
+                  }}
+                  className={`btn-function btn-function-read ${selectedReadFunction?.name === func.name ? "selected" : ""}`}
+                >
+                  {func.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Write Functions */}
+        {writeFunctions.length > 0 && (
+          <div className="functions-section">
+            <div className="functions-section-title functions-section-title-write">
+              Write Functions ({writeFunctions.length})
+            </div>
+            <div className="functions-list">
+              {writeFunctions.map((func: FunctionABI) => (
+                <button
+                  type="button"
+                  key={func.name}
+                  onClick={() => {
+                    setSelectedWriteFunction(func);
+                    setSelectedReadFunction(null);
+                    setFunctionInputs({});
+                    setReadFunctionResult(null);
+                  }}
+                  className={`btn-function btn-function-write ${selectedWriteFunction?.name === func.name ? "selected" : ""}`}
+                >
+                  {func.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Events */}
+        {events.length > 0 && (
+          <div className="functions-section">
+            <div className="functions-section-title functions-section-title-events">
+              Events ({events.length})
+            </div>
+            <div className="functions-list">
+              {events.slice(0, 10).map((event: EventABI) => (
+                <span key={event.name} className="event-badge">
+                  {event.name}
+                </span>
+              ))}
+              {events.length > 10 && (
+                <span className="events-more">+{events.length - 10} more</span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Read Function Form */}
+        {selectedReadFunction && (
+          <div className="function-form function-form-read">
+            <div className="function-form-title function-form-title-read">
+              {selectedReadFunction.name}
+            </div>
+
+            {selectedReadFunction.inputs && selectedReadFunction.inputs.length > 0 ? (
+              <div className="function-inputs">
+                {selectedReadFunction.inputs.map((input: ABIParameter, idx: number) => (
+                  <label
+                    key={`${input.name || idx}-${input.type}`}
+                    className="function-input-label"
+                  >
+                    <span className="function-input-name">
+                      {input.name || `param${idx}`} ({input.type})
+                    </span>
+                    <input
+                      type="text"
+                      value={functionInputs[input.name || `param${idx}`] || ""}
+                      onChange={(e) =>
+                        setFunctionInputs({
+                          ...functionInputs,
+                          [input.name || `param${idx}`]: e.target.value,
+                        })
+                      }
+                      placeholder={`Enter ${input.type}`}
+                      className="function-input function-input-read"
+                    />
+                  </label>
+                ))}
+              </div>
+            ) : (
+              <div className="function-no-params">No parameters required</div>
+            )}
+
+            {readFunctionResult !== null && (
+              <div
+                className={`function-result ${readFunctionResult?.startsWith("Error") ? "function-result-error" : "function-result-success"}`}
+              >
+                <div className="function-result-title">
+                  {readFunctionResult?.startsWith("Error") ? "❌ Error" : "✅ Result"}
+                </div>
+                {readFunctionResult}
+              </div>
+            )}
+
+            <div className="function-actions">
+              <button
+                type="button"
+                onClick={handleReadFunction}
+                disabled={isReadingFunction}
+                className="btn-function-action btn-query"
+              >
+                {isReadingFunction ? "Reading..." : "Query"}
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setSelectedReadFunction(null);
+                  setReadFunctionResult(null);
+                }}
+                className="btn-cancel"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Write Function Form */}
+        {selectedWriteFunction && (
+          <div className="function-form function-form-write">
+            <div className="function-form-title function-form-title-write">
+              {selectedWriteFunction.name}
+              {selectedWriteFunction.stateMutability === "payable" && (
+                <span className="payable-badge">payable</span>
+              )}
+            </div>
+
+            {selectedWriteFunction.inputs && selectedWriteFunction.inputs.length > 0 ? (
+              <div className="function-inputs">
+                {selectedWriteFunction.inputs.map((input: ABIParameter, idx: number) => (
+                  <label
+                    key={`${input.name || idx}-${input.type}`}
+                    className="function-input-label"
+                  >
+                    <span className="function-input-name">
+                      {input.name || `param${idx}`} ({input.type})
+                    </span>
+                    <input
+                      type="text"
+                      value={functionInputs[input.name || `param${idx}`] || ""}
+                      onChange={(e) =>
+                        setFunctionInputs({
+                          ...functionInputs,
+                          [input.name || `param${idx}`]: e.target.value,
+                        })
+                      }
+                      placeholder={`Enter ${input.type}`}
+                      className="function-input function-input-write"
+                    />
+                  </label>
+                ))}
+              </div>
+            ) : (
+              <div className="function-no-params">No parameters required</div>
+            )}
+
+            {selectedWriteFunction.stateMutability === "payable" && (
+              <label className="function-input-label">
+                <span className="function-input-name">Value (ETH)</span>
+                <input
+                  type="text"
+                  // biome-ignore lint/complexity/useLiteralKeys: _value is a special key for ETH value
+                  value={functionInputs["_value"] || ""}
+                  onChange={(e) =>
+                    setFunctionInputs({
+                      ...functionInputs,
+                      _value: e.target.value,
+                    })
+                  }
+                  placeholder="0.0"
+                  className="function-input function-input-value"
+                />
+              </label>
+            )}
+
+            {/* Transaction Status */}
+            {(isPending || isConfirming || isConfirmed || isError) && (
+              <div
+                className={`tx-status-box ${isError ? "tx-status-error" : isConfirmed ? "tx-status-success" : "tx-status-pending"}`}
+              >
+                {isPending && "⏳ Waiting for wallet confirmation..."}
+                {isConfirming && "⏳ Waiting for transaction confirmation..."}
+                {isConfirmed && (
+                  <div>
+                    ✅ Transaction confirmed!
+                    {hash && (
+                      <div className="tx-hash-link">
+                        <Link to={`/${networkId}/tx/${hash}`}>View transaction</Link>
+                      </div>
+                    )}
+                  </div>
+                )}
+                {isError && <div>❌ Error: {error?.message || "Transaction failed"}</div>}
+              </div>
+            )}
+
+            <div className="function-actions">
+              <button
+                type="button"
+                onClick={handleWriteFunction}
+                disabled={isPending || isConfirming}
+                className="btn-function-action btn-write-action"
+              >
+                {isPending ? "Confirming in Wallet..." : isConfirming ? "Processing..." : "Write"}
+              </button>
+              <button
+                type="button"
+                onClick={() => setSelectedWriteFunction(null)}
+                className="btn-cancel"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ContractInteraction;
diff --git a/src/components/pages/address/shared/ContractStorage.tsx b/src/components/pages/address/shared/ContractStorage.tsx
new file mode 100644
index 0000000..0edfe21
--- /dev/null
+++ b/src/components/pages/address/shared/ContractStorage.tsx
@@ -0,0 +1,57 @@
+import type React from "react";
+import { useCallback, useState } from "react";
+import type { Address } from "../../../../types";
+
+interface ContractStorageProps {
+  address: Address;
+}
+
+const ContractStorage: React.FC<ContractStorageProps> = ({ address }) => {
+  const [storageSlot, setStorageSlot] = useState("");
+  const [storageValue, setStorageValue] = useState("");
+
+  const handleGetStorage = useCallback(() => {
+    if (address.storageAt?.[storageSlot]) {
+      setStorageValue(address.storageAt[storageSlot]);
+    } else {
+      setStorageValue("0x0000000000000000000000000000000000000000000000000000000000000000");
+    }
+  }, [address.storageAt, storageSlot]);
+
+  return (
+    <div className="block-display-card">
+      <div className="block-display-header">
+        <span className="block-label">Contract Storage</span>
+      </div>
+      <div className="tx-details">
+        <div className="tx-row">
+          <span className="tx-label">Storage Slot:</span>
+          <span className="tx-value">
+            <div className="storage-input-row">
+              <input
+                type="text"
+                placeholder="e.g., 0x0"
+                value={storageSlot}
+                onChange={(e) => setStorageSlot(e.target.value)}
+                className="storage-input"
+              />
+              <button type="button" onClick={handleGetStorage} className="storage-button">
+                Get
+              </button>
+            </div>
+          </span>
+        </div>
+        {storageValue && (
+          <div className="tx-row">
+            <span className="tx-label">Value:</span>
+            <span className="tx-value">
+              <div className="storage-value-display">{storageValue}</div>
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ContractStorage;
diff --git a/src/components/pages/address/shared/ENSRecordsDisplay.tsx b/src/components/pages/address/shared/ENSRecordsDisplay.tsx
new file mode 100644
index 0000000..afe956e
--- /dev/null
+++ b/src/components/pages/address/shared/ENSRecordsDisplay.tsx
@@ -0,0 +1,239 @@
+import type React from "react";
+import { useState } from "react";
+import type { DecodedContenthash, ENSRecords, ENSReverseResult } from "../../../../types";
+
+interface ENSRecordsDisplayProps {
+  ensName: string | null;
+  reverseResult?: ENSReverseResult | null;
+  records?: ENSRecords | null;
+  decodedContenthash?: DecodedContenthash | null;
+  loading?: boolean;
+  isMainnet?: boolean;
+}
+
+const TEXT_RECORD_LABELS: Record<string, string> = {
+  avatar: "Avatar",
+  email: "Email",
+  url: "Website",
+  description: "Description",
+  "com.twitter": "Twitter",
+  "com.github": "GitHub",
+  "com.discord": "Discord",
+  "org.telegram": "Telegram",
+  notice: "Notice",
+  keywords: "Keywords",
+  location: "Location",
+};
+
+const ENSRecordsDisplay: React.FC<ENSRecordsDisplayProps> = ({
+  ensName,
+  reverseResult,
+  records,
+  decodedContenthash,
+  loading = false,
+  isMainnet = true,
+}) => {
+  const [showAllRecords, setShowAllRecords] = useState(false);
+
+  // If not on mainnet, show a notice
+  if (!isMainnet) {
+    return (
+      <div className="tx-details">
+        <div className="tx-section">
+          <span className="tx-section-title">ENS Records</span>
+        </div>
+        <div className="ens-notice-warning">ENS records are only available on Ethereum Mainnet</div>
+      </div>
+    );
+  }
+
+  // If loading
+  if (loading) {
+    return (
+      <div className="tx-details">
+        <div className="tx-section">
+          <span className="tx-section-title">ENS Records</span>
+        </div>
+        <div className="ens-loading">Loading ENS records...</div>
+      </div>
+    );
+  }
+
+  // No ENS name found
+  if (!ensName && !reverseResult?.ensName) {
+    return null; // Don't show the section if there's no ENS name
+  }
+
+  const displayName = ensName || reverseResult?.ensName;
+  const hasTextRecords = records?.textRecords && Object.keys(records.textRecords).length > 0;
+
+  return (
+    <div className="tx-details">
+      <div className="tx-section">
+        <span className="tx-section-title">ENS Records</span>
+      </div>
+
+      {/* Primary ENS Name */}
+      <div className="tx-row">
+        <span className="tx-label">ENS Name:</span>
+        <span className="tx-value">
+          <span className="ens-name-wrapper">
+            <span className="ens-name">{displayName}</span>
+            {reverseResult && (
+              <span
+                className={`ens-badge ${reverseResult.verified ? "ens-badge--verified" : "ens-badge--unverified"}`}
+              >
+                {reverseResult.verified ? "Primary Name" : "Unverified"}
+              </span>
+            )}
+          </span>
+        </span>
+      </div>
+
+      {/* Avatar */}
+      {records?.textRecords?.avatar && (
+        <div className="tx-row">
+          <span className="tx-label">Avatar:</span>
+          <span className="tx-value">
+            {records.textRecords.avatar.startsWith("http") ||
+            records.textRecords.avatar.startsWith("ipfs") ? (
+              <div className="flex items-center gap-3">
+                <img
+                  src={records.textRecords.avatar.replace("ipfs://", "https://ipfs.io/ipfs/")}
+                  alt="ENS Avatar"
+                  className="ens-avatar"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+                <a
+                  href={records.textRecords.avatar}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="link-primary"
+                >
+                  {records.textRecords.avatar.length > 50
+                    ? `${records.textRecords.avatar.slice(0, 50)}...`
+                    : records.textRecords.avatar}
+                </a>
+              </div>
+            ) : (
+              <span className="tx-mono">{records.textRecords.avatar}</span>
+            )}
+          </span>
+        </div>
+      )}
+
+      {/* Contenthash */}
+      {records?.contenthash && (
+        <div className="tx-row">
+          <span className="tx-label">Content Hash:</span>
+          <span className="tx-value">
+            {decodedContenthash ? (
+              <div className="flex items-center gap-2">
+                <span className="ens-badge ens-badge--contenthash">{decodedContenthash.type}</span>
+                <a
+                  href={decodedContenthash.url.replace("ipfs://", "https://ipfs.io/ipfs/")}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="link-primary"
+                >
+                  {decodedContenthash.url.length > 60
+                    ? `${decodedContenthash.url.slice(0, 60)}...`
+                    : decodedContenthash.url}
+                </a>
+              </div>
+            ) : (
+              <span className="tx-mono text-sm">{records.contenthash.slice(0, 20)}...</span>
+            )}
+          </span>
+        </div>
+      )}
+
+      {/* Text Records */}
+      {hasTextRecords && (
+        <>
+          <button
+            type="button"
+            className="tx-row btn-ens-toggle cursor-pointer"
+            onClick={() => setShowAllRecords(!showAllRecords)}
+          >
+            <span className="tx-label">
+              Text Records ({Object.keys(records.textRecords).length}):
+            </span>
+            <span className="tx-value text-blue">
+              {showAllRecords ? "Hide" : "Show"} {showAllRecords ? "▼" : "▶"}
+            </span>
+          </button>
+
+          {showAllRecords && (
+            <div className="ens-text-records-wrapper">
+              {Object.entries(records.textRecords)
+                .filter(([key]) => key !== "avatar") // Avatar is displayed separately
+                .map(([key, value]) => (
+                  <div className="tx-row" key={key}>
+                    <span className="tx-label min-w-120">{TEXT_RECORD_LABELS[key] || key}:</span>
+                    <span className="tx-value">
+                      {value.startsWith("http") ? (
+                        <a
+                          href={value}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="link-primary"
+                        >
+                          {value.length > 50 ? `${value.slice(0, 50)}...` : value}
+                        </a>
+                      ) : key === "com.twitter" ? (
+                        <a
+                          href={`https://twitter.com/${value.replace("@", "")}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="link-primary"
+                        >
+                          @{value.replace("@", "")}
+                        </a>
+                      ) : key === "com.github" ? (
+                        <a
+                          href={`https://github.com/${value}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="link-primary"
+                        >
+                          {value}
+                        </a>
+                      ) : key === "email" ? (
+                        <a href={`mailto:${value}`} className="link-primary">
+                          {value}
+                        </a>
+                      ) : (
+                        <span>{value}</span>
+                      )}
+                    </span>
+                  </div>
+                ))}
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Link to ENS app */}
+      {displayName && (
+        <div className="tx-row">
+          <span className="tx-label">ENS App:</span>
+          <span className="tx-value">
+            <a
+              href={`https://app.ens.domains/name/${displayName}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="ens-app-link"
+            >
+              View on ENS App ↗
+            </a>
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ENSRecordsDisplay;
diff --git a/src/components/pages/address/shared/TransactionHistory.tsx b/src/components/pages/address/shared/TransactionHistory.tsx
new file mode 100644
index 0000000..9c5a237
--- /dev/null
+++ b/src/components/pages/address/shared/TransactionHistory.tsx
@@ -0,0 +1,214 @@
+import type React from "react";
+import { useCallback, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { toFunctionSelector } from "viem";
+import type { ABI, AddressTransactionsResult, FunctionABI, Transaction } from "../../../../types";
+
+interface TransactionHistoryProps {
+  networkId: string;
+  addressHash: string;
+  transactionsResult?: AddressTransactionsResult | null;
+  transactionDetails: Transaction[];
+  loadingTxDetails: boolean;
+  contractAbi?: ABI[];
+}
+
+const TransactionHistory: React.FC<TransactionHistoryProps> = ({
+  networkId,
+  addressHash,
+  transactionsResult,
+  transactionDetails,
+  loadingTxDetails,
+  contractAbi,
+}) => {
+  const truncate = useCallback((str: string, start = 6, end = 4) => {
+    if (!str) return "";
+    if (str.length <= start + end) return str;
+    return `${str.slice(0, start)}...${str.slice(-end)}`;
+  }, []);
+
+  const formatValue = useCallback((value: string) => {
+    try {
+      const eth = Number(value) / 1e18;
+      return `${eth.toFixed(6)} ETH`;
+    } catch {
+      return "0 ETH";
+    }
+  }, []);
+
+  // Decode function name from calldata using ABI
+  const decodeFunctionName = useCallback(
+    (data: string | undefined): string | null => {
+      if (!data || data === "0x" || data.length < 10) return null;
+      if (!contractAbi) return null;
+
+      const selector = data.slice(0, 10).toLowerCase();
+
+      for (const item of contractAbi) {
+        const abiItem = item as FunctionABI;
+        if (abiItem.type !== "function") continue;
+
+        const inputs = abiItem.inputs || [];
+        const signature = `${abiItem.name}(${inputs.map((i) => i.type).join(",")})`;
+
+        try {
+          const computedSelector = toFunctionSelector(signature).toLowerCase();
+          if (computedSelector === selector) {
+            return abiItem.name;
+          }
+        } catch {
+          // Continue
+        }
+      }
+
+      return null;
+    },
+    [contractAbi],
+  );
+
+  const hasContractAbi = useMemo(() => contractAbi && contractAbi.length > 0, [contractAbi]);
+
+  return (
+    <div className="tx-details">
+      <div className="tx-section tx-history-header">
+        <span className="tx-section-title">Last Transactions</span>
+        {transactionsResult && (
+          <span
+            className={`tx-history-status ${transactionsResult.source === "trace_filter" ? "tx-history-status-complete" : transactionsResult.source === "logs" ? "tx-history-status-partial" : "tx-history-status-none"}`}
+          >
+            {transactionsResult.source === "trace_filter" && (
+              <>
+                <span className="tx-history-dot">●</span>
+                Complete history ({transactionDetails.length} transactions)
+              </>
+            )}
+            {transactionsResult.source === "logs" && (
+              <>
+                <span className="tx-history-dot">●</span>
+                Partial (logs only) - {transactionDetails.length} transactions
+              </>
+            )}
+            {transactionsResult.source === "none" && (
+              <>
+                <span className="tx-history-dot">●</span>
+                No data available
+              </>
+            )}
+          </span>
+        )}
+      </div>
+
+      {/* Warning message for partial data */}
+      {transactionsResult?.message && (
+        <div
+          className={`tx-history-message ${transactionsResult.source === "none" ? "tx-history-message-error" : "tx-history-message-warning"}`}
+        >
+          <span className="tx-history-message-icon">
+            {transactionsResult.source === "none" ? "⚠️" : "ℹ️"}
+          </span>
+          {transactionsResult.message}
+        </div>
+      )}
+
+      {/* Loading state */}
+      {loadingTxDetails && <div className="tx-history-empty">Loading transaction details...</div>}
+
+      {/* Transaction table */}
+      {!loadingTxDetails && transactionDetails.length > 0 && (
+        <div className="address-table-container">
+          <table className="recent-transactions-table">
+            <thead>
+              <tr>
+                <th>TX Hash</th>
+                {hasContractAbi && <th>Method</th>}
+                <th>From</th>
+                <th>To</th>
+                <th>Value</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {transactionDetails.map((tx) => (
+                <tr key={tx.hash}>
+                  <td>
+                    <Link to={`/${networkId}/tx/${tx.hash}`} className="address-table-link">
+                      {truncate(tx.hash, 8, 6)}
+                    </Link>
+                  </td>
+                  {hasContractAbi && (
+                    <td>
+                      {tx.to?.toLowerCase() === addressHash.toLowerCase() ? (
+                        (() => {
+                          const funcName = decodeFunctionName(tx.data);
+                          const selector = tx.data?.slice(0, 10);
+                          return funcName ? (
+                            <span className="method-badge method-badge-decoded">{funcName}</span>
+                          ) : selector && selector !== "0x" ? (
+                            <span className="method-badge method-badge-selector" title={selector}>
+                              {selector}
+                            </span>
+                          ) : (
+                            <span className="method-badge method-badge-transfer">Transfer</span>
+                          );
+                        })()
+                      ) : !tx.data || tx.data === "0x" ? (
+                        <span className="method-badge method-badge-transfer">Transfer</span>
+                      ) : (
+                        <span
+                          className="method-badge method-badge-selector"
+                          title={tx.data?.slice(0, 10)}
+                        >
+                          {tx.data?.slice(0, 10)}
+                        </span>
+                      )}
+                    </td>
+                  )}
+                  <td>
+                    <Link to={`/${networkId}/address/${tx.from}`} className="address-table-link">
+                      {tx.from?.toLowerCase() === addressHash.toLowerCase()
+                        ? "This Address"
+                        : truncate(tx.from || "", 6, 4)}
+                    </Link>
+                  </td>
+                  <td>
+                    {tx.to ? (
+                      <Link
+                        to={`/${networkId}/address/${tx.to}`}
+                        className={`tx-table-to-link ${tx.to?.toLowerCase() === addressHash.toLowerCase() ? "tx-table-to-link-self" : "tx-table-to-link-other"}`}
+                      >
+                        {tx.to?.toLowerCase() === addressHash.toLowerCase()
+                          ? "This Address"
+                          : truncate(tx.to, 6, 4)}
+                      </Link>
+                    ) : (
+                      <span className="contract-creation-badge">Contract Creation</span>
+                    )}
+                  </td>
+                  <td>
+                    <span className="address-table-value">{formatValue(tx.value)}</span>
+                  </td>
+                  <td>
+                    {tx.receipt?.status === "0x1" ? (
+                      <span className="table-status-badge table-status-success">✓ Success</span>
+                    ) : tx.receipt?.status === "0x0" ? (
+                      <span className="table-status-badge table-status-failed">✗ Failed</span>
+                    ) : (
+                      <span className="table-status-badge table-status-pending">⏳ Pending</span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loadingTxDetails && transactionDetails.length === 0 && !transactionsResult?.message && (
+        <div className="tx-history-empty">No transactions found for this address</div>
+      )}
+    </div>
+  );
+};
+
+export default TransactionHistory;
diff --git a/src/components/pages/address/shared/index.ts b/src/components/pages/address/shared/index.ts
new file mode 100644
index 0000000..52f7068
--- /dev/null
+++ b/src/components/pages/address/shared/index.ts
@@ -0,0 +1,7 @@
+export { default as AddressHeader } from "./AddressHeader";
+export { default as BalanceSection } from "./BalanceSection";
+export { default as ContractDetails } from "./ContractDetails";
+export { default as ContractInteraction } from "./ContractInteraction";
+export { default as ContractStorage } from "./ContractStorage";
+export { default as ENSRecordsDisplay } from "./ENSRecordsDisplay";
+export { default as TransactionHistory } from "./TransactionHistory";
diff --git a/src/components/pages/block/BlockDisplay.tsx b/src/components/pages/block/BlockDisplay.tsx
new file mode 100644
index 0000000..17edcd4
--- /dev/null
+++ b/src/components/pages/block/BlockDisplay.tsx
@@ -0,0 +1,438 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import type { Block, BlockArbitrum, RPCMetadata } from "../../../types";
+import ExtraDataDisplay from "../../common/ExtraDataDisplay";
+import { RPCIndicator } from "../../common/RPCIndicator";
+
+interface BlockDisplayProps {
+  block: Block | BlockArbitrum;
+  networkId?: string;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+}
+
+const BlockDisplay: React.FC<BlockDisplayProps> = React.memo(
+  ({ block, networkId, metadata, selectedProvider, onProviderSelect }) => {
+    const [showWithdrawals, setShowWithdrawals] = useState(false);
+    const [showTransactions, setShowTransactions] = useState(false);
+    const [showMoreDetails, setShowMoreDetails] = useState(false);
+
+    // Check if this is an Arbitrum block
+    const isArbitrumBlock = (block: Block | BlockArbitrum): block is BlockArbitrum => {
+      return "l1BlockNumber" in block;
+    };
+
+    // Helper to format timestamp
+    const formatTimestamp = (timestamp: string) => {
+      try {
+        const ts = Number(timestamp);
+        const date = new Date(ts * 1000);
+        return new Intl.DateTimeFormat(undefined, {
+          year: "numeric",
+          month: "short",
+          day: "2-digit",
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+          timeZoneName: "short",
+        }).format(date);
+      } catch (_e) {
+        return timestamp;
+      }
+    };
+
+    const formatTimeAgo = (timestamp: string) => {
+      const ts = Number(timestamp) * 1000;
+      const diffMs = Date.now() - ts;
+      const diffSeconds = Math.floor(Math.abs(diffMs) / 1000);
+
+      if (diffSeconds < 5) {
+        return diffMs >= 0 ? "just now" : "in a few seconds";
+      }
+
+      const units = [
+        { label: "day", seconds: 60 * 60 * 24 },
+        { label: "hour", seconds: 60 * 60 },
+        { label: "minute", seconds: 60 },
+      ];
+
+      for (const unit of units) {
+        if (diffSeconds >= unit.seconds) {
+          const value = Math.floor(diffSeconds / unit.seconds);
+          const plural = value === 1 ? "" : "s";
+          return diffMs >= 0
+            ? `${value} ${unit.label}${plural} ago`
+            : `in ${value} ${unit.label}${plural}`;
+        }
+      }
+
+      return diffMs >= 0
+        ? `${diffSeconds} second${diffSeconds === 1 ? "" : "s"} ago`
+        : `in ${diffSeconds} second${diffSeconds === 1 ? "" : "s"}`;
+    };
+
+    const formatGwei = (value: string) => {
+      try {
+        const gwei = Number(value) / 1e9;
+        return `${gwei.toFixed(9)} Gwei`;
+      } catch (_e) {
+        return value;
+      }
+    };
+
+    const formatEth = (value: string) => {
+      try {
+        const eth = Number(value) / 1e18;
+        return `${eth.toFixed(12)} ETH`;
+      } catch (_e) {
+        return value;
+      }
+    };
+
+    const blockNumber = Number(block.number);
+    const timestampFormatted = formatTimestamp(block.timestamp);
+    const timestampAge = formatTimeAgo(block.timestamp);
+    const gasUsedPct = ((Number(block.gasUsed) / Number(block.gasLimit)) * 100).toFixed(1);
+
+    // Calculate burnt fees if baseFeePerGas exists
+    const burntFees = block.baseFeePerGas
+      ? (BigInt(block.gasUsed) * BigInt(block.baseFeePerGas)).toString()
+      : null;
+
+    return (
+      <div className="block-display-card">
+        <div className="block-display-header">
+          <div className="block-header-main">
+            {networkId && blockNumber > 0 && (
+              <Link
+                to={`/${networkId}/block/${blockNumber - 1}`}
+                className="block-nav-btn"
+                title="Previous block"
+              >
+                ←
+              </Link>
+            )}
+            <div className="block-header-info">
+              <span className="block-label">Block</span>
+              <span className="block-number">#{blockNumber.toLocaleString()}</span>
+            </div>
+            {networkId && (
+              <Link
+                to={`/${networkId}/block/${blockNumber + 1}`}
+                className="block-nav-btn"
+                title="Next block"
+              >
+                →
+              </Link>
+            )}
+            <span className="block-header-divider">•</span>
+            <span className="block-header-timestamp">
+              <span className="block-timestamp-age">{timestampAge}</span>
+              <span className="block-timestamp-full">({timestampFormatted})</span>
+            </span>
+            <span className="block-header-divider">•</span>
+            <span className="block-status-badge block-status-finalized">Finalized</span>
+          </div>
+          {metadata && selectedProvider !== undefined && onProviderSelect && (
+            <RPCIndicator
+              metadata={metadata}
+              selectedProvider={selectedProvider}
+              onProviderSelect={onProviderSelect}
+            />
+          )}
+        </div>
+
+        <div className="tx-details">
+          {/* Transactions */}
+          <div className="tx-row">
+            <span className="tx-label">Transactions:</span>
+            <span className="tx-value">
+              <span className="tx-value-highlight">
+                {block.transactions ? block.transactions.length : 0} transactions
+              </span>{" "}
+              in this block
+            </span>
+          </div>
+
+          {/* Withdrawals count */}
+          {block.withdrawals && block.withdrawals.length > 0 && (
+            <div className="tx-row">
+              <span className="tx-label">Withdrawals:</span>
+              <span className="tx-value">
+                {block.withdrawals.length} withdrawal
+                {block.withdrawals.length !== 1 ? "s" : ""} in this block
+              </span>
+            </div>
+          )}
+
+          {/* Fee Recipient (Miner) */}
+          <div className="tx-row">
+            <span className="tx-label">Fee Recipient:</span>
+            <span className="tx-value tx-mono">
+              {networkId ? (
+                <Link to={`/${networkId}/address/${block.miner}`} className="link-accent">
+                  {block.miner}
+                </Link>
+              ) : (
+                block.miner
+              )}
+            </span>
+          </div>
+
+          {/* Gas Used */}
+          <div className="tx-row">
+            <span className="tx-label">Gas Used:</span>
+            <span className="tx-value">
+              {Number(block.gasUsed).toLocaleString()}
+              <span className="tx-gas-pct"> ({gasUsedPct}%)</span>
+            </span>
+          </div>
+
+          {/* Gas Limit */}
+          <div className="tx-row">
+            <span className="tx-label">Gas Limit:</span>
+            <span className="tx-value">{Number(block.gasLimit).toLocaleString()}</span>
+          </div>
+
+          {/* Base Fee Per Gas */}
+          {block.baseFeePerGas && (
+            <div className="tx-row">
+              <span className="tx-label">Base Fee Per Gas:</span>
+              <span className="tx-value">{formatGwei(block.baseFeePerGas)}</span>
+            </div>
+          )}
+
+          {/* Burnt Fees */}
+          {burntFees && (
+            <div className="tx-row">
+              <span className="tx-label">Burnt Fees:</span>
+              <span className="tx-value">
+                <span className="burnt-fees">🔥 {formatEth(burntFees)}</span>
+              </span>
+            </div>
+          )}
+
+          {/* Extra Data */}
+          {block.extraData && block.extraData !== "0x" && (
+            <div className="tx-row">
+              <span className="tx-label">Extra Data:</span>
+              <span className="tx-value">
+                <ExtraDataDisplay hexData={block.extraData} />
+              </span>
+            </div>
+          )}
+
+          {/* Difficulty */}
+          {Number(block.difficulty) > 0 && (
+            <div className="tx-row">
+              <span className="tx-label">Difficulty:</span>
+              <span className="tx-value">{Number(block.difficulty).toLocaleString()}</span>
+            </div>
+          )}
+
+          {/* Total Difficulty */}
+          {Number(block.totalDifficulty) > 0 && (
+            <div className="tx-row">
+              <span className="tx-label">Total Difficulty:</span>
+              <span className="tx-value">{Number(block.totalDifficulty).toLocaleString()}</span>
+            </div>
+          )}
+
+          {/* Size */}
+          <div className="tx-row">
+            <span className="tx-label">Size:</span>
+            <span className="tx-value">{Number(block.size).toLocaleString()} bytes</span>
+          </div>
+
+          {/* Arbitrum-specific fields */}
+          {isArbitrumBlock(block) && (
+            <>
+              <div className="tx-row tx-row-arbitrum">
+                <span className="tx-label">L1 Block Number:</span>
+                <span className="tx-value">{Number(block.l1BlockNumber).toLocaleString()}</span>
+              </div>
+              <div className="tx-row tx-row-arbitrum">
+                <span className="tx-label">Send Count:</span>
+                <span className="tx-value">{block.sendCount}</span>
+              </div>
+              <div className="tx-row tx-row-arbitrum">
+                <span className="tx-label">Send Root:</span>
+                <span className="tx-value tx-mono">{block.sendRoot}</span>
+              </div>
+            </>
+          )}
+
+          {/* More Details (collapsible) */}
+          <div className="tx-row tx-row-vertical">
+            {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+            <button
+              className="more-details-toggle"
+              onClick={() => setShowMoreDetails(!showMoreDetails)}
+            >
+              {showMoreDetails ? "− Hide" : "+ Show"} More Details
+            </button>
+
+            {showMoreDetails && (
+              <div className="more-details-content">
+                <div className="detail-row">
+                  <span className="detail-label">Hash:</span>
+                  <span className="detail-value tx-mono">{block.hash}</span>
+                </div>
+                <div className="detail-row">
+                  <span className="detail-label">Parent Hash:</span>
+                  <span className="detail-value tx-mono">
+                    {networkId &&
+                    block.parentHash !==
+                      "0x0000000000000000000000000000000000000000000000000000000000000000" ? (
+                      <Link to={`/${networkId}/block/${blockNumber - 1}`} className="link-accent">
+                        {block.parentHash}
+                      </Link>
+                    ) : (
+                      block.parentHash
+                    )}
+                  </span>
+                </div>
+                <div className="detail-row">
+                  <span className="detail-label">State Root:</span>
+                  <span className="detail-value tx-mono">{block.stateRoot}</span>
+                </div>
+                <div className="detail-row">
+                  <span className="detail-label">Transactions Root:</span>
+                  <span className="detail-value tx-mono">{block.transactionsRoot}</span>
+                </div>
+                <div className="detail-row">
+                  <span className="detail-label">Receipts Root:</span>
+                  <span className="detail-value tx-mono">{block.receiptsRoot}</span>
+                </div>
+                {block.withdrawalsRoot && (
+                  <div className="detail-row">
+                    <span className="detail-label">Withdrawals Root:</span>
+                    <span className="detail-value tx-mono">{block.withdrawalsRoot}</span>
+                  </div>
+                )}
+                <div className="detail-row">
+                  <span className="detail-label">Logs Bloom:</span>
+                  <div className="detail-value">
+                    <code className="logs-bloom">{block.logsBloom}</code>
+                  </div>
+                </div>
+                <div className="detail-row">
+                  <span className="detail-label">Nonce:</span>
+                  <span className="detail-value">{block.nonce}</span>
+                </div>
+                <div className="detail-row">
+                  <span className="detail-label">Mix Hash:</span>
+                  <span className="detail-value tx-mono">{block.mixHash}</span>
+                </div>
+                <div className="detail-row">
+                  <span className="detail-label">Sha3 Uncles:</span>
+                  <span className="detail-value tx-mono">{block.sha3Uncles}</span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Transactions List */}
+        {block.transactions && block.transactions.length > 0 && (
+          <div className="tx-section">
+            <div className="tx-section-header">
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button
+                className="tx-section-toggle"
+                onClick={() => setShowTransactions(!showTransactions)}
+              >
+                <span className="tx-section-title">Transactions ({block.transactions.length})</span>
+                <span className="tx-section-arrow">{showTransactions ? "▼" : "▶"}</span>
+              </button>
+            </div>
+            {showTransactions && (
+              <div className="tx-list">
+                {block.transactions.map((txHash, index) => (
+                  <div key={txHash} className="tx-list-item">
+                    <span className="tx-list-index">{index}</span>
+                    <span className="tx-list-hash tx-mono">
+                      {networkId ? (
+                        <Link to={`/${networkId}/tx/${txHash}`} className="link-accent">
+                          {txHash}
+                        </Link>
+                      ) : (
+                        txHash
+                      )}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Withdrawals List */}
+        {block.withdrawals && block.withdrawals.length > 0 && (
+          <div className="tx-section">
+            <div className="tx-section-header">
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button
+                className="tx-section-toggle"
+                onClick={() => setShowWithdrawals(!showWithdrawals)}
+              >
+                <span className="tx-section-title">Withdrawals ({block.withdrawals.length})</span>
+                <span className="tx-section-arrow">{showWithdrawals ? "▼" : "▶"}</span>
+              </button>
+            </div>
+            {showWithdrawals && (
+              <div className="tx-logs">
+                {block.withdrawals.map((withdrawal, index) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <TODO>
+                  <div key={index} className="tx-log">
+                    <div className="tx-log-index">{index}</div>
+                    <div className="tx-log-content">
+                      <div className="tx-log-row">
+                        <span className="tx-log-label">Index</span>
+                        <span className="tx-log-value">
+                          {Number(withdrawal.index).toLocaleString()}
+                        </span>
+                      </div>
+                      <div className="tx-log-row">
+                        <span className="tx-log-label">Validator</span>
+                        <span className="tx-log-value">
+                          {Number(withdrawal.validatorIndex).toLocaleString()}
+                        </span>
+                      </div>
+                      <div className="tx-log-row">
+                        <span className="tx-log-label">Address</span>
+                        <span className="tx-log-value tx-mono">
+                          {networkId ? (
+                            <Link
+                              to={`/${networkId}/address/${withdrawal.address}`}
+                              className="link-accent"
+                            >
+                              {withdrawal.address}
+                            </Link>
+                          ) : (
+                            withdrawal.address
+                          )}
+                        </span>
+                      </div>
+                      <div className="tx-log-row">
+                        <span className="tx-log-label">Amount</span>
+                        <span className="tx-log-value tx-value-highlight">
+                          {(Number(withdrawal.amount) / 1e9).toFixed(9)} ETH
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+BlockDisplay.displayName = "BlockDisplay";
+
+export default BlockDisplay;
diff --git a/src/components/pages/block/index.tsx b/src/components/pages/block/index.tsx
new file mode 100644
index 0000000..0950c2c
--- /dev/null
+++ b/src/components/pages/block/index.tsx
@@ -0,0 +1,106 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useDataService } from "../../../hooks/useDataService";
+import { useProviderSelection } from "../../../hooks/useProviderSelection";
+import { useSelectedData } from "../../../hooks/useSelectedData";
+import type { Block, DataWithMetadata } from "../../../types";
+import Loader from "../../common/Loader";
+import BlockDisplay from "./BlockDisplay";
+
+export default function BlockPage() {
+  const { networkId, filter } = useParams<{
+    networkId?: string;
+    filter?: string;
+  }>();
+
+  const blockNumber = filter === "latest" ? "latest" : Number(filter);
+  const numericNetworkId = Number(networkId) || 1;
+
+  const dataService = useDataService(numericNetworkId);
+  const [blockResult, setBlockResult] = useState<DataWithMetadata<Block> | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Provider selection state
+  const [selectedProvider, setSelectedProvider] = useProviderSelection(
+    `block_${numericNetworkId}_${blockNumber}`,
+  );
+
+  // Extract actual block data based on selected provider
+  const block = useSelectedData(blockResult, selectedProvider);
+
+  useEffect(() => {
+    if (!dataService || blockNumber === undefined) {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    dataService.networkAdapter
+      .getBlock(blockNumber)
+      .then((result) => {
+        setBlockResult(result);
+      })
+      .catch((err) => {
+        setError(err.message || "Failed to fetch block");
+      })
+      .finally(() => setLoading(false));
+  }, [dataService, blockNumber]);
+
+  if (loading) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">Block</span>
+            <span className="tx-mono header-subtitle">#{filter}</span>
+          </div>
+          <div className="card-content-loading">
+            <Loader text="Loading block data..." />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">Block</span>
+            <span className="tx-mono header-subtitle">#{filter}</span>
+          </div>
+          <div className="card-content">
+            <p className="text-error margin-0">Error: {error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container-wide">
+      {block ? (
+        <BlockDisplay
+          block={block}
+          networkId={networkId}
+          metadata={blockResult?.metadata}
+          selectedProvider={selectedProvider}
+          onProviderSelect={setSelectedProvider}
+        />
+      ) : (
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">Block</span>
+          </div>
+          <div className="card-content">
+            <p className="text-muted margin-0">Block not found</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/pages/blocks/index.tsx b/src/components/pages/blocks/index.tsx
new file mode 100644
index 0000000..d415f82
--- /dev/null
+++ b/src/components/pages/blocks/index.tsx
@@ -0,0 +1,222 @@
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useDataService } from "../../../hooks/useDataService";
+import type { Block } from "../../../types";
+import Loader from "../../common/Loader";
+
+const BLOCKS_PER_PAGE = 10;
+
+export default function Blocks() {
+  const { networkId } = useParams<{ networkId?: string }>();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const numericNetworkId = Number(networkId) || 1;
+  const dataService = useDataService(numericNetworkId);
+  const [blocks, setBlocks] = useState<Block[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [latestBlockNumber, setLatestBlockNumber] = useState<number | null>(null);
+
+  // Get fromBlock from URL params, default to null (latest)
+  const fromBlockParam = searchParams.get("fromBlock");
+  const fromBlock = fromBlockParam ? Number(fromBlockParam) : null;
+
+  useEffect(() => {
+    if (!dataService) {
+      setLoading(false);
+      return;
+    }
+
+    const fetchBlocks = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        // Get the latest block number first
+        const latestBlock = await dataService.networkAdapter.getLatestBlockNumber();
+        setLatestBlockNumber(latestBlock);
+
+        // Determine starting block
+        const startBlock = fromBlock !== null ? fromBlock : latestBlock;
+
+        // Calculate block numbers to fetch (going backwards from startBlock)
+        const blockNumbers = Array.from(
+          { length: BLOCKS_PER_PAGE },
+          (_, i) => startBlock - i,
+        ).filter((num) => num >= 0);
+
+        // Fetch blocks in parallel
+        const blockResults = await Promise.all(
+          blockNumbers.map((num) => dataService.networkAdapter.getBlock(num)),
+        );
+
+        console.log("Fetched blocks:", blockResults);
+        // Extract data from results
+        setBlocks(blockResults.map((result) => result.data));
+        // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      } catch (err: any) {
+        console.error("Error fetching blocks:", err);
+        setError(err.message || "Failed to fetch blocks");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchBlocks();
+  }, [dataService, fromBlock]);
+
+  const truncate = (str: string, start = 10, end = 8) => {
+    if (!str) return "";
+    if (str.length <= start + end) return str;
+    return `${str.slice(0, start)}...${str.slice(-end)}`;
+  };
+
+  const formatTime = (timestamp: string) => {
+    try {
+      const date = new Date(Number(timestamp) * 1000);
+      return date.toLocaleString();
+    } catch (_e) {
+      return timestamp;
+    }
+  };
+
+  // Navigation handlers
+  const goToNewerBlocks = () => {
+    if (blocks.length === 0 || latestBlockNumber === null || !blocks[0]) return;
+    const newestBlockInPage = Number(blocks[0].number);
+    const newFromBlock = Math.min(newestBlockInPage + BLOCKS_PER_PAGE, latestBlockNumber);
+
+    if (newFromBlock >= latestBlockNumber) {
+      // Go to latest (remove fromBlock param)
+      navigate(`/${networkId}/blocks`);
+    } else {
+      navigate(`/${networkId}/blocks?fromBlock=${newFromBlock}`);
+    }
+  };
+
+  const goToOlderBlocks = () => {
+    if (blocks.length === 0) return;
+    const lastBlock = blocks[blocks.length - 1];
+    if (!lastBlock) return;
+    const oldestBlockInPage = Number(lastBlock.number);
+    const newFromBlock = oldestBlockInPage - 1;
+
+    if (newFromBlock >= 0) {
+      navigate(`/${networkId}/blocks?fromBlock=${newFromBlock}`);
+    }
+  };
+
+  const goToLatest = () => {
+    navigate(`/${networkId}/blocks`);
+  };
+
+  // Determine if we can navigate
+  const lastBlock = blocks[blocks.length - 1];
+  const canGoNewer =
+    fromBlock !== null && latestBlockNumber !== null && fromBlock < latestBlockNumber;
+  const canGoOlder = blocks.length > 0 && lastBlock && Number(lastBlock.number) > 0;
+  const isAtLatest =
+    fromBlock === null || (latestBlockNumber !== null && fromBlock >= latestBlockNumber);
+
+  if (loading) {
+    return (
+      <div className="container-wide page-container-padded text-center page-card">
+        <h1 className="page-title-small">Latest Blocks</h1>
+        <Loader text="Loading blocks..." />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container-wide page-container-padded text-center page-card">
+        <h1 className="page-title-small">Latest Blocks</h1>
+        <p className="error-text">Error: {error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container-wide page-container-padded text-center page-card">
+      <h1 className="page-title-small">Latest Blocks</h1>
+      <p className="page-subtitle-text">
+        {isAtLatest
+          ? `Showing ${blocks.length} most recent blocks`
+          : `Showing blocks ${Number(blocks[blocks.length - 1]?.number || 0).toLocaleString()} - ${Number(blocks[0]?.number || 0).toLocaleString()}`}
+      </p>
+
+      <div className="table-wrapper">
+        <table className="dash-table">
+          <thead>
+            <tr>
+              <th>Block</th>
+              <th>Timestamp</th>
+              <th>Txns</th>
+              <th>Miner</th>
+              <th>Gas Used</th>
+              <th>Gas Limit</th>
+              <th>Size</th>
+            </tr>
+          </thead>
+          <tbody>
+            {blocks.map((block) => (
+              <tr key={block.number}>
+                <td>
+                  <Link
+                    to={`/${networkId}/block/${Number(block.number).toString()}`}
+                    className="table-cell-number"
+                  >
+                    {Number(block.number).toLocaleString()}
+                  </Link>
+                </td>
+                <td className="table-cell-text">{formatTime(block.timestamp)}</td>
+                <td className="table-cell-value">
+                  {block.transactions ? block.transactions.length : 0}
+                </td>
+                <td className="table-cell-mono" title={block.miner}>
+                  <Link to={`/${networkId}/address/${block.miner}`} className="table-cell-address">
+                    {truncate(block.miner)}
+                  </Link>
+                </td>
+                <td className="table-cell-text">{Number(block.gasUsed).toLocaleString()}</td>
+                <td className="table-cell-muted">{Number(block.gasLimit).toLocaleString()}</td>
+                <td className="table-cell-muted">{Number(block.size).toLocaleString()} bytes</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      <div className="pagination-container">
+        {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+        <button
+          onClick={goToLatest}
+          disabled={isAtLatest}
+          className="pagination-btn"
+          title="Go to latest blocks"
+        >
+          Latest
+        </button>
+        {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+        <button
+          onClick={goToNewerBlocks}
+          disabled={!canGoNewer}
+          className="pagination-btn"
+          title="View newer blocks"
+        >
+          ← Newer
+        </button>
+        {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+        <button
+          onClick={goToOlderBlocks}
+          disabled={!canGoOlder}
+          className="pagination-btn"
+          title="View older blocks"
+        >
+          Older →
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/pages/devtools/ContractsSection.tsx b/src/components/pages/devtools/ContractsSection.tsx
new file mode 100644
index 0000000..ceef02f
--- /dev/null
+++ b/src/components/pages/devtools/ContractsSection.tsx
@@ -0,0 +1,583 @@
+import type React from "react";
+import { useState } from "react";
+
+const NETWORKS: Record<number, { name: string }> = {
+  1: { name: "Ethereum Mainnet" },
+  10: { name: "Optimism" },
+  42161: { name: "Arbitrum One" },
+  8453: { name: "Base" },
+  137: { name: "Polygon" },
+  11155111: { name: "Sepolia" },
+  84532: { name: "Base Sepolia" },
+};
+
+const SOURCIFY_API = "https://sourcify.dev/server";
+
+const ContractsSection: React.FC = () => {
+  // Standard JSON Verification
+  const [showStandardVerify, setShowStandardVerify] = useState(true);
+  const [stdChainId, setStdChainId] = useState<number>(1);
+  const [stdAddress, setStdAddress] = useState("");
+  const [stdContractName, setStdContractName] = useState("");
+  const [stdSources, setStdSources] = useState(
+    JSON.stringify(
+      {
+        "MyContract.sol": {
+          content:
+            "// SPDX-License-Identifier: MIT\npragma solidity ^0.8.0;\n\ncontract MyContract {\n    uint256 public value;\n    \n    constructor(uint256 _value) {\n        value = _value;\n    }\n}",
+        },
+      },
+      null,
+      2,
+    ),
+  );
+  const [stdSettings, setStdSettings] = useState(
+    JSON.stringify(
+      {
+        optimizer: {
+          enabled: true,
+          runs: 200,
+        },
+        evmVersion: "paris",
+      },
+      null,
+      2,
+    ),
+  );
+  const [stdVerifying, setStdVerifying] = useState(false);
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  const [stdResult, setStdResult] = useState<any>(null);
+  const [stdError, setStdError] = useState<string | null>(null);
+
+  // Metadata Verification
+  const [showMetadataVerify, setShowMetadataVerify] = useState(false);
+  const [metaChainId, setMetaChainId] = useState<number>(1);
+  const [metaAddress, setMetaAddress] = useState("");
+  const [metadataJson, setMetadataJson] = useState("");
+  const [metaVerifying, setMetaVerifying] = useState(false);
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  const [metaResult, setMetaResult] = useState<any>(null);
+  const [metaError, setMetaError] = useState<string | null>(null);
+
+  // Etherscan Import
+  const [showEtherscanImport, setShowEtherscanImport] = useState(false);
+  const [etherscanChainId, setEtherscanChainId] = useState<number>(1);
+  const [etherscanAddress, setEtherscanAddress] = useState("");
+  const [etherscanApiKey, setEtherscanApiKey] = useState("");
+  const [etherscanImporting, setEtherscanImporting] = useState(false);
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  const [etherscanResult, setEtherscanResult] = useState<any>(null);
+  const [etherscanError, setEtherscanError] = useState<string | null>(null);
+
+  // Similarity Verification
+  const [showSimilarityVerify, setShowSimilarityVerify] = useState(false);
+  const [simChainId, setSimChainId] = useState<number>(1);
+  const [simAddress, setSimAddress] = useState("");
+  const [simVerifying, setSimVerifying] = useState(false);
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  const [simResult, setSimResult] = useState<any>(null);
+  const [simError, setSimError] = useState<string | null>(null);
+
+  // Standard JSON Verification
+  const verifyStandardJson = async () => {
+    setStdVerifying(true);
+    setStdError(null);
+    setStdResult(null);
+
+    try {
+      if (!stdAddress || !stdContractName) {
+        throw new Error("Address and contract name are required");
+      }
+
+      const sources = JSON.parse(stdSources);
+      const settings = JSON.parse(stdSettings);
+
+      const response = await fetch(`${SOURCIFY_API}/v2/verify/${stdChainId}/${stdAddress}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          contractName: stdContractName,
+          compilerVersion: "0.8.0",
+          sourceFiles: sources,
+          settings: settings,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || `HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      setStdResult(data);
+
+      // Poll for verification status if we got a verification ID
+      if (data.verificationId) {
+        pollVerificationStatus(data.verificationId, setStdResult, setStdError);
+      }
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setStdError(err.message || String(err));
+    } finally {
+      setStdVerifying(false);
+    }
+  };
+
+  // Metadata Verification
+  const verifyMetadata = async () => {
+    setMetaVerifying(true);
+    setMetaError(null);
+    setMetaResult(null);
+
+    try {
+      if (!metaAddress || !metadataJson) {
+        throw new Error("Address and metadata JSON are required");
+      }
+
+      const metadata = JSON.parse(metadataJson);
+
+      const response = await fetch(
+        `${SOURCIFY_API}/v2/verify/metadata/${metaChainId}/${metaAddress}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            metadata: metadata,
+          }),
+        },
+      );
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || `HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      setMetaResult(data);
+
+      if (data.verificationId) {
+        pollVerificationStatus(data.verificationId, setMetaResult, setMetaError);
+      }
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setMetaError(err.message || String(err));
+    } finally {
+      setMetaVerifying(false);
+    }
+  };
+
+  // Etherscan Import
+  const importFromEtherscan = async () => {
+    setEtherscanImporting(true);
+    setEtherscanError(null);
+    setEtherscanResult(null);
+
+    try {
+      if (!etherscanAddress) {
+        throw new Error("Address is required");
+      }
+
+      const url = new URL(
+        `${SOURCIFY_API}/v2/verify/etherscan/${etherscanChainId}/${etherscanAddress}`,
+      );
+      if (etherscanApiKey) {
+        url.searchParams.append("apiKey", etherscanApiKey);
+      }
+
+      const response = await fetch(url.toString(), {
+        method: "POST",
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || `HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      setEtherscanResult(data);
+
+      if (data.verificationId) {
+        pollVerificationStatus(data.verificationId, setEtherscanResult, setEtherscanError);
+      }
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setEtherscanError(err.message || String(err));
+    } finally {
+      setEtherscanImporting(false);
+    }
+  };
+
+  // Similarity Verification
+  const verifySimilarity = async () => {
+    setSimVerifying(true);
+    setSimError(null);
+    setSimResult(null);
+
+    try {
+      if (!simAddress) {
+        throw new Error("Address is required");
+      }
+
+      const response = await fetch(
+        `${SOURCIFY_API}/v2/verify/similarity/${simChainId}/${simAddress}`,
+        {
+          method: "POST",
+        },
+      );
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || `HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      setSimResult(data);
+
+      if (data.verificationId) {
+        pollVerificationStatus(data.verificationId, setSimResult, setSimError);
+      }
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setSimError(err.message || String(err));
+    } finally {
+      setSimVerifying(false);
+    }
+  };
+
+  // Poll verification status
+  const pollVerificationStatus = async (
+    verificationId: string,
+    // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    setResult: (data: any) => void,
+    setError: (error: string) => void,
+  ) => {
+    let attempts = 0;
+    const maxAttempts = 30;
+    const pollInterval = 2000;
+
+    const poll = async () => {
+      try {
+        const response = await fetch(`${SOURCIFY_API}/v2/verify/${verificationId}`);
+        const data = await response.json();
+
+        if (data.status === "completed" || data.status === "failed") {
+          setResult(data);
+          return;
+        }
+
+        attempts++;
+        if (attempts < maxAttempts) {
+          setTimeout(poll, pollInterval);
+        } else {
+          setError("Verification timed out. Check status manually.");
+        }
+        // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      } catch (err: any) {
+        setError(err.message || String(err));
+      }
+    };
+
+    poll();
+  };
+
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  const renderResult = (result: any) => {
+    if (!result) return null;
+    return (
+      <div className="devtools-results">
+        <pre className="mono sourcify-result-json">{JSON.stringify(result, null, 2)}</pre>
+      </div>
+    );
+  };
+
+  return (
+    <div className="devtools-section">
+      {/* Standard JSON Verification */}
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowStandardVerify(!showStandardVerify)}
+        >
+          <h3 className="devtools-tool-title">✅ Verify Contract (Standard JSON)</h3>
+          <span className="devtools-section-toggle">{showStandardVerify ? "▼" : "▶"}</span>
+        </div>
+        {showStandardVerify && (
+          <div className="devtools-flex-column devtools-gap-12">
+            <div className="sourcify-grid-2col">
+              <div className="devtools-flex-column devtools-gap-4">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Chain ID</label>
+                <select
+                  className="devtools-input"
+                  value={stdChainId}
+                  onChange={(e) => setStdChainId(Number(e.target.value))}
+                >
+                  {Object.entries(NETWORKS).map(([id, net]) => (
+                    <option key={id} value={id}>
+                      {net.name} ({id})
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="devtools-flex-column devtools-gap-4">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Contract Address</label>
+                <input
+                  type="text"
+                  className="devtools-input mono"
+                  placeholder="0x..."
+                  value={stdAddress}
+                  onChange={(e) => setStdAddress(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="devtools-flex-column devtools-gap-4">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label">Contract Name</label>
+              <input
+                type="text"
+                className="devtools-input"
+                placeholder="MyContract"
+                value={stdContractName}
+                onChange={(e) => setStdContractName(e.target.value)}
+              />
+            </div>
+
+            <div className="devtools-flex-column devtools-gap-4">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label">Sources (JSON)</label>
+              <textarea
+                className="devtools-input mono sourcify-sources-textarea"
+                placeholder='{"MyContract.sol": {"content": "pragma solidity..."}}'
+                value={stdSources}
+                onChange={(e) => setStdSources(e.target.value)}
+              />
+            </div>
+
+            <div className="devtools-flex-column devtools-gap-4">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label">Compiler Settings (JSON)</label>
+              <textarea
+                className="devtools-input mono sourcify-settings-textarea"
+                placeholder='{"optimizer": {"enabled": true, "runs": 200}}'
+                value={stdSettings}
+                onChange={(e) => setStdSettings(e.target.value)}
+              />
+            </div>
+
+            {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+            <button
+              className="devtools-button"
+              onClick={verifyStandardJson}
+              disabled={stdVerifying}
+            >
+              {stdVerifying ? "Verifying..." : "Verify Contract"}
+            </button>
+
+            {stdError && <div className="devtools-error">{stdError}</div>}
+            {stdResult && renderResult(stdResult)}
+          </div>
+        )}
+      </div>
+
+      {/* Metadata Verification */}
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowMetadataVerify(!showMetadataVerify)}
+        >
+          <h3 className="devtools-tool-title">🧾 Verify with Metadata</h3>
+          <span className="devtools-section-toggle">{showMetadataVerify ? "▼" : "▶"}</span>
+        </div>
+        {showMetadataVerify && (
+          <div className="devtools-flex-column devtools-gap-12">
+            <div className="sourcify-grid-2col">
+              <div className="devtools-flex-column devtools-gap-4">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Chain ID</label>
+                <select
+                  className="devtools-input"
+                  value={metaChainId}
+                  onChange={(e) => setMetaChainId(Number(e.target.value))}
+                >
+                  {Object.entries(NETWORKS).map(([id, net]) => (
+                    <option key={id} value={id}>
+                      {net.name} ({id})
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="devtools-flex-column devtools-gap-4">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Contract Address</label>
+                <input
+                  type="text"
+                  className="devtools-input mono"
+                  placeholder="0x..."
+                  value={metaAddress}
+                  onChange={(e) => setMetaAddress(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="devtools-flex-column devtools-gap-4">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label">Metadata JSON</label>
+              <textarea
+                className="devtools-input mono sourcify-metadata-textarea"
+                placeholder='{"compiler": {...}, "sources": {...}, ...}'
+                value={metadataJson}
+                onChange={(e) => setMetadataJson(e.target.value)}
+              />
+            </div>
+
+            {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+            <button className="devtools-button" onClick={verifyMetadata} disabled={metaVerifying}>
+              {metaVerifying ? "Verifying..." : "Verify with Metadata"}
+            </button>
+
+            {metaError && <div className="devtools-error">{metaError}</div>}
+            {metaResult && renderResult(metaResult)}
+          </div>
+        )}
+      </div>
+
+      {/* Etherscan Import */}
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowEtherscanImport(!showEtherscanImport)}
+        >
+          <h3 className="devtools-tool-title">🔗 Import to Sourcify from Etherscan</h3>
+          <span className="devtools-section-toggle">{showEtherscanImport ? "▼" : "▶"}</span>
+        </div>
+        {showEtherscanImport && (
+          <div className="devtools-flex-column devtools-gap-12">
+            <div className="sourcify-grid-2col">
+              <div className="devtools-flex-column devtools-gap-4">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Chain ID</label>
+                <select
+                  className="devtools-input"
+                  value={etherscanChainId}
+                  onChange={(e) => setEtherscanChainId(Number(e.target.value))}
+                >
+                  {Object.entries(NETWORKS).map(([id, net]) => (
+                    <option key={id} value={id}>
+                      {net.name} ({id})
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="devtools-flex-column devtools-gap-4">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Contract Address</label>
+                <input
+                  type="text"
+                  className="devtools-input mono"
+                  placeholder="0x..."
+                  value={etherscanAddress}
+                  onChange={(e) => setEtherscanAddress(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="devtools-flex-column devtools-gap-4">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label">Etherscan API Key (Optional)</label>
+              <input
+                type="text"
+                className="devtools-input mono"
+                placeholder="Your Etherscan API key..."
+                value={etherscanApiKey}
+                onChange={(e) => setEtherscanApiKey(e.target.value)}
+              />
+            </div>
+
+            {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+            <button
+              className="devtools-button"
+              onClick={importFromEtherscan}
+              disabled={etherscanImporting}
+            >
+              {etherscanImporting ? "Importing..." : "Import from Etherscan"}
+            </button>
+
+            {etherscanError && <div className="devtools-error">{etherscanError}</div>}
+            {etherscanResult && renderResult(etherscanResult)}
+          </div>
+        )}
+      </div>
+
+      {/* Similarity Verification */}
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowSimilarityVerify(!showSimilarityVerify)}
+        >
+          <h3 className="devtools-tool-title">🔍 Verify via Similarity</h3>
+          <span className="devtools-section-toggle">{showSimilarityVerify ? "▼" : "▶"}</span>
+        </div>
+        {showSimilarityVerify && (
+          <div className="devtools-flex-column devtools-gap-12">
+            <p className="sourcify-similarity-hint">
+              This will attempt to find a similar verified contract and use it for verification.
+            </p>
+
+            <div className="sourcify-grid-2col">
+              <div className="devtools-flex-column devtools-gap-4">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Chain ID</label>
+                <select
+                  className="devtools-input"
+                  value={simChainId}
+                  onChange={(e) => setSimChainId(Number(e.target.value))}
+                >
+                  {Object.entries(NETWORKS).map(([id, net]) => (
+                    <option key={id} value={id}>
+                      {net.name} ({id})
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="devtools-flex-column devtools-gap-4">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Contract Address</label>
+                <input
+                  type="text"
+                  className="devtools-input mono"
+                  placeholder="0x..."
+                  value={simAddress}
+                  onChange={(e) => setSimAddress(e.target.value)}
+                />
+              </div>
+            </div>
+
+            {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+            <button className="devtools-button" onClick={verifySimilarity} disabled={simVerifying}>
+              {simVerifying ? "Verifying..." : "Verify via Similarity"}
+            </button>
+
+            {simError && <div className="devtools-error">{simError}</div>}
+            {simResult && renderResult(simResult)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ContractsSection;
diff --git a/src/components/pages/devtools/DevelopmentSection.tsx b/src/components/pages/devtools/DevelopmentSection.tsx
new file mode 100644
index 0000000..b2464da
--- /dev/null
+++ b/src/components/pages/devtools/DevelopmentSection.tsx
@@ -0,0 +1,213 @@
+import type React from "react";
+import { useCallback, useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { AppContext } from "../../../context/AppContext";
+import { useZipJsonReader } from "../../../hooks/useZipJsonReader";
+
+const DevelopmentSection: React.FC = () => {
+  const [files, setFiles] = useState<File[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const { jsonFiles, setJsonFiles } = useContext(AppContext);
+  const { processZip, loading, error } = useZipJsonReader();
+  const navigate = useNavigate();
+
+  const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback(
+    async (e: React.DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+
+      const droppedFiles = Array.from(e.dataTransfer.files);
+      setFiles((prevFiles) => [...prevFiles, ...droppedFiles]);
+
+      // Process zip files and merge JSON data
+      for (const file of droppedFiles) {
+        if (file.name.endsWith(".zip")) {
+          const jsonData = await processZip(file);
+          // Merge new JSON files with existing ones
+          // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+          setJsonFiles((prev: Record<string, any>) => ({
+            ...prev,
+            ...jsonData,
+          }));
+        }
+      }
+    },
+    [processZip, setJsonFiles],
+  );
+
+  const handleFileInput = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        const selectedFiles = Array.from(e.target.files);
+        setFiles((prevFiles) => [...prevFiles, ...selectedFiles]);
+
+        // Process zip files and merge JSON data
+        for (const file of selectedFiles) {
+          if (file.name.endsWith(".zip")) {
+            const jsonData = await processZip(file);
+            // Merge new JSON files with existing ones
+            setJsonFiles(jsonData);
+          }
+        }
+      }
+    },
+    [processZip, setJsonFiles],
+  );
+
+  const handleRemoveFile = useCallback((index: number) => {
+    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+  }, []);
+
+  const handleClearAll = useCallback(() => {
+    setFiles([]);
+  }, []);
+
+  const handleClearArtifacts = useCallback(() => {
+    setJsonFiles({});
+  }, [setJsonFiles]);
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;
+  };
+
+  return (
+    <div className="devtools-section">
+      <div className="info-box dev-section-container">
+        <h3 className="dev-section-title">Hardhat Ignition</h3>
+        <p className="dev-section-description">
+          Provide a .zip file with the project's <b>contracts/</b> and <b>ignition/</b> directories
+          inside. This will be used as local verification method
+        </p>
+
+        {/* biome-ignore lint/a11y/noStaticElementInteractions: drag and drop zone */}
+        <div
+          onDragEnter={handleDragEnter}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          className={`dev-dropzone ${isDragging ? "dragging" : ""}`}
+        >
+          <div className="dev-dropzone-icon">📁</div>
+          <h4 className="dev-dropzone-title">
+            {isDragging ? "Drop files here" : "Drag and drop ZIP files here"}
+          </h4>
+          <p className="dev-dropzone-separator">or</p>
+          <label htmlFor="file-input" className="dev-browse-btn">
+            Browse Files
+          </label>
+          <input
+            id="file-input"
+            type="file"
+            multiple
+            onChange={handleFileInput}
+            className="hidden"
+          />
+        </div>
+
+        {files.length > 0 && (
+          <div>
+            <div className="flex-between mb-medium">
+              <h4 className="dev-section-subtitle">Uploaded Files ({files.length})</h4>
+              <button type="button" onClick={handleClearAll} className="dev-clear-btn">
+                Clear All
+              </button>
+            </div>
+
+            <div className="dev-file-list">
+              {files.map((file, index) => (
+                <div key={`${file.name}-${index}`} className="dev-file-item">
+                  <div className="dev-file-item-content">
+                    <div className="dev-file-name">{file.name}</div>
+                    <div className="dev-file-meta">
+                      <span>Size: {formatFileSize(file.size)}</span>
+                      <span>Type: {file.type || "Unknown"}</span>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveFile(index)}
+                    className="dev-remove-btn"
+                  >
+                    Remove
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {files.length === 0 && !loading && Object.keys(jsonFiles).length === 0 && (
+          <div className="dev-empty-state">
+            No files uploaded yet. Drag and drop or browse to add files.
+          </div>
+        )}
+
+        {loading && (
+          <div className="dev-loading-state">
+            <div className="dev-loading-icon">⏳</div>
+            <div className="dev-loading-text">Processing ZIP file...</div>
+          </div>
+        )}
+
+        {error && (
+          <div className="dev-error-state">
+            <div className="dev-error-icon">⚠️</div>
+            <div className="dev-error-text">{error}</div>
+          </div>
+        )}
+
+        {Object.keys(jsonFiles).length > 0 && (
+          <div className="mt-large">
+            <div className="flex-between mb-medium">
+              <h4 className="dev-section-subtitle">
+                Extracted JSON Files ({Object.keys(jsonFiles).length})
+              </h4>
+              <button type="button" onClick={handleClearArtifacts} className="dev-clear-btn">
+                Clear Artifacts
+              </button>
+            </div>
+            <div className="dev-json-list">
+              {Object.entries(jsonFiles).map(([path, data]) => (
+                <div key={path} className="dev-json-item">
+                  {/* biome-ignore lint/a11y/noStaticElementInteractions: clickable path */}
+                  {/* biome-ignore lint/a11y/useKeyWithClickEvents: clickable path */}
+                  <div onClick={() => navigate(`/31337/address/${path}`)} className="dev-json-path">
+                    {path}
+                  </div>
+                  <details>
+                    <summary className="dev-json-summary">View JSON content</summary>
+                    <pre className="dev-json-content">{JSON.stringify(data, null, 2)}</pre>
+                  </details>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DevelopmentSection;
diff --git a/src/components/pages/devtools/MessageSigner.tsx b/src/components/pages/devtools/MessageSigner.tsx
new file mode 100644
index 0000000..b24af69
--- /dev/null
+++ b/src/components/pages/devtools/MessageSigner.tsx
@@ -0,0 +1,406 @@
+import type React from "react";
+import { useState } from "react";
+import { type Hex, parseEther, parseGwei } from "viem";
+import { useAccount, useSendTransaction, useSignMessage, useSignTypedData } from "wagmi";
+
+type SignMode = "personal" | "typed" | "transaction";
+
+const MessageSigner: React.FC = () => {
+  const { address, isConnected } = useAccount();
+  const { signMessageAsync, isPending: isSigningMessage } = useSignMessage();
+  const { signTypedDataAsync, isPending: isSigningTypedData } = useSignTypedData();
+  const { sendTransactionAsync, isPending: isSendingTx } = useSendTransaction();
+
+  const [signMode, setSignMode] = useState<SignMode>("personal");
+  const [showSigner, setShowSigner] = useState(false);
+
+  // Personal sign state
+  const [personalMessage, setPersonalMessage] = useState("");
+
+  // Typed data state
+  const [typedDataInput, setTypedDataInput] = useState(
+    JSON.stringify(
+      {
+        domain: {
+          name: "OpenScan",
+          version: "1",
+          chainId: 1,
+          verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
+        },
+        types: {
+          PaymentConfirmation: [
+            { name: "txHash", type: "bytes32" },
+            { name: "message", type: "string" },
+          ],
+        },
+        primaryType: "PaymentConfirmation",
+        message: {
+          txHash: "0x0000000000000000000000000000000000000000000000000000000000000000",
+          message: "I confirm this payment",
+        },
+      },
+      null,
+      2,
+    ),
+  );
+
+  // Transaction state
+  const [txTo, setTxTo] = useState("");
+  const [txValue, setTxValue] = useState("");
+  const [txData, setTxData] = useState("");
+  const [txGasLimit, setTxGasLimit] = useState("");
+  const [txGasPrice, setTxGasPrice] = useState("");
+
+  // Results
+  const [signature, setSignature] = useState("");
+  const [txHash, setTxHash] = useState("");
+  const [error, setError] = useState("");
+
+  const clearResults = () => {
+    setSignature("");
+    setTxHash("");
+    setError("");
+  };
+
+  const handlePersonalSign = async () => {
+    clearResults();
+    try {
+      if (!personalMessage) {
+        setError("Please enter a message to sign");
+        return;
+      }
+      const sig = await signMessageAsync({ message: personalMessage });
+      setSignature(sig);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to sign message");
+    }
+  };
+
+  const handleTypedDataSign = async () => {
+    clearResults();
+    try {
+      const parsed = JSON.parse(typedDataInput);
+      const { domain, types, primaryType, message } = parsed;
+
+      if (!domain || !types || !primaryType || !message) {
+        setError("JSON must contain domain, types, primaryType, and message fields");
+        return;
+      }
+
+      // Remove EIP712Domain from types if present (wagmi handles it automatically)
+      const typesWithoutDomain = { ...types };
+      delete typesWithoutDomain.EIP712Domain;
+
+      const sig = await signTypedDataAsync({
+        domain,
+        types: typesWithoutDomain,
+        primaryType,
+        message,
+      });
+      setSignature(sig);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to sign typed data");
+    }
+  };
+
+  const handleSendTransaction = async () => {
+    clearResults();
+    try {
+      if (!txTo) {
+        setError("Please enter a recipient address");
+        return;
+      }
+
+      const txParams: {
+        to: Hex;
+        value?: bigint;
+        data?: Hex;
+        gas?: bigint;
+        gasPrice?: bigint;
+      } = {
+        to: txTo as Hex,
+      };
+
+      if (txValue) {
+        txParams.value = parseEther(txValue);
+      }
+
+      if (txData) {
+        txParams.data = txData as Hex;
+      }
+
+      if (txGasLimit) {
+        txParams.gas = BigInt(txGasLimit);
+      }
+
+      if (txGasPrice) {
+        txParams.gasPrice = parseGwei(txGasPrice);
+      }
+
+      const hash = await sendTransactionAsync(txParams);
+      setTxHash(hash);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send transaction");
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
+  const isPending = isSigningMessage || isSigningTypedData || isSendingTx;
+
+  return (
+    <div className="devtools-card">
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: toggle header */}
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: toggle header */}
+      <div
+        className="devtools-tool-header cursor-pointer"
+        onClick={() => setShowSigner(!showSigner)}
+      >
+        <h3 className="devtools-tool-title">✍️ Message Signer</h3>
+        <span className="devtools-section-toggle">{showSigner ? "▼" : "▶"}</span>
+      </div>
+
+      {showSigner && (
+        <div className="devtools-flex-column devtools-gap-12">
+          {/* Wallet Connection Status */}
+          <div className={`signer-wallet-status ${isConnected ? "connected" : "disconnected"}`}>
+            {isConnected ? (
+              <>
+                <span className="signer-status-indicator connected" />
+                <span>
+                  Connected: {address?.slice(0, 6)}...{address?.slice(-4)}
+                </span>
+              </>
+            ) : (
+              <>
+                <span className="signer-status-indicator disconnected" />
+                <span>Wallet not connected. Please connect your wallet to sign.</span>
+              </>
+            )}
+          </div>
+
+          {/* Mode Toggle */}
+          <div className="keccak-mode-toggle">
+            {/* biome-ignore lint/a11y/useButtonType: mode toggle */}
+            <button
+              className={`keccak-mode-btn ${signMode === "personal" ? "active" : ""}`}
+              onClick={() => {
+                setSignMode("personal");
+                clearResults();
+              }}
+            >
+              Personal Sign
+            </button>
+            {/* biome-ignore lint/a11y/useButtonType: mode toggle */}
+            <button
+              className={`keccak-mode-btn ${signMode === "typed" ? "active" : ""}`}
+              onClick={() => {
+                setSignMode("typed");
+                clearResults();
+              }}
+            >
+              Typed Data (EIP-712)
+            </button>
+            {/* biome-ignore lint/a11y/useButtonType: mode toggle */}
+            <button
+              className={`keccak-mode-btn ${signMode === "transaction" ? "active" : ""}`}
+              onClick={() => {
+                setSignMode("transaction");
+                clearResults();
+              }}
+            >
+              Send Transaction
+            </button>
+          </div>
+
+          {/* Personal Sign Mode */}
+          {signMode === "personal" && (
+            <div className="devtools-flex-column devtools-gap-12">
+              <div className="devtools-flex-column devtools-gap-4">
+                {/* biome-ignore lint/a11y/noLabelWithoutControl: label association */}
+                <label className="input-label">Message to Sign</label>
+                <textarea
+                  placeholder="Enter your message here..."
+                  value={personalMessage}
+                  onChange={(e) => setPersonalMessage(e.target.value)}
+                  className="devtools-input sig-message-textarea"
+                  disabled={!isConnected}
+                />
+              </div>
+              <p className="signer-hint">
+                Uses EIP-191 personal_sign. The message will be prefixed with "\x19Ethereum Signed
+                Message:\n" before signing.
+              </p>
+              {/* biome-ignore lint/a11y/useButtonType: action button */}
+              <button
+                onClick={handlePersonalSign}
+                className="devtools-button"
+                disabled={!isConnected || isPending}
+              >
+                {isSigningMessage ? "Signing..." : "Sign Message"}
+              </button>
+            </div>
+          )}
+
+          {/* Typed Data Mode */}
+          {signMode === "typed" && (
+            <div className="devtools-flex-column devtools-gap-12">
+              <div className="devtools-flex-column devtools-gap-4">
+                {/* biome-ignore lint/a11y/noLabelWithoutControl: label association */}
+                <label className="input-label">
+                  EIP-712 Typed Data (domain, types, primaryType, message)
+                </label>
+                <textarea
+                  placeholder='{"domain": {...}, "types": {...}, "primaryType": "...", "message": {...}}'
+                  value={typedDataInput}
+                  onChange={(e) => setTypedDataInput(e.target.value)}
+                  className="devtools-input mono eip712-input-textarea"
+                  disabled={!isConnected}
+                />
+              </div>
+              <p className="signer-hint">
+                Uses EIP-712 eth_signTypedData_v4. Structured data signing with domain separation
+                for better security and UX.
+              </p>
+              {/* biome-ignore lint/a11y/useButtonType: action button */}
+              <button
+                onClick={handleTypedDataSign}
+                className="devtools-button"
+                disabled={!isConnected || isPending}
+              >
+                {isSigningTypedData ? "Signing..." : "Sign Typed Data"}
+              </button>
+            </div>
+          )}
+
+          {/* Transaction Mode */}
+          {signMode === "transaction" && (
+            <div className="devtools-flex-column devtools-gap-12">
+              <div className="signer-tx-grid">
+                <div className="devtools-flex-column devtools-gap-4">
+                  {/* biome-ignore lint/a11y/noLabelWithoutControl: label association */}
+                  <label className="input-label">To Address *</label>
+                  <input
+                    type="text"
+                    placeholder="0x..."
+                    value={txTo}
+                    onChange={(e) => setTxTo(e.target.value)}
+                    className="devtools-input"
+                    disabled={!isConnected}
+                  />
+                </div>
+                <div className="devtools-flex-column devtools-gap-4">
+                  {/* biome-ignore lint/a11y/noLabelWithoutControl: label association */}
+                  <label className="input-label">Value (ETH)</label>
+                  <input
+                    type="text"
+                    placeholder="0.0"
+                    value={txValue}
+                    onChange={(e) => setTxValue(e.target.value)}
+                    className="devtools-input"
+                    disabled={!isConnected}
+                  />
+                </div>
+              </div>
+
+              <div className="devtools-flex-column devtools-gap-4">
+                {/* biome-ignore lint/a11y/noLabelWithoutControl: label association */}
+                <label className="input-label">Data (hex)</label>
+                <textarea
+                  placeholder="0x..."
+                  value={txData}
+                  onChange={(e) => setTxData(e.target.value)}
+                  className="devtools-input min-h-60"
+                  disabled={!isConnected}
+                />
+              </div>
+
+              <div className="signer-tx-grid">
+                <div className="devtools-flex-column devtools-gap-4">
+                  {/* biome-ignore lint/a11y/noLabelWithoutControl: label association */}
+                  <label className="input-label">Gas Limit (optional)</label>
+                  <input
+                    type="text"
+                    placeholder="21000"
+                    value={txGasLimit}
+                    onChange={(e) => setTxGasLimit(e.target.value)}
+                    className="devtools-input"
+                    disabled={!isConnected}
+                  />
+                </div>
+                <div className="devtools-flex-column devtools-gap-4">
+                  {/* biome-ignore lint/a11y/noLabelWithoutControl: label association */}
+                  <label className="input-label">Gas Price (Gwei, optional)</label>
+                  <input
+                    type="text"
+                    placeholder="Auto"
+                    value={txGasPrice}
+                    onChange={(e) => setTxGasPrice(e.target.value)}
+                    className="devtools-input"
+                    disabled={!isConnected}
+                  />
+                </div>
+              </div>
+
+              <p className="signer-hint">
+                Signs and broadcasts a raw transaction. The wallet will prompt for confirmation
+                before sending.
+              </p>
+              {/* biome-ignore lint/a11y/useButtonType: action button */}
+              <button
+                onClick={handleSendTransaction}
+                className="devtools-button"
+                disabled={!isConnected || isPending}
+              >
+                {isSendingTx ? "Sending..." : "Send Transaction"}
+              </button>
+            </div>
+          )}
+
+          {/* Error Display */}
+          {error && (
+            <div className="devtools-error">
+              <span>{error}</span>
+              {/* biome-ignore lint/a11y/useButtonType: dismiss button */}
+              <button className="devtools-error-dismiss" onClick={() => setError("")}>
+                ✕
+              </button>
+            </div>
+          )}
+
+          {/* Signature Result */}
+          {signature && (
+            <div className="devtools-results">
+              <div className="signer-result-header">
+                <span className="sig-result-label">Signature</span>
+                {/* biome-ignore lint/a11y/useButtonType: copy button */}
+                <button className="devtools-copy-btn" onClick={() => copyToClipboard(signature)}>
+                  Copy
+                </button>
+              </div>
+              <div className="sig-result-value mono signer-signature-value">{signature}</div>
+            </div>
+          )}
+
+          {/* Transaction Hash Result */}
+          {txHash && (
+            <div className="devtools-results">
+              <div className="signer-result-header">
+                <span className="sig-result-label">Transaction Hash</span>
+                {/* biome-ignore lint/a11y/useButtonType: copy button */}
+                <button className="devtools-copy-btn" onClick={() => copyToClipboard(txHash)}>
+                  Copy
+                </button>
+              </div>
+              <div className="sig-result-value mono">{txHash}</div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MessageSigner;
diff --git a/src/components/pages/devtools/SignaturesSection.tsx b/src/components/pages/devtools/SignaturesSection.tsx
new file mode 100644
index 0000000..ea497a3
--- /dev/null
+++ b/src/components/pages/devtools/SignaturesSection.tsx
@@ -0,0 +1,541 @@
+import {
+  AbiCoder,
+  getBytes,
+  hashMessage,
+  recoverAddress,
+  Signature,
+  TypedDataEncoder,
+} from "ethers";
+import type React from "react";
+import { useState } from "react";
+import MessageSigner from "./MessageSigner";
+
+const SignaturesSection: React.FC = () => {
+  const [showSignatureInspector, setShowSignatureInspector] = useState(false);
+  const [showEIP712Tool, setShowEIP712Tool] = useState(false);
+
+  // Signature Inspector state
+  const [sigMessage, setSigMessage] = useState("");
+  const [sigSignature, setSigSignature] = useState("");
+  const [sigExpectedAddress] = useState("");
+  const [sigMessageType, setSigMessageType] = useState<"message" | "hash">("message");
+  const [sigResults, setSigResults] = useState<{
+    format?: string;
+    messageFormat?: string;
+    messageHash?: string;
+    recoveredAddress?: string;
+    r?: string;
+    s?: string;
+    v?: number;
+    isCompact?: boolean;
+    yParity?: number;
+    addressMatch?: boolean;
+    error?: string;
+  } | null>(null);
+
+  // EIP-712 Tool state
+  const [eip712Mode, setEip712Mode] = useState<"encode" | "decode">("encode");
+  const [eip712Input, setEip712Input] = useState(
+    JSON.stringify(
+      {
+        domain: {
+          name: "MyApp",
+          version: "1",
+          chainId: 1,
+          verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
+        },
+        types: {
+          Person: [
+            { name: "name", type: "string" },
+            { name: "wallet", type: "address" },
+          ],
+        },
+        message: {
+          name: "Alice",
+          wallet: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+        },
+      },
+      null,
+      2,
+    ),
+  );
+  const [eip712DecodeTypes, setEip712DecodeTypes] = useState(
+    JSON.stringify(
+      {
+        Person: [
+          { name: "name", type: "string" },
+          { name: "wallet", type: "address" },
+        ],
+      },
+      null,
+      2,
+    ),
+  );
+  const [eip712DecodeData, setEip712DecodeData] = useState("");
+  const [eip712Results, setEip712Results] = useState<{
+    domainSeparator?: string;
+    structHash?: string;
+    messageHash?: string;
+    encodedData?: string;
+    decodedMessage?: string;
+    error?: string;
+  } | null>(null);
+
+  const verifySignature = () => {
+    try {
+      if (!sigSignature) {
+        setSigResults({ error: "Please provide a signature" });
+        return;
+      }
+
+      const sig = sigSignature.trim();
+
+      // Parse the signature
+      let signature: Signature;
+      let format: string;
+      let isCompact = false;
+      let yParity: number | undefined;
+
+      // Detect signature format by length
+      const sigBytes = getBytes(sig);
+
+      if (sigBytes.length === 64) {
+        // EIP-2098 compact signature (r || yParityAndS)
+        format = "EIP-2098 Compact (64 bytes)";
+        isCompact = true;
+        signature = Signature.from(sig);
+        yParity = signature.yParity;
+      } else if (sigBytes.length === 65) {
+        // Standard signature (r || s || v)
+        format = "Standard (65 bytes)";
+        signature = Signature.from(sig);
+      } else {
+        setSigResults({
+          error: `Invalid signature length: ${sigBytes.length} bytes (expected 64 or 65)`,
+        });
+        return;
+      }
+
+      const r = signature.r;
+      const s = signature.s;
+      const v = signature.v;
+
+      // Determine message hash based on input type toggle
+      let messageHash: string = "";
+      let detectedMessageFormat: string;
+
+      if (sigMessageType === "hash") {
+        // User explicitly selected pre-hashed - use raw hash
+        if (!sigMessage.startsWith("0x") || sigMessage.length !== 66) {
+          setSigResults({ error: "Pre-hashed input must be a 32-byte hex string (0x + 64 chars)" });
+          return;
+        }
+        messageHash = sigMessage;
+        detectedMessageFormat = "Pre-hashed (32 bytes)";
+      } else if (sigMessage.trim().startsWith("{")) {
+        // Try to parse as JSON for EIP-712
+        try {
+          const parsed = JSON.parse(sigMessage);
+          if (parsed.domain && parsed.types && parsed.message) {
+            // EIP-712 typed data - remove EIP712Domain from types if present
+            const typesWithoutDomain = { ...parsed.types };
+            delete typesWithoutDomain.EIP712Domain;
+            messageHash = TypedDataEncoder.hash(parsed.domain, typesWithoutDomain, parsed.message);
+            detectedMessageFormat = "EIP-712 Typed Data";
+          } else {
+            // Not valid EIP-712, treat as string
+            messageHash = hashMessage(sigMessage);
+            detectedMessageFormat = "EIP-191 Personal Sign";
+          }
+        } catch {
+          // Invalid JSON, treat as string
+          messageHash = hashMessage(sigMessage);
+          detectedMessageFormat = "EIP-191 Personal Sign";
+        }
+      } else {
+        // EIP-191 personal sign (most common)
+        messageHash = hashMessage(sigMessage);
+        detectedMessageFormat = "EIP-191 Personal Sign";
+      }
+
+      // Recover the address
+      const recoveredAddress = recoverAddress(messageHash, signature);
+
+      // Check if it matches expected address
+      let addressMatch: boolean | undefined;
+      if (sigExpectedAddress) {
+        addressMatch = recoveredAddress.toLowerCase() === sigExpectedAddress.toLowerCase();
+      }
+
+      setSigResults({
+        format,
+        // biome-ignore lint/style/noNonNullAssertion: <TODO>
+        messageFormat: detectedMessageFormat!,
+        messageHash,
+        recoveredAddress,
+        r,
+        s,
+        v,
+        isCompact,
+        yParity,
+        addressMatch,
+      });
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setSigResults({ error: err.message || "Failed to verify signature" });
+    }
+  };
+
+  const encodeEIP712 = () => {
+    try {
+      const parsed = JSON.parse(eip712Input);
+      const { domain, types, message } = parsed;
+
+      if (!domain || !types || !message) {
+        setEip712Results({ error: "JSON must contain domain, types, and message fields" });
+        return;
+      }
+
+      // Get the primary type (first key in types that isn't EIP712Domain)
+      const primaryType = Object.keys(types).find((t) => t !== "EIP712Domain");
+      if (!primaryType) {
+        setEip712Results({ error: "No primary type found in types" });
+        return;
+      }
+
+      // Calculate domain separator
+      const domainSeparator = TypedDataEncoder.hashDomain(domain);
+
+      // Calculate struct hash of the message
+      const structHash = TypedDataEncoder.from(types).hash(message);
+
+      // Calculate the final message hash (what gets signed)
+      const messageHash = TypedDataEncoder.hash(domain, types, message);
+
+      // Get the encoded data
+      const encodedData = TypedDataEncoder.from(types).encodeData(primaryType, message);
+
+      setEip712Results({
+        domainSeparator,
+        structHash,
+        messageHash,
+        encodedData,
+      });
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setEip712Results({ error: err.message || "Failed to encode EIP-712 data" });
+    }
+  };
+
+  const decodeEIP712 = () => {
+    try {
+      const types = JSON.parse(eip712DecodeTypes);
+      const data = eip712DecodeData.trim();
+
+      if (!data.startsWith("0x")) {
+        setEip712Results({ error: "Encoded data must be a hex string starting with 0x" });
+        return;
+      }
+
+      // Get the primary type
+      const primaryType = Object.keys(types).find((t) => t !== "EIP712Domain");
+      if (!primaryType) {
+        setEip712Results({ error: "No primary type found in types" });
+        return;
+      }
+
+      // Build ABI types array from the EIP-712 types
+      const typeFields = types[primaryType];
+      const abiTypes: string[] = ["bytes32"]; // First 32 bytes is the type hash
+      for (const field of typeFields) {
+        // Map EIP-712 types to ABI types
+        let abiType = field.type;
+        if (abiType === "string" || abiType === "bytes") {
+          abiType = "bytes32"; // Strings and bytes are hashed
+        } else if (types[abiType]) {
+          abiType = "bytes32"; // Nested structs are hashed
+        }
+        abiTypes.push(abiType);
+      }
+
+      // Decode the data
+      const abiCoder = AbiCoder.defaultAbiCoder();
+      const decoded = abiCoder.decode(abiTypes, data);
+
+      // Build the decoded message object
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      const decodedMessage: Record<string, any> = {};
+      decodedMessage._typeHash = decoded[0]; // First value is the type hash
+
+      for (let i = 0; i < typeFields.length; i++) {
+        const field = typeFields[i];
+        let value = decoded[i + 1];
+
+        // Convert BigInt to string for display
+        if (typeof value === "bigint") {
+          value = value.toString();
+        }
+
+        // Note if value is a hash (for string/bytes/struct types)
+        if (field.type === "string" || field.type === "bytes" || types[field.type]) {
+          decodedMessage[field.name] = `${value} (hashed ${field.type})`;
+        } else {
+          decodedMessage[field.name] = value;
+        }
+      }
+
+      setEip712Results({
+        decodedMessage: JSON.stringify(decodedMessage, null, 2),
+      });
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setEip712Results({ error: err.message || "Failed to decode EIP-712 data" });
+    }
+  };
+
+  return (
+    <div className="devtools-section">
+      {/* Message Signer */}
+      <MessageSigner />
+
+      {/* Signature Inspector */}
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowSignatureInspector(!showSignatureInspector)}
+        >
+          <h3 className="devtools-tool-title">🔍 Signature Inspector</h3>
+          <span className="devtools-section-toggle">{showSignatureInspector ? "▼" : "▶"}</span>
+        </div>
+        {showSignatureInspector && (
+          <div className="devtools-flex-column devtools-gap-12">
+            {/* Message Type Toggle */}
+            <div className="keccak-mode-toggle">
+              {/** biome-ignore lint/a11y/useButtonType: mode toggle */}
+              <button
+                className={`keccak-mode-btn ${sigMessageType === "message" ? "active" : ""}`}
+                onClick={() => setSigMessageType("message")}
+              >
+                EIP-191 Personal Signature
+              </button>
+              {/** biome-ignore lint/a11y/useButtonType: mode toggle */}
+              <button
+                className={`keccak-mode-btn ${sigMessageType === "hash" ? "active" : ""}`}
+                onClick={() => setSigMessageType("hash")}
+              >
+                Raw Message Signature
+              </button>
+            </div>
+            <div className="devtools-flex-column devtools-gap-4">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label">
+                {sigMessageType === "message"
+                  ? "Message (string or EIP-712 JSON)"
+                  : "Pre-hashed value (32-byte hex)"}
+              </label>
+              <textarea
+                placeholder={
+                  sigMessageType === "message"
+                    ? 'Hello World, 0x1234...abcd, or {"domain":...}'
+                    : "0x..."
+                }
+                value={sigMessage}
+                onChange={(e) => setSigMessage(e.target.value)}
+                className="devtools-input sig-message-textarea"
+              />
+            </div>
+            <div className="devtools-flex-column devtools-gap-4">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label">Signature (65 or 64 bytes hex)</label>
+              <input
+                type="text"
+                placeholder="0x..."
+                value={sigSignature}
+                onChange={(e) => setSigSignature(e.target.value)}
+                className="devtools-input"
+              />
+            </div>
+            {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+            <button onClick={verifySignature} className="devtools-button">
+              Verify Signature
+            </button>
+
+            {sigResults && (
+              <div className="devtools-results">
+                {sigResults.error ? (
+                  <div className="devtools-error">{sigResults.error}</div>
+                ) : (
+                  <div className="signature-results">
+                    <div className="sig-result-row">
+                      <span className="sig-result-label">Signature Format:</span>
+                      <span className="sig-result-value">{sigResults.format}</span>
+                    </div>
+                    <div className="sig-result-row">
+                      <span className="sig-result-label">Message Format:</span>
+                      <span className="sig-result-value">{sigResults.messageFormat}</span>
+                    </div>
+                    <div className="sig-result-row">
+                      <span className="sig-result-label">Message Hash:</span>
+                      <span className="sig-result-value mono">{sigResults.messageHash}</span>
+                    </div>
+                    <div className="sig-result-row">
+                      <span className="sig-result-label">Recovered Address:</span>
+                      <span className="sig-result-value mono">{sigResults.recoveredAddress}</span>
+                    </div>
+                    <div className="sig-components">
+                      <div className="sig-component-title">Signature Components</div>
+                      <div className="sig-result-row">
+                        <span className="sig-result-label">r:</span>
+                        <span className="sig-result-value mono">{sigResults.r}</span>
+                      </div>
+                      <div className="sig-result-row">
+                        <span className="sig-result-label">s:</span>
+                        <span className="sig-result-value mono">{sigResults.s}</span>
+                      </div>
+                      <div className="sig-result-row">
+                        <span className="sig-result-label">v:</span>
+                        <span className="sig-result-value">{sigResults.v}</span>
+                      </div>
+                      {sigResults.isCompact && sigResults.yParity !== undefined && (
+                        <div className="sig-result-row">
+                          <span className="sig-result-label">yParity:</span>
+                          <span className="sig-result-value">{sigResults.yParity}</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* EIP-712 Encoder/Decoder */}
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowEIP712Tool(!showEIP712Tool)}
+        >
+          <h3 className="devtools-tool-title">📋 EIP-712 Encoder/Decoder</h3>
+          <span className="devtools-section-toggle">{showEIP712Tool ? "▼" : "▶"}</span>
+        </div>
+        {showEIP712Tool && (
+          <div className="devtools-flex-column devtools-gap-12">
+            {/* Mode Toggle */}
+            <div className="keccak-mode-toggle">
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button
+                className={`keccak-mode-btn ${eip712Mode === "encode" ? "active" : ""}`}
+                onClick={() => {
+                  setEip712Mode("encode");
+                  setEip712Results(null);
+                }}
+              >
+                Encode
+              </button>
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button
+                className={`keccak-mode-btn ${eip712Mode === "decode" ? "active" : ""}`}
+                onClick={() => {
+                  setEip712Mode("decode");
+                  setEip712Results(null);
+                }}
+              >
+                Decode
+              </button>
+            </div>
+
+            {eip712Mode === "encode" ? (
+              <>
+                <div className="devtools-flex-column devtools-gap-4">
+                  {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                  <label className="input-label">EIP-712 JSON (domain, types, message)</label>
+                  <textarea
+                    placeholder='{"domain": {...}, "types": {...}, "message": {...}}'
+                    value={eip712Input}
+                    onChange={(e) => setEip712Input(e.target.value)}
+                    className="devtools-input mono eip712-input-textarea"
+                  />
+                </div>
+                {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                <button onClick={encodeEIP712} className="devtools-button">
+                  Encode EIP-712
+                </button>
+              </>
+            ) : (
+              <>
+                <div className="devtools-flex-column devtools-gap-4">
+                  {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                  <label className="input-label">Types Definition</label>
+                  <textarea
+                    placeholder='{"Person": [{"name": "name", "type": "string"}]}'
+                    value={eip712DecodeTypes}
+                    onChange={(e) => setEip712DecodeTypes(e.target.value)}
+                    className="devtools-input mono eip712-types-textarea"
+                  />
+                </div>
+                <div className="devtools-flex-column devtools-gap-4">
+                  {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                  <label className="input-label">Encoded Data (hex)</label>
+                  <textarea
+                    placeholder="0x..."
+                    value={eip712DecodeData}
+                    onChange={(e) => setEip712DecodeData(e.target.value)}
+                    className="devtools-input mono eip712-data-textarea"
+                  />
+                </div>
+                {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                <button onClick={decodeEIP712} className="devtools-button">
+                  Decode EIP-712
+                </button>
+              </>
+            )}
+
+            {eip712Results && (
+              <div className="devtools-results">
+                {eip712Results.error ? (
+                  <div className="devtools-error">{eip712Results.error}</div>
+                ) : eip712Mode === "encode" ? (
+                  <div className="eip712-results">
+                    <div className="sig-result-row">
+                      <span className="sig-result-label">Domain Separator:</span>
+                      <span className="sig-result-value mono">{eip712Results.domainSeparator}</span>
+                    </div>
+                    <div className="sig-result-row">
+                      <span className="sig-result-label">Struct Hash:</span>
+                      <span className="sig-result-value mono">{eip712Results.structHash}</span>
+                    </div>
+                    <div className="sig-result-row">
+                      <span className="sig-result-label">Message Hash (signable):</span>
+                      <span className="sig-result-value mono">{eip712Results.messageHash}</span>
+                    </div>
+                    <div className="sig-result-row">
+                      <span className="sig-result-label">Encoded Data:</span>
+                      <span className="sig-result-value mono eip712-encoded-data">
+                        {eip712Results.encodedData}
+                      </span>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="eip712-results">
+                    <div className="eip712-decoded-row">
+                      <span className="sig-result-label">Decoded Message:</span>
+                      <pre className="eip712-decoded-pre">{eip712Results.decodedMessage}</pre>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SignaturesSection;
diff --git a/src/components/pages/devtools/TransactionsSection.tsx b/src/components/pages/devtools/TransactionsSection.tsx
new file mode 100644
index 0000000..678bfc9
--- /dev/null
+++ b/src/components/pages/devtools/TransactionsSection.tsx
@@ -0,0 +1,604 @@
+import {
+  BrowserProvider,
+  formatEther,
+  formatUnits,
+  JsonRpcProvider,
+  parseEther,
+  parseUnits,
+  type TransactionRequest,
+  type TransactionResponse,
+  Wallet,
+} from "ethers";
+import type React from "react";
+import { useEffect, useState } from "react";
+
+const NETWORKS: Record<number, { name: string; rpc: string }> = {
+  1: { name: "Ethereum Mainnet", rpc: "https://eth.llamarpc.com" },
+  10: { name: "Optimism", rpc: "https://mainnet.optimism.io" },
+  42161: { name: "Arbitrum One", rpc: "https://arb1.arbitrum.io/rpc" },
+  8453: { name: "Base", rpc: "https://mainnet.base.org" },
+  137: { name: "Polygon", rpc: "https://polygon-rpc.com" },
+};
+
+const TransactionsSection: React.FC = () => {
+  const [showTransactionBuilder, setShowTransactionBuilder] = useState(true);
+  const [txFrom, setTxFrom] = useState("");
+  const [txTo, setTxTo] = useState("");
+  const [txValue, setTxValue] = useState("");
+  const [txData, setTxData] = useState("");
+  const [txGasLimit, setTxGasLimit] = useState<string | undefined>(undefined);
+  const [txGasPrice, setTxGasPrice] = useState<string | undefined>(undefined);
+  const [txMaxFeePerGas, setTxMaxFeePerGas] = useState<string | undefined>(undefined);
+  const [txMaxPriorityFeePerGas, setTxMaxPriorityFeePerGas] = useState<string | undefined>(
+    undefined,
+  );
+  const [txNonce, setTxNonce] = useState<number | undefined>(undefined);
+  const [txChainId, setTxChainId] = useState<number | undefined>(undefined);
+  const [txType, setTxType] = useState<0 | 2>(2);
+  const [useMetaMask, setUseMetaMask] = useState(true);
+  const [localPrivateKey, setLocalPrivateKey] = useState("");
+  const [estimatedGas, setEstimatedGas] = useState<string | null>(null);
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  const [suggestedFees, setSuggestedFees] = useState<any>(null);
+  const [ethUsdPrice, setEthUsdPrice] = useState<number | null>(null);
+  const [estimatedCostEth, setEstimatedCostEth] = useState<string | null>(null);
+  const [estimatedCostUsd, setEstimatedCostUsd] = useState<string | null>(null);
+  const [txSending, setTxSending] = useState(false);
+  const [txHashResult, setTxHashResult] = useState<string | null>(null);
+  const [txError, setTxError] = useState<string | null>(null);
+  const [txWillRevert, setTxWillRevert] = useState<boolean>(false);
+  const [revertReason, setRevertReason] = useState<string | null>(null);
+  const [builtTx, setBuiltTx] = useState<string | null>(null);
+  const [showAdvancedRaw, setShowAdvancedRaw] = useState(false);
+  const [rawRlp, setRawRlp] = useState("");
+
+  useEffect(() => {
+    const fetchEthPrice = async () => {
+      try {
+        const res = await fetch(
+          "https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd",
+        );
+        const json = await res.json();
+        const price = json?.ethereum?.usd;
+        if (price) setEthUsdPrice(price);
+      } catch (_err) {
+        // ignore
+      }
+    };
+    fetchEthPrice();
+  }, []);
+
+  const parseEtherSafe = (v?: string): bigint => {
+    if (!v) return BigInt(0);
+    try {
+      return parseEther(v);
+    } catch {
+      return BigInt(0);
+    }
+  };
+
+  const formatEthValue = (bn: bigint) => formatEther(bn);
+
+  const estimateGasAndFees = async () => {
+    setTxError(null);
+    setTxWillRevert(false);
+    setRevertReason(null);
+    try {
+      const chainId = txChainId || 1;
+      const net = NETWORKS[chainId];
+      if (!net) throw new Error("Unknown network - select a supported chainId");
+      const provider = new JsonRpcProvider(net.rpc);
+
+      const to = txTo || undefined;
+      const value = parseEtherSafe(txValue);
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      const txReq: any = { to, value, data: txData || undefined };
+
+      let gas: bigint;
+      let willRevert = false;
+      let revertMsg: string | null = null;
+
+      try {
+        await provider.call(txReq);
+        // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      } catch (callErr: any) {
+        willRevert = true;
+        const errMsg = callErr.message || String(callErr);
+        if (callErr.data) {
+          revertMsg = `Revert data: ${callErr.data}`;
+        } else if (errMsg.includes("revert")) {
+          revertMsg = errMsg;
+        } else if (errMsg.includes("execution reverted")) {
+          revertMsg = errMsg;
+        } else {
+          revertMsg = `Transaction will fail: ${errMsg}`;
+        }
+      }
+
+      try {
+        gas = await provider.estimateGas(txReq);
+        // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      } catch (estErr: any) {
+        gas = BigInt(500000);
+        if (!willRevert) {
+          willRevert = true;
+          revertMsg = estErr.message || "Gas estimation failed - transaction may revert";
+        }
+      }
+
+      setEstimatedGas(gas.toString());
+      setTxWillRevert(willRevert);
+      setRevertReason(revertMsg);
+
+      const feeData = await provider.getFeeData();
+      setSuggestedFees(feeData);
+
+      const gasPriceBN =
+        txType === 0 ? (feeData.gasPrice ?? BigInt(0)) : (feeData.maxFeePerGas ?? BigInt(0));
+      const cost = gas * gasPriceBN;
+      setEstimatedCostEth(formatEthValue(cost));
+      if (ethUsdPrice)
+        setEstimatedCostUsd((parseFloat(formatEthValue(cost)) * ethUsdPrice).toFixed(6));
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setTxError(err.message || String(err));
+    }
+  };
+
+  const fetchNonceForAddress = async (address: string, chainId?: number) => {
+    try {
+      const cid = chainId || txChainId || 1;
+      const net = NETWORKS[cid];
+      if (!net) throw new Error("Unknown network");
+      const provider = new JsonRpcProvider(net.rpc);
+      const n = await provider.getTransactionCount(address);
+      setTxNonce(n);
+      return n;
+    } catch (_err) {
+      return undefined;
+    }
+  };
+
+  const sendTransaction = async () => {
+    setTxError(null);
+    setTxHashResult(null);
+    setTxSending(true);
+    try {
+      const chainId = txChainId || 1;
+      const net = NETWORKS[chainId];
+      if (!net) throw new Error("Unknown network");
+      const provider = new JsonRpcProvider(net.rpc);
+
+      // Validate gasLimit is a valid number
+      let gasLimit: bigint | undefined;
+      if (txGasLimit) {
+        if (!/^\d+$/.test(txGasLimit.trim())) {
+          throw new Error("Gas limit must be a valid number");
+        }
+        gasLimit = BigInt(txGasLimit.trim());
+      } else if (estimatedGas) {
+        gasLimit = BigInt(estimatedGas);
+      }
+
+      const txRequest: TransactionRequest = {
+        to: txTo || undefined,
+        value: parseEtherSafe(txValue),
+        data: txData || undefined,
+        gasLimit,
+      };
+
+      if (txType === 2) {
+        if (txMaxFeePerGas) txRequest.maxFeePerGas = parseUnits(txMaxFeePerGas, "gwei");
+        if (txMaxPriorityFeePerGas)
+          txRequest.maxPriorityFeePerGas = parseUnits(txMaxPriorityFeePerGas, "gwei");
+      } else {
+        if (txGasPrice) txRequest.gasPrice = parseUnits(txGasPrice, "gwei");
+      }
+
+      if (typeof txNonce === "number") txRequest.nonce = txNonce;
+      txRequest.chainId = BigInt(chainId);
+
+      let sentTx: TransactionResponse;
+
+      if (!useMetaMask && localPrivateKey) {
+        const wallet = new Wallet(localPrivateKey, provider);
+        sentTx = await wallet.sendTransaction(txRequest);
+      } else {
+        // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+        if (!(window as any).ethereum)
+          throw new Error("No injected wallet (window.ethereum) found");
+        // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+        const web3Provider = new BrowserProvider((window as any).ethereum as any);
+        const signer = await web3Provider.getSigner();
+        sentTx = await signer.sendTransaction(txRequest);
+      }
+
+      setTxHashResult(sentTx.hash);
+      setTxSending(false);
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setTxError(err.message || String(err));
+      setTxSending(false);
+    }
+  };
+
+  const buildTransaction = () => {
+    setTxError(null);
+    setBuiltTx(null);
+    try {
+      const chainId = txChainId || 1;
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      const txObj: Record<string, any> = {
+        type: txType,
+        chainId: chainId,
+        to: txTo || null,
+        value: txValue ? parseEtherSafe(txValue).toString() : "0",
+        data: txData || "0x",
+        gasLimit: txGasLimit || estimatedGas || null,
+      };
+
+      if (txFrom) txObj.from = txFrom;
+      if (typeof txNonce === "number") txObj.nonce = txNonce;
+
+      if (txType === 2) {
+        txObj.maxFeePerGas = txMaxFeePerGas ? parseUnits(txMaxFeePerGas, "gwei").toString() : null;
+        txObj.maxPriorityFeePerGas = txMaxPriorityFeePerGas
+          ? parseUnits(txMaxPriorityFeePerGas, "gwei").toString()
+          : null;
+      } else {
+        txObj.gasPrice = txGasPrice ? parseUnits(txGasPrice, "gwei").toString() : null;
+      }
+
+      setBuiltTx(JSON.stringify(txObj, null, 2));
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setTxError(err.message || String(err));
+    }
+  };
+
+  const sendRawRlpTx = async () => {
+    setTxSending(true);
+    setTxError(null);
+    try {
+      const chainId = txChainId || 1;
+      const net = NETWORKS[chainId];
+      if (!net) throw new Error("Unknown network");
+      const provider = new JsonRpcProvider(net.rpc);
+      const res = await provider.broadcastTransaction(rawRlp);
+      setTxHashResult(res.hash);
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setTxError(err.message || String(err));
+    } finally {
+      setTxSending(false);
+    }
+  };
+
+  return (
+    <div className="devtools-section">
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowTransactionBuilder(!showTransactionBuilder)}
+        >
+          <h3 className="devtools-tool-title">🧾 Transaction Builder</h3>
+          <span className="devtools-section-toggle">{showTransactionBuilder ? "▼" : "▶"}</span>
+        </div>
+        {showTransactionBuilder && (
+          <div className="devtools-flex-column devtools-gap-10">
+            <div className="tx-builder-network-row">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label">Network</label>
+              <select
+                value={txChainId ?? 1}
+                onChange={(e) => setTxChainId(parseInt(e.target.value, 10))}
+                className="devtools-input"
+              >
+                <option value={1}>Ethereum Mainnet (1)</option>
+                <option value={10}>Optimism (10)</option>
+                <option value={42161}>Arbitrum One (42161)</option>
+                <option value={8453}>Base (8453)</option>
+                <option value={137}>Polygon (137)</option>
+              </select>
+            </div>
+
+            <div className="tx-builder-address-row">
+              <div className="devtools-flex-1">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">From (address, optional)</label>
+                <input
+                  type="text"
+                  className="devtools-input"
+                  value={txFrom}
+                  onChange={(e) => setTxFrom(e.target.value)}
+                  placeholder="0x... (for building unsigned tx)"
+                />
+              </div>
+              <div className="devtools-flex-1">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">To (address)</label>
+                <input
+                  type="text"
+                  className="devtools-input"
+                  value={txTo}
+                  onChange={(e) => setTxTo(e.target.value)}
+                  placeholder="0x..."
+                />
+              </div>
+            </div>
+
+            <div className="tx-builder-value-row">
+              <div className="devtools-flex-1">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Value (ETH)</label>
+                <input
+                  type="text"
+                  className="devtools-input"
+                  value={txValue}
+                  onChange={(e) => setTxValue(e.target.value)}
+                  placeholder="0.01"
+                />
+              </div>
+              <div className="devtools-width-220">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Nonce (optional)</label>
+                <input
+                  type="number"
+                  className="devtools-input"
+                  value={txNonce ?? ""}
+                  onChange={(e) =>
+                    setTxNonce(e.target.value === "" ? undefined : parseInt(e.target.value, 10))
+                  }
+                  placeholder="auto"
+                />
+              </div>
+            </div>
+
+            <div className="devtools-flex-column">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label">Data (hex, optional)</label>
+              <textarea
+                className="devtools-input mono tx-builder-data-textarea"
+                value={txData}
+                onChange={(e) => setTxData(e.target.value)}
+                placeholder="0x..."
+              />
+            </div>
+
+            <div className="tx-builder-gas-row">
+              <div>
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Tx Type</label>
+                <select
+                  className="devtools-input"
+                  value={txType}
+                  onChange={(e) => setTxType(Number(e.target.value) as 0 | 2)}
+                >
+                  <option value={2}>EIP-1559 (type 2)</option>
+                  <option value={0}>Legacy (type 0)</option>
+                </select>
+              </div>
+              <div className="devtools-flex-1">
+                {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                <label className="input-label">Gas Limit (optional)</label>
+                <input
+                  className="devtools-input"
+                  value={txGasLimit ?? ""}
+                  onChange={(e) =>
+                    setTxGasLimit(e.target.value === "" ? undefined : e.target.value)
+                  }
+                  placeholder="auto-estimate"
+                />
+              </div>
+            </div>
+
+            {txType === 0 ? (
+              <div className="tx-builder-fee-row">
+                <div className="devtools-flex-1">
+                  {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                  <label className="input-label">Gas Price (gwei)</label>
+                  <input
+                    className="devtools-input"
+                    value={txGasPrice ?? ""}
+                    onChange={(e) =>
+                      setTxGasPrice(e.target.value === "" ? undefined : e.target.value)
+                    }
+                    placeholder="suggested"
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="tx-builder-fee-row">
+                <div className="devtools-flex-1">
+                  {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                  <label className="input-label">Max Fee Per Gas (gwei)</label>
+                  <input
+                    className="devtools-input"
+                    value={txMaxFeePerGas ?? ""}
+                    onChange={(e) =>
+                      setTxMaxFeePerGas(e.target.value === "" ? undefined : e.target.value)
+                    }
+                    placeholder="suggested"
+                  />
+                </div>
+                <div className="devtools-width-220">
+                  {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+                  <label className="input-label">Max Priority Fee (gwei)</label>
+                  <input
+                    className="devtools-input"
+                    value={txMaxPriorityFeePerGas ?? ""}
+                    onChange={(e) =>
+                      setTxMaxPriorityFeePerGas(e.target.value === "" ? undefined : e.target.value)
+                    }
+                    placeholder="suggested"
+                  />
+                </div>
+              </div>
+            )}
+
+            <div className="tx-builder-signing-row">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label devtools-margin-right-8">Signing</label>
+              <select
+                className="devtools-input devtools-width-220"
+                value={useMetaMask ? "metamask" : "local"}
+                onChange={(e) => setUseMetaMask(e.target.value === "metamask")}
+              >
+                <option value="metamask">MetaMask / Injected</option>
+                <option value="local">Local Private Key</option>
+              </select>
+              {!useMetaMask && (
+                <input
+                  className="devtools-input mono tx-builder-pk-input"
+                  placeholder="0xYOURPRIVATEKEY"
+                  value={localPrivateKey}
+                  onChange={(e) => setLocalPrivateKey(e.target.value)}
+                />
+              )}
+            </div>
+
+            <div className="tx-builder-buttons">
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button className="devtools-button" onClick={estimateGasAndFees}>
+                Estimate Gas & Fees
+              </button>
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button
+                className="devtools-button"
+                onClick={() => {
+                  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+                  if ((window as any).ethereum)
+                    fetchNonceForAddress(
+                      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+                      (window as any).ethereum.selectedAddress ||
+                        // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+                        (window as any).ethereum?.accounts?.[0],
+                    );
+                }}
+              >
+                Fetch Nonce
+              </button>
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button className="devtools-button" onClick={buildTransaction}>
+                Build Transaction
+              </button>
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button
+                className="devtools-button devtools-button-primary"
+                onClick={sendTransaction}
+                disabled={txSending}
+              >
+                {txSending ? "Sending..." : "Sign & Send"}
+              </button>
+            </div>
+
+            {estimatedGas && (
+              <div className="devtools-results">
+                <div>
+                  Estimated Gas: <span className="mono">{estimatedGas}</span>
+                  {txWillRevert && (
+                    <span className="tx-fallback-estimate">(fallback estimate)</span>
+                  )}
+                </div>
+                {suggestedFees && (
+                  <div>
+                    Suggested:{" "}
+                    <span className="mono">
+                      {txType === 0
+                        ? `${suggestedFees.gasPrice ? formatUnits(suggestedFees.gasPrice, "gwei") : "N/A"} gwei`
+                        : `${suggestedFees.maxFeePerGas ? formatUnits(suggestedFees.maxFeePerGas, "gwei") : "N/A"} / ${suggestedFees.maxPriorityFeePerGas ? formatUnits(suggestedFees.maxPriorityFeePerGas, "gwei") : "N/A"} gwei`}
+                    </span>
+                  </div>
+                )}
+                {estimatedCostEth && (
+                  <div>
+                    Estimated Cost: <span className="mono">{estimatedCostEth} ETH</span>{" "}
+                    {estimatedCostUsd && <span> (~${estimatedCostUsd} USD)</span>}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {builtTx && (
+              <div className="devtools-results">
+                <div className="tx-built-header">Unsigned Transaction:</div>
+                <textarea
+                  className="devtools-input mono tx-builder-built-tx-textarea"
+                  value={builtTx}
+                  readOnly
+                />
+                {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                <button
+                  className="devtools-button devtools-margin-top-8"
+                  onClick={() => navigator.clipboard.writeText(builtTx)}
+                >
+                  Copy to Clipboard
+                </button>
+              </div>
+            )}
+
+            {txWillRevert && (
+              <div className="devtools-error tx-revert-warning">
+                ⚠️ Transaction will likely revert!
+                {revertReason && <div className="tx-revert-warning-text">{revertReason}</div>}
+              </div>
+            )}
+
+            {txHashResult && (
+              <div className="devtools-results">
+                Transaction sent:{" "}
+                <a
+                  className="mono devtools-results-link"
+                  href={`https://etherscan.io/tx/${txHashResult}`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {txHashResult}
+                </a>
+              </div>
+            )}
+
+            {txError && <div className="devtools-error">{txError}</div>}
+          </div>
+        )}
+      </div>
+
+      {/* Advanced: Raw RLP Section */}
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowAdvancedRaw(!showAdvancedRaw)}
+        >
+          <h3 className="devtools-tool-title">📦 Raw RLP Transaction</h3>
+          <span className="devtools-section-toggle">{showAdvancedRaw ? "▼" : "▶"}</span>
+        </div>
+        {showAdvancedRaw && (
+          <div className="raw-rlp-container">
+            <div className="devtools-flex-column devtools-gap-4">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="input-label">Signed Transaction (RLP hex)</label>
+              <textarea
+                className="devtools-input mono tx-builder-raw-rlp-textarea"
+                value={rawRlp}
+                onChange={(e) => setRawRlp(e.target.value)}
+                placeholder="0x..."
+              />
+            </div>
+            <div className="raw-rlp-buttons">
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button className="devtools-button" onClick={sendRawRlpTx} disabled={txSending}>
+                {txSending ? "Sending..." : "Send Raw Transaction"}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TransactionsSection;
diff --git a/src/components/pages/devtools/UtilsSection.tsx b/src/components/pages/devtools/UtilsSection.tsx
new file mode 100644
index 0000000..3f3666c
--- /dev/null
+++ b/src/components/pages/devtools/UtilsSection.tsx
@@ -0,0 +1,418 @@
+import type React from "react";
+import { useState } from "react";
+import {
+  computeKeccak,
+  convertEthUnits,
+  type EthUnit,
+  hexToString,
+  stringToHex,
+} from "../../../utils/devtools";
+
+type SolidityType =
+  | "string"
+  | "bytes"
+  | "address"
+  | "uint256"
+  | "uint128"
+  | "uint64"
+  | "uint32"
+  | "uint8"
+  | "int256"
+  | "bool"
+  | "bytes32"
+  | "bytes4";
+
+const UtilsSection: React.FC = () => {
+  const [showUnitConverter, setShowUnitConverter] = useState(false);
+  const [showKeccakHasher, setShowKeccakHasher] = useState(false);
+  const [showHexEncoder, setShowHexEncoder] = useState(false);
+
+  // Unit converter state
+  const [ethAmount, setEthAmount] = useState("");
+  const [finneyAmount, setFinneyAmount] = useState("");
+  const [szaboAmount, setSzaboAmount] = useState("");
+  const [gweiAmount, setGweiAmount] = useState("");
+  const [mweiAmount, setMweiAmount] = useState("");
+  const [kweiAmount, setKweiAmount] = useState("");
+  const [weiAmount, setWeiAmount] = useState("");
+
+  // Keccak tool state
+  const [keccakInput, setKeccakInput] = useState("");
+  const [keccakInputType, setKeccakInputType] = useState<SolidityType>("string");
+  const [keccakResults, setKeccakResults] = useState<{
+    encodedBytes?: string;
+    rawHash?: string;
+    solidityEncodePacked?: string;
+    solidityEncode?: string;
+    functionSelector?: string | null;
+    isFunctionSignature?: boolean;
+    error?: string;
+  } | null>(null);
+
+  // Hex encoder state
+  const [encodedData, setEncodedData] = useState("");
+  const [decodedData, setDecodedData] = useState("");
+
+  const convertEth = (value: string, from: EthUnit) => {
+    const result = convertEthUnits(value, from);
+    if (!result) return;
+
+    // Update all fields except the source
+    if (from !== "eth") setEthAmount(result.eth);
+    if (from !== "finney") setFinneyAmount(result.finney);
+    if (from !== "szabo") setSzaboAmount(result.szabo);
+    if (from !== "gwei") setGweiAmount(result.gwei);
+    if (from !== "mwei") setMweiAmount(result.mwei);
+    if (from !== "kwei") setKweiAmount(result.kwei);
+    if (from !== "wei") setWeiAmount(result.wei);
+  };
+
+  const handleComputeKeccak = () => {
+    const results = computeKeccak(keccakInput, keccakInputType);
+    setKeccakResults(results);
+  };
+
+  const convertToHex = (data: string) => {
+    try {
+      const result = stringToHex(data);
+      setDecodedData(result);
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setDecodedData(`Error: ${err.message}`);
+    }
+  };
+
+  const convertFromHex = (hexData: string) => {
+    try {
+      const result = hexToString(hexData);
+      setDecodedData(result);
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    } catch (err: any) {
+      setDecodedData(`Error: ${err.message}`);
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
+  return (
+    <div className="devtools-section">
+      {/* Unit Converter */}
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowUnitConverter(!showUnitConverter)}
+        >
+          <h3 className="devtools-tool-title">⇄ Unit Converter</h3>
+          <span className="devtools-section-toggle">{showUnitConverter ? "▼" : "▶"}</span>
+        </div>
+        {showUnitConverter && (
+          <div className="unit-converter-list">
+            <div className="unit-converter-row">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="unit-converter-label">ETH (10¹⁸)</label>
+              <input
+                type="text"
+                placeholder="1.0"
+                value={ethAmount}
+                onChange={(e) => {
+                  setEthAmount(e.target.value);
+                  convertEth(e.target.value, "eth");
+                }}
+                className="devtools-input"
+              />
+            </div>
+            <div className="unit-converter-row">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="unit-converter-label">Finney (10¹⁵)</label>
+              <input
+                type="text"
+                placeholder="1000"
+                value={finneyAmount}
+                onChange={(e) => {
+                  setFinneyAmount(e.target.value);
+                  convertEth(e.target.value, "finney");
+                }}
+                className="devtools-input"
+              />
+            </div>
+            <div className="unit-converter-row">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="unit-converter-label">Szabo (10¹²)</label>
+              <input
+                type="text"
+                placeholder="1000000"
+                value={szaboAmount}
+                onChange={(e) => {
+                  setSzaboAmount(e.target.value);
+                  convertEth(e.target.value, "szabo");
+                }}
+                className="devtools-input"
+              />
+            </div>
+            <div className="unit-converter-row">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="unit-converter-label">Gwei (10⁹)</label>
+              <input
+                type="text"
+                placeholder="1000000000"
+                value={gweiAmount}
+                onChange={(e) => {
+                  setGweiAmount(e.target.value);
+                  convertEth(e.target.value, "gwei");
+                }}
+                className="devtools-input"
+              />
+            </div>
+            <div className="unit-converter-row">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="unit-converter-label">Mwei (10⁶)</label>
+              <input
+                type="text"
+                placeholder="1000000000000"
+                value={mweiAmount}
+                onChange={(e) => {
+                  setMweiAmount(e.target.value);
+                  convertEth(e.target.value, "mwei");
+                }}
+                className="devtools-input"
+              />
+            </div>
+            <div className="unit-converter-row">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="unit-converter-label">Kwei (10³)</label>
+              <input
+                type="text"
+                placeholder="1000000000000000"
+                value={kweiAmount}
+                onChange={(e) => {
+                  setKweiAmount(e.target.value);
+                  convertEth(e.target.value, "kwei");
+                }}
+                className="devtools-input"
+              />
+            </div>
+            <div className="unit-converter-row">
+              {/** biome-ignore lint/a11y/noLabelWithoutControl: <TODO> */}
+              <label className="unit-converter-label">Wei (10⁰)</label>
+              <input
+                type="text"
+                placeholder="1000000000000000000"
+                value={weiAmount}
+                onChange={(e) => {
+                  setWeiAmount(e.target.value);
+                  convertEth(e.target.value, "wei");
+                }}
+                className="devtools-input"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Keccak256 Tool */}
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowKeccakHasher(!showKeccakHasher)}
+        >
+          <h3 className="devtools-tool-title">#️⃣ Keccak256 Hasher</h3>
+          <span className="devtools-section-toggle">{showKeccakHasher ? "▼" : "▶"}</span>
+        </div>
+        {showKeccakHasher && (
+          <div className="devtools-flex-column devtools-gap-12">
+            <div className="keccak-input-row">
+              <select
+                value={keccakInputType}
+                onChange={(e) => setKeccakInputType(e.target.value as SolidityType)}
+                className="devtools-select keccak-type-select"
+              >
+                <optgroup label="Dynamic Types">
+                  <option value="string">string</option>
+                  <option value="bytes">bytes</option>
+                </optgroup>
+                <optgroup label="Fixed Types">
+                  <option value="address">address</option>
+                  <option value="bool">bool</option>
+                  <option value="bytes32">bytes32</option>
+                  <option value="bytes4">bytes4</option>
+                </optgroup>
+                <optgroup label="Numeric Types">
+                  <option value="uint256">uint256</option>
+                  <option value="uint128">uint128</option>
+                  <option value="uint64">uint64</option>
+                  <option value="uint32">uint32</option>
+                  <option value="uint8">uint8</option>
+                  <option value="int256">int256</option>
+                </optgroup>
+              </select>
+              <input
+                type="text"
+                placeholder={
+                  keccakInputType === "string"
+                    ? "Enter text (e.g., transfer(address,uint256))"
+                    : keccakInputType === "address"
+                      ? "Enter address (0x...)"
+                      : keccakInputType === "bool"
+                        ? "Enter true/false or 1/0"
+                        : keccakInputType.startsWith("uint") || keccakInputType.startsWith("int")
+                          ? "Enter number"
+                          : "Enter hex value (0x...)"
+                }
+                value={keccakInput}
+                onChange={(e) => setKeccakInput(e.target.value)}
+                className="devtools-input"
+              />
+            </div>
+            {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+            <button onClick={handleComputeKeccak} className="devtools-button">
+              Hash
+            </button>
+
+            {keccakResults && !keccakResults.error && keccakResults.rawHash && (
+              <div className="keccak-results">
+                {keccakResults.encodedBytes && (
+                  <div className="keccak-result-item">
+                    <div className="keccak-result-header">
+                      <span className="keccak-result-label">Encoded Bytes</span>
+                      {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                      <button
+                        // biome-ignore lint/style/noNonNullAssertion: <TODO>
+                        onClick={() => copyToClipboard(keccakResults.encodedBytes!)}
+                        className="devtools-copy-btn"
+                      >
+                        📋
+                      </button>
+                    </div>
+                    <div className="keccak-result-value">{keccakResults.encodedBytes}</div>
+                  </div>
+                )}
+
+                <div className="keccak-result-item">
+                  <div className="keccak-result-header">
+                    <span className="keccak-result-label">Keccak256 Hash</span>
+                    {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                    <button
+                      // biome-ignore lint/style/noNonNullAssertion: <TODO>
+                      onClick={() => copyToClipboard(keccakResults.rawHash!)}
+                      className="devtools-copy-btn"
+                    >
+                      📋
+                    </button>
+                  </div>
+                  <div className="keccak-result-value">{keccakResults.rawHash}</div>
+                </div>
+
+                <div className="keccak-result-item">
+                  <div className="keccak-result-header">
+                    <span className="keccak-result-label">keccak256(abi.encodePacked(input))</span>
+                    {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                    <button
+                      // biome-ignore lint/style/noNonNullAssertion: <TODO>
+                      onClick={() => copyToClipboard(keccakResults.solidityEncodePacked!)}
+                      className="devtools-copy-btn"
+                    >
+                      📋
+                    </button>
+                  </div>
+                  <div className="keccak-result-value">{keccakResults.solidityEncodePacked}</div>
+                </div>
+
+                <div className="keccak-result-item">
+                  <div className="keccak-result-header">
+                    <span className="keccak-result-label">keccak256(abi.encode(input))</span>
+                    {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                    <button
+                      // biome-ignore lint/style/noNonNullAssertion: <TODO>
+                      onClick={() => copyToClipboard(keccakResults.solidityEncode!)}
+                      className="devtools-copy-btn"
+                    >
+                      📋
+                    </button>
+                  </div>
+                  <div className="keccak-result-value">{keccakResults.solidityEncode}</div>
+                </div>
+
+                {keccakResults.isFunctionSignature && keccakResults.functionSelector && (
+                  <div className="keccak-result-item keccak-selector">
+                    <div className="keccak-result-header">
+                      <span className="keccak-result-label">🎯 Function Selector (bytes4)</span>
+                      {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                      <button
+                        // biome-ignore lint/style/noNonNullAssertion: <TODO>
+                        onClick={() => copyToClipboard(keccakResults.functionSelector!)}
+                        className="devtools-copy-btn"
+                      >
+                        📋
+                      </button>
+                    </div>
+                    <div className="keccak-result-value keccak-selector-value">
+                      {keccakResults.functionSelector}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {keccakResults?.error && <div className="keccak-error">⚠️ {keccakResults.error}</div>}
+          </div>
+        )}
+      </div>
+
+      {/* Hex Encoder/Decoder */}
+      <div className="devtools-card">
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: <TODO> */}
+        {/** biome-ignore lint/a11y/useKeyWithClickEvents: <TODO> */}
+        <div
+          className="devtools-tool-header cursor-pointer"
+          onClick={() => setShowHexEncoder(!showHexEncoder)}
+        >
+          <h3 className="devtools-tool-title">🔤 Hex Encoder/Decoder</h3>
+          <span className="devtools-section-toggle">{showHexEncoder ? "▼" : "▶"}</span>
+        </div>
+        {showHexEncoder && (
+          <div className="devtools-flex-column devtools-gap-12">
+            <textarea
+              placeholder="Enter text or hex data"
+              value={encodedData}
+              onChange={(e) => setEncodedData(e.target.value)}
+              className="devtools-input hex-encoder-textarea"
+            />
+            <div className="hex-encoder-buttons">
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button onClick={() => convertToHex(encodedData)} className="devtools-button">
+                Encode to Hex
+              </button>
+              {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+              <button onClick={() => convertFromHex(encodedData)} className="devtools-button">
+                Decode from Hex
+              </button>
+            </div>
+            {decodedData && (
+              <div className="devtools-results">
+                <div className="hex-result-header">
+                  <span className="hex-result-label">Result:</span>
+                  {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+                  <button
+                    onClick={() => copyToClipboard(decodedData)}
+                    className="devtools-copy-btn"
+                  >
+                    📋 Copy
+                  </button>
+                </div>
+                <div className="hex-result-value">{decodedData}</div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default UtilsSection;
diff --git a/src/components/pages/devtools/index.test.ts b/src/components/pages/devtools/index.test.ts
new file mode 100644
index 0000000..94ca82d
--- /dev/null
+++ b/src/components/pages/devtools/index.test.ts
@@ -0,0 +1,506 @@
+import { describe, expect, it } from "vitest";
+import {
+  addressesMatch,
+  computeKeccak,
+  convertEthUnits,
+  detectMessageFormat,
+  hexToString,
+  isValidAddress,
+  isValidHex,
+  isValidSignature,
+  parseInputValue,
+  parseSignatureComponents,
+  stringToHex,
+} from "../../../utils/devtools";
+
+describe("DevTools Utils", () => {
+  describe("convertEthUnits", () => {
+    it("should convert 1 ETH to all units", () => {
+      const result = convertEthUnits("1", "eth");
+      expect(result).not.toBeNull();
+      expect(result?.eth).toBe("1");
+      expect(result?.gwei).toBe("1000000000");
+      expect(result?.wei).toBe("1000000000000000000");
+    });
+
+    it("should convert 1 gwei to all units", () => {
+      const result = convertEthUnits("1", "gwei");
+      expect(result).not.toBeNull();
+      expect(result?.gwei).toBe("1");
+      expect(result?.wei).toBe("1000000000");
+      expect(result?.eth).toBe("0.000000001");
+    });
+
+    it("should return null for invalid input", () => {
+      const result = convertEthUnits("invalid", "eth");
+      expect(result).toBeNull();
+    });
+  });
+
+  describe("parseInputValue", () => {
+    it("should parse string type", () => {
+      expect(parseInputValue("hello", "string")).toBe("hello");
+    });
+
+    it("should parse uint256 as bigint", () => {
+      const result = parseInputValue("12345", "uint256");
+      expect(result).toBe(BigInt(12345));
+    });
+
+    it("should parse bool true", () => {
+      expect(parseInputValue("true", "bool")).toBe(true);
+      expect(parseInputValue("1", "bool")).toBe(true);
+    });
+
+    it("should parse bool false", () => {
+      expect(parseInputValue("false", "bool")).toBe(false);
+      expect(parseInputValue("0", "bool")).toBe(false);
+    });
+
+    it("should add 0x prefix to address without it", () => {
+      const result = parseInputValue("d8dA6BF26964aF9D7eEd9e03E53415D37aA96045", "address");
+      expect(result).toBe("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");
+    });
+
+    it("should keep 0x prefix for address that has it", () => {
+      const result = parseInputValue("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", "address");
+      expect(result).toBe("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");
+    });
+
+    it("should throw for invalid address", () => {
+      expect(() => parseInputValue("invalid", "address")).toThrow("Invalid address format");
+    });
+  });
+
+  describe("computeKeccak", () => {
+    it("should compute keccak256 for string input", () => {
+      const result = computeKeccak("hello", "string");
+      expect(result.rawHash).toBeDefined();
+      expect(result.rawHash).toMatch(/^0x[a-f0-9]{64}$/i);
+    });
+
+    it("should return empty object for empty input", () => {
+      const result = computeKeccak("", "string");
+      expect(result).toEqual({});
+    });
+
+    it("should detect function signature pattern", () => {
+      const result = computeKeccak("transfer(address,uint256)", "string");
+      expect(result.isFunctionSignature).toBe(true);
+      expect(result.functionSelector).toBeDefined();
+      expect(result.functionSelector).toMatch(/^0x[a-f0-9]{8}$/i);
+    });
+
+    it("should not detect function signature for regular string", () => {
+      const result = computeKeccak("hello world", "string");
+      expect(result.isFunctionSignature).toBe(false);
+      expect(result.functionSelector).toBeNull();
+    });
+
+    it("should compute correct transfer function selector", () => {
+      // transfer(address,uint256) = 0xa9059cbb
+      const result = computeKeccak("transfer(address,uint256)", "string");
+      expect(result.functionSelector).toBe("0xa9059cbb");
+    });
+  });
+
+  describe("stringToHex", () => {
+    it("should convert string to hex", () => {
+      expect(stringToHex("hello")).toBe("0x68656c6c6f");
+    });
+
+    it("should return hex unchanged if already hex", () => {
+      expect(stringToHex("0xabcdef")).toBe("0xabcdef");
+    });
+  });
+
+  describe("hexToString", () => {
+    it("should convert hex to string", () => {
+      expect(hexToString("0x68656c6c6f")).toBe("hello");
+    });
+
+    it("should throw for invalid hex format", () => {
+      expect(() => hexToString("invalid")).toThrow("Invalid hex format");
+    });
+  });
+
+  describe("isValidAddress", () => {
+    it("should return true for valid address", () => {
+      expect(isValidAddress("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045")).toBe(true);
+    });
+
+    it("should return false for address without 0x", () => {
+      expect(isValidAddress("d8dA6BF26964aF9D7eEd9e03E53415D37aA96045")).toBe(false);
+    });
+
+    it("should return false for too short address", () => {
+      expect(isValidAddress("0xd8dA6BF")).toBe(false);
+    });
+
+    it("should return false for invalid characters", () => {
+      expect(isValidAddress("0xZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ")).toBe(false);
+    });
+  });
+
+  describe("isValidHex", () => {
+    it("should return true for valid hex", () => {
+      expect(isValidHex("0xabcdef123")).toBe(true);
+    });
+
+    it("should return true for empty hex", () => {
+      expect(isValidHex("0x")).toBe(true);
+    });
+
+    it("should return false for hex without 0x", () => {
+      expect(isValidHex("abcdef")).toBe(false);
+    });
+
+    it("should return false for invalid characters", () => {
+      expect(isValidHex("0xghijkl")).toBe(false);
+    });
+  });
+
+  // ================================================
+  // Signature Section Tests
+  // ================================================
+
+  // Test data from real signatures
+  const TEST_ADDRESS = "0x8ba1f109551bD432803012645Ac136ddd64DBA72";
+
+  // Test case 1: Simple string message (eth_sign style)
+  const SIMPLE_MESSAGE = "Hello Augusto!";
+  const SIMPLE_MESSAGE_HASH = "0xccad321f97da4a306ba3a0a5bb26487d32f821a3a32bda39d4d8362c59811cb8";
+  const SIMPLE_SIGNATURE =
+    "0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd73254f82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d81c";
+  const SIMPLE_SIG_R = "0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd7325";
+  const SIMPLE_SIG_S = "0x4f82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d8";
+  const SIMPLE_SIG_V = 28; // 0x1c
+
+  // Test case 2: Raw hex hash signature
+  const RAW_HASH = "0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
+  const RAW_HASH_SIGNATURE =
+    "0x5d8bd006953f0e4e24843f6d70ac7100dfc272afbb7c6baedbcd8beeb7fdb94902d539f30fcb46a1ec63c6fdb8f9f51a9af1c2a01f8aaa1ed9f1a5c32f7b54fc1c";
+
+  // Test case 3: EIP-191 arbitrary data (0x45 version)
+  const EIP191_MESSAGE = "0x457468657265756d2d4c32";
+  const EIP191_SIGNATURE =
+    "0x80c65f13df0840455fe9194c7a8d17dfb2d9696dbb669f53b06ba7f3a8888f0b51612b97d37b5226f0a4dc7dcfe5e8ce7f6618c0a5b75e56200de6f0d773f98c1b";
+
+  // Test case 4: EIP-712 Typed Data
+  const EIP712_DATA = {
+    domain: {
+      name: "ExplorerDevtools",
+      version: "1",
+      chainId: 1,
+      verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
+    },
+    types: {
+      Person: [
+        { name: "name", type: "string" },
+        { name: "wallet", type: "address" },
+      ],
+      Mail: [
+        { name: "from", type: "Person" },
+        { name: "to", type: "Person" },
+        { name: "contents", type: "string" },
+      ],
+    },
+    primaryType: "Mail",
+    message: {
+      from: {
+        name: "Vikingo",
+        wallet: "0x8ba1f109551bd432803012645ac136ddd64dba72",
+      },
+      to: {
+        name: "Augusto",
+        wallet: "0x000000000000000000000000000000000000dEaD",
+      },
+      contents: "Testing signatures",
+    },
+  };
+  const EIP712_HASH = "0xe661c65b3febe03dcdee58850110f8c763c42e87d9dbd8d6fdfed142e7ba46f3";
+  const EIP712_SIGNATURE =
+    "0x2d480fdcd216ca933662705a13a539a8f979b29d69ee83a92389db8dd9e7f36a0f1dca546b14b8af72cbb02ca81237e9474413f6506c792da060e9981373bd051c";
+
+  // Test case 5: EIP-191 Personal Sign with UTF-8 emoji
+  const EMOJI_MESSAGE = "🔥 Test message for Augusto 🔥";
+  const EMOJI_SIGNATURE =
+    "0x06f6fd97a02e3b4811a53f17ef449f7d0be7ed96775847c63742aede1ac6b97875512c66af08b8e8dfa38f9a0eed3c28ba632a2c00c2522dbf316efee375d3161b";
+
+  describe("isValidSignature", () => {
+    it("should recognize 65-byte standard signature", () => {
+      const result = isValidSignature(SIMPLE_SIGNATURE);
+      expect(result.valid).toBe(true);
+      expect(result.length).toBe(65);
+      expect(result.format).toBe("Standard (65 bytes)");
+    });
+
+    it("should recognize all test signatures as valid", () => {
+      expect(isValidSignature(SIMPLE_SIGNATURE).valid).toBe(true);
+      expect(isValidSignature(RAW_HASH_SIGNATURE).valid).toBe(true);
+      expect(isValidSignature(EIP191_SIGNATURE).valid).toBe(true);
+      expect(isValidSignature(EIP712_SIGNATURE).valid).toBe(true);
+      expect(isValidSignature(EMOJI_SIGNATURE).valid).toBe(true);
+    });
+
+    it("should recognize 64-byte EIP-2098 compact signature", () => {
+      // 64 bytes = 128 hex chars + 0x prefix
+      const compactSig = `0x${"b".repeat(128)}`;
+      const result = isValidSignature(compactSig);
+      expect(result.valid).toBe(true);
+      expect(result.length).toBe(64);
+      expect(result.format).toBe("EIP-2098 Compact (64 bytes)");
+    });
+
+    it("should reject signature without 0x prefix", () => {
+      const sig = SIMPLE_SIGNATURE.slice(2);
+      const result = isValidSignature(sig);
+      expect(result.valid).toBe(false);
+    });
+
+    it("should reject signature with wrong length", () => {
+      const sig = `0x${"a".repeat(100)}`;
+      const result = isValidSignature(sig);
+      expect(result.valid).toBe(false);
+    });
+
+    it("should reject signature with invalid hex characters", () => {
+      const sig = `0x${"g".repeat(130)}`;
+      const result = isValidSignature(sig);
+      expect(result.valid).toBe(false);
+    });
+  });
+
+  describe("detectMessageFormat", () => {
+    it("should detect pre-hashed message (32 bytes hex)", () => {
+      expect(detectMessageFormat(RAW_HASH)).toBe("hash");
+      expect(detectMessageFormat(SIMPLE_MESSAGE_HASH)).toBe("hash");
+      expect(detectMessageFormat(EIP712_HASH)).toBe("hash");
+    });
+
+    it("should detect EIP-712 typed data", () => {
+      const eip712Json = JSON.stringify(EIP712_DATA);
+      expect(detectMessageFormat(eip712Json)).toBe("eip712");
+    });
+
+    it("should detect personal sign for plain text", () => {
+      expect(detectMessageFormat(SIMPLE_MESSAGE)).toBe("personal");
+      expect(detectMessageFormat(EMOJI_MESSAGE)).toBe("personal");
+    });
+
+    it("should detect personal sign for invalid JSON", () => {
+      expect(detectMessageFormat("{ invalid json")).toBe("personal");
+    });
+
+    it("should detect personal sign for JSON without EIP-712 fields", () => {
+      const json = JSON.stringify({ foo: "bar" });
+      expect(detectMessageFormat(json)).toBe("personal");
+    });
+
+    it("should detect personal sign for hex that is not 32 bytes", () => {
+      expect(detectMessageFormat(EIP191_MESSAGE)).toBe("personal");
+    });
+  });
+
+  describe("parseSignatureComponents", () => {
+    it("should parse simple message signature correctly", () => {
+      const result = parseSignatureComponents(SIMPLE_SIGNATURE);
+      expect(result).not.toBeNull();
+      expect(result?.r).toBe(SIMPLE_SIG_R);
+      expect(result?.s).toBe(SIMPLE_SIG_S);
+      expect(result?.v).toBe(SIMPLE_SIG_V);
+      expect(result?.yParity).toBe(1); // v=28 means yParity=1
+    });
+
+    it("should parse raw hash signature correctly", () => {
+      const result = parseSignatureComponents(RAW_HASH_SIGNATURE);
+      expect(result).not.toBeNull();
+      expect(result?.r).toBe("0x5d8bd006953f0e4e24843f6d70ac7100dfc272afbb7c6baedbcd8beeb7fdb949");
+      expect(result?.s).toBe("0x02d539f30fcb46a1ec63c6fdb8f9f51a9af1c2a01f8aaa1ed9f1a5c32f7b54fc");
+      expect(result?.v).toBe(28);
+    });
+
+    it("should parse EIP-712 signature correctly", () => {
+      const result = parseSignatureComponents(EIP712_SIGNATURE);
+      expect(result).not.toBeNull();
+      expect(result?.r).toBe("0x2d480fdcd216ca933662705a13a539a8f979b29d69ee83a92389db8dd9e7f36a");
+      expect(result?.s).toBe("0x0f1dca546b14b8af72cbb02ca81237e9474413f6506c792da060e9981373bd05");
+      expect(result?.v).toBe(28);
+    });
+
+    it("should parse EIP-191 signature correctly", () => {
+      const result = parseSignatureComponents(EIP191_SIGNATURE);
+      expect(result).not.toBeNull();
+      expect(result?.v).toBe(27); // 0x1b
+      expect(result?.yParity).toBe(0);
+    });
+
+    it("should parse emoji message signature correctly", () => {
+      const result = parseSignatureComponents(EMOJI_SIGNATURE);
+      expect(result).not.toBeNull();
+      expect(result?.v).toBe(27); // 0x1b
+    });
+
+    it("should return null for invalid signature", () => {
+      expect(parseSignatureComponents("invalid")).toBeNull();
+      expect(parseSignatureComponents("0xabc")).toBeNull();
+    });
+  });
+
+  describe("addressesMatch", () => {
+    it("should match identical addresses", () => {
+      expect(addressesMatch(TEST_ADDRESS, TEST_ADDRESS)).toBe(true);
+    });
+
+    it("should match addresses with different case", () => {
+      const lowerCase = TEST_ADDRESS.toLowerCase();
+      const upperCase = TEST_ADDRESS.toUpperCase();
+      expect(addressesMatch(lowerCase, upperCase)).toBe(true);
+    });
+
+    it("should not match different addresses", () => {
+      expect(addressesMatch(TEST_ADDRESS, "0x1234567890123456789012345678901234567890")).toBe(
+        false,
+      );
+    });
+
+    it("should return false for empty addresses", () => {
+      expect(addressesMatch("", TEST_ADDRESS)).toBe(false);
+      expect(addressesMatch(TEST_ADDRESS, "")).toBe(false);
+      expect(addressesMatch("", "")).toBe(false);
+    });
+  });
+
+  // ================================================
+  // Invalid Signature Tests
+  // ================================================
+
+  // Invalid test data
+
+  // 1) ECDSA malleability - high-s value (s' = n - s)
+  const MALLEATED_SIGNATURE =
+    "0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd7325b07d1d9596e8871bb3dc4253d5f43675859f1f9097ad80b13b6538f13814d9621c";
+
+  // 2) Invalid recovery id (v = 0x35, should be 27, 28, 0, or 1)
+  const BAD_V_SIGNATURE =
+    "0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd73254f82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d835";
+
+  // 3) Signature that recovers to wrong address
+  const WRONG_SIGNER_SIGNATURE =
+    "0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa1b";
+
+  // 4) Incomplete / malformed signatures
+  const TOO_SHORT_SIGNATURE = "0x1234abcd";
+  const MISSING_S_SIGNATURE = "0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd7325"; // only 32 bytes (r)
+  const MISSING_V_SIGNATURE =
+    "0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd73254f82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d8"; // only 64 bytes (r + s)
+  const INVALID_HEX_SIGNATURE =
+    "0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd7325ZZ82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d81c";
+  const EXTRA_BYTES_SIGNATURE =
+    "0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd73254f82e26a591778e44c23bda32a0bc89a8a066e3884b27f4f449ac1f51eb2f9d81cdeadbeef";
+
+  describe("isValidSignature - invalid cases", () => {
+    it("should still recognize malleated signature as structurally valid (65 bytes)", () => {
+      // Note: Malleability is a semantic issue, not a structural one
+      // The signature is still 65 bytes and valid hex
+      const result = isValidSignature(MALLEATED_SIGNATURE);
+      expect(result.valid).toBe(true);
+      expect(result.length).toBe(65);
+    });
+
+    it("should recognize signature with bad v as structurally valid", () => {
+      // Bad v is a semantic issue - the structure is still valid
+      const result = isValidSignature(BAD_V_SIGNATURE);
+      expect(result.valid).toBe(true);
+      expect(result.length).toBe(65);
+    });
+
+    it("should recognize wrong signer signature as structurally valid", () => {
+      // Wrong signer is a semantic issue - the structure is still valid
+      const result = isValidSignature(WRONG_SIGNER_SIGNATURE);
+      expect(result.valid).toBe(true);
+      expect(result.length).toBe(65);
+    });
+
+    it("should reject too short signature", () => {
+      const result = isValidSignature(TOO_SHORT_SIGNATURE);
+      expect(result.valid).toBe(false);
+      expect(result.length).toBe(4); // 8 hex chars = 4 bytes
+    });
+
+    it("should reject signature missing s (only 32 bytes)", () => {
+      const result = isValidSignature(MISSING_S_SIGNATURE);
+      expect(result.valid).toBe(false);
+      expect(result.length).toBe(32);
+    });
+
+    it("should recognize 64-byte signature as EIP-2098 compact (missing v case)", () => {
+      // 64 bytes is valid as EIP-2098 compact format
+      const result = isValidSignature(MISSING_V_SIGNATURE);
+      expect(result.valid).toBe(true);
+      expect(result.length).toBe(64);
+      expect(result.format).toBe("EIP-2098 Compact (64 bytes)");
+    });
+
+    it("should reject signature with invalid hex characters", () => {
+      const result = isValidSignature(INVALID_HEX_SIGNATURE);
+      expect(result.valid).toBe(false);
+    });
+
+    it("should reject signature with extra bytes", () => {
+      const result = isValidSignature(EXTRA_BYTES_SIGNATURE);
+      expect(result.valid).toBe(false);
+      expect(result.length).toBe(69); // 65 + 4 extra bytes
+    });
+  });
+
+  describe("parseSignatureComponents - invalid cases", () => {
+    it("should parse malleated signature components (high-s)", () => {
+      const result = parseSignatureComponents(MALLEATED_SIGNATURE);
+      expect(result).not.toBeNull();
+      // Same r as original
+      expect(result?.r).toBe("0xf4a45954390e10d2db95527ecfaca14adfd74127e5a885fcaaaed2a1b5bd7325");
+      // Different s (high-s value)
+      expect(result?.s).toBe("0xb07d1d9596e8871bb3dc4253d5f43675859f1f9097ad80b13b6538f13814d962");
+      expect(result?.v).toBe(28);
+    });
+
+    it("should parse signature with bad v (returns raw v value)", () => {
+      const result = parseSignatureComponents(BAD_V_SIGNATURE);
+      expect(result).not.toBeNull();
+      // v = 0x35 = 53, which is > 27 so stays as-is
+      expect(result?.v).toBe(53);
+    });
+
+    it("should return null for too short signature", () => {
+      expect(parseSignatureComponents(TOO_SHORT_SIGNATURE)).toBeNull();
+    });
+
+    it("should return null for signature missing s", () => {
+      expect(parseSignatureComponents(MISSING_S_SIGNATURE)).toBeNull();
+    });
+
+    it("should parse 64-byte signature as EIP-2098 compact", () => {
+      const result = parseSignatureComponents(MISSING_V_SIGNATURE);
+      expect(result).not.toBeNull();
+      // In EIP-2098, yParity is encoded in high bit of s
+    });
+
+    it("should return null for signature with invalid hex", () => {
+      expect(parseSignatureComponents(INVALID_HEX_SIGNATURE)).toBeNull();
+    });
+
+    it("should return null for signature with extra bytes", () => {
+      expect(parseSignatureComponents(EXTRA_BYTES_SIGNATURE)).toBeNull();
+    });
+  });
+
+  describe("addressesMatch - wrong signer detection", () => {
+    it("should not match when signature recovers to wrong address", () => {
+      // The random signature would recover to some address, but not TEST_ADDRESS
+      // This tests the concept - in real usage you'd recover the address first
+      const randomRecoveredAddress = "0x1111111111111111111111111111111111111111";
+      expect(addressesMatch(randomRecoveredAddress, TEST_ADDRESS)).toBe(false);
+    });
+  });
+});
diff --git a/src/components/pages/devtools/index.tsx b/src/components/pages/devtools/index.tsx
new file mode 100644
index 0000000..52e3901
--- /dev/null
+++ b/src/components/pages/devtools/index.tsx
@@ -0,0 +1,66 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import ContractsSection from "./ContractsSection";
+import DevelopmentSection from "./DevelopmentSection";
+import SignaturesSection from "./SignaturesSection";
+import TransactionsSection from "./TransactionsSection";
+import UtilsSection from "./UtilsSection";
+import "../../../styles/devtools.css";
+
+const DevTools: React.FC = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const searchParams = new URLSearchParams(location.search);
+  const sectionParam = searchParams.get("section") || "transactions";
+  const [activeSection, setActiveSection] = useState(sectionParam);
+
+  useEffect(() => {
+    const newSection = searchParams.get("section") || "transactions";
+    const validSections = ["transactions", "signatures", "utils", "contracts", "development"];
+    setActiveSection(validSections.includes(newSection) ? newSection : "transactions");
+  }, [searchParams.get]);
+
+  const tabs = [
+    { name: "transactions", label: "Transactions" },
+    { name: "signatures", label: "Signatures" },
+    { name: "utils", label: "Utils" },
+    { name: "contracts", label: "Contracts" },
+    { name: "development", label: "Development" },
+  ];
+
+  const handleTabClick = (tabName: string) => {
+    navigate(`/devtools?section=${tabName}`);
+    setActiveSection(tabName);
+  };
+
+  return (
+    <div className="container-wide">
+      <div className="page-card devtools-content-wrapper">
+        <h1 className="page-title-small text-center">Dev Tools</h1>
+        <div className="devtools-tabs">
+          {tabs.map((tab) => (
+            // biome-ignore lint/a11y/useButtonType: <TODO>
+            <button
+              key={tab.name}
+              onClick={() => handleTabClick(tab.name)}
+              className={`devtools-tab ${activeSection === tab.name ? "active" : ""}`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="devtools-content">
+          {activeSection === "transactions" && <TransactionsSection />}
+          {activeSection === "signatures" && <SignaturesSection />}
+          {activeSection === "utils" && <UtilsSection />}
+          {activeSection === "contracts" && <ContractsSection />}
+          {activeSection === "development" && <DevelopmentSection />}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DevTools;
diff --git a/src/components/pages/home/HomeSearchBar.tsx b/src/components/pages/home/HomeSearchBar.tsx
new file mode 100644
index 0000000..fd6257b
--- /dev/null
+++ b/src/components/pages/home/HomeSearchBar.tsx
@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import type { NetworkConfig } from "../../../config/networks";
+import { ENSService } from "../../../services/ENS/ENSService";
+import NetworkIcon from "../../common/NetworkIcon";
+
+type SearchType = "address" | "transaction" | "block" | "ens" | null;
+
+interface HomeSearchBarProps {
+  networks: NetworkConfig[];
+}
+
+function detectSearchType(term: string): SearchType {
+  const trimmed = term.trim();
+  if (!trimmed) return null;
+  if (/^0x[a-fA-F0-9]{64}$/.test(trimmed)) return "transaction";
+  if (/^0x[a-fA-F0-9]{40}$/.test(trimmed)) return "address";
+  if (/^\d+$/.test(trimmed)) return "block";
+  if (ENSService.isENSName(trimmed)) return "ens";
+  return null;
+}
+
+function getSearchTypeLabel(type: SearchType): string {
+  switch (type) {
+    case "address":
+      return "address";
+    case "transaction":
+      return "transaction";
+    case "block":
+      return "block";
+    case "ens":
+      return "ENS name";
+    default:
+      return "";
+  }
+}
+
+function truncateSearchTerm(term: string): string {
+  if (term.length <= 16) return term;
+  return `${term.slice(0, 8)}...${term.slice(-6)}`;
+}
+
+export default function HomeSearchBar({ networks }: HomeSearchBarProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+
+  const searchType = detectSearchType(searchTerm);
+  const showDropdown = isDropdownOpen && searchType !== null;
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Open dropdown when valid pattern is detected
+  useEffect(() => {
+    if (searchType !== null) {
+      setIsDropdownOpen(true);
+    }
+  }, [searchType]);
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  }, []);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      setIsDropdownOpen(false);
+    }
+  }, []);
+
+  const handleNetworkSelect = useCallback(
+    (network: NetworkConfig) => {
+      const term = searchTerm.trim();
+      if (!term || !searchType) return;
+
+      const networkId = network.networkId;
+
+      switch (searchType) {
+        case "transaction":
+          navigate(`/${networkId}/tx/${term}`);
+          break;
+        case "address":
+          navigate(`/${networkId}/address/${term}`);
+          break;
+        case "block":
+          navigate(`/${networkId}/block/${term}`);
+          break;
+        case "ens":
+          // Navigate directly to the ENS URL - the address page will resolve it
+          navigate(`/1/address/${term}`);
+          break;
+      }
+
+      setSearchTerm("");
+      setIsDropdownOpen(false);
+    },
+    [searchTerm, searchType, navigate],
+  );
+
+  // For ENS, only show Mainnet in dropdown
+  const displayNetworks =
+    searchType === "ens" ? networks.filter((n) => n.networkId === 1) : networks;
+
+  return (
+    <div className="home-search-container" ref={containerRef}>
+      <input
+        type="text"
+        className="home-search-input"
+        placeholder="Search by Address / Tx Hash / Block / ENS Name"
+        value={searchTerm}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+      />
+
+      {showDropdown && (
+        <div className="home-search-dropdown">
+          <div className="home-search-dropdown-header">
+            Search {getSearchTypeLabel(searchType)}{" "}
+            <span className="home-search-term">{truncateSearchTerm(searchTerm.trim())}</span> on:
+          </div>
+          <div className="home-search-dropdown-list">
+            {displayNetworks.map((network) => (
+              <button
+                key={network.networkId}
+                type="button"
+                className="home-search-dropdown-item"
+                onClick={() => handleNetworkSelect(network)}
+                style={
+                  {
+                    "--network-color": network.color,
+                  } as React.CSSProperties
+                }
+              >
+                <NetworkIcon network={network} size={20} />
+                <span className="home-search-network-name">{network.name}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/pages/home/index.tsx b/src/components/pages/home/index.tsx
new file mode 100644
index 0000000..106918c
--- /dev/null
+++ b/src/components/pages/home/index.tsx
@@ -0,0 +1,100 @@
+import { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import type { NetworkConfig } from "../../../config/networks";
+import { useNetworks } from "../../../context/AppContext";
+import NetworkIcon from "../../common/NetworkIcon";
+import TierBadge from "../../common/TierBadge";
+import HomeSearchBar from "./HomeSearchBar";
+
+interface NetworkCardProps {
+  network: NetworkConfig;
+}
+
+const NetworkCard: React.FC<NetworkCardProps> = ({ network }) => {
+  return (
+    <Link
+      to={`/${network.networkId}`}
+      className="network-card-link"
+      style={{ "--network-color": network.color } as React.CSSProperties}
+    >
+      <div className="network-card">
+        <div className="network-card-header">
+          <div className="network-card-icon">
+            <NetworkIcon network={network} size={32} />
+          </div>
+          <div className="network-card-info">
+            <div className="network-card-title-row">
+              <h3 className="network-card-title">{network.name}</h3>
+              <TierBadge subscription={network.subscription} size="small" />
+            </div>
+            <div className="network-card-chain-id">Network ID: {network.networkId}</div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default function Home() {
+  const { enabledNetworks, isLoading } = useNetworks();
+  const [showTestnets, setShowTestnets] = useState(false);
+
+  const { productionNetworks, testnetNetworks } = useMemo(() => {
+    const isDevelopment = process.env.REACT_APP_ENVIRONMENT === "development";
+    const localhostNetworkId = 31337;
+
+    // In development, treat localhost as a production network (show with other networks)
+    const isProductionNetwork = (n: (typeof enabledNetworks)[0]) => {
+      if (isDevelopment && n.networkId === localhostNetworkId) {
+        return true;
+      }
+      return !n.isTestnet;
+    };
+
+    const productionNetworks = enabledNetworks.filter(isProductionNetwork);
+    const testnetNetworks = enabledNetworks.filter((n) => !isProductionNetwork(n));
+
+    return { productionNetworks, testnetNetworks };
+  }, [enabledNetworks]);
+
+  return (
+    <div className="home-container">
+      <div className="home-content page-card">
+        <h1 className="home-title">OPENSCAN</h1>
+
+        <HomeSearchBar networks={enabledNetworks} />
+
+        <div className="network-grid">
+          {isLoading && productionNetworks.length === 0 ? (
+            <p className="loading-text">Loading networks...</p>
+          ) : (
+            productionNetworks.map((network) => (
+              <NetworkCard key={network.networkId} network={network} />
+            ))
+          )}
+        </div>
+
+        {testnetNetworks.length > 0 && (
+          <>
+            {showTestnets && (
+              <div className="network-grid testnet-grid">
+                {testnetNetworks.map((network) => (
+                  <NetworkCard key={network.networkId} network={network} />
+                ))}
+              </div>
+            )}
+            <div className="testnet-toggle-container">
+              <button
+                type="button"
+                className="testnet-toggle-btn"
+                onClick={() => setShowTestnets(!showTestnets)}
+              >
+                {showTestnets ? "Hide testnets" : "Show testnets"}
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/pages/mempool/index.tsx b/src/components/pages/mempool/index.tsx
new file mode 100644
index 0000000..723888d
--- /dev/null
+++ b/src/components/pages/mempool/index.tsx
@@ -0,0 +1,16 @@
+import { useParams } from "react-router-dom";
+
+export default function Mempool() {
+  const { networkId, filter } = useParams<{
+    networkId?: string;
+    filter?: string;
+  }>();
+
+  return (
+    <div>
+      <h1>Mempool</h1>
+      <p>networkId: {networkId ?? "none"}</p>
+      <p>filter: {filter ?? "none"}</p>
+    </div>
+  );
+}
diff --git a/src/components/pages/network/NetworkProfileDisplay.tsx b/src/components/pages/network/NetworkProfileDisplay.tsx
new file mode 100644
index 0000000..60975f2
--- /dev/null
+++ b/src/components/pages/network/NetworkProfileDisplay.tsx
@@ -0,0 +1,181 @@
+import React, { useCallback, useEffect, useState } from "react";
+import Markdown from "react-markdown";
+import { fetchNetworkProfile, isSubscriptionActive } from "../../../services/MetadataService";
+import type { NetworkConfig } from "../../../types";
+import TierBadge from "../../common/TierBadge";
+
+interface ProfileDisplayProps {
+  network: NetworkConfig | undefined;
+}
+
+type ProfileState = "collapsed" | "loading" | "expanded" | "error";
+
+const ProfileDisplay: React.FC<ProfileDisplayProps> = React.memo(({ network }) => {
+  const [profileState, setProfileState] = useState<ProfileState>("collapsed");
+  const [profileContent, setProfileContent] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const hasActiveSubscription = network?.subscription && isSubscriptionActive(network.subscription);
+  const hasProfile = !!network?.profile;
+
+  // Reset state when network changes
+  const networkId = network?.networkId;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally reset state when networkId changes
+  useEffect(() => {
+    setProfileState("collapsed");
+    setProfileContent(null);
+    setError(null);
+  }, [networkId]);
+
+  const handleExpandClick = useCallback(async () => {
+    if (!network?.profile || !hasActiveSubscription) {
+      return;
+    }
+
+    // If already expanded, collapse
+    if (profileState === "expanded") {
+      setProfileState("collapsed");
+      return;
+    }
+
+    // If content already loaded, just expand
+    if (profileContent) {
+      setProfileState("expanded");
+      return;
+    }
+
+    // Load the profile content
+    setProfileState("loading");
+    setError(null);
+
+    try {
+      const content = await fetchNetworkProfile(network.profile);
+      setProfileContent(content);
+      setProfileState("expanded");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load profile");
+      setProfileState("error");
+    }
+  }, [network?.profile, hasActiveSubscription, profileState, profileContent]);
+
+  // Don't render anything if no subscription or no profile
+  if (!hasActiveSubscription || !hasProfile) {
+    return null;
+  }
+
+  return (
+    <div className="container-wide profile-container">
+      {/* Collapsed state - show button */}
+      {profileState === "collapsed" && (
+        <button type="button" className="profile-expand-button" onClick={handleExpandClick}>
+          <span className="profile-expand-text">More about {network?.name}</span>
+          <TierBadge subscription={network?.subscription} size="small" />
+          <span className="profile-expand-icon">▼</span>
+        </button>
+      )}
+
+      {/* Loading state */}
+      {profileState === "loading" && (
+        <div className="block-display-card">
+          <div className="text-center profile-loading">Loading network profile...</div>
+        </div>
+      )}
+
+      {/* Error state */}
+      {profileState === "error" && (
+        <div className="block-display-card">
+          <div className="text-center profile-error">
+            Failed to load profile: {error}
+            <button type="button" className="profile-retry-button" onClick={handleExpandClick}>
+              Retry
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Expanded state - show full profile */}
+      {profileState === "expanded" && profileContent && (
+        <div className="block-display-card">
+          <div className="profile-header">
+            <h2 className="profile-title">About {network?.name}</h2>
+            <div className="profile-header-actions">
+              <TierBadge subscription={network?.subscription} size="medium" showSuffix />
+              <button
+                type="button"
+                className="profile-collapse-button"
+                onClick={handleExpandClick}
+                aria-label="Collapse profile"
+              >
+                ▲
+              </button>
+            </div>
+          </div>
+          <div className="profile-content">
+            <Markdown
+              components={{
+                // Custom renderers for styling
+                h1: ({ children }) => <h1 className="profile-h1">{children}</h1>,
+                h2: ({ children }) => <h2 className="profile-h2">{children}</h2>,
+                h3: ({ children }) => <h3 className="profile-h3">{children}</h3>,
+                h4: ({ children }) => <h4 className="profile-h4">{children}</h4>,
+                h5: ({ children }) => <h5 className="profile-h5">{children}</h5>,
+                h6: ({ children }) => <h6 className="profile-h6">{children}</h6>,
+                p: ({ children }) => <p className="profile-p">{children}</p>,
+                a: ({ href, children }) => (
+                  <a href={href} target="_blank" rel="noopener noreferrer" className="profile-link">
+                    {children}
+                  </a>
+                ),
+                ul: ({ children }) => <ul className="profile-ul">{children}</ul>,
+                ol: ({ children }) => <ol className="profile-ol">{children}</ol>,
+                li: ({ children }) => <li className="profile-li">{children}</li>,
+                blockquote: ({ children }) => (
+                  <blockquote className="profile-blockquote">{children}</blockquote>
+                ),
+                code: ({ className, children }) => {
+                  // Check if it's a code block (has language class) or inline code
+                  const isCodeBlock = className?.startsWith("language-");
+                  if (isCodeBlock) {
+                    return (
+                      <pre className="profile-code-block">
+                        <code>{children}</code>
+                      </pre>
+                    );
+                  }
+                  return <code className="profile-inline-code">{children}</code>;
+                },
+                pre: ({ children }) => <>{children}</>,
+                hr: () => <hr className="profile-hr" />,
+                img: ({ src, alt }) => <img src={src} alt={alt} className="profile-image" />,
+              }}
+            >
+              {profileContent}
+            </Markdown>
+          </div>
+          {network?.links && network.links.length > 0 && (
+            <div className="profile-links">
+              <h3 className="profile-links-title">Official Links</h3>
+              <div className="profile-links-list">
+                {network.links.map((link, index) => (
+                  <a
+                    key={`${link.name}-${index}`}
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="profile-link-item"
+                  >
+                    {link.name}
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+ProfileDisplay.displayName = "ProfileDisplay";
+
+export default ProfileDisplay;
diff --git a/src/components/pages/network/NetworkStatsDisplay.tsx b/src/components/pages/network/NetworkStatsDisplay.tsx
new file mode 100644
index 0000000..fe30b57
--- /dev/null
+++ b/src/components/pages/network/NetworkStatsDisplay.tsx
@@ -0,0 +1,194 @@
+import React from "react";
+import type { NetworkStats, RPCMetadata } from "../../../types";
+import { RPCIndicator } from "../../common/RPCIndicator";
+
+interface NetworkStatsDisplayProps {
+  networkStats: NetworkStats | null;
+  loading?: boolean;
+  error?: string | null;
+  networkId?: number;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+}
+
+const NetworkStatsDisplay: React.FC<NetworkStatsDisplayProps> = React.memo(
+  ({
+    networkStats,
+    loading = false,
+    error = null,
+    networkId,
+    metadata,
+    selectedProvider,
+    onProviderSelect,
+  }) => {
+    if (loading) {
+      return (
+        <div className="container-wide network-stats-container">
+          <div className="block-display-card">
+            <div className="text-center network-stats-loading">Loading network statistics...</div>
+          </div>
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="container-wide network-stats-container">
+          <div className="block-display-card">
+            <div className="text-center network-stats-error">
+              Error loading network stats: {error}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    if (!networkStats) {
+      return null;
+    }
+
+    // Format gas price from Wei to Gwei
+    const formatGasPrice = (weiPrice: string): string => {
+      try {
+        const gwei = Number(weiPrice) / 1e9;
+        return `${gwei.toFixed(2)} Gwei`;
+      } catch {
+        return weiPrice;
+      }
+    };
+
+    // Format block number with commas
+    const formatBlockNumber = (blockNumber: string): string => {
+      try {
+        return Number(blockNumber).toLocaleString();
+      } catch {
+        return blockNumber;
+      }
+    };
+
+    // Parse protocol version from metadata (localhost/Hardhat only)
+    const getProtocolVersion = (): string | null => {
+      if (networkId !== 31337 || !networkStats.metadata) {
+        return null;
+      }
+
+      try {
+        return networkStats.metadata.clientVersion || null;
+      } catch (err) {
+        console.error("Failed to parse metadata:", err);
+        return null;
+      }
+    };
+
+    // Get forked network info (localhost/Hardhat only)
+    const getForkedNetworkInfo = (): {
+      networkId: number;
+      blockNumber: number;
+      blockHash: string;
+    } | null => {
+      if (networkId !== 31337 || !networkStats.metadata || !networkStats.metadata.forkedNetwork) {
+        return null;
+      }
+
+      try {
+        const forked = networkStats.metadata.forkedNetwork;
+        return {
+          networkId: forked.chainId,
+          blockNumber: forked.forkBlockNumber,
+          blockHash: forked.forkBlockHash,
+        };
+      } catch (err) {
+        console.error("Failed to parse forked network info:", err);
+        return null;
+      }
+    };
+
+    const protocolVersion = getProtocolVersion();
+    const forkedNetwork = getForkedNetworkInfo();
+
+    return (
+      <div className="container-wide network-stats-container">
+        <div className="block-display-card">
+          <div className="flex justify-between items-center mb-medium">
+            <h2 className="network-stats-title margin-0">Network Statistics</h2>
+            {metadata && selectedProvider !== undefined && onProviderSelect && (
+              <RPCIndicator
+                metadata={metadata}
+                selectedProvider={selectedProvider}
+                onProviderSelect={onProviderSelect}
+              />
+            )}
+          </div>
+
+          <div className="data-grid-3">
+            <div className="block-detail-item">
+              <span className="detail-label">Current Gas Price</span>
+              <span className="detail-value">{formatGasPrice(networkStats.currentGasPrice)}</span>
+            </div>
+
+            <div className="block-detail-item">
+              <span className="detail-label">Current Block Number</span>
+              <span className="detail-value">
+                {formatBlockNumber(networkStats.currentBlockNumber)}
+              </span>
+            </div>
+
+            <div className="block-detail-item">
+              <span className="detail-label">Sync Status</span>
+              <span className="detail-value">
+                <span className="sync-status-indicator">
+                  <span
+                    className={`sync-dot ${networkStats.isSyncing ? "sync-dot-warning" : "sync-dot-success"}`}
+                  />
+                  {networkStats.isSyncing ? "Syncing" : "Synced"}
+                </span>
+              </span>
+            </div>
+
+            {networkStats.clientVersion && (
+              <div className="block-detail-item">
+                <span className="detail-label">Client Version</span>
+                <span className="detail-value tx-mono">{networkStats.clientVersion}</span>
+              </div>
+            )}
+
+            {protocolVersion && (
+              <div className="block-detail-item">
+                <span className="detail-label">Protocol Version</span>
+                <span className="detail-value">{protocolVersion}</span>
+              </div>
+            )}
+
+            {forkedNetwork && (
+              <>
+                <div className="block-detail-item">
+                  <span className="detail-label">Forked Network</span>
+                  <span className="detail-value">Chain ID: {forkedNetwork.networkId}</span>
+                </div>
+
+                <div className="block-detail-item">
+                  <span className="detail-label">Fork Block Number</span>
+                  <span className="detail-value">
+                    {formatBlockNumber(forkedNetwork.blockNumber.toString())}
+                  </span>
+                </div>
+
+                <div className="block-detail-item network-stat-full-width">
+                  <span className="detail-label">Fork Block Hash</span>
+                  <span className="detail-value tx-mono fork-hash-value">
+                    {forkedNetwork.blockHash}
+                  </span>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+NetworkStatsDisplay.displayName = "NetworkStatsDisplay";
+
+export default NetworkStatsDisplay;
diff --git a/src/components/pages/network/index.tsx b/src/components/pages/network/index.tsx
new file mode 100644
index 0000000..6d1ee6f
--- /dev/null
+++ b/src/components/pages/network/index.tsx
@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useNetwork } from "../../../context/AppContext";
+import { useDataService } from "../../../hooks/useDataService";
+import { useProviderSelection } from "../../../hooks/useProviderSelection";
+import { useSelectedData } from "../../../hooks/useSelectedData";
+import type { DataWithMetadata, NetworkStats } from "../../../types";
+import Loader from "../../common/Loader";
+import SearchBox from "../../common/SearchBox";
+import ProfileDisplay from "./NetworkProfileDisplay";
+import NetworkStatsDisplay from "./NetworkStatsDisplay";
+
+export default function Network() {
+  const { networkId } = useParams<{ networkId?: string }>();
+  const numericNetworkId = Number(networkId) || 1;
+  const networkConfig = useNetwork(numericNetworkId);
+  const dataService = useDataService(numericNetworkId);
+  const [networkStatsResult, setNetworkStatsResult] =
+    useState<DataWithMetadata<NetworkStats> | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Provider selection state
+  const [selectedProvider, setSelectedProvider] = useProviderSelection(
+    `networkStats_${numericNetworkId}`,
+  );
+
+  // Extract actual network stats based on selected provider
+  const networkStats = useSelectedData(networkStatsResult, selectedProvider);
+
+  useEffect(() => {
+    if (!dataService) {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    dataService.networkAdapter
+      .getNetworkStats()
+      .then((result) => {
+        setNetworkStatsResult(result);
+      })
+      .catch((err) => {
+        setError(err.message || "Failed to fetch network stats");
+      })
+      .finally(() => setLoading(false));
+  }, [dataService]);
+
+  // Generate title based on network
+  // Strip "Ethereum" from network names (e.g., "Ethereum Mainnet" -> "MAINNET")
+  const rawName = networkConfig?.name?.toUpperCase() || "OPENSCAN";
+  const networkName = rawName.replace(/^ETHEREUM\s*/i, "").trim();
+  const networkColor = networkConfig?.color || "#627eea";
+  const hasNetworkName = networkName.length > 0;
+
+  return (
+    <div className="home-container">
+      <div className="home-content page-card">
+        <h1 className="home-title network-title">
+          {hasNetworkName && (
+            <>
+              <span
+                className="network-title-name"
+                style={{ "--network-color": networkColor } as React.CSSProperties}
+              >
+                {networkName}
+              </span>{" "}
+            </>
+          )}
+        </h1>
+        {networkConfig?.description && (
+          <p className="network-description">{networkConfig.description}</p>
+        )}
+        <SearchBox />
+        {loading && <Loader text="Loading network stats..." />}
+        {error && <p className="error-text-center">Error: {error}</p>}
+        {networkStats && (
+          <NetworkStatsDisplay
+            networkStats={networkStats}
+            networkId={numericNetworkId}
+            metadata={networkStatsResult?.metadata}
+            selectedProvider={selectedProvider}
+            onProviderSelect={setSelectedProvider}
+          />
+        )}
+        <ProfileDisplay network={networkConfig} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/pages/profile/ProfileAppDisplay.tsx b/src/components/pages/profile/ProfileAppDisplay.tsx
new file mode 100644
index 0000000..f9f2fdc
--- /dev/null
+++ b/src/components/pages/profile/ProfileAppDisplay.tsx
@@ -0,0 +1,123 @@
+import type React from "react";
+import Markdown from "react-markdown";
+import { Link } from "react-router-dom";
+import type { ProfileData } from "../../../services/MetadataService";
+import { isSubscriptionActive } from "../../../services/MetadataService";
+import TierBadge from "../../common/TierBadge";
+
+interface ProfileAppDisplayProps {
+  profile: ProfileData;
+}
+
+const ProfileAppDisplay: React.FC<ProfileAppDisplayProps> = ({ profile }) => {
+  const hasActiveSubscription = isSubscriptionActive(profile.subscription);
+  const tier = profile.subscription?.tier || 0;
+
+  return (
+    <div className="profile-display profile-app">
+      {/* Header Section */}
+      <div className="profile-header">
+        <div className="profile-header-content">
+          {profile.logoUrl ? (
+            <img src={profile.logoUrl} alt={profile.name} className="profile-logo" />
+          ) : (
+            <div className="profile-logo-placeholder">{profile.name.charAt(0)}</div>
+          )}
+          <div className="profile-header-info">
+            <div className="profile-title-row">
+              <h1 className="profile-name">{profile.name}</h1>
+              {hasActiveSubscription && profile.subscription && (
+                <TierBadge subscription={profile.subscription} size="medium" />
+              )}
+              {profile.verified && (
+                <span className="profile-badge profile-badge-verified">Verified</span>
+              )}
+            </div>
+            {profile.description && <p className="profile-description">{profile.description}</p>}
+            {profile.tags && profile.tags.length > 0 && (
+              <div className="profile-tags">
+                {profile.tags.map((tag) => (
+                  <span key={tag} className="profile-tag">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Links Section - Available for tier 2+ */}
+      {tier >= 2 && profile.links && profile.links.length > 0 && (
+        <div className="profile-section">
+          <h2 className="profile-section-title">Links</h2>
+          <div className="profile-links">
+            {profile.links.map((link) => (
+              <a
+                key={link.url}
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="profile-link-card"
+              >
+                <span className="profile-link-name">{link.name}</span>
+                {link.description && (
+                  <span className="profile-link-description">{link.description}</span>
+                )}
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Supported Networks - Available for tier 2+ */}
+      {tier >= 2 && profile.networks && profile.networks.length > 0 && (
+        <div className="profile-section">
+          <h2 className="profile-section-title">Supported Networks</h2>
+          <div className="profile-networks">
+            {profile.networks.map((chainId) => (
+              <Link key={chainId} to={`/${chainId}`} className="profile-network-chip">
+                Chain {chainId}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Profile Markdown Content - Available for tier 3 only */}
+      {tier >= 3 && profile.profileMarkdown && (
+        <div className="profile-section">
+          <h2 className="profile-section-title">About</h2>
+          <div className="profile-markdown">
+            <Markdown
+              components={{
+                h1: ({ children }) => <h3 className="profile-md-h1">{children}</h3>,
+                h2: ({ children }) => <h4 className="profile-md-h2">{children}</h4>,
+                h3: ({ children }) => <h5 className="profile-md-h3">{children}</h5>,
+                p: ({ children }) => <p className="profile-md-p">{children}</p>,
+                a: ({ href, children }) => (
+                  <a
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="profile-md-link"
+                  >
+                    {children}
+                  </a>
+                ),
+                ul: ({ children }) => <ul className="profile-md-ul">{children}</ul>,
+                ol: ({ children }) => <ol className="profile-md-ol">{children}</ol>,
+                li: ({ children }) => <li className="profile-md-li">{children}</li>,
+                code: ({ children }) => <code className="profile-md-code">{children}</code>,
+              }}
+            >
+              {profile.profileMarkdown}
+            </Markdown>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProfileAppDisplay;
diff --git a/src/components/pages/profile/ProfileNetworkDisplay.tsx b/src/components/pages/profile/ProfileNetworkDisplay.tsx
new file mode 100644
index 0000000..69bc147
--- /dev/null
+++ b/src/components/pages/profile/ProfileNetworkDisplay.tsx
@@ -0,0 +1,147 @@
+import type React from "react";
+import Markdown from "react-markdown";
+import { Link } from "react-router-dom";
+import type { ProfileData } from "../../../services/MetadataService";
+import { isSubscriptionActive } from "../../../services/MetadataService";
+import TierBadge from "../../common/TierBadge";
+
+interface ProfileNetworkDisplayProps {
+  profile: ProfileData;
+}
+
+const ProfileNetworkDisplay: React.FC<ProfileNetworkDisplayProps> = ({ profile }) => {
+  const hasActiveSubscription = isSubscriptionActive(profile.subscription);
+  const tier = profile.subscription?.tier || 0;
+
+  return (
+    <div className="profile-display profile-network">
+      {/* Header Section */}
+      <div className="profile-header">
+        <div className="profile-header-content">
+          {profile.logoUrl ? (
+            <img src={profile.logoUrl} alt={profile.name} className="profile-logo" />
+          ) : (
+            <div
+              className="profile-logo-placeholder"
+              style={{ "--profile-color": profile.color || "#10b981" } as React.CSSProperties}
+            >
+              {profile.name.charAt(0)}
+            </div>
+          )}
+          <div className="profile-header-info">
+            <div className="profile-title-row">
+              <h1 className="profile-name">{profile.name}</h1>
+              {hasActiveSubscription && profile.subscription && (
+                <TierBadge subscription={profile.subscription} size="medium" />
+              )}
+              {profile.isTestnet && (
+                <span className="profile-badge profile-badge-testnet">Testnet</span>
+              )}
+            </div>
+            {profile.description && <p className="profile-description">{profile.description}</p>}
+            <div className="profile-meta">
+              <span className="profile-meta-item">
+                <span className="profile-meta-label">Chain ID:</span>
+                <span className="profile-meta-value">{profile.chainId}</span>
+              </span>
+              {profile.currency && (
+                <span className="profile-meta-item">
+                  <span className="profile-meta-label">Currency:</span>
+                  <span className="profile-meta-value">{profile.currency}</span>
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Quick Actions - Available for all tiers */}
+      <div className="profile-section">
+        <h2 className="profile-section-title">Explore</h2>
+        <div className="profile-actions">
+          <Link to={`/${profile.chainId}`} className="profile-action-btn">
+            View Network
+          </Link>
+          <Link to={`/${profile.chainId}/blocks`} className="profile-action-btn">
+            Blocks
+          </Link>
+          <Link to={`/${profile.chainId}/txs`} className="profile-action-btn">
+            Transactions
+          </Link>
+        </div>
+      </div>
+
+      {/* Links Section - Available for tier 2+ */}
+      {tier >= 2 && profile.links && profile.links.length > 0 && (
+        <div className="profile-section">
+          <h2 className="profile-section-title">Links</h2>
+          <div className="profile-links">
+            {profile.links.map((link) => (
+              <a
+                key={link.url}
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="profile-link-card"
+              >
+                <span className="profile-link-name">{link.name}</span>
+                {link.description && (
+                  <span className="profile-link-description">{link.description}</span>
+                )}
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* RPC Endpoints - Available for tier 2+ */}
+      {tier >= 2 && profile.rpc?.public && profile.rpc.public.length > 0 && (
+        <div className="profile-section">
+          <h2 className="profile-section-title">Public RPC Endpoints</h2>
+          <div className="profile-rpc-list">
+            {profile.rpc.public.map((rpcUrl) => (
+              <div key={rpcUrl} className="profile-rpc-item">
+                <code>{rpcUrl}</code>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Profile Markdown Content - Always shown for networks */}
+      {profile.profileMarkdown && (
+        <div className="profile-section">
+          <h2 className="profile-section-title">About</h2>
+          <div className="profile-markdown">
+            <Markdown
+              components={{
+                h1: ({ children }) => <h3 className="profile-md-h1">{children}</h3>,
+                h2: ({ children }) => <h4 className="profile-md-h2">{children}</h4>,
+                h3: ({ children }) => <h5 className="profile-md-h3">{children}</h5>,
+                p: ({ children }) => <p className="profile-md-p">{children}</p>,
+                a: ({ href, children }) => (
+                  <a
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="profile-md-link"
+                  >
+                    {children}
+                  </a>
+                ),
+                ul: ({ children }) => <ul className="profile-md-ul">{children}</ul>,
+                ol: ({ children }) => <ol className="profile-md-ol">{children}</ol>,
+                li: ({ children }) => <li className="profile-md-li">{children}</li>,
+                code: ({ children }) => <code className="profile-md-code">{children}</code>,
+              }}
+            >
+              {profile.profileMarkdown}
+            </Markdown>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProfileNetworkDisplay;
diff --git a/src/components/pages/profile/ProfileOrgDisplay.tsx b/src/components/pages/profile/ProfileOrgDisplay.tsx
new file mode 100644
index 0000000..88a57fb
--- /dev/null
+++ b/src/components/pages/profile/ProfileOrgDisplay.tsx
@@ -0,0 +1,106 @@
+import type React from "react";
+import Markdown from "react-markdown";
+import type { ProfileData } from "../../../services/MetadataService";
+import { isSubscriptionActive } from "../../../services/MetadataService";
+import TierBadge from "../../common/TierBadge";
+
+interface ProfileOrgDisplayProps {
+  profile: ProfileData;
+}
+
+const ProfileOrgDisplay: React.FC<ProfileOrgDisplayProps> = ({ profile }) => {
+  const hasActiveSubscription = isSubscriptionActive(profile.subscription);
+  const tier = profile.subscription?.tier || 0;
+
+  return (
+    <div className="profile-display profile-org">
+      {/* Header Section */}
+      <div className="profile-header">
+        <div className="profile-header-content">
+          {profile.logoUrl ? (
+            <img src={profile.logoUrl} alt={profile.name} className="profile-logo" />
+          ) : (
+            <div className="profile-logo-placeholder">{profile.name.charAt(0)}</div>
+          )}
+          <div className="profile-header-info">
+            <div className="profile-title-row">
+              <h1 className="profile-name">{profile.name}</h1>
+              {hasActiveSubscription && profile.subscription && (
+                <TierBadge subscription={profile.subscription} size="medium" />
+              )}
+            </div>
+            {profile.description && <p className="profile-description">{profile.description}</p>}
+            {profile.orgType && (
+              <div className="profile-meta">
+                <span className="profile-meta-item">
+                  <span className="profile-meta-label">Type:</span>
+                  <span className="profile-meta-value profile-meta-capitalize">
+                    {profile.orgType}
+                  </span>
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Links Section - Available for tier 2+ */}
+      {tier >= 2 && profile.links && profile.links.length > 0 && (
+        <div className="profile-section">
+          <h2 className="profile-section-title">Links</h2>
+          <div className="profile-links">
+            {profile.links.map((link) => (
+              <a
+                key={link.url}
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="profile-link-card"
+              >
+                <span className="profile-link-name">{link.name}</span>
+                {link.description && (
+                  <span className="profile-link-description">{link.description}</span>
+                )}
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Profile Markdown Content - Available for tier 3 only */}
+      {tier >= 3 && profile.profileMarkdown && (
+        <div className="profile-section">
+          <h2 className="profile-section-title">About</h2>
+          <div className="profile-markdown">
+            <Markdown
+              components={{
+                h1: ({ children }) => <h3 className="profile-md-h1">{children}</h3>,
+                h2: ({ children }) => <h4 className="profile-md-h2">{children}</h4>,
+                h3: ({ children }) => <h5 className="profile-md-h3">{children}</h5>,
+                p: ({ children }) => <p className="profile-md-p">{children}</p>,
+                a: ({ href, children }) => (
+                  <a
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="profile-md-link"
+                  >
+                    {children}
+                  </a>
+                ),
+                ul: ({ children }) => <ul className="profile-md-ul">{children}</ul>,
+                ol: ({ children }) => <ol className="profile-md-ol">{children}</ol>,
+                li: ({ children }) => <li className="profile-md-li">{children}</li>,
+                code: ({ children }) => <code className="profile-md-code">{children}</code>,
+              }}
+            >
+              {profile.profileMarkdown}
+            </Markdown>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProfileOrgDisplay;
diff --git a/src/components/pages/profile/index.tsx b/src/components/pages/profile/index.tsx
new file mode 100644
index 0000000..1d6baf0
--- /dev/null
+++ b/src/components/pages/profile/index.tsx
@@ -0,0 +1,91 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import {
+  fetchProfile,
+  type ProfileData,
+  type ProfileType,
+} from "../../../services/MetadataService";
+import Loader from "../../common/Loader";
+import ProfileAppDisplay from "./ProfileAppDisplay";
+import ProfileNetworkDisplay from "./ProfileNetworkDisplay";
+import ProfileOrgDisplay from "./ProfileOrgDisplay";
+
+const Profile: React.FC = () => {
+  const { profileType, profileId } = useParams<{
+    profileType?: string;
+    profileId?: string;
+  }>();
+
+  const [profile, setProfile] = useState<ProfileData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!profileType || !profileId) {
+      setError("Invalid profile URL. Please provide both profile type and ID.");
+      setLoading(false);
+      return;
+    }
+
+    // Validate profile type
+    const validTypes: ProfileType[] = ["network", "app", "organization"];
+    if (!validTypes.includes(profileType as ProfileType)) {
+      setError(`Invalid profile type: ${profileType}. Must be one of: network, app, organization.`);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    fetchProfile(profileType as ProfileType, profileId)
+      .then((data) => {
+        if (data) {
+          setProfile(data);
+        } else {
+          setError(`Profile not found: ${profileType}/${profileId}`);
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message || "Failed to fetch profile");
+        setLoading(false);
+      });
+  }, [profileType, profileId]);
+
+  // Render the appropriate display component based on profile type
+  const renderProfileDisplay = () => {
+    if (!profile) return null;
+
+    switch (profile.type) {
+      case "network":
+        return <ProfileNetworkDisplay profile={profile} />;
+      case "app":
+        return <ProfileAppDisplay profile={profile} />;
+      case "organization":
+        return <ProfileOrgDisplay profile={profile} />;
+      default:
+        return <p>Unknown profile type</p>;
+    }
+  };
+
+  return (
+    <div className="container-medium page-container-padded">
+      <div className="page-card">
+        {loading && <Loader text="Loading profile..." />}
+
+        {error && (
+          <div className="text-center">
+            <h1 className="page-heading">Profile Not Found</h1>
+            <p className="error-text-center">{error}</p>
+          </div>
+        )}
+
+        {!loading && !error && profile && renderProfileDisplay()}
+      </div>
+    </div>
+  );
+};
+
+export default Profile;
diff --git a/src/components/pages/settings/index.tsx b/src/components/pages/settings/index.tsx
new file mode 100644
index 0000000..51e163b
--- /dev/null
+++ b/src/components/pages/settings/index.tsx
@@ -0,0 +1,388 @@
+import type React from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { getEnabledNetworks } from "../../../config/networks";
+import { AppContext } from "../../../context/AppContext";
+import { useSettings } from "../../../context/SettingsContext";
+import type { RPCUrls, RpcUrlsContextType } from "../../../types";
+
+const Settings: React.FC = () => {
+  const { rpcUrls, setRpcUrls } = useContext(AppContext);
+  const { settings, updateSettings } = useSettings();
+  const [localRpc, setLocalRpc] = useState<Record<number, string | RPCUrls>>({
+    ...rpcUrls,
+  });
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [draggedItem, setDraggedItem] = useState<{ chainId: number; index: number } | null>(null);
+  const [fetchingChainId, setFetchingChainId] = useState<number | null>(null);
+
+  const updateField = (key: keyof RpcUrlsContextType, value: string) => {
+    setLocalRpc((prev) => ({ ...prev, [key]: value }));
+  };
+
+  // Helper to get URLs as array from localRpc
+  const getLocalRpcArray = (chainId: number): string[] => {
+    const value = localRpc[chainId];
+    if (Array.isArray(value)) return [...value];
+    if (typeof value === "string") {
+      return value
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean);
+    }
+    return [];
+  };
+
+  // Helper to get URLs as string for input display
+  const getLocalRpcString = (chainId: number): string => {
+    const value = localRpc[chainId];
+    if (Array.isArray(value)) return value.join(", ");
+    if (typeof value === "string") return value;
+    return "";
+  };
+
+  // Fetch RPCs from Chainlist API
+  const fetchFromChainlist = useCallback(async (chainId: number) => {
+    setFetchingChainId(chainId);
+    try {
+      const response = await fetch("https://chainlist.org/rpcs.json");
+      if (!response.ok) throw new Error("Failed to fetch from Chainlist");
+
+      const chains = await response.json();
+      const chain = chains.find((c: { chainId: number }) => c.chainId === chainId);
+
+      if (!chain?.rpc) {
+        throw new Error(`No RPCs found for chain ${chainId}`);
+      }
+
+      // Filter for tracking: "none" and extract URLs
+      const newUrls = chain.rpc
+        .filter((rpc: { tracking?: string }) => rpc.tracking === "none")
+        .map((rpc: { url: string }) => rpc.url)
+        .filter((url: string) => url && !url.includes("${"))
+        .filter((url: string) => !url.startsWith("wss://"));
+
+      if (newUrls.length === 0) {
+        throw new Error(`No privacy-friendly RPCs found for chain ${chainId}`);
+      }
+
+      // Merge with existing URLs, avoiding duplicates
+      setLocalRpc((prev) => {
+        const currentValue = prev[chainId];
+        const existingUrls = Array.isArray(currentValue)
+          ? currentValue
+          : typeof currentValue === "string"
+            ? currentValue
+                .split(",")
+                .map((s) => s.trim())
+                .filter(Boolean)
+            : [];
+        const mergedUrls = Array.from(new Set([...existingUrls, ...newUrls]));
+        return {
+          ...prev,
+          [chainId]: mergedUrls,
+        };
+      });
+    } catch (error) {
+      console.error("Error fetching from Chainlist:", error);
+    } finally {
+      setFetchingChainId(null);
+    }
+  }, []);
+
+  const deleteRpc = useCallback((chainId: number, index: number) => {
+    setLocalRpc((prev) => {
+      const currentValue = prev[chainId];
+      const currentUrls = Array.isArray(currentValue)
+        ? [...currentValue]
+        : typeof currentValue === "string"
+          ? currentValue
+              .split(",")
+              .map((s) => s.trim())
+              .filter(Boolean)
+          : [];
+      currentUrls.splice(index, 1);
+      return {
+        ...prev,
+        [chainId]: currentUrls,
+      };
+    });
+  }, []);
+
+  const handleDragStart = useCallback((chainId: number, index: number) => {
+    setDraggedItem({ chainId, index });
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  const handleDrop = useCallback(
+    (chainId: number, dropIndex: number) => {
+      if (!draggedItem || draggedItem.chainId !== chainId) {
+        setDraggedItem(null);
+        return;
+      }
+
+      setLocalRpc((prev) => {
+        const currentValue = prev[chainId];
+        const currentUrls = Array.isArray(currentValue)
+          ? [...currentValue]
+          : typeof currentValue === "string"
+            ? currentValue
+                .split(",")
+                .map((s) => s.trim())
+                .filter(Boolean)
+            : [];
+        const draggedUrl = currentUrls.splice(draggedItem.index, 1)[0];
+        if (!draggedUrl) return prev;
+        currentUrls.splice(dropIndex, 0, draggedUrl);
+        return {
+          ...prev,
+          [chainId]: currentUrls,
+        };
+      });
+      setDraggedItem(null);
+    },
+    [draggedItem],
+  );
+
+  const save = () => {
+    // Convert comma-separated strings into arrays for each chainId
+    const parsed: RpcUrlsContextType = Object.keys(localRpc).reduce((acc, key) => {
+      const k = Number(key) as unknown as keyof RpcUrlsContextType;
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      const val = (localRpc as any)[k];
+      if (typeof val === "string") {
+        const arr = val
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean); // Previene errores por multiples comas (,,,)
+        // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+        (acc as any)[k] = arr;
+      } else {
+        // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+        (acc as any)[k] = val;
+      }
+      return acc;
+    }, {} as RpcUrlsContextType);
+
+    setRpcUrls(parsed);
+    setSaveSuccess(true);
+    setTimeout(() => setSaveSuccess(false), 3000);
+  };
+
+  // Get enabled networks from config
+  const chainConfigs = useMemo(() => {
+    return getEnabledNetworks().map((network) => ({
+      id: network.networkId,
+      name: network.name,
+    }));
+  }, []);
+
+  return (
+    <div className="container-medium page-container-padded">
+      <div className="page-card settings-container">
+        <h1 className="page-title-small">Settings</h1>
+
+        {/* Success Message */}
+        {saveSuccess && (
+          <div className="settings-success-message">✓ Settings saved successfully!</div>
+        )}
+
+        {/* Top Row: Appearance and RPC Strategy side by side */}
+        <div className="settings-top-row">
+          {/* Appearance Settings Section */}
+          <div className="settings-section no-margin">
+            <h2 className="settings-section-title">🎨 Appearance</h2>
+            <p className="settings-section-description">
+              Customize the visual appearance of the application.
+            </p>
+
+            <div className="settings-item">
+              <div>
+                <div className="settings-item-label">Funny Background Blocks</div>
+                <div className="settings-item-description">
+                  Show animated isometric blocks in the background
+                </div>
+              </div>
+              <label className="settings-toggle">
+                <input
+                  type="checkbox"
+                  checked={settings.showBackgroundBlocks ?? true}
+                  onChange={(e) => updateSettings({ showBackgroundBlocks: e.target.checked })}
+                  className="settings-toggle-input"
+                />
+                <span
+                  className={`settings-toggle-slider ${settings.showBackgroundBlocks ? "active" : ""}`}
+                >
+                  <span
+                    className={`settings-toggle-knob ${settings.showBackgroundBlocks ? "active" : ""}`}
+                  />
+                </span>
+              </label>
+            </div>
+          </div>
+
+          {/* RPC Strategy Section */}
+          <div className="settings-section no-margin">
+            <h2 className="settings-section-title">⚡ RPC Strategy</h2>
+            <p className="settings-section-description">
+              Choose how requests are sent to multiple RPC endpoints.
+            </p>
+
+            <div className="settings-item">
+              <div>
+                <div className="settings-item-label">Request Strategy</div>
+                <div className="settings-item-description">
+                  <strong>Fallback:</strong> Try endpoints one by one until one succeeds.
+                  <br />
+                  <strong>Parallel:</strong> Query all endpoints simultaneously.
+                </div>
+              </div>
+              <select
+                value={settings.rpcStrategy || "fallback"}
+                onChange={(e) =>
+                  updateSettings({
+                    rpcStrategy: e.target.value as "fallback" | "parallel",
+                  })
+                }
+                className="settings-select"
+              >
+                <option value="fallback">Fallback (Default)</option>
+                <option value="parallel">Parallel</option>
+              </select>
+            </div>
+
+            {/* Max Parallel Requests - Only show when parallel mode is active */}
+            {settings.rpcStrategy === "parallel" && (
+              <div className="settings-item">
+                <div>
+                  <div className="settings-item-label">Max Parallel Requests</div>
+                  <div className="settings-item-description">
+                    Limit how many RPC endpoints are queried simultaneously. Lower values reduce
+                    bandwidth usage. Uses the first N endpoints from your RPC list (reorder by
+                    dragging).
+                  </div>
+                </div>
+                <select
+                  value={settings.maxParallelRequests ?? 3}
+                  onChange={(e) =>
+                    updateSettings({
+                      maxParallelRequests: Number(e.target.value),
+                    })
+                  }
+                  className="settings-select"
+                >
+                  <option value={1}>1 endpoint</option>
+                  <option value={2}>2 endpoints</option>
+                  <option value={3}>3 endpoints (Default)</option>
+                  <option value={5}>5 endpoints</option>
+                  <option value={10}>10 endpoints</option>
+                  <option value={0}>Unlimited</option>
+                </select>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* RPC Configuration Section */}
+        <div className="settings-section">
+          <h2 className="settings-section-title">🔗 RPC Endpoints</h2>
+          <p className="settings-section-description">
+            Enter comma-separated RPC URLs for each network. Multiple URLs provide fallback support.
+          </p>
+
+          <div className="flex-column settings-chain-list">
+            {chainConfigs.map((chain) => (
+              <div key={chain.id} className="settings-chain-item">
+                <div className="flex-column settings-chain-label">
+                  <div className="settings-chain-name">
+                    {chain.name}
+                    <span className="settings-chain-id-badge">Chain ID: {chain.id}</span>
+                    <button
+                      type="button"
+                      className="settings-fetch-rpc-button"
+                      onClick={() => fetchFromChainlist(chain.id)}
+                      disabled={fetchingChainId === chain.id}
+                    >
+                      {fetchingChainId === chain.id ? "Fetching..." : "Fetch from Chainlist"}
+                    </button>
+                  </div>
+                  <input
+                    className="settings-rpc-input"
+                    value={getLocalRpcString(chain.id)}
+                    onChange={(e) =>
+                      updateField(chain.id as keyof RpcUrlsContextType, e.target.value)
+                    }
+                    placeholder="https://eth-mainnet.g.alchemy.com/v2/YOUR-API-KEY"
+                  />
+
+                  {/* Help text for localhost network */}
+                  {chain.id === 31337 && (
+                    <div className="settings-help-text">
+                      💡 Need to access your local network remotely?{" "}
+                      <a
+                        href="https://dashboard.ngrok.com/get-started/setup"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="settings-link"
+                      >
+                        Learn how to set up a tunnel with ngrok
+                      </a>
+                    </div>
+                  )}
+
+                  {/* Display current RPC list as tags */}
+                  {(() => {
+                    const rpcArray = getLocalRpcArray(chain.id);
+                    if (rpcArray.length === 0) return null;
+                    return (
+                      <div className="flex-column settings-rpc-list">
+                        <span className="settings-rpc-list-label">Current RPCs:</span>
+                        <div className="flex-start settings-rpc-tags">
+                          {rpcArray.map((url, idx) => (
+                            // biome-ignore lint/a11y/noStaticElementInteractions: Drag-and-drop requires these handlers
+                            <div
+                              key={url}
+                              className={`settings-rpc-tag ${draggedItem?.chainId === chain.id && draggedItem?.index === idx ? "dragging" : ""}`}
+                              draggable
+                              onDragStart={() => handleDragStart(chain.id, idx)}
+                              onDragOver={handleDragOver}
+                              onDrop={() => handleDrop(chain.id, idx)}
+                              onDragEnd={() => setDraggedItem(null)}
+                            >
+                              <span className="settings-rpc-tag-index">{idx + 1}</span>
+                              <span className="settings-rpc-tag-url">{url}</span>
+                              <button
+                                type="button"
+                                className="settings-rpc-tag-delete"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  deleteRpc(chain.id, idx);
+                                }}
+                                title="Remove RPC"
+                              >
+                                ×
+                              </button>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    );
+                  })()}
+                </div>
+              </div>
+            ))}
+
+            {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+            <button onClick={save} className="settings-save-button">
+              💾 Save Configuration
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Settings;
diff --git a/src/components/pages/subscriptions/index.tsx b/src/components/pages/subscriptions/index.tsx
new file mode 100644
index 0000000..781da00
--- /dev/null
+++ b/src/components/pages/subscriptions/index.tsx
@@ -0,0 +1,533 @@
+import type React from "react";
+import { useState } from "react";
+import paymentHelp1 from "../../../assets/paymentHelp1.png";
+import paymentHelp2 from "../../../assets/paymentHelp2.png";
+import paymentHelp3 from "../../../assets/paymentHelp3.png";
+import { OPENSCAN_PAYMENT_ADDRESS } from "../../../config/index";
+import "../../../styles/subscriptions.css";
+
+type SubscriptionCategory = "tokens" | "networks" | "apps" | "companies";
+
+interface TierBenefit {
+  tier: string;
+  benefits: string[];
+}
+
+interface SubscriptionType {
+  id: SubscriptionCategory;
+  name: string;
+  basePrice: number;
+  description: string;
+  tiers: TierBenefit[];
+}
+
+const subscriptionTypes: SubscriptionType[] = [
+  {
+    id: "tokens",
+    name: "Tokens",
+    basePrice: 500,
+    description:
+      "Verified contracts tags, metadata integration, logo display, official links and token balance fetcher integration.",
+    tiers: [
+      {
+        tier: "Backer",
+        benefits: [
+          "Token page with token info: ERC20 details, project name, custom URLs",
+          "Verified contracts and tagged important contracts",
+        ],
+      },
+      {
+        tier: "Partner",
+        benefits: [
+          "Token balance shown on the main explorer",
+          "Simple profile page",
+          "Multiple network listing",
+        ],
+      },
+      {
+        tier: "Ally",
+        benefits: [
+          "Complete profile page with markdown description",
+          "OpenScan subdomain",
+          "Direct communication line with the technical team",
+        ],
+      },
+    ],
+  },
+  {
+    id: "networks",
+    name: "Networks",
+    basePrice: 2000,
+    description:
+      "Full RPC methods support, dedicated technical maintenance, subdomain availability, and prominent branding.",
+    tiers: [
+      {
+        tier: "Backer",
+        benefits: ["Markdown profile on the network page", "Priority placement on the home page"],
+      },
+      {
+        tier: "Partner",
+        benefits: [
+          "Dedicated subdomain network explorer",
+          "Direct communication line with the technical team",
+        ],
+      },
+      {
+        tier: "Ally",
+        benefits: [
+          "Roadmap voting power",
+          "Network-specific features in the dedicated network explorer",
+        ],
+      },
+    ],
+  },
+  {
+    id: "apps",
+    name: "Crypto Apps",
+    basePrice: 1000,
+    description:
+      "Dedicated listing and verified branding for wallets, dApps, supplementary explorer tools, and exchanges, promoting integration and visibility.",
+    tiers: [
+      {
+        tier: "Backer",
+        benefits: [
+          "Simple profile page",
+          "Important contracts verified and tagged",
+          "Contract events listing",
+        ],
+      },
+      {
+        tier: "Partner",
+        benefits: ["OpenScan subdomain", "Complete profile page with markdown description"],
+      },
+      {
+        tier: "Ally",
+        benefits: ["Roadmap voting power", "Direct communication line with the technical team"],
+      },
+    ],
+  },
+  {
+    id: "companies",
+    name: "Companies & Orgs",
+    basePrice: 500,
+    description:
+      "Formal recognition and visibility for infrastructure providers, venture funds, and other supporting entities who contribute to the project's continuity.",
+    tiers: [
+      {
+        tier: "Backer",
+        benefits: [
+          "Simple profile page",
+          "Important contracts verified and tagged",
+          "Contract events listing",
+        ],
+      },
+      {
+        tier: "Partner",
+        benefits: ["Complete profile page with markdown description", "OpenScan subdomain"],
+      },
+      {
+        tier: "Ally",
+        benefits: ["Direct communication line with the technical team", "Roadmap voting power"],
+      },
+    ],
+  },
+];
+
+const tierMultipliers: Record<string, number> = {
+  Backer: 1,
+  Partner: 3,
+  Ally: 6,
+};
+
+// Early adopter discount periods with graduated rates
+const EARLY_ADOPTER_PERIODS = [
+  {
+    start: new Date("2026-01-01T00:00:00"),
+    end: new Date("2026-01-31T23:59:59"),
+    discount: 0.4, // 40% off
+    label: "January 2026",
+  },
+  {
+    start: new Date("2026-02-01T00:00:00"),
+    end: new Date("2026-02-28T23:59:59"),
+    discount: 0.3, // 30% off
+    label: "February 2026",
+  },
+  {
+    start: new Date("2026-03-01T00:00:00"),
+    end: new Date("2026-03-31T23:59:59"),
+    discount: 0.2, // 20% off
+    label: "March 2026",
+  },
+];
+
+const getCurrentEarlyAdopterDiscount = (): number | null => {
+  const now = new Date();
+  for (const period of EARLY_ADOPTER_PERIODS) {
+    if (now >= period.start && now <= period.end) {
+      return period.discount;
+    }
+  }
+  return null;
+};
+
+const isEarlyAdopterPeriod = (): boolean => {
+  return getCurrentEarlyAdopterDiscount() !== null;
+};
+
+const Subscriptions: React.FC = () => {
+  const [selectedCategory, setSelectedCategory] = useState<SubscriptionCategory>("tokens");
+  const [showHelpImages, setShowHelpImages] = useState(false);
+
+  const selectedSubscription = subscriptionTypes.find((s) => s.id === selectedCategory);
+
+  const earlyAdopterActive = isEarlyAdopterPeriod();
+
+  return (
+    <div className="container-medium page-container-padded">
+      <div className="page-card">
+        {/* Header */}
+        <div className="text-center mb-large">
+          <h1 className="page-heading">Support OpenScan</h1>
+          <p className="page-subtitle">
+            Sustainable, ethical funding for open-source blockchain infrastructure
+          </p>
+        </div>
+
+        {/* Value Proposition */}
+        <div className="subscriptions-intro">
+          <p>
+            OpenScan remains <strong>entirely free for all end-users</strong>. Revenue is sourced
+            from projects, applications, tokens, and networks that recognize the value of the
+            platform and wish to formally appear as verified supporters of the open ecosystem.
+          </p>
+        </div>
+
+        {/* Category Tabs */}
+        <div className="subscriptions-tabs">
+          {subscriptionTypes.map((sub) => (
+            // biome-ignore lint/a11y/useButtonType: tab buttons don't need explicit type
+            <button
+              key={sub.id}
+              className={`subscriptions-tab ${selectedCategory === sub.id ? "active" : ""}`}
+              onClick={() => setSelectedCategory(sub.id)}
+            >
+              {sub.name}
+            </button>
+          ))}
+        </div>
+
+        {/* Selected Category Description */}
+        {selectedSubscription && (
+          <div className="subscriptions-category-info">
+            <p className="subscriptions-category-description">{selectedSubscription.description}</p>
+          </div>
+        )}
+
+        {/* Pricing Tiers */}
+        {selectedSubscription && (
+          <div className="subscriptions-tiers">
+            {selectedSubscription.tiers.map((tier) => {
+              const multiplier = tierMultipliers[tier.tier] ?? 1;
+              const price = selectedSubscription.basePrice * multiplier;
+              return (
+                <div key={tier.tier} className="subscriptions-tier-card">
+                  <div className="subscriptions-tier-header">
+                    <h3 className="subscriptions-tier-name">
+                      Tier {Object.keys(tierMultipliers).indexOf(tier.tier) + 1} - {tier.tier}
+                    </h3>
+                    <div className="subscriptions-tier-price">
+                      <span className="subscriptions-price-amount">${price.toLocaleString()}</span>
+                      <span className="subscriptions-price-period">/ month</span>
+                    </div>
+                    <div className="subscriptions-tier-price-annual">
+                      <span className="subscriptions-price-annual-amount">
+                        ${(price * 12 * 0.8).toLocaleString()}
+                      </span>
+                      <span className="subscriptions-price-annual-period">/ year</span>
+                      <span className="subscriptions-price-annual-discount">Save 20%</span>
+                    </div>
+                  </div>
+                  <div className="subscriptions-tier-benefits">
+                    <ul>
+                      {tier.benefits.map((benefit, index) => (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: benefits are static strings
+                        <li key={index}>{benefit}</li>
+                      ))}
+                    </ul>
+                  </div>
+                  {tier.tier !== "Backer" && (
+                    <div className="subscriptions-tier-note">
+                      Includes all {tier.tier === "Ally" ? "Partner" : "Backer"} benefits
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Pricing Summary Table */}
+        <div className="subscriptions-summary">
+          <h2 className="page-heading-large text-center">Pricing Overview</h2>
+
+          {/* Early Adopter Discount Banner */}
+          <div className="subscriptions-early-adopter">
+            <div className="subscriptions-early-adopter-badge">Early Adopter Discount</div>
+            <div className="subscriptions-early-adopter-content">
+              <p className="subscriptions-early-adopter-title">
+                Limited time discounts on all subscriptions
+              </p>
+              <div className="subscriptions-early-adopter-tiers">
+                {EARLY_ADOPTER_PERIODS.map((period, idx) => {
+                  const now = new Date();
+                  const isActive = now >= period.start && now <= period.end;
+                  const isPast = now > period.end;
+                  return (
+                    <div
+                      // biome-ignore lint/suspicious/noArrayIndexKey: periods are static constants
+                      key={idx}
+                      className={`subscriptions-early-adopter-tier ${isActive ? "active" : ""} ${isPast ? "past" : ""}`}
+                    >
+                      <span className="subscriptions-early-adopter-tier-discount">
+                        {period.discount * 100}% off
+                      </span>
+                      <span className="subscriptions-early-adopter-tier-month">{period.label}</span>
+                    </div>
+                  );
+                })}
+              </div>
+              {earlyAdopterActive && (
+                <p className="subscriptions-early-adopter-status">
+                  <span className="subscriptions-early-adopter-active">Active now</span> -{" "}
+                  {/* biome-ignore lint/style/noNonNullAssertion: earlyAdopterActive guarantees non-null */}
+                  {getCurrentEarlyAdopterDiscount()! * 100}% discount available
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="subscriptions-table-wrapper">
+            <table className="subscriptions-table">
+              <thead>
+                <tr>
+                  <th>Subscription Type</th>
+                  <th>Backer</th>
+                  <th>Partner (3x)</th>
+                  <th>Ally (6x)</th>
+                </tr>
+              </thead>
+              <tbody>
+                {subscriptionTypes.map((sub) => {
+                  const tierPrices = [1, 3, 6].map((multiplier) => {
+                    const monthly = sub.basePrice * multiplier;
+                    return {
+                      monthly,
+                      earlyAdopterPrices: EARLY_ADOPTER_PERIODS.map((p) => ({
+                        price: monthly * (1 - p.discount),
+                        discount: p.discount,
+                        label: p.label,
+                      })),
+                      annual: monthly * 12 * 0.8,
+                    };
+                  });
+                  return (
+                    <tr key={sub.id}>
+                      <td className="subscriptions-table-type">{sub.name}</td>
+                      {tierPrices.map((tp, idx) => (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: tier prices are computed from static multipliers
+                        <td key={idx}>
+                          <div className="subscriptions-table-monthly">
+                            ${tp.monthly.toLocaleString()}/mo
+                          </div>
+                          <div className="subscriptions-table-early-adopter-list">
+                            {tp.earlyAdopterPrices.map((ea, eaIdx) => (
+                              // biome-ignore lint/suspicious/noArrayIndexKey: early adopter prices are static
+                              <div key={eaIdx} className="subscriptions-table-early-adopter-item">
+                                <span className="subscriptions-table-ea-price">
+                                  ${ea.price.toLocaleString()}
+                                </span>
+                                <span className="subscriptions-table-ea-discount">
+                                  -{ea.discount * 100}%
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                          <div className="subscriptions-table-annual">
+                            ${tp.annual.toLocaleString()}/yr
+                          </div>
+                        </td>
+                      ))}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* Shared Roadmap Planning */}
+        <div className="subscriptions-governance">
+          <h2 className="page-heading-large text-center">Shared Roadmap Planning</h2>
+          <p>
+            Ally-tier subscribers gain voting power in our bi-annual roadmap planning sessions,
+            where the OpenScan team and Allies collaborate to shape the future of the platform.
+          </p>
+          <div className="subscriptions-roadmap-features">
+            <div className="subscriptions-roadmap-item">
+              <h4>Feature Prioritization</h4>
+              <p>
+                Vote on which features and improvements get developed next based on community needs.
+              </p>
+            </div>
+            <div className="subscriptions-roadmap-item">
+              <h4>Network Expansion</h4>
+              <p>Help decide which blockchain networks OpenScan should support and integrate.</p>
+            </div>
+            <div className="subscriptions-roadmap-item">
+              <h4>Strategic Direction</h4>
+              <p>
+                Participate in discussions about OpenScan's long-term vision and technical
+                direction.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* How to Subscribe */}
+        <div className="subscriptions-how-to">
+          <h2 className="page-heading-large text-center">How to Subscribe</h2>
+          <div className="subscriptions-steps">
+            <div className="subscriptions-step">
+              <div className="subscriptions-step-number">1</div>
+              <div className="subscriptions-step-content">
+                <h4>Make Payment</h4>
+                <p>
+                  Send your subscription payment to the <strong>openscan-payment</strong> contract
+                  on Ethereum Mainnet.
+                </p>
+              </div>
+            </div>
+            <div className="subscriptions-step">
+              <div className="subscriptions-step-number">2</div>
+              <div className="subscriptions-step-content">
+                <h4>Sign Payment Transaction</h4>
+                <p>
+                  Use OpenScan devtools to sign the tx hash of the payment transaction, save it to
+                  use on the next step to request the start of the subscription.
+                </p>
+              </div>
+            </div>
+            <div className="subscriptions-step">
+              <div className="subscriptions-step-number">3</div>
+              <div className="subscriptions-step-content">
+                <h4>Submit Github Pull Request or Issue</h4>
+                <p>
+                  Create a pull request or issue to the explorer-metadata repository with your
+                  project information and payment transaction hash.
+                </p>
+              </div>
+            </div>
+            <div className="subscriptions-step">
+              <div className="subscriptions-step-number">4</div>
+              <div className="subscriptions-step-content">
+                <h4>Get Verified</h4>
+                <p>
+                  Once your payment is confirmed and your pull request or issue is reviewed, your
+                  subscription benefits will be activated.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Collapsible Help Images */}
+          <div className="subscriptions-help-images">
+            {/* biome-ignore lint/a11y/useButtonType: toggle button */}
+            <button
+              className="subscriptions-help-toggle"
+              onClick={() => setShowHelpImages(!showHelpImages)}
+            >
+              {showHelpImages ? "Hide" : "Show"} Visual Guide
+              <span className="subscriptions-help-toggle-icon">{showHelpImages ? "▲" : "▼"}</span>
+            </button>
+            {showHelpImages && (
+              <div className="subscriptions-help-images-content">
+                <div className="subscriptions-help-image-wrapper">
+                  <h4>
+                    Step 1: Make Payment on{" "}
+                    <a
+                      href={`/1/address/${OPENSCAN_PAYMENT_ADDRESS}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      OpenScanPayment Contract
+                    </a>
+                  </h4>
+                  <img
+                    src={paymentHelp1}
+                    alt="Payment help step 1 - How to make payment to the contract"
+                    className="subscriptions-help-image"
+                  />
+                </div>
+                <div className="subscriptions-help-image-wrapper">
+                  <h4>
+                    Step 2: Sign Transaction Hash on{" "}
+                    <a href="/devtools" target="_blank" rel="noopener noreferrer">
+                      Devtools
+                    </a>
+                  </h4>
+                  <img
+                    src={paymentHelp2}
+                    alt="Payment help step 2 - How to sign the transaction hash"
+                    className="subscriptions-help-image"
+                  />
+                </div>
+                <div className="subscriptions-help-image-wrapper">
+                  <h4>
+                    Step 3: Submit Github Issue on{" "}
+                    <a
+                      href="https://github.com/openscan-explorer/explorer-metadata"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      explorer-metadata
+                    </a>
+                  </h4>
+                  <img
+                    src={paymentHelp3}
+                    alt="Payment help step 3 - How to submit an issue request"
+                    className="subscriptions-help-image"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="subscriptions-cta-buttons">
+            <a href={`/1/address/${OPENSCAN_PAYMENT_ADDRESS}`} className="button-primary-inline">
+              View Payment Contract
+            </a>
+            <a
+              href="https://github.com/openscan-explorer/explorer-metadata"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="button-secondary-inline"
+            >
+              View Metadata Repository
+            </a>
+          </div>
+        </div>
+
+        {/* Footer Note */}
+        <div className="text-center license-footer">
+          <p>
+            All revenue is reinvested solely for the platform's continuous development, growth, and
+            infrastructural improvement.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Subscriptions;
diff --git a/src/components/pages/supporters/index.tsx b/src/components/pages/supporters/index.tsx
new file mode 100644
index 0000000..2e49e75
--- /dev/null
+++ b/src/components/pages/supporters/index.tsx
@@ -0,0 +1,188 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { fetchSupporters, type Supporter } from "../../../services/MetadataService";
+import Loader from "../../common/Loader";
+import TierBadge from "../../common/TierBadge";
+
+const Supporters: React.FC = () => {
+  const [supporters, setSupporters] = useState<Supporter[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchSupporters()
+      .then((data) => {
+        setSupporters(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message || "Failed to fetch supporters");
+        setLoading(false);
+      });
+  }, []);
+
+  // Group supporters by tier
+  const allies = supporters.filter((s) => s.currentTier === 3);
+  const partners = supporters.filter((s) => s.currentTier === 2);
+  const backers = supporters.filter((s) => s.currentTier === 1);
+
+  return (
+    <div className="container-medium page-container-padded">
+      <div className="page-card">
+        <div className="text-center mb-large">
+          <h1 className="page-heading">Openscan Supporters</h1>
+          <p className="page-subtitle">
+            Thanks to everyone who supports Openscan and helps keep it online, free and ad-free!
+          </p>
+        </div>
+
+        {loading && <Loader text="Loading supporters..." />}
+
+        {error && <p className="error-text-center">Error: {error}</p>}
+
+        {!loading && !error && supporters.length === 0 && (
+          <div className="text-center">
+            <p className="supporters-empty">No supporters yet. Be the first to support Openscan!</p>
+            <Link to="/subscriptions" className="button-primary-inline">
+              Become a Supporter
+            </Link>
+          </div>
+        )}
+
+        {!loading && !error && supporters.length > 0 && (
+          <div className="supporters-container">
+            {allies.length > 0 && (
+              <div className="supporters-tier-section">
+                <h2 className="supporters-tier-title">
+                  <span className="tier-icon">🏆</span> Allies
+                </h2>
+                <div className="supporters-grid supporters-grid-allies">
+                  {allies.map((supporter) => (
+                    <SupporterCard key={supporter.id} supporter={supporter} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {partners.length > 0 && (
+              <div className="supporters-tier-section">
+                <h2 className="supporters-tier-title">
+                  <span className="tier-icon">🤝</span> Partners
+                </h2>
+                <div className="supporters-grid supporters-grid-partners">
+                  {partners.map((supporter) => (
+                    <SupporterCard key={supporter.id} supporter={supporter} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {backers.length > 0 && (
+              <div className="supporters-tier-section">
+                <h2 className="supporters-tier-title">
+                  <span className="tier-icon">💪</span> Backers
+                </h2>
+                <div className="supporters-grid supporters-grid-backers">
+                  {backers.map((supporter) => (
+                    <SupporterCard key={supporter.id} supporter={supporter} />
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className="text-center supporters-cta">
+          <p>Want to support OpenScan and get your network featured?</p>
+          <Link to="/subscriptions" className="button-primary-inline">
+            View Subscription Plans
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface SupporterCardProps {
+  supporter: Supporter;
+}
+
+const SupporterCard: React.FC<SupporterCardProps> = ({ supporter }) => {
+  // Link based on supporter type - tokens link to address page, others to profile
+  const getLink = () => {
+    switch (supporter.type) {
+      case "token":
+        // Token id is the token address, link to address page on the network
+        if (supporter.chainId) {
+          return `/${supporter.chainId}/address/${supporter.id}`;
+        }
+        return undefined;
+      case "network":
+        return `/profile/network/${supporter.chainId || supporter.id}`;
+      case "app":
+        return `/profile/app/${supporter.id}`;
+      case "organization":
+        return `/profile/organization/${supporter.id}`;
+      default:
+        return undefined;
+    }
+  };
+
+  const link = getLink();
+  const cardContent = (
+    <div className="supporter-card-content">
+      {supporter.logo ? (
+        <img src={supporter.logo} alt={supporter.name} className="supporter-logo" />
+      ) : (
+        <div
+          className="supporter-logo-placeholder"
+          style={{ "--supporter-color": supporter.color || "#10b981" } as React.CSSProperties}
+        >
+          {supporter.name.charAt(0)}
+        </div>
+      )}
+      <div className="supporter-info">
+        <span className="supporter-name">{supporter.name}</span>
+        <div className="supporter-meta">
+          <TierBadge
+            subscription={{ tier: supporter.currentTier, expiresAt: supporter.expiresAt }}
+            size="small"
+          />
+          <span className="supporter-type">{supporter.type}</span>
+        </div>
+      </div>
+    </div>
+  );
+
+  if (link) {
+    return (
+      <Link
+        to={link}
+        className="supporter-card"
+        style={
+          {
+            "--supporter-color": supporter.color || "rgba(255, 255, 255, 0.1)",
+          } as React.CSSProperties
+        }
+      >
+        {cardContent}
+      </Link>
+    );
+  }
+
+  return (
+    <div
+      className="supporter-card supporter-card-no-link"
+      style={
+        {
+          "--supporter-color": supporter.color || "rgba(255, 255, 255, 0.1)",
+        } as React.CSSProperties
+      }
+    >
+      {cardContent}
+    </div>
+  );
+};
+
+export default Supporters;
diff --git a/src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx b/src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx
new file mode 100644
index 0000000..f85758d
--- /dev/null
+++ b/src/components/pages/tokenDetails/ERC1155TokenDisplay.tsx
@@ -0,0 +1,387 @@
+import type React from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { AppContext } from "../../../context";
+import {
+  type CollectionInfo,
+  type ERC1155TokenMetadata,
+  fetchCollectionInfo,
+  fetchERC1155MetadataWithUri,
+  fetchTokenBalance,
+  getImageUrl,
+} from "../../../utils/erc1155Metadata";
+import Loader from "../../common/Loader";
+
+const ERC1155TokenDetails: React.FC = () => {
+  const {
+    networkId,
+    address: contractAddress,
+    tokenId,
+  } = useParams<{
+    networkId?: string;
+    address?: string;
+    tokenId?: string;
+  }>();
+
+  const { rpcUrls } = useContext(AppContext);
+  const [metadata, setMetadata] = useState<ERC1155TokenMetadata | null>(null);
+  const [collectionInfo, setCollectionInfo] = useState<CollectionInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [tokenUri, setTokenUri] = useState<string | null>(null);
+
+  // Balance lookup state
+  const [balanceAddress, setBalanceAddress] = useState("");
+  const [balance, setBalance] = useState<string | null>(null);
+  const [balanceLoading, setBalanceLoading] = useState(false);
+  const [balanceError, setBalanceError] = useState<string | null>(null);
+
+  const numericNetworkId = Number(networkId) || 1;
+
+  // Get RPC URL
+  const rpcUrlsForChain = rpcUrls[numericNetworkId as keyof typeof rpcUrls];
+  const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+
+  // Fetch token metadata
+  useEffect(() => {
+    if (!contractAddress || !tokenId || !rpcUrl) {
+      setLoading(false);
+      setError("Missing contract address, token ID, or RPC URL");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    Promise.all([
+      fetchERC1155MetadataWithUri(contractAddress, tokenId, rpcUrl),
+      fetchCollectionInfo(contractAddress, rpcUrl),
+    ])
+      .then(([metadataResult, collectionResult]) => {
+        if (metadataResult.metadata) {
+          setMetadata(metadataResult.metadata);
+        } else {
+          setError("Failed to fetch token metadata");
+        }
+        setTokenUri(metadataResult.tokenUri);
+        setCollectionInfo(collectionResult);
+      })
+      .catch((err) => {
+        console.error("Error fetching metadata:", err);
+        setError(err.message || "Failed to fetch token metadata");
+      })
+      .finally(() => setLoading(false));
+  }, [contractAddress, tokenId, rpcUrl]);
+
+  // Handle balance lookup
+  const handleBalanceLookup = useCallback(async () => {
+    if (!balanceAddress || !contractAddress || !tokenId || !rpcUrl) {
+      setBalanceError("Please enter a valid address");
+      return;
+    }
+
+    // Validate address format
+    if (!/^0x[a-fA-F0-9]{40}$/.test(balanceAddress)) {
+      setBalanceError("Invalid address format");
+      return;
+    }
+
+    setBalanceLoading(true);
+    setBalanceError(null);
+    setBalance(null);
+
+    try {
+      const result = await fetchTokenBalance(contractAddress, balanceAddress, tokenId, rpcUrl);
+      if (result !== null) {
+        setBalance(result);
+      } else {
+        setBalanceError("Failed to fetch balance");
+      }
+    } catch (err) {
+      setBalanceError(err instanceof Error ? err.message : "Failed to fetch balance");
+    } finally {
+      setBalanceLoading(false);
+    }
+  }, [balanceAddress, contractAddress, tokenId, rpcUrl]);
+
+  if (loading) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">ERC-1155 Token</span>
+            <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+          </div>
+          <div className="card-content-loading">
+            <Loader text="Loading token metadata..." />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">ERC-1155 Token</span>
+            <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+          </div>
+          <div className="card-content">
+            <p className="text-error margin-0">Error: {error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const imageUrl = metadata ? getImageUrl(metadata) : null;
+  // Token name from metadata, collection name from contract
+  const tokenName = metadata?.name;
+  const collectionName = collectionInfo?.name;
+  const collectionSymbol = collectionInfo?.symbol;
+
+  return (
+    <div className="container-wide">
+      <div className="block-display-card">
+        {/* Header Section */}
+        <div className="block-display-header">
+          <div className="erc1155-header">
+            {/* Token name */}
+            {tokenName && <span className="erc1155-token-name">{tokenName}</span>}
+            {/* Collection name with symbol and Token ID on same line */}
+            <div className="erc1155-header-title">
+              {collectionName && (
+                <Link
+                  to={`/${networkId}/address/${contractAddress}`}
+                  className="nft-collection-link"
+                >
+                  {collectionName}
+                  {collectionSymbol && (
+                    <span className="nft-collection-symbol">({collectionSymbol})</span>
+                  )}
+                </Link>
+              )}
+              <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="erc1155-detail-content">
+          {/* Token Image and Basic Info */}
+          <div className="erc1155-main-section">
+            {imageUrl && (
+              <div className="erc1155-image-container">
+                <img
+                  src={imageUrl}
+                  alt={tokenName || `Token #${tokenId}`}
+                  className="erc1155-token-image"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+              </div>
+            )}
+
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Token Details</span>
+              </div>
+
+              {/* Collection */}
+              {collectionName && (
+                <div className="tx-row">
+                  <span className="tx-label">Collection:</span>
+                  <span className="tx-value">
+                    <Link to={`/${networkId}/address/${contractAddress}`} className="address-link">
+                      {collectionName}
+                      {collectionSymbol && ` (${collectionSymbol})`}
+                    </Link>
+                  </span>
+                </div>
+              )}
+
+              {/* Contract Address */}
+              <div className="tx-row">
+                <span className="tx-label">Contract:</span>
+                <span className="tx-value">
+                  <Link to={`/${networkId}/address/${contractAddress}`} className="address-link">
+                    {contractAddress}
+                  </Link>
+                </span>
+              </div>
+
+              {/* Token ID */}
+              <div className="tx-row">
+                <span className="tx-label">Token ID:</span>
+                <span className="tx-value tx-mono">{tokenId}</span>
+              </div>
+
+              {/* Token Standard */}
+              <div className="tx-row">
+                <span className="tx-label">Token Standard:</span>
+                <span className="tx-value">
+                  <span className="token-standard-badge token-standard-erc1155">ERC-1155</span>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Description Section */}
+          {metadata?.description && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Description</span>
+              </div>
+              <div className="nft-description">{metadata.description}</div>
+            </div>
+          )}
+
+          {/* Properties/Attributes Section */}
+          {metadata?.attributes && metadata.attributes.length > 0 && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Properties</span>
+                <span className="tx-section-count">{metadata.attributes.length}</span>
+              </div>
+              <div className="erc1155-attributes-grid">
+                {metadata.attributes.map((attr, index) => (
+                  <div key={`${attr.trait_type}-${index}`} className="erc1155-attribute-card">
+                    <span className="erc1155-attribute-type">{attr.trait_type}</span>
+                    <span className="erc1155-attribute-value">{String(attr.value)}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Balance Lookup Section */}
+          <div className="tx-details">
+            <div className="tx-section">
+              <span className="tx-section-title">Balance Lookup</span>
+            </div>
+            <div className="erc1155-balance-lookup">
+              <div className="erc1155-balance-input-row">
+                <input
+                  type="text"
+                  placeholder="Enter address (0x...)"
+                  value={balanceAddress}
+                  onChange={(e) => setBalanceAddress(e.target.value)}
+                  className="erc1155-balance-input"
+                />
+                <button
+                  type="button"
+                  onClick={handleBalanceLookup}
+                  disabled={balanceLoading}
+                  className="erc1155-balance-button"
+                >
+                  {balanceLoading ? "Checking..." : "Check Balance"}
+                </button>
+              </div>
+
+              {balanceError && <div className="erc1155-balance-error">{balanceError}</div>}
+
+              {balance !== null && (
+                <div className="erc1155-balance-result">
+                  <span className="erc1155-balance-label">Balance:</span>
+                  <span className="erc1155-balance-value">{balance}</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Links Section */}
+          {(metadata?.external_url || metadata?.animation_url) && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Links</span>
+              </div>
+              <div className="nft-links">
+                {metadata?.external_url && (
+                  <a
+                    href={metadata.external_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button"
+                  >
+                    External URL ↗
+                  </a>
+                )}
+                {metadata?.animation_url && (
+                  <a
+                    href={
+                      metadata.animation_url.startsWith("ipfs://")
+                        ? metadata.animation_url.replace("ipfs://", "https://ipfs.io/ipfs/")
+                        : metadata.animation_url
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button"
+                  >
+                    View Animation ↗
+                  </a>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Token URI Section */}
+          {tokenUri && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Token URI</span>
+              </div>
+              <div className="nft-token-uri">
+                <code className="nft-token-uri-code">{tokenUri}</code>
+                {!tokenUri.startsWith("data:") && (
+                  <a
+                    href={
+                      tokenUri.startsWith("ipfs://")
+                        ? tokenUri.replace("ipfs://", "https://ipfs.io/ipfs/")
+                        : tokenUri
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button nft-token-uri-link"
+                  >
+                    Open URI ↗
+                  </a>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Raw Metadata Section */}
+          {metadata && (
+            <div className="tx-details">
+              <button
+                type="button"
+                className="tx-section btn-toggle-section"
+                onClick={() => {
+                  const elem = document.getElementById("raw-metadata-content");
+                  const icon = document.getElementById("raw-metadata-icon");
+                  if (elem && icon) {
+                    const isHidden = elem.style.display === "none";
+                    elem.style.display = isHidden ? "block" : "none";
+                    icon.textContent = isHidden ? "▼" : "▶";
+                  }
+                }}
+              >
+                <span className="tx-section-title">Raw Metadata</span>
+                <span id="raw-metadata-icon" className="contract-section-toggle">
+                  ▶
+                </span>
+              </button>
+              <div id="raw-metadata-content" className="tx-input-data hidden">
+                <code>{JSON.stringify(metadata, null, 2)}</code>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ERC1155TokenDetails;
diff --git a/src/components/pages/tokenDetails/ERC721TokenDisplay.tsx b/src/components/pages/tokenDetails/ERC721TokenDisplay.tsx
new file mode 100644
index 0000000..54ec229
--- /dev/null
+++ b/src/components/pages/tokenDetails/ERC721TokenDisplay.tsx
@@ -0,0 +1,359 @@
+import type React from "react";
+import { useContext, useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { AppContext } from "../../../context";
+import {
+  type CollectionInfo,
+  type ERC721TokenMetadata,
+  fetchCollectionInfo,
+  fetchERC721MetadataWithUri,
+  fetchTokenApproval,
+  fetchTokenOwner,
+  getImageUrl,
+} from "../../../utils/erc721Metadata";
+import Loader from "../../common/Loader";
+
+const ERC721TokenDisplay: React.FC = () => {
+  const {
+    networkId,
+    address: contractAddress,
+    tokenId,
+  } = useParams<{
+    networkId?: string;
+    address?: string;
+    tokenId?: string;
+  }>();
+
+  const { rpcUrls } = useContext(AppContext);
+  const [metadata, setMetadata] = useState<ERC721TokenMetadata | null>(null);
+  const [collectionInfo, setCollectionInfo] = useState<CollectionInfo | null>(null);
+  const [owner, setOwner] = useState<string | null>(null);
+  const [approval, setApproval] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [tokenUri, setTokenUri] = useState<string | null>(null);
+
+  const numericNetworkId = Number(networkId) || 1;
+
+  // Get RPC URL
+  const rpcUrlsForChain = rpcUrls[numericNetworkId as keyof typeof rpcUrls];
+  const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+
+  // Fetch token metadata and ownership info
+  useEffect(() => {
+    if (!contractAddress || !tokenId || !rpcUrl) {
+      setLoading(false);
+      setError("Missing contract address, token ID, or RPC URL");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    Promise.all([
+      fetchERC721MetadataWithUri(contractAddress, tokenId, rpcUrl),
+      fetchTokenOwner(contractAddress, tokenId, rpcUrl),
+      fetchTokenApproval(contractAddress, tokenId, rpcUrl),
+      fetchCollectionInfo(contractAddress, rpcUrl),
+    ])
+      .then(([metadataResult, ownerResult, approvalResult, collectionResult]) => {
+        if (metadataResult.metadata) {
+          setMetadata(metadataResult.metadata);
+        }
+        setTokenUri(metadataResult.tokenUri);
+        setOwner(ownerResult);
+        setApproval(approvalResult);
+        setCollectionInfo(collectionResult);
+
+        // Only show error if we couldn't get metadata AND owner
+        if (!metadataResult.metadata && !ownerResult) {
+          setError("Token may not exist or failed to fetch data");
+        }
+      })
+      .catch((err) => {
+        console.error("Error fetching token data:", err);
+        setError(err.message || "Failed to fetch token data");
+      })
+      .finally(() => setLoading(false));
+  }, [contractAddress, tokenId, rpcUrl]);
+
+  if (loading) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">ERC-721 NFT</span>
+            <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+          </div>
+          <div className="card-content-loading">
+            <Loader text="Loading NFT metadata..." />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !owner) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">ERC-721 NFT</span>
+            <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+          </div>
+          <div className="card-content">
+            <p className="text-error margin-0">Error: {error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const imageUrl = metadata ? getImageUrl(metadata) : null;
+  // Token name from metadata, collection name from contract
+  const tokenName = metadata?.name;
+  const collectionName = collectionInfo?.name;
+  const collectionSymbol = collectionInfo?.symbol;
+
+  return (
+    <div className="container-wide">
+      <div className="block-display-card">
+        {/* Header Section */}
+        <div className="block-display-header">
+          <div className="erc721-header">
+            {/* Token name */}
+            {tokenName && <span className="erc721-token-name">{tokenName}</span>}
+            {/* Collection name with symbol and Token ID on same line */}
+            <div className="erc721-header-title">
+              {collectionName && (
+                <Link
+                  to={`/${networkId}/address/${contractAddress}`}
+                  className="nft-collection-link"
+                >
+                  {collectionName}
+                  {collectionSymbol && (
+                    <span className="nft-collection-symbol">({collectionSymbol})</span>
+                  )}
+                </Link>
+              )}
+              <span className="tx-mono header-subtitle">Token ID: {tokenId}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="erc721-detail-content">
+          {/* Token Image and Basic Info */}
+          <div className="erc721-main-section">
+            {imageUrl && (
+              <div className="erc721-image-container">
+                <img
+                  src={imageUrl}
+                  alt={tokenName || `NFT #${tokenId}`}
+                  className="erc721-token-image"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+              </div>
+            )}
+
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">NFT Details</span>
+              </div>
+
+              {/* Collection */}
+              {collectionName && (
+                <div className="tx-row">
+                  <span className="tx-label">Collection:</span>
+                  <span className="tx-value">
+                    <Link to={`/${networkId}/address/${contractAddress}`} className="address-link">
+                      {collectionName}
+                      {collectionSymbol && ` (${collectionSymbol})`}
+                    </Link>
+                  </span>
+                </div>
+              )}
+
+              {/* Contract Address */}
+              <div className="tx-row">
+                <span className="tx-label">Contract:</span>
+                <span className="tx-value">
+                  <Link to={`/${networkId}/address/${contractAddress}`} className="address-link">
+                    {contractAddress}
+                  </Link>
+                </span>
+              </div>
+
+              {/* Token ID */}
+              <div className="tx-row">
+                <span className="tx-label">Token ID:</span>
+                <span className="tx-value tx-mono">{tokenId}</span>
+              </div>
+
+              {/* Token Standard */}
+              <div className="tx-row">
+                <span className="tx-label">Token Standard:</span>
+                <span className="tx-value">
+                  <span className="token-standard-badge token-standard-erc721">ERC-721</span>
+                </span>
+              </div>
+
+              {/* Total Supply */}
+              {collectionInfo?.totalSupply && (
+                <div className="tx-row">
+                  <span className="tx-label">Collection Size:</span>
+                  <span className="tx-value">
+                    {Number(collectionInfo.totalSupply).toLocaleString()} NFTs
+                  </span>
+                </div>
+              )}
+
+              {/* Owner */}
+              {owner && (
+                <div className="tx-row">
+                  <span className="tx-label">Owner:</span>
+                  <span className="tx-value">
+                    <Link to={`/${networkId}/address/${owner}`} className="address-link">
+                      {owner}
+                    </Link>
+                  </span>
+                </div>
+              )}
+
+              {/* Approved Address */}
+              {approval && (
+                <div className="tx-row">
+                  <span className="tx-label">Approved:</span>
+                  <span className="tx-value">
+                    <Link to={`/${networkId}/address/${approval}`} className="address-link">
+                      {approval}
+                    </Link>
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Description Section */}
+          {metadata?.description && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Description</span>
+              </div>
+              <div className="nft-description">{metadata.description}</div>
+            </div>
+          )}
+
+          {/* Properties/Attributes Section */}
+          {metadata?.attributes && metadata.attributes.length > 0 && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Properties</span>
+                <span className="tx-section-count">{metadata.attributes.length}</span>
+              </div>
+              <div className="erc721-attributes-grid">
+                {metadata.attributes.map((attr, index) => (
+                  <div key={`${attr.trait_type}-${index}`} className="erc721-attribute-card">
+                    <span className="erc721-attribute-type">{attr.trait_type}</span>
+                    <span className="erc721-attribute-value">{String(attr.value)}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Additional Details */}
+          {(metadata?.external_url || metadata?.animation_url) && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Links</span>
+              </div>
+              <div className="nft-links">
+                {metadata?.external_url && (
+                  <a
+                    href={metadata.external_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button"
+                  >
+                    External URL ↗
+                  </a>
+                )}
+                {metadata?.animation_url && (
+                  <a
+                    href={
+                      metadata.animation_url.startsWith("ipfs://")
+                        ? metadata.animation_url.replace("ipfs://", "https://ipfs.io/ipfs/")
+                        : metadata.animation_url
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button"
+                  >
+                    View Animation ↗
+                  </a>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Token URI Section */}
+          {tokenUri && (
+            <div className="tx-details">
+              <div className="tx-section">
+                <span className="tx-section-title">Token URI</span>
+              </div>
+              <div className="nft-token-uri">
+                <code className="nft-token-uri-code">{tokenUri}</code>
+                {!tokenUri.startsWith("data:") && (
+                  <a
+                    href={
+                      tokenUri.startsWith("ipfs://")
+                        ? tokenUri.replace("ipfs://", "https://ipfs.io/ipfs/")
+                        : tokenUri
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="nft-link-button nft-token-uri-link"
+                  >
+                    Open URI ↗
+                  </a>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Raw Metadata Section */}
+          {metadata && (
+            <div className="tx-details">
+              <button
+                type="button"
+                className="tx-section btn-toggle-section"
+                onClick={() => {
+                  const elem = document.getElementById("raw-metadata-content");
+                  const icon = document.getElementById("raw-metadata-icon");
+                  if (elem && icon) {
+                    const isHidden = elem.style.display === "none";
+                    elem.style.display = isHidden ? "block" : "none";
+                    icon.textContent = isHidden ? "▼" : "▶";
+                  }
+                }}
+              >
+                <span className="tx-section-title">Raw Metadata</span>
+                <span id="raw-metadata-icon" className="contract-section-toggle">
+                  ▶
+                </span>
+              </button>
+              <div id="raw-metadata-content" className="tx-input-data hidden">
+                <code>{JSON.stringify(metadata, null, 2)}</code>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ERC721TokenDisplay;
diff --git a/src/components/pages/tokenDetails/index.tsx b/src/components/pages/tokenDetails/index.tsx
new file mode 100644
index 0000000..70a243a
--- /dev/null
+++ b/src/components/pages/tokenDetails/index.tsx
@@ -0,0 +1,140 @@
+import type React from "react";
+import { useContext, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { AppContext } from "../../../context";
+import Loader from "../../common/Loader";
+import ERC721TokenDetails from "./ERC721TokenDisplay";
+import ERC1155TokenDetails from "./ERC1155TokenDisplay";
+
+type NFTType = "erc721" | "erc1155" | "unknown";
+
+/**
+ * Check if contract supports ERC721 (interface ID: 0x80ac58cd)
+ */
+async function supportsERC721(contractAddress: string, rpcUrl: string): Promise<boolean> {
+  try {
+    // supportsInterface(bytes4) selector: 0x01ffc9a7
+    // ERC721 interface ID: 0x80ac58cd
+    const data = "0x01ffc9a780ac58cd00000000000000000000000000000000000000000000000000000000";
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+    if (result.error || !result.result) return false;
+
+    // Check if result is true (non-zero)
+    return result.result !== "0x" && BigInt(result.result) === BigInt(1);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if contract supports ERC1155 (interface ID: 0xd9b67a26)
+ */
+async function supportsERC1155(contractAddress: string, rpcUrl: string): Promise<boolean> {
+  try {
+    // supportsInterface(bytes4) selector: 0x01ffc9a7
+    // ERC1155 interface ID: 0xd9b67a26
+    const data = "0x01ffc9a7d9b67a2600000000000000000000000000000000000000000000000000000000";
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+    if (result.error || !result.result) return false;
+
+    // Check if result is true (non-zero)
+    return result.result !== "0x" && BigInt(result.result) === BigInt(1);
+  } catch {
+    return false;
+  }
+}
+
+const NFTTokenDetails: React.FC = () => {
+  const { networkId, address: contractAddress } = useParams<{
+    networkId?: string;
+    address?: string;
+    tokenId?: string;
+  }>();
+
+  const { rpcUrls } = useContext(AppContext);
+  const [nftType, setNftType] = useState<NFTType | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const numericNetworkId = Number(networkId) || 1;
+
+  // Get RPC URL
+  const rpcUrlsForChain = rpcUrls[numericNetworkId as keyof typeof rpcUrls];
+  const rpcUrl = Array.isArray(rpcUrlsForChain) ? rpcUrlsForChain[0] : rpcUrlsForChain;
+
+  // Detect NFT type
+  useEffect(() => {
+    if (!contractAddress || !rpcUrl) {
+      setNftType("unknown");
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+
+    Promise.all([supportsERC721(contractAddress, rpcUrl), supportsERC1155(contractAddress, rpcUrl)])
+      .then(([isERC721, isERC1155]) => {
+        if (isERC721) {
+          setNftType("erc721");
+        } else if (isERC1155) {
+          setNftType("erc1155");
+        } else {
+          // Fallback: try ERC721 first (more common for individual token pages)
+          setNftType("erc721");
+        }
+      })
+      .catch(() => {
+        // Default to ERC721 on error
+        setNftType("erc721");
+      })
+      .finally(() => setLoading(false));
+  }, [contractAddress, rpcUrl]);
+
+  if (loading) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">NFT Token</span>
+          </div>
+          <div className="card-content-loading">
+            <Loader text="Detecting token type..." />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Render appropriate component based on detected type
+  if (nftType === "erc1155") {
+    return <ERC1155TokenDetails />;
+  }
+
+  // Default to ERC721
+  return <ERC721TokenDetails />;
+};
+
+export default NFTTokenDetails;
diff --git a/src/components/pages/tx/TransactionDisplay.tsx b/src/components/pages/tx/TransactionDisplay.tsx
new file mode 100644
index 0000000..c00536b
--- /dev/null
+++ b/src/components/pages/tx/TransactionDisplay.tsx
@@ -0,0 +1,812 @@
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import LongString from "../../../components/common/LongString";
+import { RPCIndicator } from "../../../components/common/RPCIndicator";
+import { AppContext } from "../../../context";
+import { useSourcify } from "../../../hooks/useSourcify";
+import type { DataService } from "../../../services/DataService";
+import type { TraceResult } from "../../../services/adapters/NetworkAdapter";
+import type {
+  RPCMetadata,
+  Transaction,
+  TransactionArbitrum,
+  TransactionReceiptArbitrum,
+  TransactionReceiptOptimism,
+} from "../../../types";
+import {
+  type DecodedEvent,
+  decodeEventLog,
+  formatDecodedValue,
+  getEventTypeColor,
+} from "../../../utils/eventDecoder";
+import {
+  type DecodedInput,
+  decodeEventWithAbi,
+  decodeFunctionCall,
+} from "../../../utils/inputDecoder";
+
+interface TransactionDisplayProps {
+  transaction: Transaction | TransactionArbitrum;
+  networkId?: string;
+  currentBlockNumber?: number;
+  dataService?: DataService;
+  metadata?: RPCMetadata;
+  selectedProvider?: string | null;
+  onProviderSelect?: (provider: string) => void;
+}
+
+const TransactionDisplay: React.FC<TransactionDisplayProps> = React.memo(
+  ({
+    transaction,
+    networkId,
+    currentBlockNumber,
+    dataService,
+    metadata,
+    selectedProvider,
+    onProviderSelect,
+  }) => {
+    const [_showRawData, _setShowRawData] = useState(false);
+    const [_showLogs, _setShowLogs] = useState(false);
+    const [showTrace, setShowTrace] = useState(false);
+    const [traceData, setTraceData] = useState<TraceResult | null>(null);
+    // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    const [callTrace, setCallTrace] = useState<any>(null);
+    const [loadingTrace, setLoadingTrace] = useState(false);
+    const [_copiedField, _setCopiedField] = useState<string | null>(null);
+    const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    // Get local artifacts from context
+    const { jsonFiles } = useContext(AppContext);
+
+    // Check if we have local artifact data for the recipient address
+    const localArtifact = transaction.to ? jsonFiles[transaction.to.toLowerCase()] : null;
+
+    // Parse local artifact to sourcify format if it exists
+    const parsedLocalData = useMemo(() => {
+      if (!localArtifact) return null;
+      return {
+        name: localArtifact.contractName,
+        compilerVersion: localArtifact.buildInfo?.solcLongVersion,
+        evmVersion: localArtifact.buildInfo?.input?.settings?.evmVersion,
+        abi: localArtifact.abi,
+        files: localArtifact.sourceCode
+          ? [
+              {
+                name: localArtifact.sourceName || "Contract.sol",
+                path: localArtifact.sourceName || "Contract.sol",
+                content: localArtifact.sourceCode,
+              },
+            ]
+          : undefined,
+        metadata: {
+          language: localArtifact.buildInfo?.input?.language,
+          compiler: localArtifact.buildInfo
+            ? {
+                version: localArtifact.buildInfo.solcVersion,
+              }
+            : undefined,
+        },
+        match: "perfect" as const,
+        creation_match: null,
+        runtime_match: null,
+        networkId: networkId,
+        address: transaction.to,
+        verifiedAt: undefined,
+      };
+    }, [localArtifact, networkId, transaction.to]);
+
+    // Fetch Sourcify data for the recipient contract
+    const { data: sourcifyData, isVerified } = useSourcify(
+      Number(networkId),
+      transaction.to || undefined,
+      true,
+    );
+
+    // Use local artifact data if available and sourcify is not verified, otherwise use sourcify
+    const contractData = useMemo(
+      () => (isVerified && sourcifyData ? sourcifyData : parsedLocalData),
+      [isVerified, sourcifyData, parsedLocalData],
+    );
+
+    // Decode input data if contract data is available
+    const decodedInput: DecodedInput | null = useMemo(() => {
+      if (!contractData?.abi || !transaction.data) return null;
+      return decodeFunctionCall(transaction.data, contractData.abi);
+    }, [contractData?.abi, transaction.data]);
+
+    // Check if trace is available (localhost only)
+    const isTraceAvailable = dataService?.networkAdapter.isTraceAvailable() || false;
+
+    // Load trace data when trace section is expanded
+    useEffect(() => {
+      if (showTrace && isTraceAvailable && dataService && !traceData && !callTrace) {
+        setLoadingTrace(true);
+        Promise.all([
+          dataService.networkAdapter.getTransactionTrace(transaction.hash),
+          dataService.networkAdapter.getCallTrace(transaction.hash),
+        ])
+          .then(([trace, call]) => {
+            setTraceData(trace);
+            setCallTrace(call);
+          })
+          .catch((err) => console.error("Error loading trace:", err))
+          .finally(() => setLoadingTrace(false));
+      }
+    }, [showTrace, isTraceAvailable, dataService, transaction.hash, traceData, callTrace]);
+
+    useEffect(() => {
+      return () => {
+        if (copyTimeoutRef.current) {
+          clearTimeout(copyTimeoutRef.current);
+        }
+      };
+    }, []);
+
+    // Check if this is an Arbitrum transaction
+    const isArbitrumTx = useCallback(
+      (tx: Transaction | TransactionArbitrum): tx is TransactionArbitrum => {
+        return "requestId" in tx;
+      },
+      [],
+    );
+
+    // Check if receipt is Arbitrum receipt
+    // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    const isArbitrumReceipt = useCallback((receipt: any): receipt is TransactionReceiptArbitrum => {
+      return receipt && "l1BlockNumber" in receipt;
+    }, []);
+
+    // Check if receipt is Optimism receipt
+    // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+    const isOptimismReceipt = useCallback((receipt: any): receipt is TransactionReceiptOptimism => {
+      return receipt && "l1Fee" in receipt;
+    }, []);
+
+    const _truncate = useCallback((str: string, start = 6, end = 4) => {
+      if (!str) return "";
+      if (str.length <= start + end) return str;
+      return `${str.slice(0, start)}...${str.slice(-end)}`;
+    }, []);
+
+    const formatValue = useCallback((value: string) => {
+      try {
+        const eth = Number(value) / 1e18;
+        return `${eth.toFixed(6)} ETH`;
+      } catch (_e) {
+        return value;
+      }
+    }, []);
+
+    const formatGwei = useCallback((value: string) => {
+      try {
+        const gwei = Number(value) / 1e9;
+        return `${gwei.toFixed(2)} Gwei`;
+      } catch (_e) {
+        return value;
+      }
+    }, []);
+
+    const parseTimestampToMs = useCallback((timestamp?: string) => {
+      if (!timestamp) return null;
+      const parsed = parseInt(timestamp, timestamp.startsWith("0x") ? 16 : 10);
+      if (Number.isNaN(parsed)) return null;
+      return parsed * 1000;
+    }, []);
+
+    const formatAbsoluteTimestamp = useCallback((timestampMs: number) => {
+      try {
+        return new Intl.DateTimeFormat(undefined, {
+          year: "numeric",
+          month: "short",
+          day: "2-digit",
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+          timeZoneName: "short",
+        }).format(new Date(timestampMs));
+      } catch (_error) {
+        return new Date(timestampMs).toISOString();
+      }
+    }, []);
+
+    const formatTimeAgo = useCallback((timestampMs: number) => {
+      const diffMs = Date.now() - timestampMs;
+      const diffSeconds = Math.floor(Math.abs(diffMs) / 1000);
+      if (diffSeconds < 5) {
+        return diffMs >= 0 ? "just now" : "in a few seconds";
+      }
+
+      const units = [
+        { label: "day", seconds: 60 * 60 * 24 },
+        { label: "hour", seconds: 60 * 60 },
+        { label: "minute", seconds: 60 },
+      ];
+
+      for (const unit of units) {
+        if (diffSeconds >= unit.seconds) {
+          const value = Math.floor(diffSeconds / unit.seconds);
+          const plural = value === 1 ? "" : "s";
+          return diffMs >= 0
+            ? `${value} ${unit.label}${plural} ago`
+            : `in ${value} ${unit.label}${plural}`;
+        }
+      }
+
+      return diffMs >= 0
+        ? `${diffSeconds} second${diffSeconds === 1 ? "" : "s"} ago`
+        : `in ${diffSeconds} second${diffSeconds === 1 ? "" : "s"}`;
+    }, []);
+
+    const timestampMs = useMemo(
+      () => parseTimestampToMs(transaction.timestamp),
+      [parseTimestampToMs, transaction.timestamp],
+    );
+    const formattedTimestamp = useMemo(
+      () => (timestampMs ? formatAbsoluteTimestamp(timestampMs) : null),
+      [timestampMs, formatAbsoluteTimestamp],
+    );
+    const timestampAge = useMemo(
+      () => (timestampMs ? formatTimeAgo(timestampMs) : null),
+      [timestampMs, formatTimeAgo],
+    );
+
+    const getStatusBadge = useCallback((status?: string) => {
+      if (!status) return null;
+      const isSuccess = status === "0x1" || status === "1";
+      return (
+        <span
+          className={`status-badge ${isSuccess ? "status-badge-success" : "status-badge-failed"}`}
+        >
+          {isSuccess ? "Success" : "Failed"}
+        </span>
+      );
+    }, []);
+
+    const confirmations = useMemo(
+      () => (currentBlockNumber ? currentBlockNumber - Number(transaction.blockNumber) : null),
+      [currentBlockNumber, transaction.blockNumber],
+    );
+
+    return (
+      <div className="block-display-card">
+        <div className="block-display-header flex justify-between items-center">
+          <span className="block-label">Transaction Details</span>
+          {metadata && selectedProvider !== undefined && onProviderSelect && (
+            <RPCIndicator
+              metadata={metadata}
+              selectedProvider={selectedProvider}
+              onProviderSelect={onProviderSelect}
+            />
+          )}
+        </div>
+
+        {/* Row-based layout like Etherscan */}
+        <div className="tx-details">
+          {/* Transaction Hash */}
+          <div className="tx-row">
+            <span className="tx-label">Transaction Hash:</span>
+            <span className="tx-value tx-mono">
+              <LongString value={transaction.hash} start={20} end={16} />
+            </span>
+          </div>
+
+          {/* Status */}
+          <div className="tx-row">
+            <span className="tx-label">Status:</span>
+            <span className="tx-value">{getStatusBadge(transaction.receipt?.status)}</span>
+          </div>
+
+          {/* Block */}
+          <div className="tx-row">
+            <span className="tx-label">Block:</span>
+            <span className="tx-value">
+              {networkId ? (
+                <Link to={`/${networkId}/block/${transaction.blockNumber}`} className="link-accent">
+                  {Number(transaction.blockNumber).toLocaleString()}
+                </Link>
+              ) : (
+                Number(transaction.blockNumber).toLocaleString()
+              )}
+              {confirmations !== null && (
+                <span className="tx-confirmations">
+                  {confirmations > 100 ? "+100" : confirmations.toLocaleString()} Block
+                  Confirmations
+                </span>
+              )}
+            </span>
+          </div>
+
+          {/* Timestamp */}
+          {formattedTimestamp && (
+            <div className="tx-row">
+              <span className="tx-label">Timestamp:</span>
+              <span className="tx-value">
+                {timestampAge && <span className="tx-age">{timestampAge}</span>}
+                <span className="tx-timestamp-full">({formattedTimestamp})</span>
+              </span>
+            </div>
+          )}
+
+          {/* From */}
+          <div className="tx-row">
+            <span className="tx-label">From:</span>
+            <span className="tx-value tx-mono">
+              {networkId ? (
+                <Link to={`/${networkId}/address/${transaction.from}`} className="link-accent">
+                  {transaction.from}
+                </Link>
+              ) : (
+                transaction.from
+              )}
+            </span>
+          </div>
+
+          {/* To */}
+          <div className="tx-row">
+            <span className="tx-label">{transaction.to ? "To:" : "Interacted With:"}</span>
+            <span className="tx-value tx-mono">
+              {transaction.to ? (
+                networkId ? (
+                  <Link to={`/${networkId}/address/${transaction.to}`} className="link-accent">
+                    {transaction.to}
+                  </Link>
+                ) : (
+                  transaction.to
+                )
+              ) : (
+                <span className="contract-creation-badge">Contract Creation</span>
+              )}
+            </span>
+          </div>
+
+          {/* Contract Address (if created) */}
+          {transaction.receipt?.contractAddress && (
+            <div className="tx-row">
+              <span className="tx-label">Contract Created:</span>
+              <span className="tx-value tx-mono">
+                {networkId ? (
+                  <Link
+                    to={`/${networkId}/address/${transaction.receipt.contractAddress}`}
+                    className="link-accent"
+                  >
+                    {transaction.receipt.contractAddress}
+                  </Link>
+                ) : (
+                  transaction.receipt.contractAddress
+                )}
+              </span>
+            </div>
+          )}
+
+          {/* Value */}
+          <div className="tx-row">
+            <span className="tx-label">Value:</span>
+            <span className="tx-value tx-value-highlight">{formatValue(transaction.value)}</span>
+          </div>
+
+          {/* Transaction Fee */}
+          <div className="tx-row">
+            <span className="tx-label">Transaction Fee:</span>
+            <span className="tx-value">
+              {transaction.receipt
+                ? formatValue(
+                    (
+                      BigInt(transaction.receipt.gasUsed) *
+                      BigInt(transaction.receipt.effectiveGasPrice)
+                    ).toString(),
+                  )
+                : "Pending"}
+            </span>
+          </div>
+
+          {/* Gas Price */}
+          <div className="tx-row">
+            <span className="tx-label">Gas Price:</span>
+            <span className="tx-value">{formatGwei(transaction.gasPrice)}</span>
+          </div>
+
+          {/* Gas Limit & Usage */}
+          <div className="tx-row">
+            <span className="tx-label">Gas Limit & Usage:</span>
+            <span className="tx-value">
+              {Number(transaction.gas).toLocaleString()}
+              {transaction.receipt && (
+                <>
+                  {" | "}
+                  {Number(transaction.receipt.gasUsed).toLocaleString()}
+                  <span className="tx-gas-pct">
+                    (
+                    {(
+                      (Number(transaction.receipt.gasUsed) / Number(transaction.gas)) *
+                      100
+                    ).toFixed(1)}
+                    %)
+                  </span>
+                </>
+              )}
+            </span>
+          </div>
+
+          {/* Effective Gas Price (if different from gas price) */}
+          {transaction.receipt &&
+            transaction.receipt.effectiveGasPrice !== transaction.gasPrice && (
+              <div className="tx-row">
+                <span className="tx-label">Effective Gas Price:</span>
+                <span className="tx-value">
+                  {formatGwei(transaction.receipt.effectiveGasPrice)}
+                </span>
+              </div>
+            )}
+
+          {/* Arbitrum-specific fields */}
+          {isArbitrumTx(transaction) &&
+            transaction.receipt &&
+            isArbitrumReceipt(transaction.receipt) && (
+              <>
+                <div className="tx-row tx-row-arbitrum">
+                  <span className="tx-label">L1 Block Number:</span>
+                  <span className="tx-value">
+                    {Number(transaction.receipt.l1BlockNumber).toLocaleString()}
+                  </span>
+                </div>
+                <div className="tx-row tx-row-arbitrum">
+                  <span className="tx-label">Gas Used for L1:</span>
+                  <span className="tx-value">
+                    {Number(transaction.receipt.gasUsedForL1).toLocaleString()}
+                  </span>
+                </div>
+              </>
+            )}
+
+          {/* OP Stack fields (Optimism, Base) */}
+          {transaction.receipt && isOptimismReceipt(transaction.receipt) && (
+            <>
+              <div className={`tx-row ${networkId === "8453" ? "tx-row-base" : "tx-row-optimism"}`}>
+                <span className="tx-label">L1 Fee:</span>
+                <span className="tx-value">{formatValue(transaction.receipt.l1Fee)}</span>
+              </div>
+              <div className={`tx-row ${networkId === "8453" ? "tx-row-base" : "tx-row-optimism"}`}>
+                <span className="tx-label">L1 Gas Price:</span>
+                <span className="tx-value">{formatGwei(transaction.receipt.l1GasPrice)}</span>
+              </div>
+              <div className={`tx-row ${networkId === "8453" ? "tx-row-base" : "tx-row-optimism"}`}>
+                <span className="tx-label">L1 Gas Used:</span>
+                <span className="tx-value">
+                  {Number(transaction.receipt.l1GasUsed).toLocaleString()}
+                </span>
+              </div>
+              <div className={`tx-row ${networkId === "8453" ? "tx-row-base" : "tx-row-optimism"}`}>
+                <span className="tx-label">L1 Fee Scalar:</span>
+                <span className="tx-value">{transaction.receipt.l1FeeScalar}</span>
+              </div>
+            </>
+          )}
+
+          {/* Other Attributes (Nonce, Index, Type) */}
+          <div className="tx-row">
+            <span className="tx-label">Other Attributes:</span>
+            <span className="tx-value tx-attrs">
+              <span className="tx-attr">Nonce: {transaction.nonce}</span>
+              <span className="tx-attr">Position: {transaction.transactionIndex}</span>
+              <span className="tx-attr">Type: {transaction.type}</span>
+            </span>
+          </div>
+
+          {/* Input Data */}
+          <div className="tx-row tx-row-vertical">
+            <span className="tx-label">Input Data:</span>
+            {transaction.data && transaction.data !== "0x" ? (
+              <div className="tx-input-data">
+                <code>{transaction.data}</code>
+              </div>
+            ) : (
+              <span className="tx-empty">0x</span>
+            )}
+          </div>
+
+          {/* Decoded Input Data */}
+          {decodedInput && (
+            <div className="tx-row tx-row-vertical">
+              <span className="tx-label">Decoded Input:</span>
+              <div className="tx-decoded-input">
+                <div className="tx-decoded-function">
+                  <span className="tx-function-badge">{decodedInput.functionName}</span>
+                  <span className="tx-function-signature">{decodedInput.signature}</span>
+                </div>
+                {decodedInput.params.length > 0 && (
+                  <div className="tx-decoded-params">
+                    {decodedInput.params.map((param, i) => (
+                      // biome-ignore lint/suspicious/noArrayIndexKey: params have stable order
+                      <div key={i} className="tx-decoded-param">
+                        <span className="tx-param-name">{param.name}</span>
+                        <span className="tx-param-type">({param.type})</span>
+                        <span
+                          className={`tx-param-value ${param.type === "address" ? "tx-mono" : ""}`}
+                        >
+                          {param.type === "address" && networkId ? (
+                            <Link
+                              to={`/${networkId}/address/${param.value}`}
+                              className="link-accent"
+                            >
+                              {param.value}
+                            </Link>
+                          ) : (
+                            formatDecodedValue(param.value, param.type)
+                          )}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Event Logs Section - Always visible */}
+        {transaction.receipt && transaction.receipt.logs.length > 0 && (
+          <div className="tx-section">
+            <div className="tx-section-header">
+              <span className="tx-section-title">
+                Event Logs ({transaction.receipt.logs.length})
+              </span>
+            </div>
+            <div className="tx-logs">
+              {/** biome-ignore lint/suspicious/noExplicitAny: <TODO> */}
+              {transaction.receipt.logs.map((log: any, index: number) => {
+                // Try ABI-based decoding first if log is from tx.to and we have contract data
+                let decoded: DecodedEvent | null = null;
+                let abiDecoded: DecodedInput | null = null;
+
+                const isFromTxRecipient =
+                  transaction.to &&
+                  log.address &&
+                  log.address.toLowerCase() === transaction.to.toLowerCase();
+
+                if (isFromTxRecipient && contractData?.abi && log.topics) {
+                  abiDecoded = decodeEventWithAbi(log.topics, log.data || "0x", contractData.abi);
+                }
+
+                // Fallback to standard event lookup
+                if (!abiDecoded && log.topics) {
+                  decoded = decodeEventLog(log.topics, log.data || "0x");
+                }
+
+                // Determine which decoded data to display
+                const hasDecoded = abiDecoded || decoded;
+                const displayName = abiDecoded?.functionName || decoded?.name;
+                const displaySignature = abiDecoded?.signature || decoded?.fullSignature;
+                const displayParams = abiDecoded?.params || decoded?.params || [];
+
+                return (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <TODO>
+                  <div key={index} className="tx-log">
+                    <div className="tx-log-index">{index}</div>
+                    <div className="tx-log-content">
+                      {/* Decoded Event Header */}
+                      {hasDecoded && (
+                        <div className="tx-log-decoded">
+                          <span
+                            className="tx-event-badge"
+                            style={
+                              {
+                                "--event-color": abiDecoded
+                                  ? "#10b981"
+                                  : getEventTypeColor(decoded?.type || ""),
+                              } as React.CSSProperties
+                            }
+                          >
+                            {displayName}
+                          </span>
+                          <span
+                            className="tx-event-signature"
+                            title={decoded?.description || displaySignature}
+                          >
+                            {displaySignature}
+                          </span>
+                          {abiDecoded && (
+                            <span className="tx-abi-badge" title="Decoded using contract ABI">
+                              ABI
+                            </span>
+                          )}
+                        </div>
+                      )}
+
+                      {/* Address */}
+                      <div className="tx-log-row">
+                        <span className="tx-log-label">Address</span>
+                        <span className="tx-log-value tx-mono">
+                          {networkId ? (
+                            <Link
+                              to={`/${networkId}/address/${log.address}`}
+                              className="link-accent"
+                            >
+                              {log.address}
+                            </Link>
+                          ) : (
+                            log.address
+                          )}
+                        </span>
+                      </div>
+
+                      {/* Decoded Parameters */}
+                      {displayParams.length > 0 && (
+                        <div className="tx-log-row tx-log-params">
+                          <span className="tx-log-label">Decoded</span>
+                          <div className="tx-log-value">
+                            {displayParams.map((param, i) => (
+                              // biome-ignore lint/suspicious/noArrayIndexKey: <TODO>
+                              <div key={i} className="tx-decoded-param">
+                                <span className="tx-param-name">{param.name}</span>
+                                <span className="tx-param-type">({param.type})</span>
+                                <span
+                                  className={`tx-param-value ${param.type === "address" ? "tx-mono" : ""}`}
+                                >
+                                  {param.type === "address" && networkId ? (
+                                    <Link
+                                      to={`/${networkId}/address/${param.value}`}
+                                      className="link-accent"
+                                    >
+                                      {param.value}
+                                    </Link>
+                                  ) : (
+                                    formatDecodedValue(param.value, param.type)
+                                  )}
+                                </span>
+                                {param.indexed && <span className="tx-param-indexed">indexed</span>}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Raw Topics (collapsed if decoded) */}
+                      {log.topics && log.topics.length > 0 && (
+                        <div className="tx-log-row tx-log-topics">
+                          <span className="tx-log-label">
+                            {hasDecoded ? "Raw Topics" : "Topics"}
+                          </span>
+                          <div className="tx-log-value">
+                            {log.topics.map((topic: string, i: number) => (
+                              <div key={topic} className="tx-topic">
+                                <span className="tx-topic-index">[{i}]</span>
+                                <code className="tx-topic-value">{topic}</code>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Raw Data */}
+                      {log.data && log.data !== "0x" && (
+                        <div className="tx-log-row">
+                          <span className="tx-log-label">{hasDecoded ? "Raw Data" : "Data"}</span>
+                          <div className="tx-log-value">
+                            <code className="tx-log-data">{log.data}</code>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Debug Trace Section (Localhost Only) */}
+        {isTraceAvailable && (
+          <div className="collapsible-container">
+            {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+            <button className="collapsible-button-purple" onClick={() => setShowTrace(!showTrace)}>
+              {showTrace ? "Hide" : "Show"} Debug Trace
+            </button>
+
+            {showTrace && (
+              <div className="collapsible-content">
+                {loadingTrace && <div className="trace-loading">Loading trace data...</div>}
+
+                {/* Call Trace */}
+                {callTrace && (
+                  <div className="trace-container">
+                    <div className="trace-title">Call Trace</div>
+                    <div className="trace-details">
+                      <div>
+                        <span className="log-label">Type:</span> {callTrace.type}
+                      </div>
+                      <div>
+                        <span className="log-label">From:</span>{" "}
+                        <LongString value={callTrace.from} start={10} end={8} />
+                      </div>
+                      <div>
+                        <span className="log-label">To:</span>{" "}
+                        <LongString value={callTrace.to} start={10} end={8} />
+                      </div>
+                      <div>
+                        <span className="log-label">Value:</span> {callTrace.value}
+                      </div>
+                      <div>
+                        <span className="log-label">Gas:</span> {callTrace.gas}
+                      </div>
+                      <div>
+                        <span className="log-label">Gas Used:</span> {callTrace.gasUsed}
+                      </div>
+                      {callTrace.error && (
+                        <div className="trace-error">
+                          <span className="log-label">Error:</span> {callTrace.error}
+                        </div>
+                      )}
+                      {callTrace.calls && callTrace.calls.length > 0 && (
+                        <div className="margin-top-10">
+                          <div className="trace-calls-header">
+                            Internal Calls ({callTrace.calls.length}):
+                          </div>
+                          <div className="trace-calls-container">
+                            {JSON.stringify(callTrace.calls, null, 2)}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Opcode Trace */}
+                {traceData && (
+                  <div className="trace-container">
+                    <div className="trace-title">Execution Trace</div>
+                    <div className="trace-details margin-bottom-15">
+                      <div>
+                        <span className="log-label">Total Gas Used:</span> {traceData.gas}
+                      </div>
+                      <div>
+                        <span className="log-label">Failed:</span> {traceData.failed ? "Yes" : "No"}
+                      </div>
+                      <div>
+                        <span className="log-label">Return Value:</span>{" "}
+                        <LongString value={traceData.returnValue || "0x"} start={20} end={20} />
+                      </div>
+                      <div>
+                        <span className="log-label">Opcodes Executed:</span>{" "}
+                        {traceData.structLogs.length}
+                      </div>
+                    </div>
+
+                    <div className="trace-opcode-header">Opcode Execution Log:</div>
+                    <div className="trace-opcode-container">
+                      {traceData.structLogs.slice(0, 100).map((log, index) => (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: <TODO>
+                        <div key={index} className="trace-opcode-step">
+                          <div className="trace-opcode-name">
+                            Step {index}: {log.op}
+                          </div>
+                          <div className="trace-opcode-info">
+                            PC: {log.pc} | Gas: {log.gas} | Cost: {log.gasCost} | Depth: {log.depth}
+                          </div>
+                          {log.stack && log.stack.length > 0 && (
+                            <div className="trace-opcode-stack">
+                              Stack: [{log.stack.slice(0, 3).join(", ")}
+                              {log.stack.length > 3 ? "..." : ""}]
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                      {traceData.structLogs.length > 100 && (
+                        <div className="trace-more-text">
+                          ... showing first 100 of {traceData.structLogs.length} steps
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+TransactionDisplay.displayName = "TransactionDisplay";
+
+export default TransactionDisplay;
diff --git a/src/components/pages/tx/TransactionReceiptDisplay.tsx b/src/components/pages/tx/TransactionReceiptDisplay.tsx
new file mode 100644
index 0000000..890239d
--- /dev/null
+++ b/src/components/pages/tx/TransactionReceiptDisplay.tsx
@@ -0,0 +1,70 @@
+import type React from "react";
+import type { TransactionReceipt } from "../../../types";
+
+interface TransactionReceiptDisplayProps {
+  receipt: TransactionReceipt;
+}
+
+const TransactionReceiptDisplay: React.FC<TransactionReceiptDisplayProps> = ({ receipt }) => {
+  const truncate = (str: string, start = 6, end = 4) => {
+    if (!str) return "";
+    if (str.length <= start + end) return str;
+    return `${str.slice(0, start)}...${str.slice(-end)}`;
+  };
+
+  const getStatusText = (status: string) => {
+    return status === "1" || status === "0x1" ? "Success" : "Failed";
+  };
+
+  return (
+    <div className="block-display-card">
+      <div className="block-display-header">
+        <span className="block-label">Receipt:</span>
+        <span className="block-number">{truncate(receipt.transactionHash, 8, 6)}</span>
+      </div>
+
+      <div className="block-display-grid">
+        <div className="block-detail-item">
+          <span className="detail-label">Status</span>
+          <span className="detail-value">{getStatusText(receipt.status)}</span>
+        </div>
+
+        <div className="block-detail-item">
+          <span className="detail-label">Block Number</span>
+          <span className="detail-value">{receipt.blockNumber}</span>
+        </div>
+
+        <div className="block-detail-item">
+          <span className="detail-label">From</span>
+          <span className="detail-value" title={receipt.from}>
+            {truncate(receipt.from)}
+          </span>
+        </div>
+
+        <div className="block-detail-item">
+          <span className="detail-label">To</span>
+          <span className="detail-value" title={receipt.to}>
+            {truncate(receipt.to)}
+          </span>
+        </div>
+
+        <div className="block-detail-item">
+          <span className="detail-label">Gas Used</span>
+          <span className="detail-value">{Number(receipt.gasUsed).toLocaleString()}</span>
+        </div>
+
+        <div className="block-detail-item">
+          <span className="detail-label">Cumulative Gas Used</span>
+          <span className="detail-value">{Number(receipt.cumulativeGasUsed).toLocaleString()}</span>
+        </div>
+
+        <div className="block-detail-item">
+          <span className="detail-label">Contract Address</span>
+          <span className="detail-value">{receipt.contractAddress || "N/A"}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TransactionReceiptDisplay;
diff --git a/src/components/pages/tx/index.tsx b/src/components/pages/tx/index.tsx
new file mode 100644
index 0000000..8e1b94d
--- /dev/null
+++ b/src/components/pages/tx/index.tsx
@@ -0,0 +1,118 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useDataService } from "../../../hooks/useDataService";
+import { useProviderSelection } from "../../../hooks/useProviderSelection";
+import { useSelectedData } from "../../../hooks/useSelectedData";
+import type { DataWithMetadata, Transaction } from "../../../types";
+import Loader from "../../common/Loader";
+import TransactionDisplay from "./TransactionDisplay";
+
+export default function Tx() {
+  const { networkId, filter } = useParams<{
+    networkId?: string;
+    filter?: string;
+  }>();
+
+  const txHash = filter;
+  const numericNetworkId = Number(networkId) || 1;
+
+  const dataService = useDataService(numericNetworkId);
+  const [transactionResult, setTransactionResult] = useState<DataWithMetadata<Transaction> | null>(
+    null,
+  );
+  const [currentBlockNumber, setCurrentBlockNumber] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Provider selection state
+  const [selectedProvider, setSelectedProvider] = useProviderSelection(
+    `tx_${numericNetworkId}_${txHash}`,
+  );
+
+  // Extract actual transaction data based on selected provider
+  const transaction = useSelectedData(transactionResult, selectedProvider);
+
+  useEffect(() => {
+    if (!dataService || !txHash) {
+      setLoading(false);
+      return;
+    }
+
+    console.log("Fetching transaction:", txHash, "for chain:", numericNetworkId);
+    setLoading(true);
+    setError(null);
+
+    Promise.all([
+      dataService.networkAdapter.getTransaction(txHash),
+      dataService.networkAdapter.getLatestBlockNumber(),
+    ])
+      .then(([result, latestBlock]) => {
+        console.log("Fetched transaction:", result);
+        console.log("Latest block number:", latestBlock);
+        setTransactionResult(result);
+        setCurrentBlockNumber(latestBlock);
+      })
+      .catch((err) => {
+        console.error("Error fetching transaction:", err);
+        setError(err.message || "Failed to fetch transaction");
+      })
+      .finally(() => setLoading(false));
+  }, [dataService, txHash, numericNetworkId]);
+
+  if (loading) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">Transaction</span>
+            <span className="tx-mono header-subtitle">{txHash}</span>
+          </div>
+          <div className="card-content-loading">
+            <Loader text="Loading transaction..." />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container-wide">
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">Transaction</span>
+            <span className="tx-mono header-subtitle">{txHash}</span>
+          </div>
+          <div className="card-content">
+            <p className="error-text margin-0">Error: {error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container-wide">
+      {transaction ? (
+        <TransactionDisplay
+          transaction={transaction}
+          networkId={networkId}
+          currentBlockNumber={currentBlockNumber || undefined}
+          dataService={dataService}
+          metadata={transactionResult?.metadata}
+          selectedProvider={selectedProvider}
+          onProviderSelect={setSelectedProvider}
+        />
+      ) : (
+        <div className="block-display-card">
+          <div className="block-display-header">
+            <span className="block-label">Transaction</span>
+          </div>
+          <div className="card-content">
+            <p className="text-muted margin-0">Transaction not found</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/pages/txs/index.tsx b/src/components/pages/txs/index.tsx
new file mode 100644
index 0000000..6a35a0f
--- /dev/null
+++ b/src/components/pages/txs/index.tsx
@@ -0,0 +1,264 @@
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useDataService } from "../../../hooks/useDataService";
+import type { Transaction } from "../../../types";
+import Loader from "../../common/Loader";
+
+const BLOCKS_PER_PAGE = 10;
+
+export default function Txs() {
+  const { networkId } = useParams<{ networkId?: string }>();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const numericNetworkId = Number(networkId) || 1;
+  const dataService = useDataService(numericNetworkId);
+  const [transactions, setTransactions] = useState<Array<Transaction & { blockNumber: string }>>(
+    [],
+  );
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [latestBlockNumber, setLatestBlockNumber] = useState<number | null>(null);
+  const [blockRange, setBlockRange] = useState<{
+    from: number;
+    to: number;
+  } | null>(null);
+
+  // Get fromBlock from URL params, default to null (latest)
+  const fromBlockParam = searchParams.get("fromBlock");
+  const fromBlock = fromBlockParam ? Number(fromBlockParam) : null;
+
+  useEffect(() => {
+    if (!dataService) {
+      setLoading(false);
+      return;
+    }
+
+    const fetchTransactions = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        // Get the latest block number first
+        const latestBlock = await dataService.networkAdapter.getLatestBlockNumber();
+        setLatestBlockNumber(latestBlock);
+
+        // Determine starting block
+        const startBlock = fromBlock !== null ? fromBlock : latestBlock;
+
+        // Calculate block range
+        const endBlock = Math.max(startBlock - BLOCKS_PER_PAGE + 1, 0);
+        setBlockRange({ from: endBlock, to: startBlock });
+
+        // Fetch transactions from block range
+        const fetchedTransactions = await dataService.networkAdapter.getTransactionsFromBlockRange(
+          startBlock,
+          BLOCKS_PER_PAGE,
+        );
+
+        console.log("Fetched transactions:", fetchedTransactions);
+        setTransactions(fetchedTransactions);
+        // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      } catch (err: any) {
+        console.error("Error fetching transactions:", err);
+        setError(err.message || "Failed to fetch transactions");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTransactions();
+  }, [dataService, fromBlock]);
+
+  const truncate = (str: string, start = 10, end = 8) => {
+    if (!str) return "";
+    if (str.length <= start + end) return str;
+    return `${str.slice(0, start)}...${str.slice(-end)}`;
+  };
+
+  const formatValue = (value: string) => {
+    try {
+      const eth = Number(value) / 1e18;
+      return `${eth.toFixed(6)} ETH`;
+    } catch (_e) {
+      return value;
+    }
+  };
+
+  const formatGasPrice = (gasPrice: string) => {
+    try {
+      const gwei = Number(gasPrice) / 1e9;
+      return `${gwei.toFixed(2)} Gwei`;
+    } catch (_e) {
+      return gasPrice;
+    }
+  };
+
+  // Navigation handlers
+  const goToNewerBlocks = () => {
+    if (!blockRange || latestBlockNumber === null) return;
+    const newFromBlock = Math.min(blockRange.to + BLOCKS_PER_PAGE, latestBlockNumber);
+
+    if (newFromBlock >= latestBlockNumber) {
+      // Go to latest (remove fromBlock param)
+      navigate(`/${networkId}/txs`);
+    } else {
+      navigate(`/${networkId}/txs?fromBlock=${newFromBlock}`);
+    }
+  };
+
+  const goToOlderBlocks = () => {
+    if (!blockRange) return;
+    const newFromBlock = blockRange.from - 1;
+
+    if (newFromBlock >= 0) {
+      navigate(`/${networkId}/txs?fromBlock=${newFromBlock}`);
+    }
+  };
+
+  const goToLatest = () => {
+    navigate(`/${networkId}/txs`);
+  };
+
+  // Determine if we can navigate
+  const canGoNewer =
+    fromBlock !== null && latestBlockNumber !== null && fromBlock < latestBlockNumber;
+  const canGoOlder = blockRange !== null && blockRange.from > 0;
+  const isAtLatest =
+    fromBlock === null || (latestBlockNumber !== null && fromBlock >= latestBlockNumber);
+
+  if (loading) {
+    return (
+      <div className="container-wide page-container-padded text-center page-card">
+        <h1 className="page-title-small">Latest Transactions</h1>
+        <Loader text="Loading transactions..." />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container-wide page-container-padded text-center page-card">
+        <h1 className="page-title-small">Latest Transactions</h1>
+        <p className="error-text">Error: {error}</p>
+      </div>
+    );
+  }
+
+  const Pagination = () => {
+    // Pagination
+    return (
+      <div className="pagination-container no-margin-top">
+        {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+        <button
+          onClick={goToLatest}
+          disabled={isAtLatest}
+          className="pagination-btn"
+          title="Go to latest transactions"
+        >
+          Latest
+        </button>
+        {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+        <button
+          onClick={goToNewerBlocks}
+          disabled={!canGoNewer}
+          className="pagination-btn"
+          title="View newer transactions"
+        >
+          ← Newer
+        </button>
+        {/** biome-ignore lint/a11y/useButtonType: <TODO> */}
+        <button
+          onClick={goToOlderBlocks}
+          disabled={!canGoOlder}
+          className="pagination-btn"
+          title="View older transactions"
+        >
+          Older →
+        </button>
+      </div>
+    );
+  };
+
+  return (
+    <div className="container-wide page-container-padded text-center page-card">
+      <h1 className="page-title-small">Latest Transactions</h1>
+      <p className="page-subtitle-text no-margin-bottom">
+        {isAtLatest
+          ? `Showing ${transactions.length} transactions from the last ${BLOCKS_PER_PAGE} blocks`
+          : blockRange
+            ? `Showing ${transactions.length} transactions from blocks ${blockRange.from.toLocaleString()} - ${blockRange.to.toLocaleString()}`
+            : `Showing ${transactions.length} transactions`}
+      </p>
+
+      <Pagination />
+
+      {transactions.length === 0 ? (
+        <p className="table-cell-muted">No transactions found in the selected block range</p>
+      ) : (
+        <div className="table-wrapper">
+          <table className="dash-table">
+            <thead>
+              <tr>
+                <th>Tx Hash</th>
+                <th>Block</th>
+                <th>From</th>
+                <th>To</th>
+                <th>Value</th>
+                <th>Gas Price</th>
+                <th>Gas</th>
+              </tr>
+            </thead>
+            <tbody>
+              {transactions.map((transaction) => (
+                <tr key={transaction.hash}>
+                  <td>
+                    <Link
+                      to={`/${networkId}/tx/${transaction.hash}`}
+                      className="table-cell-hash"
+                      title={transaction.hash}
+                    >
+                      {truncate(transaction.hash)}
+                    </Link>
+                  </td>
+                  <td>
+                    <Link
+                      to={`/${networkId}/block/${transaction.blockNumber}`}
+                      className="table-cell-value"
+                    >
+                      {transaction.blockNumber}
+                    </Link>
+                  </td>
+                  <td className="table-cell-mono" title={transaction.from}>
+                    <Link
+                      to={`/${networkId}/address/${transaction.from}`}
+                      className="table-cell-address"
+                    >
+                      {truncate(transaction.from)}
+                    </Link>
+                  </td>
+                  <td className="table-cell-mono" title={transaction.to}>
+                    {transaction.to ? (
+                      <Link
+                        to={`/${networkId}/address/${transaction.to}`}
+                        className="table-cell-address"
+                      >
+                        {truncate(transaction.to)}
+                      </Link>
+                    ) : (
+                      <span className="table-cell-italic">Contract Creation</span>
+                    )}
+                  </td>
+                  <td className="table-cell-value">{formatValue(transaction.value)}</td>
+                  <td className="table-cell-muted">{formatGasPrice(transaction.gasPrice)}</td>
+                  <td className="table-cell-muted">{Number(transaction.gas).toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <Pagination />
+    </div>
+  );
+}
diff --git a/src/config/config.json b/src/config/config.json
index 4ca6bc8..8174c7a 100644
--- a/src/config/config.json
+++ b/src/config/config.json
@@ -1,49 +1,49 @@
 {
-	"networks": [
-		{
-			"chainId": 1,
-			"name": "Mainnet",
-			"currency": "ETH"
-		},
-		{
-			"chainId": 11155111,
-			"name": "Sepolia",
-			"currency": "ETH"
-		},
-		{
-			"chainId": 42161,
-			"name": "Arbitrum One",
-			"currency": "ETH"
-		},
-		{
-			"chainId": 10,
-			"name": "Optimism",
-			"currency": "ETH"
-		},
-		{
-			"chainId": 8453,
-			"name": "Base",
-			"currency": "ETH"
-		},
-		{
-			"chainId": 56,
-			"name": "BSC",
-			"currency": "BNB"
-		},
-		{
-			"chainId": 97,
-			"name": "BSC Testnet",
-			"currency": "tBNB"
-		},
-		{
-			"chainId": 137,
-			"name": "Polygon",
-			"currency": "POL"
-		},
-		{
-			"chainId": 31337,
-			"name": "Localhost",
-			"currency": "ETH"
-		}
-	]
+  "networks": [
+    {
+      "chainId": 1,
+      "name": "Mainnet",
+      "currency": "ETH"
+    },
+    {
+      "chainId": 11155111,
+      "name": "Sepolia",
+      "currency": "ETH"
+    },
+    {
+      "chainId": 42161,
+      "name": "Arbitrum One",
+      "currency": "ETH"
+    },
+    {
+      "chainId": 10,
+      "name": "Optimism",
+      "currency": "ETH"
+    },
+    {
+      "chainId": 8453,
+      "name": "Base",
+      "currency": "ETH"
+    },
+    {
+      "chainId": 56,
+      "name": "BSC",
+      "currency": "BNB"
+    },
+    {
+      "chainId": 97,
+      "name": "BSC Testnet",
+      "currency": "tBNB"
+    },
+    {
+      "chainId": 137,
+      "name": "Polygon",
+      "currency": "POL"
+    },
+    {
+      "chainId": 31337,
+      "name": "Localhost",
+      "currency": "ETH"
+    }
+  ]
 }
diff --git a/src/config/events.json b/src/config/events.json
index 91d2562..6edb742 100644
--- a/src/config/events.json
+++ b/src/config/events.json
@@ -1,124 +1,124 @@
 {
-	"0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef": {
-		"event": "Transfer(address,address,uint256)",
-		"type": "erc",
-		"description": "ERC-20 / ERC-721 / ERC-1155 token transfer."
-	},
-	"0x8c5be1e5ebec7d5bd14f714f211d1fdf2f9d4b67e8936cfd6c3b6c0e16b3b4f2": {
-		"event": "Approval(address,address,uint256)",
-		"type": "erc",
-		"description": "ERC-20 approval to spend tokens."
-	},
-	"0x17307eab39ab6107e8899845ad3d59bd5caad93f77e3f70ca1a1f7a1e1d6a2ae": {
-		"event": "ApprovalForAll(address,address,bool)",
-		"type": "erc",
-		"description": "ERC-721/1155 approval for marketplaces or operators."
-	},
+  "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef": {
+    "event": "Transfer(address,address,uint256)",
+    "type": "erc",
+    "description": "ERC-20 / ERC-721 / ERC-1155 token transfer."
+  },
+  "0x8c5be1e5ebec7d5bd14f714f211d1fdf2f9d4b67e8936cfd6c3b6c0e16b3b4f2": {
+    "event": "Approval(address,address,uint256)",
+    "type": "erc",
+    "description": "ERC-20 approval to spend tokens."
+  },
+  "0x17307eab39ab6107e8899845ad3d59bd5caad93f77e3f70ca1a1f7a1e1d6a2ae": {
+    "event": "ApprovalForAll(address,address,bool)",
+    "type": "erc",
+    "description": "ERC-721/1155 approval for marketplaces or operators."
+  },
 
-	"0xd78ad95fa46c994b6551d0da85fc275fe613560b7d5a7f08f9d9f9f8f7f3f3f9": {
-		"event": "Swap(address,uint256,uint256,uint256,uint256,address)",
-		"type": "dex_v2",
-		"description": "Uniswap V2 swap between token0 and token1."
-	},
-	"0x783cca1c0412dd0d695e784568c76e539bbd5d50a35e62382c1f7e6d4a6e3c8c": {
-		"event": "Mint(address,uint256,uint256)",
-		"type": "dex_v2",
-		"description": "Uniswap V2 LP tokens minted (liquidity added)."
-	},
-	"0x0c396cd989aecc4b9b7f46a3665a2b9e898b85bbff1dd6ec8abca0f1f3e0f5f1": {
-		"event": "Burn(address,uint256,uint256,address)",
-		"type": "dex_v2",
-		"description": "Uniswap V2 LP tokens burned (liquidity removed)."
-	},
-	"0x1c411e9a96e071241c2f2b1b2c0d0a93d7d593af7e2c1d1bbf2c7e0d8d7f5d2f": {
-		"event": "Sync(uint112,uint112)",
-		"type": "dex_v2",
-		"description": "Uniswap V2 reserves updated."
-	},
+  "0xd78ad95fa46c994b6551d0da85fc275fe613560b7d5a7f08f9d9f9f8f7f3f3f9": {
+    "event": "Swap(address,uint256,uint256,uint256,uint256,address)",
+    "type": "dex_v2",
+    "description": "Uniswap V2 swap between token0 and token1."
+  },
+  "0x783cca1c0412dd0d695e784568c76e539bbd5d50a35e62382c1f7e6d4a6e3c8c": {
+    "event": "Mint(address,uint256,uint256)",
+    "type": "dex_v2",
+    "description": "Uniswap V2 LP tokens minted (liquidity added)."
+  },
+  "0x0c396cd989aecc4b9b7f46a3665a2b9e898b85bbff1dd6ec8abca0f1f3e0f5f1": {
+    "event": "Burn(address,uint256,uint256,address)",
+    "type": "dex_v2",
+    "description": "Uniswap V2 LP tokens burned (liquidity removed)."
+  },
+  "0x1c411e9a96e071241c2f2b1b2c0d0a93d7d593af7e2c1d1bbf2c7e0d8d7f5d2f": {
+    "event": "Sync(uint112,uint112)",
+    "type": "dex_v2",
+    "description": "Uniswap V2 reserves updated."
+  },
 
-	"0xc4109843e0eec84a56b1eaa1b3e20f5cfcaf70f9137bac9cd0ed912055e29463": {
-		"event": "Swap(address,address,int256,int256,uint160,uint128,int24)",
-		"type": "dex_v3",
-		"description": "Uniswap V3 swap event inside a concentrated position."
-	},
-	"0x7a53096c25c826f3ddf3418b9a64f0b504e8f8221cc4fddaa68d2d44c7755f17": {
-		"event": "Mint(address,int24,int24,uint128,uint256,uint256)",
-		"type": "dex_v3",
-		"description": "Uniswap V3 liquidity added to a tick range."
-	},
-	"0x0fbf0b979284fae0eaa90bf4cf5cf2d80a3c63239c5bbf7a9d490c8c7cc1a3f8": {
-		"event": "Burn(address,int24,int24,uint128,uint256,uint256)",
-		"type": "dex_v3",
-		"description": "Uniswap V3 liquidity removed from a tick range."
-	},
-	"0x4fd2bba771d7b5f90f9f55143a4d6acdfb5a12dd0b201cd1e386bc3f8e0529ce": {
-		"event": "Collect(address,address,int24,int24,uint128,uint256,uint256)",
-		"type": "dex_v3",
-		"description": "Uniswap V3 fees collected."
-	},
+  "0xc4109843e0eec84a56b1eaa1b3e20f5cfcaf70f9137bac9cd0ed912055e29463": {
+    "event": "Swap(address,address,int256,int256,uint160,uint128,int24)",
+    "type": "dex_v3",
+    "description": "Uniswap V3 swap event inside a concentrated position."
+  },
+  "0x7a53096c25c826f3ddf3418b9a64f0b504e8f8221cc4fddaa68d2d44c7755f17": {
+    "event": "Mint(address,int24,int24,uint128,uint256,uint256)",
+    "type": "dex_v3",
+    "description": "Uniswap V3 liquidity added to a tick range."
+  },
+  "0x0fbf0b979284fae0eaa90bf4cf5cf2d80a3c63239c5bbf7a9d490c8c7cc1a3f8": {
+    "event": "Burn(address,int24,int24,uint128,uint256,uint256)",
+    "type": "dex_v3",
+    "description": "Uniswap V3 liquidity removed from a tick range."
+  },
+  "0x4fd2bba771d7b5f90f9f55143a4d6acdfb5a12dd0b201cd1e386bc3f8e0529ce": {
+    "event": "Collect(address,address,int24,int24,uint128,uint256,uint256)",
+    "type": "dex_v3",
+    "description": "Uniswap V3 fees collected."
+  },
 
-	"0xe1fffcc4923d6e1059071a65c65d6c7dfb015bbaa2e855d3bc373f3efb3cf7c7": {
-		"event": "Deposit(address,address,uint256,uint256)",
-		"type": "vault",
-		"description": "ERC-4626 deposit into yield vault."
-	},
-	"0x9dc29facdfd23f85aa8c2fda8db36805b97d2519d8c12c325a4e7d182d4c3fbf": {
-		"event": "Withdraw(address,address,uint256,uint256)",
-		"type": "vault",
-		"description": "ERC-4626 withdrawal from yield vault."
-	},
+  "0xe1fffcc4923d6e1059071a65c65d6c7dfb015bbaa2e855d3bc373f3efb3cf7c7": {
+    "event": "Deposit(address,address,uint256,uint256)",
+    "type": "vault",
+    "description": "ERC-4626 deposit into yield vault."
+  },
+  "0x9dc29facdfd23f85aa8c2fda8db36805b97d2519d8c12c325a4e7d182d4c3fbf": {
+    "event": "Withdraw(address,address,uint256,uint256)",
+    "type": "vault",
+    "description": "ERC-4626 withdrawal from yield vault."
+  },
 
-	"0x8c5be1e5ebec7d5bd14f714f211d1fdf2f9d4b67e8936cfd6c3b6c0e16b3b4f2-lend": {
-		"event": "Deposit(address,address,uint256,uint16)",
-		"type": "lending",
-		"description": "Aave deposit event (v2/v3 variants)."
-	},
-	"0xc0ba7bbccb3ef5df76e8c1d112d1e1f345962f8d833b0dff78eaefdd8f2fa52c": {
-		"event": "Borrow(address,uint256,uint256,uint16)",
-		"type": "lending",
-		"description": "Aave borrow event."
-	},
-	"0xe9f0c8f49fe32f010d585d7fe54cb6975b7b6d504f3e6d6cf6f6e7c10e6e3d16": {
-		"event": "Repay(address,address,uint256)",
-		"type": "lending",
-		"description": "Aave repayment event."
-	},
-	"0xe48d41e67d97e50cbe1e3e32da583b60a06d2f8ab0d70cfb6d063906d8f8f4b9": {
-		"event": "LiquidationCall(address,address,address,uint256,uint256)",
-		"type": "lending",
-		"description": "Aave liquidation event."
-	},
+  "0x8c5be1e5ebec7d5bd14f714f211d1fdf2f9d4b67e8936cfd6c3b6c0e16b3b4f2-lend": {
+    "event": "Deposit(address,address,uint256,uint16)",
+    "type": "lending",
+    "description": "Aave deposit event (v2/v3 variants)."
+  },
+  "0xc0ba7bbccb3ef5df76e8c1d112d1e1f345962f8d833b0dff78eaefdd8f2fa52c": {
+    "event": "Borrow(address,uint256,uint256,uint16)",
+    "type": "lending",
+    "description": "Aave borrow event."
+  },
+  "0xe9f0c8f49fe32f010d585d7fe54cb6975b7b6d504f3e6d6cf6f6e7c10e6e3d16": {
+    "event": "Repay(address,address,uint256)",
+    "type": "lending",
+    "description": "Aave repayment event."
+  },
+  "0xe48d41e67d97e50cbe1e3e32da583b60a06d2f8ab0d70cfb6d063906d8f8f4b9": {
+    "event": "LiquidationCall(address,address,address,uint256,uint256)",
+    "type": "lending",
+    "description": "Aave liquidation event."
+  },
 
-	"0x2f4adfe744ebc7dfe07bf678f3f98ab9bca525df98659b75aa20f59f9e1a3f1c": {
-		"event": "MessagePassed(bytes32,address,address,uint256,bytes)",
-		"type": "l2_bridge",
-		"description": "Optimism / Base L2 message bridge event."
-	},
-	"0x6d53f44cb2f881e90df2f72ccb3164068aee2b5e09e2d1d854c5b8f67bdc6f16": {
-		"event": "SentMessage(address,address,bytes,uint256,uint256)",
-		"type": "l2_bridge",
-		"description": "Optimism L1 → L2 message relay event."
-	},
+  "0x2f4adfe744ebc7dfe07bf678f3f98ab9bca525df98659b75aa20f59f9e1a3f1c": {
+    "event": "MessagePassed(bytes32,address,address,uint256,bytes)",
+    "type": "l2_bridge",
+    "description": "Optimism / Base L2 message bridge event."
+  },
+  "0x6d53f44cb2f881e90df2f72ccb3164068aee2b5e09e2d1d854c5b8f67bdc6f16": {
+    "event": "SentMessage(address,address,bytes,uint256,uint256)",
+    "type": "l2_bridge",
+    "description": "Optimism L1 → L2 message relay event."
+  },
 
-	"0x9a1fc3d7ad15303ef1bd1e2e7c318e44b81e5a2122b1657bf78490a3a0421d7a": {
-		"event": "OrderFulfilled(bytes32,address,address,(address,uint256)[],(address,uint256)[])",
-		"type": "nft_market",
-		"description": "OpenSea Seaport order execution."
-	},
+  "0x9a1fc3d7ad15303ef1bd1e2e7c318e44b81e5a2122b1657bf78490a3a0421d7a": {
+    "event": "OrderFulfilled(bytes32,address,address,(address,uint256)[],(address,uint256)[])",
+    "type": "nft_market",
+    "description": "OpenSea Seaport order execution."
+  },
 
-	"0x8be0079c531659141344cd1fd0a4f28419497f9722f07e2e23c7d4d22d91c3a5": {
-		"event": "OwnershipTransferred(address,address)",
-		"type": "admin",
-		"description": "OpenZeppelin ownership updated."
-	},
-	"0x2f8788117e7af2f4c44cc979f409775888b8597f5b8bfeb3c5c50411c276d0b3": {
-		"event": "RoleGranted(bytes32,address,address)",
-		"type": "admin",
-		"description": "AccessControl role granted."
-	},
-	"0x1f3a5b13e0de318da36fb1a0e0b6bbefd66007f5258fa40a7c4fa2f2b1760c50": {
-		"event": "RoleRevoked(bytes32,address,address)",
-		"type": "admin",
-		"description": "AccessControl role revoked."
-	}
+  "0x8be0079c531659141344cd1fd0a4f28419497f9722f07e2e23c7d4d22d91c3a5": {
+    "event": "OwnershipTransferred(address,address)",
+    "type": "admin",
+    "description": "OpenZeppelin ownership updated."
+  },
+  "0x2f8788117e7af2f4c44cc979f409775888b8597f5b8bfeb3c5c50411c276d0b3": {
+    "event": "RoleGranted(bytes32,address,address)",
+    "type": "admin",
+    "description": "AccessControl role granted."
+  },
+  "0x1f3a5b13e0de318da36fb1a0e0b6bbefd66007f5258fa40a7c4fa2f2b1760c50": {
+    "event": "RoleRevoked(bytes32,address,address)",
+    "type": "admin",
+    "description": "AccessControl role revoked."
+  }
 }
diff --git a/src/config/index.ts b/src/config/index.ts
index 1de01d1..70007c9 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,69 +1,71 @@
-import jsonConfig from "./config.json";
-import {
-	mainnet,
-	polygon,
-	optimism,
-	arbitrum,
-	base,
-	sepolia,
-	hardhat,
-} from "wagmi/chains";
 import type { Chain } from "wagmi/chains";
+import { arbitrum, base, hardhat, mainnet, optimism, polygon, sepolia } from "wagmi/chains";
+import jsonConfig from "./config.json";
+
+// Contract addresses
+export const OPENSCAN_PAYMENT_ADDRESS = "0xd5bd7a2d6e13d351e157e2a0396dac810d6af390";
 
 export interface Network {
-	chainId: number;
-	name: string;
-	currency: string;
+  networkId: number;
+  name: string;
+  currency: string;
 }
 
 export interface Config {
-	networks: Network[];
+  networks: Network[];
 }
 
 /**
  * Get the configuration with the contracts and networks
  */
 export function getConfig(): Config {
-	return jsonConfig;
+  // Map chainId from config.json to networkId internally
+  return {
+    networks: jsonConfig.networks.map((n) => ({
+      networkId: n.chainId,
+      name: n.name,
+      currency: n.currency,
+    })),
+  };
 }
 
 /**
- * Get network configuration by chain ID
- * @param chainId - Chain ID
+ * Get network configuration by network ID
+ * @param networkId - Network ID
  * @returns Network configuration or null if not found
  */
-export function getNetworkConfig(chainId: number): Network | null {
-	const config = getConfig();
-	return config.networks.find((n) => n.chainId === chainId) || null;
+export function getNetworkConfig(networkId: number): Network | null {
+  const config = getConfig();
+  return config.networks.find((n) => n.networkId === networkId) || null;
 }
 
 /**
  * Get all supported networks
  * @returns Array of all supported networks
  */
-export function getAllNetworks(): Network[] {
-	const config = getConfig();
-	return config.networks;
+export function getAllNetworksFromConfig(): Network[] {
+  const config = getConfig();
+  return config.networks;
 }
 
 /**
  * Get supported wagmi chains based on the configuration
- * Maps chain IDs from config to wagmi chain objects
+ * Maps network IDs from config to wagmi chain objects
  * @returns Array of wagmi Chain objects
  */
 export function getSupportedChains(): Chain[] {
-	const config = getConfig();
-	const chainMap: Record<number, Chain> = {
-		1: mainnet,
-		137: polygon,
-		10: optimism,
-		42161: arbitrum,
-		8453: base,
-		11155111: sepolia,
-		31337: hardhat,
-	};
+  const config = getConfig();
+  const chainMap: Record<number, Chain> = {
+    1: mainnet,
+    137: polygon,
+    10: optimism,
+    42161: arbitrum,
+    8453: base,
+    11155111: sepolia,
+    31337: hardhat,
+  };
 
-	return config.networks
-		.map((network) => chainMap[network.chainId])
-		.filter((chain): chain is Chain => chain !== undefined);
+  return config.networks
+    .map((network) => chainMap[network.networkId])
+    .filter((chain): chain is Chain => chain !== undefined);
 }
diff --git a/src/config/networks.json b/src/config/networks.json
new file mode 100644
index 0000000..60eaec2
--- /dev/null
+++ b/src/config/networks.json
@@ -0,0 +1,303 @@
+{
+  "updatedAt": "2025-12-11T12:01:22.402Z",
+  "count": 9,
+  "networks": [
+    {
+      "chainId": 1,
+      "name": "Ethereum Mainnet",
+      "shortName": "Ethereum",
+      "description": "The main Ethereum network - the original smart contract platform",
+      "currency": "ETH",
+      "color": "#627EEA",
+      "isTestnet": false,
+      "subscription": {
+        "tier": 1,
+        "expiresAt": "2099-12-31"
+      },
+      "logo": "assets/networks/1.svg",
+      "profile": "profiles/networks/1.md",
+      "rpc": {
+        "public": [
+          "https://eth.llamarpc.com",
+          "https://rpc.ankr.com/eth",
+          "https://ethereum.publicnode.com"
+        ]
+      },
+      "links": [
+        {
+          "name": "Website",
+          "url": "https://ethereum.org",
+          "description": "Official Ethereum website"
+        },
+        {
+          "name": "Docs",
+          "url": "https://ethereum.org/developers",
+          "description": "Developer documentation"
+        },
+        {
+          "name": "GitHub",
+          "url": "https://github.com/ethereum",
+          "description": "Ethereum GitHub organization"
+        }
+      ]
+    },
+    {
+      "chainId": 8453,
+      "name": "Base",
+      "shortName": "Base",
+      "description": "Ethereum Layer 2 built on the OP Stack by Coinbase",
+      "currency": "ETH",
+      "color": "#0052FF",
+      "isTestnet": false,
+      "logo": "assets/networks/8453.svg",
+      "rpc": {
+        "public": [
+          "https://mainnet.base.org",
+          "https://base.publicnode.com",
+          "https://rpc.ankr.com/base"
+        ]
+      },
+      "links": [
+        {
+          "name": "Website",
+          "url": "https://base.org",
+          "description": "Official Base website"
+        },
+        {
+          "name": "Bridge",
+          "url": "https://bridge.base.org",
+          "description": "Bridge assets to Base"
+        },
+        {
+          "name": "Docs",
+          "url": "https://docs.base.org",
+          "description": "Developer documentation"
+        }
+      ]
+    },
+    {
+      "chainId": 42161,
+      "name": "Arbitrum One",
+      "shortName": "Arbitrum",
+      "description": "Ethereum Layer 2 scaling solution using optimistic rollups",
+      "currency": "ETH",
+      "color": "#28A0F0",
+      "isTestnet": false,
+      "logo": "assets/networks/42161.svg",
+      "rpc": {
+        "public": [
+          "https://arb1.arbitrum.io/rpc",
+          "https://rpc.ankr.com/arbitrum",
+          "https://arbitrum.publicnode.com"
+        ]
+      },
+      "links": [
+        {
+          "name": "Website",
+          "url": "https://arbitrum.io",
+          "description": "Official Arbitrum website"
+        },
+        {
+          "name": "Bridge",
+          "url": "https://bridge.arbitrum.io",
+          "description": "Official Arbitrum bridge"
+        },
+        {
+          "name": "Docs",
+          "url": "https://docs.arbitrum.io",
+          "description": "Developer documentation"
+        },
+        {
+          "name": "GitHub",
+          "url": "https://github.com/OffchainLabs",
+          "description": "Offchain Labs GitHub"
+        }
+      ]
+    },
+    {
+      "chainId": 10,
+      "name": "Optimism",
+      "shortName": "Optimism",
+      "description": "Ethereum Layer 2 scaling solution using optimistic rollups",
+      "currency": "ETH",
+      "color": "#FF0420",
+      "isTestnet": false,
+      "logo": "assets/networks/10.svg",
+      "rpc": {
+        "public": [
+          "https://mainnet.optimism.io",
+          "https://optimism.publicnode.com",
+          "https://rpc.ankr.com/optimism"
+        ]
+      },
+      "links": [
+        {
+          "name": "Website",
+          "url": "https://optimism.io",
+          "description": "Official Optimism website"
+        },
+        {
+          "name": "Bridge",
+          "url": "https://app.optimism.io/bridge",
+          "description": "Bridge assets to Optimism"
+        },
+        {
+          "name": "Docs",
+          "url": "https://docs.optimism.io",
+          "description": "Developer documentation"
+        }
+      ]
+    },
+    {
+      "chainId": 56,
+      "name": "BNB Smart Chain",
+      "shortName": "BSC",
+      "description": "EVM-compatible blockchain by Binance",
+      "currency": "BNB",
+      "color": "#F0B90B",
+      "isTestnet": false,
+      "logo": "assets/networks/56.svg",
+      "rpc": {
+        "public": [
+          "https://bsc-dataseed.binance.org",
+          "https://bsc.publicnode.com",
+          "https://rpc.ankr.com/bsc"
+        ]
+      },
+      "links": [
+        {
+          "name": "Website",
+          "url": "https://www.bnbchain.org",
+          "description": "Official BNB Chain website"
+        },
+        {
+          "name": "Bridge",
+          "url": "https://www.bnbchain.org/bridge",
+          "description": "Bridge assets"
+        },
+        {
+          "name": "Docs",
+          "url": "https://docs.bnbchain.org",
+          "description": "Developer documentation"
+        }
+      ]
+    },
+    {
+      "chainId": 137,
+      "name": "Polygon",
+      "shortName": "Polygon",
+      "description": "Ethereum sidechain with fast and low-cost transactions",
+      "currency": "POL",
+      "color": "#8247E5",
+      "isTestnet": false,
+      "logo": "assets/networks/137.svg",
+      "rpc": {
+        "public": [
+          "https://polygon-rpc.com",
+          "https://polygon-bor.publicnode.com",
+          "https://rpc.ankr.com/polygon"
+        ]
+      },
+      "links": [
+        {
+          "name": "Website",
+          "url": "https://polygon.technology",
+          "description": "Official Polygon website"
+        },
+        {
+          "name": "Bridge",
+          "url": "https://portal.polygon.technology/bridge",
+          "description": "Bridge assets to Polygon"
+        },
+        {
+          "name": "Docs",
+          "url": "https://docs.polygon.technology",
+          "description": "Developer documentation"
+        }
+      ]
+    },
+    {
+      "chainId": 11155111,
+      "name": "Ethereum Sepolia",
+      "shortName": "Sepolia",
+      "description": "Ethereum testnet for developers",
+      "currency": "ETH",
+      "color": "#CFB5F0",
+      "isTestnet": true,
+      "logo": "assets/networks/11155111.svg",
+      "rpc": {
+        "public": [
+          "https://rpc.sepolia.org",
+          "https://ethereum-sepolia.publicnode.com",
+          "https://rpc.ankr.com/eth_sepolia"
+        ]
+      },
+      "links": [
+        {
+          "name": "Faucet",
+          "url": "https://sepoliafaucet.com",
+          "description": "Get testnet ETH"
+        },
+        {
+          "name": "Docs",
+          "url": "https://ethereum.org/developers",
+          "description": "Ethereum developer docs"
+        }
+      ]
+    },
+    {
+      "chainId": 97,
+      "name": "BNB Smart Chain Testnet",
+      "shortName": "BSC Testnet",
+      "description": "BNB Smart Chain testnet for developers",
+      "currency": "tBNB",
+      "color": "#F0B90B",
+      "isTestnet": true,
+      "logo": "assets/networks/97.svg",
+      "rpc": {
+        "public": [
+          "https://data-seed-prebsc-1-s1.binance.org:8545",
+          "https://bsc-testnet.publicnode.com",
+          "https://rpc.ankr.com/bsc_testnet_chapel"
+        ]
+      },
+      "links": [
+        {
+          "name": "Faucet",
+          "url": "https://testnet.bnbchain.org/faucet-smart",
+          "description": "Get testnet BNB"
+        },
+        {
+          "name": "Docs",
+          "url": "https://docs.bnbchain.org",
+          "description": "Developer documentation"
+        }
+      ]
+    },
+    {
+      "chainId": 31337,
+      "name": "Localhost",
+      "shortName": "Localhost",
+      "description": "Local development network (Hardhat, Anvil)",
+      "currency": "ETH",
+      "color": "#4A5568",
+      "isTestnet": true,
+      "logo": "assets/networks/31337.svg",
+      "rpc": {
+        "public": ["http://127.0.0.1:8545"]
+      },
+      "links": [
+        {
+          "name": "Hardhat",
+          "url": "https://hardhat.org",
+          "description": "Hardhat documentation"
+        },
+        {
+          "name": "Foundry",
+          "url": "https://book.getfoundry.sh",
+          "description": "Foundry documentation"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/config/networks.ts b/src/config/networks.ts
index 526869c..b00cbb3 100644
--- a/src/config/networks.ts
+++ b/src/config/networks.ts
@@ -1,179 +1,184 @@
 /**
  * Network configuration for OpenScan
- * Controls which networks are displayed based on REACT_APP_OPENSCAN_NETWORKS env variable
+ * Networks are loaded from a local JSON file
  */
 
-export interface NetworkConfig {
-	chainId: number;
-	name: string;
-	shortName: string;
-	description: string;
-	color: string;
-	currency: string;
-	isTestnet: boolean;
-	logoType:
-		| "ethereum"
-		| "bsc"
-		| "polygon"
-		| "arbitrum"
-		| "optimism"
-		| "base"
-		| "hardhat";
+import { getNetworkLogoUrl } from "../services/MetadataService";
+import type { NetworkConfig } from "../types";
+import networksData from "./networks.json";
+
+export type { NetworkConfig };
+
+interface NetworkMetadata {
+  chainId: number;
+  name: string;
+  shortName: string;
+  description?: string;
+  currency: string;
+  color?: string;
+  isTestnet?: boolean;
+  subscription?: {
+    tier: 1 | 2 | 3;
+    expiresAt: string;
+  };
+  logo?: string;
+  profile?: string;
+  explorer?: {
+    subdomain?: string;
+    features?: string[];
+    priority?: number;
+  };
+  rpc?: {
+    public: string[];
+  };
+  links?: Array<{
+    name: string;
+    url: string;
+    description?: string;
+  }>;
+}
+
+/**
+ * Convert metadata network to NetworkConfig
+ * Maps chainId from metadata to networkId internally
+ */
+function metadataToNetworkConfig(network: NetworkMetadata): NetworkConfig {
+  return {
+    networkId: network.chainId,
+    name: network.name,
+    shortName: network.shortName,
+    description: network.description,
+    color: network.color,
+    currency: network.currency,
+    isTestnet: network.isTestnet,
+    subscription: network.subscription,
+    logo: network.logo,
+    profile: network.profile,
+    explorer: network.explorer,
+    rpc: network.rpc,
+    links: network.links,
+  };
+}
+
+// Load networks from local JSON file
+const loadedNetworks: NetworkConfig[] = (networksData.networks as NetworkMetadata[]).map(
+  metadataToNetworkConfig,
+);
+const networksUpdatedAt: string = networksData.updatedAt;
+
+console.log(
+  `Loaded ${loadedNetworks.length} networks from local config (updated: ${networksUpdatedAt})`,
+);
+
+/**
+ * Load networks - now synchronous since data is bundled
+ * Kept async for backwards compatibility
+ */
+export async function loadNetworks(): Promise<NetworkConfig[]> {
+  return loadedNetworks;
 }
 
-// All available networks
-export const ALL_NETWORKS: NetworkConfig[] = [
-	{
-		chainId: 1,
-		name: "Ethereum Mainnet",
-		shortName: "Ethereum",
-		description: "The main Ethereum network",
-		color: "#627EEA",
-		currency: "ETH",
-		isTestnet: false,
-		logoType: "ethereum",
-	},
-	{
-		chainId: 42161,
-		name: "Arbitrum One",
-		shortName: "Arbitrum",
-		description: "Ethereum Layer 2 scaling solution",
-		color: "#28A0F0",
-		currency: "ETH",
-		isTestnet: false,
-		logoType: "arbitrum",
-	},
-	{
-		chainId: 10,
-		name: "Optimism",
-		shortName: "Optimism",
-		description: "Ethereum Layer 2 with low fees",
-		color: "#FF0420",
-		currency: "ETH",
-		isTestnet: false,
-		logoType: "optimism",
-	},
-	{
-		chainId: 8453,
-		name: "Base",
-		shortName: "Base",
-		description: "Coinbase's Ethereum Layer 2",
-		color: "#0052FF",
-		currency: "ETH",
-		isTestnet: false,
-		logoType: "base",
-	},
-	{
-		chainId: 56,
-		name: "BSC",
-		shortName: "BSC",
-		description: "Binance Smart Chain mainnet",
-		color: "#F0B90B",
-		currency: "BNB",
-		isTestnet: false,
-		logoType: "bsc",
-	},
-	{
-		chainId: 137,
-		name: "Polygon",
-		shortName: "Polygon",
-		description: "Polygon POS mainnet",
-		color: "#8247E5",
-		currency: "POL",
-		isTestnet: false,
-		logoType: "polygon",
-	},
-	{
-		chainId: 31337,
-		name: "Localhost",
-		shortName: "Localhost",
-		description: "Local development network",
-		color: "#FFF100",
-		currency: "ETH",
-		isTestnet: true,
-		logoType: "hardhat",
-	},
-	{
-		chainId: 97,
-		name: "BSC Testnet",
-		shortName: "BSC Testnet",
-		description: "Binance Smart Chain testnet",
-		color: "#F0B90B",
-		currency: "tBNB",
-		isTestnet: true,
-		logoType: "bsc",
-	},
-	{
-		chainId: 11155111,
-		name: "Sepolia Testnet",
-		shortName: "Sepolia",
-		description: "Ethereum test network for development",
-		color: "#F0CDC2",
-		currency: "ETH",
-		isTestnet: true,
-		logoType: "ethereum",
-	},
-];
+/**
+ * Get all networks (sync version)
+ */
+export function getAllNetworks(): NetworkConfig[] {
+  return loadedNetworks;
+}
 
 /**
  * Get the list of enabled networks based on environment variable
- * REACT_APP_OPENSCAN_NETWORKS can be a comma-separated list of chain IDs
+ * REACT_APP_OPENSCAN_NETWORKS can be a comma-separated list of network IDs
  * If not set, all networks are enabled
  */
 export function getEnabledNetworks(): NetworkConfig[] {
-	const envNetworks = process.env.REACT_APP_OPENSCAN_NETWORKS;
-
-	console.log("REACT_APP_OPENSCAN_NETWORKS:", envNetworks);
-
-	if (!envNetworks || envNetworks.trim() === "") {
-		// Return all networks if env var not set
-		console.log("No networks env var set, returning all networks");
-		return ALL_NETWORKS;
-	}
-
-	// Parse comma-separated chain IDs
-	const enabledChainIds = envNetworks
-		.split(",")
-		.map((id) => parseInt(id.trim(), 10))
-		.filter((id) => !isNaN(id));
-
-	console.log("Enabled chain IDs:", enabledChainIds);
-
-	if (enabledChainIds.length === 0) {
-		return ALL_NETWORKS;
-	}
-
-	// Filter networks by enabled chain IDs, maintaining order from env var
-	const enabledNetworks: NetworkConfig[] = [];
-	for (const chainId of enabledChainIds) {
-		const network = ALL_NETWORKS.find((n) => n.chainId === chainId);
-		if (network) {
-			enabledNetworks.push(network);
-		}
-	}
-
-	return enabledNetworks.length > 0 ? enabledNetworks : ALL_NETWORKS;
+  const allNetworks = getAllNetworks();
+  const envNetworks = process.env.REACT_APP_OPENSCAN_NETWORKS;
+  const localhostNetworkId = 31337;
+
+  // REACT_APP_ENVIRONMENT is set by webpack DefinePlugin based on NODE_ENV
+  const isDevelopment = process.env.REACT_APP_ENVIRONMENT === "development";
+
+  // Check if localhost is explicitly enabled in REACT_APP_OPENSCAN_NETWORKS
+  const isLocalhostExplicitlyEnabled = envNetworks
+    ?.split(",")
+    .map((id) => parseInt(id.trim(), 10))
+    .includes(localhostNetworkId);
+
+  // Filter out localhost in production/staging (only show in development or if explicitly enabled)
+  const filterLocalhost = (networks: NetworkConfig[]) => {
+    if (isDevelopment || isLocalhostExplicitlyEnabled) {
+      return networks;
+    }
+    return networks.filter((n) => n.networkId !== localhostNetworkId);
+  };
+
+  if (!envNetworks || envNetworks.trim() === "") {
+    return filterLocalhost(allNetworks);
+  }
+
+  // Parse comma-separated network IDs
+  const enabledNetworkIds = envNetworks
+    .split(",")
+    .map((id) => parseInt(id.trim(), 10))
+    .filter((id) => !Number.isNaN(id));
+
+  if (enabledNetworkIds.length === 0) {
+    return filterLocalhost(allNetworks);
+  }
+
+  // Filter networks by enabled network IDs, maintaining order from env var
+  const enabledNetworks: NetworkConfig[] = [];
+  for (const networkId of enabledNetworkIds) {
+    const network = allNetworks.find((n) => n.networkId === networkId);
+    if (network) {
+      enabledNetworks.push(network);
+    }
+  }
+
+  return filterLocalhost(enabledNetworks.length > 0 ? enabledNetworks : allNetworks);
+}
+
+/**
+ * Get enabled network IDs as an array
+ */
+export function getEnabledNetworkIds(): number[] {
+  return getEnabledNetworks().map((n) => n.networkId);
+}
+
+/**
+ * Check if a network ID is enabled
+ */
+export function isNetworkEnabled(networkId: number): boolean {
+  return getEnabledNetworkIds().includes(networkId);
+}
+
+/**
+ * Get network config by network ID
+ */
+export function getNetworkById(networkId: number): NetworkConfig | undefined {
+  return getAllNetworks().find((n) => n.networkId === networkId);
 }
 
 /**
- * Get enabled chain IDs as an array
+ * Get the full URL for a network logo
  */
-export function getEnabledChainIds(): number[] {
-	return getEnabledNetworks().map((n) => n.chainId);
+export function getNetworkLogoUrlById(networkId: number): string | undefined {
+  const network = getNetworkById(networkId);
+  if (!network?.logo) return undefined;
+  return getNetworkLogoUrl(network.logo);
 }
 
 /**
- * Check if a chain ID is enabled
+ * Get the timestamp when networks were last updated
  */
-export function isChainEnabled(chainId: number): boolean {
-	return getEnabledChainIds().includes(chainId);
+export function getNetworksUpdatedAt(): string | null {
+  return networksUpdatedAt;
 }
 
 /**
- * Get network config by chain ID
+ * Reload networks - now a no-op since data is bundled
+ * Kept for backwards compatibility
  */
-export function getNetworkByChainId(
-	chainId: number,
-): NetworkConfig | undefined {
-	return ALL_NETWORKS.find((n) => n.chainId === chainId);
+export async function reloadNetworks(): Promise<NetworkConfig[]> {
+  return loadedNetworks;
 }
diff --git a/src/config/rpcConfig.ts b/src/config/rpcConfig.ts
index 6d1385d..8530aa8 100644
--- a/src/config/rpcConfig.ts
+++ b/src/config/rpcConfig.ts
@@ -1,19 +1,16 @@
 // src/config/rpcConfig.ts
-import { RpcUrlsContextType } from "../types";
+import type { RpcUrlsContextType } from "../types";
 
 /**
- * Get RPC URLs for a given chain ID (returns array for fallback support)
- * @param chainId - The chain ID to get RPC URLs for
+ * Get RPC URLs for a given network ID (returns array for fallback support)
+ * @param networkId - The network ID to get RPC URLs for
  * @param rpcUrlsMap - Optional RPC URLs map from context/storage. Falls back to RPC_ENDPOINTS if not provided
  */
-export function getRPCUrls(
-	chainId: number,
-	rpcUrlsMap: RpcUrlsContextType,
-): string[] {
-	const effectiveMap = rpcUrlsMap;
-	const urls = effectiveMap[chainId as keyof RpcUrlsContextType];
-	if (!urls || urls.length === 0) {
-		throw new Error(`No RPC endpoint configured for chain ID ${chainId}`);
-	}
-	return urls;
+export function getRPCUrls(networkId: number, rpcUrlsMap: RpcUrlsContextType): string[] {
+  const effectiveMap = rpcUrlsMap;
+  const urls = effectiveMap[networkId as keyof RpcUrlsContextType];
+  if (!urls || urls.length === 0) {
+    throw new Error(`No RPC endpoint configured for network ID ${networkId}`);
+  }
+  return urls;
 }
diff --git a/src/config/subdomains.ts b/src/config/subdomains.ts
new file mode 100644
index 0000000..e2c6694
--- /dev/null
+++ b/src/config/subdomains.ts
@@ -0,0 +1,53 @@
+// Subdomain routing configuration
+// Maps subdomains to redirect paths within the app
+
+export interface SubdomainConfig {
+  /** The subdomain to match (e.g., "ethereum" matches ethereum.localhost or ethereum.openscan.io) */
+  subdomain: string;
+  /** The path to redirect to within the app */
+  redirect: string;
+  /** Whether this subdomain routing is enabled */
+  enabled: boolean;
+}
+
+// Weenus test token address on Sepolia
+const WEENUS_SEPOLIA_ADDRESS = "0x7E0987E5b3a30e3f2828572Bb659A548460a3003";
+
+// Check if we're in development mode
+const isDevelopment = process.env.REACT_APP_ENVIRONMENT === "development";
+
+export const subdomainConfig: SubdomainConfig[] = [
+  // Network subdomains
+  { subdomain: "ethereum", redirect: "/1", enabled: true },
+  { subdomain: "localhost", redirect: "/31337", enabled: isDevelopment },
+
+  // Profile subdomains
+  { subdomain: "openscan-app", redirect: "/profile/app/openscan", enabled: true },
+  { subdomain: "openscan-org", redirect: "/profile/organization/openscan", enabled: true },
+
+  // Token subdomains
+  { subdomain: "weenus", redirect: `/11155111/address/${WEENUS_SEPOLIA_ADDRESS}`, enabled: true },
+];
+
+/**
+ * Get subdomain config by subdomain name
+ */
+export function getSubdomainConfig(subdomain: string): SubdomainConfig | undefined {
+  return subdomainConfig.find((config) => config.subdomain === subdomain && config.enabled);
+}
+
+/**
+ * Get subdomain config by redirect path
+ * Used to find if a path has an associated subdomain
+ */
+export function getSubdomainByRedirect(redirectPath: string): SubdomainConfig | undefined {
+  return subdomainConfig.find((config) => config.redirect === redirectPath && config.enabled);
+}
+
+/**
+ * Get subdomain config for a network ID
+ * Returns the subdomain if the network has one configured
+ */
+export function getSubdomainForNetwork(networkId: number): SubdomainConfig | undefined {
+  return subdomainConfig.find((config) => config.redirect === `/${networkId}` && config.enabled);
+}
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
index 3a8fe84..68a2e11 100644
--- a/src/context/AppContext.tsx
+++ b/src/context/AppContext.tsx
@@ -1,135 +1,248 @@
-import { createContext, useState, ReactNode, useEffect } from "react";
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { useAccount } from "wagmi";
+import {
+  getAllNetworks,
+  getEnabledNetworks,
+  getNetworkById,
+  loadNetworks,
+} from "../config/networks";
 import { useWagmiConnection } from "../hooks/useWagmiConnection";
-import { IAppContext, RpcUrlsContextType } from "../types";
+import type { IAppContext, NetworkConfig, RpcUrlsContextType } from "../types";
+import { loadJsonFilesFromStorage, saveJsonFilesToStorage } from "../utils/artifactsStorage";
 import { getEffectiveRpcUrls, saveRpcUrlsToStorage } from "../utils/rpcStorage";
-import {
-	loadJsonFilesFromStorage,
-	saveJsonFilesToStorage,
-} from "../utils/artifactsStorage";
 
 // Alias exported for use across the app where a shorter/consistent name is preferred
 export type tRpcUrlsContextType = RpcUrlsContextType;
 
 export const AppContext = createContext<IAppContext>({
-	appReady: false,
-	resourcesLoaded: false,
-	isHydrated: false,
-	rpcUrls: getEffectiveRpcUrls(),
-	setRpcUrls: () => {},
-	jsonFiles: loadJsonFilesFromStorage(),
-	setJsonFiles: () => {},
+  appReady: false,
+  resourcesLoaded: false,
+  isHydrated: false,
+  rpcUrls: {},
+  setRpcUrls: () => {},
+  jsonFiles: loadJsonFilesFromStorage(),
+  setJsonFiles: () => {},
+  // Network defaults
+  networks: [],
+  enabledNetworks: [],
+  networksLoading: true,
+  networksError: null,
+  getNetwork: () => undefined,
+  reloadNetworks: async () => {},
 });
 
 export const AppContextProvider = ({ children }: { children: ReactNode }) => {
-	const [appReady, setAppReady] = useState<boolean>(false);
-	const [resourcesLoaded, setResourcesLoaded] = useState<boolean>(false);
-	const [isHydrated, setIsHydrated] = useState<boolean>(false);
-	const [rpcUrls, setRpcUrlsState] = useState<RpcUrlsContextType>(() =>
-		getEffectiveRpcUrls(),
-	);
-	const [jsonFiles, setJsonFilesState] = useState<Record<string, any>>(() =>
-		loadJsonFilesFromStorage(),
-	);
-
-	const setRpcUrls = (next: RpcUrlsContextType) => {
-		setRpcUrlsState(next);
-		try {
-			saveRpcUrlsToStorage(next as Record<number, string[]>);
-		} catch (err) {
-			console.warn("Failed to persist rpc urls", err);
-		}
-	};
-
-	const setJsonFiles = (next: Record<string, any>) => {
-		setJsonFilesState(next);
-		try {
-			saveJsonFilesToStorage(next);
-		} catch (err) {
-			console.warn("Failed to persist json files", err);
-		}
-	};
-
-	const account = useAccount();
-	const { isFullyConnected, address } = useWagmiConnection();
-
-	// Mark as hydrated when component mounts (React has taken control)
-	useEffect(() => {
-		setIsHydrated(true);
-	}, []);
-
-	useEffect(() => {
-		const checkResourcesLoaded = () => {
-			// Check if all critical resources are loaded
-			const images = Array.from(document.images);
-			const stylesheets = Array.from(
-				document.querySelectorAll('link[rel="stylesheet"]'),
-			);
-
-			const allImagesLoaded = images.every((img) => img.complete);
-			const allStylesheetsLoaded = stylesheets.every((link) => {
-				// For external stylesheets, we assume they're loaded if the element exists
-				return true; // You can add more sophisticated checking if needed
-			});
-
-			if (allImagesLoaded && allStylesheetsLoaded) {
-				setResourcesLoaded(true);
-			}
-		};
-
-		// Check immediately
-		checkResourcesLoaded();
-
-		// Also check after a short delay to catch any resources that might still be loading
-		const timer = setTimeout(checkResourcesLoaded, 1000);
-
-		return () => clearTimeout(timer);
-	}, []);
-
-	useEffect(() => {
-		const initializeApp = async () => {
-			try {
-				// Wait for DOM to be ready
-				if (document.readyState !== "complete") {
-					await new Promise((resolve) => {
-						if (document.readyState === "complete") {
-							resolve(true);
-						} else {
-							window.addEventListener("load", () => resolve(true), {
-								once: true,
-							});
-						}
-					});
-				}
-
-				if (isFullyConnected && address) {
-					//
-				}
-
-				// Mark app as ready
-				setAppReady(true);
-			} catch (error) {
-				console.error("Error initializing app:", error);
-				setAppReady(true); // Still mark as ready even if there's an error
-			}
-		};
-
-		initializeApp();
-	}, [isFullyConnected, address]);
-
-	return (
-		<AppContext.Provider
-			value={{
-				appReady,
-				resourcesLoaded,
-				isHydrated,
-				rpcUrls,
-				setRpcUrls,
-				jsonFiles,
-				setJsonFiles,
-			}}
-		>
-			{children}
-		</AppContext.Provider>
-	);
+  const [appReady, setAppReady] = useState<boolean>(false);
+  const [resourcesLoaded, setResourcesLoaded] = useState<boolean>(false);
+  const [isHydrated, setIsHydrated] = useState<boolean>(false);
+  const [rpcUrls, setRpcUrlsState] = useState<RpcUrlsContextType>({} as RpcUrlsContextType);
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  const [jsonFiles, setJsonFilesState] = useState<Record<string, any>>(() =>
+    loadJsonFilesFromStorage(),
+  );
+
+  // Network state
+  const [networks, setNetworks] = useState<NetworkConfig[]>([]);
+  const [networksLoading, setNetworksLoading] = useState(true);
+  const [networksError, setNetworksError] = useState<string | null>(null);
+
+  // Get enabled networks (filters by env var and excludes localhost in prod/staging)
+  const enabledNetworks = useMemo(() => getEnabledNetworks(), []);
+
+  const setRpcUrls = useCallback((next: RpcUrlsContextType) => {
+    setRpcUrlsState(next);
+    try {
+      saveRpcUrlsToStorage(next);
+    } catch (err) {
+      console.warn("Failed to persist rpc urls", err);
+    }
+  }, []);
+
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  const setJsonFiles = useCallback((next: Record<string, any>) => {
+    setJsonFilesState(next);
+    try {
+      saveJsonFilesToStorage(next);
+    } catch (err) {
+      console.warn("Failed to persist json files", err);
+    }
+  }, []);
+
+  // Hardhat network config for local development
+  const hardhatNetwork: NetworkConfig = useMemo(
+    () => ({
+      networkId: 31337,
+      name: "Hardhat",
+      shortName: "hardhat",
+      description: "Local development network",
+      color: "#FFF100",
+      currency: "ETH",
+      isTestnet: true,
+      rpc: {
+        public: ["http://127.0.0.1:8545"],
+      },
+    }),
+    [],
+  );
+
+  // Load networks from metadata
+  const loadNetworkData = useCallback(async () => {
+    setNetworksLoading(true);
+    setNetworksError(null);
+
+    try {
+      const loadedNetworks = await loadNetworks();
+
+      // Check if Hardhat should be included (only when both conditions are met)
+      const envNetworks = process.env.REACT_APP_OPENSCAN_NETWORKS;
+      const isDevelopment = process.env.REACT_APP_ENVIRONMENT === "development";
+      const hardhatInEnv = envNetworks?.split(",").some((id) => id.trim() === "31337");
+
+      // Add Hardhat network if in development AND explicitly enabled
+      if (isDevelopment && hardhatInEnv && !loadedNetworks.some((n) => n.networkId === 31337)) {
+        loadedNetworks.push(hardhatNetwork);
+      }
+
+      setNetworks(loadedNetworks);
+      // Update RPC URLs with the newly loaded network defaults
+      setRpcUrlsState(getEffectiveRpcUrls());
+    } catch (err) {
+      setNetworksError(err instanceof Error ? err.message : "Failed to load networks");
+      setNetworks(getAllNetworks());
+    } finally {
+      setNetworksLoading(false);
+    }
+  }, [hardhatNetwork]);
+
+  const _account = useAccount();
+  const { isFullyConnected, address } = useWagmiConnection();
+
+  // Mark as hydrated when component mounts (React has taken control)
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
+  // Load networks on mount
+  // biome-ignore lint/correctness/useExhaustiveDependencies: only run once on mount
+  useEffect(() => {
+    loadNetworkData();
+  }, []);
+
+  useEffect(() => {
+    const checkResourcesLoaded = () => {
+      // Check if all critical resources are loaded
+      const images = Array.from(document.images);
+      const stylesheets = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
+
+      const allImagesLoaded = images.every((img) => img.complete);
+      const allStylesheetsLoaded = stylesheets.every((_link) => {
+        // For external stylesheets, we assume they're loaded if the element exists
+        return true; // You can add more sophisticated checking if needed
+      });
+
+      if (allImagesLoaded && allStylesheetsLoaded) {
+        setResourcesLoaded(true);
+      }
+    };
+
+    // Check immediately
+    checkResourcesLoaded();
+
+    // Also check after a short delay to catch any resources that might still be loading
+    const timer = setTimeout(checkResourcesLoaded, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    const initializeApp = async () => {
+      try {
+        // Wait for DOM to be ready
+        if (document.readyState !== "complete") {
+          await new Promise((resolve) => {
+            if (document.readyState === "complete") {
+              resolve(true);
+            } else {
+              window.addEventListener("load", () => resolve(true), {
+                once: true,
+              });
+            }
+          });
+        }
+
+        if (isFullyConnected && address) {
+          //
+        }
+
+        // Mark app as ready
+        setAppReady(true);
+      } catch (error) {
+        console.error("Error initializing app:", error);
+        setAppReady(true); // Still mark as ready even if there's an error
+      }
+    };
+
+    initializeApp();
+  }, [isFullyConnected, address]);
+
+  const contextValue = useMemo<IAppContext>(
+    () => ({
+      appReady,
+      resourcesLoaded,
+      isHydrated,
+      rpcUrls,
+      setRpcUrls,
+      jsonFiles,
+      setJsonFiles,
+      // Network values
+      networks,
+      enabledNetworks,
+      networksLoading,
+      networksError,
+      getNetwork: getNetworkById,
+      reloadNetworks: loadNetworkData,
+    }),
+    [
+      appReady,
+      resourcesLoaded,
+      isHydrated,
+      rpcUrls,
+      setRpcUrls,
+      jsonFiles,
+      setJsonFiles,
+      networks,
+      enabledNetworks,
+      networksLoading,
+      networksError,
+      loadNetworkData,
+    ],
+  );
+
+  return <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>;
 };
+
+// Hook to use networks from AppContext
+export function useNetworks() {
+  const context = useContext(AppContext);
+  return {
+    networks: context.networks,
+    enabledNetworks: context.enabledNetworks,
+    isLoading: context.networksLoading,
+    error: context.networksError,
+    getNetwork: context.getNetwork,
+    reload: context.reloadNetworks,
+  };
+}
+
+export function useNetwork(networkId: number): NetworkConfig | undefined {
+  const { getNetwork } = useNetworks();
+  return getNetwork(networkId);
+}
diff --git a/src/context/NotificationContext.tsx b/src/context/NotificationContext.tsx
index 6b0af59..d39c124 100644
--- a/src/context/NotificationContext.tsx
+++ b/src/context/NotificationContext.tsx
@@ -1,82 +1,57 @@
-import React, {
-	createContext,
-	useContext,
-	useState,
-	ReactNode,
-	useCallback,
-	useMemo,
-} from "react";
-import {
-	Notification,
-	NotificationContextType,
-	NotificationProviderProps,
-} from "../types";
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import type { Notification, NotificationContextType, NotificationProviderProps } from "../types";
 
-const NotificationContext = createContext<NotificationContextType | undefined>(
-	undefined,
-);
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
 
 export const useNotifications = () => {
-	const context = useContext(NotificationContext);
-	if (!context) {
-		throw new Error(
-			"useNotifications must be used within a NotificationProvider",
-		);
-	}
-	return context;
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error("useNotifications must be used within a NotificationProvider");
+  }
+  return context;
 };
 
-export const NotificationProvider: React.FC<NotificationProviderProps> =
-	React.memo(({ children }) => {
-		const [notifications, setNotifications] = useState<Notification[]>([]);
-
-		const addNotification = useCallback(
-			(message: string, type: Notification["type"], duration = 5000) => {
-				const id = Math.random().toString(36).substr(2, 9);
-				const notification: Notification = { id, message, type, duration };
-
-				setNotifications((prev) => [...prev, notification]);
-
-				// Auto-remove notification after duration (if specified)
-				if (duration > 0) {
-					setTimeout(() => {
-						removeNotification(id);
-					}, duration);
-				}
-			},
-			[],
-		);
-
-		const removeNotification = useCallback((id: string) => {
-			setNotifications((prev) =>
-				prev.filter((notification) => notification.id !== id),
-			);
-		}, []);
-
-		const clearAllNotifications = useCallback(() => {
-			setNotifications([]);
-		}, []);
-
-		const value = useMemo(
-			() => ({
-				notifications,
-				addNotification,
-				removeNotification,
-				clearAllNotifications,
-			}),
-			[
-				notifications,
-				addNotification,
-				removeNotification,
-				clearAllNotifications,
-			],
-		);
-
-		return (
-			<NotificationContext.Provider value={value}>
-				{children}
-			</NotificationContext.Provider>
-		);
-	});
+export const NotificationProvider: React.FC<NotificationProviderProps> = React.memo(
+  ({ children }) => {
+    const [notifications, setNotifications] = useState<Notification[]>([]);
+
+    const removeNotification = useCallback((id: string) => {
+      setNotifications((prev) => prev.filter((notification) => notification.id !== id));
+    }, []);
+
+    const addNotification = useCallback(
+      (message: string, type: Notification["type"], duration = 5000) => {
+        const id = crypto.randomUUID();
+        const notification: Notification = { id, message, type, duration };
+
+        setNotifications((prev) => [...prev, notification]);
+
+        // Auto-remove notification after duration (if specified)
+        if (duration > 0) {
+          setTimeout(() => {
+            removeNotification(id);
+          }, duration);
+        }
+      },
+      [removeNotification],
+    );
+
+    const clearAllNotifications = useCallback(() => {
+      setNotifications([]);
+    }, []);
+
+    const value = useMemo(
+      () => ({
+        notifications,
+        addNotification,
+        removeNotification,
+        clearAllNotifications,
+      }),
+      [notifications, addNotification, removeNotification, clearAllNotifications],
+    );
+
+    return <NotificationContext.Provider value={value}>{children}</NotificationContext.Provider>;
+  },
+);
 
 NotificationProvider.displayName = "NotificationProvider";
diff --git a/src/context/SettingsContext.tsx b/src/context/SettingsContext.tsx
index 83b948e..8f04430 100644
--- a/src/context/SettingsContext.tsx
+++ b/src/context/SettingsContext.tsx
@@ -1,143 +1,116 @@
-import React, {
-	createContext,
-	useContext,
-	useState,
-	useEffect,
-	ReactNode,
-} from "react";
-import { UserSettings, DEFAULT_SETTINGS } from "../types";
+import React, { createContext, type ReactNode, useContext, useEffect, useState } from "react";
+import { DEFAULT_SETTINGS, type UserSettings } from "../types";
 
 interface SettingsContextType {
-	settings: UserSettings;
-	updateSettings: (newSettings: Partial<UserSettings>) => void;
-	resetSettings: () => void;
-	// Theme-specific methods for backward compatibility
-	isDarkMode: boolean;
-	toggleTheme: () => void;
+  settings: UserSettings;
+  updateSettings: (newSettings: Partial<UserSettings>) => void;
+  resetSettings: () => void;
+  // Theme-specific methods for backward compatibility
+  isDarkMode: boolean;
+  toggleTheme: () => void;
 }
 
-const SettingsContext = createContext<SettingsContextType | undefined>(
-	undefined,
-);
+const SettingsContext = createContext<SettingsContextType | undefined>(undefined);
 
 const SETTINGS_STORAGE_KEY = "openScan_user_settings";
 
 interface SettingsProviderProps {
-	children: ReactNode;
+  children: ReactNode;
 }
 
-export const SettingsProvider = React.memo<SettingsProviderProps>(
-	({ children }) => {
-		const [settings, setSettings] = useState<UserSettings>(() => {
-			// Load settings from localStorage on initialization
-			try {
-				const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
-				if (stored) {
-					const parsed = JSON.parse(stored);
-					// Merge with defaults to ensure all fields are present
-					return { ...DEFAULT_SETTINGS, ...parsed };
-				}
-			} catch (error) {
-				console.warn("Failed to load settings from localStorage:", error);
-			}
-			return DEFAULT_SETTINGS;
-		});
-
-		// Determine if dark mode should be active based on settings and system preference
-		const isDarkMode = React.useMemo(() => {
-			if (settings.theme === "dark") return true;
-			if (settings.theme === "light") return false;
-			// Auto mode: use system preference
-			return window.matchMedia("(prefers-color-scheme: dark)").matches;
-		}, [settings.theme]);
-
-		// Memoized theme application function
-		const applyTheme = React.useCallback((darkMode: boolean) => {
-			if (darkMode) {
-				document.body.classList.remove("light-theme");
-			} else {
-				document.body.classList.add("light-theme");
-			}
-		}, []);
-
-		// Apply theme to document body whenever isDarkMode changes
-		useEffect(() => {
-			applyTheme(isDarkMode);
-		}, [isDarkMode, applyTheme]);
-
-		// Save settings to localStorage whenever they change
-		useEffect(() => {
-			try {
-				localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
-			} catch (error) {
-				console.warn("Failed to save settings to localStorage:", error);
-			}
-		}, [settings]);
-
-		const updateSettings = React.useCallback(
-			(newSettings: Partial<UserSettings>) => {
-				setSettings((prev) => ({ ...prev, ...newSettings }));
-			},
-			[],
-		);
-
-		const resetSettings = React.useCallback(() => {
-			setSettings(DEFAULT_SETTINGS);
-		}, []);
-
-		const toggleTheme = React.useCallback(() => {
-			const currentTheme = settings.theme || "auto";
-			let newTheme: "light" | "dark" | "auto";
-
-			// Cycle through: auto -> light -> dark -> auto
-			if (currentTheme === "auto") {
-				newTheme = "light";
-			} else if (currentTheme === "light") {
-				newTheme = "dark";
-			} else {
-				newTheme = "auto";
-			}
-
-			updateSettings({ theme: newTheme });
-		}, [settings.theme, updateSettings]);
-
-		const value = React.useMemo(
-			() => ({
-				settings,
-				updateSettings,
-				resetSettings,
-				isDarkMode,
-				toggleTheme,
-			}),
-			[settings, updateSettings, resetSettings, isDarkMode, toggleTheme],
-		);
-
-		return (
-			<SettingsContext.Provider value={value}>
-				{children}
-			</SettingsContext.Provider>
-		);
-	},
-);
+export const SettingsProvider = React.memo<SettingsProviderProps>(({ children }) => {
+  const [settings, setSettings] = useState<UserSettings>(() => {
+    // Load settings from localStorage on initialization
+    try {
+      const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        // Merge with defaults to ensure all fields are present
+        return { ...DEFAULT_SETTINGS, ...parsed };
+      }
+    } catch (error) {
+      console.warn("Failed to load settings from localStorage:", error);
+    }
+    return DEFAULT_SETTINGS;
+  });
+
+  // Determine if dark mode should be active based on settings and system preference
+  const isDarkMode = React.useMemo(() => {
+    if (settings.theme === "dark") return true;
+    if (settings.theme === "light") return false;
+    // Auto mode: use system preference
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }, [settings.theme]);
+
+  // Memoized theme application function
+  const applyTheme = React.useCallback((darkMode: boolean) => {
+    if (darkMode) {
+      document.body.classList.remove("light-theme");
+    } else {
+      document.body.classList.add("light-theme");
+    }
+  }, []);
+
+  // Apply theme to document body whenever isDarkMode changes
+  useEffect(() => {
+    applyTheme(isDarkMode);
+  }, [isDarkMode, applyTheme]);
+
+  // Save settings to localStorage whenever they change
+  useEffect(() => {
+    try {
+      localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
+    } catch (error) {
+      console.warn("Failed to save settings to localStorage:", error);
+    }
+  }, [settings]);
+
+  const updateSettings = React.useCallback((newSettings: Partial<UserSettings>) => {
+    setSettings((prev) => ({ ...prev, ...newSettings }));
+  }, []);
+
+  const resetSettings = React.useCallback(() => {
+    setSettings(DEFAULT_SETTINGS);
+  }, []);
+
+  const toggleTheme = React.useCallback(() => {
+    // Simple toggle between light and dark based on current visual state
+    const newTheme = isDarkMode ? "light" : "dark";
+    updateSettings({ theme: newTheme });
+  }, [isDarkMode, updateSettings]);
+
+  const value = React.useMemo(
+    () => ({
+      settings,
+      updateSettings,
+      resetSettings,
+      isDarkMode,
+      toggleTheme,
+    }),
+    [settings, updateSettings, resetSettings, isDarkMode, toggleTheme],
+  );
+
+  return <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
+});
 
 SettingsProvider.displayName = "SettingsProvider";
 
 export function useSettings(): SettingsContextType {
-	const context = useContext(SettingsContext);
-	if (context === undefined) {
-		throw new Error("useSettings must be used within a SettingsProvider");
-	}
-	return context;
+  const context = useContext(SettingsContext);
+  if (context === undefined) {
+    throw new Error("useSettings must be used within a SettingsProvider");
+  }
+  return context;
 }
 
 // Backward compatibility for theme functionality
 export function useTheme(): { isDarkMode: boolean; toggleTheme: () => void } {
-	const context = useContext(SettingsContext);
-	if (context === undefined) {
-		throw new Error("useTheme must be used within a SettingsProvider");
-	}
-	return {
-		isDarkMode: context.isDarkMode,
-		toggleTheme: context.toggleTheme,
-	};
+  const context = useContext(SettingsContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a SettingsProvider");
+  }
+  return {
+    isDarkMode: context.isDarkMode,
+    toggleTheme: context.toggleTheme,
+  };
 }
diff --git a/src/hooks/useAppReady.ts b/src/hooks/useAppReady.ts
index bf31e03..4d0649e 100644
--- a/src/hooks/useAppReady.ts
+++ b/src/hooks/useAppReady.ts
@@ -5,36 +5,37 @@ import { AppContext } from "../context/AppContext";
  * Custom hook to track various aspects of app readiness
  */
 export const useAppReady = () => {
-	const { appReady, resourcesLoaded, isHydrated } = useContext(AppContext);
+  const { appReady, resourcesLoaded, isHydrated } = useContext(AppContext);
 
-	return {
-		// Individual loading states
-		appReady, // App initialization complete
-		resourcesLoaded, // All resources (images, stylesheets) loaded
-		isHydrated, // React has hydrated the DOM
+  return {
+    // Individual loading states
+    appReady, // App initialization complete
+    resourcesLoaded, // All resources (images, stylesheets) loaded
+    isHydrated, // React has hydrated the DOM
 
-		// Computed states
-		fullyReady: appReady && resourcesLoaded && isHydrated,
-		domReady: document.readyState === "complete",
+    // Computed states
+    fullyReady: appReady && resourcesLoaded && isHydrated,
+    domReady: document.readyState === "complete",
 
-		// Utility functions
-		onFullyReady: (callback: () => void) => {
-			if (appReady && resourcesLoaded && isHydrated) {
-				callback();
-			}
-		},
-	};
+    // Utility functions
+    onFullyReady: (callback: () => void) => {
+      if (appReady && resourcesLoaded && isHydrated) {
+        callback();
+      }
+    },
+  };
 };
 
 /**
  * Hook to execute code when app is fully ready
  */
+// biome-ignore lint/suspicious/noExplicitAny: <TODO>
 export const useOnAppReady = (callback: () => void, deps: any[] = []) => {
-	const { fullyReady } = useAppReady();
+  const { fullyReady } = useAppReady();
 
-	useEffect(() => {
-		if (fullyReady) {
-			callback();
-		}
-	}, [fullyReady, callback, ...deps]); // Include callback in dependencies
+  useEffect(() => {
+    if (fullyReady) {
+      callback();
+    }
+  }, [fullyReady, callback, ...deps]); // Include callback in dependencies
 };
diff --git a/src/hooks/useDataService.ts b/src/hooks/useDataService.ts
index bd0b30d..4a17a47 100644
--- a/src/hooks/useDataService.ts
+++ b/src/hooks/useDataService.ts
@@ -3,40 +3,41 @@ import { useContext, useMemo } from "react";
 import { AppContext } from "../context/AppContext";
 import { useSettings } from "../context/SettingsContext";
 import { DataService } from "../services/DataService";
+import type { SupportedChainId } from "explorer-network-connectors";
+import type { RpcUrlsContextType } from "../types";
 
 /**
- * Hook to get a DataService for a specific chain
+ * Hook to get a DataService for a specific network
  * Automatically applies the RPC strategy from user settings
- * @param chainId - Optional chain ID. If not provided, uses the currently connected chain
+ * @param networkId - The network ID
  * @returns DataService instance
  */
-export function useDataService(chainId: number) {
-	const targetChainId = chainId;
-	const { rpcUrls } = useContext(AppContext);
-	const { settings } = useSettings();
+export function useDataService(networkId: number) {
+  const { rpcUrls } = useContext(AppContext);
+  const { settings } = useSettings();
 
-	console.log(
-		"useDataService called with chainId:",
-		chainId,
-		"targetChainId:",
-		targetChainId,
-		"strategy:",
-		settings.rpcStrategy,
-	);
+  const dataService = useMemo(() => {
+    // Apply max parallel requests limit when using parallel strategy
+    let limitedRpcUrls = rpcUrls;
 
-	const dataService = useMemo(() => {
-		console.log(
-			"useMemo creating new DataService for chainId:",
-			targetChainId,
-			"with strategy:",
-			settings.rpcStrategy,
-		);
-		return new DataService(targetChainId, rpcUrls, settings.rpcStrategy);
-	}, [targetChainId, rpcUrls, settings.rpcStrategy]);
+    if (
+      settings.rpcStrategy === "parallel" &&
+      settings.maxParallelRequests &&
+      settings.maxParallelRequests > 0
+    ) {
+      // Limit the RPC URLs to the first N endpoints for each network
+      limitedRpcUrls = Object.keys(rpcUrls).reduce((acc, key) => {
+        const chainId = Number(key);
+        const urls = rpcUrls[chainId];
+        if (urls) {
+          acc[chainId] = urls.slice(0, settings.maxParallelRequests);
+        }
+        return acc;
+      }, {} as RpcUrlsContextType);
+    }
 
-	console.log(
-		"useDataService returning dataService for chainId:",
-		targetChainId,
-	);
-	return dataService;
+    return new DataService(networkId as SupportedChainId, limitedRpcUrls, settings.rpcStrategy);
+  }, [networkId, rpcUrls, settings.rpcStrategy, settings.maxParallelRequests]);
+
+  return dataService;
 }
diff --git a/src/hooks/useENS.ts b/src/hooks/useENS.ts
new file mode 100644
index 0000000..a1a0e21
--- /dev/null
+++ b/src/hooks/useENS.ts
@@ -0,0 +1,187 @@
+// src/hooks/useENS.ts
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { AppContext } from "../context";
+import { ENSService } from "../services/ENS/ENSService";
+import type { DecodedContenthash, ENSRecords, ENSReverseResult } from "../types";
+
+interface UseENSResult {
+  ensName: string | null;
+  reverseResult: ENSReverseResult | null;
+  records: ENSRecords | null;
+  decodedContenthash: DecodedContenthash | null;
+  loading: boolean;
+  error: string | null;
+  isMainnet: boolean;
+  refetch: () => void;
+}
+
+/**
+ * Hook to fetch ENS data for an address
+ * @param address - The Ethereum address to look up
+ * @param chainId - The current chain ID (ENS only works on mainnet)
+ * @param initialEnsName - Optional ENS name if already known (e.g., from navigation state)
+ */
+export function useENS(
+  address: string | undefined,
+  chainId: number,
+  initialEnsName?: string,
+): UseENSResult {
+  const { rpcUrls } = useContext(AppContext);
+  const [ensName, setEnsName] = useState<string | null>(initialEnsName || null);
+  const [reverseResult, setReverseResult] = useState<ENSReverseResult | null>(null);
+  const [records, setRecords] = useState<ENSRecords | null>(null);
+  const [decodedContenthash, setDecodedContenthash] = useState<DecodedContenthash | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [_fetchTrigger, setFetchTrigger] = useState(0);
+
+  // Check if we're on mainnet (ENS only works on Ethereum mainnet)
+  const isMainnet = chainId === 1;
+
+  // Always use mainnet RPC for ENS resolution
+  const mainnetRpcUrls = rpcUrls[1];
+
+  // Memoize ENSService instance to avoid recreating on every render
+  const ensService = useMemo(() => {
+    if (!mainnetRpcUrls || mainnetRpcUrls.length === 0) {
+      return null;
+    }
+    return new ENSService(mainnetRpcUrls);
+  }, [mainnetRpcUrls]);
+
+  const refetch = useCallback(() => {
+    setFetchTrigger((prev) => prev + 1);
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: _fetchTrigger is intentionally included to enable refetch()
+  useEffect(() => {
+    if (!address) {
+      setEnsName(null);
+      setReverseResult(null);
+      setRecords(null);
+      setDecodedContenthash(null);
+      return;
+    }
+
+    if (!ensService) {
+      setError("No Ethereum mainnet RPC configured for ENS resolution");
+      return;
+    }
+
+    const fetchENSData = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        // If we have an initial ENS name, use it
+        // Otherwise, do a reverse lookup
+        let name: string | null = initialEnsName || null;
+
+        if (!name) {
+          // Reverse resolve: address -> ENS name
+          const reverse = await ensService.reverseResolve(address);
+          setReverseResult(reverse);
+          name = reverse.ensName;
+        } else {
+          // If we have the name, verify it with forward resolution
+          const resolvedAddr = await ensService.resolve(name);
+          const verified = resolvedAddr?.toLowerCase() === address.toLowerCase();
+          setReverseResult({ ensName: name, verified });
+        }
+
+        setEnsName(name);
+
+        // If we found an ENS name, fetch the full records
+        if (name) {
+          const ensRecords = await ensService.getRecords(name);
+          setRecords(ensRecords);
+
+          // Decode contenthash if present
+          if (ensRecords.contenthash) {
+            const decoded = ensService.decodeContenthash(ensRecords.contenthash);
+            setDecodedContenthash(decoded);
+          }
+        }
+      } catch (err) {
+        console.error("Error fetching ENS data:", err);
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchENSData();
+  }, [address, ensService, initialEnsName, _fetchTrigger]);
+
+  return {
+    ensName,
+    reverseResult,
+    records,
+    decodedContenthash,
+    loading,
+    error,
+    isMainnet,
+    refetch,
+  };
+}
+
+/**
+ * Hook to resolve an ENS name to an address
+ * @param ensName - The ENS name to resolve
+ */
+export function useENSResolve(ensName: string | undefined): {
+  address: string | null;
+  loading: boolean;
+  error: string | null;
+} {
+  const { rpcUrls } = useContext(AppContext);
+  const [address, setAddress] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const mainnetRpcUrls = rpcUrls[1];
+
+  // Memoize ENSService instance
+  const ensService = useMemo(() => {
+    if (!mainnetRpcUrls || mainnetRpcUrls.length === 0) {
+      return null;
+    }
+    return new ENSService(mainnetRpcUrls);
+  }, [mainnetRpcUrls]);
+
+  useEffect(() => {
+    if (!ensName || !ENSService.isENSName(ensName)) {
+      setAddress(null);
+      return;
+    }
+
+    if (!ensService) {
+      setError("No Ethereum mainnet RPC configured");
+      return;
+    }
+
+    const fetchAddress = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const resolved = await ensService.resolve(ensName);
+        setAddress(resolved);
+
+        if (!resolved) {
+          setError(`Could not resolve ENS name: ${ensName}`);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAddress();
+  }, [ensName, ensService]);
+
+  return { address, loading, error };
+}
+
+export default useENS;
diff --git a/src/hooks/useModalManager.ts b/src/hooks/useModalManager.ts
index 7e178ae..4e277e9 100644
--- a/src/hooks/useModalManager.ts
+++ b/src/hooks/useModalManager.ts
@@ -5,25 +5,25 @@ import { useState } from "react";
  * Consolidates modal state management across components
  */
 export const useModalManager = () => {
-	const [isModalOpen, setIsModalOpen] = useState(false);
-	const [transactionLoading, setIsTransactionLoading] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [_transactionLoading, setIsTransactionLoading] = useState(false);
 
-	// Main modal handlers
-	const openModal = () => {
-		setIsModalOpen(true);
-	};
+  // Main modal handlers
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
 
-	const closeModal = () => {
-		setIsModalOpen(false);
-		setIsTransactionLoading(false);
-	};
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setIsTransactionLoading(false);
+  };
 
-	return {
-		// State
-		isModalOpen,
+  return {
+    // State
+    isModalOpen,
 
-		// Actions
-		openModal,
-		closeModal,
-	};
+    // Actions
+    openModal,
+    closeModal,
+  };
 };
diff --git a/src/hooks/useNotify.ts b/src/hooks/useNotify.ts
index 788d2a0..d61dd63 100644
--- a/src/hooks/useNotify.ts
+++ b/src/hooks/useNotify.ts
@@ -1,16 +1,13 @@
 import { useNotifications } from "../context/NotificationContext";
 
 export const useNotify = () => {
-	const { addNotification } = useNotifications();
+  const { addNotification } = useNotifications();
 
-	const notify = {
-		success: (message: string, duration?: number) =>
-			addNotification(message, "success", duration),
-		warning: (message: string, duration?: number) =>
-			addNotification(message, "warning", duration),
-		error: (message: string, duration?: number) =>
-			addNotification(message, "error", duration),
-	};
+  const notify = {
+    success: (message: string, duration?: number) => addNotification(message, "success", duration),
+    warning: (message: string, duration?: number) => addNotification(message, "warning", duration),
+    error: (message: string, duration?: number) => addNotification(message, "error", duration),
+  };
 
-	return notify;
+  return notify;
 };
diff --git a/src/hooks/useProviderSelection.ts b/src/hooks/useProviderSelection.ts
index 37e58c0..2f2bfff 100644
--- a/src/hooks/useProviderSelection.ts
+++ b/src/hooks/useProviderSelection.ts
@@ -10,35 +10,33 @@ const STORAGE_KEY_PREFIX = "rpc_selected_provider_";
  * @returns [selectedProvider, setSelectedProvider] tuple
  */
 export function useProviderSelection(
-	pageKey: string,
+  pageKey: string,
 ): [string | null, (provider: string | null) => void] {
-	const storageKey = `${STORAGE_KEY_PREFIX}${pageKey}`;
+  const storageKey = `${STORAGE_KEY_PREFIX}${pageKey}`;
 
-	const [selectedProvider, setSelectedProvider] = useState<string | null>(
-		() => {
-			try {
-				return sessionStorage.getItem(storageKey);
-			} catch {
-				return null;
-			}
-		},
-	);
+  const [selectedProvider, setSelectedProvider] = useState<string | null>(() => {
+    try {
+      return sessionStorage.getItem(storageKey);
+    } catch {
+      return null;
+    }
+  });
 
-	useEffect(() => {
-		if (selectedProvider) {
-			try {
-				sessionStorage.setItem(storageKey, selectedProvider);
-			} catch (error) {
-				console.warn("Failed to save provider selection:", error);
-			}
-		} else {
-			try {
-				sessionStorage.removeItem(storageKey);
-			} catch (error) {
-				console.warn("Failed to remove provider selection:", error);
-			}
-		}
-	}, [selectedProvider, storageKey]);
+  useEffect(() => {
+    if (selectedProvider) {
+      try {
+        sessionStorage.setItem(storageKey, selectedProvider);
+      } catch (error) {
+        console.warn("Failed to save provider selection:", error);
+      }
+    } else {
+      try {
+        sessionStorage.removeItem(storageKey);
+      } catch (error) {
+        console.warn("Failed to remove provider selection:", error);
+      }
+    }
+  }, [selectedProvider, storageKey]);
 
-	return [selectedProvider, setSelectedProvider];
+  return [selectedProvider, setSelectedProvider];
 }
diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts
new file mode 100644
index 0000000..37fbc6f
--- /dev/null
+++ b/src/hooks/useSearch.ts
@@ -0,0 +1,108 @@
+import { useCallback, useContext, useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { AppContext } from "../context";
+import { ENSService } from "../services/ENS/ENSService";
+
+interface UseSearchResult {
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
+  isResolving: boolean;
+  error: string | null;
+  clearError: () => void;
+  handleSearch: (e: React.FormEvent) => Promise<void>;
+  networkId: string | undefined;
+}
+
+export function useSearch(): UseSearchResult {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isResolving, setIsResolving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { rpcUrls } = useContext(AppContext);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  // Extract networkId from the pathname (e.g., /1/blocks -> 1)
+  const pathSegments = location.pathname.split("/").filter(Boolean);
+  const networkId =
+    pathSegments[0] && !Number.isNaN(Number(pathSegments[0])) ? pathSegments[0] : undefined;
+
+  const mainnetRpcUrls = rpcUrls[1];
+
+  // Memoize ENSService instance
+  const ensService = useMemo(() => {
+    if (!mainnetRpcUrls || mainnetRpcUrls.length === 0) {
+      return null;
+    }
+    return new ENSService(mainnetRpcUrls);
+  }, [mainnetRpcUrls]);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const handleSearch = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      const term = searchTerm.trim();
+      if (!term) return;
+
+      setError(null);
+
+      // Check if it's an ENS name
+      if (ENSService.isENSName(term)) {
+        setIsResolving(true);
+        try {
+          if (!ensService) {
+            setError("No Ethereum mainnet RPC configured");
+            return;
+          }
+
+          const resolvedAddress = await ensService.resolve(term);
+
+          if (resolvedAddress) {
+            const targetChainId = networkId || "1";
+            navigate(`/${targetChainId}/address/${resolvedAddress}`, {
+              state: { ensName: term },
+            });
+            setSearchTerm("");
+          } else {
+            setError(`Could not resolve ENS name: ${term}`);
+          }
+        } catch (err) {
+          setError(`Error resolving ENS: ${err instanceof Error ? err.message : "Unknown error"}`);
+        } finally {
+          setIsResolving(false);
+        }
+        return;
+      }
+
+      // Need networkId for non-ENS searches
+      if (!networkId) return;
+
+      // Check if it's a transaction hash (0x followed by 64 hex chars)
+      if (/^0x[a-fA-F0-9]{64}$/.test(term)) {
+        navigate(`/${networkId}/tx/${term}`);
+        setSearchTerm("");
+      }
+      // Check if it's an address (0x followed by 40 hex chars)
+      else if (/^0x[a-fA-F0-9]{40}$/.test(term)) {
+        navigate(`/${networkId}/address/${term}`);
+        setSearchTerm("");
+      }
+      // Check if it's a block number
+      else if (/^\d+$/.test(term)) {
+        navigate(`/${networkId}/block/${term}`);
+        setSearchTerm("");
+      }
+    },
+    [searchTerm, networkId, navigate, ensService],
+  );
+
+  return {
+    searchTerm,
+    setSearchTerm,
+    isResolving,
+    error,
+    clearError,
+    handleSearch,
+    networkId,
+  };
+}
diff --git a/src/hooks/useSelectedData.ts b/src/hooks/useSelectedData.ts
index 64c580c..a0b0570 100644
--- a/src/hooks/useSelectedData.ts
+++ b/src/hooks/useSelectedData.ts
@@ -10,38 +10,36 @@ import type { DataWithMetadata } from "../types";
  * @returns The actual data to display
  */
 export function useSelectedData<T>(
-	result: DataWithMetadata<T> | null,
-	selectedProvider: string | null,
+  result: DataWithMetadata<T> | null,
+  selectedProvider: string | null,
 ): T | null {
-	return useMemo(() => {
-		if (!result) {
-			return null;
-		}
+  return useMemo(() => {
+    if (!result) {
+      return null;
+    }
 
-		// No metadata = fallback mode, return data as-is
-		if (!result.metadata) {
-			return result.data;
-		}
+    // No metadata = fallback mode, return data as-is
+    if (!result.metadata) {
+      return result.data;
+    }
 
-		// No provider selected = use default (first successful)
-		if (!selectedProvider) {
-			return result.data;
-		}
+    // No provider selected = use default (first successful)
+    if (!selectedProvider) {
+      return result.data;
+    }
 
-		// Find selected provider's response
-		const providerResponse = result.metadata.responses.find(
-			(r) => r.url === selectedProvider && r.status === "success",
-		);
+    // Find selected provider's response
+    const providerResponse = result.metadata.responses.find(
+      (r) => r.url === selectedProvider && r.status === "success",
+    );
 
-		if (!providerResponse || !providerResponse.data) {
-			// Fallback to default if selected provider not found
-			console.warn(
-				`Selected provider ${selectedProvider} not found or failed, using default`,
-			);
-			return result.data;
-		}
+    if (!providerResponse || !providerResponse.data) {
+      // Fallback to default if selected provider not found
+      console.warn(`Selected provider ${selectedProvider} not found or failed, using default`);
+      return result.data;
+    }
 
-		// Return the selected provider's data
-		return providerResponse.data;
-	}, [result, selectedProvider]);
+    // Return the selected provider's data
+    return providerResponse.data;
+  }, [result, selectedProvider]);
 }
diff --git a/src/hooks/useSourcify.ts b/src/hooks/useSourcify.ts
index 1faf78a..b6d0601 100644
--- a/src/hooks/useSourcify.ts
+++ b/src/hooks/useSourcify.ts
@@ -1,31 +1,33 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export interface SourcifyMatch {
-	match: "perfect" | "partial" | null;
-	creation_match: "perfect" | "partial" | null;
-	runtime_match: "perfect" | "partial" | null;
-	chainId: string;
-	address: string;
-	verifiedAt?: string;
+  match: "perfect" | "partial" | null;
+  creation_match: "perfect" | "partial" | null;
+  runtime_match: "perfect" | "partial" | null;
+  chainId: string; // This is the Sourcify API response field - keep as chainId
+  address: string;
+  verifiedAt?: string;
 }
 
 export interface SourcifyContractDetails extends SourcifyMatch {
-	name?: string;
-	compilerVersion?: string;
-	evmVersion?: string;
-	files?: {
-		name: string;
-		path: string;
-		content: string;
-	}[];
-	sources?: Record<
-		string,
-		{
-			content: string;
-		}
-	>;
-	metadata?: any;
-	abi?: any[];
+  name?: string;
+  compilerVersion?: string;
+  evmVersion?: string;
+  files?: {
+    name: string;
+    path: string;
+    content: string;
+  }[];
+  sources?: Record<
+    string,
+    {
+      content: string;
+    }
+  >;
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  metadata?: any;
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  abi?: any[];
 }
 
 const SOURCIFY_API_BASE = "https://repo.sourcify.dev/contracts";
@@ -33,180 +35,178 @@ const SOURCIFY_API_V2_BASE = "https://sourcify.dev/server";
 
 /**
  * Hook to fetch verified contract data from Sourcify API
- * @param chainId - The chain ID
+ * @param networkId - The network ID
  * @param address - The contract address
  * @param enabled - Whether to fetch data (default: true)
  */
 export const useSourcify = (
-	chainId: number,
-	address: string | undefined,
-	enabled: boolean = true,
+  networkId: number,
+  address: string | undefined,
+  enabled: boolean = true,
 ) => {
-	const [data, setData] = useState<SourcifyContractDetails | null>(null);
-	const [loading, setLoading] = useState<boolean>(false);
-	const [error, setError] = useState<string | null>(null);
-	const [isVerified, setIsVerified] = useState<boolean>(false);
-
-	useEffect(() => {
-		if (!enabled || !address || !chainId) {
-			return;
-		}
-
-		const fetchContractData = async () => {
-			setLoading(true);
-			setError(null);
-
-			try {
-				// Build query params
-				const params = new URLSearchParams();
-				params.append("fields", "all");
-
-				const queryString = params.toString();
-				const url = `${SOURCIFY_API_V2_BASE}/v2/contract/${chainId}/${address}${queryString ? `?${queryString}` : ""}`;
-
-				const response = await fetch(url);
-
-				if (!response.ok) {
-					if (response.status === 404) {
-						setIsVerified(false);
-						setData(null);
-						setError("Contract not verified on Sourcify");
-					} else {
-						throw new Error(
-							`Failed to fetch contract data: ${response.statusText}`,
-						);
-					}
-					return;
-				}
-
-				const contractData: SourcifyContractDetails = await response.json();
-				setData(contractData);
-				setIsVerified(!!contractData.match);
-			} catch (err) {
-				console.error("Error fetching Sourcify data:", err);
-				setError(err instanceof Error ? err.message : "Unknown error occurred");
-				setIsVerified(false);
-				setData(null);
-			} finally {
-				setLoading(false);
-			}
-		};
-
-		fetchContractData();
-	}, [chainId, address, enabled]);
-
-	return {
-		data,
-		loading,
-		error,
-		isVerified,
-	};
+  const [data, setData] = useState<SourcifyContractDetails | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isVerified, setIsVerified] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!enabled || !address || !networkId) {
+      return;
+    }
+
+    const fetchContractData = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        // Build query params
+        const params = new URLSearchParams();
+        params.append("fields", "all");
+
+        const queryString = params.toString();
+        // Sourcify API uses chainId in the URL path
+        const url = `${SOURCIFY_API_V2_BASE}/v2/contract/${networkId}/${address}${queryString ? `?${queryString}` : ""}`;
+
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          if (response.status === 404) {
+            setIsVerified(false);
+            setData(null);
+            setError("Contract not verified on Sourcify");
+          } else {
+            throw new Error(`Failed to fetch contract data: ${response.statusText}`);
+          }
+          return;
+        }
+
+        const contractData: SourcifyContractDetails = await response.json();
+        setData(contractData);
+        setIsVerified(!!contractData.match);
+      } catch (err) {
+        console.error("Error fetching Sourcify data:", err);
+        setError(err instanceof Error ? err.message : "Unknown error occurred");
+        setIsVerified(false);
+        setData(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchContractData();
+  }, [networkId, address, enabled]);
+
+  return {
+    data,
+    loading,
+    error,
+    isVerified,
+  };
 };
 
 /**
  * Hook to fetch contract source files from Sourcify
- * @param chainId - The chain ID
+ * @param networkId - The network ID
  * @param address - The contract address
  * @param matchType - Type of match to fetch: 'full_match' | 'partial_match'
  * @param enabled - Whether to fetch data (default: true)
  */
 export const useSourcifyFiles = (
-	chainId: number,
-	address: string | undefined,
-	matchType: "full_match" | "partial_match" = "full_match",
-	enabled: boolean = true,
+  networkId: number,
+  address: string | undefined,
+  matchType: "full_match" | "partial_match" = "full_match",
+  enabled: boolean = true,
 ) => {
-	const [files, setFiles] = useState<
-		{ name: string; content: string; path: string }[]
-	>([]);
-	const [loading, setLoading] = useState<boolean>(false);
-	const [error, setError] = useState<string | null>(null);
-
-	useEffect(() => {
-		if (!enabled || !address || !chainId) {
-			return;
-		}
-
-		const fetchFiles = async () => {
-			setLoading(true);
-			setError(null);
-
-			try {
-				// Fetch the file tree first
-				const treeUrl = `${SOURCIFY_API_BASE}/${matchType}/${chainId}/${address}/`;
-				const treeResponse = await fetch(treeUrl);
-
-				if (!treeResponse.ok) {
-					throw new Error("Files not found");
-				}
-
-				const treeText = await treeResponse.text();
-
-				// Parse the directory listing (this is a simplified parser)
-				// In production, you might want to use the API v2 files endpoint instead
-				const fileMatches = treeText.match(/href="([^"]+)"/g);
-
-				if (fileMatches) {
-					const fileList = fileMatches
-						.map((match) => match.match(/href="([^"]+)"/)?.[1])
-						.filter((file): file is string => !!file && !file.endsWith("/"));
-
-					// Fetch each file content
-					const fileContents = await Promise.all(
-						fileList.map(async (fileName) => {
-							const fileUrl = `${treeUrl}${fileName}`;
-							const fileResponse = await fetch(fileUrl);
-							const content = await fileResponse.text();
-							return {
-								name: fileName,
-								path: fileName,
-								content,
-							};
-						}),
-					);
-
-					setFiles(fileContents);
-				}
-			} catch (err) {
-				console.error("Error fetching Sourcify files:", err);
-				setError(err instanceof Error ? err.message : "Unknown error occurred");
-				setFiles([]);
-			} finally {
-				setLoading(false);
-			}
-		};
-
-		fetchFiles();
-	}, [chainId, address, matchType, enabled]);
-
-	return {
-		files,
-		loading,
-		error,
-	};
+  const [files, setFiles] = useState<{ name: string; content: string; path: string }[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!enabled || !address || !networkId) {
+      return;
+    }
+
+    const fetchFiles = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        // Fetch the file tree first (Sourcify API uses chainId in URL)
+        const treeUrl = `${SOURCIFY_API_BASE}/${matchType}/${networkId}/${address}/`;
+        const treeResponse = await fetch(treeUrl);
+
+        if (!treeResponse.ok) {
+          throw new Error("Files not found");
+        }
+
+        const treeText = await treeResponse.text();
+
+        // Parse the directory listing (this is a simplified parser)
+        // In production, you might want to use the API v2 files endpoint instead
+        const fileMatches = treeText.match(/href="([^"]+)"/g);
+
+        if (fileMatches) {
+          const fileList = fileMatches
+            .map((match) => match.match(/href="([^"]+)"/)?.[1])
+            .filter((file): file is string => !!file && !file.endsWith("/"));
+
+          // Fetch each file content
+          const fileContents = await Promise.all(
+            fileList.map(async (fileName) => {
+              const fileUrl = `${treeUrl}${fileName}`;
+              const fileResponse = await fetch(fileUrl);
+              const content = await fileResponse.text();
+              return {
+                name: fileName,
+                path: fileName,
+                content,
+              };
+            }),
+          );
+
+          setFiles(fileContents);
+        }
+      } catch (err) {
+        console.error("Error fetching Sourcify files:", err);
+        setError(err instanceof Error ? err.message : "Unknown error occurred");
+        setFiles([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchFiles();
+  }, [networkId, address, matchType, enabled]);
+
+  return {
+    files,
+    loading,
+    error,
+  };
 };
 
 /**
  * Utility function to check if a contract is verified on Sourcify
- * @param chainId - The chain ID
+ * @param networkId - The network ID
  * @param address - The contract address
  * @returns Promise<boolean>
  */
 export const checkSourcifyVerification = async (
-	chainId: number,
-	address: string,
+  networkId: number,
+  address: string,
 ): Promise<boolean> => {
-	try {
-		const url = `${SOURCIFY_API_V2_BASE}/v2/contract/${chainId}/${address}`;
-		const response = await fetch(url);
-
-		if (response.ok) {
-			const data = await response.json();
-			return !!data.match;
-		}
-		return false;
-	} catch (err) {
-		console.error("Error checking Sourcify verification:", err);
-		return false;
-	}
+  try {
+    // Sourcify API uses chainId in URL path
+    const url = `${SOURCIFY_API_V2_BASE}/v2/contract/${networkId}/${address}`;
+    const response = await fetch(url);
+
+    if (response.ok) {
+      const data = await response.json();
+      return !!data.match;
+    }
+    return false;
+  } catch (err) {
+    console.error("Error checking Sourcify verification:", err);
+    return false;
+  }
 };
diff --git a/src/hooks/useWagmiConnection.ts b/src/hooks/useWagmiConnection.ts
index 30d0557..e786da0 100644
--- a/src/hooks/useWagmiConnection.ts
+++ b/src/hooks/useWagmiConnection.ts
@@ -1,80 +1,67 @@
-import { useAccount, useConnections } from "wagmi";
 import { useEffect, useState } from "react";
+import { useAccount, useConnections } from "wagmi";
 
 /**
  * Custom hook to track wagmi connection state with detailed information
  */
 export const useWagmiConnection = () => {
-	const {
-		isConnected,
-		isConnecting,
-		isReconnecting,
-		isDisconnected,
-		address,
-		connector,
-		status,
-	} = useAccount();
+  const { isConnected, isConnecting, isReconnecting, isDisconnected, address, connector, status } =
+    useAccount();
 
-	const connections = useConnections();
-	const [isFullyConnected, setIsFullyConnected] = useState(false);
+  const connections = useConnections();
+  const [isFullyConnected, setIsFullyConnected] = useState(false);
 
-	useEffect(() => {
-		// Consider fully connected when:
-		// 1. Account is connected
-		// 2. We have an address
-		// 3. Connection is stable (not connecting/reconnecting)
-		const fullyConnected =
-			isConnected &&
-			!!address &&
-			!isConnecting &&
-			!isReconnecting &&
-			connections.length > 0;
+  useEffect(() => {
+    // Consider fully connected when:
+    // 1. Account is connected
+    // 2. We have an address
+    // 3. Connection is stable (not connecting/reconnecting)
+    const fullyConnected =
+      isConnected && !!address && !isConnecting && !isReconnecting && connections.length > 0;
 
-		setIsFullyConnected(fullyConnected);
-	}, [isConnected, address, isConnecting, isReconnecting, connections.length]);
+    setIsFullyConnected(fullyConnected);
+  }, [isConnected, address, isConnecting, isReconnecting, connections.length]);
 
-	return {
-		// Basic states
-		isConnected,
-		isConnecting,
-		isReconnecting,
-		isDisconnected,
+  return {
+    // Basic states
+    isConnected,
+    isConnecting,
+    isReconnecting,
+    isDisconnected,
 
-		// Address and connector info
-		address,
-		connector,
+    // Address and connector info
+    address,
+    connector,
 
-		// Connection details
-		connections,
-		activeConnection: connections[0],
+    // Connection details
+    connections,
+    activeConnection: connections[0],
 
-		// Computed states
-		isFullyConnected,
-		isStableConnection: isConnected && !isConnecting && !isReconnecting,
+    // Computed states
+    isFullyConnected,
+    isStableConnection: isConnected && !isConnecting && !isReconnecting,
 
-		// Status information
-		status,
-		connectionCount: connections.length,
+    // Status information
+    status,
+    connectionCount: connections.length,
 
-		// Utility methods
-		hasValidAddress: !!address && address !== "0x",
+    // Utility methods
+    hasValidAddress: !!address && address !== "0x",
 
-		showLoading: isConnecting || isReconnecting,
-	};
+    showLoading: isConnecting || isReconnecting,
+  };
 };
 
 /**
  * Hook to execute callback when wagmi is fully connected
  */
-export const useOnWagmiConnected = (
-	callback: (address: string) => void,
-	deps: any[] = [],
-) => {
-	const { isFullyConnected, address } = useWagmiConnection();
+// biome-ignore lint/suspicious/noExplicitAny: <TODO>
+export const useOnWagmiConnected = (callback: (address: string) => void, deps: any[] = []) => {
+  const { isFullyConnected, address } = useWagmiConnection();
 
-	useEffect(() => {
-		if (isFullyConnected && address) {
-			callback(address);
-		}
-	}, [isFullyConnected, address, callback, ...deps]); // Include callback in dependencies
+  useEffect(() => {
+    if (isFullyConnected && address) {
+      callback(address);
+    }
+  }, [isFullyConnected, address, callback, ...deps]); // Include callback in dependencies
 };
diff --git a/src/hooks/useZipJsonReader.tsx b/src/hooks/useZipJsonReader.tsx
index 7181eb9..33e37f4 100644
--- a/src/hooks/useZipJsonReader.tsx
+++ b/src/hooks/useZipJsonReader.tsx
@@ -1,135 +1,132 @@
-import { useState } from "react";
 import JSZip from "jszip";
+import { useState } from "react";
 
 export function useZipJsonReader() {
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-	async function processZip(file: File) {
-		setLoading(true);
-		setError(null);
+  async function processZip(file: File) {
+    setLoading(true);
+    setError(null);
 
-		try {
-			const zip = await JSZip.loadAsync(file);
-			const results: any = {};
-			const entries = Object.keys(zip.files);
-			console.log(entries);
+    try {
+      const zip = await JSZip.loadAsync(file);
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      const results: any = {};
+      const entries = Object.keys(zip.files);
+      console.log(entries);
 
-			let deployments: any = {};
-			for (const path of entries) {
-				const zipFile = zip.files[path];
-				if (!zipFile) continue;
-				if (path.includes("deployed_addresses.json") && !zipFile.dir) {
-					const deploymentsFile = zip.files[path!];
-					if (!deploymentsFile) continue;
-					deployments = JSON.parse(await deploymentsFile.async("string"));
-				}
-			}
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      let deployments: any = {};
+      for (const path of entries) {
+        const zipFile = zip.files[path];
+        if (!zipFile) continue;
+        if (path.includes("deployed_addresses.json") && !zipFile.dir) {
+          // biome-ignore lint/style/noNonNullAssertion: <TODO>
+          const deploymentsFile = zip.files[path!];
+          if (!deploymentsFile) continue;
+          deployments = JSON.parse(await deploymentsFile.async("string"));
+        }
+      }
 
-			let contractDeployments: any = {};
-			Object.keys(deployments).forEach((key) => {
-				const name = key.split("#")[1];
-				contractDeployments[name as string] = deployments[key];
-			});
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      const contractDeployments: any = {};
+      Object.keys(deployments).forEach((key) => {
+        const name = key.split("#")[1];
+        contractDeployments[name as string] = deployments[key];
+      });
 
-			for (const path of entries) {
-				const zipFile = zip.files[path];
-				if (!zipFile) continue;
-				if (
-					path.includes("ignition/deployments/") &&
-					path.includes("artifacts") &&
-					path.endsWith(".json") &&
-					!zipFile.dir
-				) {
-					const key = zipFile.name.split("#")[1];
-					if (!key) continue;
-					results[key] = JSON.parse(await zipFile.async("string"));
+      for (const path of entries) {
+        const zipFile = zip.files[path];
+        if (!zipFile) continue;
+        if (
+          path.includes("ignition/deployments/") &&
+          path.includes("artifacts") &&
+          path.endsWith(".json") &&
+          !zipFile.dir
+        ) {
+          const key = zipFile.name.split("#")[1];
+          if (!key) continue;
+          results[key] = JSON.parse(await zipFile.async("string"));
 
-					// Add build info file into big object
-					const buildInfoPath = entries.find((e) =>
-						e.includes(results[key].buildInfoId),
-					);
-					const buildInfoFile = zip.files[buildInfoPath!];
-					if (!buildInfoFile) continue;
-					const buildInfo = JSON.parse(await buildInfoFile.async("string"));
-					results[key]["buildInfo"] = buildInfo;
+          // Add build info file into big object
+          const buildInfoPath = entries.find((e) => e.includes(results[key].buildInfoId));
+          // biome-ignore lint/style/noNonNullAssertion: <TODO>
+          const buildInfoFile = zip.files[buildInfoPath!];
+          if (!buildInfoFile) continue;
+          const buildInfo = JSON.parse(await buildInfoFile.async("string"));
+          results[key].buildInfo = buildInfo;
 
-					// Add source code files into big object
-					const sourceCodePath = entries.find((e) =>
-						e.includes(results[key].sourceName),
-					);
-					const sourceCodeFile = zip.files[sourceCodePath!];
-					if (!sourceCodeFile) continue;
-					const sourceCode = await sourceCodeFile.async("string");
-					results[key]["sourceCode"] = sourceCode;
-					results[key]["deployments"] = [
-						contractDeployments[results[key].contractName],
-					];
-				}
-			}
+          // Add source code files into big object
+          const sourceCodePath = entries.find((e) => e.includes(results[key].sourceName));
+          // biome-ignore lint/style/noNonNullAssertion: <TODO>
+          const sourceCodeFile = zip.files[sourceCodePath!];
+          if (!sourceCodeFile) continue;
+          const sourceCode = await sourceCodeFile.async("string");
+          results[key].sourceCode = sourceCode;
+          results[key].deployments = [contractDeployments[results[key].contractName]];
+        }
+      }
 
-			setLoading(false);
-			console.log(results);
+      setLoading(false);
+      console.log(results);
 
-			// Build an address -> artifact map based on each entry's `deployments`
-			const addressMap: Record<string, any> = {};
+      // Build an address -> artifact map based on each entry's `deployments`
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      const addressMap: Record<string, any> = {};
 
-			const extractAddresses = (input: any): string[] => {
-				if (!input) return [];
-				if (typeof input === "string") {
-					return /^0x[0-9a-fA-F]{40}$/.test(input) ? [input.toLowerCase()] : [];
-				}
-				if (Array.isArray(input)) {
-					return input.flatMap(extractAddresses);
-				}
-				if (typeof input === "object") {
-					const res: string[] = [];
-					if (typeof input.address === "string") {
-						if (/^0x[0-9a-fA-F]{40}$/.test(input.address))
-							res.push(input.address.toLowerCase());
-					}
-					if (Array.isArray(input.addresses)) {
-						res.push(
-							...input.addresses
-								.filter(
-									(a: any) =>
-										typeof a === "string" && /^0x[0-9a-fA-F]{40}$/.test(a),
-								)
-								.map((a: string) => a.toLowerCase()),
-						);
-					}
-					for (const val of Object.values(input)) {
-						if (typeof val === "string" && /^0x[0-9a-fA-F]{40}$/.test(val)) {
-							res.push(val.toLowerCase());
-						} else if (Array.isArray(val) || typeof val === "object") {
-							res.push(...extractAddresses(val));
-						}
-					}
-					return Array.from(new Set(res));
-				}
-				return [];
-			};
+      // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+      const extractAddresses = (input: any): string[] => {
+        if (!input) return [];
+        if (typeof input === "string") {
+          return /^0x[0-9a-fA-F]{40}$/.test(input) ? [input.toLowerCase()] : [];
+        }
+        if (Array.isArray(input)) {
+          return input.flatMap(extractAddresses);
+        }
+        if (typeof input === "object") {
+          const res: string[] = [];
+          if (typeof input.address === "string") {
+            if (/^0x[0-9a-fA-F]{40}$/.test(input.address)) res.push(input.address.toLowerCase());
+          }
+          if (Array.isArray(input.addresses)) {
+            res.push(
+              ...input.addresses
+                // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+                .filter((a: any) => typeof a === "string" && /^0x[0-9a-fA-F]{40}$/.test(a))
+                .map((a: string) => a.toLowerCase()),
+            );
+          }
+          for (const val of Object.values(input)) {
+            if (typeof val === "string" && /^0x[0-9a-fA-F]{40}$/.test(val)) {
+              res.push(val.toLowerCase());
+            } else if (Array.isArray(val) || typeof val === "object") {
+              res.push(...extractAddresses(val));
+            }
+          }
+          return Array.from(new Set(res));
+        }
+        return [];
+      };
 
-			for (const k of Object.keys(results)) {
-				const item = results[k];
-				const deps = item.deployments || [];
-				const addresses = extractAddresses(deps);
-				for (const addr of addresses) {
-					addressMap[addr] = item;
-				}
-			}
+      for (const k of Object.keys(results)) {
+        const item = results[k];
+        const deps = item.deployments || [];
+        const addresses = extractAddresses(deps);
+        for (const addr of addresses) {
+          addressMap[addr] = item;
+        }
+      }
 
-			console.log(addressMap);
-			return addressMap;
-		} catch (err) {
-			console.error("Failed to process ZIP file:", err);
-			setError(
-				"Failed to process ZIP file. Please ensure it's a valid ZIP archive.",
-			);
-			setLoading(false);
-			return {};
-		}
-	}
+      console.log(addressMap);
+      return addressMap;
+    } catch (err) {
+      console.error("Failed to process ZIP file:", err);
+      setError("Failed to process ZIP file. Please ensure it's a valid ZIP archive.");
+      setLoading(false);
+      return {};
+    }
+  }
 
-	return { processZip, loading, error };
+  return { processZip, loading, error };
 }
diff --git a/src/index.tsx b/src/index.tsx
index 6667464..234c62c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,28 +1,26 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { WagmiProvider } from "wagmi";
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { networkConfig } from "./utils/networkConfig";
 import App from "./App";
-import { NotificationProvider } from "./context/NotificationContext";
 import { AppContextProvider } from "./context/AppContext";
+import { NotificationProvider } from "./context/NotificationContext";
+import { networkConfig } from "./utils/networkConfig";
 
 const queryClient = new QueryClient();
 
-const root = ReactDOM.createRoot(
-	document.getElementById("root") as HTMLElement,
-);
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
 root.render(
-	<React.StrictMode>
-		<WagmiProvider config={networkConfig}>
-			<QueryClientProvider client={queryClient}>
-				<NotificationProvider>
-					<AppContextProvider>
-						<App />
-					</AppContextProvider>
-				</NotificationProvider>
-			</QueryClientProvider>
-		</WagmiProvider>
-	</React.StrictMode>,
+  <React.StrictMode>
+    <WagmiProvider config={networkConfig}>
+      <QueryClientProvider client={queryClient}>
+        <NotificationProvider>
+          <AppContextProvider>
+            <App />
+          </AppContextProvider>
+        </NotificationProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  </React.StrictMode>,
 );
diff --git a/src/services/DataService.ts b/src/services/DataService.ts
index 47a23a3..4306042 100644
--- a/src/services/DataService.ts
+++ b/src/services/DataService.ts
@@ -1,824 +1,22 @@
-// src/services/DataService.ts
-import { RPCClient } from "./EVM/common/RPCClient";
-import { getRPCUrls } from "../config/rpcConfig";
-import { BlockFetcher } from "./EVM/L1/fetchers/block";
-import { TransactionFetcher } from "./EVM/L1/fetchers/transaction";
-import { AddressFetcher } from "./EVM/L1/fetchers/address";
-import { NetworkStatsFetcher } from "./EVM/L1/fetchers/networkStats";
-import { TraceFetcher, type TraceResult } from "./EVM/L1/fetchers/trace";
-import { BlockAdapter } from "./EVM/L1/adapters/block";
-import { TransactionAdapter } from "./EVM/L1/adapters/transaction";
-import { AddressAdapter } from "./EVM/L1/adapters/address";
-import { RPCMetadataService } from "./RPCMetadataService";
-// Arbitrum imports
-import { BlockFetcher as BlockFetcherArbitrum } from "./EVM/Arbitrum/fetchers/block";
-import { TransactionFetcher as TransactionFetcherArbitrum } from "./EVM/Arbitrum/fetchers/transaction";
-import { AddressFetcher as AddressFetcherArbitrum } from "./EVM/Arbitrum/fetchers/address";
-import { NetworkStatsFetcher as NetworkStatsFetcherArbitrum } from "./EVM/Arbitrum/fetchers/networkStats";
-import { BlockArbitrumAdapter } from "./EVM/Arbitrum/adapters/block";
-import { TransactionArbitrumAdapter } from "./EVM/Arbitrum/adapters/transaction";
-import { AddressAdapter as AddressAdapterArbitrum } from "./EVM/Arbitrum/adapters/address";
-// Optimism imports
-import { BlockFetcher as BlockFetcherOptimism } from "./EVM/Optimism/fetchers/block";
-import { TransactionFetcher as TransactionFetcherOptimism } from "./EVM/Optimism/fetchers/transaction";
-import { AddressFetcher as AddressFetcherOptimism } from "./EVM/Optimism/fetchers/address";
-import { NetworkStatsFetcher as NetworkStatsFetcherOptimism } from "./EVM/Optimism/fetchers/networkStats";
-import { BlockOptimismAdapter } from "./EVM/Optimism/adapters/block";
-import { TransactionOptimismAdapter } from "./EVM/Optimism/adapters/transaction";
-import { AddressAdapter as AddressAdapterOptimism } from "./EVM/Optimism/adapters/address";
-import type {
-	Block,
-	Transaction,
-	Address,
-	NetworkStats,
-	RpcUrlsContextType,
-	AddressTransactionsResult,
-	RPCStrategy,
-	DataWithMetadata,
-	RPCMetadata,
-} from "../types";
+import { type SupportedChainId, ClientFactory } from "explorer-network-connectors";
 
-interface CacheEntry<T> {
-	data: T;
-	timestamp: number;
-}
+import { AdapterFactory } from "./adapters/adaptersFactory";
+import type { NetworkAdapter } from "./adapters/NetworkAdapter";
+import type { RpcUrlsContextType } from "../types";
+import { getRPCUrls } from "../config/rpcConfig";
 
 export class DataService {
-	private rpcClient: RPCClient;
-	private blockFetcher:
-		| BlockFetcher
-		| BlockFetcherArbitrum
-		| BlockFetcherOptimism;
-	private transactionFetcher:
-		| TransactionFetcher
-		| TransactionFetcherArbitrum
-		| TransactionFetcherOptimism;
-	private addressFetcher:
-		| AddressFetcher
-		| AddressFetcherArbitrum
-		| AddressFetcherOptimism;
-	private networkStatsFetcher:
-		| NetworkStatsFetcher
-		| NetworkStatsFetcherArbitrum
-		| NetworkStatsFetcherOptimism;
-	private traceFetcher: TraceFetcher;
-	private isArbitrum: boolean;
-	private isOptimism: boolean;
-	private isLocalhost: boolean;
-
-	// Simple in-memory cache with chainId in key
-	private cache = new Map<string, CacheEntry<any>>();
-	private cacheTimeout = 30000; // 30 seconds
-
-	constructor(
-		private chainId: number,
-		rpcUrlsMap: RpcUrlsContextType,
-		strategy?: RPCStrategy,
-	) {
-		console.log(
-			"DataService constructor called with chainId:",
-			chainId,
-			"strategy:",
-			strategy,
-		);
-		const rpcUrls = getRPCUrls(chainId, rpcUrlsMap);
-		console.log("RPC URLs for chain", chainId, ":", rpcUrls);
-		this.rpcClient = new RPCClient({
-			rpcUrls,
-			strategy: strategy || "fallback",
-		});
-
-		// Check which network we're on
-		this.isArbitrum = chainId === 42161;
-		// OP Stack chains: Optimism (10), Base (8453)
-		this.isOptimism = chainId === 10 || chainId === 8453;
-		this.isLocalhost = chainId === 31337;
-
-		// Initialize trace fetcher for all networks (will check availability when used)
-		this.traceFetcher = new TraceFetcher(this.rpcClient);
-
-		if (this.isArbitrum) {
-			this.blockFetcher = new BlockFetcherArbitrum(this.rpcClient, chainId);
-			this.transactionFetcher = new TransactionFetcherArbitrum(
-				this.rpcClient,
-				chainId,
-			);
-			this.addressFetcher = new AddressFetcherArbitrum(this.rpcClient, chainId);
-			this.networkStatsFetcher = new NetworkStatsFetcherArbitrum(
-				this.rpcClient,
-				chainId,
-			);
-		} else if (this.isOptimism) {
-			this.blockFetcher = new BlockFetcherOptimism(this.rpcClient, chainId);
-			this.transactionFetcher = new TransactionFetcherOptimism(
-				this.rpcClient,
-				chainId,
-			);
-			this.addressFetcher = new AddressFetcherOptimism(this.rpcClient, chainId);
-			this.networkStatsFetcher = new NetworkStatsFetcherOptimism(
-				this.rpcClient,
-				chainId,
-			);
-		} else {
-			this.blockFetcher = new BlockFetcher(this.rpcClient, chainId);
-			this.transactionFetcher = new TransactionFetcher(this.rpcClient, chainId);
-			this.addressFetcher = new AddressFetcher(this.rpcClient, chainId);
-			this.networkStatsFetcher = new NetworkStatsFetcher(
-				this.rpcClient,
-				chainId,
-			);
-		}
-	}
-
-	private getCached<T>(key: string): T | null {
-		const entry = this.cache.get(key);
-		if (!entry) return null;
-
-		const isExpired = Date.now() - entry.timestamp > this.cacheTimeout;
-		if (isExpired) {
-			this.cache.delete(key);
-			return null;
-		}
-
-		return entry.data;
-	}
-
-	private setCache<T>(key: string, data: T): void {
-		this.cache.set(key, { data, timestamp: Date.now() });
-	}
-
-	private getCacheKey(prefix: string, identifier: string | number): string {
-		return `${this.chainId}:${prefix}:${identifier}`;
-	}
-
-	async getBlock(
-		blockNumber: number | "latest",
-	): Promise<DataWithMetadata<Block>> {
-		const cacheKey = this.getCacheKey("block", blockNumber);
-		const cached = this.getCached<Block>(cacheKey);
-		if (cached) return { data: cached };
-
-		// Check if parallel strategy is enabled
-		if (this.rpcClient.getStrategy() === "parallel") {
-			// Use parallel call to get all responses
-			const results = await this.rpcClient.parallelCall(
-				"eth_getBlockByNumber",
-				[
-					typeof blockNumber === "number"
-						? `0x${blockNumber.toString(16)}`
-						: blockNumber,
-					true,
-				],
-			);
-
-			// Build complete block objects for each provider
-			const enrichedResults = results.map((result) => {
-				if (result.status === "fulfilled" && result.response) {
-					const block = this.isArbitrum
-						? BlockArbitrumAdapter.fromRPCBlock(result.response, this.chainId)
-						: this.isOptimism
-							? BlockOptimismAdapter.fromRPCBlock(result.response, this.chainId)
-							: BlockAdapter.fromRPCBlock(result.response, this.chainId);
-
-					return {
-						...result,
-						response: block,
-					};
-				}
-				return result;
-			});
-
-			// Create metadata with enriched block objects
-			const metadata = RPCMetadataService.createMetadata(enrichedResults, "parallel");
-
-			// Get the default block (first successful)
-			const defaultBlock = enrichedResults.find(
-				(r) => r.status === "fulfilled" && r.response
-			)?.response;
-
-			if (!defaultBlock) {
-				throw new Error("All RPC endpoints failed");
-			}
-
-			// Only cache non-latest blocks
-			if (blockNumber !== "latest") {
-				this.setCache(cacheKey, defaultBlock);
-			}
-
-			return { data: defaultBlock, metadata };
-		} else {
-			// Fallback strategy - use existing logic
-			const rpcBlock = await this.blockFetcher.getBlock(blockNumber);
-			if (!rpcBlock) throw new Error("Block not found");
-
-			const block = this.isArbitrum
-				? BlockArbitrumAdapter.fromRPCBlock(rpcBlock, this.chainId)
-				: this.isOptimism
-					? BlockOptimismAdapter.fromRPCBlock(rpcBlock, this.chainId)
-					: BlockAdapter.fromRPCBlock(rpcBlock, this.chainId);
-
-			// Only cache non-latest blocks
-			if (blockNumber !== "latest") {
-				this.setCache(cacheKey, block);
-			}
-
-			return { data: block };
-		}
-	}
-
-	async getBlockWithTransactions(
-		blockNumber: number | "latest",
-	): Promise<Block & { transactionDetails: Transaction[] }> {
-		const rpcBlock =
-			await this.blockFetcher.getBlockWithTransactions(blockNumber);
-		if (!rpcBlock) throw new Error("Block not found");
-
-		const block = this.isArbitrum
-			? BlockArbitrumAdapter.fromRPCBlock(rpcBlock, this.chainId)
-			: this.isOptimism
-				? BlockOptimismAdapter.fromRPCBlock(rpcBlock, this.chainId)
-				: BlockAdapter.fromRPCBlock(rpcBlock, this.chainId);
-
-		// Transform transaction objects
-		const transactionDetails = (
-			Array.isArray(rpcBlock.transactions) ? rpcBlock.transactions : []
-		)
-			.filter((tx) => typeof tx !== "string")
-			.map((tx) =>
-				this.isArbitrum
-					? TransactionArbitrumAdapter.fromRPCTransaction(
-							tx as any,
-							this.chainId,
-						)
-					: this.isOptimism
-						? TransactionOptimismAdapter.fromRPCTransaction(
-								tx as any,
-								this.chainId,
-							)
-						: TransactionAdapter.fromRPCTransaction(tx as any, this.chainId),
-			);
-
-		return { ...block, transactionDetails };
-	}
-
-	async getTransaction(
-		txHash: string,
-	): Promise<DataWithMetadata<Transaction>> {
-		const cacheKey = this.getCacheKey("tx", txHash);
-		const cached = this.getCached<Transaction>(cacheKey);
-		if (cached) return { data: cached };
-
-		// Check if parallel strategy is enabled
-		if (this.rpcClient.getStrategy() === "parallel") {
-			// Use parallel call for transaction
-			const results = await this.rpcClient.parallelCall("eth_getTransactionByHash", [
-				txHash,
-			]);
-
-			// Find first successful response
-			const successfulResult = results.find((r) => r.status === "fulfilled");
-			if (!successfulResult || !successfulResult.response) {
-				throw new Error("All RPC endpoints failed");
-			}
-
-			const rpcTx = successfulResult.response;
-
-			// Get receipt (use same strategy)
-			const receiptResults = await this.rpcClient.parallelCall(
-				"eth_getTransactionReceipt",
-				[txHash],
-			);
-
-			// Get timestamp from block if available
-			let timestamp: string = "";
-			let baseFeePerGas: string | undefined;
-			if (rpcTx.blockNumber) {
-				const blockResult = await this.getBlock(parseInt(rpcTx.blockNumber, 16));
-				const block = blockResult.data;
-				timestamp = block.timestamp.toString();
-				baseFeePerGas = block.baseFeePerGas;
-			}
-
-			// Build complete transaction objects for each provider
-			// This includes receipts so that when users switch providers, they see complete data
-			const enrichedResults = results.map((txResult) => {
-				if (txResult.status === "fulfilled" && txResult.response) {
-					// Find matching receipt for this provider
-					const matchingReceipt = receiptResults.find(
-						(r) => r.url === txResult.url && r.status === "fulfilled"
-					);
-					const receipt = matchingReceipt?.response;
-
-					// Create adapted transaction with receipt
-					const transaction = this.isArbitrum
-						? TransactionArbitrumAdapter.fromRPCTransaction(
-								txResult.response,
-								this.chainId,
-								receipt,
-							)
-						: this.isOptimism
-							? TransactionOptimismAdapter.fromRPCTransaction(
-									txResult.response,
-									this.chainId,
-									receipt,
-								)
-							: TransactionAdapter.fromRPCTransaction(
-									txResult.response,
-									this.chainId,
-									receipt,
-								);
-
-					// Add timestamp and base fee
-					if (timestamp) {
-						transaction.timestamp = timestamp;
-					}
-					if (baseFeePerGas) {
-						transaction.blockBaseFeePerGas = baseFeePerGas;
-					}
-
-					return {
-						...txResult,
-						response: transaction,
-					};
-				}
-				return txResult;
-			});
-
-			// Create metadata with enriched transaction objects (including receipts)
-			const metadata = RPCMetadataService.createMetadata(enrichedResults, "parallel");
-
-			// Get the default transaction (first successful)
-			const defaultTransaction = enrichedResults.find(
-				(r) => r.status === "fulfilled" && r.response
-			)?.response;
-
-			if (!defaultTransaction) {
-				throw new Error("Failed to create transaction object");
-			}
-
-			this.setCache(cacheKey, defaultTransaction);
-			return { data: defaultTransaction, metadata };
-		} else {
-			// Fallback strategy
-			const [rpcTx, receipt] = await Promise.all([
-				this.transactionFetcher.getTransaction(txHash),
-				this.transactionFetcher.getTransactionReceipt(txHash),
-			]);
-
-			if (!rpcTx) throw new Error("Transaction not found");
-
-			// Get timestamp from block if available
-			let timestamp: string = "";
-			let baseFeePerGas: string | undefined;
-			if (rpcTx.blockNumber) {
-				const blockResult = await this.getBlock(parseInt(rpcTx.blockNumber, 16));
-				const block = blockResult.data;
-				timestamp = block.timestamp.toString();
-				baseFeePerGas = block.baseFeePerGas;
-			}
-
-			const transaction = this.isArbitrum
-				? TransactionArbitrumAdapter.fromRPCTransaction(
-						rpcTx,
-						this.chainId,
-						receipt,
-					)
-				: this.isOptimism
-					? TransactionOptimismAdapter.fromRPCTransaction(
-							rpcTx,
-							this.chainId,
-							receipt,
-						)
-					: TransactionAdapter.fromRPCTransaction(rpcTx, this.chainId, receipt);
-
-			if (timestamp) {
-				transaction.timestamp = timestamp;
-			}
-			if (baseFeePerGas) {
-				transaction.blockBaseFeePerGas = baseFeePerGas;
-			}
-
-			this.setCache(cacheKey, transaction);
-			return { data: transaction };
-		}
-	}
-
-	async getAddress(address: string): Promise<DataWithMetadata<Address>> {
-		const cacheKey = this.getCacheKey("address", address);
-		const cached = this.getCached<Address>(cacheKey);
-		if (cached) return { data: cached };
-
-		let metadata: RPCMetadata | undefined;
-		let addressData: Address;
-
-		if (this.rpcClient.getStrategy() === "parallel") {
-			// Parallel strategy: query all providers simultaneously
-			const [balanceResults, codeResults, txCountResults] = await Promise.all([
-				this.rpcClient.parallelCall<string>("eth_getBalance", [
-					address.toLowerCase(),
-					"latest",
-				]),
-				this.rpcClient.parallelCall<string>("eth_getCode", [
-					address.toLowerCase(),
-					"latest",
-				]),
-				this.rpcClient.parallelCall<string>("eth_getTransactionCount", [
-					address.toLowerCase(),
-					"latest",
-				]),
-			]);
-
-			// Build complete address objects for each provider
-			const enrichedResults = balanceResults.map((balanceResult, index) => {
-				if (balanceResult.status === "fulfilled" && balanceResult.response) {
-					const codeResult = codeResults[index];
-					const txCountResult = txCountResults[index];
-
-					// Check if all data is available for this provider
-					if (
-						codeResult?.status === "fulfilled" &&
-						codeResult.response &&
-						txCountResult?.status === "fulfilled" &&
-						txCountResult.response
-					) {
-						const balance = BigInt(balanceResult.response);
-						const code = codeResult.response;
-						const txCount = Number.parseInt(txCountResult.response, 16);
-
-						const addressData = this.isArbitrum
-							? AddressAdapterArbitrum.fromRawData(
-									address,
-									balance,
-									code,
-									txCount,
-									this.chainId,
-								)
-							: this.isOptimism
-								? AddressAdapterOptimism.fromRawData(
-										address,
-										balance,
-										code,
-										txCount,
-										this.chainId,
-									)
-								: AddressAdapter.fromRawData(
-										address,
-										balance,
-										code,
-										txCount,
-										this.chainId,
-									);
-
-						return {
-							...balanceResult,
-							response: addressData,
-						};
-					}
-				}
-				return balanceResult;
-			});
-
-			// Create metadata with enriched address objects
-			metadata = RPCMetadataService.createMetadata(enrichedResults, "parallel");
-
-			// Get the default address (first successful)
-			const defaultAddressResult = enrichedResults.find(
-				(r) => r.status === "fulfilled" && r.response
-			);
-
-			if (!defaultAddressResult || typeof defaultAddressResult.response === 'string') {
-				throw new Error("Failed to fetch address data from all providers");
-			}
-
-			addressData = defaultAddressResult.response as Address;
-		} else {
-			// Fallback strategy: use sequential fetching
-			const [balance, code, txCount] = await Promise.all([
-				this.addressFetcher.getBalance(address),
-				this.addressFetcher.getCode(address),
-				this.addressFetcher.getTransactionCount(address),
-			]);
-
-			addressData = this.isArbitrum
-				? AddressAdapterArbitrum.fromRawData(
-						address,
-						balance,
-						code,
-						txCount,
-						this.chainId,
-					)
-				: this.isOptimism
-					? AddressAdapterOptimism.fromRawData(
-							address,
-							balance,
-							code,
-							txCount,
-							this.chainId,
-						)
-					: AddressAdapter.fromRawData(
-							address,
-							balance,
-							code,
-							txCount,
-							this.chainId,
-						);
-		}
-
-		// Fetch recent transactions for this address
-		try {
-			const latestBlockNumber = await this.getLatestBlockNumber();
-			const recentTransactions: Transaction[] = [];
-			const blocksToCheck = 10; // Check last 10 blocks
-
-			for (
-				let i = 0;
-				i < blocksToCheck && recentTransactions.length < 10;
-				i++
-			) {
-				const blockNum = latestBlockNumber - i;
-				if (blockNum < 0) break;
-
-				const block = await this.getBlockWithTransactions(blockNum);
-				if (block.transactionDetails) {
-					const addressTxs = block.transactionDetails.filter(
-						(tx: Transaction) =>
-							tx.from?.toLowerCase() === address.toLowerCase() ||
-							tx.to?.toLowerCase() === address.toLowerCase(),
-					);
-					recentTransactions.push(...addressTxs);
-					if (recentTransactions.length >= 10) break;
-				}
-			}
-
-			addressData.recentTransactions = recentTransactions.slice(0, 10);
-		} catch (error) {
-			console.error("Error fetching recent transactions:", error);
-			addressData.recentTransactions = [];
-		}
-
-		this.setCache(cacheKey, addressData);
-		return { data: addressData, metadata };
-	}
-
-	/**
-	 * Get all transactions for an address using trace_filter or eth_getLogs fallback
-	 * @param address The address to get transactions for
-	 * @param fromBlock Starting block (default: last 10000 blocks)
-	 * @param toBlock Ending block (default: latest)
-	 * @param limit Maximum number of transactions to return
-	 */
-	async getAddressTransactions(
-		address: string,
-		fromBlock?: number | "earliest",
-		toBlock?: number | "latest",
-		limit: number = 100,
-	): Promise<AddressTransactionsResult> {
-		// If no fromBlock specified, use last 10000 blocks to avoid huge queries
-		let actualFromBlock = fromBlock;
-		if (!actualFromBlock) {
-			const latestBlock = await this.getLatestBlockNumber();
-			actualFromBlock = Math.max(0, latestBlock - 10000);
-		}
-
-		const result = await this.addressFetcher.getAddressTransactions(
-			address,
-			actualFromBlock,
-			toBlock || "latest",
-		);
-
-		// Limit the results
-		if (result.transactions.length > limit) {
-			result.transactions = result.transactions.slice(0, limit);
-		}
-
-		return result;
-	}
-
-	async getLatestBlockNumber(): Promise<number> {
-		return await this.blockFetcher.getLatestBlockNumber();
-	}
-
-	async getNetworkStats(): Promise<DataWithMetadata<NetworkStats>> {
-		const cacheKey = this.getCacheKey("networkStats", "current");
-		const cached = this.getCached<NetworkStats>(cacheKey);
-		if (cached) return { data: cached };
-
-		let metadata: RPCMetadata | undefined;
-
-		if (this.rpcClient.getStrategy() === "parallel") {
-			// Parallel strategy: query all providers simultaneously
-			const [gasPriceResults, syncingResults, blockNumberResults, clientVersionResults] =
-				await Promise.all([
-					this.rpcClient.parallelCall<string>("eth_gasPrice", []),
-					this.rpcClient.parallelCall<boolean | object>("eth_syncing", []),
-					this.rpcClient.parallelCall<string>("eth_blockNumber", []),
-					this.rpcClient.parallelCall<string>("web3_clientVersion", []),
-				]);
-
-			// Hardhat metadata (only for localhost)
-			let metadataResults: Array<{
-				url: string;
-				status: "fulfilled" | "rejected";
-				response?: string;
-				error?: Error;
-			}> = [];
-
-			if (this.chainId === 31337) {
-				metadataResults = await this.rpcClient.parallelCall<string>(
-					"hardhat_metadata",
-					[],
-				);
-			}
-
-			// Build complete NetworkStats objects for EACH provider
-			const enrichedResults = gasPriceResults.map((gasPriceResult, index) => {
-				if (gasPriceResult.status === "fulfilled" && gasPriceResult.response) {
-					const syncingResult = syncingResults[index];
-					const blockNumberResult = blockNumberResults[index];
-					const clientVersionResult = clientVersionResults[index];
-
-					// Verify all calls from same provider succeeded
-					if (
-						syncingResult?.status === "fulfilled" &&
-						blockNumberResult?.status === "fulfilled" &&
-						blockNumberResult.response
-					) {
-						// Get hardhat metadata for this provider (localhost only)
-						const hardhatMetadata =
-							this.chainId === 31337
-								? metadataResults[index]?.status === "fulfilled"
-									? metadataResults[index].response || ""
-									: ""
-								: "";
-
-						// Build complete NetworkStats object for this provider
-						const networkStats: NetworkStats = {
-							currentGasPrice: gasPriceResult.response,
-							isSyncing: typeof syncingResult.response === "object",
-							currentBlockNumber: blockNumberResult.response,
-							clientVersion: clientVersionResult?.response || "Unknown",
-							metadata: hardhatMetadata,
-						};
-
-						return {
-							...gasPriceResult,
-							response: networkStats, // Now contains complete domain object
-						};
-					}
-				}
-				// If any call failed for this provider, preserve the error
-				return gasPriceResult;
-			});
-
-			// Create metadata with enriched NetworkStats objects
-			metadata = RPCMetadataService.createMetadata(
-				enrichedResults,
-				"parallel",
-			);
-
-			// Extract default stats (first successful provider)
-			const defaultStats = enrichedResults.find(
-				(r) => r.status === "fulfilled" && r.response,
-			)?.response as NetworkStats | undefined;
-
-			if (!defaultStats) {
-				throw new Error("Failed to fetch network stats from all providers");
-			}
-
-			this.cache.set(cacheKey, { data: defaultStats, timestamp: Date.now() });
-			return { data: defaultStats, metadata };
-		} else {
-			// Fallback strategy: use sequential fetching
-			const stats = await this.networkStatsFetcher.getNetworkStats();
-			this.cache.set(cacheKey, { data: stats, timestamp: Date.now() });
-			return { data: stats };
-		}
-	}
-
-	async getLatestBlocks(count: number = 10): Promise<Block[]> {
-		const latestBlockNumber = await this.getLatestBlockNumber();
-		const blockNumbers = Array.from(
-			{ length: count },
-			(_, i) => latestBlockNumber - i,
-		).filter((num) => num >= 0); // Don't go below block 0
-
-		const blockResults = await Promise.all(
-			blockNumbers.map((num) => this.getBlock(num)),
-		);
-
-		return blockResults.map((result) => result.data);
-	}
-
-	async getTransactionsFromLatestBlocks(
-		blockCount: number = 10,
-	): Promise<Array<Transaction & { blockNumber: string }>> {
-		const latestBlockNumber = await this.getLatestBlockNumber();
-		const blockNumbers = Array.from(
-			{ length: blockCount },
-			(_, i) => latestBlockNumber - i,
-		).filter((num) => num >= 0);
-
-		// Fetch blocks with full transaction details
-		const blocksWithTxs = await Promise.all(
-			blockNumbers.map((num) => this.getBlockWithTransactions(num)),
-		);
-
-		// Flatten all transactions from all blocks, maintaining block order
-		const transactions: Array<Transaction & { blockNumber: string }> = [];
-		for (const block of blocksWithTxs) {
-			if (block.transactionDetails && block.transactionDetails.length > 0) {
-				for (const tx of block.transactionDetails) {
-					transactions.push({
-						...tx,
-						blockNumber: block.number,
-					});
-				}
-			}
-		}
-
-		return transactions;
-	}
-
-	async getTransactionsFromBlockRange(
-		fromBlock: number,
-		blockCount: number = 10,
-	): Promise<Array<Transaction & { blockNumber: string }>> {
-		// Calculate block numbers to fetch (going backwards from fromBlock)
-		const blockNumbers = Array.from(
-			{ length: blockCount },
-			(_, i) => fromBlock - i,
-		).filter((num) => num >= 0);
-
-		// Fetch blocks with full transaction details
-		const blocksWithTxs = await Promise.all(
-			blockNumbers.map((num) => this.getBlockWithTransactions(num)),
-		);
-
-		// Flatten all transactions from all blocks, maintaining block order
-		const transactions: Array<Transaction & { blockNumber: string }> = [];
-		for (const block of blocksWithTxs) {
-			if (block.transactionDetails && block.transactionDetails.length > 0) {
-				for (const tx of block.transactionDetails) {
-					transactions.push({
-						...tx,
-						blockNumber: block.number,
-					});
-				}
-			}
-		}
-
-		return transactions;
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-
-	clearCache(): void {
-		this.cache.clear();
-	}
-
-	clearCacheForChain(chainId: number): void {
-		const keysToDelete: string[] = [];
-		this.cache.forEach((_, key) => {
-			if (key.startsWith(`${chainId}:`)) {
-				keysToDelete.push(key);
-			}
-		});
-		keysToDelete.forEach((key) => {this.cache.delete(key)});
-	}
-
-	// Trace methods (available for localhost networks)
-	isTraceAvailable(): boolean {
-		return this.isLocalhost;
-	}
-
-	async getTransactionTrace(txHash: string): Promise<TraceResult | null> {
-		if (!this.isLocalhost) {
-			console.warn("Trace methods are only available on localhost networks");
-			return null;
-		}
-		return await this.traceFetcher.getOpcodeTrace(txHash);
-	}
-
-	async getCallTrace(txHash: string): Promise<any> {
-		if (!this.isLocalhost) {
-			console.warn("Trace methods are only available on localhost networks");
-			return null;
-		}
-		return await this.traceFetcher.getCallTrace(txHash);
-	}
-
-	async getBlockTrace(blockHash: string): Promise<TraceResult[] | null> {
-		if (!this.isLocalhost) {
-			console.warn("Trace methods are only available on localhost networks");
-			return null;
-		}
-		try {
-			return await this.traceFetcher.traceBlockByHash(blockHash);
-		} catch (error) {
-			console.error("Error getting block trace:", error);
-			return null;
-		}
-	}
+  networkAdapter: NetworkAdapter;
+  constructor(
+    networkId: SupportedChainId,
+    rpcUrlsMap: RpcUrlsContextType,
+    strategy: "fallback" | "parallel" = "fallback",
+  ) {
+    const rpcUrls = getRPCUrls(networkId, rpcUrlsMap);
+    const networkClient = ClientFactory.createTypedClient<typeof networkId>(networkId, {
+      rpcUrls,
+      type: strategy,
+    });
+    this.networkAdapter = AdapterFactory.createAdapter(networkId, networkClient);
+  }
 }
diff --git a/src/services/ENS/ENSService.ts b/src/services/ENS/ENSService.ts
new file mode 100644
index 0000000..a53cb98
--- /dev/null
+++ b/src/services/ENS/ENSService.ts
@@ -0,0 +1,524 @@
+// src/services/ENS/ENSService.ts
+import { AbiCoder, concat, keccak256, toUtf8Bytes } from "ethers";
+
+// ENS Contract addresses on Ethereum Mainnet
+const ENS_REGISTRY_ADDRESS = "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e";
+const _PUBLIC_RESOLVER_ADDRESS = "0xD4416b13d2b3a9aBae7AcD5D6C2BbDBE25686401";
+
+// Function selectors
+const SELECTORS = {
+  resolver: "0x0178b8bf", // resolver(bytes32 node)
+  addr: "0x3b3b57de", // addr(bytes32 node)
+  addrWithCoinType: "0xf1cb7e06", // addr(bytes32 node, uint256 coinType)
+  name: "0x691f3431", // name(bytes32 node)
+  text: "0x59d1d43c", // text(bytes32 node, string key)
+  contenthash: "0xbc1c58d1", // contenthash(bytes32 node)
+};
+
+// Common text record keys
+export const TEXT_RECORD_KEYS = [
+  "avatar",
+  "email",
+  "url",
+  "description",
+  "com.twitter",
+  "com.github",
+  "com.discord",
+  "org.telegram",
+  "notice",
+  "keywords",
+  "location",
+];
+
+export interface ENSRecords {
+  name?: string;
+  address?: string;
+  contenthash?: string;
+  textRecords: Record<string, string>;
+}
+
+export interface ENSResolveResult {
+  address: string;
+  ensName: string;
+  records?: ENSRecords;
+}
+
+export interface ENSReverseResult {
+  ensName: string | null;
+  verified: boolean; // true if forward resolution matches
+}
+
+export class ENSService {
+  private rpcUrls: string[];
+  private abiCoder: AbiCoder;
+
+  constructor(rpcUrl: string | string[]) {
+    this.rpcUrls = Array.isArray(rpcUrl) ? rpcUrl : [rpcUrl];
+    this.abiCoder = new AbiCoder();
+  }
+
+  /**
+   * Normalize an ENS name according to UTS-46
+   * Converts to lowercase and handles special characters
+   */
+  private normalize(name: string): string {
+    // Basic normalization: lowercase and trim
+    // For full UTS-46 compliance, use a library like @adraffy/ens-normalize
+    return name.toLowerCase().trim();
+  }
+
+  /**
+   * Compute the namehash of an ENS name
+   * Follows ENS namehashing algorithm: recursively hash from right to left
+   */
+  namehash(name: string): string {
+    if (!name || name === "") {
+      return `0x${"0".repeat(64)}`;
+    }
+
+    const normalized = this.normalize(name);
+    const labels = normalized.split(".");
+
+    let node = "0x0000000000000000000000000000000000000000000000000000000000000000";
+
+    for (let i = labels.length - 1; i >= 0; i--) {
+      const label = labels[i];
+      if (!label) continue;
+
+      const labelHash = keccak256(toUtf8Bytes(label));
+      // Concatenate node and labelHash as bytes, then hash
+      node = keccak256(concat([node, labelHash]));
+    }
+
+    return node;
+  }
+
+  /**
+   * Make an eth_call to the RPC endpoint with fallback support
+   */
+  private async ethCall(to: string, data: string): Promise<string> {
+    const errors: Error[] = [];
+
+    for (const rpcUrl of this.rpcUrls) {
+      try {
+        const response = await fetch(rpcUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            jsonrpc: "2.0",
+            id: 1,
+            method: "eth_call",
+            params: [{ to, data }, "latest"],
+          }),
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+          errors.push(new Error(result.error.message || "RPC error"));
+          continue; // Try next RPC
+        }
+
+        if (result.result === undefined || result.result === null) {
+          errors.push(new Error("no response"));
+          continue; // Try next RPC
+        }
+
+        return result.result;
+      } catch (err) {
+        errors.push(err instanceof Error ? err : new Error(String(err)));
+      }
+    }
+
+    // All RPCs failed
+    throw errors[0] || new Error("All RPC endpoints failed");
+  }
+
+  /**
+   * Get the resolver address for an ENS name
+   */
+  async getResolver(name: string): Promise<string | null> {
+    const node = this.namehash(name);
+    const data = SELECTORS.resolver + node.slice(2);
+
+    try {
+      const result = await this.ethCall(ENS_REGISTRY_ADDRESS, data);
+
+      // Extract address from result (last 20 bytes of 32-byte response)
+      if (
+        result === "0x" ||
+        result === "0x0000000000000000000000000000000000000000000000000000000000000000"
+      ) {
+        return null;
+      }
+
+      const resolverAddress = `0x${result.slice(-40)}`;
+      return resolverAddress;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Forward resolution: ENS name -> Ethereum address
+   */
+  async resolve(name: string): Promise<string | null> {
+    // First get the resolver for this name
+    const resolverAddress = await this.getResolver(name);
+    if (!resolverAddress) {
+      return null;
+    }
+
+    const node = this.namehash(name);
+    const data = SELECTORS.addr + node.slice(2);
+
+    try {
+      const result = await this.ethCall(resolverAddress, data);
+
+      if (
+        result === "0x" ||
+        result === "0x0000000000000000000000000000000000000000000000000000000000000000"
+      ) {
+        return null;
+      }
+
+      // Extract address from result
+      const address = `0x${result.slice(-40)}`;
+      return address;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Reverse resolution: Ethereum address -> ENS name
+   * Uses the .addr.reverse domain
+   */
+  async reverseResolve(address: string): Promise<ENSReverseResult> {
+    // Create the reverse lookup name: <address>.addr.reverse
+    const reverseAddress = address.toLowerCase().slice(2); // Remove 0x prefix
+    const reverseName = `${reverseAddress}.addr.reverse`;
+
+    // Get the resolver for the reverse name
+    const resolverAddress = await this.getResolver(reverseName);
+    if (!resolverAddress) {
+      return { ensName: null, verified: false };
+    }
+
+    // Call name() on the resolver
+    const node = this.namehash(reverseName);
+    const data = SELECTORS.name + node.slice(2);
+
+    try {
+      const result = await this.ethCall(resolverAddress, data);
+
+      if (result === "0x" || result.length <= 2) {
+        return { ensName: null, verified: false };
+      }
+
+      // Decode the string result
+      const ensName = this.decodeString(result);
+
+      if (!ensName) {
+        return { ensName: null, verified: false };
+      }
+
+      // Verify the forward resolution matches
+      const forwardAddress = await this.resolve(ensName);
+      const verified = forwardAddress?.toLowerCase() === address.toLowerCase();
+
+      return { ensName, verified };
+    } catch {
+      return { ensName: null, verified: false };
+    }
+  }
+
+  /**
+   * Get a text record for an ENS name
+   */
+  async getText(name: string, key: string): Promise<string | null> {
+    const resolverAddress = await this.getResolver(name);
+    if (!resolverAddress) {
+      return null;
+    }
+
+    const node = this.namehash(name);
+
+    // Encode the text() call: selector + node + encoded string key
+    const encodedKey = this.abiCoder.encode(["string"], [key]);
+    // The data format is: selector + node + offset (0x40) + string data
+    // For text(bytes32,string), ABI encoding requires:
+    // - bytes32 node (32 bytes)
+    // - offset to string (32 bytes pointing to 0x40 = 64)
+    // - string length (32 bytes)
+    // - string data (padded to 32 bytes)
+
+    const data =
+      SELECTORS.text +
+      node.slice(2) +
+      "0000000000000000000000000000000000000000000000000000000000000040" +
+      encodedKey.slice(66); // Skip the 0x and first 32 bytes (offset)
+
+    try {
+      const result = await this.ethCall(resolverAddress, data);
+
+      if (result === "0x" || result.length <= 2) {
+        return null;
+      }
+
+      return this.decodeString(result);
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Get all common text records for an ENS name
+   */
+  async getAllTextRecords(name: string): Promise<Record<string, string>> {
+    const records: Record<string, string> = {};
+
+    // Fetch all records in parallel
+    const results = await Promise.all(
+      TEXT_RECORD_KEYS.map(async (key) => {
+        const value = await this.getText(name, key);
+        return { key, value };
+      }),
+    );
+
+    for (const { key, value } of results) {
+      if (value) {
+        records[key] = value;
+      }
+    }
+
+    return records;
+  }
+
+  /**
+   * Get the contenthash for an ENS name
+   */
+  async getContenthash(name: string): Promise<string | null> {
+    const resolverAddress = await this.getResolver(name);
+    if (!resolverAddress) {
+      return null;
+    }
+
+    const node = this.namehash(name);
+    const data = SELECTORS.contenthash + node.slice(2);
+
+    try {
+      const result = await this.ethCall(resolverAddress, data);
+
+      if (result === "0x" || result.length <= 2) {
+        return null;
+      }
+
+      // The contenthash is returned as dynamic bytes
+      // Decode it and return as hex
+      const decoded = this.decodeBytes(result);
+      return decoded;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Get all ENS records for a name
+   */
+  async getRecords(name: string): Promise<ENSRecords> {
+    const [address, contenthash, textRecords] = await Promise.all([
+      this.resolve(name),
+      this.getContenthash(name),
+      this.getAllTextRecords(name),
+    ]);
+
+    return {
+      name,
+      address: address || undefined,
+      contenthash: contenthash || undefined,
+      textRecords,
+    };
+  }
+
+  /**
+   * Decode an ABI-encoded string from RPC result
+   */
+  private decodeString(data: string): string | null {
+    try {
+      // ABI-encoded string format:
+      // First 32 bytes: offset to string data
+      // At offset: 32 bytes length + string data (padded to 32 bytes)
+      if (data.length < 66) return null;
+
+      // Parse the offset
+      const offset = parseInt(data.slice(2, 66), 16) * 2 + 2;
+
+      // Parse the length
+      const lengthHex = data.slice(offset, offset + 64);
+      const length = parseInt(lengthHex, 16);
+
+      if (length === 0) return null;
+
+      // Extract the string bytes
+      const stringHex = data.slice(offset + 64, offset + 64 + length * 2);
+
+      // Convert hex to string
+      let result = "";
+      for (let i = 0; i < stringHex.length; i += 2) {
+        result += String.fromCharCode(parseInt(stringHex.slice(i, i + 2), 16));
+      }
+
+      return result;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Decode ABI-encoded bytes from RPC result
+   */
+  private decodeBytes(data: string): string | null {
+    try {
+      if (data.length < 66) return null;
+
+      // Parse the offset
+      const offset = parseInt(data.slice(2, 66), 16) * 2 + 2;
+
+      // Parse the length
+      const lengthHex = data.slice(offset, offset + 64);
+      const length = parseInt(lengthHex, 16);
+
+      if (length === 0) return null;
+
+      // Extract the bytes
+      const bytesHex = data.slice(offset + 64, offset + 64 + length * 2);
+
+      return `0x${bytesHex}`;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Decode contenthash to human-readable format
+   * Supports IPFS, IPNS, Swarm, Onion, and Skylink
+   */
+  decodeContenthash(contenthash: string): { type: string; url: string } | null {
+    if (!contenthash || contenthash === "0x") return null;
+
+    try {
+      // Remove 0x prefix
+      const hex = contenthash.slice(2);
+
+      // Check the codec prefix
+      // IPFS: e3 01 01 (ipfs-ns, dag-pb, sha2-256)
+      // IPNS: e5 01 01
+      // Swarm: e4 01 01
+      // Onion: bc (onion)
+      // Onion3: bd
+      // Skylink: 90b2c605
+
+      if (hex.startsWith("e3010120")) {
+        // IPFS CIDv0 (starts with Qm)
+        const cid = this.hexToBase58(hex.slice(8));
+        return { type: "ipfs", url: `ipfs://${cid}` };
+      } else if (hex.startsWith("e5010120")) {
+        // IPNS
+        const cid = this.hexToBase58(hex.slice(8));
+        return { type: "ipns", url: `ipns://${cid}` };
+      } else if (hex.startsWith("e40101")) {
+        // Swarm
+        const hash = hex.slice(6);
+        return { type: "swarm", url: `bzz://${hash}` };
+      } else if (hex.startsWith("bc")) {
+        // Onion v2
+        const onion = this.hexToBase32(hex.slice(2));
+        return { type: "onion", url: `http://${onion}.onion` };
+      } else if (hex.startsWith("bd")) {
+        // Onion v3
+        const onion = this.hexToBase32(hex.slice(2));
+        return { type: "onion", url: `http://${onion}.onion` };
+      }
+
+      return { type: "unknown", url: contenthash };
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Convert hex to base58 (for IPFS CIDs)
+   * Simplified version - for full support use a proper base58 library
+   */
+  private hexToBase58(hex: string): string {
+    // This is a simplified conversion
+    // For production, use a proper base58 library
+    const ALPHABET = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
+
+    let num = BigInt(`0x${hex}`);
+    let result = "";
+
+    const fifty8 = BigInt(58);
+    const zero = BigInt(0);
+
+    while (num > zero) {
+      const remainder = Number(num % fifty8);
+      result = ALPHABET[remainder] + result;
+      num = num / fifty8;
+    }
+
+    // Add leading zeros
+    for (let i = 0; i < hex.length; i += 2) {
+      if (hex.slice(i, i + 2) === "00") {
+        result = `1${result}`;
+      } else {
+        break;
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Convert hex to base32 (for onion addresses)
+   */
+  private hexToBase32(hex: string): string {
+    const ALPHABET = "abcdefghijklmnopqrstuvwxyz234567";
+    const bytes: number[] = [];
+
+    for (let i = 0; i < hex.length; i += 2) {
+      bytes.push(parseInt(hex.slice(i, i + 2), 16));
+    }
+
+    let bits = "";
+    for (const byte of bytes) {
+      bits += byte.toString(2).padStart(8, "0");
+    }
+
+    let result = "";
+    for (let i = 0; i < bits.length; i += 5) {
+      const chunk = bits.slice(i, i + 5).padEnd(5, "0");
+      result += ALPHABET[parseInt(chunk, 2)];
+    }
+
+    return result;
+  }
+
+  /**
+   * Check if a string looks like an ENS name
+   */
+  static isENSName(name: string): boolean {
+    if (!name || typeof name !== "string") return false;
+
+    // Must contain at least one dot
+    if (!name.includes(".")) return false;
+
+    // Common ENS patterns
+    const ensPatterns = [/\.eth$/i, /\.xyz$/i, /\.luxe$/i, /\.kred$/i, /\.art$/i, /\.club$/i];
+
+    return ensPatterns.some((pattern) => pattern.test(name));
+  }
+}
+
+export default ENSService;
diff --git a/src/services/EVM/Arbitrum/adapters/address.ts b/src/services/EVM/Arbitrum/adapters/address.ts
deleted file mode 100644
index 940060f..0000000
--- a/src/services/EVM/Arbitrum/adapters/address.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// src/services/EVM/L1/adapters/address.ts
-import type { Address } from "../../../../types";
-
-export class AddressAdapter {
-	static fromRawData(
-		address: string,
-		balance: bigint,
-		code: string,
-		txCount: number,
-		chainId: number,
-	): Address {
-		return {
-			address,
-			balance: balance.toString(),
-			txCount: txCount.toString(),
-			code: code,
-			storeageAt: {},
-		};
-	}
-}
diff --git a/src/services/EVM/Arbitrum/adapters/block.ts b/src/services/EVM/Arbitrum/adapters/block.ts
deleted file mode 100644
index dfd1f3c..0000000
--- a/src/services/EVM/Arbitrum/adapters/block.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-// src/services/EVM/Arbitrum/adapters/block.ts
-import type { RPCBlock } from "../../../../types";
-import type { BlockArbitrum } from "../../../../types";
-
-export class BlockArbitrumAdapter {
-	static fromRPCBlock(rpcBlock: any, chainId: number): BlockArbitrum {
-		console.log("Arbitrum block:", rpcBlock);
-		const timestamp = rpcBlock.timestamp
-			? parseInt(
-					rpcBlock.timestamp,
-					rpcBlock.timestamp.startsWith("0x") ? 16 : 10,
-				).toString()
-			: "0";
-		return {
-			number: rpcBlock.number,
-			hash: rpcBlock.hash,
-			parentHash: rpcBlock.parentHash,
-			timestamp,
-			baseFeePerGas: rpcBlock.baseFeePerGas
-				? BigInt(rpcBlock.baseFeePerGas).toString()
-				: undefined,
-			nonce: rpcBlock.nonce,
-			difficulty: BigInt(rpcBlock.difficulty || 0).toString(),
-			gasLimit: BigInt(rpcBlock.gasLimit).toString(),
-			gasUsed: BigInt(rpcBlock.gasUsed).toString(),
-			miner: rpcBlock.miner,
-			extraData: rpcBlock.extraData,
-			transactions: Array.isArray(rpcBlock.transactions)
-				? rpcBlock.transactions.map((tx: any) =>
-						typeof tx === "string" ? tx : tx.hash,
-					)
-				: [],
-			size: rpcBlock.size,
-			logsBloom: rpcBlock.logsBloom,
-			stateRoot: rpcBlock.stateRoot,
-			receiptsRoot: rpcBlock.receiptsRoot,
-			transactionsRoot: rpcBlock.transactionsRoot,
-			uncles: rpcBlock.uncles || [],
-			mixHash: rpcBlock.mixHash,
-			sha3Uncles: rpcBlock.sha3Uncles,
-			totalDifficulty: BigInt(rpcBlock.difficulty || 0).toString(),
-			blobGasUsed: rpcBlock.blobGasUsed,
-			excessBlobGas: rpcBlock.excessBlobGas,
-			withdrawalsRoot: rpcBlock.withdrawalsRoot,
-			withdrawals: rpcBlock.withdrawals || [],
-			// Arbitrum-specific fields
-			l1BlockNumber: rpcBlock.l1BlockNumber || "0",
-			sendCount: rpcBlock.sendCount || "0",
-			sendRoot:
-				rpcBlock.sendRoot ||
-				"0x0000000000000000000000000000000000000000000000000000000000000000",
-		};
-	}
-}
diff --git a/src/services/EVM/Arbitrum/adapters/transaction.ts b/src/services/EVM/Arbitrum/adapters/transaction.ts
deleted file mode 100644
index 6955923..0000000
--- a/src/services/EVM/Arbitrum/adapters/transaction.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-// src/services/EVM/Arbitrum/adapters/transaction.ts
-import type { RPCTransaction, RPCTransactionReceipt } from "../../../../types";
-import type {
-	TransactionArbitrum,
-	TransactionReceiptArbitrum,
-} from "../../../../types";
-
-export class TransactionArbitrumAdapter {
-	static fromRPCTransaction(
-		rpcTx: any,
-		chainId: number,
-		receipt?: any | null,
-	): TransactionArbitrum {
-		const transaction: TransactionArbitrum = {
-			hash: rpcTx.hash,
-			from: rpcTx.from,
-			to: rpcTx.to,
-			value: BigInt(rpcTx.value).toString(),
-			gas: BigInt(rpcTx.gas).toString(),
-			gasPrice: rpcTx.gasPrice ? BigInt(rpcTx.gasPrice).toString() : "0",
-			maxFeePerGas: rpcTx.maxFeePerGas
-				? BigInt(rpcTx.maxFeePerGas).toString()
-				: undefined,
-			maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
-				? BigInt(rpcTx.maxPriorityFeePerGas).toString()
-				: undefined,
-			nonce: parseInt(rpcTx.nonce, 16).toString(),
-			data: rpcTx.input,
-			blockNumber: parseInt(rpcTx.blockNumber, 16).toString(),
-			blockHash: rpcTx.blockHash,
-			transactionIndex: parseInt(rpcTx.transactionIndex, 16).toString(),
-			v: rpcTx.v,
-			r: rpcTx.r,
-			s: rpcTx.s,
-			type: rpcTx.type,
-			// Arbitrum-specific field
-			requestId: rpcTx.requestId || "0x0",
-		};
-
-		if (receipt) {
-			const arbitrumReceipt: TransactionReceiptArbitrum = {
-				blockHash: receipt.blockHash,
-				blockNumber: parseInt(receipt.blockNumber, 16).toString(),
-				contractAddress: receipt.contractAddress,
-				cumulativeGasUsed: BigInt(receipt.cumulativeGasUsed).toString(),
-				effectiveGasPrice: BigInt(receipt.effectiveGasPrice).toString(),
-				from: receipt.from,
-				gasUsed: BigInt(receipt.gasUsed).toString(),
-				logs: receipt.logs,
-				logsBloom: receipt.logsBloom,
-				status: receipt.status,
-				to: receipt.to,
-				transactionHash: receipt.transactionHash,
-				transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
-				type: receipt.type,
-				// Arbitrum-specific fields
-				l1BlockNumber: receipt.l1BlockNumber || "0",
-				gasUsedForL1: receipt.gasUsedForL1 || "0",
-			};
-			transaction.receipt = arbitrumReceipt;
-		}
-
-		return transaction;
-	}
-}
diff --git a/src/services/EVM/Arbitrum/fetchers/address.ts b/src/services/EVM/Arbitrum/fetchers/address.ts
deleted file mode 100644
index 8793c30..0000000
--- a/src/services/EVM/Arbitrum/fetchers/address.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-// src/services/EVM/Arbitrum/fetchers/address.ts
-import { RPCClient } from "../../common/RPCClient";
-import {
-	TraceFilterResult,
-	LogEntry,
-	AddressTransactionsResult,
-} from "../../../../types";
-
-export class AddressFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getBalance(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<bigint> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		const result = await this.rpcClient.call<string>("eth_getBalance", [
-			address,
-			blockParam,
-		]);
-		return BigInt(result);
-	}
-
-	async getCode(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<string> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		return await this.rpcClient.call<string>("eth_getCode", [
-			address,
-			blockParam,
-		]);
-	}
-
-	async getTransactionCount(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<number> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		const result = await this.rpcClient.call<string>(
-			"eth_getTransactionCount",
-			[address, blockParam],
-		);
-		return parseInt(result, 16);
-	}
-
-	async getStorageAt(
-		address: string,
-		position: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<string> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		return await this.rpcClient.call<string>("eth_getStorageAt", [
-			address,
-			position,
-			blockParam,
-		]);
-	}
-
-	/**
-	 * Get all transactions for an address using trace_filter
-	 * Note: Arbitrum public RPCs may not support trace_filter
-	 */
-	async getTransactionsFromTrace(
-		address: string,
-		fromBlock: number | "earliest" = "earliest",
-		toBlock: number | "latest" = "latest",
-	): Promise<TraceFilterResult[]> {
-		const fromBlockParam =
-			fromBlock === "earliest" ? "earliest" : `0x${fromBlock.toString(16)}`;
-		const toBlockParam =
-			toBlock === "latest" ? "latest" : `0x${toBlock.toString(16)}`;
-
-		const fromTraces = await this.rpcClient.call<TraceFilterResult[]>(
-			"trace_filter",
-			[
-				{
-					fromBlock: fromBlockParam,
-					toBlock: toBlockParam,
-					fromAddress: [address],
-				},
-			],
-		);
-
-		const toTraces = await this.rpcClient.call<TraceFilterResult[]>(
-			"trace_filter",
-			[
-				{
-					fromBlock: fromBlockParam,
-					toBlock: toBlockParam,
-					toAddress: [address],
-				},
-			],
-		);
-
-		return [...fromTraces, ...toTraces];
-	}
-
-	/**
-	 * Get logs for an address using eth_getLogs
-	 */
-	async getLogsForAddress(
-		address: string,
-		fromBlock: number | "earliest" = "earliest",
-		toBlock: number | "latest" = "latest",
-	): Promise<LogEntry[]> {
-		const fromBlockParam =
-			fromBlock === "earliest" ? "earliest" : `0x${fromBlock.toString(16)}`;
-		const toBlockParam =
-			toBlock === "latest" ? "latest" : `0x${toBlock.toString(16)}`;
-		const paddedAddress =
-			"0x" + address.toLowerCase().slice(2).padStart(64, "0");
-
-		// Get logs emitted BY this address (for contracts)
-		const logsFromContract = await this.rpcClient.call<LogEntry[]>("eth_getLogs", [
-			{
-				fromBlock: fromBlockParam,
-				toBlock: toBlockParam,
-				address: address,
-			},
-		]);
-
-		const logsAsTopic1 = await this.rpcClient.call<LogEntry[]>("eth_getLogs", [
-			{
-				fromBlock: fromBlockParam,
-				toBlock: toBlockParam,
-				topics: [null, paddedAddress],
-			},
-		]);
-
-		const logsAsTopic2 = await this.rpcClient.call<LogEntry[]>("eth_getLogs", [
-			{
-				fromBlock: fromBlockParam,
-				toBlock: toBlockParam,
-				topics: [null, null, paddedAddress],
-			},
-		]);
-
-		// Combine all logs and deduplicate
-		const allLogs = [...logsFromContract, ...logsAsTopic1, ...logsAsTopic2];
-		const seen = new Set<string>();
-		return allLogs.filter(log => {
-			const key = `${log.transactionHash}-${log.logIndex}`;
-			if (seen.has(key)) return false;
-			seen.add(key);
-			return true;
-		});
-	}
-
-	/**
-	 * Get address transactions - tries trace_filter first, falls back to logs
-	 */
-	async getAddressTransactions(
-		address: string,
-		fromBlock: number | "earliest" = "earliest",
-		toBlock: number | "latest" = "latest",
-	): Promise<AddressTransactionsResult> {
-		try {
-			const traces = await this.getTransactionsFromTrace(
-				address,
-				fromBlock,
-				toBlock,
-			);
-
-			const sortedTraces = traces.sort((a, b) => b.blockNumber - a.blockNumber);
-			const sortedHashes: string[] = [];
-			const seen = new Set<string>();
-			for (const trace of sortedTraces) {
-				if (trace.transactionHash && !seen.has(trace.transactionHash)) {
-					seen.add(trace.transactionHash);
-					sortedHashes.push(trace.transactionHash);
-				}
-			}
-
-			return {
-				transactions: sortedHashes,
-				source: "trace_filter",
-				isComplete: true,
-			};
-		} catch (error: any) {
-			console.log(
-				"trace_filter not available on Arbitrum, falling back to logs:",
-				error.message,
-			);
-		}
-
-		try {
-			const logs = await this.getLogsForAddress(address, fromBlock, toBlock);
-
-			const sortedLogs = logs.sort(
-				(a, b) => parseInt(b.blockNumber, 16) - parseInt(a.blockNumber, 16),
-			);
-			const sortedHashes: string[] = [];
-			const seen = new Set<string>();
-			for (const log of sortedLogs) {
-				if (log.transactionHash && !seen.has(log.transactionHash)) {
-					seen.add(log.transactionHash);
-					sortedHashes.push(log.transactionHash);
-				}
-			}
-
-			return {
-				transactions: sortedHashes,
-				source: "logs",
-				isComplete: false,
-				message:
-					"Showing transactions from event logs only. ETH transfers and transactions without events are not included.",
-			};
-		} catch (error: any) {
-			console.error("eth_getLogs failed on Arbitrum:", error.message);
-		}
-
-		return {
-			transactions: [],
-			source: "none",
-			isComplete: false,
-			message: "Unable to fetch transaction history on Arbitrum.",
-		};
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/Arbitrum/fetchers/block.ts b/src/services/EVM/Arbitrum/fetchers/block.ts
deleted file mode 100644
index b4d05d2..0000000
--- a/src/services/EVM/Arbitrum/fetchers/block.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// src/services/EVM/L1/fetchers/mainnet/block.ts
-import { RPCClient } from "../../common/RPCClient";
-import type { RPCBlock } from "../../../../types";
-
-export class BlockFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getBlock(blockNumber: number | "latest"): Promise<RPCBlock | null> {
-		console.log("Fetching block number:", blockNumber);
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-
-		return await this.rpcClient.call<RPCBlock>("eth_getBlockByNumber", [
-			blockParam,
-			false, // don't include full transaction objects
-		]);
-	}
-
-	async getBlockWithTransactions(
-		blockNumber: number | "latest",
-	): Promise<RPCBlock | null> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-
-		return await this.rpcClient.call<RPCBlock>("eth_getBlockByNumber", [
-			blockParam,
-			true, // include full transaction objects
-		]);
-	}
-
-	async getLatestBlockNumber(): Promise<number> {
-		const result = await this.rpcClient.call<string>("eth_blockNumber", []);
-		return parseInt(result, 16);
-	}
-
-	async getBlockByHash(
-		blockHash: string,
-		fullTransactions: boolean = false,
-	): Promise<RPCBlock | null> {
-		return await this.rpcClient.call<RPCBlock>("eth_getBlockByHash", [
-			blockHash,
-			fullTransactions,
-		]);
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/Arbitrum/fetchers/networkStats.ts b/src/services/EVM/Arbitrum/fetchers/networkStats.ts
deleted file mode 100644
index ea280ca..0000000
--- a/src/services/EVM/Arbitrum/fetchers/networkStats.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// src/services/EVM/L1/fetchers/networkStats.ts
-import { RPCClient } from "../../common/RPCClient";
-import type { NetworkStats } from "../../../../types";
-
-export class NetworkStatsFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getNetworkStats(): Promise<NetworkStats> {
-		const [gasPrice, syncing, blockNumber, clientVersion] = await Promise.all([
-			this.rpcClient.call<string>("eth_gasPrice", []),
-			this.rpcClient.call<boolean | object>("eth_syncing", []),
-			this.rpcClient.call<string>("eth_blockNumber", []),
-			this.rpcClient.call<string>("web3_clientVersion", []).catch(() => "Unknown"),
-		]);
-
-		const metadata = "";
-
-		// eth_syncing returns false when not syncing, or an object with sync status when syncing
-		const isSyncing = typeof syncing === "object";
-
-		return {
-			currentGasPrice: gasPrice,
-			isSyncing,
-			currentBlockNumber: blockNumber,
-			clientVersion,
-			metadata: metadata,
-		};
-	}
-
-	async getGasPrice(): Promise<string> {
-		return await this.rpcClient.call<string>("eth_gasPrice", []);
-	}
-
-	async getSyncingStatus(): Promise<boolean> {
-		const result = await this.rpcClient.call<boolean | object>(
-			"eth_syncing",
-			[],
-		);
-		return typeof result === "object";
-	}
-
-	async getBlockNumber(): Promise<string> {
-		return await this.rpcClient.call<string>("eth_blockNumber", []);
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/Arbitrum/fetchers/transaction.ts b/src/services/EVM/Arbitrum/fetchers/transaction.ts
deleted file mode 100644
index 546a3c4..0000000
--- a/src/services/EVM/Arbitrum/fetchers/transaction.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// src/services/EVM/L1/fetchers/mainnet/transaction.ts
-import { RPCClient } from "../../common/RPCClient";
-import type { RPCTransaction, RPCTransactionReceipt } from "../../../../types";
-
-export class TransactionFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getTransaction(txHash: string): Promise<RPCTransaction | null> {
-		return await this.rpcClient.call<RPCTransaction>(
-			"eth_getTransactionByHash",
-			[txHash],
-		);
-	}
-
-	async getTransactionReceipt(
-		txHash: string,
-	): Promise<RPCTransactionReceipt | null> {
-		return await this.rpcClient.call<RPCTransactionReceipt>(
-			"eth_getTransactionReceipt",
-			[txHash],
-		);
-	}
-
-	async getTransactionCount(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<number> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		const result = await this.rpcClient.call<string>(
-			"eth_getTransactionCount",
-			[address, blockParam],
-		);
-		return parseInt(result, 16);
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/L1/adapters/address.ts b/src/services/EVM/L1/adapters/address.ts
deleted file mode 100644
index 940060f..0000000
--- a/src/services/EVM/L1/adapters/address.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// src/services/EVM/L1/adapters/address.ts
-import type { Address } from "../../../../types";
-
-export class AddressAdapter {
-	static fromRawData(
-		address: string,
-		balance: bigint,
-		code: string,
-		txCount: number,
-		chainId: number,
-	): Address {
-		return {
-			address,
-			balance: balance.toString(),
-			txCount: txCount.toString(),
-			code: code,
-			storeageAt: {},
-		};
-	}
-}
diff --git a/src/services/EVM/L1/adapters/block.ts b/src/services/EVM/L1/adapters/block.ts
deleted file mode 100644
index c1e29af..0000000
--- a/src/services/EVM/L1/adapters/block.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// src/services/EVM/L1/adapters/block.ts
-import type { RPCBlock } from "../../../../types";
-import type { Block } from "../../../../types";
-
-export class BlockAdapter {
-	static fromRPCBlock(rpcBlock: RPCBlock, chainId: number): Block {
-		console.log(rpcBlock);
-		const timestamp = rpcBlock.timestamp
-			? parseInt(
-					rpcBlock.timestamp,
-					rpcBlock.timestamp.startsWith("0x") ? 16 : 10,
-				).toString()
-			: "0";
-		return {
-			number: rpcBlock.number,
-			hash: rpcBlock.hash,
-			parentHash: rpcBlock.parentHash,
-			timestamp,
-			baseFeePerGas: rpcBlock.baseFeePerGas
-				? BigInt(rpcBlock.baseFeePerGas).toString()
-				: undefined,
-			nonce: rpcBlock.nonce,
-			difficulty: BigInt(rpcBlock.difficulty).toString(),
-			gasLimit: BigInt(rpcBlock.gasLimit).toString(),
-			gasUsed: BigInt(rpcBlock.gasUsed).toString(),
-			miner: rpcBlock.miner,
-			extraData: rpcBlock.extraData,
-			transactions: Array.isArray(rpcBlock.transactions)
-				? rpcBlock.transactions.map((tx) =>
-						typeof tx === "string" ? tx : tx.hash,
-					)
-				: [],
-			size: rpcBlock.size,
-			logsBloom: rpcBlock.logsBloom,
-			stateRoot: rpcBlock.stateRoot,
-			receiptsRoot: rpcBlock.receiptsRoot,
-			transactionsRoot: rpcBlock.transactionsRoot,
-			uncles: rpcBlock.uncles,
-			mixHash: rpcBlock.mixHash,
-			sha3Uncles: rpcBlock.sha3Uncles,
-			totalDifficulty: BigInt(rpcBlock.difficulty).toString(),
-			blobGasUsed: rpcBlock.blobGasUsed,
-			excessBlobGas: rpcBlock.excessBlobGas,
-			withdrawalsRoot: rpcBlock.withdrawalsRoot,
-			withdrawals: rpcBlock.withdrawals,
-		};
-	}
-}
diff --git a/src/services/EVM/L1/adapters/transaction.ts b/src/services/EVM/L1/adapters/transaction.ts
deleted file mode 100644
index 4230bda..0000000
--- a/src/services/EVM/L1/adapters/transaction.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// src/services/EVM/L1/adapters/transaction.ts
-import type { RPCTransaction, RPCTransactionReceipt } from "../../../../types";
-import type { Transaction } from "../../../../types";
-
-export class TransactionAdapter {
-	static fromRPCTransaction(
-		rpcTx: RPCTransaction,
-		chainId: number,
-		receipt?: RPCTransactionReceipt | null,
-	): Transaction {
-		const transaction: Transaction = {
-			hash: rpcTx.hash,
-			from: rpcTx.from,
-			to: rpcTx.to,
-			value: BigInt(rpcTx.value).toString(),
-			gas: BigInt(rpcTx.gas).toString(),
-			gasPrice: rpcTx.gasPrice ? BigInt(rpcTx.gasPrice).toString() : "0",
-			maxFeePerGas: rpcTx.maxFeePerGas
-				? BigInt(rpcTx.maxFeePerGas).toString()
-				: undefined,
-			maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
-				? BigInt(rpcTx.maxPriorityFeePerGas).toString()
-				: undefined,
-			nonce: parseInt(rpcTx.nonce, 16).toString(),
-			data: rpcTx.input,
-			blockNumber: parseInt(rpcTx.blockNumber, 16).toString(),
-			blockHash: rpcTx.blockHash,
-			transactionIndex: parseInt(rpcTx.transactionIndex, 16).toString(),
-			v: rpcTx.v,
-			r: rpcTx.r,
-			s: rpcTx.s,
-			type: rpcTx.type,
-		};
-
-		if (receipt) {
-			transaction.receipt = {
-				blockHash: receipt.blockHash,
-				blockNumber: parseInt(receipt.blockNumber, 16).toString(),
-				contractAddress: receipt.contractAddress,
-				cumulativeGasUsed: BigInt(receipt.cumulativeGasUsed).toString(),
-				effectiveGasPrice: BigInt(receipt.effectiveGasPrice).toString(),
-				from: receipt.from,
-				gasUsed: BigInt(receipt.gasUsed).toString(),
-				logs: receipt.logs,
-				logsBloom: receipt.logsBloom,
-				status: receipt.status,
-				to: receipt.to,
-				transactionHash: receipt.transactionHash,
-				transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
-				type: receipt.type,
-			};
-		}
-
-		return transaction;
-	}
-}
diff --git a/src/services/EVM/L1/fetchers/address.ts b/src/services/EVM/L1/fetchers/address.ts
deleted file mode 100644
index e021fc9..0000000
--- a/src/services/EVM/L1/fetchers/address.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-// src/services/EVM/L1/fetchers/mainnet/address.ts
-import { RPCClient } from "../../common/RPCClient";
-import {
-	TraceFilterResult,
-	LogEntry,
-	AddressTransactionsResult,
-} from "../../../../types";
-
-export class AddressFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getBalance(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<bigint> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		const result = await this.rpcClient.call<string>("eth_getBalance", [
-			address,
-			blockParam,
-		]);
-		return BigInt(result);
-	}
-
-	async getCode(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<string> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		return await this.rpcClient.call<string>("eth_getCode", [
-			address,
-			blockParam,
-		]);
-	}
-
-	async getTransactionCount(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<number> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		const result = await this.rpcClient.call<string>(
-			"eth_getTransactionCount",
-			[address, blockParam],
-		);
-		return parseInt(result, 16);
-	}
-
-	async getStorageAt(
-		address: string,
-		position: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<string> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		return await this.rpcClient.call<string>("eth_getStorageAt", [
-			address,
-			position,
-			blockParam,
-		]);
-	}
-
-	/**
-	 * Get all transactions for an address using trace_filter
-	 * This returns complete transaction history including internal calls
-	 * Only supported on Erigon, Nethermind, Besu with tracing enabled
-	 */
-	async getTransactionsFromTrace(
-		address: string,
-		fromBlock: number | "earliest" = "earliest",
-		toBlock: number | "latest" = "latest",
-	): Promise<TraceFilterResult[]> {
-		const fromBlockParam =
-			fromBlock === "earliest" ? "earliest" : `0x${fromBlock.toString(16)}`;
-		const toBlockParam =
-			toBlock === "latest" ? "latest" : `0x${toBlock.toString(16)}`;
-
-		// Get traces where address is sender
-		const fromTraces = await this.rpcClient.call<TraceFilterResult[]>(
-			"trace_filter",
-			[
-				{
-					fromBlock: fromBlockParam,
-					toBlock: toBlockParam,
-					fromAddress: [address],
-				},
-			],
-		);
-
-		// Get traces where address is receiver
-		const toTraces = await this.rpcClient.call<TraceFilterResult[]>(
-			"trace_filter",
-			[
-				{
-					fromBlock: fromBlockParam,
-					toBlock: toBlockParam,
-					toAddress: [address],
-				},
-			],
-		);
-
-		// Combine and deduplicate by transaction hash
-		const allTraces = [...fromTraces, ...toTraces];
-		return allTraces;
-	}
-
-	/**
-	 * Get logs for an address using eth_getLogs
-	 * This is a fallback when trace_filter is not available
-	 * Only returns transactions that emitted events involving the address
-	 */
-	async getLogsForAddress(
-		address: string,
-		fromBlock: number | "earliest" = "earliest",
-		toBlock: number | "latest" = "latest",
-	): Promise<LogEntry[]> {
-		const fromBlockParam =
-			fromBlock === "earliest" ? "earliest" : `0x${fromBlock.toString(16)}`;
-		const toBlockParam =
-			toBlock === "latest" ? "latest" : `0x${toBlock.toString(16)}`;
-
-		// Common event signatures for address-related events
-		// Transfer: 0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef
-		// Approval: 0x8c5be1e5ebec7d5bd14f714f211d1fdf2f9d4b67e8936cfd6c3b6c0e16b3b4f2
-
-		// Pad address to 32 bytes for topic filtering
-		const paddedAddress =
-			"0x" + address.toLowerCase().slice(2).padStart(64, "0");
-
-		// Get logs emitted BY this address (for contracts)
-		const logsFromContract = await this.rpcClient.call<LogEntry[]>("eth_getLogs", [
-			{
-				fromBlock: fromBlockParam,
-				toBlock: toBlockParam,
-				address: address,
-			},
-		]);
-
-		// Get logs where address is in topic1 (common for from/owner in Transfer/Approval)
-		const logsAsTopic1 = await this.rpcClient.call<LogEntry[]>("eth_getLogs", [
-			{
-				fromBlock: fromBlockParam,
-				toBlock: toBlockParam,
-				topics: [null, paddedAddress],
-			},
-		]);
-
-		// Get logs where address is in topic2 (common for to/spender in Transfer/Approval)
-		const logsAsTopic2 = await this.rpcClient.call<LogEntry[]>("eth_getLogs", [
-			{
-				fromBlock: fromBlockParam,
-				toBlock: toBlockParam,
-				topics: [null, null, paddedAddress],
-			},
-		]);
-
-		// Combine all logs and deduplicate
-		const allLogs = [...logsFromContract, ...logsAsTopic1, ...logsAsTopic2];
-		const seen = new Set<string>();
-		return allLogs.filter(log => {
-			const key = `${log.transactionHash}-${log.logIndex}`;
-			if (seen.has(key)) return false;
-			seen.add(key);
-			return true;
-		});
-	}
-
-	/**
-	 * Get address transactions - tries trace_filter first, falls back to logs
-	 * Returns deduplicated transaction hashes with metadata about data source
-	 */
-	async getAddressTransactions(
-		address: string,
-		fromBlock: number | "earliest" = "earliest",
-		toBlock: number | "latest" = "latest",
-	): Promise<AddressTransactionsResult> {
-		// Try trace_filter first (complete history)
-		try {
-			const traces = await this.getTransactionsFromTrace(
-				address,
-				fromBlock,
-				toBlock,
-			);
-
-			// Extract unique transaction hashes
-			const txHashes = new Set<string>();
-			for (const trace of traces) {
-				if (trace.transactionHash) {
-					txHashes.add(trace.transactionHash);
-				}
-			}
-
-			// Sort by block number (most recent first)
-			const sortedTraces = traces.sort((a, b) => b.blockNumber - a.blockNumber);
-			const sortedHashes: string[] = [];
-			const seen = new Set<string>();
-			for (const trace of sortedTraces) {
-				if (trace.transactionHash && !seen.has(trace.transactionHash)) {
-					seen.add(trace.transactionHash);
-					sortedHashes.push(trace.transactionHash);
-				}
-			}
-
-			return {
-				transactions: sortedHashes,
-				source: "trace_filter",
-				isComplete: true,
-			};
-		} catch (error: any) {
-			// trace_filter not supported, try logs
-			console.log(
-				"trace_filter not available, falling back to logs:",
-				error.message,
-			);
-		}
-
-		// Fallback to eth_getLogs (partial history - only events)
-		try {
-			const logs = await this.getLogsForAddress(address, fromBlock, toBlock);
-
-			// Extract unique transaction hashes
-			const txHashes = new Set<string>();
-			for (const log of logs) {
-				if (log.transactionHash) {
-					txHashes.add(log.transactionHash);
-				}
-			}
-
-			// Sort by block number (most recent first)
-			const sortedLogs = logs.sort(
-				(a, b) => parseInt(b.blockNumber, 16) - parseInt(a.blockNumber, 16),
-			);
-			const sortedHashes: string[] = [];
-			const seen = new Set<string>();
-			for (const log of sortedLogs) {
-				if (log.transactionHash && !seen.has(log.transactionHash)) {
-					seen.add(log.transactionHash);
-					sortedHashes.push(log.transactionHash);
-				}
-			}
-
-			return {
-				transactions: sortedHashes,
-				source: "logs",
-				isComplete: false,
-				message:
-					"Showing transactions from event logs only. ETH transfers and transactions without events are not included. Full history requires a node with trace_filter support.",
-			};
-		} catch (error: any) {
-			console.error("eth_getLogs failed:", error.message);
-		}
-
-		// Neither method worked
-		return {
-			transactions: [],
-			source: "none",
-			isComplete: false,
-			message:
-				"Unable to fetch transaction history. The RPC endpoint does not support trace_filter or eth_getLogs queries.",
-		};
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/L1/fetchers/block.ts b/src/services/EVM/L1/fetchers/block.ts
deleted file mode 100644
index b4d05d2..0000000
--- a/src/services/EVM/L1/fetchers/block.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// src/services/EVM/L1/fetchers/mainnet/block.ts
-import { RPCClient } from "../../common/RPCClient";
-import type { RPCBlock } from "../../../../types";
-
-export class BlockFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getBlock(blockNumber: number | "latest"): Promise<RPCBlock | null> {
-		console.log("Fetching block number:", blockNumber);
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-
-		return await this.rpcClient.call<RPCBlock>("eth_getBlockByNumber", [
-			blockParam,
-			false, // don't include full transaction objects
-		]);
-	}
-
-	async getBlockWithTransactions(
-		blockNumber: number | "latest",
-	): Promise<RPCBlock | null> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-
-		return await this.rpcClient.call<RPCBlock>("eth_getBlockByNumber", [
-			blockParam,
-			true, // include full transaction objects
-		]);
-	}
-
-	async getLatestBlockNumber(): Promise<number> {
-		const result = await this.rpcClient.call<string>("eth_blockNumber", []);
-		return parseInt(result, 16);
-	}
-
-	async getBlockByHash(
-		blockHash: string,
-		fullTransactions: boolean = false,
-	): Promise<RPCBlock | null> {
-		return await this.rpcClient.call<RPCBlock>("eth_getBlockByHash", [
-			blockHash,
-			fullTransactions,
-		]);
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/L1/fetchers/networkStats.ts b/src/services/EVM/L1/fetchers/networkStats.ts
deleted file mode 100644
index fc35f8f..0000000
--- a/src/services/EVM/L1/fetchers/networkStats.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-// src/services/EVM/L1/fetchers/networkStats.ts
-import { RPCClient } from "../../common/RPCClient";
-import type { NetworkStats } from "../../../../types";
-
-export class NetworkStatsFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getNetworkStats(): Promise<NetworkStats> {
-		const [gasPrice, syncing, blockNumber, clientVersion] = await Promise.all([
-			this.rpcClient.call<string>("eth_gasPrice", []),
-			this.rpcClient.call<boolean | object>("eth_syncing", []),
-			this.rpcClient.call<string>("eth_blockNumber", []),
-			this.rpcClient.call<string>("web3_clientVersion", []).catch(() => "Unknown"),
-		]);
-
-		const metadata =
-			this.chainId === 31337
-				? await this.rpcClient.call<string>("hardhat_metadata", [])
-				: "";
-
-		// eth_syncing returns false when not syncing, or an object with sync status when syncing
-		const isSyncing = typeof syncing === "object";
-
-		return {
-			currentGasPrice: gasPrice,
-			isSyncing,
-			currentBlockNumber: blockNumber,
-			clientVersion,
-			metadata: metadata,
-		};
-	}
-
-	async getGasPrice(): Promise<string> {
-		return await this.rpcClient.call<string>("eth_gasPrice", []);
-	}
-
-	async getSyncingStatus(): Promise<boolean> {
-		const result = await this.rpcClient.call<boolean | object>(
-			"eth_syncing",
-			[],
-		);
-		return typeof result === "object";
-	}
-
-	async getBlockNumber(): Promise<string> {
-		return await this.rpcClient.call<string>("eth_blockNumber", []);
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/L1/fetchers/trace.ts b/src/services/EVM/L1/fetchers/trace.ts
deleted file mode 100644
index d1c5458..0000000
--- a/src/services/EVM/L1/fetchers/trace.ts
+++ /dev/null
@@ -1,207 +0,0 @@
-// src/services/EVM/L1/fetchers/trace.ts
-import { RPCClient } from "../../common/RPCClient";
-
-export interface TraceLog {
-	pc: number;
-	op: string;
-	gas: number;
-	gasCost: number;
-	depth: number;
-	stack: string[];
-	memory?: string[];
-	storage?: Record<string, string>;
-}
-
-export interface TraceResult {
-	gas: number;
-	failed: boolean;
-	returnValue: string;
-	structLogs: TraceLog[];
-}
-
-export interface TraceCallConfig {
-	tracer?: string;
-	timeout?: string;
-	tracerConfig?: {
-		onlyTopCall?: boolean;
-		withLog?: boolean;
-	};
-}
-
-export class TraceFetcher {
-	constructor(private rpcClient: RPCClient) {}
-
-	/**
-	 * Trace a transaction execution
-	 */
-	async traceTransaction(
-		txHash: string,
-		config?: TraceCallConfig,
-	): Promise<TraceResult> {
-		try {
-			const result = await this.rpcClient.call<TraceResult>(
-				"debug_traceTransaction",
-				[txHash, config || {}],
-			);
-			return result;
-		} catch (error) {
-			console.error("Error tracing transaction:", error);
-			throw error;
-		}
-	}
-
-	/**
-	 * Trace a call without sending it to the network
-	 */
-	async traceCall(
-		transaction: {
-			from?: string;
-			to: string;
-			gas?: string;
-			gasPrice?: string;
-			value?: string;
-			data?: string;
-		},
-		blockNumber: string | "latest",
-		config?: TraceCallConfig,
-	): Promise<TraceResult> {
-		try {
-			const result = await this.rpcClient.call<TraceResult>("debug_traceCall", [
-				transaction,
-				blockNumber,
-				config || {},
-			]);
-			return result;
-		} catch (error) {
-			console.error("Error tracing call:", error);
-			throw error;
-		}
-	}
-
-	/**
-	 * Trace all transactions in a block
-	 */
-	async traceBlockByNumber(
-		blockNumber: string | number,
-		config?: TraceCallConfig,
-	): Promise<TraceResult[]> {
-		try {
-			const blockNum =
-				typeof blockNumber === "number"
-					? `0x${blockNumber.toString(16)}`
-					: blockNumber;
-
-			const result = await this.rpcClient.call<any>(
-				"debug_traceBlockByNumber",
-				[blockNum, config || {}],
-			);
-
-			// Hardhat returns an array directly
-			// Geth might return an object with tx hashes as keys
-			if (Array.isArray(result)) {
-				return result;
-			} else if (result && typeof result === "object") {
-				// Convert object to array of traces
-				return Object.values(result);
-			}
-
-			return [];
-		} catch (error) {
-			console.error("Error tracing block:", error);
-			throw error;
-		}
-	}
-
-	/**
-	 * Trace block by hash
-	 */
-	async traceBlockByHash(
-		blockHash: string,
-		config?: TraceCallConfig,
-	): Promise<TraceResult[]> {
-		try {
-			const result = await this.rpcClient.call<any>("debug_traceBlockByHash", [
-				blockHash,
-				config || {},
-			]);
-
-			// Hardhat returns an array directly
-			// Geth might return an object with tx hashes as keys
-			if (Array.isArray(result)) {
-				return result;
-			} else if (result && typeof result === "object") {
-				// Convert object to array of traces
-				return Object.values(result);
-			}
-
-			return [];
-		} catch (error) {
-			console.error("Error tracing block by hash:", error);
-			throw error;
-		}
-	}
-
-	/**
-	 * Check if trace methods are available (localhost detection)
-	 */
-	async isTraceAvailable(): Promise<boolean> {
-		try {
-			// Try a simple trace call to see if it's supported
-			await this.rpcClient.call("debug_traceTransaction", [
-				"0x0000000000000000000000000000000000000000000000000000000000000000",
-				{},
-			]);
-			return true;
-		} catch (error) {
-			// If the method doesn't exist or returns an error, traces aren't available
-			return false;
-		}
-	}
-
-	/**
-	 * Get simplified call trace for UI display
-	 */
-	async getCallTrace(txHash: string): Promise<{
-		calls: Array<{
-			type: string;
-			from: string;
-			to: string;
-			value: string;
-			gas: number;
-			gasUsed: number;
-			input: string;
-			output: string;
-			error?: string;
-			calls?: any[];
-		}>;
-		gasUsed: number;
-		failed: boolean;
-	} | null> {
-		try {
-			const trace = await this.traceTransaction(txHash, {
-				tracer: "callTracer",
-				tracerConfig: {
-					onlyTopCall: false,
-					withLog: true,
-				},
-			});
-
-			return trace as any;
-		} catch (error) {
-			console.error("Error getting call trace:", error);
-			return null;
-		}
-	}
-
-	/**
-	 * Get opcode-level trace for detailed debugging
-	 */
-	async getOpcodeTrace(txHash: string): Promise<TraceResult | null> {
-		try {
-			return await this.traceTransaction(txHash);
-		} catch (error) {
-			console.error("Error getting opcode trace:", error);
-			return null;
-		}
-	}
-}
diff --git a/src/services/EVM/L1/fetchers/transaction.ts b/src/services/EVM/L1/fetchers/transaction.ts
deleted file mode 100644
index 546a3c4..0000000
--- a/src/services/EVM/L1/fetchers/transaction.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// src/services/EVM/L1/fetchers/mainnet/transaction.ts
-import { RPCClient } from "../../common/RPCClient";
-import type { RPCTransaction, RPCTransactionReceipt } from "../../../../types";
-
-export class TransactionFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getTransaction(txHash: string): Promise<RPCTransaction | null> {
-		return await this.rpcClient.call<RPCTransaction>(
-			"eth_getTransactionByHash",
-			[txHash],
-		);
-	}
-
-	async getTransactionReceipt(
-		txHash: string,
-	): Promise<RPCTransactionReceipt | null> {
-		return await this.rpcClient.call<RPCTransactionReceipt>(
-			"eth_getTransactionReceipt",
-			[txHash],
-		);
-	}
-
-	async getTransactionCount(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<number> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		const result = await this.rpcClient.call<string>(
-			"eth_getTransactionCount",
-			[address, blockParam],
-		);
-		return parseInt(result, 16);
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/Optimism/adapters/address.ts b/src/services/EVM/Optimism/adapters/address.ts
deleted file mode 100644
index 9548923..0000000
--- a/src/services/EVM/Optimism/adapters/address.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// src/services/EVM/Optimism/adapters/address.ts
-import type { Address } from "../../../../types";
-
-export class AddressAdapter {
-	static fromRawData(
-		address: string,
-		balance: bigint,
-		code: string,
-		txCount: number,
-		chainId: number,
-	): Address {
-		return {
-			address,
-			balance: balance.toString(),
-			txCount: txCount.toString(),
-			code: code,
-			storeageAt: {},
-		};
-	}
-}
diff --git a/src/services/EVM/Optimism/adapters/block.ts b/src/services/EVM/Optimism/adapters/block.ts
deleted file mode 100644
index 617386e..0000000
--- a/src/services/EVM/Optimism/adapters/block.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-// src/services/EVM/Optimism/adapters/block.ts
-import type { RPCBlock } from "../../../../types";
-import type { Block } from "../../../../types";
-
-export class BlockOptimismAdapter {
-	static fromRPCBlock(rpcBlock: RPCBlock, chainId: number): Block {
-		console.log("Optimism block:", rpcBlock);
-		const timestamp = rpcBlock.timestamp
-			? parseInt(
-					rpcBlock.timestamp,
-					rpcBlock.timestamp.startsWith("0x") ? 16 : 10,
-				).toString()
-			: "0";
-		// Optimism blocks use the same format as Ethereum
-		return {
-			number: rpcBlock.number,
-			hash: rpcBlock.hash,
-			parentHash: rpcBlock.parentHash,
-			timestamp,
-			baseFeePerGas: rpcBlock.baseFeePerGas
-				? BigInt(rpcBlock.baseFeePerGas).toString()
-				: undefined,
-			nonce: rpcBlock.nonce,
-			difficulty: BigInt(rpcBlock.difficulty || 0).toString(),
-			gasLimit: BigInt(rpcBlock.gasLimit).toString(),
-			gasUsed: BigInt(rpcBlock.gasUsed).toString(),
-			miner: rpcBlock.miner,
-			extraData: rpcBlock.extraData,
-			transactions: Array.isArray(rpcBlock.transactions)
-				? rpcBlock.transactions.map((tx: any) =>
-						typeof tx === "string" ? tx : tx.hash,
-					)
-				: [],
-			size: rpcBlock.size,
-			logsBloom: rpcBlock.logsBloom,
-			stateRoot: rpcBlock.stateRoot,
-			receiptsRoot: rpcBlock.receiptsRoot,
-			transactionsRoot: rpcBlock.transactionsRoot,
-			uncles: rpcBlock.uncles || [],
-			mixHash: rpcBlock.mixHash,
-			sha3Uncles: rpcBlock.sha3Uncles,
-			totalDifficulty: BigInt(rpcBlock.difficulty || 0).toString(),
-			blobGasUsed: rpcBlock.blobGasUsed,
-			excessBlobGas: rpcBlock.excessBlobGas,
-			withdrawalsRoot: rpcBlock.withdrawalsRoot,
-			withdrawals: rpcBlock.withdrawals || [],
-		};
-	}
-}
diff --git a/src/services/EVM/Optimism/adapters/transaction.ts b/src/services/EVM/Optimism/adapters/transaction.ts
deleted file mode 100644
index 31d990e..0000000
--- a/src/services/EVM/Optimism/adapters/transaction.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-// src/services/EVM/Optimism/adapters/transaction.ts
-import type { RPCTransaction, RPCTransactionReceipt } from "../../../../types";
-import type {
-	Transaction,
-	TransactionReceiptOptimism,
-} from "../../../../types";
-
-export class TransactionOptimismAdapter {
-	static fromRPCTransaction(
-		rpcTx: any,
-		chainId: number,
-		receipt?: any | null,
-	): Transaction {
-		const transaction: Transaction = {
-			hash: rpcTx.hash,
-			from: rpcTx.from,
-			to: rpcTx.to,
-			value: BigInt(rpcTx.value).toString(),
-			gas: BigInt(rpcTx.gas).toString(),
-			gasPrice: rpcTx.gasPrice ? BigInt(rpcTx.gasPrice).toString() : "0",
-			maxFeePerGas: rpcTx.maxFeePerGas
-				? BigInt(rpcTx.maxFeePerGas).toString()
-				: undefined,
-			maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
-				? BigInt(rpcTx.maxPriorityFeePerGas).toString()
-				: undefined,
-			nonce: parseInt(rpcTx.nonce, 16).toString(),
-			data: rpcTx.input,
-			blockNumber: parseInt(rpcTx.blockNumber, 16).toString(),
-			blockHash: rpcTx.blockHash,
-			transactionIndex: parseInt(rpcTx.transactionIndex, 16).toString(),
-			v: rpcTx.v,
-			r: rpcTx.r,
-			s: rpcTx.s,
-			type: rpcTx.type,
-		};
-
-		if (receipt) {
-			const optimismReceipt: TransactionReceiptOptimism = {
-				blockHash: receipt.blockHash,
-				blockNumber: parseInt(receipt.blockNumber, 16).toString(),
-				contractAddress: receipt.contractAddress,
-				cumulativeGasUsed: BigInt(receipt.cumulativeGasUsed).toString(),
-				effectiveGasPrice: BigInt(receipt.effectiveGasPrice).toString(),
-				from: receipt.from,
-				gasUsed: BigInt(receipt.gasUsed).toString(),
-				logs: receipt.logs,
-				logsBloom: receipt.logsBloom,
-				status: receipt.status,
-				to: receipt.to,
-				transactionHash: receipt.transactionHash,
-				transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
-				type: receipt.type,
-				// Optimism-specific fields
-				l1Fee: receipt.l1Fee || "0",
-				l1GasPrice: receipt.l1GasPrice || "0",
-				l1GasUsed: receipt.l1GasUsed || "0",
-				l1FeeScalar: receipt.l1FeeScalar || "1",
-			};
-			transaction.receipt = optimismReceipt;
-		}
-
-		return transaction;
-	}
-}
diff --git a/src/services/EVM/Optimism/fetchers/address.ts b/src/services/EVM/Optimism/fetchers/address.ts
deleted file mode 100644
index 350c733..0000000
--- a/src/services/EVM/Optimism/fetchers/address.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-// src/services/EVM/Optimism/fetchers/address.ts
-import { RPCClient } from "../../common/RPCClient";
-import {
-	TraceFilterResult,
-	LogEntry,
-	AddressTransactionsResult,
-} from "../../../../types";
-
-export class AddressFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getBalance(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<bigint> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		const result = await this.rpcClient.call<string>("eth_getBalance", [
-			address,
-			blockParam,
-		]);
-		return BigInt(result);
-	}
-
-	async getCode(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<string> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		return await this.rpcClient.call<string>("eth_getCode", [
-			address,
-			blockParam,
-		]);
-	}
-
-	async getTransactionCount(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<number> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		const result = await this.rpcClient.call<string>(
-			"eth_getTransactionCount",
-			[address, blockParam],
-		);
-		return parseInt(result, 16);
-	}
-
-	async getStorageAt(
-		address: string,
-		position: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<string> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		return await this.rpcClient.call<string>("eth_getStorageAt", [
-			address,
-			position,
-			blockParam,
-		]);
-	}
-
-	/**
-	 * Get all transactions for an address using trace_filter
-	 * Note: Optimism/Base public RPCs typically do not support trace_filter
-	 */
-	async getTransactionsFromTrace(
-		address: string,
-		fromBlock: number | "earliest" = "earliest",
-		toBlock: number | "latest" = "latest",
-	): Promise<TraceFilterResult[]> {
-		const fromBlockParam =
-			fromBlock === "earliest" ? "earliest" : `0x${fromBlock.toString(16)}`;
-		const toBlockParam =
-			toBlock === "latest" ? "latest" : `0x${toBlock.toString(16)}`;
-
-		const fromTraces = await this.rpcClient.call<TraceFilterResult[]>(
-			"trace_filter",
-			[
-				{
-					fromBlock: fromBlockParam,
-					toBlock: toBlockParam,
-					fromAddress: [address],
-				},
-			],
-		);
-
-		const toTraces = await this.rpcClient.call<TraceFilterResult[]>(
-			"trace_filter",
-			[
-				{
-					fromBlock: fromBlockParam,
-					toBlock: toBlockParam,
-					toAddress: [address],
-				},
-			],
-		);
-
-		return [...fromTraces, ...toTraces];
-	}
-
-	/**
-	 * Get logs for an address using eth_getLogs
-	 */
-	async getLogsForAddress(
-		address: string,
-		fromBlock: number | "earliest" = "earliest",
-		toBlock: number | "latest" = "latest",
-	): Promise<LogEntry[]> {
-		const fromBlockParam =
-			fromBlock === "earliest" ? "earliest" : `0x${fromBlock.toString(16)}`;
-		const toBlockParam =
-			toBlock === "latest" ? "latest" : `0x${toBlock.toString(16)}`;
-		const paddedAddress =
-			"0x" + address.toLowerCase().slice(2).padStart(64, "0");
-
-		// Get logs emitted BY this address (for contracts)
-		const logsFromContract = await this.rpcClient.call<LogEntry[]>("eth_getLogs", [
-			{
-				fromBlock: fromBlockParam,
-				toBlock: toBlockParam,
-				address: address,
-			},
-		]);
-
-		const logsAsTopic1 = await this.rpcClient.call<LogEntry[]>("eth_getLogs", [
-			{
-				fromBlock: fromBlockParam,
-				toBlock: toBlockParam,
-				topics: [null, paddedAddress],
-			},
-		]);
-
-		const logsAsTopic2 = await this.rpcClient.call<LogEntry[]>("eth_getLogs", [
-			{
-				fromBlock: fromBlockParam,
-				toBlock: toBlockParam,
-				topics: [null, null, paddedAddress],
-			},
-		]);
-
-		// Combine all logs and deduplicate
-		const allLogs = [...logsFromContract, ...logsAsTopic1, ...logsAsTopic2];
-		const seen = new Set<string>();
-		return allLogs.filter(log => {
-			const key = `${log.transactionHash}-${log.logIndex}`;
-			if (seen.has(key)) return false;
-			seen.add(key);
-			return true;
-		});
-	}
-
-	/**
-	 * Get address transactions - tries trace_filter first, falls back to logs
-	 */
-	async getAddressTransactions(
-		address: string,
-		fromBlock: number | "earliest" = "earliest",
-		toBlock: number | "latest" = "latest",
-	): Promise<AddressTransactionsResult> {
-		try {
-			const traces = await this.getTransactionsFromTrace(
-				address,
-				fromBlock,
-				toBlock,
-			);
-
-			const sortedTraces = traces.sort((a, b) => b.blockNumber - a.blockNumber);
-			const sortedHashes: string[] = [];
-			const seen = new Set<string>();
-			for (const trace of sortedTraces) {
-				if (trace.transactionHash && !seen.has(trace.transactionHash)) {
-					seen.add(trace.transactionHash);
-					sortedHashes.push(trace.transactionHash);
-				}
-			}
-
-			return {
-				transactions: sortedHashes,
-				source: "trace_filter",
-				isComplete: true,
-			};
-		} catch (error: any) {
-			console.log(
-				"trace_filter not available on Optimism/Base, falling back to logs:",
-				error.message,
-			);
-		}
-
-		try {
-			const logs = await this.getLogsForAddress(address, fromBlock, toBlock);
-
-			const sortedLogs = logs.sort(
-				(a, b) => parseInt(b.blockNumber, 16) - parseInt(a.blockNumber, 16),
-			);
-			const sortedHashes: string[] = [];
-			const seen = new Set<string>();
-			for (const log of sortedLogs) {
-				if (log.transactionHash && !seen.has(log.transactionHash)) {
-					seen.add(log.transactionHash);
-					sortedHashes.push(log.transactionHash);
-				}
-			}
-
-			return {
-				transactions: sortedHashes,
-				source: "logs",
-				isComplete: false,
-				message:
-					"Showing transactions from event logs only. ETH transfers and transactions without events are not included.",
-			};
-		} catch (error: any) {
-			console.error("eth_getLogs failed on Optimism/Base:", error.message);
-		}
-
-		return {
-			transactions: [],
-			source: "none",
-			isComplete: false,
-			message: "Unable to fetch transaction history on this L2 chain.",
-		};
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/Optimism/fetchers/block.ts b/src/services/EVM/Optimism/fetchers/block.ts
deleted file mode 100644
index fe04460..0000000
--- a/src/services/EVM/Optimism/fetchers/block.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// src/services/EVM/Optimism/fetchers/block.ts
-import { RPCClient } from "../../common/RPCClient";
-import type { RPCBlock } from "../../../../types";
-
-export class BlockFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getBlock(blockNumber: number | "latest"): Promise<RPCBlock | null> {
-		console.log("Fetching Optimism block number:", blockNumber);
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-
-		return await this.rpcClient.call<RPCBlock>("eth_getBlockByNumber", [
-			blockParam,
-			false, // don't include full transaction objects
-		]);
-	}
-
-	async getBlockWithTransactions(
-		blockNumber: number | "latest",
-	): Promise<RPCBlock | null> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-
-		return await this.rpcClient.call<RPCBlock>("eth_getBlockByNumber", [
-			blockParam,
-			true, // include full transaction objects
-		]);
-	}
-
-	async getLatestBlockNumber(): Promise<number> {
-		const result = await this.rpcClient.call<string>("eth_blockNumber", []);
-		return parseInt(result, 16);
-	}
-
-	async getBlockByHash(
-		blockHash: string,
-		fullTransactions: boolean = false,
-	): Promise<RPCBlock | null> {
-		return await this.rpcClient.call<RPCBlock>("eth_getBlockByHash", [
-			blockHash,
-			fullTransactions,
-		]);
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/Optimism/fetchers/networkStats.ts b/src/services/EVM/Optimism/fetchers/networkStats.ts
deleted file mode 100644
index 14344c3..0000000
--- a/src/services/EVM/Optimism/fetchers/networkStats.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// src/services/EVM/Optimism/fetchers/networkStats.ts
-import { RPCClient } from "../../common/RPCClient";
-import type { NetworkStats } from "../../../../types";
-
-export class NetworkStatsFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getNetworkStats(): Promise<NetworkStats> {
-		const [gasPrice, syncing, blockNumber, clientVersion] = await Promise.all([
-			this.rpcClient.call<string>("eth_gasPrice", []),
-			this.rpcClient.call<boolean | object>("eth_syncing", []),
-			this.rpcClient.call<string>("eth_blockNumber", []),
-			this.rpcClient.call<string>("web3_clientVersion", []).catch(() => "Unknown"),
-		]);
-
-		const metadata = "";
-
-		// eth_syncing returns false when not syncing, or an object with sync status when syncing
-		const isSyncing = typeof syncing === "object";
-
-		return {
-			currentGasPrice: gasPrice,
-			isSyncing,
-			currentBlockNumber: blockNumber,
-			clientVersion,
-			metadata: metadata,
-		};
-	}
-
-	async getGasPrice(): Promise<string> {
-		return await this.rpcClient.call<string>("eth_gasPrice", []);
-	}
-
-	async getSyncingStatus(): Promise<boolean> {
-		const result = await this.rpcClient.call<boolean | object>(
-			"eth_syncing",
-			[],
-		);
-		return typeof result === "object";
-	}
-
-	async getBlockNumber(): Promise<string> {
-		return await this.rpcClient.call<string>("eth_blockNumber", []);
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/Optimism/fetchers/transaction.ts b/src/services/EVM/Optimism/fetchers/transaction.ts
deleted file mode 100644
index fca82e6..0000000
--- a/src/services/EVM/Optimism/fetchers/transaction.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// src/services/EVM/Optimism/fetchers/transaction.ts
-import { RPCClient } from "../../common/RPCClient";
-import type { RPCTransaction, RPCTransactionReceipt } from "../../../../types";
-
-export class TransactionFetcher {
-	constructor(
-		private rpcClient: RPCClient,
-		private chainId: number,
-	) {}
-
-	async getTransaction(txHash: string): Promise<RPCTransaction | null> {
-		return await this.rpcClient.call<RPCTransaction>(
-			"eth_getTransactionByHash",
-			[txHash],
-		);
-	}
-
-	async getTransactionReceipt(
-		txHash: string,
-	): Promise<RPCTransactionReceipt | null> {
-		return await this.rpcClient.call<RPCTransactionReceipt>(
-			"eth_getTransactionReceipt",
-			[txHash],
-		);
-	}
-
-	async getTransactionCount(
-		address: string,
-		blockNumber: number | "latest" = "latest",
-	): Promise<number> {
-		const blockParam =
-			blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-		const result = await this.rpcClient.call<string>(
-			"eth_getTransactionCount",
-			[address, blockParam],
-		);
-		return parseInt(result, 16);
-	}
-
-	getChainId(): number {
-		return this.chainId;
-	}
-}
diff --git a/src/services/EVM/common/RPCClient.ts b/src/services/EVM/common/RPCClient.ts
deleted file mode 100644
index e6714b9..0000000
--- a/src/services/EVM/common/RPCClient.ts
+++ /dev/null
@@ -1,365 +0,0 @@
-// src/services/EVM/common/RPCClient.ts
-export interface RPCRequest {
-	jsonrpc: "2.0";
-	id: number;
-	method: string;
-	params: any[];
-}
-
-export interface RPCResponse<T = any> {
-	jsonrpc: "2.0";
-	id: number;
-	result?: T;
-	error?: {
-		code: number;
-		message: string;
-		data?: any;
-	};
-}
-
-export interface ParallelRequestResult<T = any> {
-	url: string;
-	status: "fulfilled" | "rejected";
-	response?: T;
-	error?: any;
-}
-
-export type RPCStrategy = "fallback" | "parallel";
-
-export interface RPCClientConfig {
-	rpcUrls: string | string[];
-	strategy?: RPCStrategy;
-}
-
-export class RPCClient {
-	private requestId = 0;
-	private rpcUrls: string[];
-	private currentUrlIndex = 0;
-	private strategy: RPCStrategy = "fallback";
-
-	constructor(config: string | string[] | RPCClientConfig) {
-		// Support multiple constructor signatures for backwards compatibility
-		if (typeof config === "string" || Array.isArray(config)) {
-			// Legacy: just URLs provided
-			this.rpcUrls = Array.isArray(config) ? config : [config];
-			this.strategy = "fallback";
-		} else {
-			// New config object
-			this.rpcUrls = Array.isArray(config.rpcUrls)
-				? config.rpcUrls
-				: [config.rpcUrls];
-			this.strategy = config.strategy || "fallback";
-		}
-
-		if (this.rpcUrls.length === 0) {
-			throw new Error("At least one RPC URL must be provided");
-		}
-	}
-
-	/**
-	 * Get the current RPC URL being used
-	 */
-	getCurrentUrl(): string {
-		return this.rpcUrls[this.currentUrlIndex]!;
-	}
-
-	/**
-	 * Get all configured RPC URLs
-	 */
-	getAllUrls(): string[] {
-		return [...this.rpcUrls];
-	}
-
-	/**
-	 * Get the current request strategy
-	 */
-	getStrategy(): RPCStrategy {
-		return this.strategy;
-	}
-
-	/**
-	 * Set the request strategy
-	 * @param strategy - "fallback" for sequential fallback or "parallel" for parallel requests
-	 */
-	setStrategy(strategy: RPCStrategy): void {
-		this.strategy = strategy;
-	}
-
-	/**
-	 * Make a single RPC request to a specific URL without fallback
-	 */
-	private async makeRequest<T = any>(
-		url: string,
-		method: string,
-		params: any[] = [],
-	): Promise<T> {
-		const request: RPCRequest = {
-			jsonrpc: "2.0",
-			id: ++this.requestId,
-			method,
-			params,
-		};
-
-		const response = await fetch(url, {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify(request),
-		});
-
-		if (!response.ok) {
-			throw new Error(
-				`RPC request failed: ${response.status} ${response.statusText}`,
-			);
-		}
-
-		const data: RPCResponse<T> = await response.json();
-
-		if (data.error) {
-			throw new Error(
-				`RPC error: ${data.error.message} (code: ${data.error.code})`,
-			);
-		}
-
-		if (data.result === undefined) {
-			throw new Error("RPC response missing result");
-		}
-
-		return data.result;
-	}
-
-	/**
-	 * Attempt an RPC call with automatic fallback to other URLs on failure
-	 */
-	private async callWithFallback<T = any>(
-		method: string,
-		params: any[] = [],
-		urlIndex = 0,
-		errors: Error[] = [],
-	): Promise<T> {
-		if (urlIndex >= this.rpcUrls.length) {
-			// All URLs have been tried, throw aggregate error
-			const errorMessages = errors
-				.map((e, i) => `  [${i + 1}] ${this.rpcUrls[i]}: ${e.message}`)
-				.join("\n");
-			throw new Error(`All RPC endpoints failed:\n${errorMessages}`);
-		}
-
-		const rpcUrl = this.rpcUrls[urlIndex];
-		if (!rpcUrl) {
-			throw new Error(`RPC URL at index ${urlIndex} is undefined`);
-		}
-		try {
-			const result = await this.makeRequest<T>(rpcUrl, method, params);
-
-			// Success! Update the current URL index for future calls
-			this.currentUrlIndex = urlIndex;
-
-			return result;
-		} catch (error) {
-			const err = error instanceof Error ? error : new Error(String(error));
-			errors.push(err);
-
-			// Try next URL
-			return this.callWithFallback<T>(method, params, urlIndex + 1, errors);
-		}
-	}
-
-	async call<T = any>(method: string, params: any[] = []): Promise<T> {
-		console.log(
-			`RPCClient.call: ${method}`,
-			"params:",
-			params,
-			"strategy:",
-			this.strategy,
-			"using URLs:",
-			this.rpcUrls,
-		);
-
-		// Use parallel strategy if configured
-		if (this.strategy === "parallel") {
-			const results = await this.parallelCall<T>(method, params);
-
-			// Find the first successful result
-			const successful = results.find((r) => r.status === "fulfilled");
-			if (successful && successful.response !== undefined) {
-				return successful.response;
-			}
-
-			// All failed - throw error with details
-			const errorMessages = results
-				.map((r) =>
-					r.status === "rejected"
-						? `  ${r.url}: ${r.error?.message || "Unknown error"}`
-						: null,
-				)
-				.filter(Boolean)
-				.join("\n");
-			throw new Error(
-				`All RPC endpoints failed (parallel strategy):\n${errorMessages}`,
-			);
-		}
-
-		// Use fallback strategy (default)
-		// Start with the current working URL, then try others if it fails
-		const orderedIndices = [
-			this.currentUrlIndex,
-			...Array.from({ length: this.rpcUrls.length }, (_, i) => i).filter(
-				(i) => i !== this.currentUrlIndex,
-			),
-		];
-
-		const errors: Error[] = [];
-		for (const urlIndex of orderedIndices) {
-			try {
-				return await this.callWithFallback<T>(method, params, urlIndex, []);
-			} catch (error) {
-				if (
-					error instanceof Error &&
-					error.message.startsWith("All RPC endpoints failed")
-				) {
-					throw error;
-				}
-				errors.push(error instanceof Error ? error : new Error(String(error)));
-			}
-		}
-
-		// This shouldn't be reached, but just in case
-		throw new Error("Unexpected error in RPC call with fallback");
-	}
-
-	/**
-	 * Batch multiple RPC calls with fallback support
-	 */
-	async batchCall<T = any>(
-		calls: Array<{ method: string; params: any[] }>,
-	): Promise<T[]> {
-		const orderedIndices = [
-			this.currentUrlIndex,
-			...Array.from({ length: this.rpcUrls.length }, (_, i) => i).filter(
-				(i) => i !== this.currentUrlIndex,
-			),
-		];
-
-		const allErrors: Error[] = [];
-
-		for (const urlIndex of orderedIndices) {
-			const rpcUrl = this.rpcUrls[urlIndex];
-			if (!rpcUrl) {
-				allErrors.push(
-					new Error(`RPC URL at index ${urlIndex} is undefined`),
-				);
-				continue;
-			}
-
-			try {
-				const requests: RPCRequest[] = calls.map((call) => ({
-					jsonrpc: "2.0",
-					id: ++this.requestId,
-					method: call.method,
-					params: call.params,
-				}));
-
-				const response = await fetch(rpcUrl, {
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-					},
-					body: JSON.stringify(requests),
-				});
-
-				if (!response.ok) {
-					throw new Error(
-						`RPC batch request failed: ${response.status} ${response.statusText}`,
-					);
-				}
-
-				const data: RPCResponse<T>[] = await response.json();
-
-				const results = data.map((item) => {
-					if (item.error) {
-						throw new Error(
-							`RPC error: ${item.error.message} (code: ${item.error.code})`,
-						);
-					}
-					return item.result as T;
-				});
-
-				// Success! Update current URL index
-				this.currentUrlIndex = urlIndex;
-
-				return results;
-			} catch (error) {
-				const err = error instanceof Error ? error : new Error(String(error));
-				allErrors.push(err);
-				// Continue to next URL
-			}
-		}
-
-		// All URLs failed
-		const errorMessages = allErrors
-			.map(
-				(e, i) => `  [${i + 1}] ${this.rpcUrls[i] || "unknown"}: ${e.message}`,
-			)
-			.join("\n");
-		throw new Error(
-			`All RPC endpoints failed for batch call:\n${errorMessages}`,
-		);
-	}
-
-	/**
-	 * Send the same RPC request to all configured URLs in parallel
-	 * Returns detailed results for each endpoint including success/failure status
-	 *
-	 * @param method - The RPC method to call
-	 * @param params - The parameters for the RPC method
-	 * @returns Array of results containing the status and response/error for each URL
-	 */
-	async parallelCall<T = any>(
-		method: string,
-		params: any[] = [],
-	): Promise<ParallelRequestResult<T>[]> {
-		console.log(
-			`RPCClient.parallelCall: ${method}`,
-			"params:",
-			params,
-			"to all URLs:",
-			this.rpcUrls,
-		);
-
-		// Create a promise for each URL
-		const promises = this.rpcUrls.map((url) =>
-			this.makeRequest<T>(url, method, params),
-		);
-
-		// Execute all requests in parallel and wait for all to settle
-		const results = await Promise.allSettled(promises);
-
-		// Map the results to our typed format
-		return results.map((result, index) => {
-			const url = this.rpcUrls[index]!;
-
-			if (result.status === "fulfilled") {
-				return {
-					url,
-					status: "fulfilled",
-					response: result.value,
-				};
-			} else {
-				return {
-					url,
-					status: "rejected",
-					error:
-						result.reason instanceof Error
-							? {
-									message: result.reason.message,
-									name: result.reason.name,
-									stack: result.reason.stack,
-								}
-							: result.reason,
-				};
-			}
-		});
-	}
-}
diff --git a/src/services/EVM/common/TraceService.ts b/src/services/EVM/common/TraceService.ts
deleted file mode 100644
index 3c2cdac..0000000
--- a/src/services/EVM/common/TraceService.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-// src/services/EVM/common/TraceService.ts
-import { RPCClient } from "./RPCClient";
-
-export interface TraceLog {
-	pc: number;
-	op: string;
-	gas: number;
-	gasCost: number;
-	depth: number;
-	stack: string[];
-	memory: string[];
-	storage: Record<string, string>;
-}
-
-export interface StructLog extends TraceLog {
-	error?: string;
-}
-
-export interface TransactionTrace {
-	gas: number;
-	returnValue: string;
-	structLogs: StructLog[];
-	failed?: boolean;
-	revertReason?: string;
-}
-
-export interface CallTrace {
-	type: string;
-	from: string;
-	to: string;
-	value: string;
-	gas: string;
-	gasUsed: string;
-	input: string;
-	output: string;
-	error?: string;
-	calls?: CallTrace[];
-}
-
-export class TraceService {
-	constructor(private rpcClient: RPCClient) {}
-
-	/**
-	 * Trace a transaction with detailed execution logs
-	 */
-	async traceTransaction(
-		txHash: string,
-		tracerConfig?: any,
-	): Promise<TransactionTrace | null> {
-		try {
-			const result = await this.rpcClient.call("debug_traceTransaction", [
-				txHash,
-				tracerConfig || {
-					disableMemory: false,
-					disableStack: false,
-					disableStorage: false,
-				},
-			]);
-			return result;
-		} catch (error) {
-			console.error("Error tracing transaction:", error);
-			return null;
-		}
-	}
-
-	/**
-	 * Trace a call without executing it on-chain
-	 */
-	async traceCall(
-		callObject: {
-			from?: string;
-			to: string;
-			gas?: string;
-			gasPrice?: string;
-			value?: string;
-			data?: string;
-		},
-		blockNumber: string | "latest" = "latest",
-		tracerConfig?: any,
-	): Promise<TransactionTrace | null> {
-		try {
-			const result = await this.rpcClient.call("debug_traceCall", [
-				callObject,
-				blockNumber,
-				tracerConfig || {
-					disableMemory: false,
-					disableStack: false,
-					disableStorage: false,
-				},
-			]);
-			return result;
-		} catch (error) {
-			console.error("Error tracing call:", error);
-			return null;
-		}
-	}
-
-	/**
-	 * Trace all transactions in a block by number
-	 */
-	async traceBlockByNumber(
-		blockNumber: number | "latest",
-	): Promise<TransactionTrace[] | null> {
-		try {
-			const blockParam =
-				blockNumber === "latest" ? "latest" : `0x${blockNumber.toString(16)}`;
-			const result = await this.rpcClient.call("debug_traceBlockByNumber", [
-				blockParam,
-				{ disableMemory: false, disableStack: false, disableStorage: false },
-			]);
-			return result;
-		} catch (error) {
-			console.error("Error tracing block:", error);
-			return null;
-		}
-	}
-
-	/**
-	 * Trace all transactions in a block by hash
-	 */
-	async traceBlockByHash(
-		blockHash: string,
-	): Promise<TransactionTrace[] | null> {
-		try {
-			const result = await this.rpcClient.call("debug_traceBlockByHash", [
-				blockHash,
-				{ disableMemory: false, disableStack: false, disableStorage: false },
-			]);
-			return result;
-		} catch (error) {
-			console.error("Error tracing block by hash:", error);
-			return null;
-		}
-	}
-
-	/**
-	 * Get call trace tree (callTracer)
-	 */
-	async getCallTrace(txHash: string): Promise<CallTrace | null> {
-		try {
-			const result = await this.rpcClient.call("debug_traceTransaction", [
-				txHash,
-				{ tracer: "callTracer" },
-			]);
-			return result;
-		} catch (error) {
-			console.error("Error getting call trace:", error);
-			return null;
-		}
-	}
-
-	/**
-	 * Get prestate trace (shows state before execution)
-	 */
-	async getPrestateTrace(txHash: string): Promise<any> {
-		try {
-			const result = await this.rpcClient.call("debug_traceTransaction", [
-				txHash,
-				{ tracer: "prestateTracer" },
-			]);
-			return result;
-		} catch (error) {
-			console.error("Error getting prestate trace:", error);
-			return null;
-		}
-	}
-
-	/**
-	 * Check if debug/trace methods are available
-	 */
-	async isTraceAvailable(): Promise<boolean> {
-		try {
-			// Try a simple trace call to check availability
-			await this.rpcClient.call("web3_clientVersion", []);
-			return true;
-		} catch (error) {
-			return false;
-		}
-	}
-}
diff --git a/src/services/MetadataService.ts b/src/services/MetadataService.ts
new file mode 100644
index 0000000..9deff22
--- /dev/null
+++ b/src/services/MetadataService.ts
@@ -0,0 +1,693 @@
+/**
+ * Service for fetching metadata from the openscan-explorer/explorer-metadata repository
+ * Note: Networks are now loaded from a local JSON file instead of being fetched
+ */
+
+import networksData from "../config/networks.json";
+
+const METADATA_BASE_URL =
+  "https://raw.githubusercontent.com/openscan-explorer/explorer-metadata/main/dist";
+
+export interface NetworkLink {
+  name: string;
+  url: string;
+  description?: string;
+}
+
+export interface NetworkSubscription {
+  tier: 1 | 2 | 3; // 1: Backer, 2: Partner, 3: Ally
+  expiresAt: string; // YYYY-MM-DD format
+}
+
+export interface NetworkExplorer {
+  subdomain?: string;
+  features?: string[];
+  priority?: number;
+}
+
+export interface NetworkMetadata {
+  chainId: number;
+  name: string;
+  shortName: string;
+  description?: string;
+  currency: string;
+  color?: string;
+  isTestnet?: boolean;
+  subscription?: NetworkSubscription;
+  logo?: string;
+  profile?: string;
+  explorer?: NetworkExplorer;
+  rpc?: {
+    public: string[];
+  };
+  links?: NetworkLink[];
+}
+
+export interface NetworksResponse {
+  updatedAt: string;
+  networks: NetworkMetadata[];
+}
+
+const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+
+/**
+ * Get network configurations from the local JSON file
+ * Previously fetched from metadata repository, now bundled locally
+ */
+export async function fetchNetworks(): Promise<NetworksResponse> {
+  return {
+    updatedAt: networksData.updatedAt,
+    networks: networksData.networks as NetworkMetadata[],
+  };
+}
+
+/**
+ * Get the logo URL for a network
+ */
+export function getNetworkLogoUrl(logoPath: string): string {
+  if (logoPath.startsWith("http")) {
+    return logoPath;
+  }
+  return `${METADATA_BASE_URL}/${logoPath}`;
+}
+
+/**
+ * Fetch network profile markdown content
+ */
+export async function fetchNetworkProfile(profilePath: string): Promise<string | null> {
+  if (!profilePath) {
+    return null;
+  }
+
+  try {
+    const url = profilePath.startsWith("http")
+      ? profilePath
+      : `${METADATA_BASE_URL}/${profilePath}`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      console.warn(`Failed to fetch network profile: ${response.statusText}`);
+      return null;
+    }
+
+    return await response.text();
+  } catch (error) {
+    console.error("Error fetching network profile:", error);
+    return null;
+  }
+}
+
+/**
+ * Check if a network subscription is active
+ */
+export function isSubscriptionActive(subscription?: NetworkSubscription): boolean {
+  if (!subscription) {
+    return false;
+  }
+
+  const expiresAt = new Date(subscription.expiresAt);
+  return expiresAt > new Date();
+}
+
+/**
+ * Get subscription tier name
+ */
+export function getSubscriptionTierName(tier: 1 | 2 | 3): string {
+  switch (tier) {
+    case 1:
+      return "Backer";
+    case 2:
+      return "Partner";
+    case 3:
+      return "Ally";
+    default:
+      return "Unknown";
+  }
+}
+
+/**
+ * Supporter type from the metadata repository
+ */
+export type SupporterType = "network" | "app" | "organization" | "token";
+
+/**
+ * Supporter information from the metadata repository
+ */
+export interface Supporter {
+  id: string;
+  type: SupporterType;
+  chainId?: number;
+  tokenAddress?: string;
+  name: string;
+  startedAt: string;
+  currentTier: 1 | 2 | 3;
+  tierName: string;
+  expiresAt: string;
+  logo?: string;
+  color?: string;
+}
+
+/**
+ * Response from supporters.json
+ */
+export interface SupportersResponse {
+  updatedAt: string;
+  count: number;
+  supporters: Array<{
+    id: string;
+    type: SupporterType;
+    chainId?: number;
+    tokenAddress?: string;
+    name: string;
+    startedAt: string;
+    currentTier: 1 | 2 | 3;
+    expiresAt: string;
+  }>;
+}
+
+// Cache for supporters data
+let supportersCache: SupportersResponse | null = null;
+let supportersCacheTime: number = 0;
+
+/**
+ * Check if a supporter subscription is active
+ */
+export function isSupporterActive(expiresAt: string): boolean {
+  const expires = new Date(expiresAt);
+  return expires > new Date();
+}
+
+/**
+ * Fetch all supporters from the metadata repository
+ */
+export async function fetchSupporters(): Promise<Supporter[]> {
+  const now = Date.now();
+
+  // Return cached data if still valid
+  if (supportersCache && now - supportersCacheTime < CACHE_DURATION) {
+    return processSupporters(supportersCache);
+  }
+
+  try {
+    const response = await fetch(`${METADATA_BASE_URL}/supporters.json`);
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch supporters: ${response.statusText}`);
+    }
+
+    const data: SupportersResponse = await response.json();
+
+    // Update cache
+    supportersCache = data;
+    supportersCacheTime = now;
+
+    return processSupporters(data);
+  } catch (error) {
+    console.error("Error fetching supporters:", error);
+
+    // Return cached data if available, even if stale
+    if (supportersCache) {
+      return processSupporters(supportersCache);
+    }
+
+    return [];
+  }
+}
+
+/**
+ * Process supporters response and enrich with additional data
+ */
+async function processSupporters(data: SupportersResponse): Promise<Supporter[]> {
+  // Get networks data for logo and color information
+  let networksMap: Map<number, NetworkMetadata> = new Map();
+  let appsMap: Map<string, AppMetadata> = new Map();
+  let orgsMap: Map<string, OrganizationMetadata> = new Map();
+
+  try {
+    const { networks } = await fetchNetworks();
+    networksMap = new Map(networks.map((n) => [n.chainId, n]));
+  } catch {
+    // Continue without network data
+  }
+
+  try {
+    const { apps } = await fetchApps();
+    appsMap = new Map(apps.map((a) => [a.id.toLowerCase(), a]));
+  } catch {
+    // Continue without apps data
+  }
+
+  try {
+    const { organizations } = await fetchOrganizations();
+    orgsMap = new Map(organizations.map((o) => [o.id.toLowerCase(), o]));
+  } catch {
+    // Continue without organizations data
+  }
+
+  const supporters: Supporter[] = data.supporters
+    .filter((s) => isSupporterActive(s.expiresAt))
+    .map((s) => {
+      let logo: string | undefined;
+      let color: string | undefined;
+
+      // Get logo and color based on supporter type
+      switch (s.type) {
+        case "network": {
+          const network = s.chainId ? networksMap.get(s.chainId) : undefined;
+          logo = network?.logo ? getAssetUrl(network.logo) : undefined;
+          color = network?.color;
+          break;
+        }
+        case "app": {
+          const app = appsMap.get(s.id.toLowerCase());
+          logo = app?.logo ? getAssetUrl(app.logo) : undefined;
+          break;
+        }
+        case "organization": {
+          const org = orgsMap.get(s.id.toLowerCase());
+          logo = org?.logo ? getAssetUrl(org.logo) : undefined;
+          break;
+        }
+        case "token": {
+          // Token logos are at assets/tokens/{chainId}/{address}.png
+          if (s.chainId) {
+            logo = getAssetUrl(`assets/tokens/${s.chainId}/${s.id.toLowerCase()}.png`);
+          }
+          break;
+        }
+      }
+
+      return {
+        id: s.id,
+        type: s.type,
+        chainId: s.chainId,
+        tokenAddress: s.tokenAddress,
+        name: s.name,
+        startedAt: s.startedAt,
+        currentTier: s.currentTier,
+        tierName: getSubscriptionTierName(s.currentTier),
+        expiresAt: s.expiresAt,
+        logo,
+        color,
+      };
+    })
+    // Sort by tier (higher tier first), then by name
+    .sort((a, b) => {
+      if (b.currentTier !== a.currentTier) {
+        return b.currentTier - a.currentTier;
+      }
+      return a.name.localeCompare(b.name);
+    });
+
+  return supporters;
+}
+
+/**
+ * Clear the supporters cache
+ */
+export function clearSupportersCache(): void {
+  supportersCache = null;
+  supportersCacheTime = 0;
+}
+
+// ============================================
+// Profile Types and Functions
+// ============================================
+
+/**
+ * Profile type
+ */
+export type ProfileType = "network" | "app" | "organization" | "token";
+
+/**
+ * Common link structure
+ */
+export interface ProfileLink {
+  name: string;
+  url: string;
+  description?: string;
+}
+
+/**
+ * App metadata from apps.json
+ */
+export interface AppMetadata {
+  id: string;
+  name: string;
+  type: string;
+  description?: string;
+  subscription?: NetworkSubscription;
+  verified?: boolean;
+  logo?: string;
+  profile?: string;
+  networks?: number[];
+  links?: ProfileLink[];
+  tags?: string[];
+}
+
+/**
+ * Organization metadata from organizations.json
+ */
+export interface OrganizationMetadata {
+  id: string;
+  name: string;
+  type: string;
+  description?: string;
+  subscription?: NetworkSubscription;
+  logo?: string;
+  profile?: string;
+  links?: ProfileLink[];
+}
+
+/**
+ * Apps response from apps.json
+ */
+export interface AppsResponse {
+  updatedAt: string;
+  count: number;
+  apps: AppMetadata[];
+}
+
+/**
+ * Organizations response from organizations.json
+ */
+export interface OrganizationsResponse {
+  updatedAt: string;
+  count: number;
+  organizations: OrganizationMetadata[];
+}
+
+/**
+ * Token metadata from tokens/{chainId}/{address}.json
+ */
+export interface TokenMetadata {
+  address: string;
+  chainId: number;
+  name: string;
+  symbol: string;
+  decimals: number;
+  type?: "ERC20" | "ERC721" | "ERC1155";
+  totalSupply?: number;
+  subscription?: NetworkSubscription;
+  verified?: boolean;
+  logo?: string;
+  profile?: string;
+  project?: {
+    name: string;
+    description?: string;
+  };
+  links?: ProfileLink[];
+  networks?: Array<{ chainId: number; address: string }>;
+  tags?: string[];
+}
+
+/**
+ * Unified profile data structure
+ */
+export interface ProfileData {
+  type: ProfileType;
+  id: string;
+  name: string;
+  description?: string;
+  subscription?: NetworkSubscription;
+  logo?: string;
+  logoUrl?: string;
+  profileMarkdown?: string;
+  links?: ProfileLink[];
+  // Network-specific fields
+  chainId?: number;
+  currency?: string;
+  color?: string;
+  isTestnet?: boolean;
+  rpc?: { public: string[] };
+  // App-specific fields
+  verified?: boolean;
+  networks?: number[];
+  tags?: string[];
+  // Organization-specific fields
+  orgType?: string;
+  // Token-specific fields
+  tokenAddress?: string;
+  symbol?: string;
+  decimals?: number;
+  tokenType?: "ERC20" | "ERC721" | "ERC1155";
+  projectName?: string;
+  otherNetworks?: Array<{ chainId: number; address: string }>;
+}
+
+// Cache for apps and organizations
+let appsCache: AppsResponse | null = null;
+let appsCacheTime: number = 0;
+let orgsCache: OrganizationsResponse | null = null;
+let orgsCacheTime: number = 0;
+
+/**
+ * Fetch apps from the metadata repository
+ */
+export async function fetchApps(): Promise<AppsResponse> {
+  const now = Date.now();
+
+  if (appsCache && now - appsCacheTime < CACHE_DURATION) {
+    return appsCache;
+  }
+
+  try {
+    const response = await fetch(`${METADATA_BASE_URL}/apps.json`);
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch apps: ${response.statusText}`);
+    }
+
+    const data: AppsResponse = await response.json();
+    appsCache = data;
+    appsCacheTime = now;
+    return data;
+  } catch (error) {
+    console.error("Error fetching apps:", error);
+    if (appsCache) {
+      return appsCache;
+    }
+    throw error;
+  }
+}
+
+/**
+ * Fetch organizations from the metadata repository
+ */
+export async function fetchOrganizations(): Promise<OrganizationsResponse> {
+  const now = Date.now();
+
+  if (orgsCache && now - orgsCacheTime < CACHE_DURATION) {
+    return orgsCache;
+  }
+
+  try {
+    const response = await fetch(`${METADATA_BASE_URL}/organizations.json`);
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch organizations: ${response.statusText}`);
+    }
+
+    const data: OrganizationsResponse = await response.json();
+    orgsCache = data;
+    orgsCacheTime = now;
+    return data;
+  } catch (error) {
+    console.error("Error fetching organizations:", error);
+    if (orgsCache) {
+      return orgsCache;
+    }
+    throw error;
+  }
+}
+
+/**
+ * Fetch profile markdown content
+ */
+export async function fetchProfileMarkdown(profilePath: string): Promise<string | null> {
+  if (!profilePath) {
+    return null;
+  }
+
+  try {
+    const url = profilePath.startsWith("http")
+      ? profilePath
+      : `${METADATA_BASE_URL}/${profilePath}`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      console.warn(`Failed to fetch profile markdown: ${response.statusText}`);
+      return null;
+    }
+
+    return await response.text();
+  } catch (error) {
+    console.error("Error fetching profile markdown:", error);
+    return null;
+  }
+}
+
+/**
+ * Get asset URL from path
+ */
+export function getAssetUrl(assetPath: string): string {
+  if (assetPath.startsWith("http")) {
+    return assetPath;
+  }
+  return `${METADATA_BASE_URL}/${assetPath}`;
+}
+
+/**
+ * Fetch token metadata from tokens/{chainId}/{address}.json
+ */
+export async function fetchToken(chainId: number, address: string): Promise<TokenMetadata | null> {
+  try {
+    const response = await fetch(
+      `${METADATA_BASE_URL}/tokens/${chainId}/${address.toLowerCase()}.json`,
+    );
+
+    if (!response.ok) {
+      return null;
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("Error fetching token:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch a profile by type and ID
+ */
+export async function fetchProfile(
+  profileType: ProfileType,
+  profileId: string,
+): Promise<ProfileData | null> {
+  try {
+    let profileData: ProfileData | null = null;
+
+    switch (profileType) {
+      case "network": {
+        const { networks } = await fetchNetworks();
+        const network = networks.find(
+          (n) =>
+            n.chainId.toString() === profileId ||
+            n.shortName.toLowerCase() === profileId.toLowerCase(),
+        );
+        if (network) {
+          profileData = {
+            type: "network",
+            id: network.chainId.toString(),
+            name: network.name,
+            description: network.description,
+            subscription: network.subscription,
+            logo: network.logo,
+            logoUrl: network.logo ? getAssetUrl(network.logo) : undefined,
+            links: network.links,
+            chainId: network.chainId,
+            currency: network.currency,
+            color: network.color,
+            isTestnet: network.isTestnet,
+            rpc: network.rpc,
+          };
+          if (network.profile) {
+            profileData.profileMarkdown =
+              (await fetchProfileMarkdown(network.profile)) ?? undefined;
+          }
+        }
+        break;
+      }
+
+      case "app": {
+        const { apps } = await fetchApps();
+        const app = apps.find((a) => a.id.toLowerCase() === profileId.toLowerCase());
+        if (app) {
+          profileData = {
+            type: "app",
+            id: app.id,
+            name: app.name,
+            description: app.description,
+            subscription: app.subscription,
+            logo: app.logo,
+            logoUrl: app.logo ? getAssetUrl(app.logo) : undefined,
+            links: app.links,
+            verified: app.verified,
+            networks: app.networks,
+            tags: app.tags,
+          };
+          if (app.profile) {
+            profileData.profileMarkdown = (await fetchProfileMarkdown(app.profile)) ?? undefined;
+          }
+        }
+        break;
+      }
+
+      case "organization": {
+        const { organizations } = await fetchOrganizations();
+        const org = organizations.find((o) => o.id.toLowerCase() === profileId.toLowerCase());
+        if (org) {
+          profileData = {
+            type: "organization",
+            id: org.id,
+            name: org.name,
+            description: org.description,
+            subscription: org.subscription,
+            logo: org.logo,
+            logoUrl: org.logo ? getAssetUrl(org.logo) : undefined,
+            links: org.links,
+            orgType: org.type,
+          };
+          if (org.profile) {
+            profileData.profileMarkdown = (await fetchProfileMarkdown(org.profile)) ?? undefined;
+          }
+        }
+        break;
+      }
+
+      case "token": {
+        // profileId format: chainId/address (e.g., "1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48")
+        const parts = profileId.split("/");
+        const chainIdStr = parts[0];
+        const tokenAddress = parts[1];
+        const chainId = chainIdStr ? Number.parseInt(chainIdStr, 10) : undefined;
+        if (chainId && tokenAddress) {
+          const token = await fetchToken(chainId, tokenAddress);
+          if (token) {
+            profileData = {
+              type: "token",
+              id: token.address,
+              name: token.name,
+              description: token.project?.description,
+              subscription: token.subscription,
+              logo: token.logo,
+              logoUrl: token.logo
+                ? getAssetUrl(token.logo)
+                : getAssetUrl(`assets/tokens/${chainId}/${token.address.toLowerCase()}.png`),
+              links: token.links,
+              chainId: token.chainId,
+              verified: token.verified,
+              tags: token.tags,
+              tokenAddress: token.address,
+              symbol: token.symbol,
+              decimals: token.decimals,
+              tokenType: token.type,
+              projectName: token.project?.name,
+              otherNetworks: token.networks,
+            };
+            if (token.profile) {
+              profileData.profileMarkdown =
+                (await fetchProfileMarkdown(token.profile)) ?? undefined;
+            }
+          }
+        }
+        break;
+      }
+    }
+
+    return profileData;
+  } catch (error) {
+    console.error(`Error fetching ${profileType} profile:`, error);
+    return null;
+  }
+}
diff --git a/src/services/RPCMetadataService.ts b/src/services/RPCMetadataService.ts
deleted file mode 100644
index 51b7892..0000000
--- a/src/services/RPCMetadataService.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { RPCMetadata, RPCProviderResponse } from "../types";
-import type { ParallelRequestResult } from "./EVM/common/RPCClient";
-
-/**
- * Service for processing RPC parallel request metadata
- */
-export class RPCMetadataService {
-	/**
-	 * Convert parallel results to metadata structure
-	 */
-	static createMetadata(
-		results: ParallelRequestResult[],
-		strategy: "parallel",
-	): RPCMetadata {
-		const responses: RPCProviderResponse[] = results.map((result) => ({
-			url: result.url,
-			status: result.status === "fulfilled" ? "success" : "error",
-			responseTime: 0, // TODO: Add timing in future
-			data: result.response,
-			error: result.error?.message,
-			hash: RPCMetadataService.hashData(result.response),
-		}));
-
-		const hasInconsistencies = RPCMetadataService.detectInconsistencies(responses);
-
-		return {
-			strategy,
-			timestamp: Date.now(),
-			responses,
-			hasInconsistencies,
-		};
-	}
-
-	/**
-	 * Generate hash of data for comparison
-	 * Uses JSON.stringify for simple but effective comparison
-	 */
-	private static hashData(data: any): string {
-		if (!data) return "";
-		try {
-			// Stringify for comparison
-			// In production, might want to exclude certain fields (timestamps, etc.)
-			return JSON.stringify(data);
-		} catch (error) {
-			console.warn("Failed to hash RPC data:", error);
-			return "";
-		}
-	}
-
-	/**
-	 * Detect if responses differ between providers
-	 */
-	private static detectInconsistencies(
-		responses: RPCProviderResponse[],
-	): boolean {
-		const successfulResponses = responses.filter((r) => r.status === "success");
-
-		// Need at least 2 successful responses to compare
-		if (successfulResponses.length <= 1) return false;
-
-		const firstHash = successfulResponses[0]?.hash;
-		if (!firstHash) return false;
-
-		// Check if any other response has a different hash
-		return successfulResponses.some((r) => r.hash !== firstHash);
-	}
-}
diff --git a/src/services/adapters/ArbitrumAdapter/ArbitrumAdapter.ts b/src/services/adapters/ArbitrumAdapter/ArbitrumAdapter.ts
new file mode 100644
index 0000000..17bcc7c
--- /dev/null
+++ b/src/services/adapters/ArbitrumAdapter/ArbitrumAdapter.ts
@@ -0,0 +1,299 @@
+import { type BlockNumberOrTag, NetworkAdapter, type TraceResult } from "../NetworkAdapter";
+import type {
+  Block,
+  Transaction,
+  Address,
+  NetworkStats,
+  DataWithMetadata,
+  AddressTransactionsResult,
+} from "../../../types";
+import {
+  transformArbitrumBlockToBlock,
+  transformArbitrumTransactionToTransaction,
+  createAddressFromBalance,
+  hexToNumber,
+} from "./utils";
+import { extractData } from "../shared/extractData";
+import { normalizeBlockNumber } from "../shared/normalizeBlockNumber";
+import type { ArbitrumClient } from "explorer-network-connectors";
+
+/**
+ * Arbitrum blockchain adapter
+ * Extends base NetworkAdapter with Arbitrum-specific features
+ * Chain ID: 42161
+ * Includes Arbitrum-specific trace methods (arbtrace_*)
+ */
+export class ArbitrumAdapter extends NetworkAdapter {
+  private client: ArbitrumClient;
+
+  constructor(networkId: 42161, client: ArbitrumClient) {
+    super(networkId);
+    this.client = client;
+  }
+
+  async getBlock(blockNumber: BlockNumberOrTag): Promise<DataWithMetadata<Block>> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformArbitrumBlockToBlock(blockData);
+
+    return {
+      data: block,
+      metadata: result.metadata as DataWithMetadata<Block>["metadata"],
+    };
+  }
+
+  async getBlockWithTransactions(
+    blockNumber: BlockNumberOrTag,
+  ): Promise<Block & { transactionDetails: Transaction[] }> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber, true);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformArbitrumBlockToBlock(blockData);
+
+    // Extract transaction details
+    const transactionDetails: Transaction[] = [];
+    if (Array.isArray(blockData.transactions)) {
+      for (const tx of blockData.transactions) {
+        if (typeof tx !== "string") {
+          transactionDetails.push(transformArbitrumTransactionToTransaction(tx));
+        }
+      }
+    }
+
+    return {
+      ...block,
+      transactionDetails,
+    };
+  }
+
+  async getTransaction(txHash: string): Promise<DataWithMetadata<Transaction>> {
+    const [txResult, receiptResult] = await Promise.all([
+      this.client.getTransactionByHash(txHash),
+      this.client.getTransactionReceipt(txHash),
+    ]);
+
+    const txData = extractData<typeof txResult.data>(txResult.data);
+    if (!txData) {
+      throw new Error(`Transaction ${txHash} not found`);
+    }
+
+    const receiptData = extractData<typeof receiptResult.data>(receiptResult.data);
+    const transaction = transformArbitrumTransactionToTransaction(txData, receiptData);
+
+    // Get timestamp and baseFeePerGas from block if available
+    if (txData.blockNumber) {
+      try {
+        const blockResult = await this.getBlock(txData.blockNumber);
+
+        if (blockResult.data) {
+          transaction.timestamp = blockResult.data.timestamp;
+          transaction.blockBaseFeePerGas = blockResult.data.baseFeePerGas;
+        }
+      } catch (error) {
+        console.warn("Failed to fetch block for transaction timestamp:", error);
+      }
+    }
+
+    return {
+      data: transaction,
+      metadata: txResult.metadata as DataWithMetadata<Transaction>["metadata"],
+    };
+  }
+
+  async getAddress(address: string): Promise<DataWithMetadata<Address>> {
+    const [balanceResult, codeResult, txCountResult] = await Promise.all([
+      this.client.getBalance(address, "latest"),
+      this.client.getCode(address, "latest"),
+      this.client.getTransactionCount(address, "latest"),
+    ]);
+
+    const balance = extractData<string>(balanceResult.data) || "0x0";
+    const code = extractData<string>(codeResult.data) || "0x";
+    const txCount = extractData<string>(txCountResult.data) || "0x0";
+
+    const addressData = createAddressFromBalance(address, balance, code, txCount);
+
+    return {
+      data: addressData,
+      metadata: balanceResult.metadata as DataWithMetadata<Address>["metadata"],
+    };
+  }
+
+  async getAddressTransactions(
+    _address: string,
+    _fromBlock?: number | "earliest",
+    _toBlock?: number | "latest",
+    _limit = 100,
+  ): Promise<AddressTransactionsResult> {
+    // Arbitrum doesn't have a native method to get transactions by address
+    // This would require scanning blocks or using an indexer
+    // For now, return empty result
+    console.warn("getAddressTransactions not fully implemented for Arbitrum");
+
+    return {
+      transactions: [],
+      source: "none",
+      isComplete: false,
+      message: "Address transaction lookup not supported without indexer",
+    };
+  }
+
+  async getLatestBlockNumber(): Promise<number> {
+    const result = await this.client.blockNumber();
+    const blockNumber = extractData<string>(result.data) || "0x0";
+    return hexToNumber(blockNumber);
+  }
+
+  async getNetworkStats(): Promise<DataWithMetadata<NetworkStats>> {
+    const [gasPriceResult, syncingResult, blockNumberResult, versionResult] = await Promise.all([
+      this.client.gasPrice(),
+      this.client.syncing(),
+      this.client.blockNumber(),
+      this.client.clientVersion(),
+    ]);
+
+    // Extract actual data from strategy results (handles both fallback and parallel modes)
+    const gasPrice = extractData<string>(gasPriceResult.data) || "0x0";
+    const syncing = extractData<boolean | object>(syncingResult.data);
+    const blockNumber = extractData<string>(blockNumberResult.data) || "0x0";
+    const clientVersion = extractData<string>(versionResult.data) || "unknown";
+
+    const stats: NetworkStats = {
+      currentGasPrice: gasPrice,
+      isSyncing: typeof syncing === "boolean" ? syncing : true,
+      currentBlockNumber: blockNumber,
+      clientVersion: clientVersion,
+      metadata: {},
+    };
+
+    return {
+      data: stats,
+      metadata: gasPriceResult.metadata as DataWithMetadata<NetworkStats>["metadata"],
+    };
+  }
+
+  async getLatestBlocks(count = 10): Promise<Block[]> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    const blocks: Block[] = [];
+
+    const promises = [];
+    for (let i = 0; i < count; i++) {
+      const blockNum = latestBlockNumber - i;
+      if (blockNum >= 0) {
+        promises.push(this.getBlock(blockNum));
+      }
+    }
+
+    const results = await Promise.all(promises);
+    for (const result of results) {
+      blocks.push(result.data);
+    }
+
+    return blocks;
+  }
+
+  async getTransactionsFromLatestBlocks(
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    return this.getTransactionsFromBlockRange(latestBlockNumber, blockCount);
+  }
+
+  async getTransactionsFromBlockRange(
+    fromBlock: number,
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const transactions: Array<Transaction & { blockNumber: string }> = [];
+
+    for (let i = 0; i < blockCount; i++) {
+      const blockNum = fromBlock - i;
+      if (blockNum < 0) break;
+
+      try {
+        const blockWithTxs = await this.getBlockWithTransactions(blockNum);
+        for (const tx of blockWithTxs.transactionDetails) {
+          transactions.push({
+            ...tx,
+            blockNumber: blockWithTxs.number,
+          });
+        }
+      } catch (error) {
+        console.error(`Error fetching block ${blockNum}:`, error);
+      }
+    }
+
+    return transactions;
+  }
+
+  getChainId(): number {
+    return this.networkId;
+  }
+
+  isTraceAvailable(): boolean {
+    return this.isLocalHost;
+  }
+
+  async getTransactionTrace(txHash: string): Promise<TraceResult | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {});
+      return extractData<TraceResult | null>(result.data);
+    } catch (error) {
+      console.error("Error getting transaction trace:", error);
+      return null;
+    }
+  }
+
+  // biome-ignore lint/suspicious/noExplicitAny: Generic trace result
+  async getCallTrace(txHash: string): Promise<any> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.arbtraceTransaction(txHash);
+      // biome-ignore lint/suspicious/noExplicitAny: Generic trace result type
+      return extractData<any>(result.data);
+    } catch (error) {
+      console.error("Error getting call trace:", error);
+      return null;
+    }
+  }
+
+  async getBlockTrace(blockHash: string): Promise<TraceResult[] | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      // Convert block hash to block number first
+      const blockResult = await this.client.getBlockByHash(blockHash, false);
+      const blockData = extractData<typeof blockResult.data>(blockResult.data);
+      if (!blockData) return null;
+
+      const blockNumber = hexToNumber(blockData.number);
+      const result = await this.client.arbtraceBlock(normalizeBlockNumber(blockNumber));
+      return extractData<TraceResult[] | null>(result.data);
+    } catch (error) {
+      console.error("Error getting block trace:", error);
+      return null;
+    }
+  }
+}
diff --git a/src/services/adapters/ArbitrumAdapter/index.ts b/src/services/adapters/ArbitrumAdapter/index.ts
new file mode 100644
index 0000000..d8de2a6
--- /dev/null
+++ b/src/services/adapters/ArbitrumAdapter/index.ts
@@ -0,0 +1 @@
+export { ArbitrumAdapter } from "./ArbitrumAdapter";
diff --git a/src/services/adapters/ArbitrumAdapter/utils.ts b/src/services/adapters/ArbitrumAdapter/utils.ts
new file mode 100644
index 0000000..514741a
--- /dev/null
+++ b/src/services/adapters/ArbitrumAdapter/utils.ts
@@ -0,0 +1,129 @@
+import type { Block, Transaction, Address, TransactionReceipt } from "../../../types";
+import type {
+  ArbitrumBlock,
+  ArbitrumTransaction,
+  ArbitrumTransactionReceipt,
+} from "explorer-network-connectors";
+
+/**
+ * Transforms an Arbitrum RPC block response into a Block domain object
+ * Handles hex-to-decimal conversions and normalizes fields
+ * Includes Arbitrum-specific fields: l1BlockNumber, sendCount, sendRoot
+ */
+export function transformArbitrumBlockToBlock(rpcBlock: ArbitrumBlock): Block {
+  const timestamp = rpcBlock.timestamp
+    ? parseInt(rpcBlock.timestamp, rpcBlock.timestamp.startsWith("0x") ? 16 : 10).toString()
+    : "0";
+
+  return {
+    number: rpcBlock.number,
+    hash: rpcBlock.hash,
+    parentHash: rpcBlock.parentHash,
+    timestamp,
+    baseFeePerGas: rpcBlock.baseFeePerGas ? BigInt(rpcBlock.baseFeePerGas).toString() : undefined,
+    nonce: rpcBlock.nonce,
+    difficulty: BigInt(rpcBlock.difficulty).toString(),
+    gasLimit: BigInt(rpcBlock.gasLimit).toString(),
+    gasUsed: BigInt(rpcBlock.gasUsed).toString(),
+    miner: rpcBlock.miner,
+    extraData: rpcBlock.extraData,
+    transactions: Array.isArray(rpcBlock.transactions)
+      ? rpcBlock.transactions.map((tx) =>
+          typeof tx === "string" ? tx : (tx as ArbitrumTransaction).hash,
+        )
+      : [],
+    size: rpcBlock.size,
+    logsBloom: rpcBlock.logsBloom,
+    stateRoot: rpcBlock.stateRoot,
+    receiptsRoot: rpcBlock.receiptsRoot,
+    transactionsRoot: rpcBlock.transactionsRoot,
+    uncles: rpcBlock.uncles || [],
+    mixHash: rpcBlock.mixHash || "",
+    sha3Uncles: rpcBlock.sha3Uncles,
+    totalDifficulty: BigInt(rpcBlock.difficulty).toString(),
+    blobGasUsed: "",
+    excessBlobGas: "",
+    withdrawalsRoot: "",
+    withdrawals: [],
+  };
+}
+
+/**
+ * Transforms an Arbitrum RPC transaction response into a Transaction domain object
+ * Includes Arbitrum-specific receipt fields: gasUsedForL1, l1BlockNumber
+ */
+export function transformArbitrumTransactionToTransaction(
+  rpcTx: ArbitrumTransaction,
+  receipt?: ArbitrumTransactionReceipt | null,
+): Transaction {
+  const transaction: Transaction = {
+    hash: rpcTx.hash,
+    from: rpcTx.from,
+    to: rpcTx.to || "",
+    value: BigInt(rpcTx.value).toString(),
+    gas: BigInt(rpcTx.gas).toString(),
+    gasPrice: rpcTx.gasPrice ? BigInt(rpcTx.gasPrice).toString() : "0",
+    maxFeePerGas: undefined,
+    maxPriorityFeePerGas: undefined,
+    nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
+    data: rpcTx.input,
+    blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
+    blockHash: rpcTx.blockHash || "",
+    transactionIndex: rpcTx.transactionIndex
+      ? parseInt(rpcTx.transactionIndex, 16).toString()
+      : "0",
+    v: rpcTx.v,
+    r: rpcTx.r,
+    s: rpcTx.s,
+    type: rpcTx.type,
+  };
+
+  if (receipt) {
+    const arbitrumReceipt: TransactionReceipt = {
+      blockHash: receipt.blockHash,
+      blockNumber: parseInt(receipt.blockNumber, 16).toString(),
+      contractAddress: receipt.contractAddress,
+      cumulativeGasUsed: BigInt(receipt.cumulativeGasUsed).toString(),
+      effectiveGasPrice: receipt.effectiveGasPrice
+        ? BigInt(receipt.effectiveGasPrice).toString()
+        : "0",
+      from: receipt.from,
+      gasUsed: BigInt(receipt.gasUsed).toString(),
+      logs: receipt.logs,
+      logsBloom: receipt.logsBloom,
+      status: receipt.status || "0x1",
+      to: receipt.to || "",
+      transactionHash: receipt.transactionHash,
+      transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
+      type: receipt.type,
+    };
+    transaction.receipt = arbitrumReceipt;
+  }
+
+  return transaction;
+}
+
+/**
+ * Creates an Address domain object from balance, code, and transaction count
+ */
+export function createAddressFromBalance(
+  address: string,
+  balance: string,
+  code: string,
+  txCount: string,
+): Address {
+  return {
+    address,
+    balance: BigInt(balance).toString(),
+    code,
+    txCount: parseInt(txCount, 16).toString(),
+    storageAt: {},
+  };
+}
+
+/**
+ * Converts a hex string to a number
+ */
+export function hexToNumber(hex: string): number {
+  return parseInt(hex, 16);
+}
diff --git a/src/services/adapters/BNBAdapter/BNBAdapter.ts b/src/services/adapters/BNBAdapter/BNBAdapter.ts
new file mode 100644
index 0000000..b500338
--- /dev/null
+++ b/src/services/adapters/BNBAdapter/BNBAdapter.ts
@@ -0,0 +1,299 @@
+import { type BlockNumberOrTag, NetworkAdapter } from "../NetworkAdapter";
+import type {
+  Block,
+  Transaction,
+  Address,
+  NetworkStats,
+  DataWithMetadata,
+  AddressTransactionsResult,
+} from "../../../types";
+import type { TraceResult } from "../NetworkAdapter";
+import {
+  transformBNBBlockToBlock,
+  transformBNBTransactionToTransaction,
+  createAddressFromBalance,
+  hexToNumber,
+} from "./utils";
+import { extractData } from "../shared/extractData";
+import { normalizeBlockNumber } from "../shared/normalizeBlockNumber";
+import type { BNBClient } from "explorer-network-connectors";
+
+/**
+ * BNB Smart Chain (BSC) blockchain adapter
+ * Extends base NetworkAdapter with standard EVM functionality
+ * Chain ID: 56 (mainnet)
+ */
+export class BNBAdapter extends NetworkAdapter {
+  private client: BNBClient;
+
+  constructor(networkId: 56 | 97, client: BNBClient) {
+    super(networkId);
+    this.client = client;
+  }
+
+  async getBlock(blockNumber: BlockNumberOrTag): Promise<DataWithMetadata<Block>> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformBNBBlockToBlock(blockData);
+
+    return {
+      data: block,
+      metadata: result.metadata as DataWithMetadata<Block>["metadata"],
+    };
+  }
+
+  async getBlockWithTransactions(
+    blockNumber: BlockNumberOrTag,
+  ): Promise<Block & { transactionDetails: Transaction[] }> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber, true);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformBNBBlockToBlock(blockData);
+
+    // Extract transaction details
+    const transactionDetails: Transaction[] = [];
+    if (Array.isArray(blockData.transactions)) {
+      for (const tx of blockData.transactions) {
+        if (typeof tx !== "string") {
+          transactionDetails.push(transformBNBTransactionToTransaction(tx));
+        }
+      }
+    }
+
+    return {
+      ...block,
+      transactionDetails,
+    };
+  }
+
+  async getTransaction(txHash: string): Promise<DataWithMetadata<Transaction>> {
+    const [txResult, receiptResult] = await Promise.all([
+      this.client.getTransactionByHash(txHash),
+      this.client.getTransactionReceipt(txHash),
+    ]);
+
+    const txData = extractData<typeof txResult.data>(txResult.data);
+    if (!txData) {
+      throw new Error(`Transaction ${txHash} not found`);
+    }
+
+    const receiptData = extractData<typeof receiptResult.data>(receiptResult.data);
+    const transaction = transformBNBTransactionToTransaction(txData, receiptData);
+
+    // Get timestamp and baseFeePerGas from block if available
+    if (txData.blockNumber) {
+      try {
+        const blockResult = await this.getBlock(txData.blockNumber);
+
+        if (blockResult.data) {
+          transaction.timestamp = blockResult.data.timestamp;
+          transaction.blockBaseFeePerGas = blockResult.data.baseFeePerGas;
+        }
+      } catch (error) {
+        console.warn("Failed to fetch block for transaction timestamp:", error);
+      }
+    }
+
+    return {
+      data: transaction,
+      metadata: txResult.metadata as DataWithMetadata<Transaction>["metadata"],
+    };
+  }
+
+  async getAddress(address: string): Promise<DataWithMetadata<Address>> {
+    const [balanceResult, codeResult, txCountResult] = await Promise.all([
+      this.client.getBalance(address, "latest"),
+      this.client.getCode(address, "latest"),
+      this.client.getTransactionCount(address, "latest"),
+    ]);
+
+    const balance = extractData<string>(balanceResult.data) || "0x0";
+    const code = extractData<string>(codeResult.data) || "0x";
+    const txCount = extractData<string>(txCountResult.data) || "0x0";
+
+    const addressData = createAddressFromBalance(address, balance, code, txCount);
+
+    return {
+      data: addressData,
+      metadata: balanceResult.metadata as DataWithMetadata<Address>["metadata"],
+    };
+  }
+
+  async getAddressTransactions(
+    _address: string,
+    _fromBlock?: number | "earliest",
+    _toBlock?: number | "latest",
+    _limit = 100,
+  ): Promise<AddressTransactionsResult> {
+    // BNB doesn't have a native method to get transactions by address
+    // This would require scanning blocks or using an indexer
+    // For now, return empty result
+    console.warn("getAddressTransactions not fully implemented for BNB chain");
+
+    return {
+      transactions: [],
+      source: "none",
+      isComplete: false,
+      message: "Address transaction lookup not supported without indexer",
+    };
+  }
+
+  async getLatestBlockNumber(): Promise<number> {
+    const result = await this.client.blockNumber();
+    const blockNumber = extractData<string>(result.data) || "0x0";
+    return hexToNumber(blockNumber);
+  }
+
+  async getNetworkStats(): Promise<DataWithMetadata<NetworkStats>> {
+    const [gasPriceResult, syncingResult, blockNumberResult, versionResult] = await Promise.all([
+      this.client.gasPrice(),
+      this.client.syncing(),
+      this.client.blockNumber(),
+      this.client.clientVersion(),
+    ]);
+
+    // Extract actual data from strategy results (handles both fallback and parallel modes)
+    const gasPrice = extractData<string>(gasPriceResult.data) || "0x0";
+    const syncing = extractData<boolean | object>(syncingResult.data);
+    const blockNumber = extractData<string>(blockNumberResult.data) || "0x0";
+    const clientVersion = extractData<string>(versionResult.data) || "unknown";
+
+    const stats: NetworkStats = {
+      currentGasPrice: gasPrice,
+      isSyncing: typeof syncing === "boolean" ? syncing : true,
+      currentBlockNumber: blockNumber,
+      clientVersion: clientVersion,
+      metadata: {},
+    };
+
+    return {
+      data: stats,
+      metadata: gasPriceResult.metadata as DataWithMetadata<NetworkStats>["metadata"],
+    };
+  }
+
+  async getLatestBlocks(count = 10): Promise<Block[]> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    const blocks: Block[] = [];
+
+    const promises = [];
+    for (let i = 0; i < count; i++) {
+      const blockNum = latestBlockNumber - i;
+      if (blockNum >= 0) {
+        promises.push(this.getBlock(blockNum));
+      }
+    }
+
+    const results = await Promise.all(promises);
+    for (const result of results) {
+      blocks.push(result.data);
+    }
+
+    return blocks;
+  }
+
+  async getTransactionsFromLatestBlocks(
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    return this.getTransactionsFromBlockRange(latestBlockNumber, blockCount);
+  }
+
+  async getTransactionsFromBlockRange(
+    fromBlock: number,
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const transactions: Array<Transaction & { blockNumber: string }> = [];
+
+    for (let i = 0; i < blockCount; i++) {
+      const blockNum = fromBlock - i;
+      if (blockNum < 0) break;
+
+      try {
+        const blockWithTxs = await this.getBlockWithTransactions(blockNum);
+        for (const tx of blockWithTxs.transactionDetails) {
+          transactions.push({
+            ...tx,
+            blockNumber: blockWithTxs.number,
+          });
+        }
+      } catch (error) {
+        console.error(`Error fetching block ${blockNum}:`, error);
+      }
+    }
+
+    return transactions;
+  }
+
+  getChainId(): number {
+    return this.networkId;
+  }
+
+  isTraceAvailable(): boolean {
+    return this.isLocalHost;
+  }
+
+  async getTransactionTrace(txHash: string): Promise<TraceResult | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {});
+      return extractData<TraceResult | null>(result.data);
+    } catch (error) {
+      console.error("Error getting transaction trace:", error);
+      return null;
+    }
+  }
+
+  // biome-ignore lint/suspicious/noExplicitAny: Generic trace result
+  async getCallTrace(txHash: string): Promise<any> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.traceTransaction(txHash);
+      // biome-ignore lint/suspicious/noExplicitAny: Generic trace result type
+      return extractData<any>(result.data);
+    } catch (error) {
+      console.error("Error getting call trace:", error);
+      return null;
+    }
+  }
+
+  async getBlockTrace(blockHash: string): Promise<TraceResult[] | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      // Convert block hash to block number first
+      const blockResult = await this.client.getBlockByHash(blockHash, false);
+      const blockData = extractData<typeof blockResult.data>(blockResult.data);
+      if (!blockData) return null;
+
+      const blockNumber = hexToNumber(blockData.number);
+      const result = await this.client.traceBlock(blockNumber);
+      return extractData<TraceResult[] | null>(result.data);
+    } catch (error) {
+      console.error("Error getting block trace:", error);
+      return null;
+    }
+  }
+}
diff --git a/src/services/adapters/BNBAdapter/index.ts b/src/services/adapters/BNBAdapter/index.ts
new file mode 100644
index 0000000..bf38102
--- /dev/null
+++ b/src/services/adapters/BNBAdapter/index.ts
@@ -0,0 +1,2 @@
+export { BNBAdapter } from "./BNBAdapter";
+export * from "./utils";
diff --git a/src/services/adapters/BNBAdapter/utils.ts b/src/services/adapters/BNBAdapter/utils.ts
new file mode 100644
index 0000000..e375299
--- /dev/null
+++ b/src/services/adapters/BNBAdapter/utils.ts
@@ -0,0 +1,134 @@
+import type { Block, Transaction, Address } from "../../../types";
+import type { BNBBlock, BNBTransaction, BNBTransactionReceipt } from "explorer-network-connectors";
+
+/**
+ * Transforms a BNB RPC block response into a Block domain object
+ * Handles hex-to-decimal conversions and normalizes fields
+ */
+export function transformBNBBlockToBlock(rpcBlock: BNBBlock): Block {
+  const timestamp = rpcBlock.timestamp
+    ? parseInt(rpcBlock.timestamp, rpcBlock.timestamp.startsWith("0x") ? 16 : 10).toString()
+    : "0";
+
+  return {
+    number: rpcBlock.number,
+    hash: rpcBlock.hash,
+    parentHash: rpcBlock.parentHash,
+    timestamp,
+    baseFeePerGas: rpcBlock.baseFeePerGas ? BigInt(rpcBlock.baseFeePerGas).toString() : undefined,
+    nonce: rpcBlock.nonce,
+    difficulty: BigInt(rpcBlock.difficulty).toString(),
+    gasLimit: BigInt(rpcBlock.gasLimit).toString(),
+    gasUsed: BigInt(rpcBlock.gasUsed).toString(),
+    miner: rpcBlock.miner,
+    extraData: rpcBlock.extraData,
+    transactions: Array.isArray(rpcBlock.transactions)
+      ? rpcBlock.transactions.map((tx) =>
+          typeof tx === "string" ? tx : (tx as BNBTransaction).hash,
+        )
+      : [],
+    size: rpcBlock.size,
+    logsBloom: rpcBlock.logsBloom,
+    stateRoot: rpcBlock.stateRoot,
+    receiptsRoot: rpcBlock.receiptsRoot,
+    transactionsRoot: rpcBlock.transactionsRoot,
+    uncles: rpcBlock.uncles || [],
+    mixHash: rpcBlock.mixHash || "",
+    sha3Uncles: rpcBlock.sha3Uncles,
+    totalDifficulty: rpcBlock.totalDifficulty
+      ? BigInt(rpcBlock.totalDifficulty).toString()
+      : BigInt(rpcBlock.difficulty).toString(),
+    blobGasUsed: "",
+    excessBlobGas: "",
+    withdrawalsRoot: rpcBlock.withdrawalsRoot || "",
+    withdrawals: rpcBlock.withdrawals
+      ? rpcBlock.withdrawals.map((w) => ({
+          address: w.address,
+          amount: w.amount,
+          index: w.index,
+          validatorIndex: w.validatorIndex,
+        }))
+      : [],
+  };
+}
+
+/**
+ * Transforms a BNB RPC transaction response into a Transaction domain object
+ * Handles hex-to-decimal conversions and includes receipt if provided
+ */
+export function transformBNBTransactionToTransaction(
+  rpcTx: BNBTransaction,
+  receipt?: BNBTransactionReceipt | null,
+): Transaction {
+  const transaction: Transaction = {
+    hash: rpcTx.hash,
+    from: rpcTx.from,
+    to: rpcTx.to || "",
+    value: BigInt(rpcTx.value).toString(),
+    gas: BigInt(rpcTx.gas).toString(),
+    gasPrice: rpcTx.gasPrice ? BigInt(rpcTx.gasPrice).toString() : "0",
+    maxFeePerGas: rpcTx.maxFeePerGas ? BigInt(rpcTx.maxFeePerGas).toString() : undefined,
+    maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
+      ? BigInt(rpcTx.maxPriorityFeePerGas).toString()
+      : undefined,
+    nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
+    data: rpcTx.input,
+    blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
+    blockHash: rpcTx.blockHash || "",
+    transactionIndex: rpcTx.transactionIndex
+      ? parseInt(rpcTx.transactionIndex, 16).toString()
+      : "0",
+    v: rpcTx.v,
+    r: rpcTx.r,
+    s: rpcTx.s,
+    type: rpcTx.type,
+  };
+
+  if (receipt) {
+    transaction.receipt = {
+      blockHash: receipt.blockHash,
+      blockNumber: parseInt(receipt.blockNumber, 16).toString(),
+      contractAddress: receipt.contractAddress,
+      cumulativeGasUsed: BigInt(receipt.cumulativeGasUsed).toString(),
+      effectiveGasPrice: receipt.effectiveGasPrice
+        ? BigInt(receipt.effectiveGasPrice).toString()
+        : "0",
+      from: receipt.from,
+      gasUsed: BigInt(receipt.gasUsed).toString(),
+      logs: receipt.logs,
+      logsBloom: receipt.logsBloom,
+      status: receipt.status || "0x1",
+      to: receipt.to || "",
+      transactionHash: receipt.transactionHash,
+      transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
+      type: receipt.type,
+    };
+  }
+
+  return transaction;
+}
+
+/**
+ * Creates an Address domain object from balance, code, and transaction count
+ */
+export function createAddressFromBalance(
+  address: string,
+  balance: string,
+  code: string,
+  txCount: string,
+): Address {
+  return {
+    address,
+    balance: BigInt(balance).toString(),
+    code,
+    txCount: parseInt(txCount, 16).toString(),
+    storageAt: {},
+  };
+}
+
+/**
+ * Converts a hex string to a number
+ */
+export function hexToNumber(hex: string): number {
+  return parseInt(hex, 16);
+}
diff --git a/src/services/adapters/BaseAdapter/BaseAdapter.ts b/src/services/adapters/BaseAdapter/BaseAdapter.ts
new file mode 100644
index 0000000..ac2cb10
--- /dev/null
+++ b/src/services/adapters/BaseAdapter/BaseAdapter.ts
@@ -0,0 +1,298 @@
+import { type BlockNumberOrTag, NetworkAdapter, type TraceResult } from "../NetworkAdapter";
+import type {
+  Block,
+  Transaction,
+  Address,
+  NetworkStats,
+  DataWithMetadata,
+  AddressTransactionsResult,
+} from "../../../types";
+import {
+  transformBaseBlockToBlock,
+  transformBaseTransactionToTransaction,
+  createAddressFromBalance,
+  hexToNumber,
+} from "./utils";
+import { extractData } from "../shared/extractData";
+import { normalizeBlockNumber } from "../shared/normalizeBlockNumber";
+import type { BaseClient } from "explorer-network-connectors";
+
+/**
+ * Base blockchain adapter
+ * Extends base NetworkAdapter with Base-specific L1 fee handling (OP Stack)
+ * Chain ID: 8453
+ */
+export class BaseAdapter extends NetworkAdapter {
+  private client: BaseClient;
+
+  constructor(networkId: 8453, client: BaseClient) {
+    super(networkId);
+    this.client = client;
+  }
+
+  async getBlock(blockNumber: BlockNumberOrTag): Promise<DataWithMetadata<Block>> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformBaseBlockToBlock(blockData);
+
+    return {
+      data: block,
+      metadata: result.metadata as DataWithMetadata<Block>["metadata"],
+    };
+  }
+
+  async getBlockWithTransactions(
+    blockNumber: BlockNumberOrTag,
+  ): Promise<Block & { transactionDetails: Transaction[] }> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber, true);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformBaseBlockToBlock(blockData);
+
+    // Extract transaction details
+    const transactionDetails: Transaction[] = [];
+    if (Array.isArray(blockData.transactions)) {
+      for (const tx of blockData.transactions) {
+        if (typeof tx !== "string") {
+          transactionDetails.push(transformBaseTransactionToTransaction(tx));
+        }
+      }
+    }
+
+    return {
+      ...block,
+      transactionDetails,
+    };
+  }
+
+  async getTransaction(txHash: string): Promise<DataWithMetadata<Transaction>> {
+    const [txResult, receiptResult] = await Promise.all([
+      this.client.getTransactionByHash(txHash),
+      this.client.getTransactionReceipt(txHash),
+    ]);
+
+    const txData = extractData<typeof txResult.data>(txResult.data);
+    if (!txData) {
+      throw new Error(`Transaction ${txHash} not found`);
+    }
+
+    const receiptData = extractData<typeof receiptResult.data>(receiptResult.data);
+    const transaction = transformBaseTransactionToTransaction(txData, receiptData);
+
+    // Get timestamp and baseFeePerGas from block if available
+    if (txData.blockNumber) {
+      try {
+        const blockResult = await this.getBlock(txData.blockNumber);
+
+        if (blockResult.data) {
+          transaction.timestamp = blockResult.data.timestamp;
+          transaction.blockBaseFeePerGas = blockResult.data.baseFeePerGas;
+        }
+      } catch (error) {
+        console.warn("Failed to fetch block for transaction timestamp:", error);
+      }
+    }
+
+    return {
+      data: transaction,
+      metadata: txResult.metadata as DataWithMetadata<Transaction>["metadata"],
+    };
+  }
+
+  async getAddress(address: string): Promise<DataWithMetadata<Address>> {
+    const [balanceResult, codeResult, txCountResult] = await Promise.all([
+      this.client.getBalance(address, "latest"),
+      this.client.getCode(address, "latest"),
+      this.client.getTransactionCount(address, "latest"),
+    ]);
+
+    const balance = extractData<string>(balanceResult.data) || "0x0";
+    const code = extractData<string>(codeResult.data) || "0x";
+    const txCount = extractData<string>(txCountResult.data) || "0x0";
+
+    const addressData = createAddressFromBalance(address, balance, code, txCount);
+
+    return {
+      data: addressData,
+      metadata: balanceResult.metadata as DataWithMetadata<Address>["metadata"],
+    };
+  }
+
+  async getAddressTransactions(
+    _address: string,
+    _fromBlock?: number | "earliest",
+    _toBlock?: number | "latest",
+    _limit = 100,
+  ): Promise<AddressTransactionsResult> {
+    // Base doesn't have a native method to get transactions by address
+    // This would require scanning blocks or using an indexer
+    // For now, return empty result
+    console.warn("getAddressTransactions not fully implemented for Base");
+
+    return {
+      transactions: [],
+      source: "none",
+      isComplete: false,
+      message: "Address transaction lookup not supported without indexer",
+    };
+  }
+
+  async getLatestBlockNumber(): Promise<number> {
+    const result = await this.client.blockNumber();
+    const blockNumber = extractData<string>(result.data) || "0x0";
+    return hexToNumber(blockNumber);
+  }
+
+  async getNetworkStats(): Promise<DataWithMetadata<NetworkStats>> {
+    const [gasPriceResult, syncingResult, blockNumberResult, versionResult] = await Promise.all([
+      this.client.gasPrice(),
+      this.client.syncing(),
+      this.client.blockNumber(),
+      this.client.clientVersion(),
+    ]);
+
+    // Extract actual data from strategy results (handles both fallback and parallel modes)
+    const gasPrice = extractData<string>(gasPriceResult.data) || "0x0";
+    const syncing = extractData<boolean | object>(syncingResult.data);
+    const blockNumber = extractData<string>(blockNumberResult.data) || "0x0";
+    const clientVersion = extractData<string>(versionResult.data) || "unknown";
+
+    const stats: NetworkStats = {
+      currentGasPrice: gasPrice,
+      isSyncing: typeof syncing === "boolean" ? syncing : true,
+      currentBlockNumber: blockNumber,
+      clientVersion: clientVersion,
+      metadata: {},
+    };
+
+    return {
+      data: stats,
+      metadata: gasPriceResult.metadata as DataWithMetadata<NetworkStats>["metadata"],
+    };
+  }
+
+  async getLatestBlocks(count = 10): Promise<Block[]> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    const blocks: Block[] = [];
+
+    const promises = [];
+    for (let i = 0; i < count; i++) {
+      const blockNum = latestBlockNumber - i;
+      if (blockNum >= 0) {
+        promises.push(this.getBlock(blockNum));
+      }
+    }
+
+    const results = await Promise.all(promises);
+    for (const result of results) {
+      blocks.push(result.data);
+    }
+
+    return blocks;
+  }
+
+  async getTransactionsFromLatestBlocks(
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    return this.getTransactionsFromBlockRange(latestBlockNumber, blockCount);
+  }
+
+  async getTransactionsFromBlockRange(
+    fromBlock: number,
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const transactions: Array<Transaction & { blockNumber: string }> = [];
+
+    for (let i = 0; i < blockCount; i++) {
+      const blockNum = fromBlock - i;
+      if (blockNum < 0) break;
+
+      try {
+        const blockWithTxs = await this.getBlockWithTransactions(blockNum);
+        for (const tx of blockWithTxs.transactionDetails) {
+          transactions.push({
+            ...tx,
+            blockNumber: blockWithTxs.number,
+          });
+        }
+      } catch (error) {
+        console.error(`Error fetching block ${blockNum}:`, error);
+      }
+    }
+
+    return transactions;
+  }
+
+  getChainId(): number {
+    return this.networkId;
+  }
+
+  isTraceAvailable(): boolean {
+    return this.isLocalHost;
+  }
+
+  async getTransactionTrace(txHash: string): Promise<TraceResult | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {});
+      return extractData<TraceResult | null>(result.data);
+    } catch (error) {
+      console.error("Error getting transaction trace:", error);
+      return null;
+    }
+  }
+
+  // biome-ignore lint/suspicious/noExplicitAny: Generic trace result
+  async getCallTrace(txHash: string): Promise<any> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.traceTransaction(txHash);
+      // biome-ignore lint/suspicious/noExplicitAny: Generic trace result type
+      return extractData<any>(result.data);
+    } catch (error) {
+      console.error("Error getting call trace:", error);
+      return null;
+    }
+  }
+
+  async getBlockTrace(blockHash: string): Promise<TraceResult[] | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      // Convert block hash to block number first
+      const blockResult = await this.client.getBlockByHash(blockHash, false);
+      const blockData = extractData<typeof blockResult.data>(blockResult.data);
+      if (!blockData) return null;
+
+      const blockNumber = hexToNumber(blockData.number);
+      const result = await this.client.traceBlock(blockNumber);
+      return extractData<TraceResult[] | null>(result.data);
+    } catch (error) {
+      console.error("Error getting block trace:", error);
+      return null;
+    }
+  }
+}
diff --git a/src/services/adapters/BaseAdapter/index.ts b/src/services/adapters/BaseAdapter/index.ts
new file mode 100644
index 0000000..8bb5cc0
--- /dev/null
+++ b/src/services/adapters/BaseAdapter/index.ts
@@ -0,0 +1,2 @@
+export { BaseAdapter } from "./BaseAdapter";
+export * from "./utils";
diff --git a/src/services/adapters/BaseAdapter/utils.ts b/src/services/adapters/BaseAdapter/utils.ts
new file mode 100644
index 0000000..11eec78
--- /dev/null
+++ b/src/services/adapters/BaseAdapter/utils.ts
@@ -0,0 +1,144 @@
+import type { Block, Transaction, Address, TransactionReceiptOptimism } from "../../../types";
+import type {
+  BaseBlock,
+  BaseTransaction,
+  BaseTransactionReceipt,
+} from "explorer-network-connectors";
+
+/**
+ * Transforms a Base RPC block response into a Block domain object
+ * Handles hex-to-decimal conversions and normalizes fields
+ */
+export function transformBaseBlockToBlock(rpcBlock: BaseBlock): Block {
+  const timestamp = rpcBlock.timestamp
+    ? parseInt(rpcBlock.timestamp, rpcBlock.timestamp.startsWith("0x") ? 16 : 10).toString()
+    : "0";
+
+  return {
+    number: rpcBlock.number,
+    hash: rpcBlock.hash,
+    parentHash: rpcBlock.parentHash,
+    timestamp,
+    baseFeePerGas: rpcBlock.baseFeePerGas ? BigInt(rpcBlock.baseFeePerGas).toString() : undefined,
+    nonce: rpcBlock.nonce,
+    difficulty: BigInt(rpcBlock.difficulty).toString(),
+    gasLimit: BigInt(rpcBlock.gasLimit).toString(),
+    gasUsed: BigInt(rpcBlock.gasUsed).toString(),
+    miner: rpcBlock.miner,
+    extraData: rpcBlock.extraData,
+    transactions: Array.isArray(rpcBlock.transactions)
+      ? rpcBlock.transactions.map((tx) =>
+          typeof tx === "string" ? tx : (tx as BaseTransaction).hash,
+        )
+      : [],
+    size: rpcBlock.size,
+    logsBloom: rpcBlock.logsBloom,
+    stateRoot: rpcBlock.stateRoot,
+    receiptsRoot: rpcBlock.receiptsRoot,
+    transactionsRoot: rpcBlock.transactionsRoot,
+    uncles: rpcBlock.uncles || [],
+    mixHash: rpcBlock.mixHash || "",
+    sha3Uncles: rpcBlock.sha3Uncles,
+    totalDifficulty: rpcBlock.totalDifficulty
+      ? BigInt(rpcBlock.totalDifficulty).toString()
+      : BigInt(rpcBlock.difficulty).toString(),
+    blobGasUsed: "",
+    excessBlobGas: "",
+    withdrawalsRoot: rpcBlock.withdrawalsRoot || "",
+    withdrawals: rpcBlock.withdrawals
+      ? rpcBlock.withdrawals.map((w) => ({
+          address: w.address,
+          amount: w.amount,
+          index: w.index,
+          validatorIndex: w.validatorIndex,
+        }))
+      : [],
+  };
+}
+
+/**
+ * Transforms a Base RPC transaction response into a Transaction domain object
+ * Includes Base-specific L1 fee fields in the receipt (OP Stack compatible)
+ */
+export function transformBaseTransactionToTransaction(
+  rpcTx: BaseTransaction,
+  receipt?: BaseTransactionReceipt | null,
+): Transaction {
+  const transaction: Transaction = {
+    hash: rpcTx.hash,
+    from: rpcTx.from,
+    to: rpcTx.to || "",
+    value: BigInt(rpcTx.value).toString(),
+    gas: BigInt(rpcTx.gas).toString(),
+    gasPrice: rpcTx.gasPrice ? BigInt(rpcTx.gasPrice).toString() : "0",
+    maxFeePerGas: rpcTx.maxFeePerGas ? BigInt(rpcTx.maxFeePerGas).toString() : undefined,
+    maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
+      ? BigInt(rpcTx.maxPriorityFeePerGas).toString()
+      : undefined,
+    nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
+    data: rpcTx.input,
+    blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
+    blockHash: rpcTx.blockHash || "",
+    transactionIndex: rpcTx.transactionIndex
+      ? parseInt(rpcTx.transactionIndex, 16).toString()
+      : "0",
+    v: rpcTx.v,
+    r: rpcTx.r,
+    s: rpcTx.s,
+    type: rpcTx.type,
+  };
+
+  if (receipt) {
+    const baseReceipt: TransactionReceiptOptimism = {
+      blockHash: receipt.blockHash,
+      blockNumber: parseInt(receipt.blockNumber, 16).toString(),
+      contractAddress: receipt.contractAddress,
+      cumulativeGasUsed: BigInt(receipt.cumulativeGasUsed).toString(),
+      effectiveGasPrice: receipt.effectiveGasPrice
+        ? BigInt(receipt.effectiveGasPrice).toString()
+        : "0",
+      from: receipt.from,
+      gasUsed: BigInt(receipt.gasUsed).toString(),
+      logs: receipt.logs,
+      logsBloom: receipt.logsBloom,
+      status: receipt.status || "0x1",
+      to: receipt.to || "",
+      transactionHash: receipt.transactionHash,
+      transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
+      type: receipt.type,
+      // Base-specific L1 fee fields (OP Stack compatible)
+      l1Fee: receipt.l1Fee || "0",
+      l1GasPrice: receipt.l1GasPrice || "0",
+      l1GasUsed: receipt.l1GasUsed || "0",
+      l1FeeScalar: "1",
+    };
+    transaction.receipt = baseReceipt;
+  }
+
+  return transaction;
+}
+
+/**
+ * Creates an Address domain object from balance, code, and transaction count
+ */
+export function createAddressFromBalance(
+  address: string,
+  balance: string,
+  code: string,
+  txCount: string,
+): Address {
+  return {
+    address,
+    balance: BigInt(balance).toString(),
+    code,
+    txCount: parseInt(txCount, 16).toString(),
+    storageAt: {},
+  };
+}
+
+/**
+ * Converts a hex string to a number
+ */
+export function hexToNumber(hex: string): number {
+  return parseInt(hex, 16);
+}
diff --git a/src/services/adapters/EVMAdapter/EVMAdapter.ts b/src/services/adapters/EVMAdapter/EVMAdapter.ts
new file mode 100644
index 0000000..7d80fed
--- /dev/null
+++ b/src/services/adapters/EVMAdapter/EVMAdapter.ts
@@ -0,0 +1,297 @@
+import { type BlockNumberOrTag, NetworkAdapter } from "../NetworkAdapter";
+import type {
+  Block,
+  Transaction,
+  Address,
+  NetworkStats,
+  DataWithMetadata,
+  AddressTransactionsResult,
+} from "../../../types";
+import type { TraceResult } from "../NetworkAdapter";
+import {
+  transformRPCBlockToBlock,
+  transformRPCTransactionToTransaction,
+  createAddressFromBalance,
+  hexToNumber,
+} from "./utils";
+import { extractData } from "../shared/extractData";
+import { normalizeBlockNumber } from "../shared/normalizeBlockNumber";
+import type { EthereumClient, SupportedChainId } from "explorer-network-connectors";
+
+/**
+ * EVM-compatible blockchain service
+ * Supports Ethereum, Arbitrum, Optimism, Base, BSC, Polygon
+ */
+export class EVMAdapter extends NetworkAdapter {
+  private client: EthereumClient;
+
+  constructor(networkId: SupportedChainId | 11155111 | 97 | 31337, client: EthereumClient) {
+    super(networkId);
+    this.client = client;
+  }
+  async getBlock(blockNumber: BlockNumberOrTag): Promise<DataWithMetadata<Block>> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformRPCBlockToBlock(blockData);
+
+    return {
+      data: block,
+      metadata: result.metadata as DataWithMetadata<Block>["metadata"],
+    };
+  }
+
+  async getBlockWithTransactions(
+    blockNumber: BlockNumberOrTag,
+  ): Promise<Block & { transactionDetails: Transaction[] }> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber, true);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformRPCBlockToBlock(blockData);
+
+    // Extract transaction details
+    const transactionDetails: Transaction[] = [];
+    if (Array.isArray(blockData.transactions)) {
+      for (const tx of blockData.transactions) {
+        if (typeof tx !== "string") {
+          transactionDetails.push(transformRPCTransactionToTransaction(tx));
+        }
+      }
+    }
+
+    return {
+      ...block,
+      transactionDetails,
+    };
+  }
+
+  async getTransaction(txHash: string): Promise<DataWithMetadata<Transaction>> {
+    const [txResult, receiptResult] = await Promise.all([
+      this.client.getTransactionByHash(txHash),
+      this.client.getTransactionReceipt(txHash),
+    ]);
+
+    const txData = extractData<typeof txResult.data>(txResult.data);
+    if (!txData) {
+      throw new Error(`Transaction ${txHash} not found`);
+    }
+
+    const receiptData = extractData<typeof receiptResult.data>(receiptResult.data);
+    const transaction = transformRPCTransactionToTransaction(txData, receiptData);
+
+    // Get timestamp and baseFeePerGas from block if available
+    if (txData.blockNumber) {
+      try {
+        const blockResult = await this.getBlock(txData.blockNumber);
+
+        if (blockResult.data) {
+          transaction.timestamp = blockResult.data.timestamp;
+          transaction.blockBaseFeePerGas = blockResult.data.baseFeePerGas;
+        }
+      } catch (error) {
+        console.warn("Failed to fetch block for transaction timestamp:", error);
+      }
+    }
+
+    return {
+      data: transaction,
+      metadata: txResult.metadata as DataWithMetadata<Transaction>["metadata"],
+    };
+  }
+
+  async getAddress(address: string): Promise<DataWithMetadata<Address>> {
+    const [balanceResult, codeResult, txCountResult] = await Promise.all([
+      this.client.getBalance(address, "latest"),
+      this.client.getCode(address, "latest"),
+      this.client.getTransactionCount(address, "latest"),
+    ]);
+
+    const balance = extractData<string>(balanceResult.data) || "0x0";
+    const code = extractData<string>(codeResult.data) || "0x";
+    const txCount = extractData<string>(txCountResult.data) || "0x0";
+
+    const addressData = createAddressFromBalance(address, balance, code, txCount);
+
+    return {
+      data: addressData,
+      metadata: balanceResult.metadata as DataWithMetadata<Address>["metadata"],
+    };
+  }
+
+  async getAddressTransactions(
+    _address: string,
+    _fromBlock?: number | "earliest",
+    _toBlock?: number | "latest",
+    _limit = 100,
+  ): Promise<AddressTransactionsResult> {
+    // EVM doesn't have a native method to get transactions by address
+    // This would require scanning blocks or using an indexer
+    // For now, return empty result
+    console.warn("getAddressTransactions not fully implemented for EVM chains");
+
+    return {
+      transactions: [],
+      source: "none",
+      isComplete: false,
+      message: "Address transaction lookup not supported without indexer",
+    };
+  }
+
+  async getLatestBlockNumber(): Promise<number> {
+    const result = await this.client.blockNumber();
+    const blockNumber = extractData<string>(result.data) || "0x0";
+    return hexToNumber(blockNumber);
+  }
+
+  async getNetworkStats(): Promise<DataWithMetadata<NetworkStats>> {
+    const [gasPriceResult, syncingResult, blockNumberResult, versionResult] = await Promise.all([
+      this.client.gasPrice(),
+      this.client.syncing(),
+      this.client.blockNumber(),
+      this.client.clientVersion(),
+    ]);
+
+    // Extract actual data from strategy results (handles both fallback and parallel modes)
+    const gasPrice = extractData<string>(gasPriceResult.data) || "0x0";
+    const syncing = extractData<boolean | object>(syncingResult.data);
+    const blockNumber = extractData<string>(blockNumberResult.data) || "0x0";
+    const clientVersion = extractData<string>(versionResult.data) || "unknown";
+
+    const stats: NetworkStats = {
+      currentGasPrice: gasPrice,
+      isSyncing: typeof syncing === "boolean" ? syncing : true,
+      currentBlockNumber: blockNumber,
+      clientVersion: clientVersion,
+      metadata: {},
+    };
+
+    return {
+      data: stats,
+      metadata: gasPriceResult.metadata as DataWithMetadata<NetworkStats>["metadata"],
+    };
+  }
+
+  async getLatestBlocks(count = 10): Promise<Block[]> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    const blocks: Block[] = [];
+
+    const promises = [];
+    for (let i = 0; i < count; i++) {
+      const blockNum = latestBlockNumber - i;
+      if (blockNum >= 0) {
+        promises.push(this.getBlock(blockNum));
+      }
+    }
+
+    const results = await Promise.all(promises);
+    for (const result of results) {
+      blocks.push(result.data);
+    }
+
+    return blocks;
+  }
+
+  async getTransactionsFromLatestBlocks(
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    return this.getTransactionsFromBlockRange(latestBlockNumber, blockCount);
+  }
+
+  async getTransactionsFromBlockRange(
+    fromBlock: number,
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const transactions: Array<Transaction & { blockNumber: string }> = [];
+
+    for (let i = 0; i < blockCount; i++) {
+      const blockNum = fromBlock - i;
+      if (blockNum < 0) break;
+
+      try {
+        const blockWithTxs = await this.getBlockWithTransactions(blockNum);
+        for (const tx of blockWithTxs.transactionDetails) {
+          transactions.push({
+            ...tx,
+            blockNumber: blockWithTxs.number,
+          });
+        }
+      } catch (error) {
+        console.error(`Error fetching block ${blockNum}:`, error);
+      }
+    }
+
+    return transactions;
+  }
+
+  getChainId(): number {
+    return this.networkId;
+  }
+
+  isTraceAvailable(): boolean {
+    return this.isLocalHost;
+  }
+
+  async getTransactionTrace(txHash: string): Promise<TraceResult | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {});
+      return extractData<TraceResult | null>(result.data);
+    } catch (error) {
+      console.error("Error getting transaction trace:", error);
+      return null;
+    }
+  }
+
+  // biome-ignore lint/suspicious/noExplicitAny: Generic trace result
+  async getCallTrace(txHash: string): Promise<any> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.traceTransaction(txHash);
+      // biome-ignore lint/suspicious/noExplicitAny: Generic trace result type
+      return extractData<any>(result.data);
+    } catch (error) {
+      console.error("Error getting call trace:", error);
+      return null;
+    }
+  }
+
+  async getBlockTrace(blockHash: string): Promise<TraceResult[] | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      // Convert block hash to block number first
+      const blockResult = await this.client.getBlockByHash(blockHash, false);
+      const blockData = extractData<typeof blockResult.data>(blockResult.data);
+      if (!blockData) return null;
+
+      const blockNumber = hexToNumber(blockData.number);
+      const result = await this.client.traceBlock(blockNumber);
+      return extractData<TraceResult[] | null>(result.data);
+    } catch (error) {
+      console.error("Error getting block trace:", error);
+      return null;
+    }
+  }
+}
diff --git a/src/services/adapters/EVMAdapter/utils.ts b/src/services/adapters/EVMAdapter/utils.ts
new file mode 100644
index 0000000..8b87ee8
--- /dev/null
+++ b/src/services/adapters/EVMAdapter/utils.ts
@@ -0,0 +1,125 @@
+import type { Block, Transaction, Address } from "../../../types";
+import type { EthBlock, EthTransaction, EthTransactionReceipt } from "explorer-network-connectors";
+
+/**
+ * Transforms an RPC block response into a Block domain object
+ * Handles hex-to-decimal conversions and normalizes fields
+ */
+export function transformRPCBlockToBlock(rpcBlock: EthBlock): Block {
+  const timestamp = rpcBlock.timestamp
+    ? parseInt(rpcBlock.timestamp, rpcBlock.timestamp.startsWith("0x") ? 16 : 10).toString()
+    : "0";
+
+  return {
+    number: rpcBlock.number,
+    hash: rpcBlock.hash,
+    parentHash: rpcBlock.parentHash,
+    timestamp,
+    baseFeePerGas: rpcBlock.baseFeePerGas ? BigInt(rpcBlock.baseFeePerGas).toString() : undefined,
+    nonce: rpcBlock.nonce,
+    difficulty: BigInt(rpcBlock.difficulty).toString(),
+    gasLimit: BigInt(rpcBlock.gasLimit).toString(),
+    gasUsed: BigInt(rpcBlock.gasUsed).toString(),
+    miner: rpcBlock.miner,
+    extraData: rpcBlock.extraData,
+    transactions: Array.isArray(rpcBlock.transactions)
+      ? rpcBlock.transactions.map((tx) => (typeof tx === "string" ? tx : tx.hash))
+      : [],
+    size: rpcBlock.size,
+    logsBloom: rpcBlock.logsBloom,
+    stateRoot: rpcBlock.stateRoot,
+    receiptsRoot: rpcBlock.receiptsRoot,
+    transactionsRoot: rpcBlock.transactionsRoot,
+    uncles: rpcBlock.uncles || [],
+    mixHash: rpcBlock.mixHash || "",
+    sha3Uncles: rpcBlock.sha3Uncles,
+    totalDifficulty: rpcBlock.totalDifficulty
+      ? BigInt(rpcBlock.totalDifficulty).toString()
+      : BigInt(rpcBlock.difficulty).toString(),
+    blobGasUsed: "",
+    excessBlobGas: "",
+    withdrawalsRoot: rpcBlock.withdrawalsRoot || "",
+    withdrawals: rpcBlock.withdrawals || [],
+  };
+}
+
+/**
+ * Transforms an RPC transaction response into a Transaction domain object
+ * Handles hex-to-decimal conversions and includes receipt if provided
+ */
+export function transformRPCTransactionToTransaction(
+  rpcTx: EthTransaction,
+  receipt?: EthTransactionReceipt | null,
+): Transaction {
+  const transaction: Transaction = {
+    hash: rpcTx.hash,
+    from: rpcTx.from,
+    to: rpcTx.to || "",
+    value: BigInt(rpcTx.value).toString(),
+    gas: BigInt(rpcTx.gas).toString(),
+    gasPrice: rpcTx.gasPrice ? BigInt(rpcTx.gasPrice).toString() : "0",
+    maxFeePerGas: rpcTx.maxFeePerGas ? BigInt(rpcTx.maxFeePerGas).toString() : undefined,
+    maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
+      ? BigInt(rpcTx.maxPriorityFeePerGas).toString()
+      : undefined,
+    nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
+    data: rpcTx.input,
+    blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
+    blockHash: rpcTx.blockHash || "",
+    transactionIndex: rpcTx.transactionIndex
+      ? parseInt(rpcTx.transactionIndex, 16).toString()
+      : "0",
+    v: rpcTx.v,
+    r: rpcTx.r,
+    s: rpcTx.s,
+    type: rpcTx.type,
+  };
+
+  if (receipt) {
+    transaction.receipt = {
+      blockHash: receipt.blockHash,
+      blockNumber: parseInt(receipt.blockNumber, 16).toString(),
+      contractAddress: receipt.contractAddress,
+      cumulativeGasUsed: BigInt(receipt.cumulativeGasUsed).toString(),
+      effectiveGasPrice: receipt.effectiveGasPrice
+        ? BigInt(receipt.effectiveGasPrice).toString()
+        : "0",
+      from: receipt.from,
+      gasUsed: BigInt(receipt.gasUsed).toString(),
+      logs: receipt.logs,
+      logsBloom: receipt.logsBloom,
+      status: receipt.status || "0x1",
+      to: receipt.to || "",
+      transactionHash: receipt.transactionHash,
+      transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
+      type: receipt.type,
+    };
+  }
+
+  return transaction;
+}
+
+/**
+ * Creates an Address domain object from balance, code, and transaction count
+ */
+export function createAddressFromBalance(
+  address: string,
+  balance: string,
+  code: string,
+  txCount: string,
+): Address {
+  return {
+    address,
+    balance: BigInt(balance).toString(),
+    code,
+    txCount: parseInt(txCount, 16).toString(),
+    storageAt: {},
+  };
+}
+
+/**
+ * Converts a hex string to a number
+ */
+export function hexToNumber(hex: string): number {
+  return parseInt(hex, 16);
+}
diff --git a/src/services/adapters/NetworkAdapter.ts b/src/services/adapters/NetworkAdapter.ts
new file mode 100644
index 0000000..2aafbd5
--- /dev/null
+++ b/src/services/adapters/NetworkAdapter.ts
@@ -0,0 +1,169 @@
+import type { SupportedChainId } from "explorer-network-connectors";
+import type {
+  Block,
+  Transaction,
+  Address,
+  NetworkStats,
+  DataWithMetadata,
+  AddressTransactionsResult,
+} from "../../types";
+
+export type BlockTag = "latest" | "earliest" | "pending" | "finalized" | "safe";
+export type BlockNumberOrTag = number | string | BlockTag;
+
+export interface TraceLog {
+  pc: number;
+  op: string;
+  gas: number;
+  gasCost: number;
+  depth: number;
+  stack: string[];
+  memory?: string[];
+  storage?: Record<string, string>;
+}
+
+export interface TraceResult {
+  gas: number;
+  failed: boolean;
+  returnValue: string;
+  structLogs: TraceLog[];
+}
+
+export interface TraceCallConfig {
+  tracer?: string;
+  timeout?: string;
+  tracerConfig?: {
+    onlyTopCall?: boolean;
+    withLog?: boolean;
+  };
+}
+/**
+ * Base interface for blockchain-specific services
+ * All chain implementations must conform to this unified API
+ */
+export abstract class NetworkAdapter {
+  networkId: number;
+  isLocalHost: boolean;
+
+  constructor(networkId: SupportedChainId | 31337 | 11155111 | 97) {
+    this.networkId = networkId;
+    this.isLocalHost = networkId === 31337;
+  }
+  /**
+   * Get block by number or tag
+   * @param blockNumber - Block number (as number or hex string) or block tag
+   * @returns Block data with optional metadata
+   */
+  abstract getBlock(blockNumber: number | BlockNumberOrTag): Promise<DataWithMetadata<Block>>;
+
+  /**
+   * Get block with full transaction details
+   * @param blockNumber - Block number (as number or hex string) or block tag
+   * @returns Block with embedded transaction objects
+   */
+  abstract getBlockWithTransactions(
+    blockNumber: number | BlockNumberOrTag,
+  ): Promise<Block & { transactionDetails: Transaction[] }>;
+
+  /**
+   * Get transaction by hash
+   * @param txHash - Transaction hash
+   * @returns Transaction data with receipt
+   */
+  abstract getTransaction(txHash: string): Promise<DataWithMetadata<Transaction>>;
+
+  /**
+   * Get address information
+   * @param address - Address to query
+   * @returns Address balance, code, and transaction count
+   */
+  abstract getAddress(address: string): Promise<DataWithMetadata<Address>>;
+
+  /**
+   * Get transactions for an address
+   * @param address - Address to query
+   * @param fromBlock - Starting block (optional)
+   * @param toBlock - Ending block (optional)
+   * @param limit - Maximum number of transactions to return
+   * @returns List of transactions
+   */
+  abstract getAddressTransactions(
+    address: string,
+    fromBlock?: number | "earliest",
+    toBlock?: number | "latest",
+    limit?: number,
+  ): Promise<AddressTransactionsResult>;
+
+  /**
+   * Get the latest block number
+   * @returns Latest block number
+   */
+  abstract getLatestBlockNumber(): Promise<number>;
+
+  /**
+   * Get network statistics
+   * @returns Gas price, sync status, block number, etc.
+   */
+  abstract getNetworkStats(): Promise<DataWithMetadata<NetworkStats>>;
+
+  /**
+   * Get latest N blocks
+   * @param count - Number of blocks to retrieve
+   * @returns Array of blocks
+   */
+  abstract getLatestBlocks(count?: number): Promise<Block[]>;
+
+  /**
+   * Get transactions from latest blocks
+   * @param blockCount - Number of blocks to scan
+   * @returns Array of transactions with block numbers
+   */
+  abstract getTransactionsFromLatestBlocks(
+    blockCount?: number,
+  ): Promise<Array<Transaction & { blockNumber: string }>>;
+
+  /**
+   * Get transactions from a range of blocks
+   * @param fromBlock - Starting block number
+   * @param blockCount - Number of blocks to scan
+   * @returns Array of transactions with block numbers
+   */
+  abstract getTransactionsFromBlockRange(
+    fromBlock: number,
+    blockCount?: number,
+  ): Promise<Array<Transaction & { blockNumber: string }>>;
+
+  /**
+   * Get chain ID
+   * @returns Chain ID
+   */
+  abstract getChainId(): number;
+
+  /**
+   * Check if trace methods are available
+   * @returns true if trace methods are supported
+   */
+  abstract isTraceAvailable(): boolean;
+
+  /**
+   * Get transaction trace (debug mode)
+   * @param txHash - Transaction hash
+   * @returns Trace result or null
+   */
+  abstract getTransactionTrace(txHash: string): Promise<TraceResult | null>;
+
+  /**
+   * Get call trace (debug mode)
+   * @param txHash - Transaction hash
+   * @returns Trace result or null
+   */
+  // biome-ignore lint/suspicious/noExplicitAny: Generic trace result type
+  abstract getCallTrace(txHash: string): Promise<any>;
+
+  /**
+   * Get block trace (debug mode)
+   * @param blockHash - Block hash
+   * @returns Array of trace results or null
+   */
+  abstract getBlockTrace(blockHash: string): Promise<TraceResult[] | null>;
+}
diff --git a/src/services/adapters/OptimismAdapter/OptimismAdapter.ts b/src/services/adapters/OptimismAdapter/OptimismAdapter.ts
new file mode 100644
index 0000000..aff55af
--- /dev/null
+++ b/src/services/adapters/OptimismAdapter/OptimismAdapter.ts
@@ -0,0 +1,298 @@
+import { type BlockNumberOrTag, NetworkAdapter, type TraceResult } from "../NetworkAdapter";
+import type {
+  Block,
+  Transaction,
+  Address,
+  NetworkStats,
+  DataWithMetadata,
+  AddressTransactionsResult,
+} from "../../../types";
+import {
+  transformOptimismBlockToBlock,
+  transformOptimismTransactionToTransaction,
+  createAddressFromBalance,
+  hexToNumber,
+} from "./utils";
+import { extractData } from "../shared/extractData";
+import { normalizeBlockNumber } from "../shared/normalizeBlockNumber";
+import type { OptimismClient } from "explorer-network-connectors";
+
+/**
+ * Optimism (OP Stack) blockchain adapter
+ * Extends base NetworkAdapter with Optimism-specific L1 fee handling
+ * Chain ID: 10
+ */
+export class OptimismAdapter extends NetworkAdapter {
+  private client: OptimismClient;
+
+  constructor(networkId: 10, client: OptimismClient) {
+    super(networkId);
+    this.client = client;
+  }
+
+  async getBlock(blockNumber: BlockNumberOrTag): Promise<DataWithMetadata<Block>> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformOptimismBlockToBlock(blockData);
+
+    return {
+      data: block,
+      metadata: result.metadata as DataWithMetadata<Block>["metadata"],
+    };
+  }
+
+  async getBlockWithTransactions(
+    blockNumber: BlockNumberOrTag,
+  ): Promise<Block & { transactionDetails: Transaction[] }> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber, true);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformOptimismBlockToBlock(blockData);
+
+    // Extract transaction details
+    const transactionDetails: Transaction[] = [];
+    if (Array.isArray(blockData.transactions)) {
+      for (const tx of blockData.transactions) {
+        if (typeof tx !== "string") {
+          transactionDetails.push(transformOptimismTransactionToTransaction(tx));
+        }
+      }
+    }
+
+    return {
+      ...block,
+      transactionDetails,
+    };
+  }
+
+  async getTransaction(txHash: string): Promise<DataWithMetadata<Transaction>> {
+    const [txResult, receiptResult] = await Promise.all([
+      this.client.getTransactionByHash(txHash),
+      this.client.getTransactionReceipt(txHash),
+    ]);
+
+    const txData = extractData<typeof txResult.data>(txResult.data);
+    if (!txData) {
+      throw new Error(`Transaction ${txHash} not found`);
+    }
+
+    const receiptData = extractData<typeof receiptResult.data>(receiptResult.data);
+    const transaction = transformOptimismTransactionToTransaction(txData, receiptData);
+
+    // Get timestamp and baseFeePerGas from block if available
+    if (txData.blockNumber) {
+      try {
+        const blockResult = await this.getBlock(txData.blockNumber);
+
+        if (blockResult.data) {
+          transaction.timestamp = blockResult.data.timestamp;
+          transaction.blockBaseFeePerGas = blockResult.data.baseFeePerGas;
+        }
+      } catch (error) {
+        console.warn("Failed to fetch block for transaction timestamp:", error);
+      }
+    }
+
+    return {
+      data: transaction,
+      metadata: txResult.metadata as DataWithMetadata<Transaction>["metadata"],
+    };
+  }
+
+  async getAddress(address: string): Promise<DataWithMetadata<Address>> {
+    const [balanceResult, codeResult, txCountResult] = await Promise.all([
+      this.client.getBalance(address, "latest"),
+      this.client.getCode(address, "latest"),
+      this.client.getTransactionCount(address, "latest"),
+    ]);
+
+    const balance = extractData<string>(balanceResult.data) || "0x0";
+    const code = extractData<string>(codeResult.data) || "0x";
+    const txCount = extractData<string>(txCountResult.data) || "0x0";
+
+    const addressData = createAddressFromBalance(address, balance, code, txCount);
+
+    return {
+      data: addressData,
+      metadata: balanceResult.metadata as DataWithMetadata<Address>["metadata"],
+    };
+  }
+
+  async getAddressTransactions(
+    _address: string,
+    _fromBlock?: number | "earliest",
+    _toBlock?: number | "latest",
+    _limit = 100,
+  ): Promise<AddressTransactionsResult> {
+    // Optimism doesn't have a native method to get transactions by address
+    // This would require scanning blocks or using an indexer
+    // For now, return empty result
+    console.warn("getAddressTransactions not fully implemented for Optimism");
+
+    return {
+      transactions: [],
+      source: "none",
+      isComplete: false,
+      message: "Address transaction lookup not supported without indexer",
+    };
+  }
+
+  async getLatestBlockNumber(): Promise<number> {
+    const result = await this.client.blockNumber();
+    const blockNumber = extractData<string>(result.data) || "0x0";
+    return hexToNumber(blockNumber);
+  }
+
+  async getNetworkStats(): Promise<DataWithMetadata<NetworkStats>> {
+    const [gasPriceResult, syncingResult, blockNumberResult, versionResult] = await Promise.all([
+      this.client.gasPrice(),
+      this.client.syncing(),
+      this.client.blockNumber(),
+      this.client.clientVersion(),
+    ]);
+
+    // Extract actual data from strategy results (handles both fallback and parallel modes)
+    const gasPrice = extractData<string>(gasPriceResult.data) || "0x0";
+    const syncing = extractData<boolean | object>(syncingResult.data);
+    const blockNumber = extractData<string>(blockNumberResult.data) || "0x0";
+    const clientVersion = extractData<string>(versionResult.data) || "unknown";
+
+    const stats: NetworkStats = {
+      currentGasPrice: gasPrice,
+      isSyncing: typeof syncing === "boolean" ? syncing : true,
+      currentBlockNumber: blockNumber,
+      clientVersion: clientVersion,
+      metadata: {},
+    };
+
+    return {
+      data: stats,
+      metadata: gasPriceResult.metadata as DataWithMetadata<NetworkStats>["metadata"],
+    };
+  }
+
+  async getLatestBlocks(count = 10): Promise<Block[]> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    const blocks: Block[] = [];
+
+    const promises = [];
+    for (let i = 0; i < count; i++) {
+      const blockNum = latestBlockNumber - i;
+      if (blockNum >= 0) {
+        promises.push(this.getBlock(blockNum));
+      }
+    }
+
+    const results = await Promise.all(promises);
+    for (const result of results) {
+      blocks.push(result.data);
+    }
+
+    return blocks;
+  }
+
+  async getTransactionsFromLatestBlocks(
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    return this.getTransactionsFromBlockRange(latestBlockNumber, blockCount);
+  }
+
+  async getTransactionsFromBlockRange(
+    fromBlock: number,
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const transactions: Array<Transaction & { blockNumber: string }> = [];
+
+    for (let i = 0; i < blockCount; i++) {
+      const blockNum = fromBlock - i;
+      if (blockNum < 0) break;
+
+      try {
+        const blockWithTxs = await this.getBlockWithTransactions(blockNum);
+        for (const tx of blockWithTxs.transactionDetails) {
+          transactions.push({
+            ...tx,
+            blockNumber: blockWithTxs.number,
+          });
+        }
+      } catch (error) {
+        console.error(`Error fetching block ${blockNum}:`, error);
+      }
+    }
+
+    return transactions;
+  }
+
+  getChainId(): number {
+    return this.networkId;
+  }
+
+  isTraceAvailable(): boolean {
+    return this.isLocalHost;
+  }
+
+  async getTransactionTrace(txHash: string): Promise<TraceResult | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {});
+      return extractData<TraceResult | null>(result.data);
+    } catch (error) {
+      console.error("Error getting transaction trace:", error);
+      return null;
+    }
+  }
+
+  // biome-ignore lint/suspicious/noExplicitAny: Generic trace result
+  async getCallTrace(txHash: string): Promise<any> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.traceTransaction(txHash);
+      // biome-ignore lint/suspicious/noExplicitAny: Generic trace result type
+      return extractData<any>(result.data);
+    } catch (error) {
+      console.error("Error getting call trace:", error);
+      return null;
+    }
+  }
+
+  async getBlockTrace(blockHash: string): Promise<TraceResult[] | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      // Convert block hash to block number first
+      const blockResult = await this.client.getBlockByHash(blockHash, false);
+      const blockData = extractData<typeof blockResult.data>(blockResult.data);
+      if (!blockData) return null;
+
+      const blockNumber = hexToNumber(blockData.number);
+      const result = await this.client.traceBlock(blockNumber);
+      return extractData<TraceResult[] | null>(result.data);
+    } catch (error) {
+      console.error("Error getting block trace:", error);
+      return null;
+    }
+  }
+}
diff --git a/src/services/adapters/OptimismAdapter/index.ts b/src/services/adapters/OptimismAdapter/index.ts
new file mode 100644
index 0000000..bc43e0a
--- /dev/null
+++ b/src/services/adapters/OptimismAdapter/index.ts
@@ -0,0 +1,2 @@
+export { OptimismAdapter } from "./OptimismAdapter";
+export * from "./utils";
diff --git a/src/services/adapters/OptimismAdapter/utils.ts b/src/services/adapters/OptimismAdapter/utils.ts
new file mode 100644
index 0000000..0eb6746
--- /dev/null
+++ b/src/services/adapters/OptimismAdapter/utils.ts
@@ -0,0 +1,144 @@
+import type { Block, Transaction, Address, TransactionReceiptOptimism } from "../../../types";
+import type {
+  OptimismBlock,
+  OptimismTransaction,
+  OptimismTransactionReceipt,
+} from "explorer-network-connectors";
+
+/**
+ * Transforms an Optimism RPC block response into a Block domain object
+ * Handles hex-to-decimal conversions and normalizes fields
+ */
+export function transformOptimismBlockToBlock(rpcBlock: OptimismBlock): Block {
+  const timestamp = rpcBlock.timestamp
+    ? parseInt(rpcBlock.timestamp, rpcBlock.timestamp.startsWith("0x") ? 16 : 10).toString()
+    : "0";
+
+  return {
+    number: rpcBlock.number,
+    hash: rpcBlock.hash,
+    parentHash: rpcBlock.parentHash,
+    timestamp,
+    baseFeePerGas: rpcBlock.baseFeePerGas ? BigInt(rpcBlock.baseFeePerGas).toString() : undefined,
+    nonce: rpcBlock.nonce,
+    difficulty: BigInt(rpcBlock.difficulty).toString(),
+    gasLimit: BigInt(rpcBlock.gasLimit).toString(),
+    gasUsed: BigInt(rpcBlock.gasUsed).toString(),
+    miner: rpcBlock.miner,
+    extraData: rpcBlock.extraData,
+    transactions: Array.isArray(rpcBlock.transactions)
+      ? rpcBlock.transactions.map((tx) =>
+          typeof tx === "string" ? tx : (tx as OptimismTransaction).hash,
+        )
+      : [],
+    size: rpcBlock.size,
+    logsBloom: rpcBlock.logsBloom,
+    stateRoot: rpcBlock.stateRoot,
+    receiptsRoot: rpcBlock.receiptsRoot,
+    transactionsRoot: rpcBlock.transactionsRoot,
+    uncles: rpcBlock.uncles || [],
+    mixHash: rpcBlock.mixHash || "",
+    sha3Uncles: rpcBlock.sha3Uncles,
+    totalDifficulty: rpcBlock.totalDifficulty
+      ? BigInt(rpcBlock.totalDifficulty).toString()
+      : BigInt(rpcBlock.difficulty).toString(),
+    blobGasUsed: "",
+    excessBlobGas: "",
+    withdrawalsRoot: rpcBlock.withdrawalsRoot || "",
+    withdrawals: rpcBlock.withdrawals
+      ? rpcBlock.withdrawals.map((w) => ({
+          address: w.address,
+          amount: w.amount,
+          index: w.index,
+          validatorIndex: w.validatorIndex,
+        }))
+      : [],
+  };
+}
+
+/**
+ * Transforms an Optimism RPC transaction response into a Transaction domain object
+ * Includes Optimism-specific L1 fee fields in the receipt
+ */
+export function transformOptimismTransactionToTransaction(
+  rpcTx: OptimismTransaction,
+  receipt?: OptimismTransactionReceipt | null,
+): Transaction {
+  const transaction: Transaction = {
+    hash: rpcTx.hash,
+    from: rpcTx.from,
+    to: rpcTx.to || "",
+    value: BigInt(rpcTx.value).toString(),
+    gas: BigInt(rpcTx.gas).toString(),
+    gasPrice: rpcTx.gasPrice ? BigInt(rpcTx.gasPrice).toString() : "0",
+    maxFeePerGas: rpcTx.maxFeePerGas ? BigInt(rpcTx.maxFeePerGas).toString() : undefined,
+    maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
+      ? BigInt(rpcTx.maxPriorityFeePerGas).toString()
+      : undefined,
+    nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
+    data: rpcTx.input,
+    blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
+    blockHash: rpcTx.blockHash || "",
+    transactionIndex: rpcTx.transactionIndex
+      ? parseInt(rpcTx.transactionIndex, 16).toString()
+      : "0",
+    v: rpcTx.v,
+    r: rpcTx.r,
+    s: rpcTx.s,
+    type: rpcTx.type,
+  };
+
+  if (receipt) {
+    const optimismReceipt: TransactionReceiptOptimism = {
+      blockHash: receipt.blockHash,
+      blockNumber: parseInt(receipt.blockNumber, 16).toString(),
+      contractAddress: receipt.contractAddress,
+      cumulativeGasUsed: BigInt(receipt.cumulativeGasUsed).toString(),
+      effectiveGasPrice: receipt.effectiveGasPrice
+        ? BigInt(receipt.effectiveGasPrice).toString()
+        : "0",
+      from: receipt.from,
+      gasUsed: BigInt(receipt.gasUsed).toString(),
+      logs: receipt.logs,
+      logsBloom: receipt.logsBloom,
+      status: receipt.status || "0x1",
+      to: receipt.to || "",
+      transactionHash: receipt.transactionHash,
+      transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
+      type: receipt.type,
+      // Optimism-specific L1 fee fields
+      l1Fee: receipt.l1Fee || "0",
+      l1GasPrice: receipt.l1GasPrice || "0",
+      l1GasUsed: receipt.l1GasUsed || "0",
+      l1FeeScalar: "1",
+    };
+    transaction.receipt = optimismReceipt;
+  }
+
+  return transaction;
+}
+
+/**
+ * Creates an Address domain object from balance, code, and transaction count
+ */
+export function createAddressFromBalance(
+  address: string,
+  balance: string,
+  code: string,
+  txCount: string,
+): Address {
+  return {
+    address,
+    balance: BigInt(balance).toString(),
+    code,
+    txCount: parseInt(txCount, 16).toString(),
+    storageAt: {},
+  };
+}
+
+/**
+ * Converts a hex string to a number
+ */
+export function hexToNumber(hex: string): number {
+  return parseInt(hex, 16);
+}
diff --git a/src/services/adapters/PolygonAdapter/PolygonAdapter.ts b/src/services/adapters/PolygonAdapter/PolygonAdapter.ts
new file mode 100644
index 0000000..d8a2087
--- /dev/null
+++ b/src/services/adapters/PolygonAdapter/PolygonAdapter.ts
@@ -0,0 +1,297 @@
+import { type BlockNumberOrTag, NetworkAdapter } from "../NetworkAdapter";
+import type {
+  Block,
+  Transaction,
+  Address,
+  NetworkStats,
+  DataWithMetadata,
+  AddressTransactionsResult,
+} from "../../../types";
+import type { TraceResult } from "../NetworkAdapter";
+import {
+  transformPolygonBlockToBlock,
+  transformPolygonTransactionToTransaction,
+  createAddressFromBalance,
+  hexToNumber,
+} from "./utils";
+import { extractData } from "../shared/extractData";
+import { normalizeBlockNumber } from "../shared/normalizeBlockNumber";
+import type { PolygonClient, SupportedChainId } from "explorer-network-connectors";
+
+/**
+ * Polygon blockchain service
+ * Supports Polygon PoS (chain ID 137)
+ */
+export class PolygonAdapter extends NetworkAdapter {
+  private client: PolygonClient;
+
+  constructor(networkId: SupportedChainId, client: PolygonClient) {
+    super(networkId);
+    this.client = client;
+  }
+  async getBlock(blockNumber: BlockNumberOrTag): Promise<DataWithMetadata<Block>> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformPolygonBlockToBlock(blockData);
+
+    return {
+      data: block,
+      metadata: result.metadata as DataWithMetadata<Block>["metadata"],
+    };
+  }
+
+  async getBlockWithTransactions(
+    blockNumber: BlockNumberOrTag,
+  ): Promise<Block & { transactionDetails: Transaction[] }> {
+    const normalizedBlockNumber = normalizeBlockNumber(blockNumber);
+    const result = await this.client.getBlockByNumber(normalizedBlockNumber, true);
+
+    const blockData = extractData<typeof result.data>(result.data);
+    if (!blockData) {
+      throw new Error(`Block ${blockNumber} not found`);
+    }
+
+    const block = transformPolygonBlockToBlock(blockData);
+
+    // Extract transaction details
+    const transactionDetails: Transaction[] = [];
+    if (Array.isArray(blockData.transactions)) {
+      for (const tx of blockData.transactions) {
+        if (typeof tx !== "string") {
+          transactionDetails.push(transformPolygonTransactionToTransaction(tx));
+        }
+      }
+    }
+
+    return {
+      ...block,
+      transactionDetails,
+    };
+  }
+
+  async getTransaction(txHash: string): Promise<DataWithMetadata<Transaction>> {
+    const [txResult, receiptResult] = await Promise.all([
+      this.client.getTransactionByHash(txHash),
+      this.client.getTransactionReceipt(txHash),
+    ]);
+
+    const txData = extractData<typeof txResult.data>(txResult.data);
+    if (!txData) {
+      throw new Error(`Transaction ${txHash} not found`);
+    }
+
+    const receiptData = extractData<typeof receiptResult.data>(receiptResult.data);
+    const transaction = transformPolygonTransactionToTransaction(txData, receiptData);
+
+    // Get timestamp and baseFeePerGas from block if available
+    if (txData.blockNumber) {
+      try {
+        const blockResult = await this.getBlock(txData.blockNumber);
+
+        if (blockResult.data) {
+          transaction.timestamp = blockResult.data.timestamp;
+          transaction.blockBaseFeePerGas = blockResult.data.baseFeePerGas;
+        }
+      } catch (error) {
+        console.warn("Failed to fetch block for transaction timestamp:", error);
+      }
+    }
+
+    return {
+      data: transaction,
+      metadata: txResult.metadata as DataWithMetadata<Transaction>["metadata"],
+    };
+  }
+
+  async getAddress(address: string): Promise<DataWithMetadata<Address>> {
+    const [balanceResult, codeResult, txCountResult] = await Promise.all([
+      this.client.getBalance(address, "latest"),
+      this.client.getCode(address, "latest"),
+      this.client.getTransactionCount(address, "latest"),
+    ]);
+
+    const balance = extractData<string>(balanceResult.data) || "0x0";
+    const code = extractData<string>(codeResult.data) || "0x";
+    const txCount = extractData<string>(txCountResult.data) || "0x0";
+
+    const addressData = createAddressFromBalance(address, balance, code, txCount);
+
+    return {
+      data: addressData,
+      metadata: balanceResult.metadata as DataWithMetadata<Address>["metadata"],
+    };
+  }
+
+  async getAddressTransactions(
+    _address: string,
+    _fromBlock?: number | "earliest",
+    _toBlock?: number | "latest",
+    _limit = 100,
+  ): Promise<AddressTransactionsResult> {
+    // Polygon doesn't have a native method to get transactions by address
+    // This would require scanning blocks or using an indexer
+    // For now, return empty result
+    console.warn("getAddressTransactions not fully implemented for Polygon");
+
+    return {
+      transactions: [],
+      source: "none",
+      isComplete: false,
+      message: "Address transaction lookup not supported without indexer",
+    };
+  }
+
+  async getLatestBlockNumber(): Promise<number> {
+    const result = await this.client.blockNumber();
+    const blockNumber = extractData<string>(result.data) || "0x0";
+    return hexToNumber(blockNumber);
+  }
+
+  async getNetworkStats(): Promise<DataWithMetadata<NetworkStats>> {
+    const [gasPriceResult, syncingResult, blockNumberResult, versionResult] = await Promise.all([
+      this.client.gasPrice(),
+      this.client.syncing(),
+      this.client.blockNumber(),
+      this.client.clientVersion(),
+    ]);
+
+    // Extract actual data from strategy results (handles both fallback and parallel modes)
+    const gasPrice = extractData<string>(gasPriceResult.data) || "0x0";
+    const syncing = extractData<boolean | object>(syncingResult.data);
+    const blockNumber = extractData<string>(blockNumberResult.data) || "0x0";
+    const clientVersion = extractData<string>(versionResult.data) || "unknown";
+
+    const stats: NetworkStats = {
+      currentGasPrice: gasPrice,
+      isSyncing: typeof syncing === "boolean" ? syncing : true,
+      currentBlockNumber: blockNumber,
+      clientVersion: clientVersion,
+      metadata: {},
+    };
+
+    return {
+      data: stats,
+      metadata: gasPriceResult.metadata as DataWithMetadata<NetworkStats>["metadata"],
+    };
+  }
+
+  async getLatestBlocks(count = 10): Promise<Block[]> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    const blocks: Block[] = [];
+
+    const promises = [];
+    for (let i = 0; i < count; i++) {
+      const blockNum = latestBlockNumber - i;
+      if (blockNum >= 0) {
+        promises.push(this.getBlock(blockNum));
+      }
+    }
+
+    const results = await Promise.all(promises);
+    for (const result of results) {
+      blocks.push(result.data);
+    }
+
+    return blocks;
+  }
+
+  async getTransactionsFromLatestBlocks(
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const latestBlockNumber = await this.getLatestBlockNumber();
+    return this.getTransactionsFromBlockRange(latestBlockNumber, blockCount);
+  }
+
+  async getTransactionsFromBlockRange(
+    fromBlock: number,
+    blockCount = 10,
+  ): Promise<Array<Transaction & { blockNumber: string }>> {
+    const transactions: Array<Transaction & { blockNumber: string }> = [];
+
+    for (let i = 0; i < blockCount; i++) {
+      const blockNum = fromBlock - i;
+      if (blockNum < 0) break;
+
+      try {
+        const blockWithTxs = await this.getBlockWithTransactions(blockNum);
+        for (const tx of blockWithTxs.transactionDetails) {
+          transactions.push({
+            ...tx,
+            blockNumber: blockWithTxs.number,
+          });
+        }
+      } catch (error) {
+        console.error(`Error fetching block ${blockNum}:`, error);
+      }
+    }
+
+    return transactions;
+  }
+
+  getChainId(): number {
+    return this.networkId;
+  }
+
+  isTraceAvailable(): boolean {
+    return this.isLocalHost;
+  }
+
+  async getTransactionTrace(txHash: string): Promise<TraceResult | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.debugTraceTransaction(txHash, {});
+      return extractData<TraceResult | null>(result.data);
+    } catch (error) {
+      console.error("Error getting transaction trace:", error);
+      return null;
+    }
+  }
+
+  // biome-ignore lint/suspicious/noExplicitAny: Generic trace result
+  async getCallTrace(txHash: string): Promise<any> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      const result = await this.client.traceTransaction(txHash);
+      // biome-ignore lint/suspicious/noExplicitAny: Generic trace result type
+      return extractData<any>(result.data);
+    } catch (error) {
+      console.error("Error getting call trace:", error);
+      return null;
+    }
+  }
+
+  async getBlockTrace(blockHash: string): Promise<TraceResult[] | null> {
+    if (!this.isLocalHost) {
+      console.warn("Trace methods are only available on localhost networks");
+      return null;
+    }
+
+    try {
+      // Convert block hash to block number first
+      const blockResult = await this.client.getBlockByHash(blockHash, false);
+      const blockData = extractData<typeof blockResult.data>(blockResult.data);
+      if (!blockData) return null;
+
+      const blockNumber = hexToNumber(blockData.number);
+      const result = await this.client.traceBlock(blockNumber);
+      return extractData<TraceResult[] | null>(result.data);
+    } catch (error) {
+      console.error("Error getting block trace:", error);
+      return null;
+    }
+  }
+}
diff --git a/src/services/adapters/PolygonAdapter/utils.ts b/src/services/adapters/PolygonAdapter/utils.ts
new file mode 100644
index 0000000..86bb1d9
--- /dev/null
+++ b/src/services/adapters/PolygonAdapter/utils.ts
@@ -0,0 +1,129 @@
+import type { Block, Transaction, Address } from "../../../types";
+import type {
+  PolygonBlock,
+  PolygonTransaction,
+  PolygonTransactionReceipt,
+} from "explorer-network-connectors";
+
+/**
+ * Transforms an RPC block response into a Block domain object
+ * Handles hex-to-decimal conversions and normalizes fields
+ */
+export function transformPolygonBlockToBlock(rpcBlock: PolygonBlock): Block {
+  const timestamp = rpcBlock.timestamp
+    ? parseInt(rpcBlock.timestamp, rpcBlock.timestamp.startsWith("0x") ? 16 : 10).toString()
+    : "0";
+
+  return {
+    number: rpcBlock.number,
+    hash: rpcBlock.hash,
+    parentHash: rpcBlock.parentHash,
+    timestamp,
+    baseFeePerGas: rpcBlock.baseFeePerGas ? BigInt(rpcBlock.baseFeePerGas).toString() : undefined,
+    nonce: rpcBlock.nonce,
+    difficulty: BigInt(rpcBlock.difficulty).toString(),
+    gasLimit: BigInt(rpcBlock.gasLimit).toString(),
+    gasUsed: BigInt(rpcBlock.gasUsed).toString(),
+    miner: rpcBlock.miner,
+    extraData: rpcBlock.extraData,
+    transactions: Array.isArray(rpcBlock.transactions)
+      ? rpcBlock.transactions.map((tx) => (typeof tx === "string" ? tx : tx.hash))
+      : [],
+    size: rpcBlock.size,
+    logsBloom: rpcBlock.logsBloom,
+    stateRoot: rpcBlock.stateRoot,
+    receiptsRoot: rpcBlock.receiptsRoot,
+    transactionsRoot: rpcBlock.transactionsRoot,
+    uncles: rpcBlock.uncles || [],
+    mixHash: rpcBlock.mixHash || "",
+    sha3Uncles: rpcBlock.sha3Uncles,
+    totalDifficulty: rpcBlock.totalDifficulty
+      ? BigInt(rpcBlock.totalDifficulty).toString()
+      : BigInt(rpcBlock.difficulty).toString(),
+    blobGasUsed: "",
+    excessBlobGas: "",
+    withdrawalsRoot: rpcBlock.withdrawalsRoot || "",
+    withdrawals: rpcBlock.withdrawals || [],
+  };
+}
+
+/**
+ * Transforms an RPC transaction response into a Transaction domain object
+ * Handles hex-to-decimal conversions and includes receipt if provided
+ */
+export function transformPolygonTransactionToTransaction(
+  rpcTx: PolygonTransaction,
+  receipt?: PolygonTransactionReceipt | null,
+): Transaction {
+  const transaction: Transaction = {
+    hash: rpcTx.hash,
+    from: rpcTx.from,
+    to: rpcTx.to || "",
+    value: BigInt(rpcTx.value).toString(),
+    gas: BigInt(rpcTx.gas).toString(),
+    gasPrice: rpcTx.gasPrice ? BigInt(rpcTx.gasPrice).toString() : "0",
+    maxFeePerGas: rpcTx.maxFeePerGas ? BigInt(rpcTx.maxFeePerGas).toString() : undefined,
+    maxPriorityFeePerGas: rpcTx.maxPriorityFeePerGas
+      ? BigInt(rpcTx.maxPriorityFeePerGas).toString()
+      : undefined,
+    nonce: rpcTx.nonce ? parseInt(rpcTx.nonce, 16).toString() : "0",
+    data: rpcTx.input,
+    blockNumber: rpcTx.blockNumber ? parseInt(rpcTx.blockNumber, 16).toString() : "0",
+    blockHash: rpcTx.blockHash || "",
+    transactionIndex: rpcTx.transactionIndex
+      ? parseInt(rpcTx.transactionIndex, 16).toString()
+      : "0",
+    v: rpcTx.v,
+    r: rpcTx.r,
+    s: rpcTx.s,
+    type: rpcTx.type,
+  };
+
+  if (receipt) {
+    transaction.receipt = {
+      blockHash: receipt.blockHash,
+      blockNumber: parseInt(receipt.blockNumber, 16).toString(),
+      contractAddress: receipt.contractAddress,
+      cumulativeGasUsed: BigInt(receipt.cumulativeGasUsed).toString(),
+      effectiveGasPrice: receipt.effectiveGasPrice
+        ? BigInt(receipt.effectiveGasPrice).toString()
+        : "0",
+      from: receipt.from,
+      gasUsed: BigInt(receipt.gasUsed).toString(),
+      logs: receipt.logs,
+      logsBloom: receipt.logsBloom,
+      status: receipt.status || "0x1",
+      to: receipt.to || "",
+      transactionHash: receipt.transactionHash,
+      transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
+      type: receipt.type,
+    };
+  }
+
+  return transaction;
+}
+
+/**
+ * Creates an Address domain object from balance, code, and transaction count
+ */
+export function createAddressFromBalance(
+  address: string,
+  balance: string,
+  code: string,
+  txCount: string,
+): Address {
+  return {
+    address,
+    balance: BigInt(balance).toString(),
+    code,
+    txCount: parseInt(txCount, 16).toString(),
+    storageAt: {},
+  };
+}
+
+/**
+ * Converts a hex string to a number
+ */
+export function hexToNumber(hex: string): number {
+  return parseInt(hex, 16);
+}
diff --git a/src/services/adapters/adaptersFactory.ts b/src/services/adapters/adaptersFactory.ts
new file mode 100644
index 0000000..760e4bf
--- /dev/null
+++ b/src/services/adapters/adaptersFactory.ts
@@ -0,0 +1,52 @@
+import type { NetworkAdapter } from "./NetworkAdapter";
+import { EVMAdapter } from "./EVMAdapter/EVMAdapter";
+import { OptimismAdapter } from "./OptimismAdapter/OptimismAdapter";
+import { BaseAdapter } from "./BaseAdapter/BaseAdapter";
+import { BNBAdapter } from "./BNBAdapter/BNBAdapter";
+import { PolygonAdapter } from "./PolygonAdapter/PolygonAdapter";
+import { ArbitrumAdapter } from "./ArbitrumAdapter/ArbitrumAdapter";
+import type {
+  ArbitrumClient,
+  AztecClient,
+  BaseClient,
+  BNBClient,
+  EthereumClient,
+  OptimismClient,
+  PolygonClient,
+  SupportedChainId,
+} from "explorer-network-connectors";
+
+// biome-ignore lint/complexity/noStaticOnlyClass: <TODO>
+export class AdapterFactory {
+  static createAdapter(
+    networkId: SupportedChainId | 11155111 | 97 | 31337,
+    client:
+      | EthereumClient
+      | OptimismClient
+      | BNBClient
+      | PolygonClient
+      | BaseClient
+      | ArbitrumClient
+      | AztecClient,
+  ): NetworkAdapter {
+    switch (networkId) {
+      case 1:
+      case 11155111:
+      case 31337:
+        return new EVMAdapter(networkId, client as EthereumClient);
+      case 10:
+        return new OptimismAdapter(networkId, client as OptimismClient);
+      case 56:
+      case 97:
+        return new BNBAdapter(networkId, client as BNBClient);
+      case 137:
+        return new PolygonAdapter(networkId, client as PolygonClient);
+      case 8453:
+        return new BaseAdapter(networkId, client as BaseClient);
+      case 42161:
+        return new ArbitrumAdapter(networkId, client as ArbitrumClient);
+      default:
+        throw new Error(`Unknown adapter for networkId: ${networkId}`);
+    }
+  }
+}
diff --git a/src/services/adapters/shared/extractData.ts b/src/services/adapters/shared/extractData.ts
new file mode 100644
index 0000000..e8f9f67
--- /dev/null
+++ b/src/services/adapters/shared/extractData.ts
@@ -0,0 +1,35 @@
+/**
+ * Extracts the actual data from a StrategyResult
+ * Handles both fallback mode (data is T) and parallel mode (data is array of responses)
+ *
+ * In parallel mode, the current implementation of ParallelStrategy incorrectly returns
+ * the array of provider responses as the data field. This helper extracts the first
+ * successful response's data.
+ */
+// biome-ignore lint/suspicious/noExplicitAny: Need to handle both T and provider response arrays
+export function extractData<T>(strategyResultData: T | any): T {
+  // Check if this looks like an array of provider responses (parallel mode bug)
+  if (Array.isArray(strategyResultData) && strategyResultData.length > 0) {
+    const firstItem = strategyResultData[0];
+
+    // Check if it has the RPCProviderResponse structure
+    if (
+      firstItem &&
+      typeof firstItem === "object" &&
+      "url" in firstItem &&
+      "status" in firstItem &&
+      "data" in firstItem
+    ) {
+      // Find the first successful response
+      const successfulResponse = strategyResultData.find(
+        // biome-ignore lint/suspicious/noExplicitAny: Provider response type is dynamic
+        (r: any) => r.status === "success" && r.data !== undefined,
+      );
+
+      return successfulResponse ? successfulResponse.data : (strategyResultData[0]?.data as T);
+    }
+  }
+
+  // Fallback mode or already extracted data
+  return strategyResultData as T;
+}
diff --git a/src/services/adapters/shared/normalizeBlockNumber.ts b/src/services/adapters/shared/normalizeBlockNumber.ts
new file mode 100644
index 0000000..da74ac2
--- /dev/null
+++ b/src/services/adapters/shared/normalizeBlockNumber.ts
@@ -0,0 +1,15 @@
+import type { BlockNumberOrTag } from "../NetworkAdapter";
+
+/**
+ * Normalizes a block number to the format expected by RPC clients
+ * Converts numeric block numbers to hex strings, passes through block tags and hex strings unchanged
+ *
+ * @param blockNumber - Block number as number, hex string, or block tag
+ * @returns Block number as hex string or block tag
+ */
+export function normalizeBlockNumber(blockNumber: BlockNumberOrTag): `0x${string}` | string {
+  if (typeof blockNumber === "number") {
+    return `0x${blockNumber.toString(16)}`;
+  }
+  return blockNumber;
+}
diff --git a/src/services/adapters/transaction.ts b/src/services/adapters/transaction.ts
deleted file mode 100644
index dedb1da..0000000
--- a/src/services/adapters/transaction.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// src/services/transformers/transactionTransformer.ts
-import type { RPCTransaction, RPCTransactionReceipt } from "../../types";
-import type { Transaction } from "../../types";
-
-export class TransactionAdapter {
-	static fromRPCTransaction(
-		rpcTx: RPCTransaction,
-		chainId: number,
-		receipt?: RPCTransactionReceipt | null,
-	): Transaction {
-		const transaction: Transaction = {
-			hash: rpcTx.hash,
-			from: rpcTx.from,
-			to: rpcTx.to,
-			value: BigInt(rpcTx.value).toString(),
-			gas: BigInt(rpcTx.gas).toString(),
-			gasPrice: BigInt(rpcTx.gasPrice).toString(),
-			nonce: parseInt(rpcTx.nonce, 16).toString(),
-			data: rpcTx.input,
-			blockNumber: parseInt(rpcTx.blockNumber, 16).toString(),
-			blockHash: rpcTx.blockHash,
-			transactionIndex: parseInt(rpcTx.transactionIndex, 16).toString(),
-			v: rpcTx.v,
-			r: rpcTx.r,
-			s: rpcTx.s,
-			type: rpcTx.type,
-		};
-
-		if (receipt) {
-			transaction.receipt = {
-				blockHash: receipt.blockHash,
-				blockNumber: parseInt(receipt.blockNumber, 16).toString(),
-				contractAddress: receipt.contractAddress,
-				cumulativeGasUsed: BigInt(receipt.cumulativeGasUsed).toString(),
-				effectiveGasPrice: BigInt(receipt.effectiveGasPrice).toString(),
-				from: receipt.from,
-				gasUsed: BigInt(receipt.gasUsed).toString(),
-				logs: receipt.logs,
-				logsBloom: receipt.logsBloom,
-				status: receipt.status,
-				to: receipt.to,
-				transactionHash: receipt.transactionHash,
-				transactionIndex: parseInt(receipt.transactionIndex, 16).toString(),
-				type: receipt.type,
-			};
-		}
-
-		return transaction;
-	}
-}
diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 0000000..f8fe90c
--- /dev/null
+++ b/src/styles/base.css
@@ -0,0 +1,647 @@
+/* ==========================================================================
+   Base CSS - Consolidated Styles
+   This file contains unified base classes to reduce duplication across stylesheets.
+   ========================================================================== */
+
+/* ==========================================================================
+   CARDS - Unified card system
+   Base card class with modifiers for different contexts
+   ========================================================================== */
+
+.card {
+	background: var(--bg-primary);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	border: 1px solid var(--color-primary-alpha-15);
+	border-radius: 16px;
+	padding: 20px;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+/* Page card - larger padding and border-radius */
+.card--page {
+	border-radius: 20px;
+	padding: 24px;
+}
+
+/* Block display card - full width */
+.card--block {
+	width: 100%;
+}
+
+/* Devtools card - uses card background variable, smaller shadow */
+.card--devtools {
+	background: var(--bg-card);
+	box-shadow: var(--shadow-sm);
+	border-color: var(--color-primary-alpha-10);
+	margin-bottom: 24px;
+}
+
+/* Table wrapper card - uses card background, primary border */
+.card--table {
+	background: var(--bg-card);
+	border-color: var(--color-primary);
+	box-shadow: 0 4px 20px var(--color-primary-alpha-10);
+}
+
+/* Container-wide card variant */
+.card.container-wide {
+	max-width: 1352px;
+	padding: 0px 12px;
+}
+
+/* ==========================================================================
+   INFO BOXES - Unified info box system
+   Base info box class with color modifiers and layout variants
+   ========================================================================== */
+
+.info-box {
+	display: flex;
+	justify-content: space-between;
+	padding: 8px 12px;
+	background: var(--color-primary-alpha-4);
+	border-radius: 8px;
+	border-left: 3px solid var(--color-primary);
+}
+
+/* Vertical layout variant */
+.info-box--vertical {
+	flex-direction: column;
+	gap: 4px;
+	padding: 10px 12px;
+}
+
+/* Color variants */
+.info-box--arbitrum {
+	background: var(--color-info-alpha-10);
+	border-left-color: var(--color-info);
+}
+
+.info-box--optimism {
+	background: var(--color-error-alpha-10);
+	border-left-color: var(--color-error);
+}
+
+.info-box--success {
+	background: var(--color-success-alpha-10);
+	border-left-color: var(--color-success);
+}
+
+.info-box--warning {
+	background: var(--color-warning-alpha-10);
+	border-left-color: var(--color-warning);
+}
+
+/* Full width span for grids */
+.info-box--full-width {
+	grid-column: 1 / -1;
+}
+
+/* Info box content elements */
+.info-box__label {
+	font-size: 0.85rem;
+	color: var(--color-primary);
+	font-weight: 600;
+	font-family: "Outfit", sans-serif;
+}
+
+.info-box__label--arbitrum {
+	color: var(--color-info);
+}
+
+.info-box__label--optimism {
+	color: var(--color-error);
+}
+
+.info-box__value {
+	font-weight: 500;
+	color: var(--text-primary);
+	font-family: "Outfit", sans-serif;
+	font-size: 0.95rem;
+}
+
+.info-box__value--mono {
+	font-size: 0.9rem;
+	word-break: break-all;
+}
+
+.info-box__value--small {
+	font-size: 0.85rem;
+}
+
+.info-box__value--accent {
+	font-weight: 600;
+	color: var(--color-primary-muted);
+}
+
+.info-box__subtext {
+	font-weight: 500;
+	color: var(--text-secondary);
+	font-family: "Outfit", sans-serif;
+	font-size: 0.8rem;
+	margin-top: 2px;
+}
+
+/* ==========================================================================
+   FORM INPUTS - Unified input system
+   Base input class with variants for different contexts
+   ========================================================================== */
+
+.input {
+	padding: 8px 16px;
+	border-radius: 8px;
+	border: 1px solid var(--border-primary);
+	background: var(--input-bg);
+	color: var(--input-text);
+	font-family: "Outfit", sans-serif;
+	font-size: 0.9rem;
+	outline: none;
+	transition: all 0.2s ease;
+}
+
+.input:focus {
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
+}
+
+/* Search input - flex grow */
+.input--search {
+	flex: 1;
+}
+
+/* Large search input (home page) */
+.input--search-lg {
+	padding: 16px 24px;
+	font-size: 1.1rem;
+	border-radius: 12px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+
+/* Devtools input - monospace font, thicker border */
+.input--devtools {
+	width: 100%;
+	padding: 10px 12px;
+	border-width: 2px;
+	border-color: var(--color-primary-alpha-20);
+	font-family: "JetBrains Mono", monospace;
+	font-size: 0.85rem;
+}
+
+.input--devtools:focus {
+	border-color: var(--color-primary);
+	box-shadow: none;
+}
+
+/* Full width input */
+.input--full {
+	width: 100%;
+}
+
+/* Select dropdown */
+.select {
+	padding: 8px 16px;
+	border-radius: 8px;
+	border: 1px solid var(--border-primary);
+	background: var(--input-bg);
+	color: var(--input-text);
+	font-family: "Outfit", sans-serif;
+	font-size: 0.9rem;
+	outline: none;
+	transition: all 0.2s ease;
+	cursor: pointer;
+}
+
+.select:focus {
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
+}
+
+.select--devtools {
+	width: 100%;
+	padding: 10px 12px;
+	border-width: 2px;
+	border-color: var(--color-primary-alpha-20);
+	font-family: "JetBrains Mono", monospace;
+	font-size: 0.85rem;
+	background-color: var(--input-bg);
+}
+
+.select--devtools:focus {
+	border-color: var(--color-primary);
+	box-shadow: none;
+}
+
+/* Textarea */
+.textarea {
+	padding: 12px 16px;
+	border-radius: 8px;
+	border: 1px solid var(--border-primary);
+	background: var(--input-bg);
+	color: var(--input-text);
+	font-family: "Outfit", sans-serif;
+	font-size: 0.9rem;
+	outline: none;
+	transition: all 0.2s ease;
+	resize: vertical;
+	min-height: 100px;
+}
+
+.textarea:focus {
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
+}
+
+.textarea--devtools {
+	width: 100%;
+	padding: 10px 12px;
+	border-width: 2px;
+	border-color: var(--color-primary-alpha-20);
+	font-family: "JetBrains Mono", monospace;
+	font-size: 0.85rem;
+	min-height: 80px;
+}
+
+.textarea--devtools:focus {
+	border-color: var(--color-primary);
+	box-shadow: none;
+}
+
+/* ==========================================================================
+   FORM LAYOUT - Form groups and labels
+   ========================================================================== */
+
+.form-group {
+	margin-bottom: 16px;
+}
+
+.form-label {
+	display: block;
+	font-family: "Outfit", sans-serif;
+	font-size: 0.9rem;
+	font-weight: 600;
+	color: var(--color-primary);
+	margin-bottom: 8px;
+}
+
+.form-label--devtools {
+	font-size: 0.85rem;
+	color: var(--text-secondary);
+	margin-bottom: 6px;
+}
+
+.form-row {
+	display: flex;
+	gap: 16px;
+	margin-bottom: 16px;
+}
+
+.form-row > * {
+	flex: 1;
+}
+
+/* ==========================================================================
+   BUTTONS - Unified button system
+   Base button class with variants
+   ========================================================================== */
+
+.btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 8px 16px;
+	border: none;
+	border-radius: 8px;
+	cursor: pointer;
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	font-size: 0.9rem;
+	transition: all 0.2s ease;
+}
+
+.btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* Primary button */
+.btn--primary {
+	background: var(--color-primary);
+	color: white;
+}
+
+.btn--primary:hover:not(:disabled) {
+	background: var(--color-primary-muted);
+}
+
+/* Primary button with gradient */
+.btn--primary-gradient {
+	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
+	color: white;
+	box-shadow: 0 4px 12px var(--color-primary-alpha-30);
+}
+
+.btn--primary-gradient:hover:not(:disabled) {
+	opacity: 0.9;
+	transform: translateY(-1px);
+	box-shadow: 0 6px 16px var(--color-primary-alpha-40);
+}
+
+.btn--primary-gradient:active {
+	transform: translateY(0);
+}
+
+/* Secondary button (outline) */
+.btn--secondary {
+	background: transparent;
+	color: var(--color-primary);
+	border: 1px solid var(--color-primary);
+}
+
+.btn--secondary:hover:not(:disabled) {
+	background: var(--color-primary-alpha-10);
+}
+
+/* Large button */
+.btn--lg {
+	padding: 12px 24px;
+	border-radius: 10px;
+}
+
+/* Search button (home page) */
+.btn--search {
+	padding: 16px 32px;
+	font-size: 1.1rem;
+	border-radius: 12px;
+	box-shadow: 0 4px 6px var(--color-primary-alpha-20);
+}
+
+/* Small button */
+.btn--sm {
+	padding: 4px 8px;
+	font-size: 0.75rem;
+	border-radius: 6px;
+}
+
+/* Inline button (for links) */
+.btn--inline {
+	display: inline-flex;
+	text-decoration: none;
+}
+
+/* Flex grow button (for button groups) */
+.btn--flex {
+	flex: 1;
+}
+
+/* ==========================================================================
+   BADGES - Unified badge system
+   Base badge class with status variants
+   ========================================================================== */
+
+.badge {
+	display: inline-flex;
+	align-items: center;
+	padding: 4px 10px;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	font-weight: 600;
+}
+
+/* Status badges */
+.badge--success {
+	background: var(--badge-success-bg, var(--color-success-alpha-15));
+	color: var(--badge-success-text, var(--color-success));
+}
+
+.badge--error,
+.badge--failed {
+	background: var(--badge-error-bg, var(--color-error-alpha-15));
+	color: var(--badge-error-text, var(--color-error));
+}
+
+.badge--warning,
+.badge--pending {
+	background: var(--badge-warning-bg, var(--color-warning-alpha-15));
+	color: var(--badge-warning-text, var(--color-warning));
+}
+
+.badge--info {
+	background: var(--badge-info-bg, var(--color-info-alpha-15));
+	color: var(--badge-info-text, var(--color-info));
+}
+
+.badge--neutral {
+	background: var(--badge-neutral-bg);
+	color: var(--text-tertiary);
+}
+
+/* Block status badge - uppercase */
+.badge--block-status {
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+/* Method badge - monospace */
+.badge--method {
+	font-family: monospace;
+	font-size: 0.75rem;
+	padding: 4px 8px;
+	border-radius: 4px;
+	max-width: 100px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.badge--method-decoded {
+	background: var(--color-primary-alpha-15);
+	color: var(--color-primary);
+	border: 1px solid var(--color-primary-alpha-30);
+}
+
+.badge--method-selector {
+	background: var(--badge-neutral-bg);
+	color: var(--text-tertiary);
+	border: 1px solid var(--border-secondary);
+}
+
+.badge--method-transfer {
+	background: var(--color-info-alpha-15);
+	color: var(--color-info);
+	border: 1px solid var(--color-info-alpha-30);
+}
+
+/* Pill badge - more rounded */
+.badge--pill {
+	border-radius: 12px;
+	padding: 0.25rem 0.5rem;
+}
+
+/* ==========================================================================
+   TITLES - Unified title system
+   ========================================================================== */
+
+.title {
+	font-family: "Outfit", sans-serif;
+	font-weight: 700;
+	color: var(--text-primary);
+	margin: 0;
+}
+
+.title--primary {
+	color: var(--color-primary);
+}
+
+.title--muted {
+	color: var(--color-primary-muted);
+}
+
+/* Title sizes */
+.title--xs {
+	font-size: 0.85rem;
+}
+
+.title--sm {
+	font-size: 1rem;
+}
+
+.title--md {
+	font-size: 1.1rem;
+}
+
+.title--lg {
+	font-size: 1.25rem;
+}
+
+.title--xl {
+	font-size: 1.5rem;
+}
+
+.title--2xl {
+	font-size: clamp(1.3rem, 3.5vw, 2rem);
+	letter-spacing: -1px;
+}
+
+.title--hero {
+	font-size: 4.5rem;
+	font-weight: 800;
+	letter-spacing: -2px;
+	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	text-shadow: 0 10px 30px var(--color-primary-alpha-20);
+}
+
+/* Section title with icon */
+.title--with-icon {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+/* ==========================================================================
+   UTILITY CLASSES
+   ========================================================================== */
+
+/* Text utilities */
+.text-mono {
+	font-family: "JetBrains Mono", monospace;
+}
+
+.text-break {
+	word-break: break-all;
+}
+
+.text-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* ==========================================================================
+   SPACING UTILITIES
+   Note: Additional spacing utilities (mt-small, mb-medium, p-large, etc.)
+   are defined in layouts.css. Use those for semantic naming.
+   These numeric utilities provide a consistent scale.
+   ========================================================================== */
+
+/* Margin utilities - numeric scale (8px increments) */
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: 8px; }
+.mb-2 { margin-bottom: 16px; }
+.mb-3 { margin-bottom: 24px; }
+
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: 8px; }
+.mt-2 { margin-top: 16px; }
+.mt-3 { margin-top: 24px; }
+
+.ml-1 { margin-left: 8px; }
+.ml-2 { margin-left: 16px; }
+
+.mr-1 { margin-right: 8px; }
+.mr-2 { margin-right: 16px; }
+
+/* Gap utilities - varied scale for common use cases */
+.gap-0 { gap: 0; }
+.gap-1 { gap: 4px; }
+.gap-2 { gap: 8px; }
+.gap-3 { gap: 12px; }
+.gap-4 { gap: 16px; }
+.gap-5 { gap: 24px; }
+
+/* Flex utilities */
+.flex { display: flex; }
+.flex-column { display: flex; flex-direction: column; }
+.flex-row { display: flex; flex-direction: row; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-1 { flex: 1; }
+.flex-center { display: flex; align-items: center; justify-content: center; }
+.flex-between { display: flex; align-items: center; justify-content: space-between; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-end { justify-content: flex-end; }
+
+/* Display utilities */
+.hidden { display: none; }
+.block { display: block; }
+.inline-block { display: inline-block; }
+
+/* Object fit utilities */
+.object-contain { object-fit: contain; }
+.object-cover { object-fit: cover; }
+
+/* Link utilities */
+.link-primary {
+	color: var(--color-info, #3b82f6);
+	text-decoration: none;
+}
+
+.link-primary:hover {
+	text-decoration: underline;
+}
+
+/* Min-width utilities */
+.min-w-80 { min-width: 80px; }
+.min-w-100 { min-width: 100px; }
+.min-w-120 { min-width: 120px; }
+
+/* Min-height utilities */
+.min-h-60 { min-height: 60px; }
+.min-h-80 { min-height: 80px; }
+.min-h-100 { min-height: 100px; }
+
+/* Font size utilities */
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 0.8rem; }
+.text-base { font-size: 0.9rem; }
+.text-lg { font-size: 1rem; }
+
+/* Background utilities for dynamic colors (use CSS variables) */
+.bg-dynamic { background: var(--dynamic-bg); }
+.border-dynamic { border-color: var(--dynamic-border); }
diff --git a/src/styles/components.css b/src/styles/components.css
index 2138bf7..abe4360 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -1,5 +1,14 @@
 /* Reusable Component Styles */
 
+/* Utility Classes */
+.hidden {
+	display: none;
+}
+
+.word-break-all {
+	word-break: break-all;
+}
+
 /* Transaction Details - Row-based layout (Etherscan style) */
 .tx-details {
 	display: flex;
@@ -10,7 +19,7 @@
 .tx-row {
 	display: flex;
 	padding: 12px 16px;
-	border-bottom: 1px solid rgba(16, 185, 129, 0.1);
+	border-bottom: 1px solid var(--color-primary-alpha-10);
 	align-items: flex-start;
 	gap: 16px;
 }
@@ -21,7 +30,7 @@
 
 .tx-label {
 	font-size: 0.9rem;
-	color: var(--text-secondary, #6b7280);
+	color: var(--text-secondary);
 	font-weight: 500;
 	font-family: "Outfit", sans-serif;
 }
@@ -29,7 +38,7 @@
 .tx-value {
 	flex: 1;
 	font-size: 0.9rem;
-	color: var(--text-color, #1f2937);
+	color: var(--text-primary);
 	font-weight: 500;
 	font-family: "Outfit", sans-serif;
 	word-break: break-word;
@@ -41,17 +50,17 @@
 }
 
 .tx-value-highlight {
-	color: #059669;
+	color: var(--color-primary-muted);
 	font-weight: 600;
 }
 
 .tx-confirmations {
 	margin-left: 12px;
 	padding: 2px 8px;
-	background: rgba(16, 185, 129, 0.15);
+	background: var(--color-primary-alpha-15);
 	border-radius: 4px;
 	font-size: 0.8rem;
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .tx-age {
@@ -60,13 +69,13 @@
 }
 
 .tx-timestamp-full {
-	color: var(--text-secondary, #6b7280);
+	color: var(--text-secondary);
 	font-size: 0.85rem;
 }
 
 .tx-gas-pct {
 	margin-left: 6px;
-	color: var(--text-secondary, #6b7280);
+	color: var(--text-secondary);
 	font-size: 0.85rem;
 }
 
@@ -78,28 +87,28 @@
 
 .tx-attr {
 	padding: 4px 10px;
-	background: rgba(16, 185, 129, 0.08);
+	background: var(--color-primary-alpha-8);
 	border-radius: 4px;
 	font-size: 0.85rem;
 }
 
 /* L2-specific row styles */
 .tx-row-arbitrum {
-	background: rgba(59, 130, 246, 0.04);
-	border-left: 3px solid #3b82f6;
+	background: var(--color-info-alpha-4);
+	border-left: 3px solid var(--color-info);
 }
 
 .tx-row-arbitrum .tx-label {
-	color: #3b82f6;
+	color: var(--color-info);
 }
 
 .tx-row-optimism {
-	background: rgba(239, 68, 68, 0.04);
-	border-left: 3px solid #ef4444;
+	background: var(--color-error-alpha-4);
+	border-left: 3px solid var(--color-error);
 }
 
 .tx-row-optimism .tx-label {
-	color: #ef4444;
+	color: var(--color-error);
 }
 
 .tx-row-base {
@@ -129,31 +138,31 @@
 	justify-content: center;
 	width: 28px;
 	height: 28px;
-	background: rgba(16, 185, 129, 0.1);
+	background: var(--color-primary-alpha-10);
 	border-radius: 6px;
-	color: #10b981;
+	color: var(--color-primary);
 	text-decoration: none;
 	font-weight: 600;
 	transition: all 0.2s ease;
 }
 
 .block-nav-btn:hover {
-	background: #10b981;
+	background: var(--color-primary);
 	color: white;
 }
 
 .burnt-fees {
-	color: #f59e0b;
+	color: var(--color-warning);
 	font-weight: 600;
 }
 
 /* More Details Toggle */
 .more-details-toggle {
-	background: rgba(16, 185, 129, 0.08);
-	border: 1px solid rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-8);
+	border: 1px solid var(--color-primary-alpha-20);
 	border-radius: 6px;
 	padding: 8px 16px;
-	color: #10b981;
+	color: var(--color-primary);
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
 	font-size: 0.9rem;
@@ -162,8 +171,8 @@
 }
 
 .more-details-toggle:hover {
-	background: rgba(16, 185, 129, 0.15);
-	border-color: #10b981;
+	background: var(--color-primary-alpha-15);
+	border-color: var(--color-primary);
 }
 
 .more-details-content {
@@ -171,7 +180,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
-	background: rgba(0, 0, 0, 0.02);
+	background: var(--overlay-dark-5);
 	padding: 16px;
 	border-radius: 8px;
 }
@@ -184,14 +193,14 @@
 
 .detail-label {
 	font-size: 0.85rem;
-	color: var(--text-secondary, #6b7280);
+	color: var(--text-secondary);
 	font-weight: 500;
 }
 
 .detail-value {
 	flex: 1;
 	font-size: 0.85rem;
-	color: var(--text-color, #1f2937);
+	color: var(--text-primary);
 	word-break: break-all;
 }
 
@@ -200,11 +209,12 @@
 	font-family: "JetBrains Mono", "Fira Code", monospace;
 	font-size: 0.7rem;
 	word-break: break-all;
-	background: rgba(0, 0, 0, 0.03);
+	background: var(--overlay-light-5);
 	padding: 8px;
 	border-radius: 4px;
 	max-height: 100px;
 	overflow: auto;
+	color: var(--text-primary);
 }
 
 /* Transaction Section Toggle */
@@ -222,7 +232,7 @@
 }
 
 .tx-section-arrow {
-	color: #10b981;
+	color: var(--color-primary);
 	font-size: 0.8rem;
 	margin-left: 8px;
 }
@@ -238,7 +248,7 @@
 	align-items: center;
 	gap: 12px;
 	padding: 12px 16px;
-	border-bottom: 1px solid rgba(16, 185, 129, 0.1);
+	border-bottom: 1px solid var(--color-primary-alpha-10);
 }
 
 .tx-list-item:last-child {
@@ -248,14 +258,14 @@
 .tx-list-index {
 	flex: 0 0 40px;
 	height: 28px;
-	background: rgba(16, 185, 129, 0.1);
+	background: var(--color-primary-alpha-10);
 	border-radius: 4px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-family: "JetBrains Mono", monospace;
 	font-size: 0.8rem;
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .tx-list-hash {
@@ -283,8 +293,8 @@
 .contract-creation-badge {
 	display: inline-block;
 	padding: 2px 8px;
-	background: rgba(245, 158, 11, 0.15);
-	color: #f59e0b;
+	background: var(--color-warning-alpha-15);
+	color: var(--color-warning);
 	border-radius: 4px;
 	font-size: 0.85rem;
 	font-weight: 600;
@@ -296,7 +306,7 @@
 	flex-direction: column;
 	gap: 8px;
 	padding: 12px 16px;
-	border-bottom: 1px solid rgba(16, 185, 129, 0.1);
+	border-bottom: 1px solid var(--color-primary-alpha-10);
 }
 
 .tx-row-vertical:last-child {
@@ -308,8 +318,8 @@
 }
 
 .tx-input-data {
-	background: rgba(0, 0, 0, 0.03);
-	border: 1px solid rgba(0, 0, 0, 0.1);
+	background: var(--overlay-light-5);
+	border: 1px solid var(--overlay-light-10);
 	border-radius: 6px;
 	padding: 12px;
 	max-height: 200px;
@@ -321,14 +331,66 @@
 	font-size: 0.8rem;
 	word-break: break-all;
 	white-space: pre-wrap;
-	color: var(--text-color, #1f2937);
+	color: var(--text-primary);
 }
 
 .tx-empty {
-	color: var(--text-secondary, #6b7280);
+	color: var(--text-secondary);
 	font-style: italic;
 }
 
+/* Decoded Input Data Section */
+.tx-decoded-input {
+	background: var(--color-primary-alpha-6);
+	border: 1px solid var(--color-primary-alpha-20);
+	border-radius: 8px;
+	padding: 16px;
+}
+
+.tx-decoded-function {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: 12px;
+	flex-wrap: wrap;
+}
+
+.tx-function-badge {
+	display: inline-block;
+	padding: 6px 12px;
+	border-radius: 6px;
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	font-size: 0.9rem;
+	background: var(--color-primary);
+	color: white;
+}
+
+.tx-function-signature {
+	font-family: "JetBrains Mono", "Fira Code", monospace;
+	font-size: 0.85rem;
+	color: var(--text-secondary);
+}
+
+.tx-decoded-params {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.tx-abi-badge {
+	display: inline-block;
+	padding: 2px 6px;
+	border-radius: 4px;
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	font-size: 0.7rem;
+	background: var(--color-accent-alpha-15);
+	color: var(--color-accent);
+	border: 1px solid var(--color-accent-alpha-30);
+	margin-left: auto;
+}
+
 /* Event Logs Section */
 .tx-section {
 	border-radius: 12px;
@@ -336,16 +398,43 @@
 }
 
 .tx-section-header {
-	background: rgba(16, 185, 129, 0.08);
+	background: var(--color-primary-alpha-8);
 	padding: 12px 16px;
-	border-bottom: 1px solid rgba(16, 185, 129, 0.15);
+	border-bottom: 1px solid var(--color-primary-alpha-15);
 }
 
-.tx-section-title {
+/* ==========================================================================
+   TITLES - Section title classes
+   All section titles share base typography
+   ========================================================================== */
+
+/* Base section title styles */
+.tx-section-title,
+.abi-section-title,
+.profile-section-title,
+.functions-section-title,
+.trace-title,
+.legend-title,
+.network-stats-title {
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
+	color: var(--color-primary);
+}
+
+/* Specific title sizes */
+.tx-section-title {
 	font-size: 0.95rem;
-	color: #10b981;
+}
+
+.abi-section-title,
+.functions-section-title {
+	font-size: 0.85rem;
+	margin-bottom: 6px;
+}
+
+.profile-section-title {
+	font-size: 1.1rem;
+	margin: 0 0 16px 0;
 }
 
 .tx-logs {
@@ -355,7 +444,7 @@
 
 .tx-log {
 	display: flex;
-	border-bottom: 1px solid rgba(16, 185, 129, 0.1);
+	border-bottom: 1px solid var(--color-primary-alpha-10);
 	padding: 16px;
 	gap: 16px;
 }
@@ -367,7 +456,7 @@
 .tx-log-index {
 	flex: 0 0 32px;
 	height: 32px;
-	background: rgba(16, 185, 129, 0.15);
+	background: var(--color-primary-alpha-15);
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
@@ -375,7 +464,7 @@
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
 	font-size: 0.85rem;
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .tx-log-content {
@@ -394,14 +483,14 @@
 
 .tx-log-label {
 	font-size: 0.8rem;
-	color: var(--text-secondary, #6b7280);
+	color: var(--text-secondary);
 	font-weight: 500;
 }
 
 .tx-log-value {
 	flex: 1;
 	font-size: 0.85rem;
-	color: var(--text-color, #1f2937);
+	color: var(--text-primary);
 	word-break: break-all;
 	min-width: 0;
 }
@@ -426,7 +515,7 @@
 .tx-topic-index {
 	flex: 0 0 24px;
 	font-size: 0.75rem;
-	color: var(--text-secondary, #6b7280);
+	color: var(--text-secondary);
 }
 
 .tx-topic-value {
@@ -467,12 +556,13 @@
 	font-weight: 600;
 	font-size: 0.85rem;
 	color: white;
+	background-color: var(--event-color, #10b981);
 }
 
 .tx-event-signature {
 	font-family: "JetBrains Mono", monospace;
 	font-size: 0.75rem;
-	color: var(--text-secondary, #6b7280);
+	color: var(--text-secondary);
 	cursor: help;
 }
 
@@ -493,9 +583,9 @@
 	align-items: flex-start;
 	gap: 8px;
 	padding: 8px 12px;
-	background: rgba(16, 185, 129, 0.05);
+	background: var(--color-primary-alpha-4);
 	border-radius: 6px;
-	border-left: 2px solid rgba(16, 185, 129, 0.3);
+	border-left: 2px solid var(--color-primary-alpha-30);
 	flex-wrap: wrap;
 }
 
@@ -503,14 +593,14 @@
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
 	font-size: 0.85rem;
-	color: #10b981;
+	color: var(--color-primary);
 	min-width: 80px;
 }
 
 .tx-param-type {
 	font-family: "JetBrains Mono", monospace;
 	font-size: 0.75rem;
-	color: var(--text-secondary, #6b7280);
+	color: var(--text-secondary);
 	margin-right: 8px;
 }
 
@@ -518,7 +608,7 @@
 	flex: 1;
 	font-family: "Outfit", sans-serif;
 	font-size: 0.85rem;
-	color: var(--text-color, #1f2937);
+	color: var(--text-primary);
 	word-break: break-all;
 	min-width: 0;
 }
@@ -526,8 +616,8 @@
 .tx-param-indexed {
 	font-size: 0.7rem;
 	padding: 2px 6px;
-	background: rgba(59, 130, 246, 0.15);
-	color: #3b82f6;
+	background: var(--color-info-alpha-15);
+	color: var(--color-info);
 	border-radius: 4px;
 	font-weight: 500;
 	flex-shrink: 0;
@@ -568,96 +658,114 @@
 	}
 }
 
-/* Info Boxes - Green bordered data display boxes */
-.info-box {
+/* ==========================================================================
+   INFO BOXES - Consolidated info box system
+   All info boxes share base styles with color/layout variants
+   ========================================================================== */
+
+/* Base info-box styles - shared by all variants */
+.info-box,
+.info-box-vertical,
+.info-box-arbitrum,
+.info-box-arbitrum-vertical,
+.info-box-optimism {
 	display: flex;
-	justify-content: space-between;
 	padding: 8px 12px;
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	border-radius: 8px;
-	border-left: 3px solid #10b981;
+	border-left: 3px solid var(--color-primary);
 }
 
-.info-box-vertical {
-	display: flex;
+/* Default horizontal layout */
+.info-box,
+.info-box-arbitrum,
+.info-box-optimism {
+	justify-content: space-between;
+}
+
+/* Vertical layout variant */
+.info-box-vertical,
+.info-box-arbitrum-vertical {
 	flex-direction: column;
 	gap: 4px;
 	padding: 10px 12px;
-	background: rgba(16, 185, 129, 0.04);
-	border-radius: 8px;
-	border-left: 3px solid #10b981;
 }
 
-.info-box-label {
+/* Arbitrum color variant (blue theme) */
+.info-box-arbitrum,
+.info-box-arbitrum-vertical {
+	background: var(--color-info-alpha-10);
+	border-left-color: var(--color-info);
+}
+
+/* Full width for grid layouts */
+.info-box-arbitrum-vertical {
+	grid-column: 1 / -1;
+}
+
+/* Optimism color variant (red theme) - styles defined below */
+.info-box-optimism {
+	background: var(--color-error-alpha-10);
+	border-left-color: var(--color-error);
+}
+
+/* Info box content elements - shared base styles */
+.info-box-label,
+.info-box-arbitrum-label,
+.info-box-optimism-label {
 	font-size: 0.85rem;
-	color: #10b981;
 	font-weight: 600;
 	font-family: "Outfit", sans-serif;
 }
 
-.info-box-value {
+/* Label color variants */
+.info-box-label {
+	color: var(--color-primary);
+}
+
+.info-box-arbitrum-label {
+	color: var(--color-info);
+}
+
+.info-box-optimism-label {
+	color: var(--color-error);
+}
+
+/* Info box value styles - shared base */
+.info-box-value,
+.info-box-value-mono,
+.info-box-value-small,
+.info-box-value-accent {
 	font-weight: 500;
-	color: var(--text-color, #1f2937);
+	color: var(--text-primary);
 	font-family: "Outfit", sans-serif;
+}
+
+.info-box-value {
 	font-size: 0.95rem;
 }
 
 .info-box-value-mono {
-	font-weight: 500;
-	color: var(--text-color, #1f2937);
-	font-family: "Outfit", sans-serif;
 	font-size: 0.9rem;
 	word-break: break-all;
 }
 
 .info-box-value-small {
-	font-weight: 500;
-	color: var(--text-color, #1f2937);
-	font-family: "Outfit", sans-serif;
 	font-size: 0.85rem;
 }
 
-.info-box-subtext {
-	font-weight: 500;
-	color: var(--text-secondary, #6b7280);
-	font-family: "Outfit", sans-serif;
-	font-size: 0.8rem;
-	margin-top: 2px;
-}
-
 .info-box-value-accent {
 	font-weight: 600;
-	color: #059669;
-	font-family: "Outfit", sans-serif;
+	color: var(--color-primary-muted);
 	font-size: 0.95rem;
 }
 
-/* Arbitrum-specific info boxes (blue theme) */
-.info-box-arbitrum {
-	display: flex;
-	justify-content: space-between;
-	padding: 8px 12px;
-	background: rgba(59, 130, 246, 0.08);
-	border-radius: 8px;
-	border-left: 3px solid #3b82f6;
-}
-
-.info-box-arbitrum-vertical {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	padding: 10px 12px;
-	background: rgba(59, 130, 246, 0.08);
-	border-radius: 8px;
-	border-left: 3px solid #3b82f6;
-	grid-column: 1 / -1;
-}
-
-.info-box-arbitrum-label {
-	font-size: 0.85rem;
-	color: #3b82f6;
-	font-weight: 600;
+.info-box-subtext {
+	font-weight: 500;
+	color: var(--text-secondary);
 	font-family: "Outfit", sans-serif;
+	font-size: 0.8rem;
+	margin-top: 2px;
 }
 
 /* Network Cards - Home page */
@@ -677,15 +785,16 @@
 	cursor: pointer;
 }
 
-.network-card:hover {
+.network-card-link:hover .network-card {
 	transform: translateY(-4px);
+	border-color: var(--network-color, rgba(255, 255, 255, 0.1));
+	box-shadow: 0 8px 32px color-mix(in srgb, var(--network-color, #000) 25%, transparent);
 }
 
 .network-card-header {
 	display: flex;
 	align-items: center;
 	gap: 12px;
-	margin-bottom: 8px;
 	justify-content: flex-start;
 }
 
@@ -705,56 +814,104 @@
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
+	background: color-mix(in srgb, var(--network-color, #888) 12%, transparent);
 }
 
 .network-card-info {
 	flex: 1;
 }
 
+.network-card-title-row {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}
+
 .network-card-title {
 	margin: 0;
 	font-family: "Outfit", sans-serif;
 	font-size: 1.25rem;
 	font-weight: 700;
-	color: #059669;
+	color: var(--color-primary-muted);
 	margin-bottom: 2px;
 }
 
 .network-card-chain-id {
 	font-family: "Outfit", sans-serif;
 	font-size: 0.75rem;
-	color: #059669;
+	color: var(--color-primary-muted);
 	font-weight: 500;
 }
 
-.network-card-description {
-	margin: 0;
-	font-family: "Outfit", sans-serif;
-	font-size: 0.85rem;
-	color: #0da978ff;
-	line-height: 1.4;
-	text-align: center;
+/* Testnet toggle */
+.testnet-grid {
+	margin-top: 24px;
 }
 
-/* Buttons */
-.button-primary {
-	background: #10b981;
-	color: white;
-	border: none;
-	padding: 8px 16px;
+.testnet-toggle-container {
+	display: flex;
+	justify-content: center;
+	margin-top: 24px;
+	width: 100%;
+}
+
+.testnet-toggle-btn {
+	background: transparent;
+	border: 1px solid rgba(255, 255, 255, 0.2);
+	color: var(--color-text-muted);
+	padding: 8px 20px;
+	border-radius: 6px;
+	font-size: 0.875rem;
+	cursor: pointer;
+	transition:
+		color 0.2s ease,
+		border-color 0.2s ease,
+		background-color 0.2s ease;
+}
+
+.testnet-toggle-btn:hover {
+	color: var(--color-text);
+	border-color: rgba(255, 255, 255, 0.4);
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* ==========================================================================
+   BUTTONS - Consolidated button classes
+   All buttons share base styles with variants
+   ========================================================================== */
+
+/* Base button styles - shared by all button variants */
+.button-primary,
+.collapsible-button,
+.button-primary-inline,
+.button-secondary-inline {
 	border-radius: 8px;
 	cursor: pointer;
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
 	font-size: 0.9rem;
 	transition: all 0.2s ease;
+}
+
+/* Primary button styles */
+.button-primary,
+.collapsible-button {
+	background: var(--color-primary);
+	color: white;
+	border: none;
+	padding: 8px 16px;
+}
+
+.button-primary {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-.button-primary:hover {
-	background: #059669;
+.button-primary:hover,
+.collapsible-button:hover {
+	background: var(--color-primary-muted);
 }
 
 /* Collapsible sections */
@@ -763,22 +920,9 @@
 }
 
 .collapsible-button {
-	background: #10b981;
-	color: white;
-	border: none;
-	padding: 8px 16px;
-	border-radius: 8px;
-	cursor: pointer;
-	font-family: "Outfit", sans-serif;
-	font-weight: 600;
-	font-size: 0.9rem;
 	margin-bottom: 10px;
 }
 
-.collapsible-button:hover {
-	background: #059669;
-}
-
 .collapsible-content {
 	display: flex;
 	flex-direction: column;
@@ -787,11 +931,11 @@
 
 /* Transaction/Block items in lists */
 .list-item {
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	padding: 12px;
 	border-radius: 8px;
-	border: 1px solid rgba(16, 185, 129, 0.2);
-	border-left: 3px solid #10b981;
+	border: 1px solid var(--color-primary-alpha-20);
+	border-left: 3px solid var(--color-primary);
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -801,13 +945,13 @@
 .list-item-index {
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 	font-size: 0.85rem;
 	min-width: 60px;
 }
 
 .list-item-hash {
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	text-decoration: none;
 	font-family: "monospace";
@@ -825,17 +969,17 @@
 
 /* Withdrawal items */
 .withdrawal-item {
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	padding: 12px;
 	border-radius: 8px;
-	border: 1px solid rgba(16, 185, 129, 0.2);
-	border-left: 3px solid #10b981;
+	border: 1px solid var(--color-primary-alpha-20);
+	border-left: 3px solid var(--color-primary);
 }
 
 .withdrawal-header {
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
-	color: #10b981;
+	color: var(--color-primary);
 	margin-bottom: 8px;
 	font-size: 0.9rem;
 }
@@ -849,30 +993,30 @@
 
 .withdrawal-label {
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 }
 
 .withdrawal-value {
 	font-family: "Outfit", sans-serif;
-	color: var(--text-color, #1f2937);
+	color: var(--text-primary);
 }
 
 .withdrawal-amount {
 	font-family: "Outfit", sans-serif;
-	color: #059669;
+	color: var(--color-primary-muted);
 	font-weight: 600;
 }
 
 /* Gas percentage display */
 .gas-percentage {
-	color: #6b7280;
+	color: var(--text-secondary);
 	margin-left: 4px;
 	font-size: 0.85rem;
 }
 
 /* Link styles */
 .link-accent {
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	text-decoration: none;
 }
@@ -886,7 +1030,7 @@
 	font-size: 3rem;
 	font-family: "Outfit", sans-serif;
 	font-weight: 800;
-	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	background-clip: text;
@@ -897,7 +1041,7 @@
 	font-size: 2rem;
 	font-family: "Outfit", sans-serif;
 	font-weight: 700;
-	color: #10b981;
+	color: var(--color-primary);
 	margin-bottom: 32px;
 }
 
@@ -916,17 +1060,17 @@
 .page-title-small {
 	font-family: "Outfit", sans-serif;
 	font-size: 2rem;
-	color: #059669;
+	color: var(--color-primary-muted);
 	margin-bottom: 1rem;
 }
 
 .page-subtitle-text {
-	color: #6b7280;
+	color: var(--text-secondary);
 	margin-bottom: 1.5rem;
 }
 
 .page-subtitle-small {
-	color: #6b7280;
+	color: var(--text-secondary);
 	margin-bottom: 0.5rem;
 }
 
@@ -940,15 +1084,15 @@
 }
 
 .feature-card:hover {
-	background: rgba(16, 185, 129, 0.08);
-	border-color: rgba(16, 185, 129, 0.3);
+	background: var(--color-primary-alpha-8);
+	border-color: var(--color-primary-alpha-30);
 }
 
 .feature-card-title {
 	font-size: 1.1rem;
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
-	color: #10b981;
+	color: var(--color-primary);
 	margin-bottom: 12px;
 }
 
@@ -962,8 +1106,8 @@
 
 /* Version Cards */
 .version-card {
-	background: rgba(16, 185, 129, 0.04);
-	border: 1px solid rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-4);
+	border: 1px solid var(--color-primary-alpha-20);
 	border-radius: 12px;
 	padding: 24px;
 	margin-bottom: 40px;
@@ -977,6 +1121,18 @@
 	flex-wrap: wrap;
 }
 
+.version-card-grid-4 {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 24px;
+}
+
+@media (max-width: 768px) {
+	.version-card-grid-4 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
 .version-info-item {
 	display: flex;
 	flex-direction: column;
@@ -991,14 +1147,14 @@
 
 .version-info-value {
 	font-size: 1.2rem;
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	font-family: "Outfit", sans-serif;
 }
 
 .version-info-value-mono {
 	font-size: 1.2rem;
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	font-family: "monospace";
 }
@@ -1009,8 +1165,8 @@
 	align-items: flex-start;
 	gap: 16px;
 	padding: 16px;
-	background: rgba(16, 185, 129, 0.04);
-	border: 1px solid rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-4);
+	border: 1px solid var(--color-primary-alpha-20);
 	border-radius: 10px;
 }
 
@@ -1021,7 +1177,7 @@
 	font-size: 2rem;
 	width: 48px;
 	height: 48px;
-	background: rgba(16, 185, 129, 0.1);
+	background: var(--color-primary-alpha-10);
 	border-radius: 8px;
 	flex-shrink: 0;
 }
@@ -1030,11 +1186,19 @@
 	flex: 1;
 }
 
+/* Network info centered (for About page) */
+.network-item.text-center .network-info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+}
+
 .network-name {
 	font-size: 1rem;
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
-	color: #10b981;
+	color: var(--color-primary);
 	margin-bottom: 4px;
 }
 
@@ -1048,10 +1212,10 @@
 .opensource-card {
 	background: linear-gradient(
 		135deg,
-		rgba(16, 185, 129, 0.1),
+		var(--color-primary-alpha-10),
 		rgba(5, 150, 105, 0.1)
 	);
-	border: 1px solid rgba(16, 185, 129, 0.3);
+	border: 1px solid var(--color-primary-alpha-30);
 	border-radius: 12px;
 	padding: 40px;
 }
@@ -1060,7 +1224,7 @@
 	font-size: 2rem;
 	font-family: "Outfit", sans-serif;
 	font-weight: 700;
-	color: #10b981;
+	color: var(--color-primary);
 	margin-bottom: 16px;
 }
 
@@ -1073,102 +1237,217 @@
 	margin: 0 auto 24px;
 }
 
-.button-primary-inline {
+/* Inline button variants - larger padding, can be used as links */
+.button-primary-inline,
+.button-secondary-inline {
 	display: inline-flex;
 	padding: 12px 24px;
-	background: #10b981;
-	color: white;
-	border: none;
-	border-radius: 8px;
-	cursor: pointer;
-	font-family: "Outfit", sans-serif;
-	font-weight: 600;
-	font-size: 0.9rem;
 	text-decoration: none;
 	align-items: center;
 	justify-content: center;
-	transition: all 0.2s ease;
+}
+
+.button-primary-inline {
+	background: var(--color-primary);
+	color: white;
+	border: none;
 }
 
 .button-primary-inline:hover {
-	background: #059669;
+	background: var(--color-primary-muted);
 }
 
-/* License Footer */
-.license-footer {
-	padding: 20px;
-	color: rgba(255, 255, 255, 0.5);
-	font-family: "Outfit", sans-serif;
-	font-size: 0.9rem;
+.button-secondary-inline {
+	background: transparent;
+	color: var(--color-primary);
+	border: 1px solid var(--color-primary);
 }
 
-.license-footer p {
-	margin: 0;
+/* About Page Sections */
+.about-section {
+	margin-bottom: 48px;
 }
 
-.license-footer-spacing {
-	margin-top: 8px;
+.about-overview-text {
+	max-width: 800px;
+	margin: 0 auto;
+	text-align: center;
 }
 
-/* Transaction Status Badges */
-.status-badge-success {
-	background: #d1fae5;
-	color: #065f46;
-	padding: 4px 12px;
-	border-radius: 6px;
-	font-size: 0.85rem;
-	font-weight: 600;
+.about-overview-text p {
+	font-size: 1.05rem;
+	line-height: 1.7;
+	color: rgba(255, 255, 255, 0.8);
+	margin-bottom: 16px;
 }
 
-.status-badge-failed {
-	background: #fee2e2;
-	color: #991b1b;
-	padding: 4px 12px;
-	border-radius: 6px;
-	font-size: 0.85rem;
-	font-weight: 600;
+.about-overview-text p:last-child {
+	margin-bottom: 0;
 }
 
-/* Storage Input */
+.about-overview-text strong {
+	color: var(--color-primary);
+}
+
+.about-section-intro {
+	font-size: 1.05rem;
+	line-height: 1.7;
+	color: rgba(255, 255, 255, 0.8);
+	text-align: center;
+	max-width: 800px;
+	margin: 0 auto 32px;
+}
+
+.about-section-intro strong {
+	color: var(--color-primary);
+}
+
+/* Principles List */
+.principles-list {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	max-width: 700px;
+	margin: 0 auto;
+}
+
+.principle-item {
+	display: flex;
+	align-items: flex-start;
+	gap: 16px;
+	padding: 20px;
+	background: var(--color-primary-alpha-5);
+	border: 1px solid var(--color-primary-alpha-15);
+	border-radius: 12px;
+	transition: all 0.2s ease;
+}
+
+.principle-item:hover {
+	border-color: var(--color-primary-alpha-30);
+	background: var(--color-primary-alpha-10);
+}
+
+.principle-icon {
+	font-size: 1.5rem;
+	flex-shrink: 0;
+}
+
+.principle-content {
+	flex: 1;
+}
+
+.principle-title {
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--text-primary);
+	margin-bottom: 4px;
+}
+
+.principle-description {
+	font-size: 0.9rem;
+	color: rgba(255, 255, 255, 0.7);
+	line-height: 1.5;
+	margin: 0;
+}
+
+/* 2-column grid for vision cards */
+.data-grid-2 {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 20px;
+}
+
+@media (max-width: 768px) {
+	.data-grid-2 {
+		grid-template-columns: 1fr;
+	}
+}
+
+.button-secondary-inline:hover {
+	background: var(--color-primary-alpha-10);
+}
+
+/* License Footer */
+.license-footer {
+	padding: 20px;
+	color: rgba(255, 255, 255, 0.5);
+	font-family: "Outfit", sans-serif;
+	font-size: 2rem;
+}
+
+.license-footer p {
+	margin: 0;
+}
+
+.license-footer-spacing {
+	margin-top: 8px;
+}
+
+/* ==========================================================================
+   BADGES - Consolidated badge classes
+   All badges share base styles with color variants
+   ========================================================================== */
+
+/* Base badge styles - shared by all status badges */
+.status-badge-success,
+.status-badge-failed {
+	padding: 4px 12px;
+	border-radius: 6px;
+	font-size: 0.85rem;
+	font-weight: 600;
+}
+
+/* Use CSS variables for badge colors for theming support */
+.status-badge-success {
+	background: var(--badge-success-bg, #d1fae5);
+	color: var(--badge-success-text, #065f46);
+}
+
+.status-badge-failed {
+	background: var(--badge-error-bg, #fee2e2);
+	color: var(--badge-error-text, #991b1b);
+}
+
+/* Storage Input */
 .storage-input {
 	flex: 1;
 	padding: 10px 14px;
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	border-radius: 8px;
-	color: #1f2937;
+	color: var(--text-primary);
 	font-family: "JetBrains Mono", monospace;
 	font-size: 0.85rem;
 }
 
 .storage-input:focus {
 	outline: none;
-	border-color: #10b981;
+	border-color: var(--color-primary);
 }
 
 .storage-button {
 	padding: 10px 24px;
-	background: #10b981;
+	background: var(--color-primary);
 	border: none;
 	border-radius: 8px;
-	color: #ffffff;
+	color: var(--text-primary);
 	font-weight: 600;
 	cursor: pointer;
 	transition: background 0.2s;
 }
 
 .storage-button:hover {
-	background: #059669;
+	background: var(--color-primary-muted);
 }
 
 .storage-value-display {
 	padding: 12px;
-	background: rgba(16, 185, 129, 0.1);
-	border: 1px solid rgba(16, 185, 129, 0.3);
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-30);
 	border-radius: 8px;
 	font-family: "monospace";
 	font-size: 0.85rem;
 	word-break: break-all;
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 /* Contract Details */
@@ -1187,12 +1466,12 @@
 
 .source-code-header {
 	padding: 8px 12px;
-	background: rgba(16, 185, 129, 0.08);
-	border: 1px solid rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-8);
+	border: 1px solid var(--color-primary-alpha-20);
 	border-radius: 6px 6px 0 0;
 	font-family: "monospace";
 	font-size: 0.85rem;
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 }
 
@@ -1200,24 +1479,19 @@
 	margin: 0;
 	padding: 16px;
 	background: rgba(0, 0, 0, 0.3);
-	border: 1px solid rgba(16, 185, 129, 0.2);
+	border: 1px solid var(--color-primary-alpha-20);
 	border-top: none;
 	border-radius: 0 0 6px 6px;
 	font-family: "monospace";
 	font-size: 0.75rem;
-	color: #e5e7eb;
+	color: var(--text-primary);
 	max-height: 400px;
 	overflow-y: auto;
 	overflow-x: auto;
 	white-space: pre;
 }
 
-.abi-section-title {
-	font-size: 0.85rem;
-	color: #10b981;
-	margin-bottom: 6px;
-	font-weight: 600;
-}
+/* .abi-section-title - styles consolidated in TITLES section above */
 
 .abi-badge-container {
 	display: flex;
@@ -1227,8 +1501,8 @@
 
 .abi-badge-function {
 	padding: 4px 10px;
-	background: rgba(59, 130, 246, 0.15);
-	color: #3b82f6;
+	background: var(--color-info-alpha-15);
+	color: var(--color-info);
 	border-radius: 6px;
 	font-size: 0.8rem;
 	font-family: "monospace";
@@ -1236,8 +1510,8 @@
 
 .abi-badge-event {
 	padding: 4px 10px;
-	background: rgba(139, 92, 246, 0.15);
-	color: #8b5cf6;
+	background: var(--color-accent-alpha-15);
+	color: var(--color-accent);
 	border-radius: 6px;
 	font-size: 0.8rem;
 	font-family: "monospace";
@@ -1245,8 +1519,8 @@
 
 .abi-badge-constructor {
 	padding: 4px 10px;
-	background: rgba(245, 158, 11, 0.15);
-	color: #f59e0b;
+	background: var(--color-warning-alpha-15);
+	color: var(--color-warning);
 	border-radius: 6px;
 	font-size: 0.8rem;
 	font-family: "monospace";
@@ -1274,17 +1548,17 @@
 
 .metadata-label {
 	font-size: 0.75rem;
-	color: #10b981;
+	color: var(--color-primary);
 	margin-bottom: 4px;
 }
 
 .metadata-value {
 	font-size: 0.85rem;
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .sourcify-link {
-	color: #10b981;
+	color: var(--color-primary);
 	text-decoration: none;
 	font-weight: 600;
 	display: inline-flex;
@@ -1295,9 +1569,9 @@
 .verification-badge {
 	font-size: 0.7rem;
 	padding: 2px 6px;
-	background: rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-20);
 	border-radius: 4px;
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 }
 
@@ -1308,7 +1582,7 @@
 }
 
 .verification-text-success {
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	font-size: 0.95rem;
 	font-family: "Outfit", sans-serif;
@@ -1322,16 +1596,16 @@
 
 /* Event Logs */
 .log-container {
-	background: #f3f4f6;
+	background: var(--bg-tertiary);
 	padding: 15px;
 	border-radius: 8px;
-	border: 1px solid #e5e7eb;
+	border: 1px solid var(--border-primary);
 }
 
 .log-header {
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
-	color: #10b981;
+	color: var(--color-primary);
 	margin-bottom: 10px;
 }
 
@@ -1343,12 +1617,12 @@
 
 .log-label {
 	font-weight: 600;
-	color: #374151;
+	color: var(--text-primary);
 }
 
 .log-value {
 	font-family: "monospace";
-	color: #111827;
+	color: var(--text-primary);
 	font-weight: 500;
 }
 
@@ -1356,22 +1630,22 @@
 	font-family: "monospace";
 	font-size: 0.85rem;
 	margin-left: 10px;
-	color: #111827;
+	color: var(--text-primary);
 	font-weight: 500;
 }
 
 /* Debug Trace */
 .trace-container {
-	background: #f3f4f6;
+	background: var(--bg-tertiary);
 	padding: 15px;
 	border-radius: 8px;
-	border: 1px solid #e5e7eb;
+	border: 1px solid var(--border-primary);
 }
 
 .trace-title {
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
-	color: #8b5cf6;
+	color: var(--color-accent);
 	margin-bottom: 10px;
 	font-size: 1.1rem;
 }
@@ -1381,16 +1655,16 @@
 	gap: 8px;
 	font-size: 0.85rem;
 	font-family: "monospace";
-	color:#1f2937; 
+	color: var(--text-primary); 
 }
 
 .trace-error {
-	color: #ef4444;
+	color: var(--color-error);
 }
 
 .trace-calls-header {
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 	margin-bottom: 5px;
 }
 
@@ -1404,7 +1678,7 @@
 
 .trace-opcode-header {
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 	margin-bottom: 10px;
 }
 
@@ -1421,55 +1695,55 @@
 .trace-opcode-step {
 	margin-bottom: 8px;
 	padding-bottom: 8px;
-	border-bottom: 1px solid #e5e7eb;
+	border-bottom: 1px solid var(--border-primary);
 }
 
 .trace-opcode-name {
-	color: #8b5cf6;
+	color: var(--color-accent);
 	font-weight: 600;
 }
 
 .trace-opcode-info {
 	margin-left: 10px;
-	color: #6b7280;
+	color: var(--text-secondary);
 }
 
 .trace-opcode-stack {
 	margin-left: 10px;
 	font-size: 0.7rem;
-	color: #9ca3af;
+	color: var(--text-tertiary);
 }
 
 .trace-loading {
 	text-align: center;
 	padding: 20px;
-	color: #6b7280;
+	color: var(--text-secondary);
 }
 
 .trace-more-text {
 	text-align: center;
-	color: #6b7280;
+	color: var(--text-secondary);
 	padding: 10px;
 }
 
 /* Input Data Display */
 .input-data-display {
-	background: #f3f4f6;
+	background: var(--bg-tertiary);
 	padding: 15px;
 	border-radius: 8px;
-	border: 1px solid #e5e7eb;
+	border: 1px solid var(--border-primary);
 	font-family: "monospace";
 	font-size: 0.85rem;
 	word-break: break-all;
 	max-height: 300px;
 	overflow-y: auto;
-	color: #111827;
+	color: var(--text-primary);
 	font-weight: 500;
 }
 
 /* Collapsible Button for Trace/Logs */
 .collapsible-button-purple {
-	background: #8b5cf6;
+	background: var(--color-accent);
 	color: white;
 	border: none;
 	padding: 8px 16px;
@@ -1482,24 +1756,24 @@
 }
 
 .collapsible-button-purple:hover {
-	background: #7c3aed;
+	background: var(--color-accent-muted);
 }
 
 /* Contract Creation Label */
 .contract-creation-label {
-	color: #6b7280;
+	color: var(--text-secondary);
 	font-style: "italic";
 }
 
 .contract-creation-badge {
-	color: #8b5cf6;
+	color: var(--color-accent);
 	font-size: 0.85rem;
 	font-weight: 600;
 }
 
 /* Transaction Type Labels */
 .tx-type-incoming {
-	color: #f59e0b;
+	color: var(--color-warning);
 	font-family: "Outfit", sans-serif;
 	font-size: 0.9rem;
 	text-decoration: none;
@@ -1507,7 +1781,7 @@
 }
 
 .tx-type-outgoing {
-	color: #10b981;
+	color: var(--color-primary);
 	font-family: "Outfit", sans-serif;
 	font-size: 0.9rem;
 	text-decoration: none;
@@ -1535,7 +1809,7 @@
 
 .loader-text {
 	margin-top: 12px;
-	color: #6b7280;
+	color: var(--text-secondary);
 	font-family: "Outfit", sans-serif;
 	font-size: 0.9rem;
 }
@@ -1563,11 +1837,11 @@
 }
 
 .address-type-contract {
-	color: #3b82f6;
+	color: var(--color-info);
 }
 
 .address-type-eoa {
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .verification-status {
@@ -1585,7 +1859,7 @@
 
 .contract-details-icon {
 	font-size: 1.2rem;
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .source-toggle-container {
@@ -1598,7 +1872,7 @@
 
 .source-toggle-icon {
 	font-size: 0.9rem;
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .source-file-container {
@@ -1614,11 +1888,11 @@
 }
 
 .match-type-perfect {
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .match-type-partial {
-	color: #f59e0b;
+	color: var(--color-warning);
 }
 
 .recent-tx-header {
@@ -1659,22 +1933,7 @@
 	margin-top: 16px;
 }
 
-/* Optimism-specific info boxes (red theme) */
-.info-box-optimism {
-	display: flex;
-	justify-content: space-between;
-	padding: 8px 12px;
-	background: rgba(239, 68, 68, 0.08);
-	border-radius: 8px;
-	border-left: 3px solid #ef4444;
-}
-
-.info-box-optimism-label {
-	font-size: 0.85rem;
-	color: #ef4444;
-	font-weight: 600;
-	font-family: "Outfit", sans-serif;
-}
+/* Optimism info boxes - styles consolidated above with other info-box variants */
 
 /* Network Block Indicator */
 .network-block-indicator {
@@ -1684,7 +1943,7 @@
 	padding: 4px 10px;
 	height: 36px;
 	background: rgba(255, 255, 255, 0.05);
-	border: 1px solid rgba(255, 255, 255, 0.15);
+	border: 1px solid color-mix(in srgb, var(--network-color, #888) 25%, transparent);
 	border-radius: 8px;
 	transition: all 0.2s ease;
 }
@@ -1697,6 +1956,7 @@
 	width: 6px;
 	height: 6px;
 	border-radius: 50%;
+	background: var(--network-color, #888);
 	animation: network-pulse 2s ease-in-out infinite;
 }
 
@@ -1735,7 +1995,7 @@
 
 .network-block-label {
 	font-size: 0.6rem;
-	color: #e5e7eb;
+	color: var(--text-primary);
 	font-family: "Outfit", sans-serif;
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
@@ -1745,7 +2005,7 @@
 .network-block-number {
 	font-size: 0.75rem;
 	font-family: "JetBrains Mono", monospace;
-	color: var(--text-color, #e5e7eb);
+	color: var(--text-primary);
 	font-weight: 500;
 	line-height: 1.2;
 }
@@ -1762,10 +2022,10 @@
 
 .pagination-btn {
 	padding: 8px 16px;
-	background: rgba(16, 185, 129, 0.1);
-	border: 1px solid rgba(16, 185, 129, 0.3);
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-30);
 	border-radius: 8px;
-	color: #10b981;
+	color: var(--color-primary);
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
 	font-size: 0.85rem;
@@ -1774,8 +2034,8 @@
 }
 
 .pagination-btn:hover:not(:disabled) {
-	background: rgba(16, 185, 129, 0.2);
-	border-color: #10b981;
+	background: var(--color-primary-alpha-20);
+	border-color: var(--color-primary);
 	transform: translateY(-1px);
 }
 
@@ -1809,32 +2069,32 @@
 /* Header subtitle text (muted hash/id display) */
 .header-subtitle {
 	font-size: 0.9rem;
-	color: #9ca3af;
+	color: var(--text-tertiary);
 }
 
 /* Text colors */
 .text-muted {
-	color: #9ca3af;
+	color: var(--text-tertiary);
 }
 
 .text-muted-dark {
-	color: #6b7280;
+	color: var(--text-secondary);
 }
 
 .text-error {
-	color: #ef4444;
+	color: var(--color-error);
 }
 
 .text-success {
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .text-warning {
-	color: #f59e0b;
+	color: var(--color-warning);
 }
 
 .text-blue {
-	color: #3b82f6;
+	color: var(--color-info);
 }
 
 /* Margin/Padding utilities */
@@ -1917,11 +2177,11 @@
 }
 
 .verification-checking {
-	color: #6b7280;
+	color: var(--text-secondary);
 }
 
 .verification-not-verified {
-	color: #6b7280;
+	color: var(--text-secondary);
 }
 
 .match-badge {
@@ -1932,32 +2192,32 @@
 }
 
 .match-badge-full {
-	background: rgba(16, 185, 129, 0.15);
-	color: #10b981;
+	background: var(--color-primary-alpha-15);
+	color: var(--color-primary);
 }
 
 .match-badge-partial {
-	background: rgba(245, 158, 11, 0.15);
-	color: #f59e0b;
+	background: var(--color-warning-alpha-15);
+	color: var(--color-warning);
 }
 
 /* Contract details section toggle */
 .contract-section-toggle {
 	font-size: 1rem;
-	color: #10b981;
+	color: var(--color-primary);
 	margin-left: 8px;
 }
 
 /* Value highlight in success color */
 .tx-value-success {
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 }
 
 /* Collapsible section button styles */
 .collapsible-section-btn {
-	background: rgba(16, 185, 129, 0.08);
-	border: 1px solid rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-8);
+	border: 1px solid var(--color-primary-alpha-20);
 	border-radius: 8px;
 	padding: 12px 16px;
 	cursor: pointer;
@@ -1967,7 +2227,7 @@
 }
 
 .collapsible-section-btn:hover {
-	background: rgba(16, 185, 129, 0.12);
+	background: var(--color-primary-alpha-10);
 }
 
 .collapsible-section-header {
@@ -1976,7 +2236,7 @@
 	justify-content: space-between;
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .collapsible-section-content {
@@ -1989,10 +2249,10 @@
 /* Source file styling */
 .source-file-header {
 	padding: 8px 12px;
-	background: rgba(16, 185, 129, 0.08);
+	background: var(--color-primary-alpha-8);
 	border-radius: 6px 6px 0 0;
 	font-weight: 600;
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .source-file-code {
@@ -2002,7 +2262,7 @@
 	border-radius: 0 0 6px 6px;
 	font-family: "JetBrains Mono", monospace;
 	font-size: 0.8rem;
-	color: #e5e7eb;
+	color: var(--text-primary);
 	overflow-x: auto;
 	white-space: pre;
 	max-height: 400px;
@@ -2015,17 +2275,17 @@
 
 .abi-function-header {
 	padding: 10px 12px;
-	background: rgba(59, 130, 246, 0.1);
+	background: var(--color-info-alpha-10);
 	border-radius: 6px 6px 0 0;
 	font-weight: 600;
-	color: #3b82f6;
+	color: var(--color-info);
 }
 
 .abi-function-params {
 	padding: 12px;
 	background: rgba(0, 0, 0, 0.02);
 	border-radius: 0 0 6px 6px;
-	border: 1px solid rgba(59, 130, 246, 0.1);
+	border: 1px solid var(--color-info-alpha-10);
 	border-top: none;
 }
 
@@ -2046,19 +2306,19 @@
 
 .abi-param-name {
 	font-weight: 600;
-	color: #1f2937;
+	color: var(--text-primary);
 }
 
 .abi-param-type {
 	font-size: 0.8rem;
-	color: #6b7280;
+	color: var(--text-secondary);
 	font-family: "JetBrains Mono", monospace;
 }
 
 .abi-param-input {
 	width: 100%;
 	padding: 8px 12px;
-	border: 1px solid rgba(59, 130, 246, 0.2);
+	border: 1px solid var(--color-info-alpha-20);
 	border-radius: 6px;
 	font-family: "JetBrains Mono", monospace;
 	font-size: 0.85rem;
@@ -2066,7 +2326,7 @@
 
 .abi-param-input:focus {
 	outline: none;
-	border-color: #3b82f6;
+	border-color: var(--color-info);
 }
 
 /* Read/Write function buttons */
@@ -2082,21 +2342,21 @@
 }
 
 .function-btn-read {
-	background: rgba(16, 185, 129, 0.15);
-	color: #10b981;
+	background: var(--color-primary-alpha-15);
+	color: var(--color-primary);
 }
 
 .function-btn-read:hover:not(:disabled) {
-	background: rgba(16, 185, 129, 0.25);
+	background: var(--color-primary-alpha-25);
 }
 
 .function-btn-write {
-	background: rgba(245, 158, 11, 0.15);
-	color: #f59e0b;
+	background: var(--color-warning-alpha-15);
+	color: var(--color-warning);
 }
 
 .function-btn-write:hover:not(:disabled) {
-	background: rgba(245, 158, 11, 0.25);
+	background: var(--color-warning-alpha-25);
 }
 
 .function-btn:disabled {
@@ -2112,13 +2372,13 @@
 }
 
 .function-result-success {
-	background: rgba(16, 185, 129, 0.1);
-	border: 1px solid rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-20);
 }
 
 .function-result-error {
-	background: rgba(239, 68, 68, 0.1);
-	border: 1px solid rgba(239, 68, 68, 0.2);
+	background: var(--color-error-alpha-10);
+	border: 1px solid var(--color-error-alpha-20);
 }
 
 .function-result-label {
@@ -2141,10 +2401,10 @@
 
 .tx-list-tab {
 	padding: 8px 16px;
-	background: rgba(16, 185, 129, 0.1);
-	border: 1px solid rgba(16, 185, 129, 0.3);
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-30);
 	border-radius: 8px;
-	color: #10b981;
+	color: var(--color-primary);
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
 	font-size: 0.85rem;
@@ -2153,11 +2413,11 @@
 }
 
 .tx-list-tab:hover {
-	background: rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-20);
 }
 
 .tx-list-tab.active {
-	background: #10b981;
+	background: var(--color-primary);
 	color: white;
 }
 
@@ -2165,7 +2425,7 @@
 .tx-history-empty {
 	padding: 24px;
 	text-align: center;
-	color: #6b7280;
+	color: var(--text-secondary);
 }
 
 .tx-history-table {
@@ -2177,7 +2437,7 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 12px 0;
-	border-bottom: 1px solid rgba(16, 185, 129, 0.1);
+	border-bottom: 1px solid var(--color-primary-alpha-10);
 }
 
 .tx-history-row:last-child {
@@ -2195,7 +2455,7 @@
 
 /* Legend/Key indicators */
 .legend-container {
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	border-radius: 8px;
 	padding: 12px 16px;
 	margin-top: 16px;
@@ -2203,7 +2463,7 @@
 
 .legend-title {
 	font-weight: 600;
-	color: #1f2937;
+	color: var(--text-primary);
 	margin-bottom: 8px;
 }
 
@@ -2216,15 +2476,15 @@
 }
 
 .legend-dot-success {
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .legend-dot-warning {
-	color: #f59e0b;
+	color: var(--color-warning);
 }
 
 .legend-dot-error {
-	color: #ef4444;
+	color: var(--color-error);
 }
 
 /* Home page styles */
@@ -2257,7 +2517,7 @@
 	height: 120px;
 	border-radius: 24px;
 	margin-bottom: 16px;
-	box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
+	box-shadow: 0 8px 32px var(--color-primary-alpha-30);
 }
 
 .home-search-container {
@@ -2276,17 +2536,17 @@
 
 .network-stats-loading {
 	padding: 20px;
-	color: #10b981;
+	color: var(--color-primary);
 }
 
 .network-stats-error {
 	padding: 20px;
-	color: #ef4444;
+	color: var(--color-error);
 }
 
 .network-stats-card {
-	background: rgba(16, 185, 129, 0.04);
-	border: 1px solid rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-4);
+	border: 1px solid var(--color-primary-alpha-20);
 	border-radius: 16px;
 	padding: 24px;
 }
@@ -2298,7 +2558,7 @@
 }
 
 .network-stat-item {
-	background: rgba(16, 185, 129, 0.06);
+	background: var(--color-primary-alpha-6);
 	border-radius: 12px;
 	padding: 16px;
 	text-align: center;
@@ -2306,7 +2566,7 @@
 
 .network-stat-label {
 	font-size: 0.8rem;
-	color: #6b7280;
+	color: var(--text-tertiary);
 	margin-bottom: 6px;
 	font-family: "Outfit", sans-serif;
 	text-transform: uppercase;
@@ -2316,7 +2576,7 @@
 .network-stat-value {
 	font-size: 1.4rem;
 	font-weight: 700;
-	color: #10b981;
+	color: var(--color-primary);
 	font-family: "JetBrains Mono", monospace;
 }
 
@@ -2327,7 +2587,7 @@
 .network-stat-progress {
 	width: 100%;
 	height: 8px;
-	background: rgba(16, 185, 129, 0.1);
+	background: var(--color-primary-alpha-10);
 	border-radius: 4px;
 	margin-top: 8px;
 	overflow: hidden;
@@ -2335,7 +2595,7 @@
 
 .network-stat-progress-bar {
 	height: 100%;
-	background: linear-gradient(90deg, #10b981, #059669);
+	background: linear-gradient(90deg, var(--color-primary), var(--color-primary-muted));
 	border-radius: 4px;
 	transition: width 0.3s ease;
 }
@@ -2365,7 +2625,7 @@
 .network-stats-title {
 	font-size: clamp(1.2rem, 3vw, 1.5rem);
 	font-weight: 600;
-	color: #10b981;
+	color: var(--color-primary);
 	margin-bottom: 20px;
 	font-family: "Outfit", sans-serif;
 	text-transform: uppercase;
@@ -2387,11 +2647,11 @@
 }
 
 .sync-dot-success {
-	background-color: #10b981;
+	background-color: var(--color-primary);
 }
 
 .sync-dot-warning {
-	background-color: #f59e0b;
+	background-color: var(--color-warning);
 }
 
 /* Fork hash value */
@@ -2415,8 +2675,8 @@
 	gap: 6px;
 	padding: 4px 10px;
 	height: 36px;
-	background: rgba(255, 255, 255, 0.05);
-	border: 1px solid rgba(255, 255, 255, 0.15);
+	background: var(--overlay-light-5);
+	border: 1px solid var(--overlay-light-15);
 	border-radius: 8px;
 	cursor: pointer;
 	transition: all 0.2s ease;
@@ -2425,8 +2685,8 @@
 }
 
 .rpc-indicator-badge:hover {
-	background: rgba(255, 255, 255, 0.08);
-	border-color: rgba(255, 255, 255, 0.25);
+	background: var(--overlay-light-10);
+	border-color: var(--overlay-light-20);
 }
 
 .rpc-indicator-warning {
@@ -2445,7 +2705,7 @@
 }
 
 .rpc-indicator-status {
-	color: #4ade80;
+	color: var(--color-primary);
 	font-family: 'JetBrains Mono', monospace;
 }
 
@@ -2454,10 +2714,10 @@
 	top: calc(100% + 8px);
 	right: 0;
 	min-width: 320px;
-	background: rgba(30, 30, 30, 0.98);
-	border: 1px solid rgba(255, 255, 255, 0.15);
+	background: var(--bg-card);
+	border: 1px solid var(--overlay-light-15);
 	border-radius: 12px;
-	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+	box-shadow: var(--shadow-lg);
 	z-index: 1000;
 	overflow: hidden;
 	animation: dropdown-appear 0.2s ease;
@@ -2476,7 +2736,7 @@
 
 .rpc-indicator-header {
 	padding: 12px 16px;
-	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+	border-bottom: 1px solid var(--overlay-light-10);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -2484,15 +2744,15 @@
 
 .rpc-indicator-strategy {
 	font-size: 11px;
-	color: rgba(255, 255, 255, 0.6);
+	color: var(--text-secondary);
 	text-transform: uppercase;
 }
 
 .rpc-indicator-warning-banner {
 	padding: 8px 16px;
-	background: rgba(251, 191, 36, 0.1);
-	border-bottom: 1px solid rgba(251, 191, 36, 0.2);
-	color: #fbbf24;
+	background: var(--color-warning-alpha-10);
+	border-bottom: 1px solid var(--color-warning-alpha-15);
+	color: var(--color-warning);
 	font-size: 12px;
 }
 
@@ -2503,18 +2763,18 @@
 
 .rpc-indicator-item {
 	padding: 12px 16px;
-	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+	border-bottom: 1px solid var(--overlay-light-5);
 	cursor: pointer;
 	transition: background 0.15s ease;
 }
 
 .rpc-indicator-item:hover {
-	background: rgba(255, 255, 255, 0.05);
+	background: var(--overlay-light-5);
 }
 
 .rpc-indicator-item.selected {
-	background: rgba(59, 130, 246, 0.1);
-	border-left: 3px solid #3b82f6;
+	background: var(--color-info-alpha-10);
+	border-left: 3px solid var(--color-info);
 }
 
 .rpc-indicator-item.error {
@@ -2530,7 +2790,7 @@
 
 .rpc-indicator-item-index {
 	font-size: 10px;
-	color: rgba(255, 255, 255, 0.4);
+	color: var(--text-tertiary);
 	font-weight: 600;
 }
 
@@ -2538,7 +2798,7 @@
 	flex: 1;
 	font-size: 12px;
 	font-family: 'JetBrains Mono', monospace;
-	color: rgba(255, 255, 255, 0.9);
+	color: var(--text-primary);
 }
 
 .rpc-indicator-item-status {
@@ -2550,13 +2810,13 @@
 }
 
 .rpc-indicator-item-status.error {
-	color: #ef4444;
+	color: var(--color-error);
 }
 
 .rpc-indicator-item-error {
 	margin-top: 6px;
 	font-size: 11px;
-	color: #ef4444;
+	color: var(--color-error);
 	padding-left: 24px;
 }
 
@@ -2564,50 +2824,13 @@
 	margin-top: 6px;
 	display: inline-block;
 	padding: 2px 8px;
-	background: #3b82f6;
+	background: var(--color-info);
 	color: white;
 	font-size: 10px;
 	border-radius: 4px;
 	font-weight: 600;
 }
 
-/* Light theme overrides */
-.light-theme .rpc-indicator-badge {
-	background: rgba(0, 0, 0, 0.05);
-	border-color: rgba(0, 0, 0, 0.15);
-}
-
-.light-theme .rpc-indicator-badge:hover {
-	background: rgba(0, 0, 0, 0.08);
-	border-color: rgba(0, 0, 0, 0.25);
-}
-
-.light-theme .rpc-indicator-dropdown {
-	background: rgba(255, 255, 255, 0.98);
-	border-color: rgba(0, 0, 0, 0.15);
-}
-
-.light-theme .rpc-indicator-header,
-.light-theme .rpc-indicator-item {
-	border-color: rgba(0, 0, 0, 0.1);
-}
-
-.light-theme .rpc-indicator-item:hover {
-	background: rgba(0, 0, 0, 0.05);
-}
-
-.light-theme .rpc-indicator-status {
-	color: #10b981;
-}
-
-.light-theme .rpc-indicator-item-url {
-	color: rgba(0, 0, 0, 0.9);
-}
-
-.light-theme .rpc-indicator-strategy {
-	color: rgba(0, 0, 0, 0.6);
-}
-
 /* Version Warning Icon */
 .version-warning-icon {
 	position: relative;
@@ -2653,10 +2876,1792 @@
 
 /* Footer version styling based on environment */
 .footer-version-staging .environment-tag {
-	color: #f59e0b !important;
+	color: var(--color-warning) !important;
 }
 
 .footer-version-development .environment-tag {
-	color: #ef4444 !important;
+	color: var(--color-error) !important;
+}
+
+/* ============================================
+   Button Reset Styles
+   ============================================ */
+
+/* Base button reset - removes default button styling */
+.btn-reset {
+	background: none;
+	border: none;
+	padding: 0;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+}
+
+/* Button reset with full width and left alignment */
+.btn-reset-block {
+	background: none;
+	border: none;
+	width: 100%;
+	text-align: left;
+	padding: 0;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+}
+
+/* Toggle button for collapsible sections */
+.btn-toggle-section {
+	background: none;
+	border: none;
+	width: 100%;
+	text-align: left;
+	padding: 0;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+/* ENS Records toggle button */
+.btn-ens-toggle {
+	background: none;
+	border: none;
+	width: 100%;
+	text-align: left;
+	padding: 0;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+}
+
+/* ============================================
+   Supporters Page Styles
+   ============================================ */
+
+.supporters-container {
+	display: flex;
+	flex-direction: column;
+	gap: 32px;
+	margin-bottom: 32px;
+}
+
+.supporters-tier-section {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.supporters-tier-title {
+	font-family: "Outfit", sans-serif;
+	font-size: 2rem;
+	font-weight: 700;
+	color: var(--color-primary);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	margin: 0;
+	text-align: center;
+}
+
+.tier-icon {
+	font-size: 1.75rem;
+}
+
+.supporters-grid {
+	display: grid;
+	gap: 16px;
+	justify-content: center;
+}
+
+.supporters-grid-allies {
+	grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
+}
+
+.supporters-grid-partners {
+	grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
+}
+
+.supporters-grid-backers {
+	grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
+}
+
+.supporter-card {
+	display: block;
+	background: rgba(255, 255, 255, 0.05);
+	border: 2px solid var(--supporter-color, rgba(255, 255, 255, 0.1));
+	border-radius: 12px;
+	padding: 16px;
+	text-decoration: none;
+	transition: all 0.3s ease;
+}
+
+.supporter-card:hover {
+	transform: translateY(-4px);
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.supporter-card-content {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.supporter-logo {
+	width: 48px;
+	height: 48px;
+	border-radius: 10px;
+	object-fit: contain;
+}
+
+.supporter-logo-placeholder {
+	width: 48px;
+	height: 48px;
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-family: "Outfit", sans-serif;
+	font-size: 1.5rem;
+	font-weight: 700;
+	color: white;
+	background-color: var(--supporter-color, #10b981);
+}
+
+.supporter-info {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.supporter-name {
+	font-family: "Outfit", sans-serif;
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--color-primary);
+}
+
+.supporter-meta {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.supporter-type {
+	font-family: "Outfit", sans-serif;
+	font-size: 0.75rem;
+	color: var(--text-secondary);
+	text-transform: capitalize;
+}
+
+.supporter-card-no-link {
+	cursor: default;
+}
+
+.supporter-card-no-link:hover {
+	transform: none;
+	box-shadow: none;
+}
+
+.supporters-empty {
+	font-family: "Outfit", sans-serif;
+	font-size: 1.1rem;
+	color: var(--text-secondary);
+	margin-bottom: 16px;
+}
+
+.supporters-cta {
+	margin-top: 32px;
+	padding-top: 24px;
+	border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.supporters-cta p {
+	font-family: "Outfit", sans-serif;
+	font-size: 1rem;
+	color: var(--text-secondary);
+	margin-bottom: 12px;
+}
+
+/* ============================================
+   Profile Page Styles
+   ============================================ */
+
+.profile-display {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+}
+
+/* Profile Header */
+.profile-header {
+	margin-bottom: 8px;
+}
+
+.profile-header-content {
+	display: flex;
+	align-items: flex-start;
+	gap: 20px;
+}
+
+.profile-logo {
+	width: 80px;
+	height: 80px;
+	border-radius: 16px;
+	object-fit: contain;
+	flex-shrink: 0;
+}
+
+.profile-logo-placeholder {
+	width: 80px;
+	height: 80px;
+	border-radius: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-family: "Outfit", sans-serif;
+	font-size: 2rem;
+	font-weight: 700;
+	color: white;
+	background-color: var(--profile-color, var(--color-primary));
+	flex-shrink: 0;
+}
+
+.profile-header-info {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	flex: 1;
+}
+
+.profile-title-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+
+.profile-name {
+	font-family: "Outfit", sans-serif;
+	font-size: 2rem;
+	font-weight: 700;
+	color: var(--color-primary);
+	margin: 0;
+}
+
+.profile-description {
+	font-family: "Outfit", sans-serif;
+	font-size: 1rem;
+	color: var(--text-secondary);
+	margin: 0;
+	line-height: 1.5;
+}
+
+/* Profile Badges */
+.profile-badge {
+	display: inline-flex;
+	align-items: center;
+	padding: 4px 10px;
+	border-radius: 6px;
+	font-family: "Outfit", sans-serif;
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+}
+
+.profile-badge-verified {
+	background: var(--color-info-alpha-15);
+	color: var(--color-info);
+}
+
+.profile-badge-testnet {
+	background: var(--color-warning-alpha-15);
+	color: var(--color-warning);
+}
+
+/* Profile Meta */
+.profile-meta {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16px;
+	margin-top: 4px;
+}
+
+.profile-meta-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 0.9rem;
+}
+
+.profile-meta-label {
+	color: var(--text-secondary);
+	font-family: "Outfit", sans-serif;
+}
+
+.profile-meta-value {
+	color: var(--text-primary);
+	font-family: "JetBrains Mono", monospace;
+	font-weight: 500;
+}
+
+.profile-meta-capitalize {
+	text-transform: capitalize;
+	font-family: "Outfit", sans-serif;
+}
+
+/* Profile Tags */
+.profile-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin-top: 4px;
+}
+
+.profile-tag {
+	display: inline-flex;
+	padding: 4px 10px;
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-20);
+	border-radius: 6px;
+	font-family: "Outfit", sans-serif;
+	font-size: 0.8rem;
+	color: var(--color-primary);
+}
+
+/* Profile Sections */
+.profile-section {
+	background: var(--color-primary-alpha-4);
+	border: 1px solid var(--color-primary-alpha-15);
+	border-radius: 12px;
+	padding: 20px;
+}
+
+/* .profile-section-title - styles consolidated in TITLES section above */
+
+/* Profile Actions */
+.profile-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+}
+
+.profile-action-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 10px 20px;
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-30);
+	border-radius: 8px;
+	color: var(--color-primary);
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	font-size: 0.9rem;
+	text-decoration: none;
+	transition: all 0.2s ease;
+}
+
+.profile-action-btn:hover {
+	background: var(--color-primary-alpha-20);
+	border-color: var(--color-primary);
+	transform: translateY(-2px);
+}
+
+/* Profile Links */
+.profile-links {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 12px;
+}
+
+.profile-link-card {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 12px 16px;
+	background: rgba(255, 255, 255, 0.05);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-radius: 8px;
+	text-decoration: none;
+	transition: all 0.2s ease;
+}
+
+.profile-link-card:hover {
+	background: rgba(255, 255, 255, 0.08);
+	border-color: var(--color-primary-alpha-30);
+	transform: translateY(-2px);
+}
+
+.profile-link-name {
+	font-family: "Outfit", sans-serif;
+	font-size: 0.95rem;
+	font-weight: 600;
+	color: var(--color-primary);
+}
+
+.profile-link-description {
+	font-family: "Outfit", sans-serif;
+	font-size: 0.8rem;
+	color: var(--text-secondary);
+}
+
+/* Profile Networks */
+.profile-networks {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+.profile-network-chip {
+	display: inline-flex;
+	align-items: center;
+	padding: 6px 14px;
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-20);
+	border-radius: 20px;
+	font-family: "Outfit", sans-serif;
+	font-size: 0.85rem;
+	color: var(--color-primary);
+	text-decoration: none;
+	transition: all 0.2s ease;
+}
+
+.profile-network-chip:hover {
+	background: var(--color-primary-alpha-20);
+	border-color: var(--color-primary);
+}
+
+/* Profile RPC List */
+.profile-rpc-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.profile-rpc-item {
+	padding: 10px 14px;
+	background: rgba(0, 0, 0, 0.1);
+	border-radius: 6px;
+}
+
+.profile-rpc-item code {
+	font-family: "JetBrains Mono", monospace;
+	font-size: 0.85rem;
+	color: var(--text-primary);
+	word-break: break-all;
+}
+
+/* Profile Markdown Content */
+.profile-markdown {
+	font-family: "Outfit", sans-serif;
+	line-height: 1.7;
+	color: var(--text-primary);
+}
+
+.profile-md-h1 {
+	font-size: 1.3rem;
+	font-weight: 700;
+	color: var(--color-primary);
+	margin: 0 0 12px 0;
+}
+
+.profile-md-h2 {
+	font-size: 1.15rem;
+	font-weight: 600;
+	color: var(--color-primary);
+	margin: 16px 0 10px 0;
+}
+
+.profile-md-h3 {
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--color-primary);
+	margin: 14px 0 8px 0;
+}
+
+.profile-md-p {
+	margin: 0 0 12px 0;
+	color: var(--text-secondary);
+}
+
+.profile-md-link {
+	color: var(--color-primary);
+	text-decoration: none;
+}
+
+.profile-md-link:hover {
+	text-decoration: underline;
+}
+
+.profile-md-ul,
+.profile-md-ol {
+	margin: 0 0 12px 0;
+	padding-left: 24px;
+}
+
+.profile-md-li {
+	margin-bottom: 6px;
+	color: var(--text-secondary);
+}
+
+.profile-md-code {
+	font-family: "JetBrains Mono", monospace;
+	font-size: 0.85rem;
+	background: var(--color-primary-alpha-10);
+	padding: 2px 6px;
+	border-radius: 4px;
+	color: var(--color-primary);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+	.profile-header-content {
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+	}
+
+	.profile-title-row {
+		justify-content: center;
+	}
+
+	.profile-meta {
+		justify-content: center;
+	}
+
+	.profile-tags {
+		justify-content: center;
+	}
+
+	.profile-actions {
+		justify-content: center;
+	}
+
+	.profile-name {
+		font-size: 1.5rem;
+	}
+
+	.profile-logo,
+	.profile-logo-placeholder {
+		width: 64px;
+		height: 64px;
+	}
+}
+
+/* ============================================
+   Address Display Styles
+   ============================================ */
+
+/* Address Header */
+.address-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.address-header-left {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.address-ens-name {
+	margin-left: 12px;
+	margin-right: 8px;
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--color-primary);
+}
+
+/* Contract Functions Section */
+.contract-functions-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 8px;
+}
+
+.contract-functions-content {
+	margin-top: 8px;
+}
+
+.functions-section {
+	margin-bottom: 12px;
+}
+
+/* .functions-section-title base - styles consolidated in TITLES section above */
+
+/* Color variants for functions section titles */
+.functions-section-title-read,
+.functions-section-title-events {
+	color: var(--color-primary);
+}
+
+.functions-section-title-write {
+	color: var(--color-warning);
+}
+
+.functions-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+/* Wallet Connect Buttons */
+.wallet-hidden {
+	opacity: 0;
+	pointer-events: none;
+	user-select: none;
+}
+
+.btn-connect-wallet {
+	padding: 8px 16px;
+	background: var(--color-primary-alpha-15);
+	color: var(--color-primary);
+	border: 1px solid var(--color-primary-alpha-30);
+	border-radius: 6px;
+	font-size: 0.85rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.btn-connect-wallet:hover {
+	background: var(--color-primary-alpha-25);
+}
+
+.btn-wrong-network {
+	padding: 8px 16px;
+	background: var(--color-error-alpha-15);
+	color: var(--color-error);
+	border: 1px solid var(--color-error-alpha-30);
+	border-radius: 6px;
+	font-size: 0.85rem;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.wallet-connected-container {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+.btn-chain-selector {
+	padding: 6px 12px;
+	background: var(--color-info-alpha-15);
+	color: var(--color-info);
+	border: 1px solid var(--color-info-alpha-30);
+	border-radius: 6px;
+	font-size: 0.8rem;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	cursor: pointer;
+}
+
+.btn-account {
+	padding: 6px 12px;
+	background: var(--color-primary-alpha-15);
+	color: var(--color-primary);
+	border: 1px solid var(--color-primary-alpha-30);
+	border-radius: 6px;
+	font-size: 0.8rem;
+	cursor: pointer;
+	font-family: monospace;
+}
+
+.chain-icon {
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+}
+
+/* Function Buttons */
+.btn-function {
+	padding: 4px 10px;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	font-family: monospace;
+	cursor: pointer;
+	transition: all 0.2s;
+	border: 1px solid transparent;
+}
+
+.btn-function-read {
+	background: var(--color-info-alpha-15);
+	color: var(--color-info);
+}
+
+.btn-function-read:hover {
+	background: var(--color-info-alpha-25);
+}
+
+.btn-function-read.selected {
+	background: var(--color-info-alpha-30);
+	border-color: var(--color-info-alpha-50);
+}
+
+.btn-function-write {
+	background: var(--color-warning-alpha-15);
+	color: var(--color-warning);
+}
+
+.btn-function-write:hover {
+	background: var(--color-warning-alpha-25);
+}
+
+.btn-function-write.selected {
+	background: var(--color-warning-alpha-30);
+	border-color: var(--color-warning-alpha-50);
+}
+
+/* Event Badge */
+.event-badge {
+	padding: 4px 10px;
+	background: var(--color-accent-alpha-15);
+	color: var(--color-accent);
+	border-radius: 6px;
+	font-size: 0.8rem;
+	font-family: monospace;
+}
+
+.events-more {
+	color: rgba(255, 255, 255, 0.5);
+	font-size: 0.85rem;
+	align-self: center;
+}
+
+/* Function Forms */
+.function-form {
+	margin-top: 16px;
+	padding: 16px;
+	border-radius: 8px;
+}
+
+.function-form-read {
+	background: var(--color-info-alpha-4);
+	border: 1px solid var(--color-info-alpha-20);
+}
+
+.function-form-write {
+	background: var(--color-warning-alpha-4);
+	border: 1px solid var(--color-warning-alpha-15);
+}
+
+.function-form-title {
+	font-size: 0.9rem;
+	margin-bottom: 12px;
+	font-weight: 600;
+	font-family: monospace;
+}
+
+.function-form-title-read {
+	color: var(--color-info);
+}
+
+.function-form-title-write {
+	color: var(--color-warning);
+}
+
+.function-inputs {
+	margin-bottom: 12px;
+}
+
+.function-input-label {
+	display: block;
+	margin-bottom: 10px;
+}
+
+.function-input-name {
+	display: block;
+	font-size: 0.8rem;
+	color: rgba(255, 255, 255, 0.7);
+	margin-bottom: 4px;
+	font-family: monospace;
+}
+
+.function-input {
+	width: 100%;
+	padding: 8px 12px;
+	background: rgba(0, 0, 0, 0.3);
+	border-radius: 6px;
+	color: var(--text-primary);
+	font-size: 0.85rem;
+	font-family: monospace;
+}
+
+.function-input-read {
+	border: 1px solid var(--color-info-alpha-30);
+}
+
+.function-input-write {
+	border: 1px solid var(--color-warning-alpha-30);
+}
+
+.function-input-value {
+	border: 1px solid var(--color-primary-alpha-30);
+}
+
+.function-no-params {
+	font-size: 0.8rem;
+	color: var(--color-primary);
+	margin-bottom: 12px;
+	font-style: italic;
+}
+
+/* Payable Badge */
+.payable-badge {
+	margin-left: 8px;
+	font-size: 0.75rem;
+	padding: 2px 6px;
+	background: var(--color-primary-alpha-15);
+	color: var(--color-primary);
+	border-radius: 4px;
+}
+
+/* Function Result */
+.function-result {
+	margin-bottom: 12px;
+	padding: 10px;
+	border-radius: 6px;
+	font-size: 0.85rem;
+	word-break: break-all;
+	font-family: monospace;
+}
+
+.function-result-success {
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-30);
+	color: var(--color-primary);
+}
+
+.function-result-error {
+	background: var(--color-error-alpha-10);
+	border: 1px solid var(--color-error-alpha-30);
+	color: var(--color-error);
+}
+
+.function-result-title {
+	font-weight: 600;
+	margin-bottom: 4px;
+}
+
+/* Function Action Buttons */
+.function-actions {
+	display: flex;
+	gap: 8px;
+}
+
+.btn-function-action {
+	padding: 10px 16px;
+	border-radius: 6px;
+	font-size: 0.85rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.btn-query {
+	flex: 1;
+	background: var(--color-info-alpha-20);
+	color: var(--color-info);
+	border: 1px solid var(--color-info-alpha-40);
+}
+
+.btn-query:hover:not(:disabled) {
+	background: var(--color-info-alpha-30);
+}
+
+.btn-query:disabled {
+	background: var(--color-info-alpha-10);
+	color: var(--color-info-alpha-50);
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.btn-write-action {
+	flex: 1;
+	background: var(--color-warning-alpha-15);
+	color: var(--color-warning);
+	border: 1px solid var(--color-warning-alpha-40);
+}
+
+.btn-write-action:hover:not(:disabled) {
+	background: var(--color-warning-alpha-30);
+}
+
+.btn-write-action:disabled {
+	background: var(--color-warning-alpha-10);
+	color: var(--color-warning-alpha-50);
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.btn-cancel {
+	padding: 10px 16px;
+	background: var(--color-error-alpha-20);
+	color: var(--color-error);
+	border: 1px solid var(--color-error-alpha-40);
+	border-radius: 6px;
+	font-size: 0.85rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.btn-cancel:hover {
+	background: var(--color-error-alpha-30);
+}
+
+/* Transaction Status */
+.tx-status-box {
+	margin-bottom: 12px;
+	padding: 10px;
+	border-radius: 6px;
+	font-size: 0.85rem;
+}
+
+.tx-status-pending {
+	background: var(--color-info-alpha-10);
+	border: 1px solid var(--color-info-alpha-30);
+	color: var(--color-info);
+}
+
+.tx-status-success {
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-30);
+	color: var(--color-primary);
+}
+
+.tx-status-error {
+	background: var(--color-error-alpha-10);
+	border: 1px solid var(--color-error-alpha-30);
+	color: var(--color-error);
+}
+
+.tx-hash-link {
+	margin-top: 4px;
+	font-family: monospace;
+	font-size: 0.75rem;
+}
+
+.tx-hash-link a {
+	color: var(--color-primary);
+	text-decoration: underline;
+}
+
+/* Sourcify Link */
+.sourcify-link {
+	color: var(--color-primary);
+	text-decoration: none;
+	font-weight: 600;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+}
+
+/* Transaction History Section */
+.tx-history-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.tx-history-status {
+	font-size: 0.85rem;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.tx-history-status-complete {
+	color: var(--color-primary);
+}
+
+.tx-history-status-partial {
+	color: var(--color-warning);
+}
+
+.tx-history-status-none {
+	color: var(--color-error);
+}
+
+.tx-history-dot {
+	font-size: 0.5rem;
+}
+
+.tx-history-message {
+	padding: 12px 16px;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	font-size: 0.85rem;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.tx-history-message-warning {
+	background: var(--color-warning-alpha-10);
+	color: var(--color-warning);
+}
+
+.tx-history-message-error {
+	background: var(--color-error-alpha-10);
+	color: var(--color-error);
+}
+
+.tx-history-message-icon {
+	font-size: 1rem;
+}
+
+/* Transaction Table To Link */
+.tx-table-to-link {
+	text-decoration: none;
+	font-family: monospace;
+	font-size: 0.9rem;
+}
+
+.tx-table-to-link-self {
+	color: var(--color-warning);
+}
+
+.tx-table-to-link-other {
+	color: var(--color-primary);
+}
+
+/* Address Type Display Components */
+.address-type-indicator {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 4px;
+}
+
+.address-type-icon {
+	font-size: 1.2rem;
+}
+
+.address-type-label {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: var(--text-secondary);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.address-token-symbol {
+	font-size: 0.85rem;
+	font-weight: 700;
+	color: var(--color-primary);
+	padding: 2px 8px;
+	background: var(--color-primary-alpha-10);
+	border-radius: 4px;
+}
+
+/* Token Info Row */
+.token-info-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.token-logo {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	object-fit: cover;
+	background: rgba(0, 0, 0, 0.1);
+}
+
+.token-name-symbol {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.token-name {
+	font-weight: 600;
+	color: var(--text-primary);
+}
+
+.token-symbol {
+	font-size: 0.85rem;
+	color: var(--text-secondary);
+}
+
+/* Token Standard Badges */
+.token-standard-badge {
+	display: inline-block;
+	padding: 4px 10px;
+	border-radius: 4px;
+	font-size: 0.8rem;
+	font-weight: 600;
+	text-transform: uppercase;
+}
+
+.token-standard-erc20 {
+	background: var(--color-info-alpha-10);
+	color: var(--color-info);
+}
+
+.token-standard-erc721 {
+	background: var(--color-accent-alpha-10);
+	color: var(--color-accent);
+}
+
+.token-standard-erc1155 {
+	background: rgba(236, 72, 153, 0.1);
+	color: #ec4899;
+}
+
+/* ERC1155 Token Detail Page */
+.erc1155-header {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.erc1155-header-title {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 8px;
+}
+
+.erc1155-token-name {
+	font-size: 1.25rem;
+	font-weight: 600;
+	color: var(--text-primary);
+}
+
+.erc1155-detail-content {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 16px;
+}
+
+.erc1155-main-section {
+	display: flex;
+	gap: 24px;
+	flex-wrap: wrap;
+}
+
+.erc1155-image-container {
+	flex-shrink: 0;
+	width: 300px;
+	max-width: 100%;
+}
+
+.erc1155-token-image {
+	width: 100%;
+	height: auto;
+	border-radius: 12px;
+	object-fit: cover;
+	background: rgba(0, 0, 0, 0.1);
+}
+
+.erc1155-main-section .tx-details {
+	flex: 1;
+	min-width: 300px;
+}
+
+/* Attributes Grid */
+.erc1155-attributes-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+	gap: 12px;
+	padding: 16px;
+}
+
+.erc1155-attribute-card {
+	display: flex;
+	flex-direction: column;
+	padding: 12px;
+	background: rgba(236, 72, 153, 0.05);
+	border: 1px solid rgba(236, 72, 153, 0.2);
+	border-radius: 8px;
+	text-align: center;
+}
+
+.erc1155-attribute-type {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: #ec4899;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	margin-bottom: 4px;
+}
+
+.erc1155-attribute-value {
+	font-size: 0.9rem;
+	font-weight: 500;
+	color: var(--text-primary);
+	word-break: break-word;
+}
+
+/* Balance Lookup */
+.erc1155-balance-lookup {
+	padding: 16px;
+}
+
+.erc1155-balance-input-row {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+
+.erc1155-balance-input {
+	flex: 1;
+	min-width: 250px;
+	padding: 10px 14px;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-family: monospace;
+	background: var(--bg-color, #fff);
+	color: var(--text-primary);
+}
+
+.erc1155-balance-input:focus {
+	outline: none;
+	border-color: #ec4899;
+	box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.1);
+}
+
+.erc1155-balance-button {
+	padding: 10px 20px;
+	background: #ec4899;
+	color: white;
+	border: none;
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.2s;
+}
+
+.erc1155-balance-button:hover {
+	background: #db2777;
+}
+
+.erc1155-balance-button:disabled {
+	background: var(--text-tertiary);
+	cursor: not-allowed;
+}
+
+.erc1155-balance-error {
+	margin-top: 12px;
+	padding: 8px 12px;
+	background: var(--color-error-alpha-10);
+	color: var(--color-error);
+	border-radius: 6px;
+	font-size: 0.85rem;
+}
+
+.erc1155-balance-result {
+	margin-top: 12px;
+	padding: 12px 16px;
+	background: var(--color-primary-alpha-10);
+	border-radius: 6px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.erc1155-balance-label {
+	font-size: 0.9rem;
+	color: var(--text-secondary);
+}
+
+.erc1155-balance-value {
+	font-size: 1.1rem;
+	font-weight: 600;
+	color: var(--color-primary);
+	font-family: monospace;
+}
+
+/* Token ID Input for ERC1155 Contract Page */
+.erc1155-token-lookup {
+	padding: 16px;
+}
+
+.erc1155-token-lookup-row {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+
+.erc1155-token-input {
+	flex: 1;
+	min-width: 150px;
+	max-width: 300px;
+	padding: 10px 14px;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-family: monospace;
+	background: var(--bg-color, #fff);
+	color: var(--text-primary);
+}
+
+.erc1155-token-input:focus {
+	outline: none;
+	border-color: #ec4899;
+	box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.1);
+}
+
+.erc1155-view-button {
+	padding: 10px 20px;
+	background: #ec4899;
+	color: white;
+	border: none;
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.2s;
+	text-decoration: none;
+	display: inline-flex;
+	align-items: center;
+}
+
+.erc1155-view-button:hover {
+	background: #db2777;
+}
+
+.erc1155-view-button.disabled {
+	background: var(--text-tertiary);
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+/* ERC721 Token Detail Page */
+.erc721-header {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.erc721-header-title {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 8px;
+}
+
+.erc721-token-name {
+	font-size: 1.25rem;
+	font-weight: 600;
+	color: var(--text-primary);
+}
+
+.erc721-detail-content {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 16px;
+}
+
+.erc721-main-section {
+	display: flex;
+	gap: 24px;
+	flex-wrap: wrap;
+}
+
+.erc721-image-container {
+	flex-shrink: 0;
+	width: 300px;
+	max-width: 100%;
+}
+
+.erc721-token-image {
+	width: 100%;
+	height: auto;
+	border-radius: 12px;
+	object-fit: cover;
+	background: rgba(0, 0, 0, 0.1);
+}
+
+.erc721-main-section .tx-details {
+	flex: 1;
+	min-width: 300px;
+}
+
+/* ERC721 Attributes Grid */
+.erc721-attributes-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+	gap: 12px;
+	padding: 16px;
+}
+
+.erc721-attribute-card {
+	display: flex;
+	flex-direction: column;
+	padding: 12px;
+	background: var(--color-accent-alpha-4);
+	border: 1px solid var(--color-accent-alpha-20);
+	border-radius: 8px;
+	text-align: center;
+}
+
+.erc721-attribute-type {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--color-accent);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	margin-bottom: 4px;
+}
+
+.erc721-attribute-value {
+	font-size: 0.9rem;
+	font-weight: 500;
+	color: var(--text-primary);
+	word-break: break-word;
+}
+
+/* ERC721 Token ID Input for Contract Page */
+.erc721-token-lookup {
+	padding: 16px;
+}
+
+.erc721-token-lookup-row {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+
+.erc721-token-input {
+	flex: 1;
+	min-width: 150px;
+	max-width: 300px;
+	padding: 10px 14px;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-family: monospace;
+	background: var(--bg-color, #fff);
+	color: var(--text-primary);
+}
+
+.erc721-token-input:focus {
+	outline: none;
+	border-color: var(--color-accent);
+	box-shadow: 0 0 0 2px var(--color-accent-alpha-10);
+}
+
+.erc721-view-button {
+	padding: 10px 20px;
+	background: var(--color-accent);
+	color: white;
+	border: none;
+	border-radius: 6px;
+	font-size: 0.9rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.2s;
+	text-decoration: none;
+	display: inline-flex;
+	align-items: center;
+}
+
+.erc721-view-button:hover {
+	background: var(--color-accent-muted);
+}
+
+.erc721-view-button.disabled {
+	background: var(--text-tertiary);
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+/* NFT Transfer History Table */
+.nft-transfers-table-container {
+	overflow-x: auto;
+	padding: 0 16px 16px;
+}
+
+.nft-transfers-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.875rem;
+}
+
+.nft-transfers-table th {
+	text-align: left;
+	padding: 12px 8px;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	font-weight: 600;
+	color: var(--text-secondary);
+	white-space: nowrap;
+}
+
+.nft-transfers-table td {
+	padding: 12px 8px;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+	vertical-align: middle;
+}
+
+.nft-transfers-table tbody tr:hover {
+	background: rgba(0, 0, 0, 0.02);
+}
+
+.nft-transfers-loading {
+	padding: 24px 16px;
+	text-align: center;
+}
+
+.nft-transfers-empty {
+	padding: 24px 16px;
+	text-align: center;
+	color: var(--text-secondary);
+	font-style: italic;
+}
+
+.nft-transfers-more {
+	padding: 12px 16px;
+	text-align: center;
+	color: var(--text-secondary);
+	font-size: 0.85rem;
+	border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* NFT Action Badges */
+.nft-action-badge {
+	display: inline-block;
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+}
+
+.nft-action-transfer {
+	background: var(--color-info-alpha-10);
+	color: var(--color-info);
+}
+
+.nft-action-mint {
+	background: var(--color-primary-alpha-10);
+	color: var(--color-primary);
+}
+
+.nft-action-burn {
+	background: var(--color-error-alpha-10);
+	color: var(--color-error);
+}
+
+/* Null Address styling */
+.null-address {
+	color: var(--text-secondary);
+	font-style: italic;
+}
+
+/* Section count badge */
+.tx-section-count {
+	margin-left: 8px;
+	padding: 2px 8px;
+	background: rgba(0, 0, 0, 0.05);
+	border-radius: 12px;
+	font-size: 0.75rem;
+	font-weight: 500;
+	color: var(--text-secondary);
+}
+
+/* NFT Collection Link */
+.nft-collection-link {
+	display: inline-block;
+	font-size: 1.1rem;
+	font-weight: 600;
+	color: var(--primary-color, var(--color-info));
+	text-decoration: none;
+}
+
+.nft-collection-link:hover {
+	text-decoration: underline;
+}
+
+.nft-collection-symbol {
+	margin-left: 6px;
+	font-weight: 400;
+	color: var(--text-secondary);
+}
+
+/* NFT Description */
+.nft-description {
+	padding: 12px 16px;
+	line-height: 1.6;
+	color: var(--text-primary, #1f2937);
+	white-space: pre-wrap;
+}
+
+/* NFT Links Section */
+.nft-links {
+	padding: 12px 16px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+}
+
+.nft-link-button {
+	display: inline-flex;
+	align-items: center;
+	padding: 8px 16px;
+	background: var(--color-info-alpha-10);
+	color: var(--color-info);
+	border-radius: 6px;
+	text-decoration: none;
+	font-size: 0.9rem;
+	font-weight: 500;
+	transition: background 0.2s ease;
+}
+
+.nft-link-button:hover {
+	background: var(--color-info-alpha-20);
+}
+
+/* NFT Token URI Section */
+.nft-token-uri {
+	padding: 12px 16px;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.nft-token-uri-code {
+	flex: 1;
+	padding: 12px;
+	background: rgba(0, 0, 0, 0.03);
+	border-radius: 6px;
+	font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
+	font-size: 0.85rem;
+	line-height: 1.5;
+	word-break: break-all;
+	white-space: pre-wrap;
+	color: var(--text-primary, #1f2937);
+	overflow-x: auto;
+	max-height: 200px;
+	overflow-y: auto;
+}
+
+.nft-token-uri-link {
+	flex-shrink: 0;
+}
+
+/* Extra Data Display */
+.extra-data-display {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
+.extra-data-value {
+	word-break: break-word;
+}
+
+.extra-data-decoded {
+	color: var(--color-primary-muted);
+	font-weight: 500;
+}
+
+.extra-data-toggle {
+	padding: 2px 8px;
+	font-size: 0.75rem;
+	font-family: "Outfit", sans-serif;
+	font-weight: 500;
+	background: var(--color-primary-alpha-10);
+	color: var(--color-primary);
+	border: 1px solid var(--color-primary-alpha-20);
+	border-radius: 4px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	flex-shrink: 0;
+}
+
+.extra-data-toggle:hover {
+	background: var(--color-primary-alpha-20);
+}
+
+/* ENS Records Display */
+.ens-notice-warning {
+	padding: 12px 16px;
+	background: rgba(245, 158, 11, 0.1);
+	border-radius: 6px;
+	font-size: 0.85rem;
+	color: #f59e0b;
+}
+
+.ens-loading {
+	padding: 12px 16px;
+	color: rgba(255, 255, 255, 0.6);
+	font-size: 0.85rem;
+}
+
+.ens-name-wrapper {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.ens-name {
+	font-weight: 600;
+	color: #10b981;
+	font-family: monospace;
+}
+
+.ens-badge {
+	font-size: 0.75rem;
+	padding: 2px 6px;
+	border-radius: 4px;
+}
+
+.ens-badge--verified {
+	background: rgba(16, 185, 129, 0.15);
+	color: #10b981;
+}
+
+.ens-badge--unverified {
+	background: rgba(245, 158, 11, 0.15);
+	color: #f59e0b;
+}
+
+.ens-badge--contenthash {
+	background: rgba(139, 92, 246, 0.15);
+	color: #8b5cf6;
+	text-transform: uppercase;
+}
+
+.ens-avatar {
+	width: 48px;
+	height: 48px;
+	border-radius: 8px;
+	object-fit: cover;
+}
+
+.ens-text-records-wrapper {
+	margin-left: 16px;
+	border-left: 2px solid rgba(255, 255, 255, 0.1);
+	padding-left: 16px;
+}
+
+.ens-app-link {
+	color: #10b981;
+	text-decoration: none;
+	font-weight: 600;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.ens-app-link:hover {
+	text-decoration: underline;
 }
 
diff --git a/src/styles/devtools.css b/src/styles/devtools.css
index 0cb29ab..4b46222 100644
--- a/src/styles/devtools.css
+++ b/src/styles/devtools.css
@@ -1,7 +1,9 @@
 /* DevTools Specific Styles */
 
 /* ================================================
-   Layout Classes
+   Layout Classes - DevTools Specific
+   Note: These classes mirror base utilities for backward compatibility.
+   Consider using base utilities (flex-column, gap-2, etc.) for new code.
    ================================================ */
 
 .devtools-container {
@@ -9,8 +11,6 @@
 }
 
 .devtools-content-wrapper {
-	max-width: 1360px;
-	margin: 0 auto;
 	width: 100%;
 }
 
@@ -18,79 +18,43 @@
 	padding: 20px 0;
 }
 
-.devtools-flex-column {
-	display: flex;
-	flex-direction: column;
-}
-
+/* Flex utilities - consolidated with base system */
+.devtools-flex-column,
 .devtools-flex-row {
 	display: flex;
-	flex-direction: row;
-}
-
-.devtools-gap-4 {
-	gap: 4px;
-}
-
-.devtools-gap-8 {
-	gap: 8px;
-}
-
-.devtools-gap-10 {
-	gap: 10px;
-}
-
-.devtools-gap-12 {
-	gap: 12px;
-}
-
-.devtools-gap-16 {
-	gap: 16px;
-}
-
-.devtools-align-center {
-	align-items: center;
-}
-
-.devtools-align-end {
-	align-items: flex-end;
 }
 
-.devtools-justify-center {
-	justify-content: center;
-}
-
-.devtools-justify-between {
-	justify-content: space-between;
+.devtools-flex-column {
+	flex-direction: column;
 }
 
-.devtools-flex-wrap {
-	flex-wrap: wrap;
+.devtools-flex-row {
+	flex-direction: row;
 }
 
-.devtools-flex-1 {
-	flex: 1;
-}
+/* Gap utilities - maps to: 4px, 8px, 10px, 12px, 16px */
+.devtools-gap-4 { gap: 4px; }
+.devtools-gap-8 { gap: 8px; }
+.devtools-gap-10 { gap: 10px; }
+.devtools-gap-12 { gap: 12px; }
+.devtools-gap-16 { gap: 16px; }
 
-.devtools-width-220 {
-	width: 220px;
-}
+/* Alignment utilities */
+.devtools-align-center { align-items: center; }
+.devtools-align-end { align-items: flex-end; }
+.devtools-justify-center { justify-content: center; }
+.devtools-justify-between { justify-content: space-between; }
+.devtools-flex-wrap { flex-wrap: wrap; }
+.devtools-flex-1 { flex: 1; }
 
-.devtools-margin-top-8 {
-	margin-top: 8px;
-}
+/* Sizing utilities */
+.devtools-width-220 { width: 220px; }
 
-.devtools-margin-top-12 {
-	margin-top: 12px;
-}
-
-.devtools-margin-left-8 {
-	margin-left: 8px;
-}
-
-.devtools-margin-right-8 {
-	margin-right: 8px;
-}
+/* Margin utilities */
+.devtools-margin-top-8 { margin-top: 8px; }
+.devtools-margin-top-12 { margin-top: 12px; }
+.devtools-margin-left-8 { margin-left: 8px; }
+.devtools-margin-right-8 { margin-right: 8px; }
 
 /* ================================================
    Transaction Builder Section
@@ -155,9 +119,9 @@
 }
 
 .tx-revert-warning {
-	background-color: rgba(245, 158, 11, 0.1);
-	border-color: #f59e0b;
-	color: #f59e0b;
+	background-color: var(--color-warning-alpha-10);
+	border-color: var(--color-warning);
+	color: var(--color-warning);
 }
 
 .tx-revert-warning-text {
@@ -167,7 +131,7 @@
 }
 
 .tx-fallback-estimate {
-	color: #f59e0b;
+	color: var(--color-warning);
 	margin-left: 8px;
 }
 
@@ -185,42 +149,6 @@
 	resize: vertical;
 }
 
-.sig-results {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.sig-result-row {
-	display: flex;
-	gap: 12px;
-	align-items: flex-start;
-}
-
-.sig-result-label {
-	font-weight: 600;
-	color: #6b7280;
-	min-width: 140px;
-	flex-shrink: 0;
-}
-
-.sig-result-value {
-	flex: 1;
-	word-break: break-all;
-}
-
-.sig-components {
-	margin-top: 12px;
-	padding-top: 12px;
-	border-top: 1px solid rgba(16, 185, 129, 0.15);
-}
-
-.sig-component-title {
-	font-weight: 600;
-	color: #10b981;
-	margin-bottom: 8px;
-}
-
 /* ================================================
    EIP-712 Section
    ================================================ */
@@ -279,69 +207,6 @@
 	gap: 6px;
 }
 
-.keccak-input-row {
-	display: flex;
-	gap: 12px;
-	align-items: center;
-}
-
-.keccak-type-select {
-	width: auto;
-	min-width: 120px;
-	flex-shrink: 0;
-}
-
-.keccak-results {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-}
-
-.keccak-result-item {
-	padding: 12px;
-	background: rgba(16, 185, 129, 0.04);
-	border-radius: 8px;
-	border: 1px solid rgba(16, 185, 129, 0.15);
-}
-
-.keccak-result-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 8px;
-}
-
-.keccak-result-label {
-	font-weight: 600;
-	color: #6b7280;
-	font-size: 0.85rem;
-}
-
-.keccak-result-value {
-	font-family: "JetBrains Mono", monospace;
-	font-size: 0.85rem;
-	word-break: break-all;
-	color: #1f2937;
-}
-
-.keccak-selector {
-	background: rgba(16, 185, 129, 0.08);
-	border-color: rgba(16, 185, 129, 0.3);
-}
-
-.keccak-selector-value {
-	color: #059669;
-	font-weight: 600;
-}
-
-.keccak-error {
-	background: rgba(239, 68, 68, 0.1);
-	color: #ef4444;
-	padding: 12px;
-	border-radius: 8px;
-	font-weight: 500;
-}
-
 /* ================================================
    Utils Section - Hex Encoder
    ================================================ */
@@ -374,14 +239,14 @@
 
 .devtools-results {
 	padding: 16px;
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	border-radius: 10px;
-	border: 1px solid rgba(16, 185, 129, 0.15);
+	border: 1px solid var(--color-primary-alpha-15);
 	margin-top: 12px;
 }
 
 .devtools-results-link {
-	color: #10b981;
+	color: var(--color-primary);
 	text-decoration: none;
 }
 
@@ -400,10 +265,10 @@
 
 .devtools-mode-btn {
 	padding: 8px 16px;
-	background: rgba(16, 185, 129, 0.1);
-	border: 1px solid rgba(16, 185, 129, 0.3);
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-30);
 	border-radius: 8px;
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	font-size: 0.85rem;
 	cursor: pointer;
@@ -411,11 +276,11 @@
 }
 
 .devtools-mode-btn:hover {
-	background: rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-20);
 }
 
 .devtools-mode-btn.active {
-	background: #10b981;
+	background: var(--color-primary);
 	color: white;
 }
 
@@ -424,17 +289,17 @@
    ================================================ */
 
 .devtools-button-primary {
-	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
 }
 
 .devtools-button-secondary {
-	background: rgba(16, 185, 129, 0.15);
-	color: #10b981;
+	background: var(--color-primary-alpha-15);
+	color: var(--color-primary);
 	box-shadow: none;
 }
 
 .devtools-button-secondary:hover {
-	background: rgba(16, 185, 129, 0.25);
+	background: var(--color-primary-alpha-20);
 }
 
 /* ================================================
@@ -445,9 +310,9 @@
 	display: flex;
 	gap: 8px;
 	padding: 4px;
-	background: rgba(16, 185, 129, 0.05);
+	background: var(--color-primary-alpha-6);
 	border-radius: 12px;
-	border: 1px solid rgba(16, 185, 129, 0.1);
+	border: 1px solid var(--color-primary-alpha-10);
 }
 
 .devtools-tab {
@@ -455,7 +320,7 @@
 	padding: 10px 20px;
 	border: none;
 	border-radius: 8px;
-	color: white;
+	color: var(--text-primary);
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
 	font-size: 0.9rem;
@@ -465,14 +330,14 @@
 }
 
 .devtools-tab:hover {
-	background: rgba(16, 185, 129, 0.1);
-	color: #10b981;
+	background: var(--color-primary-alpha-10);
+	color: var(--color-primary);
 }
 
 .devtools-tab.active {
-	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
 	color: white;
-	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+	box-shadow: 0 2px 8px var(--color-primary-alpha-30);
 }
 
 .devtools-section {
@@ -489,9 +354,9 @@
 	align-items: center;
 	justify-content: center;
 	padding: 60px 24px;
-	background: #ffffff;
+	background: var(--bg-card);
 	border-radius: 16px;
-	border: 2px dashed rgba(16, 185, 129, 0.2);
+	border: 2px dashed var(--color-primary-alpha-20);
 	text-align: center;
 }
 
@@ -503,35 +368,48 @@
 .devtools-coming-soon h3 {
 	font-size: 1.25rem;
 	font-weight: 700;
-	color: #1f2937;
+	color: var(--text-primary);
 	margin: 0 0 8px 0;
 	font-family: "Outfit", sans-serif;
 }
 
 .devtools-coming-soon p {
 	font-size: 0.95rem;
-	color: #9ca3af;
+	color: var(--text-tertiary);
 	margin: 0;
 	font-family: "Outfit", sans-serif;
 }
 
 /* ================================================
    Card & Tool Header
+   Note: devtools-card and dev-section-container share base styles
    ================================================ */
 
-.devtools-card {
-	background: #ffffff;
+/* Shared card base styles */
+.devtools-card,
+.dev-section-container {
+	background: var(--bg-card);
 	border-radius: 16px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-	border: 1px solid rgba(16, 185, 129, 0.1);
+	border: 1px solid var(--color-primary-alpha-10);
 	padding: 24px;
+}
+
+/* devtools-card specific */
+.devtools-card {
+	box-shadow: var(--shadow-sm);
 	margin-bottom: 24px;
 }
 
+/* dev-section-container specific */
+.dev-section-container {
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+	display: block;
+}
+
 .devtools-tool-title {
 	font-size: 1.1rem;
 	font-weight: 700;
-	color: #10b981;
+	color: var(--color-primary);
 	margin: 0;
 	display: flex;
 	align-items: center;
@@ -546,19 +424,19 @@
 }
 
 .devtools-tool-header:hover .devtools-section-toggle {
-	color: #059669;
+	color: var(--color-primary-muted);
 }
 
 .devtools-section-toggle {
 	font-size: 0.9rem;
-	color: #10b981;
+	color: var(--color-primary);
 	transition: color 0.2s ease;
 }
 
 .devtools-tool-title-inline {
 	font-size: 1.1rem;
 	font-weight: 700;
-	color: #10b981;
+	color: var(--color-primary);
 	margin: 0;
 	display: flex;
 	align-items: center;
@@ -572,7 +450,7 @@
 .devtools-input-label {
 	font-size: 0.85rem;
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 	margin-bottom: 6px;
 	display: block;
 }
@@ -580,38 +458,39 @@
 .devtools-input {
 	width: 100%;
 	padding: 10px 12px;
-	border: 2px solid rgba(16, 185, 129, 0.2);
+	border: 2px solid var(--color-primary-alpha-20);
 	border-radius: 8px;
 	font-size: 0.85rem;
 	outline: none;
 	font-family: "JetBrains Mono", monospace;
-	color: #1f2937;
+	color: var(--text-primary);
+	background: var(--input-bg);
 }
 
 .devtools-input:focus {
-	border-color: #10b981;
+	border-color: var(--color-primary);
 }
 
 .devtools-select {
 	width: 100%;
 	padding: 10px 12px;
-	border: 2px solid rgba(16, 185, 129, 0.2);
+	border: 2px solid var(--color-primary-alpha-20);
 	border-radius: 8px;
 	font-size: 0.85rem;
 	outline: none;
 	font-family: "JetBrains Mono", monospace;
-	color: #1f2937;
-	background-color: white;
+	color: var(--text-primary);
+	background-color: var(--input-bg);
 	cursor: pointer;
 }
 
 .devtools-select:focus {
-	border-color: #10b981;
+	border-color: var(--color-primary);
 }
 
 .devtools-select optgroup {
 	font-weight: 600;
-	color: #374151;
+	color: var(--text-secondary);
 }
 
 .devtools-select option {
@@ -621,17 +500,19 @@
 .devtools-textarea {
 	width: 100%;
 	padding: 10px 12px;
-	border: 2px solid rgba(16, 185, 129, 0.2);
+	border: 2px solid var(--color-primary-alpha-20);
 	border-radius: 8px;
 	font-size: 0.85rem;
 	outline: none;
 	font-family: "JetBrains Mono", monospace;
 	min-height: 80px;
 	resize: vertical;
+	color: var(--text-primary);
+	background: var(--input-bg);
 }
 
 .devtools-textarea:focus {
-	border-color: #10b981;
+	border-color: var(--color-primary);
 }
 
 /* ================================================
@@ -641,7 +522,7 @@
 .devtools-btn {
 	flex: 1;
 	padding: 10px;
-	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
 	color: white;
 	border: none;
 	border-radius: 8px;
@@ -661,7 +542,7 @@
 }
 
 .devtools-button {
-	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
 	color: white;
 	border: none;
 	padding: 12px 24px;
@@ -670,13 +551,13 @@
 	font-weight: 600;
 	cursor: pointer;
 	transition: all 0.2s ease;
-	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+	box-shadow: 0 4px 12px var(--color-primary-alpha-30);
 	margin: 0 8px;
 }
 
 .devtools-button:hover {
 	transform: translateY(-1px);
-	box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+	box-shadow: 0 6px 16px var(--color-primary-alpha-40);
 }
 
 .devtools-button:active {
@@ -684,7 +565,7 @@
 }
 
 .devtools-copy-btn {
-	background: #10b981;
+	background: var(--color-primary);
 	color: white;
 	border: none;
 	padding: 4px 8px;
@@ -695,11 +576,11 @@
 }
 
 .devtools-copy-btn:hover {
-	background: #059669;
+	background: var(--color-primary-muted);
 }
 
 .devtools-clear-btn {
-	background: #ef4444;
+	background: var(--color-error);
 	color: white;
 	border: none;
 	padding: 6px 12px;
@@ -710,7 +591,7 @@
 }
 
 .devtools-clear-btn:hover {
-	background: #dc2626;
+	background: var(--color-error-hover);
 }
 
 /* ================================================
@@ -719,9 +600,9 @@
 
 .devtools-result {
 	padding: 12px;
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	border-radius: 8px;
-	border: 1px solid rgba(16, 185, 129, 0.15);
+	border: 1px solid var(--color-primary-alpha-15);
 	font-family: "JetBrains Mono", monospace;
 	font-size: 0.85rem;
 	word-break: break-all;
@@ -736,24 +617,24 @@
 
 .devtools-result-label {
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 }
 
 .devtools-result-value {
 	font-family: "JetBrains Mono", monospace;
 	font-size: 0.85rem;
 	word-break: break-all;
-	color: #1f2937;
+	color: var(--text-primary);
 }
 
 .devtools-results-pre {
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	padding: 16px;
 	border-radius: 10px;
 	font-size: 0.75rem;
 	overflow: auto;
-	border: 1px solid rgba(16, 185, 129, 0.15);
-	color: #1f2937;
+	border: 1px solid var(--color-primary-alpha-15);
+	color: var(--text-primary);
 	font-family: "JetBrains Mono", monospace;
 	line-height: 1.6;
 	max-height: 500px;
@@ -764,7 +645,7 @@
    ================================================ */
 
 .devtools-error {
-	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+	background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error-hover) 100%);
 	color: white;
 	padding: 12px 16px;
 	border-radius: 12px;
@@ -775,7 +656,7 @@
 	gap: 10px;
 	font-weight: 600;
 	font-size: 0.9rem;
-	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+	box-shadow: 0 4px 12px var(--color-error-alpha-30);
 }
 
 .devtools-error-dismiss {
@@ -826,24 +707,24 @@
 .keccak-mode-btn {
 	flex: 1;
 	padding: 8px 16px;
-	background: #f3f4f6;
+	background: var(--bg-tertiary);
 	border: 2px solid transparent;
 	border-radius: 8px;
 	font-size: 0.85rem;
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 	cursor: pointer;
 	transition: all 0.2s ease;
 }
 
 .keccak-mode-btn:hover {
-	background: #e5e7eb;
+	background: var(--bg-secondary);
 }
 
 .keccak-mode-btn.active {
-	background: rgba(16, 185, 129, 0.1);
-	border-color: #10b981;
-	color: #10b981;
+	background: var(--color-primary-alpha-10);
+	border-color: var(--color-primary);
+	color: var(--color-primary);
 }
 
 .keccak-results {
@@ -854,9 +735,9 @@
 
 .keccak-result-item {
 	padding: 12px;
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	border-radius: 8px;
-	border: 1px solid rgba(16, 185, 129, 0.15);
+	border: 1px solid var(--color-primary-alpha-15);
 }
 
 .keccak-result-header {
@@ -869,7 +750,7 @@
 .keccak-result-label {
 	font-size: 0.8rem;
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
 }
@@ -877,32 +758,32 @@
 .keccak-result-value {
 	font-family: "JetBrains Mono", monospace;
 	font-size: 0.85rem;
-	color: #1f2937;
+	color: var(--text-primary);
 	word-break: break-all;
 	line-height: 1.5;
 }
 
 .keccak-selector {
-	background: rgba(99, 102, 241, 0.08);
-	border-color: rgba(99, 102, 241, 0.2);
+	background: var(--color-info-alpha-10);
+	border-color: var(--color-info-alpha-20);
 }
 
 .keccak-selector .keccak-result-label {
-	color: #6366f1;
+	color: var(--color-info);
 }
 
 .keccak-selector-value {
-	color: #6366f1;
+	color: var(--color-info);
 	font-size: 1.1rem;
 	font-weight: 600;
 }
 
 .keccak-error {
 	padding: 12px;
-	background: rgba(239, 68, 68, 0.1);
+	background: var(--color-error-alpha-10);
 	border-radius: 8px;
-	border: 1px solid rgba(239, 68, 68, 0.2);
-	color: #dc2626;
+	border: 1px solid var(--color-error-alpha-20);
+	color: var(--color-error-hover);
 	font-size: 0.85rem;
 	font-weight: 500;
 }
@@ -922,22 +803,22 @@
 	align-items: flex-start;
 	gap: 12px;
 	padding: 8px 12px;
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	border-radius: 6px;
-	border: 1px solid rgba(16, 185, 129, 0.1);
+	border: 1px solid var(--color-primary-alpha-10);
 }
 
 .sig-result-label {
 	font-size: 0.8rem;
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 	min-width: 120px;
 	flex-shrink: 0;
 }
 
 .sig-result-value {
 	font-size: 0.85rem;
-	color: #1f2937;
+	color: var(--text-primary);
 	word-break: break-all;
 	flex: 1;
 }
@@ -948,27 +829,27 @@
 }
 
 .sig-match {
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 }
 
 .sig-no-match {
-	color: #ef4444;
+	color: var(--color-error);
 	font-weight: 600;
 }
 
 .sig-components {
 	margin-top: 8px;
 	padding: 12px;
-	background: rgba(99, 102, 241, 0.04);
+	background: var(--color-info-alpha-4);
 	border-radius: 8px;
-	border: 1px solid rgba(99, 102, 241, 0.15);
+	border: 1px solid var(--color-info-alpha-15);
 }
 
 .sig-component-title {
 	font-size: 0.75rem;
 	font-weight: 700;
-	color: #6366f1;
+	color: var(--color-info);
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
 	margin-bottom: 8px;
@@ -987,7 +868,7 @@
 .input-label {
 	font-size: 0.8rem;
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 }
 
 /* ================================================
@@ -1028,8 +909,8 @@
 }
 
 .sourcify-result-json {
-	background: rgba(16, 185, 129, 0.05);
-	border: 1px solid rgba(16, 185, 129, 0.2);
+	background: var(--color-primary-alpha-6);
+	border: 1px solid var(--color-primary-alpha-20);
 	border-radius: 8px;
 	padding: 16px;
 	overflow-x: auto;
@@ -1040,12 +921,333 @@
 }
 
 .sourcify-similarity-hint {
-	color: #6b7280;
+	color: var(--text-secondary);
 	font-size: 0.9rem;
 	font-style: italic;
 	margin: 0;
 	padding: 12px;
-	background: rgba(16, 185, 129, 0.05);
-	border-left: 3px solid #10b981;
+	background: var(--color-primary-alpha-6);
+	border-left: 3px solid var(--color-primary);
 	border-radius: 4px;
 }
+
+/* ================================================
+   Message Signer Styles
+   ================================================ */
+
+.signer-wallet-status {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px 16px;
+	border-radius: 8px;
+	font-size: 0.85rem;
+	font-weight: 500;
+}
+
+.signer-wallet-status.connected {
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-30);
+	color: var(--color-primary);
+}
+
+.signer-wallet-status.disconnected {
+	background: var(--color-warning-alpha-10);
+	border: 1px solid var(--color-warning-alpha-30);
+	color: var(--color-warning);
+}
+
+.signer-status-indicator {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.signer-status-indicator.connected {
+	background: var(--color-primary);
+	box-shadow: 0 0 8px var(--color-primary-alpha-50);
+}
+
+.signer-status-indicator.disconnected {
+	background: var(--color-warning);
+	box-shadow: 0 0 8px var(--color-warning-alpha-50);
+}
+
+.signer-hint {
+	font-size: 0.8rem;
+	color: var(--text-secondary);
+	margin: 0;
+	padding: 8px 12px;
+	background: var(--overlay-light-5);
+	border-radius: 6px;
+	border-left: 3px solid var(--border-secondary);
+}
+
+.signer-tx-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 12px;
+}
+
+@media (max-width: 768px) {
+	.signer-tx-grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+.signer-result-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 8px;
+}
+
+.signer-signature-value {
+	word-break: break-all;
+	line-height: 1.5;
+	font-size: 0.8rem;
+}
+/* ================================================
+   Development Section (Hardhat Ignition)
+   Note: dev-section-container styles consolidated above with devtools-card
+   ================================================ */
+
+.dev-section-title {
+	font-size: 1.1rem;
+	font-weight: 700;
+	color: var(--color-primary);
+	margin-bottom: 8px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-top: 0;
+}
+
+.dev-section-description {
+	margin-bottom: 20px;
+	color: var(--text-secondary);
+	font-size: 1rem;
+	margin-top: 0;
+}
+
+.dev-dropzone {
+	border: 2px dashed var(--color-primary-alpha-30);
+	border-radius: 12px;
+	padding: 40px;
+	text-align: center;
+	background-color: var(--color-primary-alpha-2);
+	transition: all 0.3s ease;
+	cursor: pointer;
+	margin-bottom: 20px;
+}
+
+.dev-dropzone.dragging {
+	border-color: var(--color-primary);
+	background-color: var(--color-primary-alpha-6);
+}
+
+.dev-dropzone-icon {
+	font-size: 48px;
+	margin-bottom: 12px;
+}
+
+.dev-dropzone-title {
+	margin-bottom: 8px;
+	margin-top: 0;
+	font-size: 0.95rem;
+	font-weight: 600;
+	color: var(--text-primary);
+}
+
+.dev-dropzone-separator {
+	color: var(--text-secondary);
+	margin-bottom: 16px;
+	font-size: 0.85rem;
+	margin-top: 0;
+}
+
+.dev-browse-btn {
+	display: inline-block;
+	padding: 10px 20px;
+	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
+	color: white;
+	border-radius: 8px;
+	cursor: pointer;
+	font-size: 0.85rem;
+	font-weight: 600;
+	border: none;
+}
+
+.dev-section-subtitle {
+	margin: 0;
+	font-size: 0.95rem;
+	font-weight: 600;
+	color: var(--text-primary);
+}
+
+.dev-clear-btn {
+	padding: 6px 12px;
+	background: var(--color-error);
+	color: white;
+	border: none;
+	border-radius: 8px;
+	cursor: pointer;
+	font-size: 0.8rem;
+	font-weight: 600;
+}
+
+.dev-clear-btn:hover {
+	background: var(--color-error-hover);
+}
+
+.dev-file-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.dev-file-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 12px;
+	background-color: var(--color-primary-alpha-2);
+	border: 1px solid var(--color-primary-alpha-15);
+	border-radius: 8px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+
+.dev-file-item-content {
+	flex: 1;
+}
+
+.dev-file-name {
+	font-weight: 600;
+	margin-bottom: 4px;
+	word-break: break-all;
+	font-size: 0.85rem;
+	color: var(--text-primary);
+}
+
+.dev-file-meta {
+	font-size: 0.75rem;
+	color: var(--text-secondary);
+	display: flex;
+	gap: 16px;
+}
+
+.dev-remove-btn {
+	padding: 6px 12px;
+	background: var(--color-error);
+	color: white;
+	border: none;
+	border-radius: 6px;
+	cursor: pointer;
+	font-size: 0.75rem;
+	margin-left: 16px;
+	font-weight: 600;
+}
+
+.dev-remove-btn:hover {
+	background: var(--color-error-hover);
+}
+
+.dev-empty-state {
+	text-align: center;
+	padding: 32px;
+	color: var(--text-secondary);
+	background-color: var(--color-primary-alpha-2);
+	border-radius: 8px;
+	font-size: 0.85rem;
+}
+
+.dev-loading-state {
+	text-align: center;
+	padding: 32px;
+	color: var(--color-primary);
+	background-color: var(--color-primary-alpha-6);
+	border-radius: 8px;
+	margin-top: 20px;
+	border: 1px solid var(--color-primary-alpha-20);
+}
+
+.dev-loading-icon {
+	font-size: 32px;
+	margin-bottom: 12px;
+}
+
+.dev-loading-text {
+	font-size: 0.9rem;
+	font-weight: 600;
+}
+
+.dev-error-state {
+	text-align: center;
+	padding: 20px;
+	color: var(--color-error);
+	background-color: var(--color-error-alpha-4);
+	border-radius: 8px;
+	margin-top: 20px;
+	border: 1px solid var(--color-error-alpha-20);
+}
+
+.dev-error-icon {
+	font-size: 24px;
+	margin-bottom: 8px;
+}
+
+.dev-error-text {
+	font-weight: 600;
+	font-size: 0.9rem;
+}
+
+.dev-json-list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.dev-json-item {
+	padding: 12px;
+	background-color: var(--color-primary-alpha-2);
+	border: 1px solid var(--color-primary-alpha-15);
+	border-radius: 8px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+
+.dev-json-path {
+	font-weight: 600;
+	margin-bottom: 8px;
+	color: var(--color-primary);
+	word-break: break-all;
+	font-size: 0.85rem;
+	cursor: pointer;
+	text-decoration: underline;
+}
+
+.dev-json-path:hover {
+	color: var(--color-primary-hover);
+}
+
+.dev-json-summary {
+	cursor: pointer;
+	padding: 4px 0;
+	color: var(--text-secondary);
+	font-size: 0.8rem;
+	font-weight: 600;
+}
+
+.dev-json-content {
+	background-color: var(--color-primary-alpha-4);
+	padding: 12px;
+	border-radius: 8px;
+	overflow: auto;
+	max-height: 400px;
+	font-size: 0.75rem;
+	margin-top: 8px;
+	border: 1px solid var(--color-primary-alpha-10);
+	color: var(--text-primary);
+	font-family: "JetBrains Mono", monospace;
+	line-height: 1.5;
+}
diff --git a/src/styles/forms.css b/src/styles/forms.css
index e64930a..cba243f 100644
--- a/src/styles/forms.css
+++ b/src/styles/forms.css
@@ -1,4 +1,8 @@
-/* Form and Input Styles */
+/* Form and Input Styles
+   Note: Base form utilities (.input, .select, .textarea, .form-group,
+   .form-label, .form-row, .btn) are defined in base.css.
+   This file contains component-specific form styles.
+*/
 
 /* Search Form - Navbar */
 .search-container {
@@ -19,9 +23,9 @@
 	flex: 1;
 	padding: 8px 16px;
 	border-radius: 8px;
-	border: 1px solid rgba(0, 98, 65, 0.3);
-	background: #1b2537;
-	color: #f1f5f9;
+	border: 1px solid var(--border-primary);
+	background: var(--input-bg);
+	color: var(--input-text);
 	font-family: "Outfit", sans-serif;
 	font-size: 0.9rem;
 	outline: none;
@@ -29,16 +33,16 @@
 }
 
 .search-input:focus {
-	border-color: #10b981;
-	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
 }
 
 .search-button {
 	padding: 8px 16px;
 	border-radius: 8px;
 	border: none;
-	background: #10b981;
-	color: white;
+	background: var(--btn-primary-bg);
+	color: var(--btn-primary-text);
 	font-family: "Outfit", sans-serif;
 	font-weight: 600;
 	font-size: 0.9rem;
@@ -50,20 +54,23 @@
 }
 
 .search-button:hover {
-	background: #059669;
+	background: var(--btn-primary-bg-hover);
 }
 
 .search-button:active {
 	transform: scale(0.98);
 }
 
-/* General Input Styles */
+/* Legacy Input Aliases
+   These map to the base .input, .textarea, .select classes in base.css.
+   Kept for backward compatibility - prefer using base classes directly.
+*/
 .input-primary {
 	padding: 8px 16px;
 	border-radius: 8px;
-	border: 1px solid rgba(0, 98, 65, 0.3);
-	background: #1b2537;
-	color: #f1f5f9;
+	border: 1px solid var(--border-primary);
+	background: var(--input-bg);
+	color: var(--input-text);
 	font-family: "Outfit", sans-serif;
 	font-size: 0.9rem;
 	outline: none;
@@ -71,17 +78,16 @@
 }
 
 .input-primary:focus {
-	border-color: #10b981;
-	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
 }
 
-/* Textarea */
 .textarea-primary {
 	padding: 12px 16px;
 	border-radius: 8px;
-	border: 1px solid rgba(0, 98, 65, 0.3);
-	background: #1b2537;
-	color: #f1f5f9;
+	border: 1px solid var(--border-primary);
+	background: var(--input-bg);
+	color: var(--input-text);
 	font-family: "Outfit", sans-serif;
 	font-size: 0.9rem;
 	outline: none;
@@ -91,17 +97,16 @@
 }
 
 .textarea-primary:focus {
-	border-color: #10b981;
-	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
 }
 
-/* Select/Dropdown */
 .select-primary {
 	padding: 8px 16px;
 	border-radius: 8px;
-	border: 1px solid rgba(0, 98, 65, 0.3);
-	background: #1b2537;
-	color: #f1f5f9;
+	border: 1px solid var(--border-primary);
+	background: var(--input-bg);
+	color: var(--input-text);
 	font-family: "Outfit", sans-serif;
 	font-size: 0.9rem;
 	outline: none;
@@ -110,32 +115,111 @@
 }
 
 .select-primary:focus {
-	border-color: #10b981;
-	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 2px var(--color-primary-alpha-10);
 }
 
-/* Form Labels */
-.form-label {
-	display: block;
+/* Home Page Search Bar */
+.home-search-container {
+	position: relative;
+	width: 100%;
+	max-width: 600px;
+	margin: 6px auto 32px;
+}
+
+.home-search-input {
+	width: 100%;
+	padding: 14px 20px;
+	border-radius: 12px;
+	border: 1px solid var(--border-primary);
+	background: var(--input-bg);
+	color: var(--input-text);
 	font-family: "Outfit", sans-serif;
-	font-size: 0.9rem;
+	font-size: 1rem;
+	outline: none;
+	transition: all 0.2s ease;
+	border-color: var(--color-primary);
+}
+
+.home-search-input::placeholder {
+	color: var(--input-placeholder);
+}
+
+.home-search-input:focus {
+	box-shadow: 0 0 0 4px var(--color-primary-alpha-10);
+}
+
+.home-search-input:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+/* Search error message - shared between navbar and home search */
+.search-error,
+.home-search-error {
+	margin-top: 8px;
+	padding: 8px 12px;
+	border-radius: 8px;
+	background: var(--color-error-alpha-10, rgba(239, 68, 68, 0.1));
+	color: var(--color-error, #ef4444);
+	font-size: 0.85rem;
+}
+
+.home-search-dropdown {
+	position: absolute;
+	top: calc(100% + 8px);
+	left: 0;
+	right: 0;
+	background: var(--bg-card);
+	border: 1px solid var(--border-primary);
+	border-radius: 12px;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+	z-index: 100;
+	overflow: hidden;
+}
+
+.home-search-dropdown-header {
+	padding: 12px 16px;
+	font-size: 0.85rem;
+	color: var(--text-secondary);
+	border-bottom: 1px solid var(--border-primary);
+}
+
+.home-search-term {
+	font-family: monospace;
+	color: var(--color-primary);
 	font-weight: 600;
-	color: #10b981;
-	margin-bottom: 8px;
 }
 
-/* Form Groups */
-.form-group {
-	margin-bottom: 16px;
+.home-search-dropdown-list {
+	max-height: 300px;
+	overflow-y: auto;
 }
 
-/* Form Row */
-.form-row {
+.home-search-dropdown-item {
 	display: flex;
-	gap: 16px;
-	margin-bottom: 16px;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	padding: 12px 16px;
+	border: none;
+	background: transparent;
+	color: var(--text-primary);
+	font-family: "Outfit", sans-serif;
+	font-size: 0.95rem;
+	cursor: pointer;
+	transition: all 0.15s ease;
+	text-align: left;
 }
 
-.form-row > * {
-	flex: 1;
+.home-search-dropdown-item:hover {
+	background: var(--color-primary-alpha-10);
+}
+
+.home-search-dropdown-item:hover .home-search-network-name {
+	color: var(--network-color, var(--color-primary));
+}
+
+.home-search-network-name {
+	transition: color 0.15s ease;
 }
diff --git a/src/styles/layouts.css b/src/styles/layouts.css
index b28fc4e..781fd04 100644
--- a/src/styles/layouts.css
+++ b/src/styles/layouts.css
@@ -1,4 +1,11 @@
-/* Layout Utilities */
+/* Layout Utilities
+   Note: Base flex utilities (.flex-center, .flex-between, .flex-column, etc.)
+   are defined in base.css. This file contains:
+   - Grid layouts
+   - Semantic spacing (small/medium/large)
+   - Container widths
+   - Responsive utilities
+*/
 
 /* Grid Layouts */
 .data-grid-2 {
@@ -15,6 +22,21 @@
 	margin-bottom: 16px;
 }
 
+/* Centered grid variants - use flexbox to center incomplete rows */
+.data-grid-3-centered {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 12px;
+	margin-bottom: 16px;
+}
+
+.data-grid-3-centered > * {
+	flex: 0 1 calc(33.333% - 8px);
+	min-width: 250px;
+	max-width: 350px;
+}
+
 .unit-converter-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -37,7 +59,7 @@
 .unit-converter-label {
 	font-size: 0.85rem;
 	font-weight: 600;
-	color: #6b7280;
+	color: var(--text-secondary);
 	min-width: 110px;
 	flex-shrink: 0;
 }
@@ -61,18 +83,11 @@
 	width: 100%;
 }
 
-/* Flex Utilities */
-.flex-center {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.flex-between {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
+/* Additional Flex Utilities
+   Note: Base flex utilities (.flex, .flex-center, .flex-between, .flex-column,
+   .items-center, .justify-between, etc.) are defined in base.css.
+   These are additional semantic variants.
+*/
 
 .flex-start {
 	display: flex;
@@ -80,11 +95,6 @@
 	align-items: center;
 }
 
-.flex-column {
-	display: flex;
-	flex-direction: column;
-}
-
 .flex-column-gap {
 	display: flex;
 	flex-direction: column;
@@ -185,7 +195,7 @@
 .subtitle {
 	font-family: "Outfit", sans-serif;
 	font-size: 1.1rem;
-	color: #0da978ff;
+	color: var(--color-primary);
 	text-align: center;
 	margin-top: 0px;
 	margin-bottom: 16px;
@@ -202,4 +212,56 @@
 	.data-grid-auto {
 		grid-template-columns: 1fr;
 	}
+
+	.data-grid-3-centered > * {
+		flex: 0 1 100%;
+		max-width: 100%;
+  }
+  
+	.container-wide {
+		padding: 0 16px;
+	}
+
+	.container-medium {
+		padding: 0 16px;
+	}
+
+	/* Stack form rows on mobile */
+	.form-row {
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	/* Reduce spacing on mobile */
+	.mt-large {
+		margin-top: 16px;
+	}
+
+	.mb-large {
+		margin-bottom: 16px;
+	}
+
+	.p-large {
+		padding: 16px;
+	}
+}
+
+@media (max-width: 480px) {
+	.container-wide,
+	.container-medium {
+		padding: 0 12px;
+	}
+
+	/* Further reduce spacing on small screens */
+	.mt-medium {
+		margin-top: 12px;
+	}
+
+	.mb-medium {
+		margin-bottom: 12px;
+	}
+
+	.p-medium {
+		padding: 12px;
+	}
 }
diff --git a/src/styles/rainbowkit.css b/src/styles/rainbowkit.css
deleted file mode 100644
index a3088d8..0000000
--- a/src/styles/rainbowkit.css
+++ /dev/null
@@ -1,2193 +0,0 @@
-/* vanilla-extract-css-ns:src/css/reset.css.ts.vanilla.css?source=Lmlla2JjYzAgewogIGJvcmRlcjogMDsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGZvbnQtc2l6ZTogMTAwJTsKICBsaW5lLWhlaWdodDogbm9ybWFsOwogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwogIHRleHQtYWxpZ246IGxlZnQ7CiAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmlla2JjYzEgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KLmlla2JjYzIgewogIHF1b3Rlczogbm9uZTsKfQouaWVrYmNjMjpiZWZvcmUsIC5pZWtiY2MyOmFmdGVyIHsKICBjb250ZW50OiAnJzsKfQouaWVrYmNjMyB7CiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTsKICBib3JkZXItc3BhY2luZzogMDsKfQouaWVrYmNjNCB7CiAgYXBwZWFyYW5jZTogbm9uZTsKfQouaWVrYmNjNSB7CiAgb3V0bGluZTogbm9uZTsKfQouaWVrYmNjNTo6cGxhY2Vob2xkZXIgewogIG9wYWNpdHk6IDE7Cn0KLmlla2JjYzYgewogIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OwogIGNvbG9yOiBpbmhlcml0Owp9Ci5pZWtiY2M3OmRpc2FibGVkIHsKICBvcGFjaXR5OiAxOwp9Ci5pZWtiY2M3OjotbXMtZXhwYW5kIHsKICBkaXNwbGF5OiBub25lOwp9Ci5pZWtiY2M4OjotbXMtY2xlYXIgewogIGRpc3BsYXk6IG5vbmU7Cn0KLmlla2JjYzg6Oi13ZWJraXQtc2VhcmNoLWNhbmNlbC1idXR0b24gewogIC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZTsKfQouaWVrYmNjOSB7CiAgYmFja2dyb3VuZDogbm9uZTsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdGV4dC1hbGlnbjogbGVmdDsKfQouaWVrYmNjYSB7CiAgY29sb3I6IGluaGVyaXQ7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwp9 */
-[data-rk] .iekbcc0 {
-	border: 0;
-	box-sizing: border-box;
-	font-size: 100%;
-	line-height: normal;
-	margin: 0;
-	padding: 0;
-	text-align: left;
-	vertical-align: baseline;
-	-webkit-tap-highlight-color: transparent;
-}
-[data-rk] .iekbcc1 {
-	list-style: none;
-}
-[data-rk] .iekbcc2 {
-	quotes: none;
-}
-[data-rk] .iekbcc2:before,
-[data-rk] .iekbcc2:after {
-	content: "";
-}
-[data-rk] .iekbcc3 {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-[data-rk] .iekbcc4 {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-}
-[data-rk] .iekbcc5 {
-	outline: none;
-}
-[data-rk] .iekbcc5::-moz-placeholder {
-	opacity: 1;
-}
-[data-rk] .iekbcc5::placeholder {
-	opacity: 1;
-}
-[data-rk] .iekbcc6 {
-	background-color: transparent;
-	color: inherit;
-}
-[data-rk] .iekbcc7:disabled {
-	opacity: 1;
-}
-[data-rk] .iekbcc7::-ms-expand {
-	display: none;
-}
-[data-rk] .iekbcc8::-ms-clear {
-	display: none;
-}
-[data-rk] .iekbcc8::-webkit-search-cancel-button {
-	-webkit-appearance: none;
-}
-[data-rk] .iekbcc9 {
-	background: none;
-	cursor: pointer;
-	text-align: left;
-}
-[data-rk] .iekbcca {
-	color: inherit;
-	text-decoration: none;
-}
-
-/* vanilla-extract-css-ns:src/css/sprinkles.css.ts.vanilla.css?source=#H4sIAAAAAAAAE6Vdy67rxhHc+yu0CWAvZOhJPbJJrp0gBhJkEQNZU+SQ4hFF6pDU6wT+90DiebCre2aavDtbXV3TNdMcFTm8Rz+/nOfB6jIZ/e+H0SjMs7QYZ4051ttRkpvbuG7CqvnzD3/88HOLm1lwpog7qAVHRaZoTNXBBE9MnNWnPLxvR0VZmE50TaO7vIwOnXBIw48SOtGIRrMizwi56ZRXmzyxaE1kGJWaMhBTun9CdmF0SKvyXMTjOnsz21FUXggsa2FlFZtqXIVxdq63o+mpK+xFggQEchBZJgSTi5g5wRwlzCWsfhyPq8Pzg2wcRk1WFt/OTVMWP3VyC0VuVBaFiRqeXCqSj6Y488yTJrOMw7yb9KpN+le5y3LTTa2k1NnyTx1ILUE2m82GzHXTRdXNPTfbUV3mWbfPzl3MNYub/XZEV/UiIGj7XAXEjCBuAmJBEPcnIjpXdVltR6cyg2Z/I3G4qqftNvOeNTYXUzQ1R01FVJjnXVC7Ex2zYrw3WbpvtqM1KXQ6Z4AFlTJtt6nnRR1nlXl283ZUldcuaCmCojI/H4surt3PkrJoxkl4zPJ7p40en9bjXRnfu/0zXX2ltFvC9Lkao9Fjv/qsegq61ixrrsjasKyFIitkWYGQNaONON2xrLWUBasRYVZL68mKWZY0GzN6wU3NV9b1ozkmky4i4YglRaQcEVDEniNWFJFxxJoi2i0/DU/bEfn88PU5vcin+VeEXtzT41eEbvbT4isC81t+RZY0cvqK0K+g6etXBPqp6lQNTVN3QlB30wlBeedOCKq4dEJQxrUzRVDGrROCse6dEBC+dWaWFj+bdEK0wtm0M+t0rNmsM7kQmn+FxnTpZ+2G9nkx0+CSBKHKgARhxBUJUumzNR0TeDd0UDrZs5BGYdgdjcK4EYnOgTmmUajK0CiMm9AoLFpKZwrG3dMoMGc0CopeSHQJuQcSDWDcHOYZwke6SJNJ16TMChI9hreHO2tMQYx/uxG8nOsmS+4fANtdwskBpv559ipDmYueVTKwPoWRGe9MczWm+4U8q1348OnEu/B2k2nMrRk/3fx2lJuEiDozBC/ywjBZsTdVRoja7ecYVmlWjHdl05RHurvPbhICrue7hIFGf5MwdO+fTyQMbb75VMLQ74P5TMLQi2c+lzD0MpgvRO20oedLEUTVzwMRBNJWIgjqXosgKHwjLggUHoogqGkngmC4SFxbmIJYBIE6I3YA1JSIywugVALBt9R83wU9LjLa/POMx4HhhSNA94EjoO1zjgAxR46Ali84Aqa25AhYxpOgFnrmVYCA3kqAgJxagEC1jQCBcs/C1EO5FwECtVwFCAx0E1YQRN8FCCh6E1aZ1rKYCIsIkCmHQFMvyO5Xtd+k3a5ezAUAcCwECJW8WAoQ2tiLQICAnpUAoa29WAsQOreLjQChi7gIJdG0XRY7CQOyIwkDomIJAyUbCQM1J9IqQM2phIF69hIGxsqk5QTtLxIGdB2kNYd6cmlFAXMUMNjpZNNrSrgxXZQsDPknBgDBrwwAHV4xAMioGQC6u2EAmNAzA8DKXbhM6JErR4DQG0eAkDtHQKFvHEErXU74fNNKl1OOoHUsZxwBo8z5olG1ywVHUC3LJV9XqCPg6waIFUNA/y4/drab/JB0ucE46AgxDhXsMA4zFbHxYYCYFQDrZRgASkgYAGpIEQD3z8s9A0CRGQNADS8MAKt9YPMINeQMAEMcGQBkFgiAm+pliQC4r16e+FoA4pUtJ727XlYIkG+wl++bVlZY+rLBOKzIGeOg9YJxmKwrGx8GuLECYCruDAAlvDEArSGYIAD6MpgyAC0ymDEArSGYMwDty2DB5hFqWDIADBEwAMhcIQD6MlgjAPoy2PC1AETIlpP2ZbBDgNyXQbtfPQ4rk7y8bkf7LI7Jk5ag3bBOYRxnRSo+0AiMCKEdHiQiCBY4FUHUIQR7EQSTnIkg6hSCFxEELXMQQbDouTwFsGxHGQWTUMgoEFjKKCj+JKOg+ld5baD6SkZBXbWMghEbeaFhJs4yCjRe5H6Auq7yWgPqJqLAZQR3guJPOYI3AUA5VhMBQuWvpgKEXgurmQChklZzAUKvg9VCgNBJXi0FCF3TVSCJpj20WkkYkL2WMCBqI2Gg5FDCQM07aRWg5kjCQD2xhIGxjLScoD2RMKArldYc6tlLKwqYTMBAp6/oDik8+lgdJASw5BIGlB8lDHR7IWFAVSlhoN9PEgZm+VXCwIpWonZon1oEgfpGBIG0swiCui8iCAq/igsChd9EENR0F0Ew3Ju4tnQK1hMRRNWtp2IH0JrWM3F5ATSXQND+a7oxsuch6yWPA0PAEaB7xRG07ddrjgAxG46gLb8OOQKmdscRdBnXkaCW9sw6FiCg1wgQkJMIEKg2FSBQ7l6Yeig3EyBQy4sAgYEOwgqC6FyAgKKjsMpQSyEsIkBKDsGmft/9yjprX3cKd3WZnxvyhuYrYJLsZronqusKAJXJwya7EJJ25xtfze6QNeNz/XgBzuQmavgboe3+J3y/rN8PZquw+Bhq8vN0tqxHJqwJxYUBn/+dlNXRltJug87C2k1QvGlf37sxWPC3boyu0WbSjdFe2kzJeJR0MyMD0l7ezEkQhlyQIIy57AbhpnwTkCAUtCJBGHNNgrTbNxsyPzBmSIJAuyNBkBJ1g3DjvYm7Qbjp3hg6txBNyLLQm+1N2g3KN9qbr/eE46o8jZMsb0zVeYtwl5+run0Z9d8XU+UheZtwk32mt68ZdzKjMi+rehxGjxcWfnn8D8l82e4ft/eD8w/bx5vA769VDyHI+2T+vaxMCyMcx/4iLEzFADkWqlLB8fUO9bfne7eE4KRW5aR51Uty8gwphL84vakHqxLImuHaBLZzL5r/mKgs4rC6f/tMIGyXAUJ9nNchen2kNy9blJe14S/db+5Kibb8N60cC0E46ZMpyw+n/UVYmGYD5Fio5n6O7j+isLAstNIUXEu1OAVZMJTlb1VFvz/C1fdp5ITr7xTKGTf9qH4rClNZJi4cotZFuBuk1sUY9aP63dwakh8PkchYzCBdjCbpn8/XPx2qiFPtB8viXH7T+E6SPRY8zqKwAQatefTxqE2kj8hvJuPyWuRlGH97Prv/JaxiSxtrPaWaUG0t1Yx+h/lB9Xt5cvBojaaOTe03dXT+sgzrbK3H5JlqQ8lT/e4xNYWpwpx761DrFe0Mamdop/D7QJL7a3Yk6Voz6CRRO0IXy85vCx//ivS3xhzlpttpPaGHRm0IPTx+N/h8MvDt/fEBydV6QDuD2vnZKfx+7zNXkK+1eC4OtatzkfiNXJvNrq2d1rfZ8tU2zUbgd2XPTDRAO60bk7PVLkxO97uvzzzcArSey0qgdlpWBr+/+kz9vEUnBFp75aFRuysPj99cnaoyyXLz16dDI7laN2VnUNsnO4XfL5HcfzwqJgRao+ShUTskD4+6EPkJ5U5rk9wsasvkpvHbp/YMxsT/Pj2fbfE9TuuivERqM+Vl8nuqugmLeEevNK2VknLVDkpIjt6NU/s3IJ449YP8iHimQQzULg2imPfLlXsxWgyRYuFaDhJlIQtULK7H+NGqhzYn0bqPMCfTZhAFf4Afhd+hTaDbfY9CgS/qSeR5cB/Fg+T6WM0w1T7aRMFnecwfpWqhNoa9XpSNIuuXa5mGlyFSLFyHQaIsZLmGxf9oPzrqBSrYih4SFXTlcB72/DQ6fa9STvn63XI5Z+8CHQ/3o3qYZhdlM1Czi/PclwxvPaPLMKGM5zpQHSO6DWHg3XAfrouTvX2HOMYWa8yn5wAg1ptQH1MPM+qj0phS7UP/WO9N1ZQ9LKqaU+NUVQcAsd6w6vh6+FYdoca+suOCWO9VeW4PY8qTNS7UekgQ6z2nnaOHw7STaPyk65Ag1ptKJ00PZ+nk0dhL9zFBrPeWHqIextLDpHGV1mODWO8l7Rw9HKSdROMbHQcHsd4qulh6uEMXjb4MftXp/Z+NoYfds1Fo3J14oBDrXZ2c38PNyQQaF2c7UIj13s1K0cOx2TiMxqe5jxKM3qZ5iHq4NA+TxqRZjxaM3pXZOXrYMDuJxne5jxWM3nB5iHo4LQ+TxmI5jxeM3m65eXpYLzeRxob5jheM3o15qXqYMi+XxpsJxw9Gb8mk7B5OTEr/MGC3cb0P48dfO/jMaj+Am1iSTK3XIAowXYM4cn9ynIV5mZKso7Z4IbdQVy0kl/6s94voV9OEWV4LG95JW7yX6VUtxUulKIdeRCS71kpycDRqMQ6Ssz77v2GeG+J1zKWvDIHj2luGQHLzZ1+fWf8s05Jk3rUSLPlv6vJlgqT1WpZdzHIImnTdVc9U4qd65s6VSfIXYrLoVbWFZNmvfgtL4E53HWYmK40MJ8NapcFJsemXy88qk3CIDIFnN0iMQBRpGTwHkUncT5mPzvQU6ONLXESWs8kk9Wuype4V9dtyM2WSRepLr6otJId+9VtYcme6/2QxOSq0KGgKjRoFTzmAgJ3IJKfBojjX63BlnExfkuOUMKl7ynNxNX3lucjOahZ8wJRcempiBNe+QhjDrVcqX9z7AAmc5W2IDkaTOg2Y5+AvVRgxH4XGkPk4nMZMe6KXKvyZmktj09RkTremOsJLFaZNR6Txbjomp4Vjp3qpwq/xJI0541lOJ2Y9sEsVvsuerHFZ9mynp3KdyqUKY+XM17grJ4HTYrkP31KFv/IwaMyVh8LprKwnbqnCT9mTNS7Knu30To6DtVRhl1zpGofkylcMzC8NhQeypWosjy3X6XDEo7NU4WzkRI2jkTOdTsZ2PpYq/Is1V+NabMl7p1dxH3/tFVbFw6BxKh4Kp1GxnnntFc7EnqyxIvZsp/dwH2rtFabDw6BxGx4Kp81wnmDtFZbDTaCxH24GpxXxHVPtFY7Ey6ExJl4Spz8Rzqr2ClsipWncSDfvL0cTZ+GojipjilFYxKMfO38zfBWsT7efnlzvA7R/nc7xW9Kj0R9f6LkV/fyZOIJdStiPn2AjyNU7En5dmmA2iHn/jWkC2iGo/aVpgokR8/F70w/UH/8HNiLX2mB7AAA= */
-[data-rk] .ju367v0 {
-	align-items: flex-start;
-}
-[data-rk] .ju367v2 {
-	align-items: flex-end;
-}
-[data-rk] .ju367v4 {
-	align-items: center;
-}
-[data-rk] .ju367v6 {
-	display: none;
-}
-[data-rk] .ju367v8 {
-	display: block;
-}
-[data-rk] .ju367va {
-	display: flex;
-}
-[data-rk] .ju367vc {
-	display: inline;
-}
-[data-rk] .ju367ve {
-	align-self: flex-start;
-}
-[data-rk] .ju367vf {
-	align-self: flex-end;
-}
-[data-rk] .ju367vg {
-	align-self: center;
-}
-[data-rk] .ju367vh {
-	background-size: cover;
-}
-[data-rk] .ju367vi {
-	border-radius: 1px;
-}
-[data-rk] .ju367vj {
-	border-radius: 6px;
-}
-[data-rk] .ju367vk {
-	border-radius: 10px;
-}
-[data-rk] .ju367vl {
-	border-radius: 13px;
-}
-[data-rk] .ju367vm {
-	border-radius: var(--rk-radii-actionButton);
-}
-[data-rk] .ju367vn {
-	border-radius: var(--rk-radii-connectButton);
-}
-[data-rk] .ju367vo {
-	border-radius: var(--rk-radii-menuButton);
-}
-[data-rk] .ju367vp {
-	border-radius: var(--rk-radii-modal);
-}
-[data-rk] .ju367vq {
-	border-radius: var(--rk-radii-modalMobile);
-}
-[data-rk] .ju367vr {
-	border-radius: 25%;
-}
-[data-rk] .ju367vs {
-	border-radius: 9999px;
-}
-[data-rk] .ju367vt {
-	border-style: solid;
-}
-[data-rk] .ju367vu {
-	border-width: 0px;
-}
-[data-rk] .ju367vv {
-	border-width: 1px;
-}
-[data-rk] .ju367vw {
-	border-width: 2px;
-}
-[data-rk] .ju367vx {
-	border-width: 4px;
-}
-[data-rk] .ju367vy {
-	cursor: pointer;
-}
-[data-rk] .ju367vz {
-	cursor: none;
-}
-[data-rk] .ju367v10 {
-	pointer-events: none;
-}
-[data-rk] .ju367v11 {
-	pointer-events: all;
-}
-[data-rk] .ju367v12 {
-	min-height: 8px;
-}
-[data-rk] .ju367v13 {
-	min-height: 44px;
-}
-[data-rk] .ju367v14 {
-	flex-direction: row;
-}
-[data-rk] .ju367v15 {
-	flex-direction: column;
-}
-[data-rk] .ju367v16 {
-	font-family: var(--rk-fonts-body);
-}
-[data-rk] .ju367v17 {
-	font-size: 12px;
-	line-height: 18px;
-}
-[data-rk] .ju367v18 {
-	font-size: 13px;
-	line-height: 18px;
-}
-[data-rk] .ju367v19 {
-	font-size: 14px;
-	line-height: 18px;
-}
-[data-rk] .ju367v1a {
-	font-size: 16px;
-	line-height: 20px;
-}
-[data-rk] .ju367v1b {
-	font-size: 18px;
-	line-height: 24px;
-}
-[data-rk] .ju367v1c {
-	font-size: 20px;
-	line-height: 24px;
-}
-[data-rk] .ju367v1d {
-	font-size: 23px;
-	line-height: 29px;
-}
-[data-rk] .ju367v1e {
-	font-weight: 400;
-}
-[data-rk] .ju367v1f {
-	font-weight: 500;
-}
-[data-rk] .ju367v1g {
-	font-weight: 600;
-}
-[data-rk] .ju367v1h {
-	font-weight: 700;
-}
-[data-rk] .ju367v1i {
-	font-weight: 800;
-}
-[data-rk] .ju367v1j {
-	gap: 0;
-}
-[data-rk] .ju367v1k {
-	gap: 1px;
-}
-[data-rk] .ju367v1l {
-	gap: 2px;
-}
-[data-rk] .ju367v1m {
-	gap: 3px;
-}
-[data-rk] .ju367v1n {
-	gap: 4px;
-}
-[data-rk] .ju367v1o {
-	gap: 5px;
-}
-[data-rk] .ju367v1p {
-	gap: 6px;
-}
-[data-rk] .ju367v1q {
-	gap: 8px;
-}
-[data-rk] .ju367v1r {
-	gap: 10px;
-}
-[data-rk] .ju367v1s {
-	gap: 12px;
-}
-[data-rk] .ju367v1t {
-	gap: 14px;
-}
-[data-rk] .ju367v1u {
-	gap: 16px;
-}
-[data-rk] .ju367v1v {
-	gap: 18px;
-}
-[data-rk] .ju367v1w {
-	gap: 20px;
-}
-[data-rk] .ju367v1x {
-	gap: 24px;
-}
-[data-rk] .ju367v1y {
-	gap: 28px;
-}
-[data-rk] .ju367v1z {
-	gap: 32px;
-}
-[data-rk] .ju367v20 {
-	gap: 36px;
-}
-[data-rk] .ju367v21 {
-	gap: 44px;
-}
-[data-rk] .ju367v22 {
-	gap: 64px;
-}
-[data-rk] .ju367v23 {
-	gap: -1px;
-}
-[data-rk] .ju367v24 {
-	height: 1px;
-}
-[data-rk] .ju367v25 {
-	height: 2px;
-}
-[data-rk] .ju367v26 {
-	height: 4px;
-}
-[data-rk] .ju367v27 {
-	height: 8px;
-}
-[data-rk] .ju367v28 {
-	height: 12px;
-}
-[data-rk] .ju367v29 {
-	height: 20px;
-}
-[data-rk] .ju367v2a {
-	height: 24px;
-}
-[data-rk] .ju367v2b {
-	height: 28px;
-}
-[data-rk] .ju367v2c {
-	height: 30px;
-}
-[data-rk] .ju367v2d {
-	height: 32px;
-}
-[data-rk] .ju367v2e {
-	height: 34px;
-}
-[data-rk] .ju367v2f {
-	height: 36px;
-}
-[data-rk] .ju367v2g {
-	height: 40px;
-}
-[data-rk] .ju367v2h {
-	height: 44px;
-}
-[data-rk] .ju367v2i {
-	height: 48px;
-}
-[data-rk] .ju367v2j {
-	height: 54px;
-}
-[data-rk] .ju367v2k {
-	height: 60px;
-}
-[data-rk] .ju367v2l {
-	height: 200px;
-}
-[data-rk] .ju367v2m {
-	height: 100%;
-}
-[data-rk] .ju367v2n {
-	height: -moz-max-content;
-	height: max-content;
-}
-[data-rk] .ju367v2o {
-	justify-content: flex-start;
-}
-[data-rk] .ju367v2p {
-	justify-content: flex-end;
-}
-[data-rk] .ju367v2q {
-	justify-content: center;
-}
-[data-rk] .ju367v2r {
-	justify-content: space-between;
-}
-[data-rk] .ju367v2s {
-	justify-content: space-around;
-}
-[data-rk] .ju367v2t {
-	text-align: left;
-}
-[data-rk] .ju367v2u {
-	text-align: center;
-}
-[data-rk] .ju367v2v {
-	text-align: inherit;
-}
-[data-rk] .ju367v2w {
-	margin-bottom: 0;
-}
-[data-rk] .ju367v2x {
-	margin-bottom: 1px;
-}
-[data-rk] .ju367v2y {
-	margin-bottom: 2px;
-}
-[data-rk] .ju367v2z {
-	margin-bottom: 3px;
-}
-[data-rk] .ju367v30 {
-	margin-bottom: 4px;
-}
-[data-rk] .ju367v31 {
-	margin-bottom: 5px;
-}
-[data-rk] .ju367v32 {
-	margin-bottom: 6px;
-}
-[data-rk] .ju367v33 {
-	margin-bottom: 8px;
-}
-[data-rk] .ju367v34 {
-	margin-bottom: 10px;
-}
-[data-rk] .ju367v35 {
-	margin-bottom: 12px;
-}
-[data-rk] .ju367v36 {
-	margin-bottom: 14px;
-}
-[data-rk] .ju367v37 {
-	margin-bottom: 16px;
-}
-[data-rk] .ju367v38 {
-	margin-bottom: 18px;
-}
-[data-rk] .ju367v39 {
-	margin-bottom: 20px;
-}
-[data-rk] .ju367v3a {
-	margin-bottom: 24px;
-}
-[data-rk] .ju367v3b {
-	margin-bottom: 28px;
-}
-[data-rk] .ju367v3c {
-	margin-bottom: 32px;
-}
-[data-rk] .ju367v3d {
-	margin-bottom: 36px;
-}
-[data-rk] .ju367v3e {
-	margin-bottom: 44px;
-}
-[data-rk] .ju367v3f {
-	margin-bottom: 64px;
-}
-[data-rk] .ju367v3g {
-	margin-bottom: -1px;
-}
-[data-rk] .ju367v3h {
-	margin-left: 0;
-}
-[data-rk] .ju367v3i {
-	margin-left: 1px;
-}
-[data-rk] .ju367v3j {
-	margin-left: 2px;
-}
-[data-rk] .ju367v3k {
-	margin-left: 3px;
-}
-[data-rk] .ju367v3l {
-	margin-left: 4px;
-}
-[data-rk] .ju367v3m {
-	margin-left: 5px;
-}
-[data-rk] .ju367v3n {
-	margin-left: 6px;
-}
-[data-rk] .ju367v3o {
-	margin-left: 8px;
-}
-[data-rk] .ju367v3p {
-	margin-left: 10px;
-}
-[data-rk] .ju367v3q {
-	margin-left: 12px;
-}
-[data-rk] .ju367v3r {
-	margin-left: 14px;
-}
-[data-rk] .ju367v3s {
-	margin-left: 16px;
-}
-[data-rk] .ju367v3t {
-	margin-left: 18px;
-}
-[data-rk] .ju367v3u {
-	margin-left: 20px;
-}
-[data-rk] .ju367v3v {
-	margin-left: 24px;
-}
-[data-rk] .ju367v3w {
-	margin-left: 28px;
-}
-[data-rk] .ju367v3x {
-	margin-left: 32px;
-}
-[data-rk] .ju367v3y {
-	margin-left: 36px;
-}
-[data-rk] .ju367v3z {
-	margin-left: 44px;
-}
-[data-rk] .ju367v40 {
-	margin-left: 64px;
-}
-[data-rk] .ju367v41 {
-	margin-left: -1px;
-}
-[data-rk] .ju367v42 {
-	margin-right: 0;
-}
-[data-rk] .ju367v43 {
-	margin-right: 1px;
-}
-[data-rk] .ju367v44 {
-	margin-right: 2px;
-}
-[data-rk] .ju367v45 {
-	margin-right: 3px;
-}
-[data-rk] .ju367v46 {
-	margin-right: 4px;
-}
-[data-rk] .ju367v47 {
-	margin-right: 5px;
-}
-[data-rk] .ju367v48 {
-	margin-right: 6px;
-}
-[data-rk] .ju367v49 {
-	margin-right: 8px;
-}
-[data-rk] .ju367v4a {
-	margin-right: 10px;
-}
-[data-rk] .ju367v4b {
-	margin-right: 12px;
-}
-[data-rk] .ju367v4c {
-	margin-right: 14px;
-}
-[data-rk] .ju367v4d {
-	margin-right: 16px;
-}
-[data-rk] .ju367v4e {
-	margin-right: 18px;
-}
-[data-rk] .ju367v4f {
-	margin-right: 20px;
-}
-[data-rk] .ju367v4g {
-	margin-right: 24px;
-}
-[data-rk] .ju367v4h {
-	margin-right: 28px;
-}
-[data-rk] .ju367v4i {
-	margin-right: 32px;
-}
-[data-rk] .ju367v4j {
-	margin-right: 36px;
-}
-[data-rk] .ju367v4k {
-	margin-right: 44px;
-}
-[data-rk] .ju367v4l {
-	margin-right: 64px;
-}
-[data-rk] .ju367v4m {
-	margin-right: -1px;
-}
-[data-rk] .ju367v4n {
-	margin-top: 0;
-}
-[data-rk] .ju367v4o {
-	margin-top: 1px;
-}
-[data-rk] .ju367v4p {
-	margin-top: 2px;
-}
-[data-rk] .ju367v4q {
-	margin-top: 3px;
-}
-[data-rk] .ju367v4r {
-	margin-top: 4px;
-}
-[data-rk] .ju367v4s {
-	margin-top: 5px;
-}
-[data-rk] .ju367v4t {
-	margin-top: 6px;
-}
-[data-rk] .ju367v4u {
-	margin-top: 8px;
-}
-[data-rk] .ju367v4v {
-	margin-top: 10px;
-}
-[data-rk] .ju367v4w {
-	margin-top: 12px;
-}
-[data-rk] .ju367v4x {
-	margin-top: 14px;
-}
-[data-rk] .ju367v4y {
-	margin-top: 16px;
-}
-[data-rk] .ju367v4z {
-	margin-top: 18px;
-}
-[data-rk] .ju367v50 {
-	margin-top: 20px;
-}
-[data-rk] .ju367v51 {
-	margin-top: 24px;
-}
-[data-rk] .ju367v52 {
-	margin-top: 28px;
-}
-[data-rk] .ju367v53 {
-	margin-top: 32px;
-}
-[data-rk] .ju367v54 {
-	margin-top: 36px;
-}
-[data-rk] .ju367v55 {
-	margin-top: 44px;
-}
-[data-rk] .ju367v56 {
-	margin-top: 64px;
-}
-[data-rk] .ju367v57 {
-	margin-top: -1px;
-}
-[data-rk] .ju367v58 {
-	max-width: 1px;
-}
-[data-rk] .ju367v59 {
-	max-width: 2px;
-}
-[data-rk] .ju367v5a {
-	max-width: 4px;
-}
-[data-rk] .ju367v5b {
-	max-width: 8px;
-}
-[data-rk] .ju367v5c {
-	max-width: 12px;
-}
-[data-rk] .ju367v5d {
-	max-width: 20px;
-}
-[data-rk] .ju367v5e {
-	max-width: 24px;
-}
-[data-rk] .ju367v5f {
-	max-width: 28px;
-}
-[data-rk] .ju367v5g {
-	max-width: 30px;
-}
-[data-rk] .ju367v5h {
-	max-width: 32px;
-}
-[data-rk] .ju367v5i {
-	max-width: 34px;
-}
-[data-rk] .ju367v5j {
-	max-width: 36px;
-}
-[data-rk] .ju367v5k {
-	max-width: 40px;
-}
-[data-rk] .ju367v5l {
-	max-width: 44px;
-}
-[data-rk] .ju367v5m {
-	max-width: 48px;
-}
-[data-rk] .ju367v5n {
-	max-width: 54px;
-}
-[data-rk] .ju367v5o {
-	max-width: 60px;
-}
-[data-rk] .ju367v5p {
-	max-width: 200px;
-}
-[data-rk] .ju367v5q {
-	max-width: 100%;
-}
-[data-rk] .ju367v5r {
-	max-width: -moz-max-content;
-	max-width: max-content;
-}
-[data-rk] .ju367v5s {
-	min-width: 1px;
-}
-[data-rk] .ju367v5t {
-	min-width: 2px;
-}
-[data-rk] .ju367v5u {
-	min-width: 4px;
-}
-[data-rk] .ju367v5v {
-	min-width: 8px;
-}
-[data-rk] .ju367v5w {
-	min-width: 12px;
-}
-[data-rk] .ju367v5x {
-	min-width: 20px;
-}
-[data-rk] .ju367v5y {
-	min-width: 24px;
-}
-[data-rk] .ju367v5z {
-	min-width: 28px;
-}
-[data-rk] .ju367v60 {
-	min-width: 30px;
-}
-[data-rk] .ju367v61 {
-	min-width: 32px;
-}
-[data-rk] .ju367v62 {
-	min-width: 34px;
-}
-[data-rk] .ju367v63 {
-	min-width: 36px;
-}
-[data-rk] .ju367v64 {
-	min-width: 40px;
-}
-[data-rk] .ju367v65 {
-	min-width: 44px;
-}
-[data-rk] .ju367v66 {
-	min-width: 48px;
-}
-[data-rk] .ju367v67 {
-	min-width: 54px;
-}
-[data-rk] .ju367v68 {
-	min-width: 60px;
-}
-[data-rk] .ju367v69 {
-	min-width: 200px;
-}
-[data-rk] .ju367v6a {
-	min-width: 100%;
-}
-[data-rk] .ju367v6b {
-	min-width: -moz-max-content;
-	min-width: max-content;
-}
-[data-rk] .ju367v6c {
-	overflow: hidden;
-}
-[data-rk] .ju367v6d {
-	padding-bottom: 0;
-}
-[data-rk] .ju367v6e {
-	padding-bottom: 1px;
-}
-[data-rk] .ju367v6f {
-	padding-bottom: 2px;
-}
-[data-rk] .ju367v6g {
-	padding-bottom: 3px;
-}
-[data-rk] .ju367v6h {
-	padding-bottom: 4px;
-}
-[data-rk] .ju367v6i {
-	padding-bottom: 5px;
-}
-[data-rk] .ju367v6j {
-	padding-bottom: 6px;
-}
-[data-rk] .ju367v6k {
-	padding-bottom: 8px;
-}
-[data-rk] .ju367v6l {
-	padding-bottom: 10px;
-}
-[data-rk] .ju367v6m {
-	padding-bottom: 12px;
-}
-[data-rk] .ju367v6n {
-	padding-bottom: 14px;
-}
-[data-rk] .ju367v6o {
-	padding-bottom: 16px;
-}
-[data-rk] .ju367v6p {
-	padding-bottom: 18px;
-}
-[data-rk] .ju367v6q {
-	padding-bottom: 20px;
-}
-[data-rk] .ju367v6r {
-	padding-bottom: 24px;
-}
-[data-rk] .ju367v6s {
-	padding-bottom: 28px;
-}
-[data-rk] .ju367v6t {
-	padding-bottom: 32px;
-}
-[data-rk] .ju367v6u {
-	padding-bottom: 36px;
-}
-[data-rk] .ju367v6v {
-	padding-bottom: 44px;
-}
-[data-rk] .ju367v6w {
-	padding-bottom: 64px;
-}
-[data-rk] .ju367v6x {
-	padding-bottom: -1px;
-}
-[data-rk] .ju367v6y {
-	padding-left: 0;
-}
-[data-rk] .ju367v6z {
-	padding-left: 1px;
-}
-[data-rk] .ju367v70 {
-	padding-left: 2px;
-}
-[data-rk] .ju367v71 {
-	padding-left: 3px;
-}
-[data-rk] .ju367v72 {
-	padding-left: 4px;
-}
-[data-rk] .ju367v73 {
-	padding-left: 5px;
-}
-[data-rk] .ju367v74 {
-	padding-left: 6px;
-}
-[data-rk] .ju367v75 {
-	padding-left: 8px;
-}
-[data-rk] .ju367v76 {
-	padding-left: 10px;
-}
-[data-rk] .ju367v77 {
-	padding-left: 12px;
-}
-[data-rk] .ju367v78 {
-	padding-left: 14px;
-}
-[data-rk] .ju367v79 {
-	padding-left: 16px;
-}
-[data-rk] .ju367v7a {
-	padding-left: 18px;
-}
-[data-rk] .ju367v7b {
-	padding-left: 20px;
-}
-[data-rk] .ju367v7c {
-	padding-left: 24px;
-}
-[data-rk] .ju367v7d {
-	padding-left: 28px;
-}
-[data-rk] .ju367v7e {
-	padding-left: 32px;
-}
-[data-rk] .ju367v7f {
-	padding-left: 36px;
-}
-[data-rk] .ju367v7g {
-	padding-left: 44px;
-}
-[data-rk] .ju367v7h {
-	padding-left: 64px;
-}
-[data-rk] .ju367v7i {
-	padding-left: -1px;
-}
-[data-rk] .ju367v7j {
-	padding-right: 0;
-}
-[data-rk] .ju367v7k {
-	padding-right: 1px;
-}
-[data-rk] .ju367v7l {
-	padding-right: 2px;
-}
-[data-rk] .ju367v7m {
-	padding-right: 3px;
-}
-[data-rk] .ju367v7n {
-	padding-right: 4px;
-}
-[data-rk] .ju367v7o {
-	padding-right: 5px;
-}
-[data-rk] .ju367v7p {
-	padding-right: 6px;
-}
-[data-rk] .ju367v7q {
-	padding-right: 8px;
-}
-[data-rk] .ju367v7r {
-	padding-right: 10px;
-}
-[data-rk] .ju367v7s {
-	padding-right: 12px;
-}
-[data-rk] .ju367v7t {
-	padding-right: 14px;
-}
-[data-rk] .ju367v7u {
-	padding-right: 16px;
-}
-[data-rk] .ju367v7v {
-	padding-right: 18px;
-}
-[data-rk] .ju367v7w {
-	padding-right: 20px;
-}
-[data-rk] .ju367v7x {
-	padding-right: 24px;
-}
-[data-rk] .ju367v7y {
-	padding-right: 28px;
-}
-[data-rk] .ju367v7z {
-	padding-right: 32px;
-}
-[data-rk] .ju367v80 {
-	padding-right: 36px;
-}
-[data-rk] .ju367v81 {
-	padding-right: 44px;
-}
-[data-rk] .ju367v82 {
-	padding-right: 64px;
-}
-[data-rk] .ju367v83 {
-	padding-right: -1px;
-}
-[data-rk] .ju367v84 {
-	padding-top: 0;
-}
-[data-rk] .ju367v85 {
-	padding-top: 1px;
-}
-[data-rk] .ju367v86 {
-	padding-top: 2px;
-}
-[data-rk] .ju367v87 {
-	padding-top: 3px;
-}
-[data-rk] .ju367v88 {
-	padding-top: 4px;
-}
-[data-rk] .ju367v89 {
-	padding-top: 5px;
-}
-[data-rk] .ju367v8a {
-	padding-top: 6px;
-}
-[data-rk] .ju367v8b {
-	padding-top: 8px;
-}
-[data-rk] .ju367v8c {
-	padding-top: 10px;
-}
-[data-rk] .ju367v8d {
-	padding-top: 12px;
-}
-[data-rk] .ju367v8e {
-	padding-top: 14px;
-}
-[data-rk] .ju367v8f {
-	padding-top: 16px;
-}
-[data-rk] .ju367v8g {
-	padding-top: 18px;
-}
-[data-rk] .ju367v8h {
-	padding-top: 20px;
-}
-[data-rk] .ju367v8i {
-	padding-top: 24px;
-}
-[data-rk] .ju367v8j {
-	padding-top: 28px;
-}
-[data-rk] .ju367v8k {
-	padding-top: 32px;
-}
-[data-rk] .ju367v8l {
-	padding-top: 36px;
-}
-[data-rk] .ju367v8m {
-	padding-top: 44px;
-}
-[data-rk] .ju367v8n {
-	padding-top: 64px;
-}
-[data-rk] .ju367v8o {
-	padding-top: -1px;
-}
-[data-rk] .ju367v8p {
-	position: absolute;
-}
-[data-rk] .ju367v8q {
-	position: fixed;
-}
-[data-rk] .ju367v8r {
-	position: relative;
-}
-[data-rk] .ju367v8s {
-	-webkit-user-select: none;
-}
-[data-rk] .ju367v8t {
-	right: 0;
-}
-[data-rk] .ju367v8u {
-	transition: 0.125s ease;
-}
-[data-rk] .ju367v8v {
-	transition: transform 0.125s ease;
-}
-[data-rk] .ju367v8w {
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-}
-[data-rk] .ju367v8x {
-	width: 1px;
-}
-[data-rk] .ju367v8y {
-	width: 2px;
-}
-[data-rk] .ju367v8z {
-	width: 4px;
-}
-[data-rk] .ju367v90 {
-	width: 8px;
-}
-[data-rk] .ju367v91 {
-	width: 12px;
-}
-[data-rk] .ju367v92 {
-	width: 20px;
-}
-[data-rk] .ju367v93 {
-	width: 24px;
-}
-[data-rk] .ju367v94 {
-	width: 28px;
-}
-[data-rk] .ju367v95 {
-	width: 30px;
-}
-[data-rk] .ju367v96 {
-	width: 32px;
-}
-[data-rk] .ju367v97 {
-	width: 34px;
-}
-[data-rk] .ju367v98 {
-	width: 36px;
-}
-[data-rk] .ju367v99 {
-	width: 40px;
-}
-[data-rk] .ju367v9a {
-	width: 44px;
-}
-[data-rk] .ju367v9b {
-	width: 48px;
-}
-[data-rk] .ju367v9c {
-	width: 54px;
-}
-[data-rk] .ju367v9d {
-	width: 60px;
-}
-[data-rk] .ju367v9e {
-	width: 200px;
-}
-[data-rk] .ju367v9f {
-	width: 100%;
-}
-[data-rk] .ju367v9g {
-	width: -moz-max-content;
-	width: max-content;
-}
-[data-rk] .ju367v9h {
-	-webkit-backdrop-filter: var(--rk-blurs-modalOverlay);
-	backdrop-filter: var(--rk-blurs-modalOverlay);
-}
-[data-rk] .ju367v9i {
-	background: var(--rk-colors-accentColor);
-}
-[data-rk] .ju367v9j:hover {
-	background: var(--rk-colors-accentColor);
-}
-[data-rk] .ju367v9k:active {
-	background: var(--rk-colors-accentColor);
-}
-[data-rk] .ju367v9l {
-	background: var(--rk-colors-accentColorForeground);
-}
-[data-rk] .ju367v9m:hover {
-	background: var(--rk-colors-accentColorForeground);
-}
-[data-rk] .ju367v9n:active {
-	background: var(--rk-colors-accentColorForeground);
-}
-[data-rk] .ju367v9o {
-	background: var(--rk-colors-actionButtonBorder);
-}
-[data-rk] .ju367v9p:hover {
-	background: var(--rk-colors-actionButtonBorder);
-}
-[data-rk] .ju367v9q:active {
-	background: var(--rk-colors-actionButtonBorder);
-}
-[data-rk] .ju367v9r {
-	background: var(--rk-colors-actionButtonBorderMobile);
-}
-[data-rk] .ju367v9s:hover {
-	background: var(--rk-colors-actionButtonBorderMobile);
-}
-[data-rk] .ju367v9t:active {
-	background: var(--rk-colors-actionButtonBorderMobile);
-}
-[data-rk] .ju367v9u {
-	background: var(--rk-colors-actionButtonSecondaryBackground);
-}
-[data-rk] .ju367v9v:hover {
-	background: var(--rk-colors-actionButtonSecondaryBackground);
-}
-[data-rk] .ju367v9w:active {
-	background: var(--rk-colors-actionButtonSecondaryBackground);
-}
-[data-rk] .ju367v9x {
-	background: var(--rk-colors-closeButton);
-}
-[data-rk] .ju367v9y:hover {
-	background: var(--rk-colors-closeButton);
-}
-[data-rk] .ju367v9z:active {
-	background: var(--rk-colors-closeButton);
-}
-[data-rk] .ju367va0 {
-	background: var(--rk-colors-closeButtonBackground);
-}
-[data-rk] .ju367va1:hover {
-	background: var(--rk-colors-closeButtonBackground);
-}
-[data-rk] .ju367va2:active {
-	background: var(--rk-colors-closeButtonBackground);
-}
-[data-rk] .ju367va3 {
-	background: var(--rk-colors-connectButtonBackground);
-}
-[data-rk] .ju367va4:hover {
-	background: var(--rk-colors-connectButtonBackground);
-}
-[data-rk] .ju367va5:active {
-	background: var(--rk-colors-connectButtonBackground);
-}
-[data-rk] .ju367va6 {
-	background: var(--rk-colors-connectButtonBackgroundError);
-}
-[data-rk] .ju367va7:hover {
-	background: var(--rk-colors-connectButtonBackgroundError);
-}
-[data-rk] .ju367va8:active {
-	background: var(--rk-colors-connectButtonBackgroundError);
-}
-[data-rk] .ju367va9 {
-	background: var(--rk-colors-connectButtonInnerBackground);
-}
-[data-rk] .ju367vaa:hover {
-	background: var(--rk-colors-connectButtonInnerBackground);
-}
-[data-rk] .ju367vab:active {
-	background: var(--rk-colors-connectButtonInnerBackground);
-}
-[data-rk] .ju367vac {
-	background: var(--rk-colors-connectButtonText);
-}
-[data-rk] .ju367vad:hover {
-	background: var(--rk-colors-connectButtonText);
-}
-[data-rk] .ju367vae:active {
-	background: var(--rk-colors-connectButtonText);
-}
-[data-rk] .ju367vaf {
-	background: var(--rk-colors-connectButtonTextError);
-}
-[data-rk] .ju367vag:hover {
-	background: var(--rk-colors-connectButtonTextError);
-}
-[data-rk] .ju367vah:active {
-	background: var(--rk-colors-connectButtonTextError);
-}
-[data-rk] .ju367vai {
-	background: var(--rk-colors-connectionIndicator);
-}
-[data-rk] .ju367vaj:hover {
-	background: var(--rk-colors-connectionIndicator);
-}
-[data-rk] .ju367vak:active {
-	background: var(--rk-colors-connectionIndicator);
-}
-[data-rk] .ju367val {
-	background: var(--rk-colors-downloadBottomCardBackground);
-}
-[data-rk] .ju367vam:hover {
-	background: var(--rk-colors-downloadBottomCardBackground);
-}
-[data-rk] .ju367van:active {
-	background: var(--rk-colors-downloadBottomCardBackground);
-}
-[data-rk] .ju367vao {
-	background: var(--rk-colors-downloadTopCardBackground);
-}
-[data-rk] .ju367vap:hover {
-	background: var(--rk-colors-downloadTopCardBackground);
-}
-[data-rk] .ju367vaq:active {
-	background: var(--rk-colors-downloadTopCardBackground);
-}
-[data-rk] .ju367var {
-	background: var(--rk-colors-error);
-}
-[data-rk] .ju367vas:hover {
-	background: var(--rk-colors-error);
-}
-[data-rk] .ju367vat:active {
-	background: var(--rk-colors-error);
-}
-[data-rk] .ju367vau {
-	background: var(--rk-colors-generalBorder);
-}
-[data-rk] .ju367vav:hover {
-	background: var(--rk-colors-generalBorder);
-}
-[data-rk] .ju367vaw:active {
-	background: var(--rk-colors-generalBorder);
-}
-[data-rk] .ju367vax {
-	background: var(--rk-colors-generalBorderDim);
-}
-[data-rk] .ju367vay:hover {
-	background: var(--rk-colors-generalBorderDim);
-}
-[data-rk] .ju367vaz:active {
-	background: var(--rk-colors-generalBorderDim);
-}
-[data-rk] .ju367vb0 {
-	background: var(--rk-colors-menuItemBackground);
-}
-[data-rk] .ju367vb1:hover {
-	background: var(--rk-colors-menuItemBackground);
-}
-[data-rk] .ju367vb2:active {
-	background: var(--rk-colors-menuItemBackground);
-}
-[data-rk] .ju367vb3 {
-	background: var(--rk-colors-modalBackdrop);
-}
-[data-rk] .ju367vb4:hover {
-	background: var(--rk-colors-modalBackdrop);
-}
-[data-rk] .ju367vb5:active {
-	background: var(--rk-colors-modalBackdrop);
-}
-[data-rk] .ju367vb6 {
-	background: var(--rk-colors-modalBackground);
-}
-[data-rk] .ju367vb7:hover {
-	background: var(--rk-colors-modalBackground);
-}
-[data-rk] .ju367vb8:active {
-	background: var(--rk-colors-modalBackground);
-}
-[data-rk] .ju367vb9 {
-	background: var(--rk-colors-modalBorder);
-}
-[data-rk] .ju367vba:hover {
-	background: var(--rk-colors-modalBorder);
-}
-[data-rk] .ju367vbb:active {
-	background: var(--rk-colors-modalBorder);
-}
-[data-rk] .ju367vbc {
-	background: var(--rk-colors-modalText);
-}
-[data-rk] .ju367vbd:hover {
-	background: var(--rk-colors-modalText);
-}
-[data-rk] .ju367vbe:active {
-	background: var(--rk-colors-modalText);
-}
-[data-rk] .ju367vbf {
-	background: var(--rk-colors-modalTextDim);
-}
-[data-rk] .ju367vbg:hover {
-	background: var(--rk-colors-modalTextDim);
-}
-[data-rk] .ju367vbh:active {
-	background: var(--rk-colors-modalTextDim);
-}
-[data-rk] .ju367vbi {
-	background: var(--rk-colors-modalTextSecondary);
-}
-[data-rk] .ju367vbj:hover {
-	background: var(--rk-colors-modalTextSecondary);
-}
-[data-rk] .ju367vbk:active {
-	background: var(--rk-colors-modalTextSecondary);
-}
-[data-rk] .ju367vbl {
-	background: var(--rk-colors-profileAction);
-}
-[data-rk] .ju367vbm:hover {
-	background: var(--rk-colors-profileAction);
-}
-[data-rk] .ju367vbn:active {
-	background: var(--rk-colors-profileAction);
-}
-[data-rk] .ju367vbo {
-	background: var(--rk-colors-profileActionHover);
-}
-[data-rk] .ju367vbp:hover {
-	background: var(--rk-colors-profileActionHover);
-}
-[data-rk] .ju367vbq:active {
-	background: var(--rk-colors-profileActionHover);
-}
-[data-rk] .ju367vbr {
-	background: var(--rk-colors-profileForeground);
-}
-[data-rk] .ju367vbs:hover {
-	background: var(--rk-colors-profileForeground);
-}
-[data-rk] .ju367vbt:active {
-	background: var(--rk-colors-profileForeground);
-}
-[data-rk] .ju367vbu {
-	background: var(--rk-colors-selectedOptionBorder);
-}
-[data-rk] .ju367vbv:hover {
-	background: var(--rk-colors-selectedOptionBorder);
-}
-[data-rk] .ju367vbw:active {
-	background: var(--rk-colors-selectedOptionBorder);
-}
-[data-rk] .ju367vbx {
-	background: var(--rk-colors-standby);
-}
-[data-rk] .ju367vby:hover {
-	background: var(--rk-colors-standby);
-}
-[data-rk] .ju367vbz:active {
-	background: var(--rk-colors-standby);
-}
-[data-rk] .ju367vc0 {
-	border-color: var(--rk-colors-accentColor);
-}
-[data-rk] .ju367vc1:hover {
-	border-color: var(--rk-colors-accentColor);
-}
-[data-rk] .ju367vc2:active {
-	border-color: var(--rk-colors-accentColor);
-}
-[data-rk] .ju367vc3 {
-	border-color: var(--rk-colors-accentColorForeground);
-}
-[data-rk] .ju367vc4:hover {
-	border-color: var(--rk-colors-accentColorForeground);
-}
-[data-rk] .ju367vc5:active {
-	border-color: var(--rk-colors-accentColorForeground);
-}
-[data-rk] .ju367vc6 {
-	border-color: var(--rk-colors-actionButtonBorder);
-}
-[data-rk] .ju367vc7:hover {
-	border-color: var(--rk-colors-actionButtonBorder);
-}
-[data-rk] .ju367vc8:active {
-	border-color: var(--rk-colors-actionButtonBorder);
-}
-[data-rk] .ju367vc9 {
-	border-color: var(--rk-colors-actionButtonBorderMobile);
-}
-[data-rk] .ju367vca:hover {
-	border-color: var(--rk-colors-actionButtonBorderMobile);
-}
-[data-rk] .ju367vcb:active {
-	border-color: var(--rk-colors-actionButtonBorderMobile);
-}
-[data-rk] .ju367vcc {
-	border-color: var(--rk-colors-actionButtonSecondaryBackground);
-}
-[data-rk] .ju367vcd:hover {
-	border-color: var(--rk-colors-actionButtonSecondaryBackground);
-}
-[data-rk] .ju367vce:active {
-	border-color: var(--rk-colors-actionButtonSecondaryBackground);
-}
-[data-rk] .ju367vcf {
-	border-color: var(--rk-colors-closeButton);
-}
-[data-rk] .ju367vcg:hover {
-	border-color: var(--rk-colors-closeButton);
-}
-[data-rk] .ju367vch:active {
-	border-color: var(--rk-colors-closeButton);
-}
-[data-rk] .ju367vci {
-	border-color: var(--rk-colors-closeButtonBackground);
-}
-[data-rk] .ju367vcj:hover {
-	border-color: var(--rk-colors-closeButtonBackground);
-}
-[data-rk] .ju367vck:active {
-	border-color: var(--rk-colors-closeButtonBackground);
-}
-[data-rk] .ju367vcl {
-	border-color: var(--rk-colors-connectButtonBackground);
-}
-[data-rk] .ju367vcm:hover {
-	border-color: var(--rk-colors-connectButtonBackground);
-}
-[data-rk] .ju367vcn:active {
-	border-color: var(--rk-colors-connectButtonBackground);
-}
-[data-rk] .ju367vco {
-	border-color: var(--rk-colors-connectButtonBackgroundError);
-}
-[data-rk] .ju367vcp:hover {
-	border-color: var(--rk-colors-connectButtonBackgroundError);
-}
-[data-rk] .ju367vcq:active {
-	border-color: var(--rk-colors-connectButtonBackgroundError);
-}
-[data-rk] .ju367vcr {
-	border-color: var(--rk-colors-connectButtonInnerBackground);
-}
-[data-rk] .ju367vcs:hover {
-	border-color: var(--rk-colors-connectButtonInnerBackground);
-}
-[data-rk] .ju367vct:active {
-	border-color: var(--rk-colors-connectButtonInnerBackground);
-}
-[data-rk] .ju367vcu {
-	border-color: var(--rk-colors-connectButtonText);
-}
-[data-rk] .ju367vcv:hover {
-	border-color: var(--rk-colors-connectButtonText);
-}
-[data-rk] .ju367vcw:active {
-	border-color: var(--rk-colors-connectButtonText);
-}
-[data-rk] .ju367vcx {
-	border-color: var(--rk-colors-connectButtonTextError);
-}
-[data-rk] .ju367vcy:hover {
-	border-color: var(--rk-colors-connectButtonTextError);
-}
-[data-rk] .ju367vcz:active {
-	border-color: var(--rk-colors-connectButtonTextError);
-}
-[data-rk] .ju367vd0 {
-	border-color: var(--rk-colors-connectionIndicator);
-}
-[data-rk] .ju367vd1:hover {
-	border-color: var(--rk-colors-connectionIndicator);
-}
-[data-rk] .ju367vd2:active {
-	border-color: var(--rk-colors-connectionIndicator);
-}
-[data-rk] .ju367vd3 {
-	border-color: var(--rk-colors-downloadBottomCardBackground);
-}
-[data-rk] .ju367vd4:hover {
-	border-color: var(--rk-colors-downloadBottomCardBackground);
-}
-[data-rk] .ju367vd5:active {
-	border-color: var(--rk-colors-downloadBottomCardBackground);
-}
-[data-rk] .ju367vd6 {
-	border-color: var(--rk-colors-downloadTopCardBackground);
-}
-[data-rk] .ju367vd7:hover {
-	border-color: var(--rk-colors-downloadTopCardBackground);
-}
-[data-rk] .ju367vd8:active {
-	border-color: var(--rk-colors-downloadTopCardBackground);
-}
-[data-rk] .ju367vd9 {
-	border-color: var(--rk-colors-error);
-}
-[data-rk] .ju367vda:hover {
-	border-color: var(--rk-colors-error);
-}
-[data-rk] .ju367vdb:active {
-	border-color: var(--rk-colors-error);
-}
-[data-rk] .ju367vdc {
-	border-color: var(--rk-colors-generalBorder);
-}
-[data-rk] .ju367vdd:hover {
-	border-color: var(--rk-colors-generalBorder);
-}
-[data-rk] .ju367vde:active {
-	border-color: var(--rk-colors-generalBorder);
-}
-[data-rk] .ju367vdf {
-	border-color: var(--rk-colors-generalBorderDim);
-}
-[data-rk] .ju367vdg:hover {
-	border-color: var(--rk-colors-generalBorderDim);
-}
-[data-rk] .ju367vdh:active {
-	border-color: var(--rk-colors-generalBorderDim);
-}
-[data-rk] .ju367vdi {
-	border-color: var(--rk-colors-menuItemBackground);
-}
-[data-rk] .ju367vdj:hover {
-	border-color: var(--rk-colors-menuItemBackground);
-}
-[data-rk] .ju367vdk:active {
-	border-color: var(--rk-colors-menuItemBackground);
-}
-[data-rk] .ju367vdl {
-	border-color: var(--rk-colors-modalBackdrop);
-}
-[data-rk] .ju367vdm:hover {
-	border-color: var(--rk-colors-modalBackdrop);
-}
-[data-rk] .ju367vdn:active {
-	border-color: var(--rk-colors-modalBackdrop);
-}
-[data-rk] .ju367vdo {
-	border-color: var(--rk-colors-modalBackground);
-}
-[data-rk] .ju367vdp:hover {
-	border-color: var(--rk-colors-modalBackground);
-}
-[data-rk] .ju367vdq:active {
-	border-color: var(--rk-colors-modalBackground);
-}
-[data-rk] .ju367vdr {
-	border-color: var(--rk-colors-modalBorder);
-}
-[data-rk] .ju367vds:hover {
-	border-color: var(--rk-colors-modalBorder);
-}
-[data-rk] .ju367vdt:active {
-	border-color: var(--rk-colors-modalBorder);
-}
-[data-rk] .ju367vdu {
-	border-color: var(--rk-colors-modalText);
-}
-[data-rk] .ju367vdv:hover {
-	border-color: var(--rk-colors-modalText);
-}
-[data-rk] .ju367vdw:active {
-	border-color: var(--rk-colors-modalText);
-}
-[data-rk] .ju367vdx {
-	border-color: var(--rk-colors-modalTextDim);
-}
-[data-rk] .ju367vdy:hover {
-	border-color: var(--rk-colors-modalTextDim);
-}
-[data-rk] .ju367vdz:active {
-	border-color: var(--rk-colors-modalTextDim);
-}
-[data-rk] .ju367ve0 {
-	border-color: var(--rk-colors-modalTextSecondary);
-}
-[data-rk] .ju367ve1:hover {
-	border-color: var(--rk-colors-modalTextSecondary);
-}
-[data-rk] .ju367ve2:active {
-	border-color: var(--rk-colors-modalTextSecondary);
-}
-[data-rk] .ju367ve3 {
-	border-color: var(--rk-colors-profileAction);
-}
-[data-rk] .ju367ve4:hover {
-	border-color: var(--rk-colors-profileAction);
-}
-[data-rk] .ju367ve5:active {
-	border-color: var(--rk-colors-profileAction);
-}
-[data-rk] .ju367ve6 {
-	border-color: var(--rk-colors-profileActionHover);
-}
-[data-rk] .ju367ve7:hover {
-	border-color: var(--rk-colors-profileActionHover);
-}
-[data-rk] .ju367ve8:active {
-	border-color: var(--rk-colors-profileActionHover);
-}
-[data-rk] .ju367ve9 {
-	border-color: var(--rk-colors-profileForeground);
-}
-[data-rk] .ju367vea:hover {
-	border-color: var(--rk-colors-profileForeground);
-}
-[data-rk] .ju367veb:active {
-	border-color: var(--rk-colors-profileForeground);
-}
-[data-rk] .ju367vec {
-	border-color: var(--rk-colors-selectedOptionBorder);
-}
-[data-rk] .ju367ved:hover {
-	border-color: var(--rk-colors-selectedOptionBorder);
-}
-[data-rk] .ju367vee:active {
-	border-color: var(--rk-colors-selectedOptionBorder);
-}
-[data-rk] .ju367vef {
-	border-color: var(--rk-colors-standby);
-}
-[data-rk] .ju367veg:hover {
-	border-color: var(--rk-colors-standby);
-}
-[data-rk] .ju367veh:active {
-	border-color: var(--rk-colors-standby);
-}
-[data-rk] .ju367vei {
-	box-shadow: var(--rk-shadows-connectButton);
-}
-[data-rk] .ju367vej:hover {
-	box-shadow: var(--rk-shadows-connectButton);
-}
-[data-rk] .ju367vek:active {
-	box-shadow: var(--rk-shadows-connectButton);
-}
-[data-rk] .ju367vel {
-	box-shadow: var(--rk-shadows-dialog);
-}
-[data-rk] .ju367vem:hover {
-	box-shadow: var(--rk-shadows-dialog);
-}
-[data-rk] .ju367ven:active {
-	box-shadow: var(--rk-shadows-dialog);
-}
-[data-rk] .ju367veo {
-	box-shadow: var(--rk-shadows-profileDetailsAction);
-}
-[data-rk] .ju367vep:hover {
-	box-shadow: var(--rk-shadows-profileDetailsAction);
-}
-[data-rk] .ju367veq:active {
-	box-shadow: var(--rk-shadows-profileDetailsAction);
-}
-[data-rk] .ju367ver {
-	box-shadow: var(--rk-shadows-selectedOption);
-}
-[data-rk] .ju367ves:hover {
-	box-shadow: var(--rk-shadows-selectedOption);
-}
-[data-rk] .ju367vet:active {
-	box-shadow: var(--rk-shadows-selectedOption);
-}
-[data-rk] .ju367veu {
-	box-shadow: var(--rk-shadows-selectedWallet);
-}
-[data-rk] .ju367vev:hover {
-	box-shadow: var(--rk-shadows-selectedWallet);
-}
-[data-rk] .ju367vew:active {
-	box-shadow: var(--rk-shadows-selectedWallet);
-}
-[data-rk] .ju367vex {
-	box-shadow: var(--rk-shadows-walletLogo);
-}
-[data-rk] .ju367vey:hover {
-	box-shadow: var(--rk-shadows-walletLogo);
-}
-[data-rk] .ju367vez:active {
-	box-shadow: var(--rk-shadows-walletLogo);
-}
-[data-rk] .ju367vf0 {
-	color: var(--rk-colors-accentColor);
-}
-[data-rk] .ju367vf1:hover {
-	color: var(--rk-colors-accentColor);
-}
-[data-rk] .ju367vf2:active {
-	color: var(--rk-colors-accentColor);
-}
-[data-rk] .ju367vf3 {
-	color: var(--rk-colors-accentColorForeground);
-}
-[data-rk] .ju367vf4:hover {
-	color: var(--rk-colors-accentColorForeground);
-}
-[data-rk] .ju367vf5:active {
-	color: var(--rk-colors-accentColorForeground);
-}
-[data-rk] .ju367vf6 {
-	color: var(--rk-colors-actionButtonBorder);
-}
-[data-rk] .ju367vf7:hover {
-	color: var(--rk-colors-actionButtonBorder);
-}
-[data-rk] .ju367vf8:active {
-	color: var(--rk-colors-actionButtonBorder);
-}
-[data-rk] .ju367vf9 {
-	color: var(--rk-colors-actionButtonBorderMobile);
-}
-[data-rk] .ju367vfa:hover {
-	color: var(--rk-colors-actionButtonBorderMobile);
-}
-[data-rk] .ju367vfb:active {
-	color: var(--rk-colors-actionButtonBorderMobile);
-}
-[data-rk] .ju367vfc {
-	color: var(--rk-colors-actionButtonSecondaryBackground);
-}
-[data-rk] .ju367vfd:hover {
-	color: var(--rk-colors-actionButtonSecondaryBackground);
-}
-[data-rk] .ju367vfe:active {
-	color: var(--rk-colors-actionButtonSecondaryBackground);
-}
-[data-rk] .ju367vff {
-	color: var(--rk-colors-closeButton);
-}
-[data-rk] .ju367vfg:hover {
-	color: var(--rk-colors-closeButton);
-}
-[data-rk] .ju367vfh:active {
-	color: var(--rk-colors-closeButton);
-}
-[data-rk] .ju367vfi {
-	color: var(--rk-colors-closeButtonBackground);
-}
-[data-rk] .ju367vfj:hover {
-	color: var(--rk-colors-closeButtonBackground);
-}
-[data-rk] .ju367vfk:active {
-	color: var(--rk-colors-closeButtonBackground);
-}
-[data-rk] .ju367vfl {
-	color: var(--rk-colors-connectButtonBackground);
-}
-[data-rk] .ju367vfm:hover {
-	color: var(--rk-colors-connectButtonBackground);
-}
-[data-rk] .ju367vfn:active {
-	color: var(--rk-colors-connectButtonBackground);
-}
-[data-rk] .ju367vfo {
-	color: var(--rk-colors-connectButtonBackgroundError);
-}
-[data-rk] .ju367vfp:hover {
-	color: var(--rk-colors-connectButtonBackgroundError);
-}
-[data-rk] .ju367vfq:active {
-	color: var(--rk-colors-connectButtonBackgroundError);
-}
-[data-rk] .ju367vfr {
-	color: var(--rk-colors-connectButtonInnerBackground);
-}
-[data-rk] .ju367vfs:hover {
-	color: var(--rk-colors-connectButtonInnerBackground);
-}
-[data-rk] .ju367vft:active {
-	color: var(--rk-colors-connectButtonInnerBackground);
-}
-[data-rk] .ju367vfu {
-	color: var(--rk-colors-connectButtonText);
-}
-[data-rk] .ju367vfv:hover {
-	color: var(--rk-colors-connectButtonText);
-}
-[data-rk] .ju367vfw:active {
-	color: var(--rk-colors-connectButtonText);
-}
-[data-rk] .ju367vfx {
-	color: var(--rk-colors-connectButtonTextError);
-}
-[data-rk] .ju367vfy:hover {
-	color: var(--rk-colors-connectButtonTextError);
-}
-[data-rk] .ju367vfz:active {
-	color: var(--rk-colors-connectButtonTextError);
-}
-[data-rk] .ju367vg0 {
-	color: var(--rk-colors-connectionIndicator);
-}
-[data-rk] .ju367vg1:hover {
-	color: var(--rk-colors-connectionIndicator);
-}
-[data-rk] .ju367vg2:active {
-	color: var(--rk-colors-connectionIndicator);
-}
-[data-rk] .ju367vg3 {
-	color: var(--rk-colors-downloadBottomCardBackground);
-}
-[data-rk] .ju367vg4:hover {
-	color: var(--rk-colors-downloadBottomCardBackground);
-}
-[data-rk] .ju367vg5:active {
-	color: var(--rk-colors-downloadBottomCardBackground);
-}
-[data-rk] .ju367vg6 {
-	color: var(--rk-colors-downloadTopCardBackground);
-}
-[data-rk] .ju367vg7:hover {
-	color: var(--rk-colors-downloadTopCardBackground);
-}
-[data-rk] .ju367vg8:active {
-	color: var(--rk-colors-downloadTopCardBackground);
-}
-[data-rk] .ju367vg9 {
-	color: var(--rk-colors-error);
-}
-[data-rk] .ju367vga:hover {
-	color: var(--rk-colors-error);
-}
-[data-rk] .ju367vgb:active {
-	color: var(--rk-colors-error);
-}
-[data-rk] .ju367vgc {
-	color: var(--rk-colors-generalBorder);
-}
-[data-rk] .ju367vgd:hover {
-	color: var(--rk-colors-generalBorder);
-}
-[data-rk] .ju367vge:active {
-	color: var(--rk-colors-generalBorder);
-}
-[data-rk] .ju367vgf {
-	color: var(--rk-colors-generalBorderDim);
-}
-[data-rk] .ju367vgg:hover {
-	color: var(--rk-colors-generalBorderDim);
-}
-[data-rk] .ju367vgh:active {
-	color: var(--rk-colors-generalBorderDim);
-}
-[data-rk] .ju367vgi {
-	color: var(--rk-colors-menuItemBackground);
-}
-[data-rk] .ju367vgj:hover {
-	color: var(--rk-colors-menuItemBackground);
-}
-[data-rk] .ju367vgk:active {
-	color: var(--rk-colors-menuItemBackground);
-}
-[data-rk] .ju367vgl {
-	color: var(--rk-colors-modalBackdrop);
-}
-[data-rk] .ju367vgm:hover {
-	color: var(--rk-colors-modalBackdrop);
-}
-[data-rk] .ju367vgn:active {
-	color: var(--rk-colors-modalBackdrop);
-}
-[data-rk] .ju367vgo {
-	color: var(--rk-colors-modalBackground);
-}
-[data-rk] .ju367vgp:hover {
-	color: var(--rk-colors-modalBackground);
-}
-[data-rk] .ju367vgq:active {
-	color: var(--rk-colors-modalBackground);
-}
-[data-rk] .ju367vgr {
-	color: var(--rk-colors-modalBorder);
-}
-[data-rk] .ju367vgs:hover {
-	color: var(--rk-colors-modalBorder);
-}
-[data-rk] .ju367vgt:active {
-	color: var(--rk-colors-modalBorder);
-}
-[data-rk] .ju367vgu {
-	color: var(--rk-colors-modalText);
-}
-[data-rk] .ju367vgv:hover {
-	color: var(--rk-colors-modalText);
-}
-[data-rk] .ju367vgw:active {
-	color: var(--rk-colors-modalText);
-}
-[data-rk] .ju367vgx {
-	color: var(--rk-colors-modalTextDim);
-}
-[data-rk] .ju367vgy:hover {
-	color: var(--rk-colors-modalTextDim);
-}
-[data-rk] .ju367vgz:active {
-	color: var(--rk-colors-modalTextDim);
-}
-[data-rk] .ju367vh0 {
-	color: var(--rk-colors-modalTextSecondary);
-}
-[data-rk] .ju367vh1:hover {
-	color: var(--rk-colors-modalTextSecondary);
-}
-[data-rk] .ju367vh2:active {
-	color: var(--rk-colors-modalTextSecondary);
-}
-[data-rk] .ju367vh3 {
-	color: var(--rk-colors-profileAction);
-}
-[data-rk] .ju367vh4:hover {
-	color: var(--rk-colors-profileAction);
-}
-[data-rk] .ju367vh5:active {
-	color: var(--rk-colors-profileAction);
-}
-[data-rk] .ju367vh6 {
-	color: var(--rk-colors-profileActionHover);
-}
-[data-rk] .ju367vh7:hover {
-	color: var(--rk-colors-profileActionHover);
-}
-[data-rk] .ju367vh8:active {
-	color: var(--rk-colors-profileActionHover);
-}
-[data-rk] .ju367vh9 {
-	color: var(--rk-colors-profileForeground);
-}
-[data-rk] .ju367vha:hover {
-	color: var(--rk-colors-profileForeground);
-}
-[data-rk] .ju367vhb:active {
-	color: var(--rk-colors-profileForeground);
-}
-[data-rk] .ju367vhc {
-	color: var(--rk-colors-selectedOptionBorder);
-}
-[data-rk] .ju367vhd:hover {
-	color: var(--rk-colors-selectedOptionBorder);
-}
-[data-rk] .ju367vhe:active {
-	color: var(--rk-colors-selectedOptionBorder);
-}
-[data-rk] .ju367vhf {
-	color: var(--rk-colors-standby);
-}
-[data-rk] .ju367vhg:hover {
-	color: var(--rk-colors-standby);
-}
-[data-rk] .ju367vhh:active {
-	color: var(--rk-colors-standby);
-}
-@media screen and (min-width: 768px) {
-	[data-rk] .ju367v1 {
-		align-items: flex-start;
-	}
-	[data-rk] .ju367v3 {
-		align-items: flex-end;
-	}
-	[data-rk] .ju367v5 {
-		align-items: center;
-	}
-	[data-rk] .ju367v7 {
-		display: none;
-	}
-	[data-rk] .ju367v9 {
-		display: block;
-	}
-	[data-rk] .ju367vb {
-		display: flex;
-	}
-	[data-rk] .ju367vd {
-		display: inline;
-	}
-}
-
-/* vanilla-extract-css-ns:src/css/touchableStyles.css.ts.vanilla.css?source=Ll8xMmNibzhpMywuXzEyY2JvOGkzOjphZnRlciB7CiAgLS1fMTJjYm84aTA6IDE7CiAgLS1fMTJjYm84aTE6IDE7Cn0KLl8xMmNibzhpMzpob3ZlciB7CiAgdHJhbnNmb3JtOiBzY2FsZSh2YXIoLS1fMTJjYm84aTApKTsKfQouXzEyY2JvOGkzOmFjdGl2ZSB7CiAgdHJhbnNmb3JtOiBzY2FsZSh2YXIoLS1fMTJjYm84aTEpKTsKfQouXzEyY2JvOGkzOmFjdGl2ZTo6YWZ0ZXIgewogIGNvbnRlbnQ6ICIiOwogIGJvdHRvbTogLTFweDsKICBkaXNwbGF5OiBibG9jazsKICBsZWZ0OiAtMXB4OwogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICByaWdodDogLTFweDsKICB0b3A6IC0xcHg7CiAgdHJhbnNmb3JtOiBzY2FsZShjYWxjKCgxIC8gdmFyKC0tXzEyY2JvOGkxKSkgKiB2YXIoLS1fMTJjYm84aTApKSk7Cn0KLl8xMmNibzhpNCwuXzEyY2JvOGk0OjphZnRlciB7CiAgLS1fMTJjYm84aTA6IDEuMDI1Owp9Ci5fMTJjYm84aTUsLl8xMmNibzhpNTo6YWZ0ZXIgewogIC0tXzEyY2JvOGkwOiAxLjE7Cn0KLl8xMmNibzhpNiwuXzEyY2JvOGk2OjphZnRlciB7CiAgLS1fMTJjYm84aTE6IDAuOTU7Cn0KLl8xMmNibzhpNywuXzEyY2JvOGk3OjphZnRlciB7CiAgLS1fMTJjYm84aTE6IDAuOTsKfQ== */
-[data-rk] ._12cbo8i3,
-[data-rk] ._12cbo8i3::after {
-	--_12cbo8i0: 1;
-	--_12cbo8i1: 1;
-}
-[data-rk] ._12cbo8i3:hover {
-	transform: scale(var(--_12cbo8i0));
-}
-[data-rk] ._12cbo8i3:active {
-	transform: scale(var(--_12cbo8i1));
-}
-[data-rk] ._12cbo8i3:active::after {
-	content: "";
-	bottom: -1px;
-	display: block;
-	left: -1px;
-	position: absolute;
-	right: -1px;
-	top: -1px;
-	transform: scale(calc((1 / var(--_12cbo8i1)) * var(--_12cbo8i0)));
-}
-[data-rk] ._12cbo8i4,
-[data-rk] ._12cbo8i4::after {
-	--_12cbo8i0: 1.025;
-}
-[data-rk] ._12cbo8i5,
-[data-rk] ._12cbo8i5::after {
-	--_12cbo8i0: 1.1;
-}
-[data-rk] ._12cbo8i6,
-[data-rk] ._12cbo8i6::after {
-	--_12cbo8i1: 0.95;
-}
-[data-rk] ._12cbo8i7,
-[data-rk] ._12cbo8i7::after {
-	--_12cbo8i1: 0.9;
-}
-
-/* vanilla-extract-css-ns:src/components/Icons/Icons.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMWx1dWxlNDEgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7CiAgfQp9Ci5fMWx1dWxlNDIgewogIGFuaW1hdGlvbjogXzFsdXVsZTQxIDNzIGluZmluaXRlIGxpbmVhcjsKfQouXzFsdXVsZTQzIHsKICBiYWNrZ3JvdW5kOiBjb25pYy1ncmFkaWVudChmcm9tIDE4MGRlZyBhdCA1MCUgNTAlLCByZ2JhKDcyLCAxNDYsIDI1NCwgMCkgMGRlZywgY3VycmVudENvbG9yIDI4Mi4wNGRlZywgcmdiYSg3MiwgMTQ2LCAyNTQsIDApIDMxOS44NmRlZywgcmdiYSg3MiwgMTQ2LCAyNTQsIDApIDM2MGRlZyk7CiAgaGVpZ2h0OiAyMXB4OwogIHdpZHRoOiAyMXB4Owp9 */
-@keyframes _1luule41 {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
-[data-rk] ._1luule42 {
-	animation: _1luule41 3s infinite linear;
-}
-[data-rk] ._1luule43 {
-	background: conic-gradient(
-		from 180deg at 50% 50%,
-		rgba(72, 146, 254, 0) 0deg,
-		currentColor 282.04deg,
-		rgba(72, 146, 254, 0) 319.86deg,
-		rgba(72, 146, 254, 0) 360deg
-	);
-	height: 21px;
-	width: 21px;
-}
-
-/* vanilla-extract-css-ns:src/components/Dialog/Dialog.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfOXBtNGtpMCB7CiAgMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMCUpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwKTsKICB9Cn0KQGtleWZyYW1lcyBfOXBtNGtpMSB7CiAgMCUgewogICAgb3BhY2l0eTogMDsKICB9CiAgMTAwJSB7CiAgICBvcGFjaXR5OiAxOwogIH0KfQouXzlwbTRraTMgewogIGFuaW1hdGlvbjogXzlwbTRraTEgMTUwbXMgZWFzZTsKICBib3R0b206IC0yMDBweDsKICBsZWZ0OiAtMjAwcHg7CiAgcGFkZGluZzogMjAwcHg7CiAgcmlnaHQ6IC0yMDBweDsKICB0b3A6IC0yMDBweDsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVooMCk7CiAgei1pbmRleDogMjE0NzQ4MzY0NjsKfQouXzlwbTRraTUgewogIGFuaW1hdGlvbjogXzlwbTRraTAgMzUwbXMgY3ViaWMtYmV6aWVyKC4xNSwxLjE1LDAuNiwxLjAwKSwgXzlwbTRraTEgMTUwbXMgZWFzZTsKICBtYXgtd2lkdGg6IDEwMHZ3Owp9 */
-@keyframes _9pm4ki0 {
-	0% {
-		transform: translateY(100%);
-	}
-	100% {
-		transform: translateY(0);
-	}
-}
-@keyframes _9pm4ki1 {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-[data-rk] ._9pm4ki3 {
-	animation: _9pm4ki1 150ms ease;
-	bottom: -200px;
-	left: -200px;
-	padding: 200px;
-	right: -200px;
-	top: -200px;
-	transform: translateZ(0);
-	z-index: 2147483646;
-}
-[data-rk] ._9pm4ki5 {
-	animation:
-		_9pm4ki0 350ms cubic-bezier(0.15, 1.15, 0.6, 1),
-		_9pm4ki1 150ms ease;
-	max-width: 100vw;
-}
-
-/* vanilla-extract-css-ns:src/components/Dialog/DialogContent.css.ts.vanilla.css?source=Ll8xY2tqcG9rMSB7CiAgYm94LXNpemluZzogY29udGVudC1ib3g7CiAgbWF4LXdpZHRoOiAxMDB2dzsKICB3aWR0aDogMzYwcHg7Cn0KLl8xY2tqcG9rMiB7CiAgd2lkdGg6IDEwMHZ3Owp9Ci5fMWNranBvazMgewogIG1pbi13aWR0aDogNzIwcHg7CiAgd2lkdGg6IDcyMHB4Owp9Ci5fMWNranBvazQgewogIG1pbi13aWR0aDogMzY4cHg7CiAgd2lkdGg6IDM2OHB4Owp9Ci5fMWNranBvazYgewogIGJvcmRlci13aWR0aDogMHB4OwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7CiAgd2lkdGg6IDEwMHZ3Owp9CkBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDc2OHB4KSB7CiAgLl8xY2tqcG9rMSB7CiAgICB3aWR0aDogMzYwcHg7CiAgfQogIC5fMWNranBvazIgewogICAgd2lkdGg6IDQ4MHB4OwogIH0KICAuXzFja2pwb2s0IHsKICAgIG1pbi13aWR0aDogMzY4cHg7CiAgICB3aWR0aDogMzY4cHg7CiAgfQp9CkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7CiAgLl8xY2tqcG9rNyB7CiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAwOwogICAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6IDA7CiAgICBtYXJnaW4tdG9wOiAtMjAwcHg7CiAgICBwYWRkaW5nLWJvdHRvbTogMjAwcHg7CiAgICB0b3A6IDIwMHB4OwogIH0KfQ== */
-[data-rk] ._1ckjpok1 {
-	box-sizing: content-box;
-	max-width: 100vw;
-	width: 360px;
-}
-[data-rk] ._1ckjpok2 {
-	width: 100vw;
-}
-[data-rk] ._1ckjpok3 {
-	min-width: 720px;
-	width: 720px;
-}
-[data-rk] ._1ckjpok4 {
-	min-width: 368px;
-	width: 368px;
-}
-[data-rk] ._1ckjpok6 {
-	border-width: 0px;
-	box-sizing: border-box;
-	width: 100vw;
-}
-@media screen and (min-width: 768px) {
-	[data-rk] ._1ckjpok1 {
-		width: 360px;
-	}
-	[data-rk] ._1ckjpok2 {
-		width: 480px;
-	}
-	[data-rk] ._1ckjpok4 {
-		min-width: 368px;
-		width: 368px;
-	}
-}
-@media screen and (max-width: 767px) {
-	[data-rk] ._1ckjpok7 {
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-		margin-top: -200px;
-		padding-bottom: 200px;
-		top: 200px;
-	}
-}
-
-/* vanilla-extract-css-ns:src/components/MenuButton/MenuButton.css.ts.vanilla.css?source=LnY5aG9yYjA6aG92ZXIgewogIGJhY2tncm91bmQ6IHVuc2V0Owp9 */
-[data-rk] .v9horb0:hover {
-	background: unset;
-}
-
-/* vanilla-extract-css-ns:src/components/ChainModal/ChainModal.css.ts.vanilla.css?source=Ll8xOGRxdzl4MCB7CiAgbWF4LWhlaWdodDogNDU2cHg7CiAgb3ZlcmZsb3cteTogYXV0bzsKICBvdmVyZmxvdy14OiBoaWRkZW47Cn0KLl8xOGRxdzl4MSB7CiAgbWF4LWhlaWdodDogNDU2cHg7CiAgb3ZlcmZsb3cteTogYXV0bzsKICBvdmVyZmxvdy14OiBoaWRkZW47CiAgc2Nyb2xsYmFyLXdpZHRoOiBub25lOwp9Ci5fMThkcXc5eDE6Oi13ZWJraXQtc2Nyb2xsYmFyIHsKICBkaXNwbGF5OiBub25lOwp9 */
-[data-rk] ._18dqw9x0 {
-	max-height: 456px;
-	overflow-y: auto;
-	overflow-x: hidden;
-}
-[data-rk] ._18dqw9x1 {
-	max-height: 456px;
-	overflow-y: auto;
-	overflow-x: hidden;
-	scrollbar-width: none;
-}
-[data-rk] ._18dqw9x1::-webkit-scrollbar {
-	display: none;
-}
-
-/* vanilla-extract-css-ns:src/components/ModalSelection/ModalSelection.css.ts.vanilla.css?source=Lmc1a2wwbDAgewogIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0= */
-[data-rk] .g5kl0l0 {
-	border-color: transparent;
-}
-
-/* vanilla-extract-css-ns:src/components/ConnectOptions/DesktopOptions.css.ts.vanilla.css?source=Ll8xdnd0MGNnMCB7CiAgYmFja2dyb3VuZDogd2hpdGU7CiAgY29sb3I6IGJsYWNrOwp9Ci5fMXZ3dDBjZzIgewogIG1heC1oZWlnaHQ6IDQ1NHB4OwogIG92ZXJmbG93LXk6IGF1dG87Cn0KLl8xdnd0MGNnMyB7CiAgbWluLXdpZHRoOiAyODdweDsKfQouXzF2d3QwY2c0IHsKICBtaW4td2lkdGg6IDEwMCU7Cn0= */
-[data-rk] ._1vwt0cg0 {
-	background: white;
-	color: black;
-}
-[data-rk] ._1vwt0cg2 {
-	max-height: 454px;
-	overflow-y: auto;
-}
-[data-rk] ._1vwt0cg3 {
-	min-width: 287px;
-}
-[data-rk] ._1vwt0cg4 {
-	min-width: 100%;
-}
-
-/* vanilla-extract-css-ns:src/components/ConnectOptions/MobileOptions.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMWFtMTQ0MTEgewogIDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwOwogIH0KICAxMDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAtMjgzOwogIH0KfQouXzFhbTE0NDEwIHsKICBvdmVyZmxvdzogYXV0bzsKICBzY3JvbGxiYXItd2lkdGg6IG5vbmU7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVaKDApOwp9Ci5fMWFtMTQ0MTA6Oi13ZWJraXQtc2Nyb2xsYmFyIHsKICBkaXNwbGF5OiBub25lOwp9Ci5fMWFtMTQ0MTIgewogIGFuaW1hdGlvbjogXzFhbTE0NDExIDFzIGxpbmVhciBpbmZpbml0ZTsKICBzdHJva2UtZGFzaGFycmF5OiA5OCAxOTY7CiAgZmlsbDogbm9uZTsKICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgc3Ryb2tlLXdpZHRoOiA0Owp9Ci5fMWFtMTQ0MTMgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKfQ== */
-@keyframes _1am14411 {
-	0% {
-		stroke-dashoffset: 0;
-	}
-	100% {
-		stroke-dashoffset: -283;
-	}
-}
-[data-rk] ._1am14410 {
-	overflow: auto;
-	scrollbar-width: none;
-	transform: translateZ(0);
-}
-[data-rk] ._1am14410::-webkit-scrollbar {
-	display: none;
-}
-[data-rk] ._1am14412 {
-	animation: _1am14411 1s linear infinite;
-	stroke-dasharray: 98 196;
-	fill: none;
-	stroke-linecap: round;
-	stroke-width: 4;
-}
-[data-rk] ._1am14413 {
-	position: absolute;
-}
-
-/* vanilla-extract-css-ns:src/components/WalletButton/WalletButton.css.ts.vanilla.css?source=Ll8xeTJsbmZpMCB7CiAgYm9yZGVyOiAxcHggc29saWQgcmdiYSgxNiwgMjEsIDMxLCAwLjA2KTsKfQouXzF5MmxuZmkxIHsKICBtYXgtd2lkdGg6IGZpdC1jb250ZW50Owp9 */
-[data-rk] ._1y2lnfi0 {
-	border: 1px solid rgba(16, 21, 31, 0.06);
-}
-[data-rk] ._1y2lnfi1 {
-	max-width: -moz-fit-content;
-	max-width: fit-content;
-}
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 3d5a3da..851aa69 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -8,9 +8,9 @@
 body {
   margin: 0;
   padding: 0;
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  background: var(--bg-gradient-start);
   min-height: 100vh;
-  color: #f1f5f9;
+  color: var(--text-primary);
   font-family: 'Outfit', sans-serif;
 }
 
@@ -35,7 +35,7 @@ body {
   width: 100vw;
   height: 100vh;
   pointer-events: none;
-  opacity: 0.2;
+  opacity: 0.3;
   z-index: 0;
 }
 
@@ -65,15 +65,15 @@ body {
   justify-content: space-between;
   align-items: center;
   padding: 12px 20px;
-  background: #10b981;
-  border: 1px solid #059669;
+  background: var(--color-primary);
+  border: 1px solid var(--color-primary-muted);
   border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);
+  box-shadow: 0 4px 20px var(--color-primary-alpha-20);
   transition: box-shadow 0.2s ease;
 }
 
 .navbar-inner:hover {
-  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.15);
+  box-shadow: 0 6px 24px var(--color-primary-alpha-15);
 }
 
 .navbar-right {
@@ -134,8 +134,111 @@ body {
   fill: #a7f3d0;
 }
 
+/* Navbar Logo Container (for subdomain network icons) */
+.navbar-logo-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 0 6px;
+}
+
+.navbar-logo-group {
+  display: flex;
+  align-items: center;
+  background: transparent;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.navbar-logo-group:hover {
+  background: var(--overlay-light-20);
+}
+
+.navbar-logo-group:hover .navbar-logo-arrow {
+  color: #ffffff;
+}
+
+.navbar-logo-group:hover .navbar-logo-network {
+  transform: scale(1.05);
+}
+
+.navbar-logo-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 36px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: 8px 0 0 8px;
+  transition: all 0.2s ease;
+}
+
+.navbar-logo-network {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px 4px 2px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 0 8px 8px 0;
+  transition: all 0.2s ease;
+}
+
+.navbar-logo-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  overflow: hidden;
+  min-width: 180px;
+}
+
+.navbar-logo-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 16px;
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  font-family: "Outfit", sans-serif;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-align: left;
+}
+
+.navbar-logo-dropdown-item:hover {
+  background: var(--color-primary-alpha-10);
+}
+
+.navbar-logo-dropdown-item.active {
+  background: var(--overlay-light-10);
+}
+
+.navbar-logo-dropdown-item svg {
+  flex-shrink: 0;
+}
+
+.navbar-logo-dropdown-divider {
+  height: 1px;
+  background: var(--border-primary);
+  margin: 4px 0;
+}
+
 .navbar a:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--overlay-light-20);
   color: #ffffff;
   transform: translateY(-1px);
 }
@@ -156,8 +259,8 @@ body {
 }
 
 .navbar-toggle-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.3);
+  background: var(--overlay-light-20);
+  border-color: var(--overlay-light-20);
   color: #ffffff;
   transform: translateY(-1px);
 }
@@ -557,36 +660,7 @@ body {
   justify-content: space-around;
 }
 
-/* Form Input Styles */
-.form-group {
-  margin-bottom: 16px;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 6px;
-}
-
-.form-input {
-  width: 100%;
-  padding: 12px 16px;
-  box-sizing: border-box;
-}
-
-.form-input:disabled {
-  cursor: not-allowed;
-}
-
-.form-select {
-  padding: 12px 16px;
-  box-sizing: border-box;
-  cursor: pointer;
-  min-width: 200px;
-}
-
-.form-select:disabled {
-  cursor: not-allowed;
-}
+/* Form Input Styles - consolidated below in Form Styles section */
 
 .dropdown-container {
   display: flex;
@@ -697,12 +771,6 @@ body {
   gap: 8px;
 }
 
-/* Settings Page */
-.settings-container {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
 .settings-header {
   display: flex;
   justify-content: space-between;
@@ -1316,61 +1384,6 @@ body {
   }
 }
 
-/* Footer */
-.app-footer {
-  padding: 16px 24px;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  background: #10b981;
-  border-top: 2px solid #059669;
-  box-shadow: 0 -4px 20px rgba(16, 185, 129, 0.2);
-}
-
-.footer-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.footer-left {
-  display: flex;
-  align-items: center;
-}
-
-.footer-link {
-  text-decoration: none;
-  padding: 6px 12px;
-  font-family: 'Outfit', sans-serif;
-  font-weight: 600;
-  color: #ffffff;
-  border-radius: 8px;
-}
-
-.footer-link:hover {
-  background: rgba(255, 255, 255, 0.2);
-  color: #ffffff;
-  transform: translateY(-1px);
-}
-
-.footer-version {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: 'Outfit', sans-serif;
-  font-size: 0.9rem;
-  border-radius: 4px;
-}
-
-.version-label {
-  color: #ffffff;
-  font-weight: 600;
-}
-
 /* No Contracts Message */
 .no-contracts-message {
   text-align: center;
@@ -1607,7 +1620,7 @@ body {
   height: 36px;
   border-radius: 50%;
   object-fit: cover;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--overlay-light-10);
   box-shadow: 0 0 0 2px #1e293b, 0 0 0 4px rgba(99, 102, 241, 0.15);
 }
 
@@ -1678,7 +1691,7 @@ body {
 }
 
 .row-status-label {
-  color: #6b7280;
+  color: var(--text-secondary);
   font-size: 0.95rem;
 }
 
@@ -1690,22 +1703,22 @@ body {
 .row-status-value-approved {
   font-weight: 500;
   font-size: 1rem;
-  color: #10b981;
+  color: var(--color-primary);
 }
 
 .row-status-value-deposited {
   font-weight: 500;
   font-size: 1rem;
-  color: #3b82f6;
+  color: var(--color-info);
 }
 
 .row-status-value-gray {
   font-size: 1rem;
-  color: #6b7280;
+  color: var(--text-secondary);
 }
 
 .row-status-disconnected {
-  color: #9ca3af;
+  color: var(--text-tertiary);
   font-size: 0.875em;
 }
 
@@ -1729,9 +1742,9 @@ body {
 .status-info {
   text-align: left;
   padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--overlay-light-2);
   border-radius: var(--radius-sm);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--overlay-light-5);
   min-width: 160px;
 }
 
@@ -1756,7 +1769,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-light-5);
   color: var(--text-primary);
   backdrop-filter: blur(6px);
   transition: 0.25s;
@@ -1809,7 +1822,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-light-5);
   color: var(--text-primary);
   backdrop-filter: blur(6px);
   transition: 0.25s;
@@ -1854,7 +1867,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 10px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-light-5);
   color: var(--text-primary);
   backdrop-filter: blur(6px);
   transition: 0.25s;
@@ -1899,7 +1912,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 12px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-light-5);
   color: var(--text-primary);
   backdrop-filter: blur(6px);
   transition: 0.25s;
@@ -2010,7 +2023,7 @@ body {
 .stat-value-purple {
   font-size: 1.2rem;
   font-weight: bold;
-  color: #8b5cf6;
+  color: var(--color-accent);
 }
 
 .stat-value-green {
@@ -2459,7 +2472,7 @@ body {
 
 .notification__close:hover {
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--overlay-light-5);
 }
 
 /* Loading */
@@ -2515,7 +2528,7 @@ body {
   gap: 28px;
   padding: 48px 32px;
   max-width: 620px;
-  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
+  background: linear-gradient(145deg, var(--overlay-light-5), var(--overlay-light-2));
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-soft);
@@ -2557,39 +2570,10 @@ body {
 }
 
 .table-wrapper::-webkit-scrollbar-thumb {
-  background: #333333;
+  background: var(--scrollbar-thumb);
   border-radius: 20px;
 }
 
-/* Light Theme Override */
-.light-theme {
-  /* Light Theme DeFi Palette */
-  --bg-gradient: radial-gradient(circle at 20% 20%, #F0F0F0 0%, #E0E0E0 70%);
-  --panel: #E0E0E0;
-  --panel-alt: #E8E8E8;
-  --surface-2: #FFFFFF;
-  --accent: #00A542;
-  --accent-alt: #00BFA5;
-  --accent-grad: linear-gradient(135deg, #00A542 0%, #00BFA5 100%);
-  --success: #00A542;
-  --warning: #CC9E00;
-  --danger: #D32F2F;
-  --text-primary: #1E1E1E;
-  --text-sec: #666666;
-  --border-color: #D0D0D0;
-  --gold: #CC9E00;
-  --highlight: #00BFA5;
-  --shadow-soft: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
-  --shadow-pop: 0 8px 28px -4px rgba(0, 0, 0, 0.15);
-}
-
-.light-theme .navbar-inner {
-  background: rgba(16, 185, 129, 0.95);
-}
-
-.light-theme .table-wrapper::-webkit-scrollbar-thumb {
-  background: #D0D0D0;
-}
 
 /* Modal Styles */
 .modal-overlay {
@@ -2664,7 +2648,11 @@ body {
   justify-content: space-around;
 }
 
-/* Form Input Styles */
+/* ==========================================================================
+   FORM STYLES - Consolidated form classes
+   All form inputs share base styles
+   ========================================================================== */
+
 .form-group {
   margin-bottom: 16px;
 }
@@ -2677,8 +2665,9 @@ body {
   font-size: 0.875rem;
 }
 
-.form-input {
-  width: 100%;
+/* Shared base styles for form inputs and selects */
+.form-input,
+.form-select {
   padding: 12px 16px;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
@@ -2689,43 +2678,31 @@ body {
   box-sizing: border-box;
 }
 
-.form-input:focus {
+.form-input:focus,
+.form-select:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.1);
 }
 
-.form-input:disabled {
+.form-input:disabled,
+.form-select:disabled {
   background: var(--panel-alt);
   color: var(--text-sec);
   cursor: not-allowed;
 }
 
+/* Input-specific styles */
+.form-input {
+  width: 100%;
+}
+
+/* Select-specific styles */
 .form-select {
-  padding: 12px 16px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  background: var(--surface-2);
-  color: var(--text-primary);
-  font-size: 1rem;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  box-sizing: border-box;
   cursor: pointer;
   min-width: 200px;
 }
 
-.form-select:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.1);
-}
-
-.form-select:disabled {
-  background: var(--panel-alt);
-  color: var(--text-sec);
-  cursor: not-allowed;
-}
-
 .dropdown-container {
   display: flex;
   flex-direction: column;
@@ -2896,11 +2873,6 @@ body {
 
 /* ==================== SETTINGS PAGE ==================== */
 
-.settings-container {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
 .settings-header {
   display: flex;
   justify-content: space-between;
@@ -3055,7 +3027,7 @@ body {
 .preset-btn.active {
   border-color: var(--accent);
   background: var(--accent);
-  color: #000;
+  color: var(--text-inverse);
 }
 
 .preset-detail {
@@ -3249,12 +3221,12 @@ body {
 
 .token-allowance-display {
   margin-top: 4px;
-  color: #10b981;
+  color: var(--color-primary);
 }
 
 .token-checking-approval {
   margin-top: 4px;
-  color: #6b7280;
+  color: var(--text-secondary);
 }
 
 .token-form-error-margin {
@@ -3298,7 +3270,7 @@ body {
   position: absolute;
   right: 8px;
   background: var(--accent);
-  color: #000;
+  color: var(--text-inverse);
   border: none;
   border-radius: var(--radius-xs);
   padding: 4px 8px;
@@ -3338,7 +3310,7 @@ body {
 }
 
 .token-validation-status.validating {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--overlay-light-5);
   color: var(--text-sec);
   border: 1px solid var(--border-color);
 }
@@ -3454,7 +3426,7 @@ body {
 .help-hero-icon {
   font-size: 4rem;
   margin-bottom: 1rem;
-  background: linear-gradient(135deg, #10b981, #059669);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-muted));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -3612,8 +3584,8 @@ body {
 .about-disclaimer {
   padding: 2rem;
   margin-bottom: 2rem;
-  background: rgba(245, 158, 11, 0.1);
-  border: 1px solid rgba(245, 158, 11, 0.3);
+  background: var(--color-warning-alpha-10);
+  border: 1px solid var(--color-warning-alpha-30);
 }
 
 .about-disclaimer {
@@ -3633,12 +3605,12 @@ body {
 
 .help-troubleshooting-title {
   text-align: center;
-  color: #f59e0b;
+  color: var(--color-warning);
   margin-bottom: 2rem;
 }
 
 .about-disclaimer-title {
-  color: #f59e0b;
+  color: var(--color-warning);
   margin: 0.1rem 0rem;
 }
 
@@ -3995,8 +3967,8 @@ code {
 
 .app-footer {
   padding: 12px 24px;
-  border-top: 1px solid var(--border-color);
-  background: rgba(30, 30, 30, 0.3);
+  border-top: 1px solid var(--border-secondary);
+  background: var(--bg-secondary);
   backdrop-filter: blur(8px);
   position: fixed;
   bottom: 0;
@@ -4007,6 +3979,7 @@ code {
 
 .footer-content {
   max-width: 1400px;
+  padding: 0px 10px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
@@ -4016,10 +3989,11 @@ code {
 .footer-left {
   display: flex;
   align-items: center;
+  gap: 16px;
 }
 
 .footer-link {
-  color: var(--text-sec);
+  color: var(--text-primary);
   text-decoration: none;
   font-size: 0.75rem;
   font-weight: 500;
@@ -4033,11 +4007,10 @@ code {
   background: rgba(0, 200, 83, 0.1);
 }
 
-.footer-version {
+.footer-right {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 0.75rem;
   color: var(--text-sec);
 }
 
@@ -4072,7 +4045,7 @@ code {
   width: 22px;
   height: 22px;
   border-radius: 5px;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--overlay-light-10);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: var(--text-sec);
   transition: all 0.2s ease;
@@ -4091,9 +4064,6 @@ code {
   transform: translateY(-1px);
 }
 
-.light-theme .app-footer {
-  background: rgba(240, 240, 240, 0.8);
-}
 
 /* Add bottom padding to prevent content from being hidden behind fixed footer */
 .app-content {
@@ -4206,27 +4176,11 @@ code {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 60vh;
   width: 100%;
   background: transparent;
 }
 
-/* Page card with semi-transparent background */
-.page-card {
-  background: rgba(15, 23, 42, 0.85);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 20px;
-  border: 1px solid rgba(16, 185, 129, 0.15);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-  padding: 24px;
-}
-
-/* When page-card is used with container-wide, adjust for alignment with navbar */
-.container-wide.page-card {
-  max-width: 1352px;
-  padding: 0px 12px;
-}
+/* Card classes are consolidated below with block-display-card */
 
 .home-title {
   font-family: 'Outfit', sans-serif;
@@ -4235,13 +4189,41 @@ code {
   margin-top: 12px;
   margin-bottom: 12px;
   letter-spacing: -2px;
-  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  color: #10b981;
+  color: var(--color-primary);
   /* Fallback */
-  text-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
+  text-shadow: 0 10px 30px var(--color-primary-alpha-20);
+}
+
+/* Network-specific title on network page */
+.home-title.network-title {
+  background: none;
+  -webkit-background-clip: unset;
+  -webkit-text-fill-color: var(--color-primary);
+  background-clip: unset;
+  text-shadow: none;
+}
+
+.network-title-name {
+  display: inline;
+  font-weight: 800;
+  transition: all 0.3s ease;
+  text-shadow:
+    0 0 10px color-mix(in srgb, var(--network-color, #fff) 50%, transparent),
+    0 0 20px color-mix(in srgb, var(--network-color, #fff) 25%, transparent);
+}
+
+.network-description {
+  font-family: "Outfit", sans-serif;
+  font-size: 1rem;
+  color: #0da978;
+  text-align: center;
+  margin: 0 auto 16px;
+  max-width: 600px;
+  line-height: 1.5;
 }
 
 .localhost-network-container {
@@ -4286,8 +4268,8 @@ code {
 }
 
 .search-input:focus {
-  border-color: #10b981;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
+  border-color: var(--color-primary);
+  box-shadow: 0 4px 12px var(--color-primary-alpha-15);
 }
 
 .search-button {
@@ -4295,16 +4277,16 @@ code {
   font-size: 1.1rem;
   font-weight: 600;
   color: white;
-  background-color: #10b981;
+  background-color: var(--color-primary);
   border: none;
   border-radius: 12px;
   cursor: pointer;
   transition: background-color 0.2s ease;
-  box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2);
+  box-shadow: 0 4px 6px var(--color-primary-alpha-20);
 }
 
 .search-button:hover {
-  background-color: #059669;
+  background-color: var(--color-primary-muted);
 }
 
 @media (max-width: 600px) {
@@ -4338,32 +4320,69 @@ code {
   }
 }
 
-/* Block Display Component */
+/* ==========================================================================
+   CARD STYLES - Consolidated card classes
+   page-card and block-display-card share base styles
+   ========================================================================== */
+
+/* Shared base styles for all card variants */
+.page-card,
+.block-display-card {
+  background: var(--bg-primary);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--color-primary-alpha-15);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+/* page-card - larger padding and border-radius */
+.page-card {
+  border-radius: 20px;
+  padding: 24px;
+}
+
+/* When page-card is used with container-wide, adjust for alignment with navbar */
+.container-wide.page-card {
+  max-width: 1352px;
+  padding: 0px 12px;
+}
+
+/* block-display-card - full width variant */
 .block-display-card {
-  background: #ffffff;
   border-radius: 16px;
   padding: 20px;
-  max-width: 100%;
   width: 100%;
-  margin: 0;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .block-display-header {
   display: flex;
-  align-items: baseline;
+  align-items: center;
+  justify-content: space-between;
   gap: 12px;
   margin-bottom: 20px;
   padding-bottom: 16px;
-  border-bottom: 2px solid rgba(16, 185, 129, 0.2);
+  border-bottom: 2px solid var(--color-primary-alpha-20);
   flex-wrap: wrap;
 }
 
+.block-header-main {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.block-header-info {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
 .block-label {
   font-family: 'Outfit', sans-serif;
   font-size: clamp(1.3rem, 3.5vw, 2rem);
   font-weight: 700;
-  color: #059669;
+  color: var(--color-primary-muted);
   letter-spacing: -1px;
 }
 
@@ -4371,10 +4390,54 @@ code {
   font-family: 'Outfit', sans-serif;
   font-size: clamp(1.3rem, 3.5vw, 2rem);
   font-weight: 700;
-  color: #10b981;
+  color: var(--color-primary);
   letter-spacing: -1px;
 }
 
+.block-header-divider {
+  color: var(--text-secondary);
+  font-size: 1rem;
+  opacity: 0.5;
+}
+
+.block-header-timestamp {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.9rem;
+}
+
+.block-timestamp-age {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.block-timestamp-full {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.block-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.block-status-finalized {
+  background: var(--color-success-alpha-15);
+  color: var(--color-success);
+}
+
+.block-status-pending {
+  background: var(--color-warning-alpha-15);
+  color: var(--color-warning);
+}
+
 .block-display-grid {
   display: flex;
   flex-direction: column;
@@ -4387,21 +4450,21 @@ code {
   gap: 4px;
   text-align: left;
   padding: 12px;
-  background: rgba(16, 185, 129, 0.04);
+  background: var(--color-primary-alpha-4);
   border-radius: 12px;
-  border-left: 3px solid #10b981;
+  border-left: 3px solid var(--color-primary);
   transition: all 0.2s ease;
 }
 
 .block-detail-item:hover {
-  background: rgba(16, 185, 129, 0.08);
-  border-left-color: #059669;
+  background: var(--color-primary-alpha-8);
+  border-left-color: var(--color-primary-muted);
   transform: translateX(4px);
 }
 
 .detail-label {
   font-size: clamp(0.8rem, 2vw, 0.9rem);
-  color: #10b981;
+  color: var(--color-primary);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -4411,7 +4474,7 @@ code {
 .detail-value {
   font-size: clamp(0.95rem, 2.5vw, 1.1rem);
   font-weight: 500;
-  color: var(--text-color, #1f2937);
+  color: var(--text-primary);
   word-break: break-all;
   font-family: 'Outfit', sans-serif;
 }
@@ -4446,6 +4509,22 @@ code {
 
   .block-display-header {
     gap: 8px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .block-header-main {
+    gap: 8px;
+  }
+
+  .block-header-timestamp {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+  }
+
+  .block-header-divider {
+    display: none;
   }
 
   .block-detail-item {
@@ -4456,7 +4535,7 @@ code {
 /* Storage Section Styles */
 .storage-section {
   padding: 20px !important;
-  background: rgba(16, 185, 129, 0.06) !important;
+  background: var(--color-primary-alpha-6) !important;
 }
 
 .storage-controls {
@@ -4476,7 +4555,7 @@ code {
   flex: 1;
   padding: 12px 16px;
   font-size: 1rem;
-  border: 1px solid #10b981;
+  border: 1px solid var(--color-primary);
   border-radius: 8px;
   outline: none;
   transition: all 0.2s ease;
@@ -4486,7 +4565,7 @@ code {
 }
 
 .storage-input:focus {
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
 }
 
 .storage-get-button {
@@ -4494,7 +4573,7 @@ code {
   font-size: 1rem;
   font-weight: 600;
   color: white;
-  background-color: #10b981;
+  background-color: var(--color-primary);
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -4504,7 +4583,7 @@ code {
 }
 
 .storage-get-button:hover {
-  background-color: #059669;
+  background-color: var(--color-primary-muted);
 }
 
 .storage-output {
@@ -4512,14 +4591,14 @@ code {
   flex-direction: column;
   gap: 6px;
   padding: 12px;
-  background: rgba(16, 185, 129, 0.08);
+  background: var(--color-primary-alpha-8);
   border-radius: 8px;
-  border-left: 3px solid #10b981;
+  border-left: 3px solid var(--color-primary);
 }
 
 .storage-output-label {
   font-size: 0.85rem;
-  color: #10b981;
+  color: var(--color-primary);
   font-weight: 600;
   text-transform: uppercase;
   font-family: 'Outfit', sans-serif;
@@ -4528,7 +4607,7 @@ code {
 .storage-output-value {
   font-size: 0.95rem;
   font-weight: 500;
-  color: var(--text-color, #1f2937);
+  color: var(--text-primary);
   word-break: break-all;
   font-family: 'Courier New', monospace;
 }
@@ -4537,16 +4616,16 @@ code {
 @media (prefers-color-scheme: dark) {
   .storage-input {
     background: #1e1e1e;
-    border-color: #10b981;
+    border-color: var(--color-primary);
     color: #fff;
   }
 
   .storage-output {
-    background: rgba(16, 185, 129, 0.1);
+    background: var(--color-primary-alpha-10);
   }
 
   .storage-output-value {
-    color: #f3f4f6;
+    color: var(--text-primary);
   }
 }
 
@@ -4617,12 +4696,27 @@ code {
    ======================================== */
 
 .settings-container {
+  max-width: 100%;
+  margin: 0 auto;
   font-family: 'Outfit', sans-serif;
   text-align: center;
 }
 
+.settings-top-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+@media (max-width: 768px) {
+  .settings-top-row {
+    grid-template-columns: 1fr;
+  }
+}
+
 .settings-success-message {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
   color: white;
   padding: 12px 16px;
   border-radius: 12px;
@@ -4632,23 +4726,23 @@ code {
   gap: 10px;
   font-weight: 600;
   font-size: 0.9rem;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  box-shadow: 0 4px 12px var(--color-primary-alpha-30);
   animation: slideDown 0.3s ease;
 }
 
 .settings-section {
-  background: #ffffff;
+  background: var(--bg-card);
   border-radius: 16px;
   padding: 24px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(16, 185, 129, 0.1);
+  border: 1px solid var(--color-primary-alpha-10);
   margin-bottom: 24px;
 }
 
 .settings-section-title {
   font-size: 1.25rem;
   font-weight: 700;
-  color: #10b981;
+  color: var(--color-primary);
   margin-bottom: 8px;
   display: flex;
   align-items: center;
@@ -4658,16 +4752,16 @@ code {
 
 .settings-section-description {
   font-size: 0.85rem;
-  color: #374151;
+  color: var(--text-secondary);
   margin-bottom: 24px;
   text-align: center;
 }
 
 .settings-item {
-  background: rgba(16, 185, 129, 0.02);
+  background: var(--color-primary-alpha-2);
   padding: 16px;
   border-radius: 12px;
-  border: 1px solid rgba(16, 185, 129, 0.15);
+  border: 1px solid var(--color-primary-alpha-15);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4677,13 +4771,13 @@ code {
 
 .settings-item-label {
   font-weight: 600;
-  color: #1f2937;
+  color: var(--text-primary);
   font-size: 0.95rem;
 }
 
 .settings-item-description {
   font-size: 0.8rem;
-  color: #4b5563;
+  color: var(--text-secondary);
   margin-top: 2px;
 }
 
@@ -4693,10 +4787,10 @@ code {
 }
 
 .settings-chain-item {
-  background: rgba(16, 185, 129, 0.02);
+  background: var(--color-primary-alpha-2);
   padding: 16px;
   border-radius: 12px;
-  border: 1px solid rgba(16, 185, 129, 0.15);
+  border: 1px solid var(--color-primary-alpha-15);
   transition: all 0.2s ease;
 }
 
@@ -4709,52 +4803,75 @@ code {
   align-items: center;
   gap: 8px;
   font-weight: 600;
-  color: #111827;
+  color: var(--text-primary);
   font-size: 0.95rem;
 }
 
 .settings-chain-id-badge {
   font-size: 0.8rem;
-  color: #374151;
+  color: var(--text-secondary);
   font-weight: 500;
   background: rgba(107, 114, 128, 0.1);
   padding: 2px 8px;
   border-radius: 6px;
 }
 
+.settings-fetch-rpc-button {
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: "Outfit", sans-serif;
+  color: var(--color-primary);
+  background: var(--color-primary-alpha-10);
+  border: 1px solid var(--color-primary-alpha-20);
+  padding: 2px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.settings-fetch-rpc-button:hover:not(:disabled) {
+  background: var(--color-primary-alpha-20);
+  border-color: var(--color-primary-alpha-40);
+}
+
+.settings-fetch-rpc-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .settings-rpc-input {
   width: 100%;
   padding: 10px 12px;
-  border: 2px solid rgba(16, 185, 129, 0.2);
+  border: 2px solid var(--color-primary-alpha-20);
   border-radius: 8px;
   font-size: 0.85rem;
   font-family: monospace;
-  color: #111827;
-  background: #ffffff;
+  color: var(--text-primary);
+  background: var(--bg-card);
   transition: all 0.2s ease;
   outline: none;
 }
 
 .settings-rpc-input:focus {
-  border-color: #10b981;
+  border-color: var(--color-primary);
 }
 
 .settings-help-text {
   font-size: 0.8rem;
-  color: #4b5563;
+  color: var(--text-secondary);
   margin-top: 4px;
   text-align: left;
 }
 
 .settings-link {
-  color: #10b981;
+  color: var(--color-primary);
   text-decoration: none;
   font-weight: 600;
-  border-bottom: 1px solid #10b981;
+  border-bottom: 1px solid var(--color-primary);
 }
 
 .settings-link:hover {
-  color: #059669;
+  color: var(--color-primary-muted);
 }
 
 .settings-rpc-list {
@@ -4766,7 +4883,7 @@ code {
 .settings-rpc-list-label {
   font-size: 0.75rem;
   font-weight: 600;
-  color: #374151;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -4777,7 +4894,7 @@ code {
 }
 
 .settings-rpc-tag {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
   color: white;
   padding: 6px 12px;
   border-radius: 8px;
@@ -4786,10 +4903,42 @@ code {
   display: flex;
   align-items: center;
   gap: 6px;
-  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
+  box-shadow: 0 2px 6px var(--color-primary-alpha-25);
   max-width: 100%;
   overflow: hidden;
   position: relative;
+  cursor: grab;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.settings-rpc-tag:active {
+  cursor: grabbing;
+}
+
+.settings-rpc-tag.dragging {
+  opacity: 0.5;
+  transform: scale(0.95);
+}
+
+.settings-rpc-tag-delete {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+  flex-shrink: 0;
+}
+
+.settings-rpc-tag-delete:hover {
+  background: rgba(239, 68, 68, 0.8);
 }
 
 .settings-rpc-tag-index {
@@ -4811,7 +4960,7 @@ code {
 
 .settings-save-button {
   padding: 12px 24px;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
   color: white;
   border: none;
   border-radius: 10px;
@@ -4819,13 +4968,13 @@ code {
   font-size: 0.95rem;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  box-shadow: 0 4px 12px var(--color-primary-alpha-30);
   font-family: 'Outfit', sans-serif;
 }
 
 .settings-save-button:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+  box-shadow: 0 6px 16px var(--color-primary-alpha-40);
 }
 
 /* Toggle Switch */
@@ -4856,7 +5005,7 @@ code {
 }
 
 .toggle-slider.active {
-  background-color: #10b981;
+  background-color: var(--color-primary);
 }
 
 .toggle-knob {
@@ -4880,9 +5029,8 @@ code {
 .settings-select {
   padding: 8px 12px;
   border-radius: 8px;
-  border: 1px solid rgba(16, 185, 129, 0.3);
+  border: 1px solid var(--color-primary-alpha-30);
   background: white;
-  color: #1f2937;
   font-size: 0.9rem;
   font-weight: 500;
   cursor: pointer;
@@ -4892,13 +5040,13 @@ code {
 }
 
 .settings-select:hover {
-  border-color: #10b981;
+  border-color: var(--color-primary);
 }
 
 .settings-select:focus {
   outline: none;
-  border-color: #10b981;
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
 }
 
 /* Settings Toggle Switch */
@@ -4929,7 +5077,7 @@ code {
 }
 
 .settings-toggle-slider.active {
-  background-color: #10b981;
+  background-color: var(--color-primary);
 }
 
 .settings-toggle-knob {
@@ -4951,10 +5099,10 @@ code {
 
 /* Chain Config Item */
 .chain-config-item {
-  background: rgba(16, 185, 129, 0.02);
+  background: var(--color-primary-alpha-2);
   padding: 16px;
   border-radius: 12px;
-  border: 1px solid rgba(16, 185, 129, 0.15);
+  border: 1px solid var(--color-primary-alpha-15);
   transition: all 0.2s ease;
 }
 
@@ -4969,13 +5117,13 @@ code {
   align-items: center;
   gap: 8px;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--text-primary);
   font-size: 0.95rem;
 }
 
 .chain-id-badge {
   font-size: 0.8rem;
-  color: #6b7280;
+  color: var(--text-secondary);
   font-weight: 500;
   background: rgba(107, 114, 128, 0.1);
   padding: 2px 8px;
@@ -4985,36 +5133,36 @@ code {
 .settings-input {
   width: 100%;
   padding: 10px 12px;
-  border: 2px solid rgba(16, 185, 129, 0.2);
+  border: 2px solid var(--color-primary-alpha-20);
   border-radius: 8px;
   font-size: 0.85rem;
   font-family: monospace;
-  color: #1f2937;
-  background: #ffffff;
+  color: var(--text-primary);
+  background: var(--bg-card);
   transition: all 0.2s ease;
   outline: none;
 }
 
 .settings-input:focus {
-  border-color: #10b981;
+  border-color: var(--color-primary);
 }
 
 .settings-help-text {
   font-size: 0.8rem;
-  color: #6b7280;
+  color: var(--text-secondary);
   margin-top: 4px;
   text-align: left;
 }
 
 .settings-help-link {
-  color: #10b981;
+  color: var(--color-primary);
   text-decoration: none;
   font-weight: 600;
-  border-bottom: 1px solid #10b981;
+  border-bottom: 1px solid var(--color-primary);
 }
 
 .settings-help-link:hover {
-  color: #059669;
+  color: var(--color-primary-muted);
 }
 
 .rpc-tags-container {
@@ -5026,7 +5174,7 @@ code {
 .rpc-tags-label {
   font-size: 0.75rem;
   font-weight: 600;
-  color: #6b7280;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -5037,7 +5185,7 @@ code {
 }
 
 .rpc-tag {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
   color: white;
   padding: 6px 12px;
   border-radius: 8px;
@@ -5046,7 +5194,7 @@ code {
   display: flex;
   align-items: center;
   gap: 6px;
-  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
+  box-shadow: 0 2px 6px var(--color-primary-alpha-25);
   max-width: 100%;
   overflow: hidden;
   position: relative;
@@ -5071,7 +5219,7 @@ code {
 
 .settings-save-btn {
   padding: 12px 24px;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
   color: white;
   border: none;
   border-radius: 10px;
@@ -5079,11 +5227,353 @@ code {
   font-size: 0.95rem;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  box-shadow: 0 4px 12px var(--color-primary-alpha-30);
   font-family: 'Outfit', sans-serif;
 }
 
 .settings-save-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+  box-shadow: 0 6px 16px var(--color-primary-alpha-40);
+}
+
+/* ==================== Profile Display ==================== */
+
+.profile-container {
+  margin-top: 1.5rem !important; 
+}
+.profile-container .block-display-card {
+  background: var(--bg-card);
+}
+
+/* Expand Button */
+.profile-expand-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  background: rgba(30, 41, 59, 0.6);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  border-radius: 12px;
+  color: #e2e8f0;
+  font-family: 'Outfit', sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.profile-expand-button:hover {
+  background: rgba(30, 41, 59, 0.8);
+  border-color: var(--color-info-alpha-40);
+  transform: translateY(-1px);
+}
+
+.profile-expand-text {
+  flex: 1;
+  text-align: left;
+}
+
+.profile-expand-icon {
+  color: var(--color-info-hover);
+  font-size: 0.8rem;
+  transition: transform 0.2s ease;
+}
+
+.profile-expand-button:hover .profile-expand-icon {
+  transform: translateY(2px);
+}
+
+/* Collapse Button */
+.profile-collapse-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--color-info-alpha-10);
+  border: 1px solid var(--color-info-alpha-30);
+  border-radius: 8px;
+  color: var(--color-info-hover);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.profile-collapse-button:hover {
+  background: var(--color-info-alpha-20);
+  border-color: var(--color-info-alpha-50);
+}
+
+/* Retry Button */
+.profile-retry-button {
+  margin-left: 1rem;
+  padding: 0.4rem 0.8rem;
+  background: var(--color-info-alpha-20);
+  border: 1px solid var(--color-info-alpha-40);
+  border-radius: 6px;
+  color: var(--color-info-hover);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.profile-retry-button:hover {
+  background: var(--color-info-alpha-30);
+}
+
+.profile-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.profile-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.profile-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+/* ==================== Tier Badge (Common Component) ==================== */
+
+.tier-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  white-space: nowrap;
+}
+
+.tier-badge-small {
+  padding: 0.15rem 0.5rem;
+  font-size: 0.65rem;
+  border-radius: 12px;
+}
+
+.tier-badge-medium {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.75rem;
+}
+
+.tier-badge-1 {
+  background: linear-gradient(135deg, var(--color-info) 0%, #1d4ed8 100%);
+  color: white;
+}
+
+.tier-badge-2 {
+  background: linear-gradient(135deg, var(--color-accent) 0%, #6d28d9 100%);
+  color: white;
+}
+
+.tier-badge-3 {
+  background: linear-gradient(135deg, var(--color-warning) 0%, #d97706 100%);
+  color: white;
+}
+
+.profile-loading,
+.profile-error {
+  padding: 2rem;
+  color: #94a3b8;
+}
+
+.profile-error {
+  color: var(--color-error);
+}
+
+/* Profile Content - Markdown Styles */
+.profile-content {
+  line-height: 1.7;
+  color: var(--text-primary);
+}
+
+.profile-content .profile-h1 {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 2rem 0 1rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.profile-content .profile-h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 1.8rem 0 0.8rem 0;
+}
+
+.profile-content .profile-h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 1.5rem 0 0.6rem 0;
+}
+
+.profile-content .profile-h4,
+.profile-content .profile-h5,
+.profile-content .profile-h6 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 1.2rem 0 0.5rem 0;
+}
+
+.profile-content .profile-p {
+  margin: 0 0 1rem 0;
+}
+
+.profile-content .profile-link {
+  color: var(--color-info-hover);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.profile-content .profile-link:hover {
+  color: #93c5fd;
+  text-decoration: underline;
+}
+
+.profile-content .profile-ul,
+.profile-content .profile-ol {
+  margin: 0.5rem 0 1rem 0;
+  padding-left: 1.5rem;
+}
+
+.profile-content .profile-li,
+.profile-content .profile-li-ordered {
+  margin: 0.4rem 0;
+}
+
+.profile-content .profile-blockquote {
+  margin: 1rem 0;
+  padding: 0.8rem 1.2rem;
+  border-left: 4px solid var(--color-info);
+  background: var(--color-info-alpha-10);
+  border-radius: 0 8px 8px 0;
+  color: #94a3b8;
+  font-style: italic;
+}
+
+.profile-content .profile-code-block {
+  margin: 1rem 0;
+  padding: 1rem;
+  background: rgba(15, 23, 42, 0.8);
+  border-radius: 8px;
+  overflow-x: auto;
+  border: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.profile-content .profile-code-block code {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.9rem;
+  color: #cbd5e1;
+  white-space: pre;
+}
+
+.profile-content .profile-inline-code {
+  padding: 0.2rem 0.4rem;
+  background: var(--color-info-alpha-15);
+  border-radius: 4px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.85em;
+  color: #93c5fd;
+}
+
+.profile-content .profile-hr {
+  border: none;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.3), transparent);
+  margin: 2rem 0;
+}
+
+.profile-content .profile-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 1rem 0;
+}
+
+/* Profile Links Section */
+.profile-links {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(148, 163, 184, 0.15);
+}
+
+.profile-links-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 1rem 0;
+}
+
+.profile-links-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.profile-link-item {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: var(--color-info-alpha-10);
+  border: 1px solid var(--color-info-alpha-30);
+  border-radius: 8px;
+  color: var(--color-info-hover);
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.profile-link-item:hover {
+  background: var(--color-info-alpha-20);
+  border-color: var(--color-info-alpha-50);
+  transform: translateY(-1px);
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .profile-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .profile-title {
+    font-size: 1.25rem;
+  }
+
+  .profile-content .profile-h1 {
+    font-size: 1.5rem;
+  }
+
+  .profile-content .profile-h2 {
+    font-size: 1.25rem;
+  }
+
+  .profile-content .profile-h3 {
+    font-size: 1.1rem;
+  }
+
+  .profile-links-list {
+    flex-direction: column;
+  }
+
+  .profile-link-item {
+    justify-content: center;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/subscriptions.css b/src/styles/subscriptions.css
new file mode 100644
index 0000000..36e97cc
--- /dev/null
+++ b/src/styles/subscriptions.css
@@ -0,0 +1,654 @@
+/* Subscriptions Page Styles */
+
+.subscriptions-intro {
+	background: var(--color-primary-alpha-4);
+	border: 1px solid var(--color-primary-alpha-20);
+	border-radius: 12px;
+	padding: 24px;
+	margin-bottom: 32px;
+	text-align: center;
+}
+
+.subscriptions-intro p {
+	font-size: 1.1rem;
+	color: var(--text-secondary);
+	font-family: "Outfit", sans-serif;
+	line-height: 1.6;
+	margin: 0;
+}
+
+.subscriptions-intro strong {
+	color: var(--color-primary);
+}
+
+/* Category Tabs */
+.subscriptions-tabs {
+	display: flex;
+	justify-content: center;
+	gap: 12px;
+	margin-bottom: 24px;
+	flex-wrap: wrap;
+}
+
+.subscriptions-tab {
+	padding: 12px 24px;
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-30);
+	border-radius: 8px;
+	color: var(--color-primary);
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	font-size: 0.95rem;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.subscriptions-tab:hover {
+	background: var(--color-primary-alpha-20);
+	transform: translateY(-2px);
+}
+
+.subscriptions-tab.active {
+	background: var(--color-primary);
+	color: var(--btn-primary-text);
+	border-color: var(--color-primary);
+}
+
+/* Category Info */
+.subscriptions-category-info {
+	text-align: center;
+	margin-bottom: 32px;
+}
+
+.subscriptions-category-description {
+	font-size: 1rem;
+	color: var(--text-secondary);
+	font-family: "Outfit", sans-serif;
+	line-height: 1.5;
+	max-width: 700px;
+	margin: 0 auto;
+}
+
+/* Pricing Tiers */
+.subscriptions-tiers {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: 24px;
+	margin-bottom: 48px;
+}
+
+.subscriptions-tier-card {
+	background: var(--overlay-light-3);
+	border: 1px solid var(--overlay-light-10);
+	border-radius: 16px;
+	padding: 24px;
+	transition: all 0.3s ease;
+	display: flex;
+	flex-direction: column;
+}
+
+.subscriptions-tier-card:hover {
+	background: var(--color-primary-alpha-8);
+	border-color: var(--color-primary-alpha-30);
+	transform: translateY(-4px);
+}
+
+.subscriptions-tier-card:nth-child(2) {
+	border-color: var(--color-primary-alpha-30);
+	background: var(--color-primary-alpha-4);
+}
+
+.subscriptions-tier-card:nth-child(3) {
+	border-color: var(--color-warning-alpha-15);
+	background: var(--color-warning-alpha-4);
+}
+
+.subscriptions-tier-card:nth-child(3):hover {
+	background: var(--color-warning-alpha-10);
+	border-color: var(--color-warning-alpha-15);
+}
+
+.subscriptions-tier-header {
+	text-align: center;
+	margin-bottom: 20px;
+	padding-bottom: 20px;
+	border-bottom: 1px solid var(--overlay-light-10);
+}
+
+.subscriptions-tier-name {
+	font-size: 1.2rem;
+	font-family: "Outfit", sans-serif;
+	font-weight: 700;
+	color: var(--color-primary);
+	margin: 0 0 12px 0;
+}
+
+.subscriptions-tier-card:nth-child(3) .subscriptions-tier-name {
+	color: var(--color-warning);
+}
+
+.subscriptions-tier-price {
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+	gap: 4px;
+}
+
+.subscriptions-price-amount {
+	font-size: 2rem;
+	font-family: "Outfit", sans-serif;
+	font-weight: 800;
+	color: var(--text-primary);
+}
+
+.subscriptions-price-period {
+	font-size: 0.9rem;
+	color: var(--text-tertiary);
+	font-family: "Outfit", sans-serif;
+}
+
+/* Annual pricing (smaller, below monthly) */
+.subscriptions-tier-price-annual {
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+	gap: 4px;
+	margin-top: 8px;
+}
+
+.subscriptions-price-annual-amount {
+	font-size: 1.1rem;
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	color: var(--text-secondary);
+}
+
+.subscriptions-price-annual-period {
+	font-size: 0.8rem;
+	color: var(--text-tertiary);
+	font-family: "Outfit", sans-serif;
+}
+
+.subscriptions-price-annual-discount {
+	font-size: 0.7rem;
+	color: var(--color-primary);
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	background: var(--color-primary-alpha-15);
+	padding: 2px 6px;
+	border-radius: 4px;
+	margin-left: 6px;
+}
+
+.subscriptions-tier-card:nth-child(3) .subscriptions-price-annual-discount {
+	color: var(--color-warning);
+	background: var(--color-warning-alpha-15);
+}
+
+.subscriptions-tier-benefits {
+	flex: 1;
+}
+
+.subscriptions-tier-benefits ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.subscriptions-tier-benefits li {
+	position: relative;
+	padding-left: 24px;
+	margin-bottom: 12px;
+	font-size: 0.95rem;
+	color: var(--text-secondary);
+	font-family: "Outfit", sans-serif;
+	line-height: 1.4;
+}
+
+.subscriptions-tier-benefits li::before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 6px;
+	width: 12px;
+	height: 12px;
+	background: var(--color-primary);
+	border-radius: 50%;
+	opacity: 0.8;
+}
+
+.subscriptions-tier-card:nth-child(3) .subscriptions-tier-benefits li::before {
+	background: var(--color-warning);
+}
+
+.subscriptions-tier-note {
+	margin-top: 16px;
+	padding-top: 16px;
+	border-top: 1px solid var(--overlay-light-10);
+	font-size: 0.85rem;
+	color: var(--text-tertiary);
+	font-family: "Outfit", sans-serif;
+	font-style: italic;
+	text-align: center;
+}
+
+/* Pricing Summary Table */
+.subscriptions-summary {
+	margin-bottom: 48px;
+}
+
+.subscriptions-table-wrapper {
+	overflow-x: auto;
+}
+
+.subscriptions-table {
+	width: 100%;
+	border-collapse: collapse;
+	background: var(--overlay-light-2);
+	border-radius: 12px;
+	overflow: hidden;
+}
+
+.subscriptions-table th,
+.subscriptions-table td {
+	padding: 16px 20px;
+	text-align: center;
+	font-family: "Outfit", sans-serif;
+}
+
+.subscriptions-table th {
+	background: var(--color-primary-alpha-10);
+	color: var(--color-primary);
+	font-weight: 600;
+	font-size: 0.9rem;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.subscriptions-table th:first-child {
+	text-align: left;
+}
+
+.subscriptions-table td {
+	border-bottom: 1px solid var(--overlay-light-5);
+	color: var(--text-secondary);
+	font-size: 0.95rem;
+}
+
+.subscriptions-table-type {
+	text-align: left !important;
+	font-weight: 600;
+	color: var(--text-primary) !important;
+}
+
+.subscriptions-table tr:last-child td {
+	border-bottom: none;
+}
+
+.subscriptions-table tr:hover td {
+	background: var(--color-primary-alpha-4);
+}
+
+.subscriptions-table-annual {
+	font-size: 0.8rem;
+	color: var(--text-tertiary);
+	margin-top: 4px;
+}
+
+/* Table price display with early adopter */
+.subscriptions-table-monthly {
+	color: var(--text-secondary);
+	font-size: 0.95rem;
+	font-weight: 600;
+	margin-bottom: 6px;
+}
+
+.subscriptions-table-early-adopter-list {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	margin-bottom: 6px;
+}
+
+.subscriptions-table-early-adopter-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	font-size: 0.8rem;
+}
+
+.subscriptions-table-ea-price {
+	color: var(--color-warning-hover);
+	font-weight: 500;
+}
+
+.subscriptions-table-ea-discount {
+	color: var(--color-primary);
+	font-size: 0.7rem;
+	font-weight: 600;
+	background: var(--color-primary-alpha-15);
+	padding: 1px 4px;
+	border-radius: 3px;
+}
+
+/* Early Adopter Banner */
+.subscriptions-early-adopter {
+	background: linear-gradient(
+		135deg,
+		var(--color-warning-alpha-15),
+		var(--color-warning-alpha-10)
+	);
+	border: 2px solid var(--color-warning-alpha-15);
+	border-radius: 12px;
+	padding: 20px 24px;
+	margin-bottom: 24px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	text-align: center;
+}
+
+.subscriptions-early-adopter-badge {
+	background: var(--color-warning);
+	color: var(--text-inverse);
+	font-family: "Outfit", sans-serif;
+	font-weight: 700;
+	font-size: 0.8rem;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	padding: 8px 16px;
+	border-radius: 6px;
+	white-space: nowrap;
+}
+
+.subscriptions-early-adopter-content {
+	flex: 1;
+}
+
+.subscriptions-early-adopter-title {
+	font-family: "Outfit", sans-serif;
+	font-weight: 700;
+	font-size: 1.1rem;
+	color: var(--color-warning-hover);
+	margin: 0 0 12px 0;
+}
+
+.subscriptions-early-adopter-tiers {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.subscriptions-early-adopter-tier {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background: var(--overlay-light-5);
+	border: 1px solid var(--overlay-light-10);
+	border-radius: 8px;
+	padding: 10px 16px;
+	min-width: 100px;
+}
+
+.subscriptions-early-adopter-tier.active {
+	background: var(--color-primary-alpha-15);
+	border-color: var(--color-primary);
+}
+
+.subscriptions-early-adopter-tier.past {
+	opacity: 0.4;
+}
+
+.subscriptions-early-adopter-tier-discount {
+	font-family: "Outfit", sans-serif;
+	font-weight: 700;
+	font-size: 1.1rem;
+	color: var(--color-warning-hover);
+}
+
+.subscriptions-early-adopter-tier.active .subscriptions-early-adopter-tier-discount {
+	color: var(--color-primary);
+}
+
+.subscriptions-early-adopter-tier-month {
+	font-family: "Outfit", sans-serif;
+	font-size: 0.75rem;
+	color: var(--text-tertiary);
+	margin-top: 2px;
+}
+
+.subscriptions-early-adopter-status {
+	font-family: "Outfit", sans-serif;
+	font-size: 0.9rem;
+	color: var(--text-secondary);
+	margin: 12px 0 0 0;
+}
+
+.subscriptions-early-adopter-active {
+	color: var(--color-primary);
+	font-weight: 600;
+}
+
+/* How to Subscribe Section */
+.subscriptions-how-to {
+	background: linear-gradient(
+		135deg,
+		var(--color-primary-alpha-8),
+		var(--color-primary-alpha-4)
+	);
+	border: 1px solid var(--color-primary-alpha-30);
+	border-radius: 16px;
+	padding: 40px;
+	margin-bottom: 12px;
+}
+
+.subscriptions-steps {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	margin: 32px 0;
+	max-width: 600px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.subscriptions-step {
+	display: flex;
+	align-items: flex-start;
+	gap: 20px;
+}
+
+.subscriptions-step-number {
+	flex-shrink: 0;
+	width: 40px;
+	height: 40px;
+	background: var(--color-primary);
+	color: var(--btn-primary-text);
+	font-family: "Outfit", sans-serif;
+	font-weight: 700;
+	font-size: 1.2rem;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.subscriptions-step-content h4 {
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	font-size: 1.1rem;
+	color: var(--text-primary);
+	margin: 0 0 6px 0;
+}
+
+.subscriptions-step-content p {
+	font-family: "Outfit", sans-serif;
+	font-size: 0.95rem;
+	color: var(--text-secondary);
+	line-height: 1.5;
+	margin: 0;
+}
+
+.subscriptions-step-content strong {
+	color: var(--color-primary);
+}
+
+/* Collapsible Help Images Section */
+.subscriptions-help-images {
+	margin-top: 32px;
+	margin-bottom: 32px;
+}
+
+.subscriptions-help-toggle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	width: 100%;
+	padding: 12px 20px;
+	background: var(--color-primary-alpha-10);
+	border: 1px solid var(--color-primary-alpha-30);
+	border-radius: 8px;
+	color: var(--color-primary);
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	font-size: 0.95rem;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.subscriptions-help-toggle:hover {
+	background: var(--color-primary-alpha-15);
+	border-color: var(--color-primary-alpha-30);
+}
+
+.subscriptions-help-toggle-icon {
+	font-size: 0.8rem;
+}
+
+.subscriptions-help-images-content {
+	margin-top: 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 32px;
+}
+
+.subscriptions-help-image-wrapper {
+	background: var(--overlay-dark-20);
+	border: 1px solid var(--color-primary-alpha-20);
+	border-radius: 12px;
+	padding: 20px;
+}
+
+.subscriptions-help-image-wrapper h4 {
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	font-size: 1rem;
+	color: var(--color-primary);
+	margin: 0 0 16px 0;
+}
+
+.subscriptions-help-image-wrapper h4 a {
+	color: var(--text-primary);
+	text-decoration: underline;
+}
+
+.subscriptions-help-image-wrapper h4 a:hover {
+	color: var(--color-primary);
+}
+
+.subscriptions-help-image {
+	width: 100%;
+	max-width: 100%;
+	border-radius: 8px;
+	border: 1px solid var(--color-primary-alpha-30);
+	box-shadow: var(--shadow-lg);
+}
+
+.subscriptions-cta-buttons {
+	display: flex;
+	justify-content: center;
+	gap: 16px;
+	flex-wrap: wrap;
+}
+
+/* DAO Governance Section */
+.subscriptions-governance {
+	background: linear-gradient(
+		135deg,
+		var(--color-accent-alpha-10),
+		var(--color-primary-alpha-10)
+	);
+	border: 1px solid var(--color-accent-alpha-30);
+	border-radius: 16px;
+	padding: 40px;
+	margin-bottom: 48px;
+}
+
+.subscriptions-governance > p {
+	font-size: 1.1rem;
+	color: var(--text-secondary);
+	font-family: "Outfit", sans-serif;
+	line-height: 1.6;
+	text-align: center;
+	max-width: 800px;
+	margin: 0 auto 32px;
+}
+
+.subscriptions-roadmap-features {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+	gap: 24px;
+}
+
+.subscriptions-roadmap-item {
+	background: var(--overlay-light-3);
+	border-radius: 12px;
+	padding: 20px;
+	text-align: center;
+}
+
+.subscriptions-roadmap-item h4 {
+	font-size: 1.1rem;
+	font-family: "Outfit", sans-serif;
+	font-weight: 600;
+	color: var(--color-accent);
+	margin: 0 0 12px 0;
+}
+
+.subscriptions-roadmap-item p {
+	font-size: 0.9rem;
+	color: var(--text-secondary);
+	font-family: "Outfit", sans-serif;
+	line-height: 1.5;
+	margin: 0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+	.subscriptions-tabs {
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	.subscriptions-tab {
+		text-align: center;
+	}
+
+	.subscriptions-tiers {
+		grid-template-columns: 1fr;
+	}
+
+	.subscriptions-governance {
+		padding: 24px;
+	}
+
+	.subscriptions-table th,
+	.subscriptions-table td {
+		padding: 12px 8px;
+		font-size: 0.85rem;
+	}
+}
diff --git a/src/styles/tables.css b/src/styles/tables.css
index 6f12e7b..b8b6a5c 100644
--- a/src/styles/tables.css
+++ b/src/styles/tables.css
@@ -2,11 +2,11 @@
 
 /* Table Wrapper */
 .table-wrapper {
-	background: var(--bg-color, #fff);
-	border: 1px solid #10b981;
+	background: var(--bg-card);
+	border: 1px solid var(--color-primary);
 	border-radius: 16px;
 	padding: 20px;
-	box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
+	box-shadow: 0 4px 20px var(--color-primary-alpha-10);
 }
 
 /* Dashboard Table */
@@ -16,13 +16,13 @@
 }
 
 .dash-table thead tr {
-	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+	border-bottom: 1px solid var(--overlay-light-10);
 }
 
 .dash-table thead th {
 	padding: 12px;
 	text-align: center;
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	font-size: 0.85rem;
 	font-family: "Outfit", sans-serif;
@@ -39,23 +39,23 @@
 }
 
 .dash-table tbody tr {
-	background: rgba(16, 185, 129, 0.04);
+	background: var(--color-primary-alpha-4);
 	border-radius: 8px;
 	transition: all 0.2s ease;
 }
 
 .dash-table tbody tr:hover {
-	background: rgba(255, 255, 255, 0.02);
+	background: var(--overlay-light-2);
 }
 
 .dash-table tbody tr:not(:last-child) {
-	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+	border-bottom: 1px solid var(--overlay-light-5);
 }
 
 .dash-table td {
 	padding: 12px;
 	font-size: 0.95rem;
-	color: var(--text-color, #1f2937);
+	color: var(--text-primary);
 	font-family: "Outfit", sans-serif;
 	font-weight: 500;
 }
@@ -70,7 +70,7 @@
 
 /* Table Cell Styles */
 .table-cell-number {
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 700;
 	text-decoration: none;
 	font-family: "Outfit", sans-serif;
@@ -78,7 +78,7 @@
 }
 
 .table-cell-hash {
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	text-decoration: none;
 	font-family: "Outfit", sans-serif;
@@ -86,7 +86,7 @@
 }
 
 .table-cell-address {
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	text-decoration: none;
 	font-family: "Outfit", sans-serif;
@@ -94,21 +94,21 @@
 
 .table-cell-value {
 	font-weight: 600;
-	color: #059669;
+	color: var(--color-primary-muted);
 	font-family: "Outfit", sans-serif;
 	font-size: 1rem;
 }
 
 .table-cell-text {
 	font-size: 0.95rem;
-	color: var(--text-color, #1f2937);
+	color: var(--text-primary);
 	font-family: "Outfit", sans-serif;
 	font-weight: 500;
 }
 
 .table-cell-muted {
 	font-size: 0.95rem;
-	color: #6b7280;
+	color: var(--text-secondary);
 	font-family: "Outfit", sans-serif;
 	font-weight: 500;
 }
@@ -116,36 +116,45 @@
 .table-cell-mono {
 	font-size: 0.9rem;
 	font-family: "Outfit", sans-serif;
-	color: var(--text-color, #1f2937);
+	color: var(--text-primary);
 	font-weight: 500;
 }
 
 .table-cell-italic {
-	color: #6b7280;
+	color: var(--text-secondary);
 	font-style: italic;
 }
 
-/* Status Badges in Tables */
+/* ==========================================================================
+   Status Badges in Tables
+   Note: These extend the base badge system in base.css.
+   For new code, consider using base classes: badge--success, badge--error, etc.
+   ========================================================================== */
+
+/* Base table status badge */
 .table-status-badge {
+	display: inline-flex;
+	align-items: center;
 	padding: 4px 10px;
 	border-radius: 6px;
 	font-size: 0.8rem;
 	font-weight: 600;
 }
 
+/* Status variants - use CSS variables for theming */
 .table-status-success {
-	background: rgba(16, 185, 129, 0.15);
-	color: #10b981;
+	background: var(--badge-success-bg);
+	color: var(--badge-success-text);
 }
 
 .table-status-failed {
-	background: rgba(239, 68, 68, 0.15);
-	color: #ef4444;
+	background: var(--badge-error-bg);
+	color: var(--badge-error-text);
 }
 
 .table-status-pending {
-	background: rgba(245, 158, 11, 0.15);
-	color: #f59e0b;
+	background: var(--badge-warning-bg);
+	color: var(--badge-warning-text);
 }
 
 /* Address Display Tables */
@@ -159,13 +168,13 @@
 }
 
 .address-table thead tr {
-	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+	border-bottom: 1px solid var(--overlay-light-10);
 }
 
 .address-table th {
 	padding: 12px;
 	text-align: center;
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	font-size: 0.85rem;
 	font-family: "Outfit", sans-serif;
@@ -174,12 +183,12 @@
 }
 
 .address-table tbody tr {
-	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+	border-bottom: 1px solid var(--overlay-light-5);
 	transition: background 0.2s;
 }
 
 .address-table tbody tr:hover {
-	background: rgba(255, 255, 255, 0.02);
+	background: var(--overlay-light-2);
 }
 
 .address-table tbody tr:last-child {
@@ -191,7 +200,7 @@
 }
 
 .address-table-link {
-	color: #10b981;
+	color: var(--color-primary);
 	text-decoration: none;
 	font-family: "monospace";
 	font-size: 0.9rem;
@@ -199,18 +208,22 @@
 
 .address-table-value {
 	font-family: "monospace";
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	font-size: 0.9rem;
 	text-align: right;
 }
 
 .contract-creation-badge {
-	color: #8b5cf6;
+	color: var(--color-accent);
 	font-size: 0.85rem;
 	font-weight: 600;
 }
 
+.table-left {
+	text-align: left;
+}
+
 .table-center {
 	text-align: center;
 }
@@ -227,13 +240,13 @@
 }
 
 .recent-transactions-table thead tr {
-	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+	border-bottom: 1px solid var(--overlay-light-10);
 }
 
 .recent-transactions-table th {
 	padding: 12px;
 	text-align: center;
-	color: #10b981;
+	color: var(--color-primary);
 	font-weight: 600;
 	font-size: 0.85rem;
 	text-transform: uppercase;
@@ -241,12 +254,12 @@
 }
 
 .recent-transactions-table tbody tr {
-	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+	border-bottom: 1px solid var(--overlay-light-5);
 	transition: background 0.2s;
 }
 
 .recent-transactions-table tbody tr:hover {
-	background: rgba(255, 255, 255, 0.02);
+	background: var(--overlay-light-2);
 }
 
 .recent-transactions-table tbody tr:last-child {
@@ -255,6 +268,45 @@
 
 .recent-transactions-table td {
 	padding: 12px;
+	text-align: center;
+}
+
+/* ==========================================================================
+   Method Badges
+   Note: These extend the base badge system with monospace font styling.
+   ========================================================================== */
+
+/* Base method badge */
+.method-badge {
+	display: inline-block;
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-size: 0.75rem;
+	font-family: monospace;
+	font-weight: 600;
+	max-width: 100px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* Method badge variants */
+.method-badge-decoded {
+	background: var(--color-primary-alpha-15);
+	color: var(--color-primary);
+	border: 1px solid var(--color-primary-alpha-30);
+}
+
+.method-badge-selector {
+	background: var(--badge-neutral-bg);
+	color: var(--text-tertiary);
+	border: 1px solid var(--border-secondary);
+}
+
+.method-badge-transfer {
+	background: var(--color-info-alpha-15);
+	color: var(--color-info);
+	border: 1px solid var(--color-info-alpha-30);
 }
 
 /* Responsive Table */
diff --git a/src/theme.tsx b/src/theme.tsx
new file mode 100644
index 0000000..15f2f86
--- /dev/null
+++ b/src/theme.tsx
@@ -0,0 +1,406 @@
+// theme/index.ts
+
+import type { Theme } from "@rainbow-me/rainbowkit";
+
+// ========== Color Tokens ==========
+export const colors = {
+  // Brand
+  primary: "#10b981",
+  primaryHover: "#34d399",
+  primaryMuted: "#059669",
+  secondary: "#ff6b4a",
+  secondaryHover: "#ff8a70",
+  accent: "#8b5cf6",
+  accentHover: "#a78bfa",
+  accentMuted: "#7c3aed",
+
+  // Semantic
+  success: "#10b981",
+  warning: "#f59e0b",
+  error: "#ef4444",
+  info: "#3b82f6",
+
+  // Dark Mode
+  dark: {
+    bgPrimary: "#0f172a",
+    bgSecondary: "#242833",
+    bgTertiary: "#2e3340",
+    textPrimary: "#ffffff",
+    textSecondary: "#8a8f98",
+    textTertiary: "#5c6370",
+    border: "#2e3340",
+    borderSecondary: "#3a3f4b",
+  },
+
+  // Light Mode
+  light: {
+    bgPrimary: "#31457a",
+    bgSecondary: "#ffffff",
+    bgTertiary: "#e5e7eb",
+    textPrimary: "#1a1d26",
+    textSecondary: "#6b7280",
+    textTertiary: "#9ca3af",
+    border: "#e5e7eb",
+    borderSecondary: "#d1d5db",
+  },
+} as const;
+
+// ========== CSS Variables ==========
+export const cssVariables = `
+:root {
+  /* Brand */
+  --color-primary: ${colors.primary};
+  --color-primary-hover: ${colors.primaryHover};
+  --color-primary-muted: ${colors.primaryMuted};
+  --color-primary-subtle: rgba(16, 185, 129, 0.1);
+  --color-secondary: ${colors.secondary};
+  --color-secondary-hover: ${colors.secondaryHover};
+  --color-secondary-subtle: rgba(255, 107, 74, 0.1);
+  --color-accent: ${colors.accent};
+  --color-accent-hover: ${colors.accentHover};
+  --color-accent-muted: ${colors.accentMuted};
+  --color-accent-subtle: rgba(139, 92, 246, 0.1);
+
+  /* Semantic */
+  --color-success: ${colors.success};
+  --color-success-hover: #34d399;
+  --color-success-subtle: rgba(16, 185, 129, 0.1);
+  --color-warning: ${colors.warning};
+  --color-warning-hover: #fbbf24;
+  --color-warning-subtle: rgba(245, 158, 11, 0.1);
+  --color-error: ${colors.error};
+  --color-error-hover: #f87171;
+  --color-error-subtle: rgba(239, 68, 68, 0.1);
+  --color-info: ${colors.info};
+  --color-info-hover: #60a5fa;
+  --color-info-subtle: rgba(59, 130, 246, 0.1);
+
+  /* Dark Mode (default) */
+  --bg-gradient-start: #0f172a;
+  --bg-primary: ${colors.dark.bgPrimary};
+  --bg-secondary: ${colors.dark.bgSecondary};
+  --bg-tertiary: ${colors.dark.bgTertiary};
+  --bg-card: ${colors.dark.bgSecondary};
+  --bg-card-hover: ${colors.dark.bgTertiary};
+  --bg-input: ${colors.dark.bgPrimary};
+  --bg-tooltip: #3a3f4b;
+  --bg-modal-overlay: rgba(0, 0, 0, 0.6);
+
+  --text-primary: ${colors.dark.textPrimary};
+  --text-secondary: ${colors.dark.textSecondary};
+  --text-tertiary: ${colors.dark.textTertiary};
+  --text-disabled: #4a4f5a;
+  --text-inverse: ${colors.dark.bgPrimary};
+  --text-link: ${colors.primary};
+  --text-link-hover: ${colors.primaryHover};
+
+  --border-primary: ${colors.dark.border};
+  --border-secondary: ${colors.dark.borderSecondary};
+  --border-focus: ${colors.primary};
+
+  /* Buttons */
+  --btn-primary-bg: ${colors.primary};
+  --btn-primary-bg-hover: ${colors.primaryMuted};
+  --btn-primary-text: #ffffff;
+  --btn-secondary-bg: transparent;
+  --btn-secondary-bg-hover: rgba(16, 185, 129, 0.1);
+  --btn-secondary-text: ${colors.primary};
+  --btn-secondary-border: ${colors.primary};
+  --btn-disabled-bg: ${colors.dark.bgTertiary};
+  --btn-disabled-text: #5c6370;
+
+  /* Inputs */
+  --input-bg: ${colors.dark.bgPrimary};
+  --input-border: ${colors.dark.border};
+  --input-border-focus: ${colors.primary};
+  --input-text: #ffffff;
+  --input-placeholder: #5c6370;
+
+  /* Tables */
+  --table-header-bg: ${colors.dark.bgSecondary};
+  --table-row-bg: transparent;
+  --table-row-bg-hover: ${colors.dark.bgTertiary};
+  --table-border: ${colors.dark.border};
+
+  /* Badges */
+  --badge-success-bg: rgba(16, 185, 129, 0.15);
+  --badge-success-text: #34d399;
+  --badge-warning-bg: rgba(245, 158, 11, 0.15);
+  --badge-warning-text: #fbbf24;
+  --badge-error-bg: rgba(239, 68, 68, 0.15);
+  --badge-error-text: #f87171;
+  --badge-info-bg: rgba(59, 130, 246, 0.15);
+  --badge-info-text: #60a5fa;
+  --badge-neutral-bg: ${colors.dark.bgTertiary};
+  --badge-neutral-text: ${colors.dark.textSecondary};
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+
+  /* Scrollbar */
+  --scrollbar-track: ${colors.dark.bgPrimary};
+  --scrollbar-thumb: #3a3f4b;
+  --scrollbar-thumb-hover: #4a4f5a;
+
+  /* Primary Alpha Variants */
+  --color-primary-alpha-2: rgba(16, 185, 129, 0.02);
+  --color-primary-alpha-4: rgba(16, 185, 129, 0.04);
+  --color-primary-alpha-6: rgba(16, 185, 129, 0.06);
+  --color-primary-alpha-8: rgba(16, 185, 129, 0.08);
+  --color-primary-alpha-10: rgba(16, 185, 129, 0.1);
+  --color-primary-alpha-15: rgba(16, 185, 129, 0.15);
+  --color-primary-alpha-20: rgba(16, 185, 129, 0.2);
+  --color-primary-alpha-25: rgba(16, 185, 129, 0.25);
+  --color-primary-alpha-30: rgba(16, 185, 129, 0.3);
+  --color-primary-alpha-40: rgba(16, 185, 129, 0.4);
+  --color-primary-alpha-50: rgba(16, 185, 129, 0.5);
+
+  /* Semantic Alpha Variants */
+  --color-error-alpha-4: rgba(239, 68, 68, 0.04);
+  --color-error-alpha-10: rgba(239, 68, 68, 0.1);
+  --color-error-alpha-15: rgba(239, 68, 68, 0.15);
+  --color-error-alpha-20: rgba(239, 68, 68, 0.2);
+  --color-error-alpha-30: rgba(239, 68, 68, 0.3);
+  --color-warning-alpha-4: rgba(245, 158, 11, 0.04);
+  --color-warning-alpha-10: rgba(245, 158, 11, 0.1);
+  --color-warning-alpha-15: rgba(245, 158, 11, 0.15);
+  --color-warning-alpha-30: rgba(245, 158, 11, 0.3);
+  --color-warning-alpha-50: rgba(245, 158, 11, 0.5);
+  --color-info-alpha-4: rgba(59, 130, 246, 0.04);
+  --color-info-alpha-10: rgba(59, 130, 246, 0.1);
+  --color-info-alpha-15: rgba(59, 130, 246, 0.15);
+  --color-info-alpha-20: rgba(59, 130, 246, 0.2);
+  --color-info-alpha-30: rgba(59, 130, 246, 0.3);
+  --color-accent-alpha-4: rgba(139, 92, 246, 0.04);
+  --color-accent-alpha-10: rgba(139, 92, 246, 0.1);
+  --color-accent-alpha-15: rgba(139, 92, 246, 0.15);
+  --color-accent-alpha-20: rgba(139, 92, 246, 0.2);
+  --color-accent-alpha-30: rgba(139, 92, 246, 0.3);
+  --color-info-alpha-25: rgba(59, 130, 246, 0.25);
+  --color-info-alpha-40: rgba(59, 130, 246, 0.4);
+  --color-info-alpha-50: rgba(59, 130, 246, 0.5);
+  --color-warning-alpha-25: rgba(245, 158, 11, 0.25);
+  --color-warning-alpha-40: rgba(245, 158, 11, 0.4);
+  --color-error-alpha-30: rgba(239, 68, 68, 0.3);
+  --color-error-alpha-40: rgba(239, 68, 68, 0.4);
+
+  /* Overlay Utilities (for dark theme - light overlays on dark bg) */
+  --overlay-light-2: rgba(255, 255, 255, 0.02);
+  --overlay-light-3: rgba(255, 255, 255, 0.03);
+  --overlay-light-5: rgba(255, 255, 255, 0.05);
+  --overlay-light-10: rgba(255, 255, 255, 0.1);
+  --overlay-light-15: rgba(255, 255, 255, 0.15);
+  --overlay-light-20: rgba(255, 255, 255, 0.2);
+  --overlay-dark-5: rgba(0, 0, 0, 0.05);
+  --overlay-dark-10: rgba(0, 0, 0, 0.1);
+  --overlay-dark-20: rgba(0, 0, 0, 0.2);
+  --overlay-dark-40: rgba(0, 0, 0, 0.4);
+  --overlay-dark-60: rgba(0, 0, 0, 0.6);
+  --overlay-dark-80: rgba(0, 0, 0, 0.8);
+}
+
+[data-theme="light"] {
+  --color-primary-hover: ${colors.primaryMuted};
+  --color-primary-subtle: rgba(16, 185, 129, 0.08);
+  --color-secondary-hover: #e55a3a;
+  --color-secondary-subtle: rgba(255, 107, 74, 0.08);
+  --color-accent-hover: ${colors.accentMuted};
+  --color-accent-subtle: rgba(139, 92, 246, 0.08);
+
+  --color-success-hover: ${colors.primaryMuted};
+  --color-success-subtle: rgba(16, 185, 129, 0.08);
+  --color-warning-hover: #d97706;
+  --color-warning-subtle: rgba(245, 158, 11, 0.08);
+  --color-error-hover: #dc2626;
+  --color-error-subtle: rgba(239, 68, 68, 0.08);
+  --color-info-hover: #2563eb;
+  --color-info-subtle: rgba(59, 130, 246, 0.08);
+
+  --bg-gradient-start: #1f2d52;
+  --bg-primary: ${colors.light.bgPrimary};
+  --bg-secondary: ${colors.light.bgSecondary};
+  --bg-tertiary: ${colors.light.bgTertiary};
+  --bg-card: ${colors.light.bgSecondary};
+  --bg-card-hover: #f9fafb;
+  --bg-input: ${colors.light.bgSecondary};
+  --bg-tooltip: ${colors.dark.bgPrimary};
+  --bg-modal-overlay: rgba(0, 0, 0, 0.4);
+
+  --text-primary: ${colors.light.textPrimary};
+  --text-secondary: ${colors.light.textSecondary};
+  --text-tertiary: ${colors.light.textTertiary};
+  --text-disabled: #d1d5db;
+  --text-inverse: #ffffff;
+  --text-link: ${colors.primaryMuted};
+  --text-link-hover: ${colors.primary};
+
+  --border-primary: ${colors.light.border};
+  --border-secondary: ${colors.light.borderSecondary};
+
+  --btn-primary-bg-hover: ${colors.primaryHover};
+  --btn-secondary-bg-hover: rgba(16, 185, 129, 0.08);
+  --btn-disabled-bg: ${colors.light.bgTertiary};
+  --btn-disabled-text: ${colors.light.textTertiary};
+
+  --input-bg: ${colors.light.bgSecondary};
+  --input-border: ${colors.light.borderSecondary};
+  --input-placeholder: ${colors.light.textTertiary};
+
+  --table-header-bg: #f9fafb;
+  --table-row-bg-hover: ${colors.light.bgPrimary};
+  --table-border: ${colors.light.border};
+
+  --badge-success-bg: rgba(16, 185, 129, 0.1);
+  --badge-success-text: ${colors.primaryMuted};
+  --badge-warning-bg: rgba(245, 158, 11, 0.1);
+  --badge-warning-text: #d97706;
+  --badge-error-bg: rgba(239, 68, 68, 0.1);
+  --badge-error-text: #dc2626;
+  --badge-info-bg: rgba(59, 130, 246, 0.1);
+  --badge-info-text: #2563eb;
+  --badge-neutral-bg: ${colors.light.bgTertiary};
+  --badge-neutral-text: ${colors.light.textSecondary};
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+
+  --scrollbar-track: ${colors.light.bgPrimary};
+  --scrollbar-thumb: ${colors.light.borderSecondary};
+  --scrollbar-thumb-hover: ${colors.light.textTertiary};
+
+  /* Overlay Utilities (for light theme - dark overlays on light bg) */
+  --overlay-light-2: rgba(0, 0, 0, 0.02);
+  --overlay-light-3: rgba(0, 0, 0, 0.03);
+  --overlay-light-5: rgba(0, 0, 0, 0.03);
+  --overlay-light-10: rgba(0, 0, 0, 0.05);
+  --overlay-light-15: rgba(0, 0, 0, 0.08);
+  --overlay-light-20: rgba(0, 0, 0, 0.1);
+  --overlay-dark-5: rgba(0, 0, 0, 0.03);
+  --overlay-dark-10: rgba(0, 0, 0, 0.05);
+  --overlay-dark-20: rgba(0, 0, 0, 0.1);
+  --overlay-dark-40: rgba(0, 0, 0, 0.2);
+  --overlay-dark-60: rgba(0, 0, 0, 0.3);
+  --overlay-dark-80: rgba(0, 0, 0, 0.5);
+}
+`;
+
+// ========== RainbowKit Themes ==========
+export const rainbowkitDarkTheme: Theme = {
+  blurs: {
+    modalOverlay: "blur(4px)",
+  },
+  colors: {
+    accentColor: colors.primary,
+    accentColorForeground: "#ffffff",
+    actionButtonBorder: colors.dark.border,
+    actionButtonBorderMobile: colors.dark.border,
+    actionButtonSecondaryBackground: colors.dark.bgSecondary,
+    closeButton: colors.dark.textSecondary,
+    closeButtonBackground: colors.dark.bgTertiary,
+    connectButtonBackground: colors.primary,
+    connectButtonBackgroundError: colors.error,
+    connectButtonInnerBackground: colors.dark.bgSecondary,
+    connectButtonText: "#ffffff",
+    connectButtonTextError: "#ffffff",
+    connectionIndicator: colors.success,
+    downloadBottomCardBackground: colors.dark.bgPrimary,
+    downloadTopCardBackground: colors.dark.bgSecondary,
+    error: colors.error,
+    generalBorder: colors.dark.border,
+    generalBorderDim: colors.dark.bgSecondary,
+    menuItemBackground: colors.dark.bgTertiary,
+    modalBackdrop: "rgba(0, 0, 0, 0.6)",
+    modalBackground: colors.dark.bgPrimary,
+    modalBorder: colors.dark.border,
+    modalText: colors.dark.textPrimary,
+    modalTextDim: colors.dark.textSecondary,
+    modalTextSecondary: colors.dark.textSecondary,
+    profileAction: colors.dark.bgSecondary,
+    profileActionHover: colors.dark.bgTertiary,
+    profileForeground: colors.dark.bgSecondary,
+    selectedOptionBorder: colors.primary,
+    standby: colors.warning,
+  },
+  fonts: {
+    body: "inherit",
+  },
+  radii: {
+    actionButton: "8px",
+    connectButton: "8px",
+    menuButton: "8px",
+    modal: "12px",
+    modalMobile: "12px",
+  },
+  shadows: {
+    connectButton: "0 4px 6px rgba(0, 0, 0, 0.4)",
+    dialog: "0 10px 15px rgba(0, 0, 0, 0.5)",
+    profileDetailsAction: "0 2px 4px rgba(0, 0, 0, 0.3)",
+    selectedOption: `0 0 0 2px ${colors.primary}`,
+    selectedWallet: `0 0 0 2px ${colors.primary}`,
+    walletLogo: "0 2px 4px rgba(0, 0, 0, 0.3)",
+  },
+};
+
+export const rainbowkitLightTheme: Theme = {
+  blurs: {
+    modalOverlay: "blur(4px)",
+  },
+  colors: {
+    accentColor: colors.primary,
+    accentColorForeground: "#ffffff",
+    actionButtonBorder: colors.light.border,
+    actionButtonBorderMobile: colors.light.border,
+    actionButtonSecondaryBackground: colors.light.bgPrimary,
+    closeButton: colors.light.textSecondary,
+    closeButtonBackground: colors.light.bgTertiary,
+    connectButtonBackground: colors.primary,
+    connectButtonBackgroundError: colors.error,
+    connectButtonInnerBackground: colors.light.bgSecondary,
+    connectButtonText: "#ffffff",
+    connectButtonTextError: "#ffffff",
+    connectionIndicator: colors.success,
+    downloadBottomCardBackground: colors.light.bgPrimary,
+    downloadTopCardBackground: colors.light.bgSecondary,
+    error: colors.error,
+    generalBorder: colors.light.border,
+    generalBorderDim: colors.light.bgPrimary,
+    menuItemBackground: colors.light.bgPrimary,
+    modalBackdrop: "rgba(0, 0, 0, 0.4)",
+    modalBackground: colors.light.bgSecondary,
+    modalBorder: colors.light.border,
+    modalText: colors.light.textPrimary,
+    modalTextDim: colors.light.textSecondary,
+    modalTextSecondary: colors.light.textSecondary,
+    profileAction: colors.light.bgPrimary,
+    profileActionHover: colors.light.bgTertiary,
+    profileForeground: colors.light.bgPrimary,
+    selectedOptionBorder: colors.primary,
+    standby: colors.warning,
+  },
+  fonts: {
+    body: "inherit",
+  },
+  radii: {
+    actionButton: "8px",
+    connectButton: "8px",
+    menuButton: "8px",
+    modal: "12px",
+    modalMobile: "12px",
+  },
+  shadows: {
+    connectButton: "0 4px 6px rgba(0, 0, 0, 0.07)",
+    dialog: "0 10px 15px rgba(0, 0, 0, 0.1)",
+    profileDetailsAction: "0 2px 4px rgba(0, 0, 0, 0.05)",
+    selectedOption: `0 0 0 2px ${colors.primary}`,
+    selectedWallet: `0 0 0 2px ${colors.primary}`,
+    walletLogo: "0 2px 4px rgba(0, 0, 0, 0.05)",
+  },
+};
+
+// ========== Theme Hook ==========
+export function getRainbowKitTheme(isDark: boolean): Theme {
+  return isDark ? rainbowkitDarkTheme : rainbowkitLightTheme;
+}
diff --git a/src/types/assets.d.ts b/src/types/assets.d.ts
index 6f8eb56..8129aee 100644
--- a/src/types/assets.d.ts
+++ b/src/types/assets.d.ts
@@ -1,19 +1,19 @@
 declare module "*.svg" {
-	const content: string;
-	export default content;
+  const content: string;
+  export default content;
 }
 
 declare module "*.png" {
-	const content: string;
-	export default content;
+  const content: string;
+  export default content;
 }
 
 declare module "*.jpg" {
-	const content: string;
-	export default content;
+  const content: string;
+  export default content;
 }
 
 declare module "*.jpeg" {
-	const content: string;
-	export default content;
+  const content: string;
+  export default content;
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index bb1aa85..3151d73 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,136 +1,142 @@
-import { ethers } from "ethers";
-import React from "react";
+import type { EthLog } from "explorer-network-connectors";
+import type React from "react";
 
 // ==================== CORE DOMAIN TYPES ====================
 
 export interface NetworkStats {
-	currentGasPrice: string;
-	isSyncing: boolean;
-	currentBlockNumber: string;
-	clientVersion: string;
-	metadata: any;
+  currentGasPrice: string;
+  isSyncing: boolean;
+  currentBlockNumber: string;
+  clientVersion: string;
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  metadata: any;
 }
 
 export interface Block {
-	difficulty: string;
-	extraData: string;
-	gasLimit: string;
-	gasUsed: string;
-	hash: string;
-	logsBloom: string;
-	miner: string;
-	mixHash: string;
-	nonce: string;
-	number: string;
-	parentHash: string;
-	receiptsRoot: string;
-	sha3Uncles: string;
-	size: string;
-	stateRoot: string;
-	timestamp: string;
-	baseFeePerGas?: string;
-	totalDifficulty: string;
-	transactions: string[];
-	transactionsRoot: string;
-	uncles: any[];
-	blobGasUsed: string;
-	excessBlobGas: string;
-	withdrawalsRoot: string;
-	withdrawals: Array<{
-		address: string;
-		amount: string;
-		index: string;
-		validatorIndex: string;
-	}>;
+  difficulty: string;
+  extraData: string;
+  gasLimit: string;
+  gasUsed: string;
+  hash: string;
+  logsBloom: string;
+  miner: string;
+  mixHash: string;
+  nonce: string;
+  number: string;
+  parentHash: string;
+  receiptsRoot: string;
+  sha3Uncles: string;
+  size: string;
+  stateRoot: string;
+  timestamp: string;
+  baseFeePerGas?: string;
+  totalDifficulty: string;
+  transactions: string[];
+  transactionsRoot: string;
+  uncles: string[];
+  blobGasUsed: string;
+  excessBlobGas: string;
+  withdrawalsRoot: string;
+  withdrawals: Array<{
+    address: string;
+    amount: string;
+    index: string;
+    validatorIndex: string;
+  }>;
 }
 
 export interface BlockArbitrum extends Block {
-	l1BlockNumber: string;
-	sendCount: string;
-	sendRoot: string;
+  l1BlockNumber: string;
+  sendCount: string;
+  sendRoot: string;
 }
 
 export interface Transaction {
-	blockHash: string;
-	blockNumber: string;
-	from: string;
-	gas: string;
-	gasPrice: string;
-	maxFeePerGas?: string;
-	maxPriorityFeePerGas?: string;
-	hash: string;
-	nonce: string;
-	to: string;
-	data: string;
-	transactionIndex: string;
-	value: string;
-	type: string;
-	v: string;
-	r: string;
-	s: string;
-	timestamp?: string;
-	blockBaseFeePerGas?: string;
-	receipt?: TransactionReceipt;
+  blockHash: string;
+  blockNumber: string;
+  from: string;
+  gas: string;
+  gasPrice: string;
+  maxFeePerGas?: string;
+  maxPriorityFeePerGas?: string;
+  hash: string;
+  nonce: string;
+  to: string;
+  data: string;
+  transactionIndex: string;
+  value: string;
+  type: string;
+  v: string;
+  r: string;
+  s: string;
+  timestamp?: string;
+  blockBaseFeePerGas?: string;
+  receipt?: TransactionReceipt;
 }
 
 export interface TransactionArbitrum extends Transaction {
-	requestId: string;
+  requestId: string;
 }
 
 export interface TransactionReceipt {
-	blockHash: string;
-	blockNumber: string;
-	contractAddress: any;
-	cumulativeGasUsed: string;
-	effectiveGasPrice: string;
-	from: string;
-	gasUsed: string;
-	logs: any[];
-	logsBloom: string;
-	status: string;
-	to: string;
-	transactionHash: string;
-	transactionIndex: string;
-	type: string;
+  blockHash: string;
+  blockNumber: string;
+  contractAddress: string | null;
+  cumulativeGasUsed: string;
+  effectiveGasPrice: string;
+  from: string;
+  gasUsed: string;
+  logs: EthLog[];
+  logsBloom: string;
+  status: string;
+  to: string;
+  transactionHash: string;
+  transactionIndex: string;
+  type: string;
 }
 
 export interface TransactionReceiptArbitrum extends TransactionReceipt {
-	l1BlockNumber: string;
-	gasUsedForL1: string;
+  l1BlockNumber: string;
+  gasUsedForL1: string;
 }
 
 // Optimism types - blocks are same as Ethereum
 export interface TransactionReceiptOptimism extends TransactionReceipt {
-	l1Fee: string;
-	l1GasPrice: string;
-	l1GasUsed: string;
-	l1FeeScalar: string;
+  l1Fee: string;
+  l1GasPrice: string;
+  l1GasUsed: string;
+  l1FeeScalar: string;
 }
 
 export interface Address {
-	address: string;
-	balance: string;
-	code: string;
-	txCount: string;
-	storeageAt: StoreageAt;
-	recentTransactions?: Transaction[];
+  address: string;
+  balance: string;
+  code: string;
+  txCount: string;
+  storageAt: StorageAt;
+  recentTransactions?: Transaction[];
 }
 
-export type StoreageAt = Record<string, string>;
+/**
+ * Address type classification
+ */
+export type AddressType = "account" | "contract" | "erc20" | "erc721" | "erc1155";
+
+export type StorageAt = Record<string, string>;
 
 export interface MempoolTransaction {
-	from: string;
-	gas: string;
-	gasPrice: string;
-	hash: string;
-	input: string;
-	nonce: string;
-	to: string;
-	value: string;
-	type: string;
-	v: string;
-	r: string;
-	s: string;
+  from: string;
+  gas: string;
+  gasPrice: string;
+  hash: string;
+  input: string;
+  nonce: string;
+  to: string;
+  value: string;
+  type: string;
+  v: string;
+  r: string;
+  s: string;
 }
 
 // ==================== CONTEXT TYPES ====================
@@ -139,59 +145,111 @@ export interface MempoolTransaction {
  * Notification interface
  */
 export interface Notification {
-	id: string;
-	message: string;
-	type: "success" | "warning" | "error";
-	duration?: number; // Auto-dismiss after this many milliseconds (optional)
+  id: string;
+  message: string;
+  type: "success" | "warning" | "error";
+  duration?: number; // Auto-dismiss after this many milliseconds (optional)
 }
 
 /**
  * Notification context type
  */
 export interface NotificationContextType {
-	notifications: Notification[];
-	addNotification: (
-		message: string,
-		type: Notification["type"],
-		duration?: number,
-	) => void;
-	removeNotification: (id: string) => void;
-	clearAllNotifications: () => void;
+  notifications: Notification[];
+  addNotification: (message: string, type: Notification["type"], duration?: number) => void;
+  removeNotification: (id: string) => void;
+  clearAllNotifications: () => void;
 }
 
 /**
  * Notification provider props
  */
 export interface NotificationProviderProps {
-	children: React.ReactNode;
+  children: React.ReactNode;
 }
 
 /**
  * Theme context type
  */
 export interface ThemeContextType {
-	isDarkMode: boolean;
-	toggleTheme: () => void;
+  isDarkMode: boolean;
+  toggleTheme: () => void;
 }
 
 /**
  * Theme provider props
  */
 export interface ThemeProviderProps {
-	children: React.ReactNode;
+  children: React.ReactNode;
 }
 
 /**
  * App context interface
  */
 export interface IAppContext {
-	appReady: boolean;
-	resourcesLoaded: boolean;
-	isHydrated: boolean;
-	rpcUrls: RpcUrlsContextType;
-	setRpcUrls: (rpcUrls: RpcUrlsContextType) => void;
-	jsonFiles: Record<string, any>;
-	setJsonFiles: (jsonFiles: Record<string, any>) => void;
+  appReady: boolean;
+  resourcesLoaded: boolean;
+  isHydrated: boolean;
+  rpcUrls: RpcUrlsContextType;
+  setRpcUrls: (rpcUrls: RpcUrlsContextType) => void;
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  jsonFiles: Record<string, any>;
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  setJsonFiles: (jsonFiles: Record<string, any>) => void;
+  // Network-related fields
+  networks: NetworkConfig[];
+  enabledNetworks: NetworkConfig[];
+  networksLoading: boolean;
+  networksError: string | null;
+  getNetwork: (networkId: number) => NetworkConfig | undefined;
+  reloadNetworks: () => Promise<void>;
+}
+
+/**
+ * Network subscription tier
+ */
+export interface NetworkSubscription {
+  tier: 1 | 2 | 3; // 1: Backer, 2: Partner, 3: Ally
+  expiresAt: string; // YYYY-MM-DD format
+}
+
+/**
+ * Network explorer configuration
+ */
+export interface NetworkExplorer {
+  subdomain?: string;
+  features?: string[];
+  priority?: number;
+}
+
+/**
+ * Network link
+ */
+export interface NetworkLink {
+  name: string;
+  url: string;
+  description?: string;
+}
+
+/**
+ * Network configuration interface
+ */
+export interface NetworkConfig {
+  networkId: number;
+  name: string;
+  shortName: string;
+  description?: string;
+  color?: string;
+  currency: string;
+  isTestnet?: boolean;
+  subscription?: NetworkSubscription;
+  logo?: string;
+  profile?: string;
+  explorer?: NetworkExplorer;
+  rpc?: {
+    public: string[];
+  };
+  links?: NetworkLink[];
 }
 
 /**
@@ -200,18 +258,8 @@ export interface IAppContext {
 
 export type RPCUrls = string[];
 
-export type supportedChainsIds =
-	| 1 // mainnet
-	| 11155111 // sepolia testnet
-	| 31337 // local node (hardhat, anvil, aztec)
-	| 42161 // arbitrum one
-	| 10 // optimism mainnet
-	| 8453 // base mainnet
-	| 56 // bsc mainnet
-	| 97 // bsc testnet
-	| 137; // polygon pos
-
-export type RpcUrlsContextType = Record<supportedChainsIds, RPCUrls>;
+// RPC URLs are now dynamically loaded from metadata, so we use a flexible Record type
+export type RpcUrlsContextType = Record<number, RPCUrls>;
 
 // ==================== SETTINGS TYPES ====================
 
@@ -219,18 +267,20 @@ export type RpcUrlsContextType = Record<supportedChainsIds, RPCUrls>;
  * User settings for the application
  */
 export interface UserSettings {
-	theme?: "light" | "dark" | "auto";
-	showBackgroundBlocks?: boolean;
-	rpcStrategy?: "fallback" | "parallel";
+  theme?: "light" | "dark" | "auto";
+  showBackgroundBlocks?: boolean;
+  rpcStrategy?: "fallback" | "parallel";
+  maxParallelRequests?: number;
 }
 
 /**
  * Default user settings
  */
 export const DEFAULT_SETTINGS: UserSettings = {
-	theme: "auto",
-	showBackgroundBlocks: true,
-	rpcStrategy: "fallback",
+  theme: "auto",
+  showBackgroundBlocks: true,
+  rpcStrategy: "fallback",
+  maxParallelRequests: 3,
 };
 
 /**
@@ -242,176 +292,171 @@ export type RPCStrategy = "fallback" | "parallel";
  * Metadata about RPC request when using parallel strategy
  */
 export interface RPCMetadata {
-	strategy: "parallel";
-	timestamp: number;
-	responses: RPCProviderResponse[];
-	hasInconsistencies: boolean;
+  strategy: "parallel";
+  timestamp: number;
+  responses: RPCProviderResponse[];
+  hasInconsistencies: boolean;
 }
 
 /**
  * Individual provider response in parallel mode
  */
 export interface RPCProviderResponse {
-	url: string;
-	status: "success" | "error";
-	responseTime: number;
-	data?: any;
-	error?: string;
-	hash?: string;
+  url: string;
+  status: "success" | "error";
+  responseTime: number;
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  data?: any;
+  error?: string;
+  hash?: string;
 }
 
 /**
  * Wrapper type for data + metadata from RPC calls
  */
 export interface DataWithMetadata<T> {
-	data: T;
-	metadata?: RPCMetadata;
+  data: T;
+  metadata?: RPCMetadata;
 }
 
 // src/services/rpc/types.ts
 export interface RPCBlock {
-	number: string; // hex
-	hash: string;
-	parentHash: string;
-	nonce: string;
-	sha3Uncles: string;
-	logsBloom: string;
-	transactionsRoot: string;
-	stateRoot: string;
-	receiptsRoot: string;
-	miner: string;
-	difficulty: string; // hex
-	totalDifficulty: string; // hex
-	extraData: string;
-	size: string; // hex
-	gasLimit: string; // hex
-	gasUsed: string; // hex
-	timestamp: string; // hex
-	transactions: string[] | RPCTransaction[]; // either hashes or full transactions
-	uncles: string[];
-	baseFeePerGas?: string; // hex
-	mixHash: string;
-	blobGasUsed: string;
-	excessBlobGas: string;
-	withdrawalsRoot: string;
-	withdrawals: Array<{
-		address: string;
-		amount: string;
-		index: string;
-		validatorIndex: string;
-	}>;
+  number: string; // hex
+  hash: string;
+  parentHash: string;
+  nonce: string;
+  sha3Uncles: string;
+  logsBloom: string;
+  transactionsRoot: string;
+  stateRoot: string;
+  receiptsRoot: string;
+  miner: string;
+  difficulty: string; // hex
+  totalDifficulty: string; // hex
+  extraData: string;
+  size: string; // hex
+  gasLimit: string; // hex
+  gasUsed: string; // hex
+  timestamp: string; // hex
+  transactions: string[] | RPCTransaction[]; // either hashes or full transactions
+  uncles: string[];
+  baseFeePerGas?: string; // hex
+  mixHash: string;
+  blobGasUsed: string;
+  excessBlobGas: string;
+  withdrawalsRoot: string;
+  withdrawals: Array<{
+    address: string;
+    amount: string;
+    index: string;
+    validatorIndex: string;
+  }>;
 }
 
 export interface RPCTransaction {
-	blockHash: string;
-	blockNumber: string; // hex
-	from: string;
-	gas: string; // hex
-	gasPrice: string; // hex
-	maxFeePerGas?: string; // hex
-	maxPriorityFeePerGas?: string; // hex
-	hash: string;
-	input: string;
-	nonce: string; // hex
-	to: string;
-	transactionIndex: string; // hex
-	value: string; // hex
-	type: string; // hex
-	chainId: string; // hex
-	v: string; // hex
-	r: string;
-	s: string;
+  blockHash: string;
+  blockNumber: string; // hex
+  from: string;
+  gas: string; // hex
+  gasPrice: string; // hex
+  maxFeePerGas?: string; // hex
+  maxPriorityFeePerGas?: string; // hex
+  hash: string;
+  input: string;
+  nonce: string; // hex
+  to: string;
+  transactionIndex: string; // hex
+  value: string; // hex
+  type: string; // hex
+  chainId: string; // hex
+  v: string; // hex
+  r: string;
+  s: string;
 }
 
 export interface RPCTransactionReceipt {
-	transactionHash: string;
-	transactionIndex: string; // hex
-	blockHash: string;
-	blockNumber: string; // hex
-	from: string;
-	to: string;
-	cumulativeGasUsed: string; // hex
-	gasUsed: string; // hex
-	contractAddress: string;
-	logs: RPCLog[];
-	logsBloom: string;
-	status: string; // hex - "0x1" for success, "0x0" for failure
-	effectiveGasPrice: string; // hex
-	type: string; // hex
+  transactionHash: string;
+  transactionIndex: string; // hex
+  blockHash: string;
+  blockNumber: string; // hex
+  from: string;
+  to: string;
+  cumulativeGasUsed: string; // hex
+  gasUsed: string; // hex
+  contractAddress: string;
+  logs: RPCLog[];
+  logsBloom: string;
+  status: string; // hex - "0x1" for success, "0x0" for failure
+  effectiveGasPrice: string; // hex
+  type: string; // hex
 }
 
 export interface RPCLog {
-	address: string;
-	topics: string[];
-	data: string;
-	blockNumber: string; // hex
-	transactionHash: string;
-	transactionIndex: string; // hex
-	blockHash: string;
-	logIndex: string; // hex
-	removed: boolean;
+  address: string;
+  topics: string[];
+  data: string;
+  blockNumber: string; // hex
+  transactionHash: string;
+  transactionIndex: string; // hex
+  blockHash: string;
+  logIndex: string; // hex
+  removed: boolean;
 }
 
 // ==================== Artifacts TYPES ====================
 
-export type ABI =
-	| FunctionABI
-	| ConstructorABI
-	| FallbackABI
-	| ReceiveABI
-	| EventABI
-	| ErrorABI;
+export type ABI = FunctionABI | ConstructorABI | FallbackABI | ReceiveABI | EventABI | ErrorABI;
 
 export interface ABIParameter {
-	name: string;
-	type: string;
-	indexed?: boolean; // Only used for events
-	components?: ABIParameter[]; // For tuples / structs
+  name: string;
+  type: string;
+  indexed?: boolean; // Only used for events
+  components?: ABIParameter[]; // For tuples / structs
 }
 
 export interface EventParameter extends ABIParameter {
-	indexed: boolean;
+  indexed: boolean;
 }
 
 export interface BaseABI {
-	type: string;
+  type: string;
 }
 
 export interface FunctionABI extends BaseABI {
-	type: "function";
-	name: string;
-	inputs: ABIParameter[];
-	outputs: ABIParameter[];
-	stateMutability: "pure" | "view" | "nonpayable" | "payable";
+  type: "function";
+  name: string;
+  inputs: ABIParameter[];
+  outputs: ABIParameter[];
+  stateMutability: "pure" | "view" | "nonpayable" | "payable";
 }
 
 export interface ConstructorABI extends BaseABI {
-	type: "constructor";
-	inputs: ABIParameter[];
-	stateMutability: "nonpayable" | "payable";
+  type: "constructor";
+  inputs: ABIParameter[];
+  stateMutability: "nonpayable" | "payable";
 }
 
 export interface FallbackABI extends BaseABI {
-	type: "fallback";
-	stateMutability: "nonpayable" | "payable";
+  type: "fallback";
+  stateMutability: "nonpayable" | "payable";
 }
 
 export interface ReceiveABI extends BaseABI {
-	type: "receive";
-	stateMutability: "payable";
+  type: "receive";
+  stateMutability: "payable";
 }
 
 export interface EventABI extends BaseABI {
-	type: "event";
-	name: string;
-	inputs: EventParameter[];
-	anonymous: boolean;
+  type: "event";
+  name: string;
+  inputs: EventParameter[];
+  anonymous: boolean;
 }
 
 export interface ErrorABI extends BaseABI {
-	type: "error";
-	name: string;
-	inputs: ABIParameter[];
+  type: "error";
+  name: string;
+  inputs: ABIParameter[];
 }
 
 // ==================== ADDRESS TRANSACTION TYPES ====================
@@ -420,51 +465,88 @@ export interface ErrorABI extends BaseABI {
  * Result from trace_filter RPC call
  */
 export interface TraceFilterResult {
-	action: {
-		callType?: string;
-		from: string;
-		to?: string;
-		gas: string;
-		input?: string;
-		value: string;
-		init?: string; // For contract creation
-	};
-	blockHash: string;
-	blockNumber: number;
-	result?: {
-		gasUsed: string;
-		output?: string;
-		address?: string; // Created contract address
-	};
-	subtraces: number;
-	traceAddress: number[];
-	transactionHash: string;
-	transactionPosition: number;
-	type: "call" | "create" | "suicide" | "reward";
-	error?: string;
+  action: {
+    callType?: string;
+    from: string;
+    to?: string;
+    gas: string;
+    input?: string;
+    value: string;
+    init?: string; // For contract creation
+  };
+  blockHash: string;
+  blockNumber: number;
+  result?: {
+    gasUsed: string;
+    output?: string;
+    address?: string; // Created contract address
+  };
+  subtraces: number;
+  traceAddress: number[];
+  transactionHash: string;
+  transactionPosition: number;
+  type: "call" | "create" | "suicide" | "reward";
+  error?: string;
 }
 
 /**
  * Result from eth_getLogs RPC call
  */
 export interface LogEntry {
-	address: string;
-	topics: string[];
-	data: string;
-	blockNumber: string;
-	transactionHash: string;
-	transactionIndex: string;
-	blockHash: string;
-	logIndex: string;
-	removed: boolean;
+  address: string;
+  topics: string[];
+  data: string;
+  blockNumber: string;
+  transactionHash: string;
+  transactionIndex: string;
+  blockHash: string;
+  logIndex: string;
+  removed: boolean;
 }
 
 /**
  * Address transactions result with metadata about data source
  */
 export interface AddressTransactionsResult {
-	transactions: string[]; // Transaction hashes
-	source: "trace_filter" | "logs" | "none";
-	isComplete: boolean; // true if we have full history (trace_filter)
-	message?: string; // Optional message about limitations
+  transactions: string[]; // Transaction hashes
+  source: "trace_filter" | "logs" | "none";
+  isComplete: boolean; // true if we have full history (trace_filter)
+  message?: string; // Optional message about limitations
+}
+
+// ==================== ENS TYPES ====================
+
+/**
+ * ENS records for a name
+ */
+export interface ENSRecords {
+  name?: string;
+  address?: string;
+  contenthash?: string;
+  textRecords: Record<string, string>;
+}
+
+/**
+ * Result of ENS forward resolution
+ */
+export interface ENSResolveResult {
+  address: string;
+  ensName: string;
+  records?: ENSRecords;
+}
+
+/**
+ * Result of ENS reverse resolution
+ */
+export interface ENSReverseResult {
+  ensName: string | null;
+  verified: boolean; // true if forward resolution matches the original address
+}
+
+/**
+ * Decoded contenthash
+ */
+export interface DecodedContenthash {
+  type: string;
+  url: string;
 }
diff --git a/src/utils/addressTypeDetection.ts b/src/utils/addressTypeDetection.ts
new file mode 100644
index 0000000..b4b4a2d
--- /dev/null
+++ b/src/utils/addressTypeDetection.ts
@@ -0,0 +1,280 @@
+import { fetchToken } from "../services/MetadataService";
+import type { Address, AddressType } from "../types";
+
+// ERC165 interface IDs
+const ERC165_INTERFACE_ID = "0x01ffc9a7";
+const ERC721_INTERFACE_ID = "0x80ac58cd";
+const ERC1155_INTERFACE_ID = "0xd9b67a26";
+
+// ERC20 function selectors
+const ERC20_NAME_SELECTOR = "0x06fdde03"; // name()
+const ERC20_SYMBOL_SELECTOR = "0x95d89b41"; // symbol()
+const ERC20_DECIMALS_SELECTOR = "0x313ce567"; // decimals()
+const ERC20_TOTAL_SUPPLY_SELECTOR = "0x18160ddd"; // totalSupply()
+
+/**
+ * Make a single RPC call
+ */
+async function rpcCall<T>(rpcUrl: string, method: string, params: unknown[]): Promise<T> {
+  const response = await fetch(rpcUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      jsonrpc: "2.0",
+      method,
+      params,
+      id: 1,
+    }),
+  });
+
+  const data = await response.json();
+
+  if (data.error) {
+    throw new Error(data.error.message);
+  }
+
+  return data.result;
+}
+
+/**
+ * Fetch basic address data (balance, code, txCount)
+ */
+async function fetchAddressData(addressHash: string, rpcUrl: string): Promise<Address> {
+  const normalizedAddress = addressHash.toLowerCase();
+
+  const [balance, code, txCount] = await Promise.all([
+    rpcCall<string>(rpcUrl, "eth_getBalance", [normalizedAddress, "latest"]),
+    rpcCall<string>(rpcUrl, "eth_getCode", [normalizedAddress, "latest"]),
+    rpcCall<string>(rpcUrl, "eth_getTransactionCount", [normalizedAddress, "latest"]),
+  ]);
+
+  return {
+    address: addressHash,
+    balance: BigInt(balance).toString(),
+    code: code,
+    txCount: Number.parseInt(txCount, 16).toString(),
+    storageAt: {},
+  };
+}
+
+/**
+ * Check if a contract supports a specific interface via ERC165
+ */
+async function supportsInterface(
+  contractAddress: string,
+  interfaceId: string,
+  rpcUrl: string,
+): Promise<boolean> {
+  try {
+    // Encode supportsInterface(bytes4) call
+    // supportsInterface selector: 0x01ffc9a7
+    // Pad interfaceId to 32 bytes
+    const paddedInterfaceId = interfaceId.slice(2).padEnd(64, "0");
+    const data = `0x01ffc9a7${paddedInterfaceId}`;
+
+    const result = await rpcCall<string>(rpcUrl, "eth_call", [
+      { to: contractAddress, data },
+      "latest",
+    ]);
+
+    // Check if result is true (0x0000...0001)
+    const resultValue = result.toLowerCase();
+    return resultValue === "0x0000000000000000000000000000000000000000000000000000000000000001";
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if a contract has ERC20 methods by calling them
+ */
+async function hasERC20Methods(contractAddress: string, rpcUrl: string): Promise<boolean> {
+  const selectors = [
+    ERC20_NAME_SELECTOR,
+    ERC20_SYMBOL_SELECTOR,
+    ERC20_DECIMALS_SELECTOR,
+    ERC20_TOTAL_SUPPLY_SELECTOR,
+  ];
+
+  let successCount = 0;
+
+  // Check all selectors in parallel
+  const results = await Promise.all(
+    selectors.map(async (selector) => {
+      try {
+        const result = await rpcCall<string>(rpcUrl, "eth_call", [
+          { to: contractAddress, data: selector },
+          "latest",
+        ]);
+        return result && result !== "0x";
+      } catch {
+        return false;
+      }
+    }),
+  );
+
+  successCount = results.filter(Boolean).length;
+
+  // If at least 3 of 4 methods respond, likely ERC20
+  return successCount >= 3;
+}
+
+/**
+ * Detect address type via ERC165 supportsInterface
+ */
+async function detectViaERC165(
+  contractAddress: string,
+  rpcUrl: string,
+): Promise<AddressType | null> {
+  // First check if contract supports ERC165 at all
+  const supportsERC165 = await supportsInterface(contractAddress, ERC165_INTERFACE_ID, rpcUrl);
+
+  if (!supportsERC165) {
+    return null;
+  }
+
+  // Check for ERC1155 and ERC721 in parallel
+  const [isERC1155, isERC721] = await Promise.all([
+    supportsInterface(contractAddress, ERC1155_INTERFACE_ID, rpcUrl),
+    supportsInterface(contractAddress, ERC721_INTERFACE_ID, rpcUrl),
+  ]);
+
+  // Check for ERC1155 first (more specific)
+  if (isERC1155) {
+    return "erc1155";
+  }
+
+  if (isERC721) {
+    return "erc721";
+  }
+
+  return null;
+}
+
+/**
+ * Detect address type via metadata service
+ */
+async function detectViaMetadata(
+  chainId: number,
+  contractAddress: string,
+): Promise<AddressType | null> {
+  try {
+    const tokenMetadata = await fetchToken(chainId, contractAddress);
+
+    if (tokenMetadata?.type) {
+      const type = tokenMetadata.type.toLowerCase();
+      if (type === "erc20" || type === "erc721" || type === "erc1155") {
+        return type as AddressType;
+      }
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Determine the address type from code and on-chain detection
+ */
+async function determineContractType(
+  addressHash: string,
+  chainId: number,
+  rpcUrl: string,
+): Promise<AddressType> {
+  // Try metadata detection first (fastest, no RPC calls)
+  const metadataType = await detectViaMetadata(chainId, addressHash);
+  if (metadataType) {
+    return metadataType;
+  }
+
+  // Try ERC165 detection (for ERC721/ERC1155)
+  const erc165Type = await detectViaERC165(addressHash, rpcUrl);
+  if (erc165Type) {
+    return erc165Type;
+  }
+
+  // Try ERC20 method detection
+  const isERC20 = await hasERC20Methods(addressHash, rpcUrl);
+  if (isERC20) {
+    return "erc20";
+  }
+
+  // Default to generic contract
+  return "contract";
+}
+
+export interface FetchAddressWithTypeOptions {
+  addressHash: string;
+  chainId: number;
+  rpcUrl: string;
+}
+
+export interface AddressWithType {
+  address: Address;
+  addressType: AddressType;
+}
+
+/**
+ * Fetch address data and detect its type in a single flow
+ * This combines the getAddress and detectAddressType operations
+ */
+export async function fetchAddressWithType(
+  options: FetchAddressWithTypeOptions,
+): Promise<AddressWithType> {
+  const { addressHash, chainId, rpcUrl } = options;
+
+  // Step 1: Fetch basic address data (balance, code, txCount)
+  const address = await fetchAddressData(addressHash, rpcUrl);
+
+  // Step 2: Determine address type based on code
+  if (!address.code || address.code === "0x") {
+    // It's an EOA (no code)
+    return { address, addressType: "account" };
+  }
+
+  // Step 3: It's a contract - determine what type
+  const addressType = await determineContractType(addressHash, chainId, rpcUrl);
+
+  return { address, addressType };
+}
+
+/**
+ * Get a human-readable label for an address type
+ */
+export function getAddressTypeLabel(type: AddressType): string {
+  switch (type) {
+    case "account":
+      return "Account (EOA)";
+    case "contract":
+      return "Contract";
+    case "erc20":
+      return "ERC-20 Token";
+    case "erc721":
+      return "ERC-721 NFT";
+    case "erc1155":
+      return "ERC-1155 Multi-Token";
+    default:
+      return "Unknown";
+  }
+}
+
+/**
+ * Get an icon/emoji for an address type
+ */
+export function getAddressTypeIcon(type: AddressType): string {
+  switch (type) {
+    case "account":
+      return "👤";
+    case "contract":
+      return "📄";
+    case "erc20":
+      return "🪙";
+    case "erc721":
+      return "🖼️";
+    case "erc1155":
+      return "📦";
+    default:
+      return "❓";
+  }
+}
diff --git a/src/utils/artifactsStorage.ts b/src/utils/artifactsStorage.ts
index e01f02d..11d9a16 100644
--- a/src/utils/artifactsStorage.ts
+++ b/src/utils/artifactsStorage.ts
@@ -1,61 +1,62 @@
 const STORAGE_KEY = "OPENSCAN_ARTIFACTS_JSON_V1";
 
+// biome-ignore lint/suspicious/noExplicitAny: <TODO>
 type JsonFilesMap = Record<string, any>;
 
 /**
  * Validates that the object is a valid JSON files map
  */
+
+// biome-ignore lint/suspicious/noExplicitAny: <TODO>
 function isValidJsonFilesMap(obj: any): obj is JsonFilesMap {
-	if (!obj || typeof obj !== "object") return false;
-	// Basic validation - ensure all keys are strings
-	for (const k of Object.keys(obj)) {
-		if (typeof k !== "string") return false;
-	}
-	return true;
+  if (!obj || typeof obj !== "object") return false;
+  // Basic validation - ensure all keys are strings
+  for (const k of Object.keys(obj)) {
+    if (typeof k !== "string") return false;
+  }
+  return true;
 }
 
 /**
  * Load JSON files from localStorage. Returns empty object if nothing found or invalid.
  */
 export function loadJsonFilesFromStorage(): JsonFilesMap {
-	try {
-		const raw = localStorage.getItem(STORAGE_KEY);
-		if (!raw) return {};
-		const parsed = JSON.parse(raw);
-		if (!isValidJsonFilesMap(parsed)) return {};
-		return parsed;
-	} catch (err) {
-		console.warn("Failed to parse JSON files from storage", err);
-		return {};
-	}
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    if (!isValidJsonFilesMap(parsed)) return {};
+    return parsed;
+  } catch (err) {
+    console.warn("Failed to parse JSON files from storage", err);
+    return {};
+  }
 }
 
 /**
  * Save JSON files to localStorage (replaces existing data)
  */
 export function saveJsonFilesToStorage(jsonFiles: JsonFilesMap): void {
-	try {
-		localStorage.setItem(STORAGE_KEY, JSON.stringify(jsonFiles));
-	} catch (err) {
-		console.warn("Failed to save JSON files to storage", err);
-		// Handle quota exceeded errors
-		if (err instanceof Error && err.name === "QuotaExceededError") {
-			console.error(
-				"LocalStorage quota exceeded. Consider clearing old artifacts.",
-			);
-		}
-	}
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(jsonFiles));
+  } catch (err) {
+    console.warn("Failed to save JSON files to storage", err);
+    // Handle quota exceeded errors
+    if (err instanceof Error && err.name === "QuotaExceededError") {
+      console.error("LocalStorage quota exceeded. Consider clearing old artifacts.");
+    }
+  }
 }
 
 /**
  * Clear all JSON files from localStorage
  */
 export function clearJsonFilesFromStorage(): void {
-	try {
-		localStorage.removeItem(STORAGE_KEY);
-	} catch (err) {
-		console.warn("Failed to clear JSON files from storage", err);
-	}
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch (err) {
+    console.warn("Failed to clear JSON files from storage", err);
+  }
 }
 
 export { STORAGE_KEY };
diff --git a/src/utils/devtools.ts b/src/utils/devtools.ts
index 0efe5fa..f35ca00 100644
--- a/src/utils/devtools.ts
+++ b/src/utils/devtools.ts
@@ -1,46 +1,40 @@
-import {
-	keccak256,
-	toUtf8Bytes,
-	hexlify,
-	AbiCoder,
-	solidityPackedKeccak256,
-} from "ethers";
+import { AbiCoder, hexlify, keccak256, solidityPackedKeccak256, toUtf8Bytes } from "ethers";
 
 export type SolidityType =
-	| "string"
-	| "bytes"
-	| "address"
-	| "uint256"
-	| "uint128"
-	| "uint64"
-	| "uint32"
-	| "uint8"
-	| "int256"
-	| "bool"
-	| "bytes32"
-	| "bytes4";
+  | "string"
+  | "bytes"
+  | "address"
+  | "uint256"
+  | "uint128"
+  | "uint64"
+  | "uint32"
+  | "uint8"
+  | "int256"
+  | "bool"
+  | "bytes32"
+  | "bytes4";
 
 export type EthUnit = "eth" | "finney" | "szabo" | "gwei" | "mwei" | "kwei" | "wei";
 
 export interface KeccakResults {
-	encodedBytes?: string;
-	rawHash?: string;
-	solidityEncodePacked?: string;
-	solidityEncode?: string;
-	functionSelector?: string | null;
-	isFunctionSignature?: boolean;
-	error?: string;
+  encodedBytes?: string;
+  rawHash?: string;
+  solidityEncodePacked?: string;
+  solidityEncode?: string;
+  functionSelector?: string | null;
+  isFunctionSignature?: boolean;
+  error?: string;
 }
 
 // Unit conversion: decimals relative to wei (wei has 0 decimals)
 const UNIT_DECIMALS: Record<EthUnit, number> = {
-	eth: 18,
-	finney: 15,
-	szabo: 12,
-	gwei: 9,
-	mwei: 6,
-	kwei: 3,
-	wei: 0,
+  eth: 18,
+  finney: 15,
+  szabo: 12,
+  gwei: 9,
+  mwei: 6,
+  kwei: 3,
+  wei: 0,
 };
 
 /**
@@ -48,335 +42,325 @@ const UNIT_DECIMALS: Record<EthUnit, number> = {
  * Smaller units should have fewer decimals
  */
 function formatUnitValue(weiValue: bigint, unit: EthUnit): string {
-	const decimals = UNIT_DECIMALS[unit];
-	
-	if (decimals === 0) {
-		// Wei: no decimals, just return the integer
-		return weiValue.toString();
-	}
-	
-	// Calculate 10^decimals without ** operator
-	let divisor = BigInt(1);
-	for (let i = 0; i < decimals; i++) {
-		divisor = divisor * BigInt(10);
-	}
-	
-	const integerPart = weiValue / divisor;
-	const remainder = weiValue % divisor;
-	
-	if (remainder === BigInt(0)) {
-		return integerPart.toString();
-	}
-	
-	// Format the fractional part with leading zeros
-	let fractionalStr = remainder.toString().padStart(decimals, '0');
-	
-	// Remove trailing zeros
-	fractionalStr = fractionalStr.replace(/0+$/, '');
-	
-	if (fractionalStr === '') {
-		return integerPart.toString();
-	}
-	
-	return `${integerPart}.${fractionalStr}`;
+  const decimals = UNIT_DECIMALS[unit];
+
+  if (decimals === 0) {
+    // Wei: no decimals, just return the integer
+    return weiValue.toString();
+  }
+
+  // Calculate 10^decimals without ** operator
+  let divisor = BigInt(1);
+  for (let i = 0; i < decimals; i++) {
+    divisor = divisor * BigInt(10);
+  }
+
+  const integerPart = weiValue / divisor;
+  const remainder = weiValue % divisor;
+
+  if (remainder === BigInt(0)) {
+    return integerPart.toString();
+  }
+
+  // Format the fractional part with leading zeros
+  let fractionalStr = remainder.toString().padStart(decimals, "0");
+
+  // Remove trailing zeros
+  fractionalStr = fractionalStr.replace(/0+$/, "");
+
+  if (fractionalStr === "") {
+    return integerPart.toString();
+  }
+
+  return `${integerPart}.${fractionalStr}`;
 }
 
 /**
  * Parse a decimal string to wei (bigint)
  */
 function parseToWei(value: string, fromUnit: EthUnit): bigint | null {
-	const trimmed = value.trim();
-	if (!trimmed || trimmed === '') return null;
-	
-	const decimals = UNIT_DECIMALS[fromUnit];
-	
-	// Split into integer and fractional parts
-	const parts = trimmed.split('.');
-	const integerPart = parts[0] || '0';
-	let fractionalPart = parts[1] || '';
-	
-	// Validate parts are numeric
-	if (!/^\d*$/.test(integerPart) || !/^\d*$/.test(fractionalPart)) {
-		return null;
-	}
-	
-	// Pad or truncate fractional part to match decimals
-	if (fractionalPart.length > decimals) {
-		fractionalPart = fractionalPart.slice(0, decimals);
-	} else {
-		fractionalPart = fractionalPart.padEnd(decimals, '0');
-	}
-	
-	// Combine integer and fractional parts
-	const combined = integerPart + fractionalPart;
-	
-	try {
-		return BigInt(combined);
-	} catch {
-		return null;
-	}
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "") return null;
+
+  const decimals = UNIT_DECIMALS[fromUnit];
+
+  // Split into integer and fractional parts
+  const parts = trimmed.split(".");
+  const integerPart = parts[0] || "0";
+  let fractionalPart = parts[1] || "";
+
+  // Validate parts are numeric
+  if (!/^\d*$/.test(integerPart) || !/^\d*$/.test(fractionalPart)) {
+    return null;
+  }
+
+  // Pad or truncate fractional part to match decimals
+  if (fractionalPart.length > decimals) {
+    fractionalPart = fractionalPart.slice(0, decimals);
+  } else {
+    fractionalPart = fractionalPart.padEnd(decimals, "0");
+  }
+
+  // Combine integer and fractional parts
+  const combined = integerPart + fractionalPart;
+
+  try {
+    return BigInt(combined);
+  } catch {
+    return null;
+  }
 }
 
 /**
  * Convert an amount from one Ethereum unit to all other units
  */
-export function convertEthUnits(
-	value: string,
-	from: EthUnit
-): Record<EthUnit, string> | null {
-	const weiValue = parseToWei(value, from);
-	if (weiValue === null) return null;
-
-	return {
-		eth: formatUnitValue(weiValue, 'eth'),
-		finney: formatUnitValue(weiValue, 'finney'),
-		szabo: formatUnitValue(weiValue, 'szabo'),
-		gwei: formatUnitValue(weiValue, 'gwei'),
-		mwei: formatUnitValue(weiValue, 'mwei'),
-		kwei: formatUnitValue(weiValue, 'kwei'),
-		wei: formatUnitValue(weiValue, 'wei'),
-	};
+export function convertEthUnits(value: string, from: EthUnit): Record<EthUnit, string> | null {
+  const weiValue = parseToWei(value, from);
+  if (weiValue === null) return null;
+
+  return {
+    eth: formatUnitValue(weiValue, "eth"),
+    finney: formatUnitValue(weiValue, "finney"),
+    szabo: formatUnitValue(weiValue, "szabo"),
+    gwei: formatUnitValue(weiValue, "gwei"),
+    mwei: formatUnitValue(weiValue, "mwei"),
+    kwei: formatUnitValue(weiValue, "kwei"),
+    wei: formatUnitValue(weiValue, "wei"),
+  };
 }
 
 /**
  * Parse an input value according to its Solidity type
  */
+
+// biome-ignore lint/suspicious/noExplicitAny: <TODO>
 export function parseInputValue(input: string, type: SolidityType): any {
-	const trimmed = input.trim();
-	switch (type) {
-		case "string":
-			return trimmed;
-		case "bytes":
-		case "bytes32":
-		case "bytes4":
-			return trimmed.startsWith("0x") ? trimmed : `0x${trimmed}`;
-		case "address":
-			if (
-				!/^0x[0-9a-fA-F]{40}$/i.test(trimmed) &&
-				!/^[0-9a-fA-F]{40}$/i.test(trimmed)
-			) {
-				throw new Error("Invalid address format (expected 40 hex chars)");
-			}
-			return trimmed.startsWith("0x") ? trimmed : `0x${trimmed}`;
-		case "uint256":
-		case "uint128":
-		case "uint64":
-		case "uint32":
-		case "uint8":
-		case "int256":
-			return BigInt(trimmed);
-		case "bool":
-			return trimmed.toLowerCase() === "true" || trimmed === "1";
-		default:
-			return trimmed;
-	}
+  const trimmed = input.trim();
+  switch (type) {
+    case "string":
+      return trimmed;
+    case "bytes":
+    case "bytes32":
+    case "bytes4":
+      return trimmed.startsWith("0x") ? trimmed : `0x${trimmed}`;
+    case "address":
+      if (!/^0x[0-9a-fA-F]{40}$/i.test(trimmed) && !/^[0-9a-fA-F]{40}$/i.test(trimmed)) {
+        throw new Error("Invalid address format (expected 40 hex chars)");
+      }
+      return trimmed.startsWith("0x") ? trimmed : `0x${trimmed}`;
+    case "uint256":
+    case "uint128":
+    case "uint64":
+    case "uint32":
+    case "uint8":
+    case "int256":
+      return BigInt(trimmed);
+    case "bool":
+      return trimmed.toLowerCase() === "true" || trimmed === "1";
+    default:
+      return trimmed;
+  }
 }
 
 /**
  * Compute keccak256 hash and related outputs
  */
-export function computeKeccak(
-	input: string,
-	inputType: SolidityType
-): KeccakResults {
-	if (!input.trim()) {
-		return {};
-	}
-
-	try {
-		const abiCoder = AbiCoder.defaultAbiCoder();
-		const parsedValue = parseInputValue(input, inputType);
-
-		let encodedHex: string;
-		if (inputType === "string") {
-			encodedHex = hexlify(toUtf8Bytes(input));
-		} else if (typeof parsedValue === "bigint") {
-			encodedHex = "0x" + parsedValue.toString(16).padStart(64, "0");
-		} else {
-			encodedHex = parsedValue;
-		}
-
-		const rawBytes = toUtf8Bytes(input);
-		const rawHash = keccak256(rawBytes);
-
-		const solidityEncodePacked = solidityPackedKeccak256(
-			[inputType],
-			[parsedValue]
-		);
-
-		const abiEncoded = abiCoder.encode([inputType], [parsedValue]);
-		const solidityEncode = keccak256(abiEncoded);
-
-		const functionSigPattern = /^[a-zA-Z_][a-zA-Z0-9_]*\([^)]*\)$/;
-		const isFunctionSignature =
-			inputType === "string" && functionSigPattern.test(input.trim());
-		const functionSelector = isFunctionSignature ? rawHash.slice(0, 10) : null;
-
-		return {
-			encodedBytes: encodedHex,
-			rawHash,
-			solidityEncodePacked,
-			solidityEncode,
-			functionSelector,
-			isFunctionSignature,
-		};
-	} catch (err: any) {
-		return { error: err.message || "Failed to compute hash" };
-	}
+export function computeKeccak(input: string, inputType: SolidityType): KeccakResults {
+  if (!input.trim()) {
+    return {};
+  }
+
+  try {
+    const abiCoder = AbiCoder.defaultAbiCoder();
+    const parsedValue = parseInputValue(input, inputType);
+
+    let encodedHex: string;
+    if (inputType === "string") {
+      encodedHex = hexlify(toUtf8Bytes(input));
+    } else if (typeof parsedValue === "bigint") {
+      encodedHex = `0x${parsedValue.toString(16).padStart(64, "0")}`;
+    } else {
+      encodedHex = parsedValue;
+    }
+
+    const rawBytes = toUtf8Bytes(input);
+    const rawHash = keccak256(rawBytes);
+
+    const solidityEncodePacked = solidityPackedKeccak256([inputType], [parsedValue]);
+
+    const abiEncoded = abiCoder.encode([inputType], [parsedValue]);
+    const solidityEncode = keccak256(abiEncoded);
+
+    const functionSigPattern = /^[a-zA-Z_][a-zA-Z0-9_]*\([^)]*\)$/;
+    const isFunctionSignature = inputType === "string" && functionSigPattern.test(input.trim());
+    const functionSelector = isFunctionSignature ? rawHash.slice(0, 10) : null;
+
+    return {
+      encodedBytes: encodedHex,
+      rawHash,
+      solidityEncodePacked,
+      solidityEncode,
+      functionSelector,
+      isFunctionSignature,
+    };
+    // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  } catch (err: any) {
+    return { error: err.message || "Failed to compute hash" };
+  }
 }
 
 /**
  * Convert a string to hex
  */
 export function stringToHex(data: string): string {
-	if (data.startsWith("0x")) {
-		return data;
-	}
-
-	return (
-		"0x" +
-		Array.from(data)
-			.map((c) => c.charCodeAt(0).toString(16).padStart(2, "0"))
-			.join("")
-	);
+  if (data.startsWith("0x")) {
+    return data;
+  }
+
+  return (
+    "0x" +
+    Array.from(data)
+      .map((c) => c.charCodeAt(0).toString(16).padStart(2, "0"))
+      .join("")
+  );
 }
 
 /**
  * Convert hex to string
  */
 export function hexToString(hexData: string): string {
-	if (!hexData.startsWith("0x")) {
-		throw new Error("Invalid hex format (must start with 0x)");
-	}
-
-	const hex = hexData.slice(2);
-	return (
-		hex
-			.match(/.{1,2}/g)
-			?.map((byte) => String.fromCharCode(parseInt(byte, 16)))
-			.join("") || ""
-	);
+  if (!hexData.startsWith("0x")) {
+    throw new Error("Invalid hex format (must start with 0x)");
+  }
+
+  const hex = hexData.slice(2);
+  return (
+    hex
+      .match(/.{1,2}/g)
+      ?.map((byte) => String.fromCharCode(parseInt(byte, 16)))
+      .join("") || ""
+  );
 }
 
 /**
  * Check if a string is a valid Ethereum address
  */
 export function isValidAddress(address: string): boolean {
-	return /^0x[0-9a-fA-F]{40}$/i.test(address);
+  return /^0x[0-9a-fA-F]{40}$/i.test(address);
 }
 
 /**
  * Check if a string is valid hex
  */
 export function isValidHex(hex: string): boolean {
-	return /^0x[0-9a-fA-F]*$/i.test(hex);
+  return /^0x[0-9a-fA-F]*$/i.test(hex);
 }
 
 /**
  * Check if a hex string is a valid signature (64 or 65 bytes)
  */
 export function isValidSignature(sig: string): { valid: boolean; length: number; format: string } {
-	if (!sig.startsWith("0x")) {
-		return { valid: false, length: 0, format: "Invalid" };
-	}
-	
-	const hexWithoutPrefix = sig.slice(2);
-	if (!/^[0-9a-fA-F]*$/i.test(hexWithoutPrefix)) {
-		return { valid: false, length: 0, format: "Invalid" };
-	}
-	
-	const byteLength = hexWithoutPrefix.length / 2;
-	
-	if (byteLength === 64) {
-		return { valid: true, length: 64, format: "EIP-2098 Compact (64 bytes)" };
-	} else if (byteLength === 65) {
-		return { valid: true, length: 65, format: "Standard (65 bytes)" };
-	}
-	
-	return { valid: false, length: byteLength, format: "Invalid" };
+  if (!sig.startsWith("0x")) {
+    return { valid: false, length: 0, format: "Invalid" };
+  }
+
+  const hexWithoutPrefix = sig.slice(2);
+  if (!/^[0-9a-fA-F]*$/i.test(hexWithoutPrefix)) {
+    return { valid: false, length: 0, format: "Invalid" };
+  }
+
+  const byteLength = hexWithoutPrefix.length / 2;
+
+  if (byteLength === 64) {
+    return { valid: true, length: 64, format: "EIP-2098 Compact (64 bytes)" };
+  } else if (byteLength === 65) {
+    return { valid: true, length: 65, format: "Standard (65 bytes)" };
+  }
+
+  return { valid: false, length: byteLength, format: "Invalid" };
 }
 
 /**
  * Detect the message format for signature verification
  */
 export function detectMessageFormat(message: string): "hash" | "eip712" | "personal" {
-	if (message.startsWith("0x") && message.length === 66) {
-		// Check if it's a valid 32-byte hash
-		const hexWithoutPrefix = message.slice(2);
-		if (/^[0-9a-fA-F]{64}$/i.test(hexWithoutPrefix)) {
-			return "hash";
-		}
-	}
-	
-	if (message.trim().startsWith("{")) {
-		try {
-			const parsed = JSON.parse(message);
-			if (parsed.domain && parsed.types && parsed.message) {
-				return "eip712";
-			}
-		} catch {
-			// Not valid JSON
-		}
-	}
-	
-	return "personal";
+  if (message.startsWith("0x") && message.length === 66) {
+    // Check if it's a valid 32-byte hash
+    const hexWithoutPrefix = message.slice(2);
+    if (/^[0-9a-fA-F]{64}$/i.test(hexWithoutPrefix)) {
+      return "hash";
+    }
+  }
+
+  if (message.trim().startsWith("{")) {
+    try {
+      const parsed = JSON.parse(message);
+      if (parsed.domain && parsed.types && parsed.message) {
+        return "eip712";
+      }
+    } catch {
+      // Not valid JSON
+    }
+  }
+
+  return "personal";
 }
 
 /**
  * Extract r, s, v components from a signature hex string
  */
 export function parseSignatureComponents(sig: string): {
-	r: string;
-	s: string;
-	v: number;
-	yParity: number;
+  r: string;
+  s: string;
+  v: number;
+  yParity: number;
 } | null {
-	if (!sig.startsWith("0x")) return null;
-	
-	const hexWithoutPrefix = sig.slice(2);
-	
-	// Validate hex characters
-	if (!/^[0-9a-fA-F]*$/i.test(hexWithoutPrefix)) {
-		return null;
-	}
-	
-	const byteLength = hexWithoutPrefix.length / 2;
-	
-	// Only accept exactly 64 or 65 bytes
-	if (byteLength !== 64 && byteLength !== 65) {
-		return null;
-	}
-	
-	if (byteLength === 65) {
-		// Standard signature: r (32 bytes) || s (32 bytes) || v (1 byte)
-		const r = "0x" + hexWithoutPrefix.slice(0, 64);
-		const s = "0x" + hexWithoutPrefix.slice(64, 128);
-		const vByte = parseInt(hexWithoutPrefix.slice(128, 130), 16);
-		// v is either 27/28 or 0/1
-		const v = vByte < 27 ? vByte + 27 : vByte;
-		const yParity = v - 27;
-		return { r, s, v, yParity };
-	} else if (byteLength === 64) {
-		// EIP-2098 compact: r (32 bytes) || yParityAndS (32 bytes)
-		const r = "0x" + hexWithoutPrefix.slice(0, 64);
-		const yParityAndS = hexWithoutPrefix.slice(64, 128);
-		// yParity is encoded in the highest bit of s
-		const firstChar = yParityAndS.charAt(0);
-		const yParity = parseInt(firstChar, 16) >= 8 ? 1 : 0;
-		// Clear the highest bit to get s
-		const sFirstNibble = (parseInt(firstChar, 16) & 0x7).toString(16);
-		const s = "0x" + sFirstNibble + yParityAndS.slice(1);
-		const v = yParity + 27;
-		return { r, s, v, yParity };
-	}
-	
-	return null;
+  if (!sig.startsWith("0x")) return null;
+
+  const hexWithoutPrefix = sig.slice(2);
+
+  // Validate hex characters
+  if (!/^[0-9a-fA-F]*$/i.test(hexWithoutPrefix)) {
+    return null;
+  }
+
+  const byteLength = hexWithoutPrefix.length / 2;
+
+  // Only accept exactly 64 or 65 bytes
+  if (byteLength !== 64 && byteLength !== 65) {
+    return null;
+  }
+
+  if (byteLength === 65) {
+    // Standard signature: r (32 bytes) || s (32 bytes) || v (1 byte)
+    const r = `0x${hexWithoutPrefix.slice(0, 64)}`;
+    const s = `0x${hexWithoutPrefix.slice(64, 128)}`;
+    const vByte = parseInt(hexWithoutPrefix.slice(128, 130), 16);
+    // v is either 27/28 or 0/1
+    const v = vByte < 27 ? vByte + 27 : vByte;
+    const yParity = v - 27;
+    return { r, s, v, yParity };
+  } else if (byteLength === 64) {
+    // EIP-2098 compact: r (32 bytes) || yParityAndS (32 bytes)
+    const r = `0x${hexWithoutPrefix.slice(0, 64)}`;
+    const yParityAndS = hexWithoutPrefix.slice(64, 128);
+    // yParity is encoded in the highest bit of s
+    const firstChar = yParityAndS.charAt(0);
+    const yParity = parseInt(firstChar, 16) >= 8 ? 1 : 0;
+    // Clear the highest bit to get s
+    const sFirstNibble = (parseInt(firstChar, 16) & 0x7).toString(16);
+    const s = `0x${sFirstNibble}${yParityAndS.slice(1)}`;
+    const v = yParity + 27;
+    return { r, s, v, yParity };
+  }
+
+  return null;
 }
 
 /**
  * Check if two addresses match (case-insensitive)
  */
 export function addressesMatch(addr1: string, addr2: string): boolean {
-	if (!addr1 || !addr2) return false;
-	return addr1.toLowerCase() === addr2.toLowerCase();
+  if (!addr1 || !addr2) return false;
+  return addr1.toLowerCase() === addr2.toLowerCase();
 }
diff --git a/src/utils/erc1155Metadata.ts b/src/utils/erc1155Metadata.ts
new file mode 100644
index 0000000..88dcddf
--- /dev/null
+++ b/src/utils/erc1155Metadata.ts
@@ -0,0 +1,277 @@
+/**
+ * ERC1155 Token Metadata Utilities
+ * Handles fetching and parsing ERC1155 token metadata from various URI formats
+ */
+
+import { decodeAbiString, hexToString } from "./hexUtils";
+
+export interface ERC1155TokenMetadata {
+  name?: string;
+  description?: string;
+  image?: string;
+  animation_url?: string;
+  external_url?: string;
+  attributes?: Array<{
+    trait_type?: string;
+    value?: string | number;
+    display_type?: string;
+  }>;
+  properties?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+/**
+ * Convert IPFS URI to HTTP gateway URL
+ */
+export function ipfsToHttp(uri: string): string {
+  if (uri.startsWith("ipfs://")) {
+    return uri.replace("ipfs://", "https://ipfs.io/ipfs/");
+  }
+  if (uri.startsWith("ipfs/")) {
+    return `https://ipfs.io/${uri}`;
+  }
+  return uri;
+}
+
+/**
+ * Substitute {id} placeholder in URI with hex-padded token ID
+ * Per ERC1155 spec: 64 hex chars, lowercase, no 0x prefix
+ */
+export function substituteTokenId(uri: string, tokenId: string): string {
+  // Convert tokenId to BigInt, then to hex, pad to 64 chars
+  const tokenIdBigInt = BigInt(tokenId);
+  const hexId = tokenIdBigInt.toString(16).toLowerCase().padStart(64, "0");
+  return uri.replace("{id}", hexId);
+}
+
+/**
+ * Parse data URI (base64 encoded JSON)
+ */
+function parseDataUri(uri: string): ERC1155TokenMetadata | null {
+  try {
+    // Handle data:application/json;base64,...
+    if (uri.startsWith("data:application/json;base64,")) {
+      const base64Data = uri.slice("data:application/json;base64,".length);
+      const jsonString = atob(base64Data);
+      return JSON.parse(jsonString);
+    }
+    // Handle data:application/json,...
+    if (uri.startsWith("data:application/json,")) {
+      const jsonString = decodeURIComponent(uri.slice("data:application/json,".length));
+      return JSON.parse(jsonString);
+    }
+    return null;
+  } catch (error) {
+    console.error("Failed to parse data URI:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch ERC1155 token URI from contract
+ */
+export async function fetchTokenUri(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<string | null> {
+  try {
+    // Encode uri(uint256) call
+    // uri selector: 0x0e89341c
+    const tokenIdBigInt = BigInt(tokenId);
+    const tokenIdHex = tokenIdBigInt.toString(16).padStart(64, "0");
+    const data = `0x0e89341c${tokenIdHex}`;
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.result || result.result === "0x") {
+      return null;
+    }
+
+    // Decode string from ABI-encoded response
+    const hex = result.result.slice(2);
+    if (hex.length < 128) return null;
+
+    // Get string length (second 32 bytes)
+    const lengthHex = hex.slice(64, 128);
+    const length = parseInt(lengthHex, 16);
+
+    // Get string data
+    const strHex = hex.slice(128, 128 + length * 2);
+    const uri = hexToString(strHex);
+
+    return uri;
+  } catch (error) {
+    console.error("Failed to fetch token URI:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch balance of an address for a specific token ID
+ */
+export async function fetchTokenBalance(
+  contractAddress: string,
+  ownerAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<string | null> {
+  try {
+    // Encode balanceOf(address,uint256) call
+    // balanceOf selector: 0x00fdd58e
+    const ownerPadded = ownerAddress.toLowerCase().slice(2).padStart(64, "0");
+    const tokenIdBigInt = BigInt(tokenId);
+    const tokenIdHex = tokenIdBigInt.toString(16).padStart(64, "0");
+    const data = `0x00fdd58e${ownerPadded}${tokenIdHex}`;
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.result || result.result === "0x") {
+      return "0";
+    }
+
+    const balance = BigInt(result.result).toString();
+    return balance;
+  } catch (error) {
+    console.error("Failed to fetch token balance:", error);
+    return null;
+  }
+}
+
+export interface ERC1155MetadataResult {
+  metadata: ERC1155TokenMetadata | null;
+  tokenUri: string | null;
+}
+
+/**
+ * Fetch and parse ERC1155 token metadata
+ */
+export async function fetchERC1155Metadata(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<ERC1155TokenMetadata | null> {
+  const result = await fetchERC1155MetadataWithUri(contractAddress, tokenId, rpcUrl);
+  return result.metadata;
+}
+
+/**
+ * Fetch and parse ERC1155 token metadata along with the raw tokenURI
+ */
+export async function fetchERC1155MetadataWithUri(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<ERC1155MetadataResult> {
+  // Step 1: Get the token URI from contract
+  let uri = await fetchTokenUri(contractAddress, tokenId, rpcUrl);
+
+  if (!uri) {
+    return { metadata: null, tokenUri: null };
+  }
+
+  // Step 2: Substitute {id} placeholder if present
+  uri = substituteTokenId(uri, tokenId);
+
+  // Step 3: Handle different URI schemes
+  // Data URI - parse directly
+  if (uri.startsWith("data:")) {
+    return { metadata: parseDataUri(uri), tokenUri: uri };
+  }
+
+  // IPFS or HTTP URI - fetch the metadata
+  const httpUri = ipfsToHttp(uri);
+
+  try {
+    const response = await fetch(httpUri);
+    if (!response.ok) {
+      console.error("Failed to fetch metadata:", response.status);
+      return { metadata: null, tokenUri: uri };
+    }
+
+    const metadata = await response.json();
+    return { metadata: metadata as ERC1155TokenMetadata, tokenUri: uri };
+  } catch (error) {
+    console.error("Failed to fetch/parse metadata:", error);
+    return { metadata: null, tokenUri: uri };
+  }
+}
+
+/**
+ * Get display-ready image URL from metadata
+ */
+export function getImageUrl(metadata: ERC1155TokenMetadata): string | null {
+  const image = metadata.image || metadata.animation_url;
+  if (!image) return null;
+  return ipfsToHttp(image);
+}
+
+export interface CollectionInfo {
+  name?: string;
+  symbol?: string;
+}
+
+/**
+ * Fetch collection info (name, symbol) from ERC1155 contract
+ * Note: ERC1155 doesn't have a standard totalSupply, it's per-token ID
+ */
+export async function fetchCollectionInfo(
+  contractAddress: string,
+  rpcUrl: string,
+): Promise<CollectionInfo> {
+  const info: CollectionInfo = {};
+
+  const calls = [
+    { selector: "0x06fdde03", key: "name" }, // name()
+    { selector: "0x95d89b41", key: "symbol" }, // symbol()
+  ];
+
+  for (const call of calls) {
+    try {
+      const response = await fetch(rpcUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          jsonrpc: "2.0",
+          method: "eth_call",
+          params: [{ to: contractAddress, data: call.selector }, "latest"],
+          id: 1,
+        }),
+      });
+      const data = await response.json();
+      if (!data.error && data.result && data.result !== "0x") {
+        const decoded = decodeAbiString(data.result);
+        if (decoded) {
+          if (call.key === "name") info.name = decoded;
+          if (call.key === "symbol") info.symbol = decoded;
+        }
+      }
+    } catch {
+      // Continue on error
+    }
+  }
+
+  return info;
+}
diff --git a/src/utils/erc721Metadata.ts b/src/utils/erc721Metadata.ts
new file mode 100644
index 0000000..337a62f
--- /dev/null
+++ b/src/utils/erc721Metadata.ts
@@ -0,0 +1,318 @@
+/**
+ * ERC721 Token Metadata Utilities
+ * Handles fetching and parsing ERC721 NFT token metadata from various URI formats
+ */
+
+import { decodeAbiString, hexToString } from "./hexUtils";
+
+export interface ERC721TokenMetadata {
+  name?: string;
+  description?: string;
+  image?: string;
+  animation_url?: string;
+  external_url?: string;
+  attributes?: Array<{
+    trait_type?: string;
+    value?: string | number;
+    display_type?: string;
+  }>;
+  properties?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+/**
+ * Convert IPFS URI to HTTP gateway URL
+ */
+export function ipfsToHttp(uri: string): string {
+  if (uri.startsWith("ipfs://")) {
+    return uri.replace("ipfs://", "https://ipfs.io/ipfs/");
+  }
+  if (uri.startsWith("ipfs/")) {
+    return `https://ipfs.io/${uri}`;
+  }
+  return uri;
+}
+
+/**
+ * Parse data URI (base64 encoded JSON)
+ */
+function parseDataUri(uri: string): ERC721TokenMetadata | null {
+  try {
+    // Handle data:application/json;base64,...
+    if (uri.startsWith("data:application/json;base64,")) {
+      const base64Data = uri.slice("data:application/json;base64,".length);
+      const jsonString = atob(base64Data);
+      return JSON.parse(jsonString);
+    }
+    // Handle data:application/json,...
+    if (uri.startsWith("data:application/json,")) {
+      const jsonString = decodeURIComponent(uri.slice("data:application/json,".length));
+      return JSON.parse(jsonString);
+    }
+    return null;
+  } catch (error) {
+    console.error("Failed to parse data URI:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch ERC721 tokenURI from contract
+ */
+export async function fetchTokenUri(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<string | null> {
+  try {
+    // Encode tokenURI(uint256) call
+    // tokenURI selector: 0xc87b56dd
+    const tokenIdBigInt = BigInt(tokenId);
+    const tokenIdHex = tokenIdBigInt.toString(16).padStart(64, "0");
+    const data = `0xc87b56dd${tokenIdHex}`;
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.result || result.result === "0x") {
+      return null;
+    }
+
+    // Decode string from ABI-encoded response
+    const hex = result.result.slice(2);
+    if (hex.length < 128) return null;
+
+    // Get string length (second 32 bytes)
+    const lengthHex = hex.slice(64, 128);
+    const length = parseInt(lengthHex, 16);
+
+    // Get string data
+    const strHex = hex.slice(128, 128 + length * 2);
+    const uri = hexToString(strHex);
+
+    return uri;
+  } catch (error) {
+    console.error("Failed to fetch token URI:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch owner of a specific token ID
+ */
+export async function fetchTokenOwner(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<string | null> {
+  try {
+    // Encode ownerOf(uint256) call
+    // ownerOf selector: 0x6352211e
+    const tokenIdBigInt = BigInt(tokenId);
+    const tokenIdHex = tokenIdBigInt.toString(16).padStart(64, "0");
+    const data = `0x6352211e${tokenIdHex}`;
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.result || result.result === "0x") {
+      return null;
+    }
+
+    // Decode address from response (last 40 hex chars)
+    const hex = result.result.slice(2);
+    if (hex.length < 40) return null;
+
+    const address = `0x${hex.slice(-40)}`;
+    return address;
+  } catch (error) {
+    console.error("Failed to fetch token owner:", error);
+    return null;
+  }
+}
+
+/**
+ * Fetch approved address for a specific token ID
+ */
+export async function fetchTokenApproval(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<string | null> {
+  try {
+    // Encode getApproved(uint256) call
+    // getApproved selector: 0x081812fc
+    const tokenIdBigInt = BigInt(tokenId);
+    const tokenIdHex = tokenIdBigInt.toString(16).padStart(64, "0");
+    const data = `0x081812fc${tokenIdHex}`;
+
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_call",
+        params: [{ to: contractAddress, data }, "latest"],
+        id: 1,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.result || result.result === "0x") {
+      return null;
+    }
+
+    // Decode address from response
+    const hex = result.result.slice(2);
+    if (hex.length < 40) return null;
+
+    const address = `0x${hex.slice(-40)}`;
+    // Return null for zero address (no approval)
+    if (address === "0x0000000000000000000000000000000000000000") {
+      return null;
+    }
+    return address;
+  } catch (error) {
+    console.error("Failed to fetch token approval:", error);
+    return null;
+  }
+}
+
+export interface ERC721MetadataResult {
+  metadata: ERC721TokenMetadata | null;
+  tokenUri: string | null;
+}
+
+/**
+ * Fetch and parse ERC721 token metadata
+ */
+export async function fetchERC721Metadata(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<ERC721TokenMetadata | null> {
+  const result = await fetchERC721MetadataWithUri(contractAddress, tokenId, rpcUrl);
+  return result.metadata;
+}
+
+/**
+ * Fetch and parse ERC721 token metadata along with the raw tokenURI
+ */
+export async function fetchERC721MetadataWithUri(
+  contractAddress: string,
+  tokenId: string,
+  rpcUrl: string,
+): Promise<ERC721MetadataResult> {
+  // Step 1: Get the token URI from contract
+  const uri = await fetchTokenUri(contractAddress, tokenId, rpcUrl);
+
+  if (!uri) {
+    return { metadata: null, tokenUri: null };
+  }
+
+  // Step 2: Handle different URI schemes
+  // Data URI - parse directly
+  if (uri.startsWith("data:")) {
+    return { metadata: parseDataUri(uri), tokenUri: uri };
+  }
+
+  // IPFS or HTTP URI - fetch the metadata
+  const httpUri = ipfsToHttp(uri);
+
+  try {
+    const response = await fetch(httpUri);
+    if (!response.ok) {
+      console.error("Failed to fetch metadata:", response.status);
+      return { metadata: null, tokenUri: uri };
+    }
+
+    const metadata = await response.json();
+    return { metadata: metadata as ERC721TokenMetadata, tokenUri: uri };
+  } catch (error) {
+    console.error("Failed to fetch/parse metadata:", error);
+    return { metadata: null, tokenUri: uri };
+  }
+}
+
+/**
+ * Get display-ready image URL from metadata
+ */
+export function getImageUrl(metadata: ERC721TokenMetadata): string | null {
+  const image = metadata.image || metadata.animation_url;
+  if (!image) return null;
+  return ipfsToHttp(image);
+}
+
+export interface CollectionInfo {
+  name?: string;
+  symbol?: string;
+  totalSupply?: string;
+}
+
+/**
+ * Fetch collection info (name, symbol, totalSupply) from ERC721 contract
+ */
+export async function fetchCollectionInfo(
+  contractAddress: string,
+  rpcUrl: string,
+): Promise<CollectionInfo> {
+  const info: CollectionInfo = {};
+
+  const calls = [
+    { selector: "0x06fdde03", key: "name" }, // name()
+    { selector: "0x95d89b41", key: "symbol" }, // symbol()
+    { selector: "0x18160ddd", key: "totalSupply" }, // totalSupply()
+  ];
+
+  for (const call of calls) {
+    try {
+      const response = await fetch(rpcUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          jsonrpc: "2.0",
+          method: "eth_call",
+          params: [{ to: contractAddress, data: call.selector }, "latest"],
+          id: 1,
+        }),
+      });
+      const data = await response.json();
+      if (!data.error && data.result && data.result !== "0x") {
+        if (call.key === "totalSupply") {
+          info.totalSupply = BigInt(data.result).toString();
+        } else {
+          const decoded = decodeAbiString(data.result);
+          if (decoded) {
+            if (call.key === "name") info.name = decoded;
+            if (call.key === "symbol") info.symbol = decoded;
+          }
+        }
+      }
+    } catch {
+      // Continue on error
+    }
+  }
+
+  return info;
+}
diff --git a/src/utils/eventDecoder.ts b/src/utils/eventDecoder.ts
index 72f2507..988e72f 100644
--- a/src/utils/eventDecoder.ts
+++ b/src/utils/eventDecoder.ts
@@ -2,36 +2,36 @@ import eventsDatabase from "../config/events.json";
 
 // Type for the events database
 interface EventInfo {
-	event: string;
-	type: string;
-	description: string;
+  event: string;
+  type: string;
+  description: string;
 }
 
 interface EventsDatabase {
-	[signature: string]: EventInfo;
+  [signature: string]: EventInfo;
 }
 
 // Parsed parameter from event signature
 interface EventParam {
-	type: string;
-	indexed: boolean;
+  type: string;
+  indexed: boolean;
 }
 
 // Decoded event result
 export interface DecodedEvent {
-	name: string;
-	signature: string;
-	fullSignature: string;
-	type: string;
-	description: string;
-	params: DecodedParam[];
+  name: string;
+  signature: string;
+  fullSignature: string;
+  type: string;
+  description: string;
+  params: DecodedParam[];
 }
 
 export interface DecodedParam {
-	name: string;
-	type: string;
-	value: string;
-	indexed: boolean;
+  name: string;
+  type: string;
+  value: string;
+  indexed: boolean;
 }
 
 const events = eventsDatabase as EventsDatabase;
@@ -41,141 +41,139 @@ const events = eventsDatabase as EventsDatabase;
  * e.g., "Transfer(address,address,uint256)" -> [{type: "address"}, {type: "address"}, {type: "uint256"}]
  */
 function parseEventSignature(signature: string): {
-	name: string;
-	params: EventParam[];
+  name: string;
+  params: EventParam[];
 } {
-	const match = signature.match(/^(\w+)\((.*)\)$/);
-	if (!match) {
-		return { name: signature, params: [] };
-	}
-
-	const name = match[1] || signature;
-	const paramsStr = match[2] || "";
-
-	if (!paramsStr) {
-		return { name, params: [] };
-	}
-
-	// Handle nested types like (address,uint256)[]
-	const params: EventParam[] = [];
-	let depth = 0;
-	let current = "";
-
-	for (const char of paramsStr) {
-		if (char === "(") {
-			depth++;
-			current += char;
-		} else if (char === ")") {
-			depth--;
-			current += char;
-		} else if (char === "," && depth === 0) {
-			if (current) {
-				params.push({ type: current.trim(), indexed: false });
-			}
-			current = "";
-		} else {
-			current += char;
-		}
-	}
-
-	if (current) {
-		params.push({ type: current.trim(), indexed: false });
-	}
-
-	return { name, params };
+  const match = signature.match(/^(\w+)\((.*)\)$/);
+  if (!match) {
+    return { name: signature, params: [] };
+  }
+
+  const name = match[1] || signature;
+  const paramsStr = match[2] || "";
+
+  if (!paramsStr) {
+    return { name, params: [] };
+  }
+
+  // Handle nested types like (address,uint256)[]
+  const params: EventParam[] = [];
+  let depth = 0;
+  let current = "";
+
+  for (const char of paramsStr) {
+    if (char === "(") {
+      depth++;
+      current += char;
+    } else if (char === ")") {
+      depth--;
+      current += char;
+    } else if (char === "," && depth === 0) {
+      if (current) {
+        params.push({ type: current.trim(), indexed: false });
+      }
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+
+  if (current) {
+    params.push({ type: current.trim(), indexed: false });
+  }
+
+  return { name, params };
 }
 
 /**
  * Decode a uint256 value from hex
  */
 function decodeUint256(hex: string): string {
-	if (!hex || hex === "0x") return "0";
-	const cleaned = hex.startsWith("0x") ? hex.slice(2) : hex;
-	// Use BigInt for large numbers
-	try {
-		const value = BigInt("0x" + cleaned);
-		return value.toString();
-	} catch {
-		return hex;
-	}
+  if (!hex || hex === "0x") return "0";
+  const cleaned = hex.startsWith("0x") ? hex.slice(2) : hex;
+  // Use BigInt for large numbers
+  try {
+    const value = BigInt(`0x${cleaned}`);
+    return value.toString();
+  } catch {
+    return hex;
+  }
 }
 
 /**
  * Decode an address from a 32-byte topic (last 20 bytes)
  */
 function decodeAddress(hex: string): string {
-	if (!hex) return "";
-	const cleaned = hex.startsWith("0x") ? hex.slice(2) : hex;
-	// Address is last 40 characters (20 bytes)
-	const address = cleaned.slice(-40);
-	return "0x" + address;
+  if (!hex) return "";
+  const cleaned = hex.startsWith("0x") ? hex.slice(2) : hex;
+  // Address is last 40 characters (20 bytes)
+  const address = cleaned.slice(-40);
+  return `0x${address}`;
 }
 
 /**
  * Decode int256 value from hex (handles negative numbers)
  */
 function decodeInt256(hex: string): string {
-	if (!hex || hex === "0x") return "0";
-	const cleaned = hex.startsWith("0x") ? hex.slice(2) : hex;
-	try {
-		const value = BigInt("0x" + cleaned);
-		// Check if negative (highest bit set)
-		const maxPositive = BigInt(
-			"0x7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
-		);
-		if (value > maxPositive) {
-			// Two's complement for negative numbers
-			const maxUint = BigInt(
-				"0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
-			);
-			return (-(maxUint - value + BigInt(1))).toString();
-		}
-		return value.toString();
-	} catch {
-		return hex;
-	}
+  if (!hex || hex === "0x") return "0";
+  const cleaned = hex.startsWith("0x") ? hex.slice(2) : hex;
+  try {
+    const value = BigInt(`0x${cleaned}`);
+    // Check if negative (highest bit set)
+    const maxPositive = BigInt(
+      "0x7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
+    );
+    if (value > maxPositive) {
+      // Two's complement for negative numbers
+      const maxUint = BigInt("0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff");
+      return (-(maxUint - value + BigInt(1))).toString();
+    }
+    return value.toString();
+  } catch {
+    return hex;
+  }
 }
 
 /**
  * Decode a bytes32 value
  */
 function decodeBytes32(hex: string): string {
-	return hex; // Return as-is for bytes32
+  return hex; // Return as-is for bytes32
 }
 
 /**
  * Decode a bool value
  */
 function decodeBool(hex: string): string {
-	const value = decodeUint256(hex);
-	return value === "1" ? "true" : "false";
+  const value = decodeUint256(hex);
+  return value === "1" ? "true" : "false";
 }
 
 /**
  * Decode a single value based on its type
  */
 function decodeValue(hex: string, type: string): string {
-	if (!hex) return "";
-
-	const baseType = type.replace(/\[\]$/, ""); // Remove array suffix
-
-	if (baseType === "address") {
-		return decodeAddress(hex);
-	}
-	if (baseType.startsWith("uint")) {
-		return decodeUint256(hex);
-	}
-	if (baseType.startsWith("int")) {
-		return decodeInt256(hex);
-	}
-	if (baseType === "bool") {
-		return decodeBool(hex);
-	}
-	if (baseType === "bytes32") {
-		return decodeBytes32(hex);
-	}
-	// For other types, return hex as-is
-	return hex;
+  if (!hex) return "";
+
+  const baseType = type.replace(/\[\]$/, ""); // Remove array suffix
+
+  if (baseType === "address") {
+    return decodeAddress(hex);
+  }
+  if (baseType.startsWith("uint")) {
+    return decodeUint256(hex);
+  }
+  if (baseType.startsWith("int")) {
+    return decodeInt256(hex);
+  }
+  if (baseType === "bool") {
+    return decodeBool(hex);
+  }
+  if (baseType === "bytes32") {
+    return decodeBytes32(hex);
+  }
+  // For other types, return hex as-is
+  return hex;
 }
 
 /**
@@ -183,189 +181,179 @@ function decodeValue(hex: string, type: string): string {
  * Data is packed in 32-byte chunks
  */
 function decodeEventData(data: string, params: EventParam[]): string[] {
-	if (!data || data === "0x") return [];
+  if (!data || data === "0x") return [];
 
-	const cleaned = data.startsWith("0x") ? data.slice(2) : data;
-	const values: string[] = [];
+  const cleaned = data.startsWith("0x") ? data.slice(2) : data;
+  const values: string[] = [];
 
-	// Each parameter is 32 bytes (64 hex chars)
-	const chunkSize = 64;
-	let offset = 0;
+  // Each parameter is 32 bytes (64 hex chars)
+  const chunkSize = 64;
+  let offset = 0;
 
-	for (const param of params) {
-		if (offset >= cleaned.length) break;
+  for (const param of params) {
+    if (offset >= cleaned.length) break;
 
-		const chunk = "0x" + cleaned.slice(offset, offset + chunkSize);
-		values.push(decodeValue(chunk, param.type));
-		offset += chunkSize;
-	}
+    const chunk = `0x${cleaned.slice(offset, offset + chunkSize)}`;
+    values.push(decodeValue(chunk, param.type));
+    offset += chunkSize;
+  }
 
-	return values;
+  return values;
 }
 
 /**
  * Look up event by topic0 signature
  */
 export function lookupEvent(topic0: string): EventInfo | null {
-	const normalizedTopic = topic0.toLowerCase();
+  const normalizedTopic = topic0.toLowerCase();
 
-	for (const [sig, info] of Object.entries(events)) {
-		if (sig.toLowerCase() === normalizedTopic) {
-			return info;
-		}
-	}
+  for (const [sig, info] of Object.entries(events)) {
+    if (sig.toLowerCase() === normalizedTopic) {
+      return info;
+    }
+  }
 
-	return null;
+  return null;
 }
 
 /**
  * Decode an event log
  */
-export function decodeEventLog(
-	topics: string[],
-	data: string,
-): DecodedEvent | null {
-	if (!topics || topics.length === 0) return null;
-
-	const topic0 = topics[0];
-	if (!topic0) return null;
-
-	const eventInfo = lookupEvent(topic0);
-
-	if (!eventInfo) return null;
-
-	const { name, params } = parseEventSignature(eventInfo.event);
-
-	// For standard events, indexed params are in topics[1..], non-indexed in data
-	// Determine which params are indexed based on topics count
-	const indexedCount = topics.length - 1; // Exclude topic0
-
-	const decodedParams: DecodedParam[] = [];
-	let topicIndex = 1;
-
-	// First pass: collect indexed params from topics
-	for (let i = 0; i < params.length && topicIndex < topics.length; i++) {
-		const param = params[i];
-		if (!param) continue;
-
-		const topicValue = topics[topicIndex];
-		// Common indexed types: address, uint256, bytes32
-		// For Transfer/Approval: first two addresses are indexed
-		if (topicIndex <= indexedCount && topicValue) {
-			decodedParams.push({
-				name: getParamName(name, i),
-				type: param.type,
-				value: decodeValue(topicValue, param.type),
-				indexed: true,
-			});
-			topicIndex++;
-		}
-	}
-
-	// Remaining params are from data
-	const remainingParams = params.slice(decodedParams.length);
-	const dataValues = decodeEventData(data, remainingParams);
-
-	for (let i = 0; i < remainingParams.length; i++) {
-		const param = remainingParams[i];
-		if (!param) continue;
-
-		decodedParams.push({
-			name: getParamName(name, decodedParams.length),
-			type: param.type,
-			value: dataValues[i] || "",
-			indexed: false,
-		});
-	}
-
-	return {
-		name,
-		signature: topic0,
-		fullSignature: eventInfo.event,
-		type: eventInfo.type,
-		description: eventInfo.description,
-		params: decodedParams,
-	};
+export function decodeEventLog(topics: string[], data: string): DecodedEvent | null {
+  if (!topics || topics.length === 0) return null;
+
+  const topic0 = topics[0];
+  if (!topic0) return null;
+
+  const eventInfo = lookupEvent(topic0);
+
+  if (!eventInfo) return null;
+
+  const { name, params } = parseEventSignature(eventInfo.event);
+
+  // For standard events, indexed params are in topics[1..], non-indexed in data
+  // Determine which params are indexed based on topics count
+  const indexedCount = topics.length - 1; // Exclude topic0
+
+  const decodedParams: DecodedParam[] = [];
+  let topicIndex = 1;
+
+  // First pass: collect indexed params from topics
+  for (let i = 0; i < params.length && topicIndex < topics.length; i++) {
+    const param = params[i];
+    if (!param) continue;
+
+    const topicValue = topics[topicIndex];
+    // Common indexed types: address, uint256, bytes32
+    // For Transfer/Approval: first two addresses are indexed
+    if (topicIndex <= indexedCount && topicValue) {
+      decodedParams.push({
+        name: getParamName(name, i),
+        type: param.type,
+        value: decodeValue(topicValue, param.type),
+        indexed: true,
+      });
+      topicIndex++;
+    }
+  }
+
+  // Remaining params are from data
+  const remainingParams = params.slice(decodedParams.length);
+  const dataValues = decodeEventData(data, remainingParams);
+
+  for (let i = 0; i < remainingParams.length; i++) {
+    const param = remainingParams[i];
+    if (!param) continue;
+
+    decodedParams.push({
+      name: getParamName(name, decodedParams.length),
+      type: param.type,
+      value: dataValues[i] || "",
+      indexed: false,
+    });
+  }
+
+  return {
+    name,
+    signature: topic0,
+    fullSignature: eventInfo.event,
+    type: eventInfo.type,
+    description: eventInfo.description,
+    params: decodedParams,
+  };
 }
 
 /**
  * Get a human-readable parameter name based on event type
  */
 function getParamName(eventName: string, index: number): string {
-	// Common parameter names for known events
-	const paramNames: Record<string, string[]> = {
-		Transfer: ["from", "to", "value"],
-		Approval: ["owner", "spender", "value"],
-		ApprovalForAll: ["owner", "operator", "approved"],
-		Swap: [
-			"sender",
-			"amount0In",
-			"amount1In",
-			"amount0Out",
-			"amount1Out",
-			"to",
-		],
-		Mint: ["sender", "amount0", "amount1"],
-		Burn: ["sender", "amount0", "amount1", "to"],
-		Sync: ["reserve0", "reserve1"],
-		Deposit: ["sender", "owner", "assets", "shares"],
-		Withdraw: ["sender", "receiver", "owner", "assets", "shares"],
-		Borrow: ["reserve", "user", "amount", "borrowRateMode"],
-		Repay: ["reserve", "user", "repayer", "amount"],
-		OwnershipTransferred: ["previousOwner", "newOwner"],
-		RoleGranted: ["role", "account", "sender"],
-		RoleRevoked: ["role", "account", "sender"],
-	};
-
-	const names = paramNames[eventName];
-	if (names && index < names.length) {
-		return names[index] || `param${index}`;
-	}
-
-	return `param${index}`;
+  // Common parameter names for known events
+  const paramNames: Record<string, string[]> = {
+    Transfer: ["from", "to", "value"],
+    Approval: ["owner", "spender", "value"],
+    ApprovalForAll: ["owner", "operator", "approved"],
+    Swap: ["sender", "amount0In", "amount1In", "amount0Out", "amount1Out", "to"],
+    Mint: ["sender", "amount0", "amount1"],
+    Burn: ["sender", "amount0", "amount1", "to"],
+    Sync: ["reserve0", "reserve1"],
+    Deposit: ["sender", "owner", "assets", "shares"],
+    Withdraw: ["sender", "receiver", "owner", "assets", "shares"],
+    Borrow: ["reserve", "user", "amount", "borrowRateMode"],
+    Repay: ["reserve", "user", "repayer", "amount"],
+    OwnershipTransferred: ["previousOwner", "newOwner"],
+    RoleGranted: ["role", "account", "sender"],
+    RoleRevoked: ["role", "account", "sender"],
+  };
+
+  const names = paramNames[eventName];
+  if (names && index < names.length) {
+    return names[index] || `param${index}`;
+  }
+
+  return `param${index}`;
 }
 
 /**
  * Format a decoded value for display
  */
 export function formatDecodedValue(value: string, type: string): string {
-	if (!value) return "";
-
-	// Format large numbers with commas
-	if (type.startsWith("uint") || type.startsWith("int")) {
-		try {
-			const num = BigInt(value);
-			// If it looks like a token amount (> 1e15), format as potential token value
-			if (num > BigInt(1e15)) {
-				// Show both raw and potential ETH value
-				const ethValue = Number(num) / 1e18;
-				if (ethValue >= 0.0001 && ethValue < 1e15) {
-					return `${num.toLocaleString()} (≈${ethValue.toFixed(6)} if 18 decimals)`;
-				}
-			}
-			return num.toLocaleString();
-		} catch {
-			return value;
-		}
-	}
-
-	return value;
+  if (!value) return "";
+
+  // Format large numbers with commas
+  if (type.startsWith("uint") || type.startsWith("int")) {
+    try {
+      const num = BigInt(value);
+      // If it looks like a token amount (> 1e15), format as potential token value
+      if (num > BigInt(1e15)) {
+        // Show both raw and potential ETH value
+        const ethValue = Number(num) / 1e18;
+        if (ethValue >= 0.0001 && ethValue < 1e15) {
+          return `${num.toString()} (≈${ethValue.toFixed(6)} if 18 decimals)`;
+        }
+      }
+      return num.toLocaleString();
+    } catch {
+      return value;
+    }
+  }
+
+  return value;
 }
 
 /**
  * Get a badge color based on event type
  */
 export function getEventTypeColor(type: string): string {
-	const colors: Record<string, string> = {
-		erc: "#10b981", // green - token events
-		dex_v2: "#8b5cf6", // purple - DEX v2
-		dex_v3: "#a855f7", // lighter purple - DEX v3
-		vault: "#f59e0b", // amber - vaults
-		lending: "#3b82f6", // blue - lending
-		l2_bridge: "#ec4899", // pink - L2 bridges
-		nft_market: "#14b8a6", // teal - NFT
-		admin: "#6b7280", // gray - admin
-	};
-
-	return colors[type] || "#6b7280";
+  const colors: Record<string, string> = {
+    erc: "#10b981", // green - token events
+    dex_v2: "#8b5cf6", // purple - DEX v2
+    dex_v3: "#a855f7", // lighter purple - DEX v3
+    vault: "#f59e0b", // amber - vaults
+    lending: "#3b82f6", // blue - lending
+    l2_bridge: "#ec4899", // pink - L2 bridges
+    nft_market: "#14b8a6", // teal - NFT
+    admin: "#6b7280", // gray - admin
+  };
+
+  return colors[type] || "#6b7280";
 }
diff --git a/src/utils/hexUtils.ts b/src/utils/hexUtils.ts
new file mode 100644
index 0000000..459c7f9
--- /dev/null
+++ b/src/utils/hexUtils.ts
@@ -0,0 +1,44 @@
+/**
+ * Shared hex decoding utilities for browser-compatible string conversion.
+ * Used for decoding ABI-encoded strings from RPC responses.
+ */
+
+/**
+ * Convert a hex string to a UTF-8 string.
+ * Stops at first null character (0x00).
+ * Browser-compatible alternative to Node.js Buffer.from(hex, "hex").toString("utf8")
+ */
+export function hexToString(hex: string): string {
+  let str = "";
+  for (let i = 0; i < hex.length; i += 2) {
+    const charCode = parseInt(hex.slice(i, i + 2), 16);
+    if (charCode === 0) break;
+    str += String.fromCharCode(charCode);
+  }
+  return str;
+}
+
+/**
+ * Decode an ABI-encoded string from a hex response.
+ * ABI-encoded strings have the format:
+ * - bytes 0-32: offset to string data (usually 0x20 = 32)
+ * - bytes 32-64: string length
+ * - bytes 64+: string data (padded to 32 bytes)
+ *
+ * @param hex - The hex string including "0x" prefix
+ * @returns The decoded string, or empty string on error
+ */
+export function decodeAbiString(hex: string): string {
+  try {
+    const data = hex.slice(2); // Remove "0x" prefix
+    if (data.length >= 128) {
+      const lengthHex = data.slice(64, 128);
+      const length = parseInt(lengthHex, 16);
+      const strHex = data.slice(128, 128 + length * 2);
+      return hexToString(strHex);
+    }
+    return "";
+  } catch {
+    return "";
+  }
+}
diff --git a/src/utils/inputDecoder.ts b/src/utils/inputDecoder.ts
new file mode 100644
index 0000000..a89d800
--- /dev/null
+++ b/src/utils/inputDecoder.ts
@@ -0,0 +1,231 @@
+import { decodeFunctionData, toFunctionSelector } from "viem";
+import type { DecodedParam } from "./eventDecoder";
+
+// Decoded function call result
+export interface DecodedInput {
+  functionName: string;
+  signature: string; // e.g., "transfer(address,uint256)"
+  params: DecodedParam[];
+}
+
+// ABI function item type
+interface AbiFunction {
+  type: "function";
+  name: string;
+  inputs: Array<{
+    name: string;
+    type: string;
+    indexed?: boolean;
+    components?: Array<{ name: string; type: string }>;
+  }>;
+  outputs?: Array<{ name: string; type: string }>;
+  stateMutability?: string;
+}
+
+/**
+ * Build a function signature from an ABI function item
+ */
+function buildSignature(abiItem: AbiFunction): string {
+  const inputs = abiItem.inputs || [];
+  const paramTypes = inputs.map((input) => input.type);
+  return `${abiItem.name}(${paramTypes.join(",")})`;
+}
+
+/**
+ * Format a decoded value for display
+ */
+function formatValue(value: unknown): string {
+  if (value === undefined || value === null) {
+    return "";
+  }
+
+  if (typeof value === "bigint") {
+    return value.toString();
+  }
+
+  if (Array.isArray(value)) {
+    return `[${value.map((v) => formatValue(v)).join(", ")}]`;
+  }
+
+  if (typeof value === "object") {
+    // Handle struct-like objects
+    const entries = Object.entries(value as Record<string, unknown>);
+    return `{${entries.map(([k, v]) => `${k}: ${formatValue(v)}`).join(", ")}}`;
+  }
+
+  return String(value);
+}
+
+/**
+ * Decode a function call from calldata using an ABI
+ * @param data - The calldata (input) hex string
+ * @param abi - The contract ABI array
+ * @returns DecodedInput or null if decoding fails
+ */
+// biome-ignore lint/suspicious/noExplicitAny: ABI types are dynamic
+export function decodeFunctionCall(data: string, abi: any[]): DecodedInput | null {
+  // Validate input
+  if (!data || data === "0x" || data.length < 10) {
+    return null;
+  }
+
+  if (!abi || !Array.isArray(abi) || abi.length === 0) {
+    return null;
+  }
+
+  // Extract function selector (first 4 bytes)
+  const selector = data.slice(0, 10).toLowerCase();
+
+  // Find matching function in ABI by selector
+  // biome-ignore lint/suspicious/noExplicitAny: ABI types are dynamic
+  const functionItems = abi.filter((item: any) => item.type === "function") as AbiFunction[];
+
+  let matchedFunction: AbiFunction | null = null;
+
+  for (const fn of functionItems) {
+    try {
+      const signature = buildSignature(fn);
+      const computedSelector = toFunctionSelector(signature).toLowerCase();
+      if (computedSelector === selector) {
+        matchedFunction = fn;
+        break;
+      }
+    } catch {}
+  }
+
+  if (!matchedFunction) {
+    return null;
+  }
+
+  // Build the function signature
+  const signature = buildSignature(matchedFunction);
+
+  // Try to decode using viem's decodeFunctionData
+  try {
+    const decoded = decodeFunctionData({
+      abi: [matchedFunction],
+      data: data as `0x${string}`,
+    });
+
+    // Map decoded args to DecodedParam array
+    const params: DecodedParam[] = [];
+    const inputs = matchedFunction.inputs || [];
+    const args = decoded.args || [];
+
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i];
+      if (!input) continue;
+
+      const value = args[i];
+      params.push({
+        name: input.name || `param${i}`,
+        type: input.type,
+        value: formatValue(value),
+        indexed: false, // Function params are not indexed (that's for events)
+      });
+    }
+
+    return {
+      functionName: matchedFunction.name,
+      signature,
+      params,
+    };
+  } catch {
+    // If decoding fails, return basic info without params
+    return {
+      functionName: matchedFunction.name,
+      signature,
+      params: [],
+    };
+  }
+}
+
+/**
+ * Decode an event log using a contract ABI
+ * @param topics - Event topics array
+ * @param data - Event data hex string
+ * @param abi - The contract ABI array
+ * @returns DecodedInput-like object for the event or null
+ */
+export function decodeEventWithAbi(
+  topics: string[],
+  data: string,
+  // biome-ignore lint/suspicious/noExplicitAny: ABI types are dynamic
+  abi: any[],
+): DecodedInput | null {
+  if (!topics || topics.length === 0 || !abi || !Array.isArray(abi)) {
+    return null;
+  }
+
+  const topic0 = topics[0];
+  if (!topic0) return null;
+
+  // Find matching event in ABI
+  // biome-ignore lint/suspicious/noExplicitAny: ABI types are dynamic
+  const eventItems = abi.filter((item: any) => item.type === "event");
+
+  // biome-ignore lint/suspicious/noExplicitAny: ABI types are dynamic
+  let matchedEvent: any = null;
+
+  for (const evt of eventItems) {
+    try {
+      const inputs = evt.inputs || [];
+      const paramTypes = inputs.map((i: { type: string }) => i.type);
+      const signature = `${evt.name}(${paramTypes.join(",")})`;
+      // Event topic0 is keccak256 of signature - we can use the same approach
+      const { keccak256, toBytes } = require("viem");
+      const computedTopic = keccak256(toBytes(signature)).toLowerCase();
+      if (computedTopic === topic0.toLowerCase()) {
+        matchedEvent = evt;
+        break;
+      }
+    } catch {}
+  }
+
+  if (!matchedEvent) {
+    return null;
+  }
+
+  // Build signature
+  const inputs = matchedEvent.inputs || [];
+  const signature = `${matchedEvent.name}(${inputs.map((i: { type: string }) => i.type).join(",")})`;
+
+  // Decode event parameters
+  try {
+    const { decodeEventLog } = require("viem");
+    const decoded = decodeEventLog({
+      abi: [matchedEvent],
+      data: data as `0x${string}`,
+      topics: topics as [`0x${string}`, ...`0x${string}`[]],
+    });
+
+    const params: DecodedParam[] = [];
+    const args = decoded.args || {};
+
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i];
+      if (!input) continue;
+
+      // decodeEventLog returns args as an object keyed by param name
+      const value = args[input.name] ?? args[i];
+      params.push({
+        name: input.name || `param${i}`,
+        type: input.type,
+        value: formatValue(value),
+        indexed: input.indexed || false,
+      });
+    }
+
+    return {
+      functionName: matchedEvent.name,
+      signature,
+      params,
+    };
+  } catch {
+    return {
+      functionName: matchedEvent.name,
+      signature,
+      params: [],
+    };
+  }
+}
diff --git a/src/utils/networkConfig.ts b/src/utils/networkConfig.ts
index ea47f0c..ac1f213 100644
--- a/src/utils/networkConfig.ts
+++ b/src/utils/networkConfig.ts
@@ -5,8 +5,9 @@ const supportedChains = getSupportedChains();
 // Ensure we have at least one chain for the config
 
 export const networkConfig = getDefaultConfig({
-	appName: "Open Scan",
-	projectId: "2b05839e1b9385420e43ffd8d982cb04",
-	chains: supportedChains as [any, ...any[]],
-	ssr: false,
+  appName: "Open Scan",
+  projectId: "2b05839e1b9385420e43ffd8d982cb04",
+  // biome-ignore lint/suspicious/noExplicitAny: <TODO>
+  chains: supportedChains as [any, ...any[]],
+  ssr: false,
 });
diff --git a/src/utils/rpcStorage.ts b/src/utils/rpcStorage.ts
index 333d2d6..2026a04 100644
--- a/src/utils/rpcStorage.ts
+++ b/src/utils/rpcStorage.ts
@@ -1,145 +1,98 @@
+import { getAllNetworks } from "../config/networks";
 import type { RpcUrlsContextType } from "../types";
 
 const STORAGE_KEY = "OPENSCAN_RPC_URLS_V1";
+
 /**
- * RPC endpoint configuration for different networks
- * In production, consider using environment variables for API keys
- * Multiple URLs per network are supported for fallback functionality
+ * Get default RPC endpoints from loaded network metadata
+ * Returns RPC URLs for all networks that have been loaded from metadata
  */
-export const RPC_ENDPOINTS: RpcUrlsContextType = {
-	// Mainnet
-	1: [
-		"https://eth.llamarpc.com",
-		"https://ethereum.publicnode.com",
-		"https://1rpc.io/eth",
-	].filter(Boolean) as string[],
-
-	// Sepolia
-	11155111: [
-		"https://sepolia.infura.io",
-		"https://rpc.sepolia.org",
-		"https://rpc2.sepolia.org",
-		"https://ethereum-sepolia.publicnode.com",
-	].filter(Boolean) as string[],
-
-	// Hardhat/Localhost
-	31337: ["http://127.0.0.1:8545"].filter(Boolean) as string[],
-
-	// Arbitrum One
-	42161: [
-		"https://arb1.arbitrum.io/rpc",
-		"https://arbitrum.llamarpc.com",
-		"https://arbitrum-one.publicnode.com",
-	].filter(Boolean) as string[],
+export function getDefaultRpcEndpoints(): RpcUrlsContextType {
+  const networks = getAllNetworks();
+  const endpoints: RpcUrlsContextType = {};
 
-	// Optimism Mainnet
-	10: [
-		"https://mainnet.optimism.io",
-		"https://optimism.llamarpc.com",
-		"https://optimism.publicnode.com",
-	].filter(Boolean) as string[],
+  for (const network of networks) {
+    if (network.rpc?.public && network.rpc.public.length > 0) {
+      endpoints[network.networkId] = network.rpc.public;
+    }
+  }
 
-	// Base Mainnet
-	8453: [
-		"https://mainnet.base.org",
-		"https://base.llamarpc.com",
-		"https://base.publicnode.com",
-	].filter(Boolean) as string[],
-
-	// BSC Mainnet
-	56: [
-		"https://bsc-dataseed.binance.org",
-		"https://bsc.publicnode.com",
-		"https://binance.llamarpc.com",
-	].filter(Boolean) as string[],
-
-	// BSC Testnet
-	97: [
-		"https://data-seed-prebsc-1-s1.binance.org:8545",
-		"https://bsc-testnet.publicnode.com",
-	].filter(Boolean) as string[],
-
-	// Polygon POS
-	137: [
-		"https://polygon-rpc.com",
-		"https://polygon.llamarpc.com",
-		"https://polygon-bor.publicnode.com",
-	].filter(Boolean) as string[],
-};
-type RpcMap = Record<number, string[]>;
+  return endpoints;
+}
 
-function isValidRpcMap(obj: any): obj is RpcMap {
-	if (!obj || typeof obj !== "object") return false;
-	for (const k of Object.keys(obj)) {
-		const val = obj[k];
-		if (!Array.isArray(val) || !val.every((v) => typeof v === "string"))
-			return false;
-	}
-	return true;
+// biome-ignore lint/suspicious/noExplicitAny: <TODO>
+function isValidRpcMap(obj: any): obj is RpcUrlsContextType {
+  if (!obj || typeof obj !== "object") return false;
+  for (const k of Object.keys(obj)) {
+    const val = obj[k];
+    if (!Array.isArray(val) || !val.every((v) => typeof v === "string")) return false;
+  }
+  return true;
 }
 
 /**
  * Load RPC urls from localStorage. Returns null if nothing found or invalid.
  */
-export function loadRpcUrlsFromStorage(): RpcMap | null {
-	try {
-		const raw = localStorage.getItem(STORAGE_KEY);
-		if (!raw) return null;
-		const parsed = JSON.parse(raw) as Record<string, string[]>;
-		if (!isValidRpcMap(parsed)) return null;
-		// keys are strings from JSON -> convert to numbers
-		const result: RpcMap = {};
-		for (const k of Object.keys(parsed)) {
-			const n = Number(k);
-			if (Number.isNaN(n)) continue;
-			const val = parsed[k];
-			if (!val) continue;
-			result[n] = val;
-		}
-		return result;
-	} catch (err) {
-		console.warn("Failed to parse RPC urls from storage", err);
-		return null;
-	}
+export function loadRpcUrlsFromStorage(): RpcUrlsContextType | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as Record<string, string[]>;
+    if (!isValidRpcMap(parsed)) return null;
+    // keys are strings from JSON -> convert to numbers
+    const result: RpcUrlsContextType = {};
+    for (const k of Object.keys(parsed)) {
+      const n = Number(k);
+      if (Number.isNaN(n)) continue;
+      const val = parsed[k];
+      if (!val) continue;
+      result[n] = val;
+    }
+    return result;
+  } catch (err) {
+    console.warn("Failed to parse RPC urls from storage", err);
+    return null;
+  }
 }
 
 /**
- * Save RPC urls to localStorage. Keys should be numeric chain ids.
+ * Save RPC urls to localStorage. Keys should be numeric network ids.
  */
-export function saveRpcUrlsToStorage(map: RpcMap): void {
-	try {
-		// convert keys to strings for JSON
-		const serialized: Record<string, string[]> = {};
-		for (const k of Object.keys(map)) {
-			const n = Number(k);
-			const val = map[n];
-			if (!val) continue;
-			serialized[String(n)] = val;
-		}
-		localStorage.setItem(STORAGE_KEY, JSON.stringify(serialized));
-	} catch (err) {
-		console.warn("Failed to save RPC urls to storage", err);
-	}
+export function saveRpcUrlsToStorage(map: RpcUrlsContextType): void {
+  try {
+    // convert keys to strings for JSON
+    const serialized: Record<string, string[]> = {};
+    for (const k of Object.keys(map)) {
+      const n = Number(k);
+      const val = map[n];
+      if (!val) continue;
+      serialized[String(n)] = val;
+    }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(serialized));
+  } catch (err) {
+    console.warn("Failed to save RPC urls to storage", err);
+  }
 }
 
 /**
  * Return the effective rpc urls by merging defaults with any stored overrides.
- * Stored values override default for a chainId; missing chains fall back to defaults.
+ * Stored values override default for a networkId; missing networks fall back to defaults.
+ * Defaults are fetched from loaded network metadata.
  */
 export function getEffectiveRpcUrls(): RpcUrlsContextType {
-	const defaults: RpcMap = RPC_ENDPOINTS as unknown as RpcMap;
-	const stored = loadRpcUrlsFromStorage();
-	if (!stored) return defaults as RpcUrlsContextType;
-	// merge copy
-	const merged: RpcMap = { ...defaults };
-	for (const k of Object.keys(stored)) {
-		const n = Number(k);
-		if (Number.isNaN(n)) continue;
-		const val = stored[n];
-		if (!val || !Array.isArray(val) || val.length === 0) continue;
-		merged[n] = val;
-	}
-	return merged as RpcUrlsContextType;
+  const defaults = getDefaultRpcEndpoints();
+  const stored = loadRpcUrlsFromStorage();
+  if (!stored) return defaults;
+  // merge copy
+  const merged: RpcUrlsContextType = { ...defaults };
+  for (const k of Object.keys(stored)) {
+    const n = Number(k);
+    if (Number.isNaN(n)) continue;
+    const val = stored[n];
+    if (!val || !Array.isArray(val) || val.length === 0) continue;
+    merged[n] = val;
+  }
+  return merged;
 }
 
 export { STORAGE_KEY };
diff --git a/src/utils/subdomainUtils.ts b/src/utils/subdomainUtils.ts
new file mode 100644
index 0000000..8e97275
--- /dev/null
+++ b/src/utils/subdomainUtils.ts
@@ -0,0 +1,172 @@
+import { getSubdomainConfig, getSubdomainForNetwork } from "../config/subdomains";
+
+/**
+ * Extract subdomain from the current hostname
+ * Handles both localhost subdomains (ethereum.localhost) and production (ethereum.openscan.io)
+ */
+export function getSubdomain(): string | null {
+  const hostname = window.location.hostname;
+
+  // Skip subdomain processing for Netlify preview/deploy URLs
+  // These follow patterns like: pr-95--openscan.netlify.app, deploy-preview-123--site.netlify.app
+  if (hostname.endsWith(".netlify.app")) {
+    return null;
+  }
+
+  // Skip subdomain processing for GitHub Pages
+  if (hostname.endsWith(".github.io")) {
+    return null;
+  }
+
+  // Handle localhost subdomains (e.g., ethereum.localhost)
+  if (hostname.endsWith(".localhost")) {
+    return hostname.replace(".localhost", "");
+  }
+
+  // Handle IP-based domains (e.g., ethereum.127.0.0.1.nip.io)
+  if (hostname.includes(".nip.io") || hostname.includes(".sslip.io")) {
+    const parts = hostname.split(".");
+    if (parts.length > 4 && parts[0]) {
+      return parts[0];
+    }
+    return null;
+  }
+
+  // Handle lvh.me domains (e.g., ethereum.lvh.me)
+  if (hostname.endsWith(".lvh.me")) {
+    const parts = hostname.split(".");
+    if (parts.length > 2 && parts[0]) {
+      return parts[0];
+    }
+    return null;
+  }
+
+  // Handle production subdomains (e.g., ethereum.openscan.io)
+  // Skip if it's just the base domain (openscan.io) or www
+  const parts = hostname.split(".");
+  if (parts.length > 2 && parts[0]) {
+    const subdomain = parts[0];
+    // Skip common non-subdomain prefixes
+    if (subdomain !== "www") {
+      return subdomain;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Get the redirect path for the current subdomain, if any
+ * Returns null if no subdomain or no matching config
+ */
+export function getSubdomainRedirect(): string | null {
+  const subdomain = getSubdomain();
+  if (!subdomain) {
+    return null;
+  }
+
+  const config = getSubdomainConfig(subdomain);
+  if (!config) {
+    return null;
+  }
+
+  return config.redirect;
+}
+
+/**
+ * Check if we're on a subdomain that should redirect
+ */
+export function hasSubdomainRedirect(): boolean {
+  return getSubdomainRedirect() !== null;
+}
+
+/**
+ * Get the subdomain URL for a network ID
+ * Returns null if the network doesn't have a configured subdomain
+ */
+export function getNetworkSubdomainUrl(networkId: number): string | null {
+  const config = getSubdomainForNetwork(networkId);
+  if (!config) {
+    return null;
+  }
+
+  const { protocol, port, hostname } = window.location;
+  const portSuffix = port ? `:${port}` : "";
+
+  // Handle localhost
+  if (hostname === "localhost" || hostname.endsWith(".localhost")) {
+    return `${protocol}//${config.subdomain}.localhost${portSuffix}/`;
+  }
+
+  // Handle lvh.me
+  if (hostname === "lvh.me" || hostname.endsWith(".lvh.me")) {
+    return `${protocol}//${config.subdomain}.lvh.me${portSuffix}/`;
+  }
+
+  // Handle nip.io / sslip.io
+  if (hostname.includes(".nip.io")) {
+    const baseParts = hostname.split(".");
+    // Get the IP part (e.g., 127.0.0.1.nip.io)
+    const ipAndDomain = baseParts.slice(-5).join(".");
+    return `${protocol}//${config.subdomain}.${ipAndDomain}${portSuffix}/`;
+  }
+
+  if (hostname.includes(".sslip.io")) {
+    const baseParts = hostname.split(".");
+    const ipAndDomain = baseParts.slice(-5).join(".");
+    return `${protocol}//${config.subdomain}.${ipAndDomain}${portSuffix}/`;
+  }
+
+  // Handle production domains (e.g., openscan.io -> ethereum.openscan.io)
+  const parts = hostname.split(".");
+  // Get the base domain (last 2 parts, e.g., openscan.io)
+  const baseDomain = parts.length > 2 ? parts.slice(-2).join(".") : hostname;
+  return `${protocol}//${config.subdomain}.${baseDomain}${portSuffix}/`;
+}
+
+/**
+ * Get the base domain URL (without subdomain)
+ * Returns null if already on base domain
+ */
+export function getBaseDomainUrl(): string | null {
+  const hostname = window.location.hostname;
+  const { protocol, port } = window.location;
+
+  // Handle localhost subdomains (e.g., ethereum.localhost -> localhost)
+  if (hostname.endsWith(".localhost")) {
+    const portSuffix = port ? `:${port}` : "";
+    return `${protocol}//localhost${portSuffix}/`;
+  }
+
+  // Handle IP-based domains (e.g., ethereum.127.0.0.1.nip.io)
+  if (hostname.includes(".nip.io") || hostname.includes(".sslip.io")) {
+    const parts = hostname.split(".");
+    if (parts.length > 4) {
+      // Remove first part (subdomain)
+      const baseDomain = parts.slice(1).join(".");
+      const portSuffix = port ? `:${port}` : "";
+      return `${protocol}//${baseDomain}${portSuffix}/`;
+    }
+    return null;
+  }
+
+  // Handle lvh.me domains (e.g., ethereum.lvh.me -> lvh.me)
+  if (hostname.endsWith(".lvh.me")) {
+    const parts = hostname.split(".");
+    if (parts.length > 2) {
+      const portSuffix = port ? `:${port}` : "";
+      return `${protocol}//lvh.me${portSuffix}/`;
+    }
+    return null;
+  }
+
+  // Handle production subdomains (e.g., ethereum.openscan.io -> openscan.io)
+  const parts = hostname.split(".");
+  if (parts.length > 2 && parts[0] && parts[0] !== "www") {
+    const baseDomain = parts.slice(1).join(".");
+    const portSuffix = port ? `:${port}` : "";
+    return `${protocol}//${baseDomain}${portSuffix}/`;
+  }
+
+  return null;
+}
diff --git a/src/utils/web3Security.ts b/src/utils/web3Security.ts
index ee715aa..d707f58 100644
--- a/src/utils/web3Security.ts
+++ b/src/utils/web3Security.ts
@@ -5,213 +5,209 @@ import { ethers } from "ethers";
  */
 
 export interface ProviderSecurity {
-	isMetaMaskInstalled: boolean;
-	isProviderTrusted: boolean;
-	providerVersion?: string;
-	chainId?: number;
-	warnings: string[];
+  isMetaMaskInstalled: boolean;
+  isProviderTrusted: boolean;
+  providerVersion?: string;
+  chainId?: number;
+  warnings: string[];
 }
 
 /**
  * Enhanced provider detection with security checks
  */
 export async function checkProviderSecurity(): Promise<ProviderSecurity> {
-	const warnings: string[] = [];
-	let isMetaMaskInstalled = false;
-	let isProviderTrusted = false;
-	let providerVersion: string | undefined;
-	let chainId: number | undefined;
-
-	try {
-		// Check if window.ethereum exists
-		if (!window.ethereum) {
-			warnings.push("No Web3 provider detected. Please install MetaMask.");
-			return {
-				isMetaMaskInstalled: false,
-				isProviderTrusted: false,
-				warnings,
-			};
-		}
-
-		isMetaMaskInstalled = true;
-
-		// Check if it's MetaMask specifically
-		if (!window.ethereum.isMetaMask) {
-			warnings.push("Non-MetaMask provider detected. Proceed with caution.");
-		}
-
-		// Check provider version
-		if (window.ethereum._metamask?.version) {
-			providerVersion = window.ethereum._metamask.version;
-		}
-
-		// EIP-1193 compliance check
-		if (typeof window.ethereum.request !== "function") {
-			warnings.push("Provider does not support EIP-1193 standard.");
-			return {
-				isMetaMaskInstalled,
-				isProviderTrusted: false,
-				providerVersion,
-				warnings,
-			};
-		}
-
-		// Check connection and chain ID
-		try {
-			const chainIdHex = await window.ethereum.request({
-				method: "eth_chainId",
-			});
-			chainId = parseInt(chainIdHex, 16);
-
-			// Warn about testnets in production
-			if (process.env.NODE_ENV === "production" && chainId !== 1) {
-				warnings.push(
-					`Connected to non-mainnet network (Chain ID: ${chainId}). Ensure this is intentional.`,
-				);
-			}
-		} catch (error) {
-			warnings.push("Unable to retrieve chain information.");
-		}
-
-		// Check if provider is connected
-		try {
-			const accounts = await window.ethereum.request({
-				method: "eth_accounts",
-			});
-			if (!accounts || accounts.length === 0) {
-				warnings.push("Wallet is not connected.");
-			}
-		} catch (error) {
-			warnings.push("Unable to check wallet connection status.");
-		}
-
-		isProviderTrusted = warnings.length === 0;
-	} catch (error) {
-		warnings.push(
-			`Provider security check failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-		);
-	}
-
-	return {
-		isMetaMaskInstalled,
-		isProviderTrusted,
-		providerVersion,
-		chainId,
-		warnings,
-	};
+  const warnings: string[] = [];
+  let isMetaMaskInstalled = false;
+  let isProviderTrusted = false;
+  let providerVersion: string | undefined;
+  let chainId: number | undefined;
+
+  try {
+    // Check if window.ethereum exists
+    if (!window.ethereum) {
+      warnings.push("No Web3 provider detected. Please install MetaMask.");
+      return {
+        isMetaMaskInstalled: false,
+        isProviderTrusted: false,
+        warnings,
+      };
+    }
+
+    isMetaMaskInstalled = true;
+
+    // Check if it's MetaMask specifically
+    if (!window.ethereum.isMetaMask) {
+      warnings.push("Non-MetaMask provider detected. Proceed with caution.");
+    }
+
+    // Check provider version
+    if (window.ethereum._metamask?.version) {
+      providerVersion = window.ethereum._metamask.version;
+    }
+
+    // EIP-1193 compliance check
+    if (typeof window.ethereum.request !== "function") {
+      warnings.push("Provider does not support EIP-1193 standard.");
+      return {
+        isMetaMaskInstalled,
+        isProviderTrusted: false,
+        providerVersion,
+        warnings,
+      };
+    }
+
+    // Check connection and chain ID
+    try {
+      const chainIdHex = await window.ethereum.request({
+        method: "eth_chainId",
+      });
+      chainId = parseInt(chainIdHex, 16);
+
+      // Warn about testnets in production
+      if (process.env.NODE_ENV === "production" && chainId !== 1) {
+        warnings.push(
+          `Connected to non-mainnet network (Chain ID: ${chainId}). Ensure this is intentional.`,
+        );
+      }
+    } catch (_error) {
+      warnings.push("Unable to retrieve chain information.");
+    }
+
+    // Check if provider is connected
+    try {
+      const accounts = await window.ethereum.request({
+        method: "eth_accounts",
+      });
+      if (!accounts || accounts.length === 0) {
+        warnings.push("Wallet is not connected.");
+      }
+    } catch (_error) {
+      warnings.push("Unable to check wallet connection status.");
+    }
+
+    isProviderTrusted = warnings.length === 0;
+  } catch (error) {
+    warnings.push(
+      `Provider security check failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+    );
+  }
+
+  return {
+    isMetaMaskInstalled,
+    isProviderTrusted,
+    providerVersion,
+    chainId,
+    warnings,
+  };
 }
 
 /**
  * Secure signer creation with additional checks
  */
 export async function createSecureSigner(): Promise<ethers.Signer> {
-	const security = await checkProviderSecurity();
-
-	if (!security.isMetaMaskInstalled) {
-		throw new Error(
-			"MetaMask is not installed. Please install MetaMask to continue.",
-		);
-	}
-
-	if (security.warnings.length > 0) {
-		console.warn("Web3 Security Warnings:", security.warnings);
-	}
-
-	if (!window.ethereum) {
-		throw new Error("No Web3 provider available");
-	}
-
-	try {
-		// Force MetaMask provider instead of using local RPC
-
-		// Request account access if needed
-		const accounts = await window.ethereum.request({
-			method: "eth_requestAccounts",
-		});
-		if (!accounts || accounts.length === 0) {
-			throw new Error("No accounts available. Please connect your wallet.");
-		}
-
-		// Create provider and signer
-		const provider = new ethers.BrowserProvider(window.ethereum);
-		const signer = await provider.getSigner();
-
-		// Verify signer address
-		const address = await signer.getAddress();
-		if (!address || address === "0x0000000000000000000000000000000000000000") {
-			throw new Error("Invalid signer address received");
-		}
-
-		console.log("✅ Secure signer created:", address);
-		return signer;
-	} catch (error) {
-		console.error("❌ Error creating secure signer:", error);
-		throw new Error(
-			`Failed to create secure signer: ${error instanceof Error ? error.message : "Unknown error"}`,
-		);
-	}
+  const security = await checkProviderSecurity();
+
+  if (!security.isMetaMaskInstalled) {
+    throw new Error("MetaMask is not installed. Please install MetaMask to continue.");
+  }
+
+  if (security.warnings.length > 0) {
+    console.warn("Web3 Security Warnings:", security.warnings);
+  }
+
+  if (!window.ethereum) {
+    throw new Error("No Web3 provider available");
+  }
+
+  try {
+    // Force MetaMask provider instead of using local RPC
+
+    // Request account access if needed
+    const accounts = await window.ethereum.request({
+      method: "eth_requestAccounts",
+    });
+    if (!accounts || accounts.length === 0) {
+      throw new Error("No accounts available. Please connect your wallet.");
+    }
+
+    // Create provider and signer
+    const provider = new ethers.BrowserProvider(window.ethereum);
+    const signer = await provider.getSigner();
+
+    // Verify signer address
+    const address = await signer.getAddress();
+    if (!address || address === "0x0000000000000000000000000000000000000000") {
+      throw new Error("Invalid signer address received");
+    }
+
+    console.log("✅ Secure signer created:", address);
+    return signer;
+  } catch (error) {
+    console.error("❌ Error creating secure signer:", error);
+    throw new Error(
+      `Failed to create secure signer: ${error instanceof Error ? error.message : "Unknown error"}`,
+    );
+  }
 }
 
 /**
  * Validate transaction parameters before signing
  */
 export function validateTransactionSecurity(
-	to: string,
-	data: string,
-	value?: string,
+  to: string,
+  data: string,
+  value?: string,
 ): { isValid: boolean; warnings: string[] } {
-	const warnings: string[] = [];
-	let isValid = true;
-
-	// Check recipient address
-	if (!to || to === "0x0000000000000000000000000000000000000000") {
-		warnings.push("Invalid recipient address");
-		isValid = false;
-	}
-
-	// Check if it's a contract interaction
-	if (data && data.length > 2) {
-		// Basic checks for suspicious patterns
-		if (data.includes("selfdestruct") || data.includes("suicide")) {
-			warnings.push("Transaction contains potentially dangerous operations");
-			isValid = false;
-		}
-	}
-
-	// Check value
-	if (value) {
-		try {
-			const valueWei = ethers.parseEther(value);
-			if (valueWei > ethers.parseEther("100")) {
-				// More than 100 ETH
-				warnings.push(
-					"Large value transfer detected. Please verify the amount.",
-				);
-			}
-		} catch (error) {
-			warnings.push("Invalid value format");
-			isValid = false;
-		}
-	}
-
-	return { isValid, warnings };
+  const warnings: string[] = [];
+  let isValid = true;
+
+  // Check recipient address
+  if (!to || to === "0x0000000000000000000000000000000000000000") {
+    warnings.push("Invalid recipient address");
+    isValid = false;
+  }
+
+  // Check if it's a contract interaction
+  if (data && data.length > 2) {
+    // Basic checks for suspicious patterns
+    if (data.includes("selfdestruct") || data.includes("suicide")) {
+      warnings.push("Transaction contains potentially dangerous operations");
+      isValid = false;
+    }
+  }
+
+  // Check value
+  if (value) {
+    try {
+      const valueWei = ethers.parseEther(value);
+      if (valueWei > ethers.parseEther("100")) {
+        // More than 100 ETH
+        warnings.push("Large value transfer detected. Please verify the amount.");
+      }
+    } catch (_error) {
+      warnings.push("Invalid value format");
+      isValid = false;
+    }
+  }
+
+  return { isValid, warnings };
 }
 
 /**
  * Hook for using secure Web3 operations
  */
 export function useSecureWeb3() {
-	const createSigner = async () => {
-		return await createSecureSigner();
-	};
-
-	const checkSecurity = async () => {
-		return await checkProviderSecurity();
-	};
-
-	return {
-		createSigner,
-		checkSecurity,
-		validateTransaction: validateTransactionSecurity,
-	};
+  const createSigner = async () => {
+    return await createSecureSigner();
+  };
+
+  const checkSecurity = async () => {
+    return await checkProviderSecurity();
+  };
+
+  return {
+    createSigner,
+    checkSecurity,
+    validateTransaction: validateTransactionSecurity,
+  };
 }
diff --git a/tsconfig.json b/tsconfig.json
index d8c4687..1a1b4ad 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
 		"module": "esnext",
 		"jsx": "react-jsx",
 		"strict": true,
-		"moduleResolution": "node",
+		"moduleResolution": "bundler",
 		"allowSyntheticDefaultImports": true,
 		"esModuleInterop": true,
 		"resolveJsonModule": true,
diff --git a/webpack.config.js b/webpack.config.js
index 0527c57..5981d24 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,6 +8,7 @@ const packageJson = require("./package.json");
 
 const isProd = process.env.NODE_ENV === "production";
 const isGhPages = process.env.GITHUB_PAGES === "true";
+const publicPath = isGhPages ? "/explorer/" : "/";
 
 // Get git commit hash
 let commitHash = "development";
@@ -22,7 +23,7 @@ module.exports = {
 	output: {
 		path: path.resolve(__dirname, "dist"),
 		filename: "bundle.js",
-		publicPath: isGhPages ? "/explorer/" : "/", // key for GH Pages
+		publicPath: publicPath, // key for GH Pages
 		clean: true,
 		charset: false,
 	},
@@ -33,8 +34,11 @@ module.exports = {
 			path.resolve(__dirname, "public"),
 			path.resolve(__dirname, "dist"),
 		],
-		historyApiFallback: true,
-		port: 3000,
+		historyApiFallback: {
+			// Allow dots in URLs (for ENS names like vitalik.eth)
+			disableDotRule: true,
+		},
+		port: 3030,
 		open: true,
 		hot: true,
 		liveReload: false,
@@ -96,6 +100,7 @@ module.exports = {
 		new HtmlWebpackPlugin({
 			template: path.resolve(__dirname, "public", "index.html"),
 			inject: "body", // ensure script is injected
+			publicPath: publicPath,
 		}),
 		new CopyWebpackPlugin({
 			patterns: [