Examples

Vault Dashboard

A minimal vault dashboard showing vault state and user position.

import { useVault, useUserBalance, useVaults } from '@yo-protocol/react'
import { useAccount } from 'wagmi'
import { formatUnits } from 'viem'

function VaultDashboard() {
  const { address } = useAccount()
  const { vaults } = useVaults()

  return (
    <div>
      <h1>Available Vaults</h1>
      {vaults.map((v) => (
        <VaultRow key={v.address} address={v.address} account={address} />
      ))}
    </div>
  )
}

function VaultRow({ address, account }) {
  const { vault, isLoading } = useVault(address)
  const { position } = useUserBalance(address, account)

  if (isLoading) return <div>Loading...</div>

  return (
    <div>
      <h2>{vault?.name}</h2>
      <p>TVL: {vault ? formatUnits(vault.totalAssets, vault.assetDecimals) : '—'}</p>
      {position && (
        <p>Your balance: {formatUnits(position.assets, vault!.assetDecimals)}</p>
      )}
    </div>
  )
}

Deposit Flow

Full deposit flow with approval check, approve, and deposit.

import { useDeposit, useApprove, useVault } from '@yo-protocol/react'
import { useAccount } from 'wagmi'
import { parseUnits } from 'viem'
import { VAULTS, YO_GATEWAY_ADDRESS } from '@yo-protocol/core'

function DepositForm() {
  const vault = VAULTS.yoUSD
  const { address } = useAccount()
  const { vault: vaultState } = useVault('yoUSD')

  const { approve, isLoading: approving } = useApprove({
    token: vault.underlying.address[8453],
    spender: YO_GATEWAY_ADDRESS,
    onSubmitted: () => console.log('Approved'),
  })

  const { deposit, isLoading: depositing, isSuccess } = useDeposit({
    vault: 'yoUSD',
    onSubmitted: (hash) => console.log('Deposited:', hash),
  })

  const handleDeposit = async () => {
    const amount = parseUnits('100', 6) // 100 USDC
    await approve(amount)
    await deposit(amount)
  }

  return (
    <div>
      <h2>Deposit into {vaultState?.name}</h2>
      <button onClick={handleDeposit} disabled={approving || depositing}>
        {approving ? 'Approving...' : depositing ? 'Depositing...' : 'Deposit 100 USDC'}
      </button>
      {isSuccess && <p>Deposit confirmed!</p>}
    </div>
  )
}

Withdraw Flow

Redeem vault shares for underlying assets via the Yo Gateway.

import { useRedeem, useUserBalance } from '@yo-protocol/react'
import { useAccount } from 'wagmi'

function WithdrawForm() {
  const { address } = useAccount()
  const { position } = useUserBalance('yoETH', address)

  const { redeem, isLoading } = useRedeem({
    vault: 'yoETH',
    onSubmitted: (hash) => console.log('Redeemed:', hash),
  })

  return (
    <div>
      <p>Your shares: {position?.shares.toString() ?? '0'}</p>

      <button
        onClick={() => redeem(position!.shares)}
        disabled={isLoading || !position?.shares}
      >
        {isLoading ? 'Withdrawing...' : 'Withdraw All'}
      </button>
    </div>
  )
}

Deposit with Automatic Approval

Using depositWithApproval to handle the approve-if-needed + deposit flow in one call.

import { useYoKit } from '@yo-protocol/react'
import { useAccount } from 'wagmi'
import { parseUnits } from 'viem'
import { VAULTS } from '@yo-protocol/core'

function SimpleDeposit() {
  const client = useYoKit()
  const { address } = useAccount()

  const handleDeposit = async () => {
    const vault = VAULTS.yoUSD
    const result = await client.depositWithApproval({
      vault: vault.address,
      token: vault.underlying.address[8453],
      amount: parseUnits('100', 6),
    })

    if (result.approveHash) {
      console.log('Approved:', result.approveHash)
    }
    console.log('Deposited:', result.depositHash)
    console.log('Shares:', result.shares)
  }

  return <button onClick={handleDeposit}>Deposit 100 USDC</button>
}

AA Wallet Bundling

Using prepared transactions to build a bundle for account abstraction wallets.

import { createYoClient, VAULTS } from '@yo-protocol/core'
import { parseUnits } from 'viem'

const client = createYoClient({ chainId: 8453 })
const vault = VAULTS.yoUSD

// Build approve + deposit as raw call data
const bundle = await client.prepareDepositWithApproval({
  vault: vault.address,
  token: vault.underlying.address[8453],
  owner: accountAddress,
  amount: parseUnits('100', 6),
})

// bundle is 1 tx (deposit only) if allowance is sufficient,
// or 2 txs (approve + deposit) if approval is needed.
// Send via your AA bundler:
for (const tx of bundle) {
  console.log({ to: tx.to, data: tx.data, value: tx.value })
}

Checking Pending Redemptions

Query pending async redemptions using the React hook or core client.

import { usePendingRedemptions } from '@yo-protocol/react'
import { useAccount } from 'wagmi'

function PendingRedeems() {
  const { address } = useAccount()
  const { pendingRedemptions, isLoading } = usePendingRedemptions({
    vault: 'yoETH',
    user: address,
  })

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

  return (
    <div>
      <h3>Pending Redemptions</h3>
      {pendingRedemptions?.assets ? (
        <p>Assets pending: {pendingRedemptions.assets.formatted}</p>
      ) : (
        <p>No pending redemptions</p>
      )}
    </div>
  )
}

Core SDK (No React)

Using @yo-protocol/core directly for server-side or script usage.

import { createYoClient, VAULTS } from '@yo-protocol/core'
import { formatUnits } from 'viem'

async function main() {
  const client = createYoClient({ chainId: 8453, partnerId: 42 })

  // Fetch on-chain state
  const state = await client.getVaultState(VAULTS.yoETH.address)
  console.log(`${state.name}: ${formatUnits(state.totalAssets, state.assetDecimals)} ETH`)

  // Fetch API snapshot
  const snapshot = await client.getVaultSnapshot(VAULTS.yoETH.address)
  console.log(`APY: ${snapshot.apy}%`)
  console.log(`TVL: ${snapshot.tvl.formatted}`)

  // Historical data
  const yields = await client.getVaultYieldHistory(VAULTS.yoETH.address)
  console.log(`${yields.length} data points`)
}

main()

Provider Setup (Next.js)

Complete provider setup for a Next.js App Router project.

// app/providers.tsx
'use client'

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

const queryClient = new QueryClient()

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <YieldProvider
          defaultSlippageBps={50}
          onError={(err) => console.error('@yield error:', err)}
        >
          {children}
        </YieldProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

// app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}