Quickstart

Using @yo-protocol/core

import { createYoClient } from '@yo-protocol/core'

const client = createYoClient({
  chainId: 8453, // Base
})

// Read vault state
const vault = await client.getVaultState('0x3a43aec53490cb9fa922847385d82fe25d0e9de7')
console.log(vault.name, vault.totalAssets)

// Get API snapshot (TVL, APY)
const snapshot = await client.getVaultSnapshot('0x3a43aec53490cb9fa922847385d82fe25d0e9de7')
console.log(`APY: ${snapshot.apy}%`)

Using @yo-protocol/react

Wrap your app with the required providers, then use hooks:

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()

function App({ children }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <YieldProvider>
          {children}
        </YieldProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Then use hooks in your components:

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

function VaultPage() {
  const { vault, isLoading } = useVault('yoETH')
  const { deposit, isLoading: depositing } = useDeposit({ vault: 'yoETH' })

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

  return (
    <div>
      <h1>{vault?.name}</h1>
      <p>Total assets: {vault?.totalAssets.toString()}</p>
      <button
        onClick={() => deposit(parseEther('0.1'))}
        disabled={depositing}
      >
        Deposit 0.1 ETH
      </button>
    </div>
  )
}