Local Chain Dashboard

로컬 블록체인(Hardhat node / Anvil)에 RPC로 연결해 브라우저에서 계정·잔액·블록·트랜잭션을 보는 대시보드입니다.

Next.js 한 프로젝트로 UI와 API( RPC 프록시 등)를 함께 관리합니다.

구조

local-dashboard/
├── app/              # Next.js App Router
│   ├── page.tsx      # 대시보드 페이지 (계정·블록 등)
│   ├── layout.tsx
│   ├── globals.css
│   └── api/          # API Routes
│       ├── rpc/      # RPC 프록시 (POST → 로컬 노드 전달)
│       └── config/  # GET 로컬 네트워크 정보 (.env 기반)
├── package.json
├── next.config.ts
├── tsconfig.json
└── README.md

• UI: app/ — 페이지·컴포넌트.
• 백엔드: app/api/ — RPC 프록시(/api/rpc), (선택) 노드 제어 API. 별도 서버 없이 같은 Next 앱에서 제공.
• RPC 프록시: POST /api/rpc 가 body를 그대로 로컬 노드로 전달. 기본 노드 주소는 http://127.0.0.1:8545 (환경 변수 RPC_URL로 변경 가능).

환경 변수 (.env)

로컬 네트워크 정보는 .env.local (또는 .env)에 넣으면 대시보드 상단에 표시됩니다.

.env.example을 복사해 .env.local로 저장한 뒤 값을 수정하세요.

cp .env.example .env.local

예: Hardhat node 기준

RPC_URL=http://127.0.0.1:8545
CHAIN_ID=31337
NETWORK_NAME=Hardhat Local

사용할 로컬 노드

• Hardhat: cd hardhat && npx hardhat node → RPC http://127.0.0.1:8545
• Anvil: anvil 또는 anvil --state ./data/state.json → RPC http://127.0.0.1:8545

대시보드는 RPC URL만 맞추면 둘 다 동일하게 연결해서 볼 수 있습니다.

실행

cd local-dashboard
npm install
npm run dev

브라우저에서 접속 후 RPC URL(예: http://127.0.0.1:8545) 설정해 계정·블록 등 확인.

참고

• 상세 설계: docs/LOCAL-UI-STATE-PERSISTENCE.md