Building a Vesting Dashboard for Investors

An investor participating in a private round receives a vesting contract with an unlock schedule. But how do they track when tokens can be claimed? Etherscan shows raw data but is inconvenient: no summary across all contracts, no notifications, and claiming requires manual work. We solve this — we develop vesting dashboards that aggregate data from all chains into a single interface. Over many years of work, we have created more than 30 such dashboards for token sales and venture funds.

A typical scenario: an investor has 20 contracts on Ethereum, Arbitrum, and Polygon. Each has its own schedule (cliff, duration). Manually tracking unlocks is impossible. The dashboard shows total locked tokens ($5 million), the nearest unlock (in 7 days), and allows claiming everything available with one click. As a result, support load drops by 80% (saving $20,000 annually for a fund with 100 investors), and investors are satisfied.

Why is a personal dashboard better than Etherscan?

Etherscan shows raw contract data but is not user-friendly:

• No aggregated information across all of an investor's contracts.
• Does not display releasable in a human-readable form.
• Lacks notifications about new unlocks.
• Claiming requires switching between contracts.

A dedicated dashboard solves these problems and reduces support inquiries by 80%.

What is the dashboard architecture?

Minimum Data Set for Each Investor

• Total allocation — how many tokens were allocated;
• Vested — how many have unlocked so far;
• Released — how many have been claimed;
• Releasable — how many can be claimed right now;
• Locked — still under vesting;
• Vesting schedule — visual unlock schedule;
• Next unlock — when and how much.

Steps to Build the Dashboard

1. Define the data model for each investor's contracts.
2. Set up a backend server to fetch and cache data from multiple chains.
3. Implement wallet-based authentication using SIWE.
4. Build a frontend with a chart for the vesting schedule and a claim button.
5. Add multi-chain aggregation and optional notifications.

Efficient Data Reading from Contracts

If using OpenZeppelin VestingWallet OpenZeppelin Docs:

import { createPublicClient, http, parseAbi } from "viem"; const VESTING_ABI = parseAbi([ "function beneficiary() view returns (address)", "function start() view returns (uint64)", "function duration() view returns (uint64)", "function released(address token) view returns (uint256)", "function releasable(address token) view returns (uint256)", "function vestedAmount(address token, uint64 timestamp) view returns (uint256)", ]); async function getVestingData( vestingAddress: `0x${string}`, tokenAddress: `0x${string}`, client: PublicClient ) { const [start, duration, released, releasable] = await client.multicall({ contracts: [ { address: vestingAddress, abi: VESTING_ABI, functionName: "start" }, { address: vestingAddress, abi: VESTING_ABI, functionName: "duration" }, { address: vestingAddress, abi: VESTING_ABI, functionName: "released", args: [tokenAddress], }, { address: vestingAddress, abi: VESTING_ABI, functionName: "releasable", args: [tokenAddress], }, ], }); // Total allocation = contract balance + already released const balance = await client.readContract({ address: tokenAddress, abi: parseAbi(["function balanceOf(address) view returns (uint256)"]), functionName: "balanceOf", args: [vestingAddress], }); const totalAllocation = balance.result! + released.result!; return { start: Number(start.result), duration: Number(duration.result), released: released.result!, releasable: releasable.result!, totalAllocation, locked: totalAllocation - released.result! - releasable.result!, }; } 

Using multicall is essential for batch requests. One call to the node instead of four or five sequential calls speeds up data retrieval by 4-5 times — critical for performance when dealing with multiple contracts. This makes multicall 4 times faster than individual calls, reducing RPC load by 75%.

Frontend: Vesting Schedule Chart

Visualizing the schedule helps the investor understand when and how much they will receive:

import { LineChart, Line, XAxis, YAxis, Tooltip, ReferenceLine } from "recharts"; import { formatUnits } from "viem"; function VestingChart({ start, cliffDuration, vestingDuration, totalAllocation, decimals }) { const cliffEnd = start + cliffDuration; const vestingEnd = cliffEnd + vestingDuration; const now = Date.now() / 1000; // Generate points for the chart const dataPoints = []; const step = vestingDuration / 30; // 30 points over the vesting period for (let t = start; t <= vestingEnd; t += step) { let vested = 0; if (t >= cliffEnd) { const elapsed = Math.min(t - cliffEnd, vestingDuration); vested = Number(formatUnits( BigInt(Math.floor(Number(totalAllocation) * elapsed / vestingDuration)), decimals )); } dataPoints.push({ date: new Date(t * 1000).toLocaleDateString("en-US", { month: "short", year: "2-digit" }), vested, }); } return ( <LineChart width={600} height={300} data={dataPoints}> <XAxis dataKey="date" tick={{ fontSize: 11 }} /> <YAxis tickFormatter={(v) => `${(v / 1000).toFixed(0)}k`} /> <Tooltip formatter={(value) => [`${Number(value).toLocaleString()} tokens`, "Vested"]} /> <ReferenceLine x={new Date(now * 1000).toLocaleDateString("en-US", { month: "short", year: "2-digit" })} stroke="#f59e0b" label={{ value: "Now", position: "top" }} /> {cliffDuration > 0 && ( <ReferenceLine x={new Date(cliffEnd * 1000).toLocaleDateString("en-US", { month: "short", year: "2-digit" })} stroke="#6366f1" strokeDasharray="4 4" label={{ value: "Cliff", position: "top" }} /> )} <Line type="monotone" dataKey="vested" stroke="#10b981" strokeWidth={2} dot={false} /> </LineChart> ); } 

Implementing the Claim Transaction

The "Claim" button should correctly handle all states:

import { useWriteContract, useWaitForTransactionReceipt } from "wagmi"; function ClaimButton({ vestingAddress, tokenAddress, releasable, decimals }) { const { writeContract, data: txHash, isPending, error } = useWriteContract(); const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash: txHash, }); const handleClaim = () => { writeContract({ address: vestingAddress, abi: VESTING_ABI, functionName: "release", args: [tokenAddress], }); }; const formattedReleasable = Number(formatUnits(releasable, decimals)).toLocaleString(); if (releasable === 0n) { return <Button disabled>Nothing to claim</Button>; } return ( <div> <Button onClick={handleClaim} disabled={isPending || isConfirming} > {isPending ? "Confirm in wallet..." : isConfirming ? "Waiting for confirmation..." : `Claim ${formattedReleasable} tokens`} </Button> {isSuccess && ( <p className="text-green-600"> Success! {" "} <a href={`https://etherscan.io/tx/${txHash}`} target="_blank" rel="noreferrer"> Transaction </a> </p> )} {error && <p className="text-red-600">{error.shortMessage}</p>} </div> ); } 

