Safe Blockspace by Design — Every transaction verified before it hits the block.
An Agent-Driven Intent Settlement Layer on Ethereum, launched as an EigenLayer AVS. Users sign off-chain intents (yield-routing, swaps, conditional executions) that a decentralized network of restaked, slashable AI-augmented Agents competes to fulfill by simulating, verifying, and bundling multiple compatible intents into a single atomic Ethereum transaction.
This repo contains the frontend — a Next.js 14 + TypeScript + TailwindCSS application with Solana wallet integration (Phantom/Solflare), a landing page, intent composer, user dashboard, agent explorer, and a live bundle feed.
- Landing page — hero, how-it-works 4-step flow, flagship yield-routing use case with real cost breakdown
- Intent Composer — form for yield / swap / conditional intents with live preview, APY match, gas estimate, EIP-712 sign flow
- Dashboard — your active / pending / fulfilled intents with assigned agent and bundle tx hash
- Agent Explorer — ranked list of restaked agents by success rate, volume, stake, and slashing history
- Live Bundles — real-time visualizer of intents being batched into atomic transactions
- Demo Mode — toggle in the header runs everything against mock data with a simulated live feed, so you can showcase without a wallet
- Mobile-first — every view responsive with a proper mobile nav drawer
- Socials baked in — X, GitHub, Buy Coin (gmgn.ai), and Solana wallet connect in the header
- Near-black background (
#000) - Purple/violet accent (
#7C3AED) - White typography with Instrument Serif italics for display accents
- JetBrains Mono for addresses, hashes, and technical data
- Geist for body
- Animated orbital rings echoing the logo
You'll need Node.js 18.17 or later. Download from nodejs.org if you don't have it.
npm install
npm run devOpen http://localhost:3000.
That's it. Demo Mode is ON by default, so every page works without any backend.
mostrad-network/
├── public/
│ ├── favicon.svg # the atomic orbital logo (also serves as favicon)
│ └── logo.svg # transparent-bg version for the UI
├── src/
│ ├── app/
│ │ ├── layout.tsx # root layout, providers, metadata
│ │ ├── page.tsx # landing page
│ │ ├── globals.css # fonts + base styles
│ │ ├── compose/page.tsx # Intent Composer
│ │ ├── dashboard/page.tsx
│ │ ├── agents/page.tsx
│ │ └── bundles/page.tsx # Live feed (auto-updates in demo mode)
│ ├── components/
│ │ ├── Header.tsx # sticky header with demo toggle + socials
│ │ ├── Footer.tsx
│ │ ├── Logo.tsx # atomic orbital SVG
│ │ ├── OrbitalBackground.tsx # animated background
│ │ └── WalletButton.tsx # Solana wallet connect
│ ├── contexts/
│ │ ├── DemoContext.tsx # global demo-mode state
│ │ └── SolanaProvider.tsx # Phantom + Solflare wallets
│ └── lib/
│ ├── demo-data.ts # all the mock data
│ └── utils.ts
├── package.json
├── next.config.js
├── tailwind.config.ts
├── tsconfig.json
└── DEPLOY.md # step-by-step GitHub + Vercel guide
- X: x.com/mostradnet
- GitHub: github.com/mostradrepo
- Buy Coin: gmgn.ai
The Demo toggle in the header (visible on desktop, inside the mobile drawer on phones) switches between:
- Demo Mode (ON by default) — everything uses the mock data in
src/lib/demo-data.ts. The Live Bundles feed generates a new bundle every ~3 seconds. Great for showing investors/users without needing a wallet or a live backend. - Live Mode — the demo data is still shown but the "LIVE" label appears. Wire up your real backend (see note below) and it will pull from there.
The frontend talks to /api/v1/* and a WebSocket channel. Point them at your backend by setting environment variables (see .env.example). The original project spec calls for:
- Fastify/Hono + PostgreSQL (Drizzle) + Redis
- Intent Service (EIP-712 validation), Agent Auction Service, Simulation Service (Tenderly/Anvil fork), Bundler (Flashbots Protect), Agent Registry, Yield Router
- WebSocket layer (Socket.io) for live updates
That backend is not included in this repo — this repo is frontend-only and runs fully in Demo Mode out of the box. Building the backend is a separate workstream; the API shape you'd target is documented in the frontend's types.
All demo values (APYs, agent names, stakes, bundle counts) live in a single file: src/lib/demo-data.ts. Edit it and every page updates.
The purple accent is #7C3AED. It's defined in tailwind.config.ts under theme.extend.colors.violet. Change it there + scan globals.css for hardcoded values.
public/favicon.svg and public/logo.svg. The <Logo /> component in src/components/Logo.tsx is the inline version used throughout the UI — it's already a pure SVG, edit the paths directly.
Everything you need to deploy. No node_modules — Vercel will install those automatically.
See DEPLOY.md for the step-by-step GitHub + Vercel guide (no terminal / git bash required).
- APY numbers, gas costs, and stats shown are illustrative demo values representative of recent ranges for Aave, Compound, Morpho, and Pendle. A production deployment would pull live values from each protocol's subgraph or API.
- The Solana wallet is integrated because that was the requirement. The original spec mentions Ethereum/wagmi; if you want both, you can add RainbowKit alongside the Solana provider.
© 2026 Mostrad Labs. All rights reserved.