use vault history

Fetches historical APY and TVL timeseries data for a vault from the off-chain API.

const { yieldHistory, tvlHistory, isLoading } = useVaultHistory('yoETH')

Usage

import { useVaultHistory } from '@yo-protocol/react'

function VaultChart() {
  const { yieldHistory, tvlHistory, isLoading } = useVaultHistory('yoETH')

  if (isLoading) return <p>Loading history...</p>

  const latest = yieldHistory[yieldHistory.length - 1]

  return (
    <div>
      <p>
        Latest APY: {latest?.value}% —{' '}
        {new Date(latest?.timestamp * 1000).toLocaleDateString()}
      </p>
      <p>Total data points: {yieldHistory.length} yield, {tvlHistory.length} TVL</p>

      <ul>
        {yieldHistory.slice(-7).map((point) => (
          <li key={point.timestamp}>
            {new Date(point.timestamp * 1000).toLocaleDateString()}: {point.value}%
          </li>
        ))}
      </ul>
    </div>
  )
}

Parameters

Parameter	Type	Required	Description
vault	Address | VaultId	Yes	Vault address or named ID

Return Value

Field	Type	Description
yieldHistory	TimeseriesPoint[]	Historical APY data points
tvlHistory	TimeseriesPoint[]	Historical TVL data points
isLoading	boolean	true while either query is loading
isError	boolean	true if either query failed
error	Error | null	First error encountered
refetch	() => void	Refetch both timeseries queries

TimeseriesPoint shape

Property	Type	Description
timestamp	number	Unix timestamp (seconds)
value	number	APY percentage or TVL in USD

Caching

Setting	Value	Description
staleTime	5 min	Historical data is considered fresh for 5 minutes

Charting

The timeseries arrays are sorted chronologically (oldest first) and work directly with charting libraries like Recharts, Chart.js, or Visx — just map timestamp to x and value to y.