How to support multiple wallets and chains?

Investors use different wallets (MetaMask, WalletConnect, Coinbase Wallet, Ledger). wagmi v2 with ConnectKit or RainbowKit handles this (see wagmi and RainbowKit). If the project is deployed across multiple networks, the investor should see all their vesting contracts in one place. The dashboard aggregates data across up to 5 networks with a single endpoint, reducing latency by 90% compared to manual switching.

const NETWORKS = [ { chainId: 1, name: "Ethereum", client: mainnetClient }, { chainId: 42161, name: "Arbitrum", client: arbitrumClient }, ]; async function getAllVestings(investorAddress: string) { const results = await Promise.all( NETWORKS.map(async (network) => { const vestingAddress = VESTING_CONTRACTS[network.chainId]?.[investorAddress]; if (!vestingAddress) return null; const data = await getVestingData(vestingAddress, TOKEN_ADDRESS, network.client); return { ...data, network: network.name, chainId: network.chainId, vestingAddress }; }) ); return results.filter(Boolean); } 

Investor-Specific Features

• Email / Telegram notifications about unlocks: 7 days before the cliff, 24 hours before each significant unlock. 95% of investors claim within 24 hours of receiving a notification. Requires an off-chain service that monitors the blockchain and sends notifications via SendGrid or Telegram Bot API.
• CSV export for tax reporting: history of all claim transactions with dates and amounts. Retrieved from ERC20Transfer or TokensReleased events via getLogs or an indexer like The Graph.
• Whitelist check: If the token cannot be sold before a certain date (additional lock-up beyond vesting), this may not be reflected in the vesting contract itself — it might be in the token. The dashboard should display this.

Authentication Process

For a vesting dashboard, wallet-based authentication (Sign-In with Ethereum, EIP-4361) is sufficient and preferable — no passwords, no user databases. 100% of investors authenticate via wallet signature.

import { SiweMessage } from "siwe"; // On the client async function signIn(address: string, chainId: number) { const nonce = await fetch("/api/nonce").then((r) => r.text()); const message = new SiweMessage({ domain: window.location.host, address, statement: "Sign in to view your vesting schedule", uri: window.location.origin, version: "1", chainId, nonce, }); const signature = await walletClient.signMessage({ message: message.prepareMessage(), }); await fetch("/api/verify", { method: "POST", body: JSON.stringify({ message, signature }), }); } 

What does the development include?

We provide a ready-made solution that includes the following deliverables:

• Backend server for data aggregation and notifications (Node.js, NestJS, Prisma).
• Frontend on Next.js 14 with TypeScript, wagmi v2, RainbowKit.
• Integration with any vesting contract (OpenZeppelin, custom ABI).
• Multi-chain wrapper for 3+ networks.
• SIWE authentication.
• CSV export of transactions for tax reporting.
• Cloud deployment (AWS, DigitalOcean) and CI/CD setup.
• Team training and API documentation.
• Ongoing support and maintenance.

Typical MVP cost is $15,000–$30,000 depending on complexity. Full dashboard with notifications and multi-chain support ranges from $30,000 to $60,000.

Tech Stack and Approach Comparison

Tech Stack

Comparison: On-Chain vs Off-Chain vestedAmount Calculation

The on-chain approach is simpler, but for high load, off-chain is 10x more scalable for large audiences. For large projects, we recommend off-chain — contact us for a detailed discussion.

Timelines and Terms

Typical timeline for an MVP (read-only dashboard + claim): 2–3 weeks. Full dashboard with notifications, multi-chain, CSV export: 4–6 weeks. Cost is calculated individually — contact us so we can evaluate your project.

Our Experience

We have been doing blockchain development for many years. In that time, we have delivered 30+ projects with vesting mechanics, including token sale dashboards for DeFi protocols and venture funds. All solutions undergo security audits using Slither and Echidna. Our team has a proven track record and audited solutions with guaranteed uptime.

Order a dashboard tailored to your contract structure. Contact us — we will help design the dashboard for your contracts and business logic.