Points widget

Problem Statement

Point Widget is an innovative portfolio tracker that goes beyond traditional crypto portfolio management by allowing users to:Track Multi-Protocol Assets: Automatically fetch and display asset holdings across different DeFi protocols Manage Project Points & Tokens: Add and value early-stage project points/tokens that aren't yet listed on exchanges Custom Valuation Models: Configure FDV-based pricing for unlisted assets using project fundamentals Visual Portfolio Analytics: Interactive pie charts showing asset distribution and total portfolio value Real-time Data Integration: Connect with blockchain APIs to fetch live portfolio data

Solution

We built the project as a modular Next.js 15 app using React 19, Tailwind v4, Shadcn UI and Radix primitives to keep the interface fast and composable. Data fetching is handled through React Query, which lets us aggregate Octav API data with custom point-based valuation inputs.Under the hood, the widget merges two different data models: on-chain portfolio data coming from Octav, and user-defined valuation models for early-stage projects. For unpriced assets, we compute point value using a simple FDV-based formula, then inject it into the portfolio state so the charts update in real time.We didn’t rely only on Octav APIs; we designed the system so any external points source can be plugged in. The hackiest part was making the configuration layer persist locally while still keeping everything reactive. The final result is a lightweight analytics engine that renders dynamic pie charts and recalculates asset values instantly as parameters change.