LEASH Frontend

Command center for onchain agent spend allowances on Monad testnet.

Stack

Next.js 15 · TypeScript · Tailwind CSS v4 · Zustand · TanStack Query · Axios · Wagmi / viem / RainbowKit · Framer Motion

Design system: see DESIGN.md.

Setup

cd frontend
cp .env.example .env.local   # already seeded for testnet
npm install
npm run dev

Open http://localhost:3000.

Env

Variable	Purpose
NEXT_PUBLIC_LEASH_FACTORY	Factory address
NEXT_PUBLIC_USDC	Monad testnet USDC
NEXT_PUBLIC_ENVIO_GRAPHQL_URL	Envio GraphQL
NEXT_PUBLIC_API_URL	Backend API (policy lab)
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID	WalletConnect (optional for injected)
NEXT_PUBLIC_RPC_URL	Monad RPC

Optional API

cd ../backend/api && npm run dev

Policy lab uses POST /vault/:vault/session/:id/can-spend.

Routes

Path	Role
/	Landing
/app	Command center
/app/fund	Deposit / withdraw
/app/sessions	Create + list sessions
/app/sessions/[id]	Detail + revoke
/app/ledger	Envio activity feed
/app/policy-lab	can-spend preflight
/docs	Pitch / how it works

Demo path

1. Connect wallet on Monad testnet
2. Create vault
3. Deposit USDC (approve → deposit)
4. Create agent session
5. Watch ledger (indexer lag ~seconds)
6. Policy lab / revoke

Scripts

npm run dev
npm run build
npm run start
npm run lint