use vault

Fetches on-chain vault state and off-chain snapshot data with automatic caching and background refetching.

const { vault, isLoading, isError, error, refetch } = useVault('yoETH')

Usage

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

function VaultInfo() {
  const { vault, isLoading, isError, error, refetch } = useVault('yoETH')

  if (isLoading) return <p>Loading vault...</p>
  if (isError) return <p>Error: {error?.message}</p>

  return (
    <div>
      <h2>{vault?.name}</h2>
      <p>Total Assets: {vault?.totalAssets.toString()}</p>
      <p>Exchange Rate: {vault?.exchangeRate.toString()}</p>
      <button onClick={() => refetch()}>Refresh</button>
    </div>
  )
}

Parameters

Parameter	Type	Required	Description
vault	Address | VaultId	Yes	Vault address or named ID ('yoETH', 'yoUSD', etc.)

Return Value

Field	Type	Description
vault	VaultState | undefined	On-chain vault state including name, totalAssets, exchangeRate, totalSupply
isLoading	boolean	true while the initial fetch is in progress
isError	boolean	true if the query failed
error	Error | null	Error object if the query failed
refetch	() => void	Manually trigger a refetch

Caching

Setting	Value	Description
staleTime	30s	Data is considered fresh for 30 seconds
refetchInterval	60s	Background refetch every 60 seconds

Automatic updates

After a successful useDeposit or useRedeem transaction, the useVault query is automatically invalidated so the UI reflects the latest state without a manual refetch.