yo-protocol-react-sdklisted
Install: claude install-skill yoprotocol/yo-protocol-skills
Official Yo Protocol skill.
Canonical repository: https://github.com/yoprotocol/yo-protocol-skills
# @yo-protocol/react SDK
## Architecture
Three layers:
1. **Provider** — `YieldProvider` wraps app, provides config. `useYoClient()` creates `YoClient` from `@yo-protocol/core`
1. **Query hooks** (32) — Read data via `useQuery` + `client.getX()`. Return `{ data, isLoading, isError, error, refetch }`
1. **Action hooks** (4) — Mutate via `client.prepareX()` + wagmi `sendTransactionAsync()`. Return `{ mutate, step, hash, reset }`
Core only prepares transactions (`PreparedTransaction { to, data, value }`). React sends them via wagmi. No `walletClient` needed.
## Quick Start
```tsx
// Provider setup
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<YieldProvider partnerId={9999} defaultSlippageBps={50}>
<App />
</YieldProvider>
</QueryClientProvider>
</WagmiProvider>
// Read vault state
const { vaultState } = useVaultState("yoUSD")
// Read user position
const { position } = useUserPosition("yoUSD") // auto-uses connected wallet
// Deposit with auto-approval and chain switching
const { deposit, step } = useDeposit({ vault: "yoUSD", slippageBps: 50 })
await deposit({ token: usdcAddress, amount: 1_000_000n, chainId: 8453 })
// Redeem with auto-approval
const { redeem, instant, assetsOrRequestId } = useRedeem({ vault: "yoUSD" })
await redeem(500_000n)
```
## Migration
When encountering code using the old API, consult [referenc