DeFi Dashboard on Website

Implementing a DeFi Dashboard on a Website

A DeFi dashboard aggregates data about a user's positions across multiple protocols: deposits in Aave, LP positions in Uniswap, staking in Curve, wallet balance. All on one screen with real-time updates, yield and PnL.

The complexity is not in individual widgets, but in integration: each protocol has its own API or set of contracts, different data formats, different networks. Plus price data for USD conversion.

Dashboard Architecture

defi-dashboard/
├── lib/
│   ├── protocols/
│   │   ├── aave.ts        # Subgraph / REST API
│   │   ├── uniswap-v3.ts  # Subgraph
│   │   └── curve.ts       # Curve API
│   ├── prices.ts          # CoinGecko / DeFiLlama prices
│   └── multicall.ts       # Batching on-chain requests
├── hooks/
│   ├── usePortfolio.ts    # Aggregating all positions
│   ├── usePrices.ts       # Current token prices
│   └── useNetWorth.ts     # USD portfolio value
└── components/
    ├── NetWorthCard/
    ├── PositionsList/
    ├── ProtocolCard/
    └── AllocationChart/

Getting Price Data

// lib/prices.ts
const COINGECKO_BASE = 'https://api.coingecko.com/api/v3';

// Price cache — update once per minute, not on every render
const priceCache = new Map<string, { price: number; ts: number }>();
const CACHE_TTL = 60_000;

export async function getTokenPrices(
  tokenIds: string[],
  vsCurrency = 'usd',
): Promise<Record<string, number>> {
  const stale = tokenIds.filter(id => {
    const cached = priceCache.get(id);
    return !cached || Date.now() - cached.ts > CACHE_TTL;
  });

  if (stale.length > 0) {
    const res = await fetch(
      `${COINGECKO_BASE}/simple/price?ids=${stale.join(',')}&vs_currencies=${vsCurrency}`,
    );
    const data = await res.json();
    for (const [id, prices] of Object.entries(data)) {
      priceCache.set(id, { price: (prices as Record<string, number>)[vsCurrency], ts: Date.now() });
    }
  }

  return Object.fromEntries(
    tokenIds.map(id => [id, priceCache.get(id)?.price ?? 0]),
  );
}

Aave v3 Positions via Subgraph

// lib/protocols/aave.ts
const AAVE_SUBGRAPH = 'https://api.thegraph.com/subgraphs/name/aave/protocol-v3';

interface AavePosition {
  reserve: { symbol: string; underlyingAsset: string; decimals: number };
  currentATokenBalance: string;
  currentVariableDebt: string;
  currentStableDebt: string;
  reserveLiquidationThreshold: string;
}

export async function getAavePositions(userAddress: string): Promise<AavePosition[]> {
  const query = `{
    userReserves(
      where: { user: "${userAddress.toLowerCase()}", currentATokenBalance_gt: "0" }
    ) {
      reserve { symbol underlyingAsset decimals liquidityRate }
      currentATokenBalance
      currentVariableDebt
      currentStableDebt
    }
  }`;

  const res = await fetch(AAVE_SUBGRAPH, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query }),
    next: { revalidate: 30 },
  });

  const { data } = await res.json();
  return data.userReserves;
}

Uniswap v3 LP Positions

Uniswap v3 positions are NFTs (ERC-721 in NonfungiblePositionManager). We get them via Subgraph or Uniswap API:

// lib/protocols/uniswap-v3.ts
const UNISWAP_SUBGRAPH = 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3';

export async function getUniswapPositions(ownerAddress: string) {
  const query = `{
    positions(
      where: { owner: "${ownerAddress.toLowerCase()}", liquidity_gt: "0" }
      orderBy: id
      orderDirection: desc
      first: 20
    ) {
      id
      liquidity
      token0 { symbol decimals }
      token1 { symbol decimals }
      pool { feeTier sqrtPrice tick token0Price token1Price }
      depositedToken0
      depositedToken1
      collectedFeesToken0
      collectedFeesToken1
      tickLower { tickIdx }
      tickUpper { tickIdx }
    }
  }`;

  const res = await fetch(UNISWAP_SUBGRAPH, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query }),
  });

  const { data } = await res.json();
  return data.positions;
}

Aggregation in Hook

// hooks/usePortfolio.ts
import { useQuery } from '@tanstack/react-query';
import { useAccount } from 'wagmi';
import { getAavePositions } from '@/lib/protocols/aave';
import { getUniswapPositions } from '@/lib/protocols/uniswap-v3';
import { getTokenPrices } from '@/lib/prices';

export function usePortfolio() {
  const { address } = useAccount();

  return useQuery({
    queryKey: ['portfolio', address],
    queryFn: async () => {
      if (!address) return null;

      const [aavePositions, uniswapPositions] = await Promise.all([
        getAavePositions(address),
        getUniswapPositions(address),
      ]);

      const tokenIds = [
        ...new Set([
          ...aavePositions.map(p => p.reserve.symbol.toLowerCase()),
          'ethereum',
        ]),
      ];

      const prices = await getTokenPrices(tokenIds);

      const aaveUSD = aavePositions.reduce((sum, pos) => {
        const balance = Number(pos.currentATokenBalance) / 10 ** pos.reserve.decimals;
        const price = prices[pos.reserve.symbol.toLowerCase()] ?? 0;
        return sum + balance * price;
      }, 0);

      return {
        aavePositions,
        uniswapPositions,
        aaveUSD,
        prices,
      };
    },
    enabled: !!address,
    refetchInterval: 60_000,
  });
}

Dashboard Components

// components/NetWorthCard.tsx
export function NetWorthCard() {
  const { data, isLoading } = usePortfolio();

  if (isLoading) return <Skeleton className="h-32" />;

  const total = (data?.aaveUSD ?? 0) + (data?.uniswapUSD ?? 0);

  return (
    <div className="rounded-2xl border border-white/10 bg-gradient-to-br from-neutral-900 to-neutral-800 p-6">
      <p className="text-sm text-neutral-400">Net Worth</p>
      <p className="mt-1 text-4xl font-bold">
        ${total.toLocaleString('en-US', { maximumFractionDigits: 2 })}
      </p>
      <div className="mt-4 flex gap-6 text-sm">
        <Metric label="Aave" value={data?.aaveUSD} />
        <Metric label="Uniswap LP" value={data?.uniswapUSD} />
      </div>
    </div>
  );
}

Real-Time Data Updates

The dashboard requires current data without manual page refresh:

// Prices — every minute via react-query refetchInterval
// On-chain data — every 12 seconds (one Ethereum block)
// Subgraph data — every 30 seconds (indexing delay ~15s)

const { data } = useQuery({
  queryKey: ['aavePositions', address],
  queryFn: () => getAavePositions(address!),
  refetchInterval: 30_000,
  staleTime: 15_000,
});

Timeframe: dashboard with one protocol (e.g., Aave only), prices and USD valuation — 3–4 days. Multi-protocol dashboard with 3–4 protocols, allocation chart, history — 1.5–2 weeks.