Overview

React hooks and providers for the Yo yield protocol, built on @yo-protocol/core, wagmi, and TanStack Query.

Key Concepts

Concept	Description
YieldProvider	Context provider that creates and exposes a YoClient. Must sit inside WagmiProvider and QueryClientProvider.
Read hooks	useVault, useVaults, useUserBalance, useVaultHistory — backed by TanStack Query with automatic caching, refetching, and stale-while-revalidate.
Action hooks	useDeposit, useRedeem, useApprove — mutation-style hooks with loading, error, and transaction confirmation tracking.
YoKitProvider	Optional theming provider for pre-built UI components.

Setup

import { WagmiProvider } from 'wagmi'
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
import { YieldProvider } from '@yo-protocol/react'
import { config } from './wagmi'

const queryClient = new QueryClient()

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <YieldProvider>
          {children}
        </YieldProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Provider order matters

YieldProvider must be nested inside both WagmiProvider and QueryClientProvider. It reads the wagmi config and query client from context.

Usage Example

import { useVault, useDeposit } from '@yo-protocol/react'
import { parseEther } from 'viem'

function DepositCard() {
  const { vault, isLoading } = useVault('yoETH')
  const { deposit, isPending, isSuccess } = useDeposit({ vault: 'yoETH' })

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

  return (
    <div>
      <h2>{vault?.name}</h2>
      <p>Total assets: {vault?.totalAssets.toString()}</p>
      <button onClick={() => deposit(parseEther('0.1'))} disabled={isPending}>
        {isPending ? 'Depositing...' : 'Deposit 0.1 ETH'}
      </button>
      {isSuccess && <p>Deposit confirmed!</p>}
    </div>
  )
}

Exports

Providers

Export	Description
YieldProvider	Core context provider — creates YoClient from wagmi config
useYoClient	Access the underlying YoClient instance
useYieldConfig	Access the provider configuration
YoKitProvider	Optional theming provider for pre-built UI

Read Hooks

Hook	Returns	Description
useVault(name)	{ vault, isLoading, error }	Single vault state + snapshot
useVaults()	{ vaults, isLoading, error }	All vaults for the current chain
useUserBalance(vault)	{ balance, isLoading, error }	Connected user's vault position
useVaultHistory(vault)	{ history, isLoading, error }	APY and TVL timeseries data

Action Hooks

Hook	Returns	Description
useDeposit({ vault })	{ deposit, isPending, isSuccess, error }	Deposit assets via gateway
useRedeem({ vault })	{ redeem, isPending, isSuccess, error }	Redeem shares for assets via gateway
useApprove({ token })	{ approve, isPending, isSuccess, error }	Approve token spending

Next Steps

• YieldProvider — Provider configuration and options

• Hooks Reference — Full hook API reference starting with useVault

• Wagmi Setup — Configuring wagmi for use with @yield