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.

Token Development: ERC-20, Tokenomics, Vesting

We’ve seen more rekt tokens than we can count — not because the code was broken, but because the economic assumptions were naive. A token that doesn’t collapse from inflation in six months, where governance actually works, and vesting can’t be bypassed through delegation tricks — that’s real engineering. We build under that standard.

How We Avoid Common ERC-20 Pitfalls

ERC-20 standard has nine functions. Complexity starts with extensions:

ERC-20Permit (EIP-2612) — gasless approve via signature. User signs permit(owner, spender, value, deadline, v, r, s) off-chain, spender calls permit() + transferFrom() in one transaction. Removes separate approve step. Risk: signature can be intercepted — need deadline and nonce checking. We always implement EIP-712 typed structured data to prevent signature malleability.

ERC-20Votes (EIP-5805) — snapshot balances for governance. Checkpoint system stores balance history by block number. getPastVotes(address, blockNumber) returns balance at proposal creation, not current. Prevents flash loan governance: can't borrow tokens and vote in one transaction.

Rebasing tokens (stETH, Ampleforth) — balanceOf changes automatically through internal shares ratio. High integration complexity: most DeFi protocols don't work correctly with rebasing without non-rebasing wrapper. We've deployed wrappers that decouple balance from share price for Uniswap compatibility.

Fee-on-transfer tokens — percentage cut on every transfer. Breaks AMM calculations: pool receives less than expected. Uniswap v2/v3 don't support natively — needs special pair/router. We’ve built custom routers that handle fee-on-transfer tokens without reverting.

Why Tokenomics Sustainability Matters More Than Excel

Tokenomics isn't Excel table summing to 100%. It's incentive model that either works long-term or creates selling pressure killing the project.

Emission Schedule and Inflation — Fixed supply (Bitcoin model) works for store-of-value, but for utility tokens you need controlled inflation. Inflationary model (like Ethereum post-Merge) generates new tokens to incentivize participants. Key balance: emission should be <= value captured by protocol. If protocol earns $100k/month but emission is $500k/month in market value — constant selling pressure inevitable. We model these scenarios using Python simulations with cadCAD for complex systems.

Supply Distribution — No universal formula. Principle: no single entity >33% voting power at launch. Otherwise governance is fiction.

What Are the Most Critical Vesting Contract Mistakes?

Linear vesting with cliff is standard for team and investors. cliff is the period after TGE with zero availability. After cliff: linear unlock until duration. Typical implementation errors we catch in audit:

• Revocable vesting without timelock — owner can revoke immediately. Solution: revocation through multisig + governance vote with 7-day delay.
• Cliff doesn't block governance rights — with ERC-20Votes, recipient can delegate voting power from day one even if tokens aren't unlocked. We explicitly separate voting power from claim logic.
• No emergency pause — if vesting contract vulnerability discovered, need ability to pause claims. Pausable + timelock on unpause.

We’ve seen a project where the cliff was set to 0 by mistake — team could dump immediately. Our fuzz tests catch such edge cases before deployment.

Why Is Liquidity Bootstrapping Crucial for Token Launch?

Launch mechanics are critical. Three main approaches:

• Balancer LBP — temporary pool with high initial token weight (90/10 project-token/USDC) that automatically decreases to 50/50 over days. Creates downward price pressure preventing bot buys at one price. After LBP liquidity moves to permanent pool.
• Fjord Foundry — specialized platform for LBP and fair launches. Less operational overhead than direct Balancer integration.
• Uniswap v3 with limited range — add liquidity in narrow range around initial price. High capital efficiency but requires active range management.
• TWAMM — mechanics for gradual large-order sales without slippage. Implemented in FraxSwap.

LBP is 3-5x better than standard AMM listing for price discovery; we’ve seen fair launches with 50% less initial dump compared to direct Uniswap listings.

Governance Tokens and Voting Mechanics

OpenZeppelin Governor is the standard. Modular: GovernorVotes for counting, GovernorTimelockControl for timelock execution, GovernorSettings for adjustable parameters. Quorum is minimum percentage of supply for voting validity. Compound set quorum at 400k COMP (4% supply). We set quorum dynamically based on historical participation to avoid apathy or whale capture.

Flash loan governance attack — attacker borrows tokens via flash loan, delegates to self, creates proposal or votes, returns tokens. ERC-20Votes with block-based snapshot completely blocks this: must have tokens at snapshot creation moment, not voting moment.

Delegation — small holders often don't vote. Liquid delegation (like Optimism) lets delegate voting power to addresses without transfer. Critical for protocols with many passive holders.

Token Development Stack

Contracts: Solidity 0.8.x, OpenZeppelin Contracts 5.x (ERC20, ERC20Permit, ERC20Votes, Governor, TimelockController, TokenVesting).
Tokenomics audit: Python models with emission/demand simulation, cadCAD for complex systems modeling.
Deployment and management: Foundry scripts, Gnosis Safe for treasury, OpenZeppelin Defender for automation.
Analytics: Dune Analytics for on-chain metrics, Token Terminal for protocol revenue.

What’s Included in the Work (Deliverables)

• Tokenomics model with stress tests (bear market, whale exit, governance capture)
• Contract development with Foundry fuzz tests (gas optimization, reentrancy tests, overflow checks)
• Audit summary and list of edge cases covered
• Deployment scripts with Gnosis Safe admin keys
• Documentation for future upgrades and maintenance
• 30-day post-launch monitoring support

Process

1. Tokenomics design — supply model, allocation, emission schedule, vesting. Stress-test scenarios.
2. Contract development — ERC-20 + extensions, vesting, governance. Foundry fuzz tests on vesting calculations, governance thresholds.
3. Audit — special attention on governance attack vectors, vesting bypass, permit replay attacks. We use Slither and Echidna for formal verification.
4. LBP / launch — choose mechanics, set parameters, monitor first 24 hours.
5. Post-launch — monitor supply distribution via Dune, governance participation metrics, treasury management.

Timelines

• ERC-20 with permit and basic governance: 2–3 weeks
• Vesting contract with revocation and cliff: 2–4 weeks
• Full governance (Governor + Timelock + Token): 4–7 weeks
• Token + LBP + governance + vesting: 8–14 weeks

We can estimate your project within 24 hours after discussing requirements. Contact us to start the conversation — no obligation, just a technical chat about your token model. Get a detailed proposal tailored to your tokenomics and compliance needs.