Ocean Network Compute Dashboard

A Next.js web application for monitoring and interacting with Ocean Network. It provides node operators, compute job consumers, and community members with tools to explore network health, run compute jobs, manage nodes, track rewards, and more.

Live app: dashboard.oncompute.ai

---

Features

• Node Explorer – Browse and search all registered Ocean compute nodes with detailed stats, hardware specs, location, uptime, and benchmark history.
• Run a Job – Step-by-step wizard to select a compute environment, configure resources (CPU, RAM, disk, GPU, duration) and pay for the job. This flow ends by opening the user's editor of choice, and running the job with the help of Ocean Orchestrator extension.
• Run a Node – Guided setup flow for starting up a new Ocean compute node.
• Global Stats – Network-wide analytics: total nodes, jobs, rewards, GPU popularity, and country distribution.
• Profile – Per-wallet view of owned nodes, rewards history, and associated jobs.
• Grant Flow – Token grant mechanism backed by a Google Sheets ledger and Gemini AI integration.
• Swap Tokens / Withdraw – Utility pages for token operations.
• Web3 Wallet Support – Two independent paths: native wallets connect via EIP-6963 discovery + Ethers.js, and email magic link / passkey / Google OAuth go through Privy + Alchemy Account Kit to a smart contract account.
• ENS Resolution – Display human-readable ENS names for wallet addresses.
• Analytics – Dedicated analytics layer (summaries, rewards history, GPU stats) from the analytics backend.
• Node Storage – Per-node persistent storage for compute consumers to upload files for using in compute jobs. Browse and create buckets on a node, upload/delete files, and control access via reusable on-chain access lists.

---

Tech Stack

Layer	Technology
Framework	Next.js 16 (Pages Router)
Language	TypeScript
Styling	SCSS / CSS Modules
Web3	Ethers.js v6, EIP-6963, Privy, Alchemy Account Kit
Ocean SDK	@oceanprotocol/lib, @oceanprotocol/contracts
P2P	libp2p
Data Fetching	TanStack Query
Charts	Recharts
Map	Leaflet
Forms	Formik + Yup
AI	Google Generative AI (Gemini)
Package Manager	Yarn 4 (Berry)

---

Getting Started

Prerequisites

• Node.js 20.16.0 (see .nvmrc)
• Yarn 4 – enabled via Corepack: corepack enable

Install dependencies

yarn install

Configure environment variables

Copy .env and fill in the required values (see Environment Variables below):

cp .env .env.local

Run the development server

yarn dev

Open http://localhost:3000 in your browser.

Build for production

yarn build
yarn start

---

Scripts

Script	Description
yarn dev	Start Next.js development server
yarn build	Build for production (NODE_ENV=production)
yarn start	Start the production server
yarn lint	Run ESLint
yarn lint:fix	Run ESLint with auto-fix
yarn format	Run Prettier on all TS/TSX files

---

Environment Variables

Create a .env.local file (or configure your deployment environment) with the following variables.

App

Variable	Description
NEXT_PUBLIC_APP_ENV	"development" or "production". Controls which backend URLs are used and which chain tokens are on (ETH Sepolia or BASE).
NEXT_PUBLIC_LEGACY_ESCROW_ADDRESS	Optional. Address of the previous Escrow deployment on Base. When set, the escrow page shows a contract selector so users can view and withdraw funds left in it. Ignored on Sepolia.

Alchemy

Variable	Description
ALCHEMY_RPC_URL	Alchemy RPC endpoint (Ethereum mainnet for dev, Base mainnet for prod)
NEXT_PUBLIC_ALCHEMY_API_KEY	Alchemy API key
NEXT_PUBLIC_ALCHEMY_POLICY_ID	Alchemy gas policy ID

Grant Flow

