OctaFlow

A transparency and impact-tracking dashboard for Octant v2. OctaFlow tracks and visualizes how yield generated by DeFi or protocol revenue flows into ecosystem funding programs and measures their real-world impact.

Features

• Yield Tracking: Monitor yield generation from DeFi protocols and visualize growth trends
• Allocations: Track how yield is routed to different funding programs
• Impact Scoring: Measure real-world impact with our scoring engine and badge system

Tech Stack

• Framework: Next.js 14 with TypeScript
• Styling: TailwindCSS
• Web3: Wagmi + Ethers.js
• Charts: Recharts
• Animation: Framer Motion
• State Management: Zustand
• API: Next.js API routes

Getting Started

Installation

npm install

Development

npm run dev

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

Build

npm run build

Start Production Server

npm start

Project Structure

/src
├── app/                     # Next.js app router
│   ├── api/                 # API routes
│   ├── yield/               # Yield tracking page
│   ├── allocations/         # Allocations page
│   └── impact/              # Impact scoring page
├── components/              # Reusable UI components
├── lib/                     # Utilities and helpers
│   ├── graphClient.ts       # The Graph queries
│   ├── ethersClient.ts      # Blockchain connection
│   └── impactUtils.ts       # Impact scoring calculations
└── abis/                    # Contract ABIs

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_GRAPH_ENDPOINT=https://api.thegraph.com/subgraphs/name/octaflow/demo
NEXT_PUBLIC_CHAIN_ID=1
NEXT_PUBLIC_RPC_URL=https://mainnet.infura.io/v3/YOUR_KEY

Deployment

The app is ready to deploy on Vercel:

vercel

License

MIT

Built with ❤️ for the Octant