Variable	Description
GEMINI_API_KEY	Google Gemini API key used in the grant AI flow
GRANT_GSHEETS_SERVICE_ACCOUNT_EMAIL	Google service account email for Sheets access
GRANT_GSHEETS_SERVICE_ACCOUNT_PRIVATE_KEY	Private key for the Google service account
GRANT_GSHEETS_SPREADSHEET_ID	Google Sheets spreadsheet ID for grant ledger
GRANT_GSHEETS_SHEET_NAME	Sheet/tab name within the spreadsheet
GRANT_GMAIL_ADDRESS	Gmail address used to send grant confirmation emails
GRANT_GMAIL_OAUTH_CLIENT_ID	Gmail OAuth client ID
GRANT_GMAIL_OAUTH_CLIENT_SECRET	Gmail OAuth client secret
GRANT_GMAIL_OAUTH_REFRESH_TOKEN	Gmail OAuth refresh token
NEXT_PUBLIC_GRANT_AMOUNT	Token grant amount distributed per grant
NEXT_PUBLIC_COMPY_PER_USDC	COMPY received per 1 USDC in the "Get COMPY" swap. Must match the GrantsSwap contract rate (it has no getter). Defaults to 5
GRANT_FAUCET_PRIVATE_KEY	Private key of the faucet wallet (server-side only, keep secret)

Compute

Variable	Description
NEXT_PUBLIC_GPU_LIST	Comma-separated list of supported GPU models shown in the job wizard
NEXT_PUBLIC_VLLM_TAG	Optional. Fallback Docker tag for vllm/vllm-openai. Defaults to pinned stable v0.28.0; models that require a newer architecture use their official model-specific image tag automatically.

The Custom Models configuration keeps the fallback per deployment but also exposes a per-model vLLM runtime selector. Its automatic setting selects qwen38-flash-next for Qwen/Qwen3.8-Flash-Next, glm53-flash for zai-org/GLM-5.3-Flash, and the configured fallback for other models.

Note: Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. All others are server-side only and must never be committed or exposed publicly.

---

API Backends

The app connects to two backend environments, selected automatically via NEXT_PUBLIC_APP_ENV:

Environment	(Incentive) API	Analytics API
development	https://incentive-backend.oceanprotocol.io	https://analytics.nodes.oceanprotocol.io
production	https://api.oncompute.ai	https://analytics.oncompute.ai

ENS resolution always uses: https://ens-proxy.oceanprotocol.com/api

---

Networks & Tokens

The active chain is determined by NEXT_PUBLIC_APP_ENV:

Environment	Chain	Chain ID
development	Ethereum Sepolia	11155111
production	Base Mainnet	8453

Token contracts:

Token	Sepolia (dev)	Base (prod)
COMPY	0x973e69303259B0c2543a38665122b773D28405fB	0x298f163244e0c8cc9316D6E97162e5792ac5d410
USDC	0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238	0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913

---

Project Structure

src/
├── pages/          # Next.js pages (routes)
│   ├── index.tsx           # Home / node map
│   ├── nodes/              # Node explorer & detail
│   ├── run-job/            # Compute job wizard
│   ├── run-node/           # Node setup wizard
│   ├── stats.tsx           # Global network stats
│   ├── leaderboard.tsx     # Leaderboard
│   ├── profile/            # Per-wallet profile
│   ├── grant/              # Grant flow
│   ├── nodes/[nodeId]/storage/ # Node persistent storage (buckets & files)
│   ├── swap-tokens.tsx     # Token swap
│   ├── withdraw.tsx        # Token withdrawal
│   └── api/                # Next.js API routes (server-side)
├── components/     # Reusable UI components
├── context/        # React context providers
├── hooks/          # Custom React hooks
├── services/       # Custom service functions
├── api-services/   # BFF API service functions
├── utils/          # Utility functions
├── types/          # TypeScript type definitions
├── constants/      # App-wide constants
├── styles/         # Global SCSS styles & design tokens
├── assets/         # Static assets (SVGs, images)
├── lib/            # Web3-specific wrappers & configs
└── config.ts       # App config, routes, and API route helpers

---

Links

• Ocean Protocol
• Ocean Node GitHub
• Ocean Network Docs
• Discord
• X / Twitter
• Support