[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CS7H051N19JKSVQD7AFFDM":3,"skill-same:01M6CS7H051N19JKSVQD7AFFDM":86},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":26,"publishedAt":47,"linkOnly":48,"markdownContent":49,"markdownBody":50,"frontMatter":51,"refName":34,"commitSha":54,"skillDirectory":55,"forksCount":56,"repositoryHtmlUrl":53,"repositoryHomepageUrl":57,"ownerHtmlUrl":58,"ownerBlogUrl":59,"ownerDescription":60,"updatedAt":61,"install":62,"resources":75},"01M6CS7H051N19JKSVQD7AFFDM","yo-protocol-react-sdk",null,"ALWAYS use this skill when the user is working with React components or hooks that interact with Yo Protocol vaults, or imports from `@yo-protocol\u002Freact`. This skill covers the full React SDK: YieldProvider setup, query hooks (useVaultState, useVaultSnapshot, useUserPosition, useTokenBalance, useShareBalance, useAllowance, useMerklRewards, useLeaderboard, usePrices, etc.), action hooks (useDeposit, useRedeem, useApprove, useClaimMerklRewards), and migration from the old API (useVault→useVaultState, useUserBalance→useUserPosition, inputToken→token, account→owner, partnerId string→number, publicClient→publicClients). Trigger whenever the user mentions yo protocol React hooks, vault dashboard components, deposit\u002Fredeem UI flows, YieldProvider, useYoClient, @yo-protocol\u002Freact, yo-kit, or asks to build React components for yoETH, yoUSD, yoBTC, yoEUR, yoGOLD, or yoUSDT vaults. Also trigger when the user has broken imports or API changes after upgrading @yo-protocol\u002Freact. Do NOT use for CLI shell commands (use yo-protocol-cli) or server-side Node.js scripts without React (use yo-protocol-sdk).","yoprotocol\u002Fyo-protocol-skills","yoprotocol","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F193741819?v=4","01M6CS6X80H0ER1497K71NZR8F","Yo Protocol","01M6CS6XC2ZHV2QCRE9SB40KES",1,"MIT","https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Fblob\u002Fmain\u002Fskills\u002Fyo-protocol-react\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"yo protocol react sdk","sdk","yo protocol","react","protocol","api","query","main","do","build","hooks","use","broken","cli","vault","server","react components","components","dashboard","github","2026-11-10 10:12:30",false,"---\nname: yo-protocol-react-sdk\ndescription: >-\n  ALWAYS use this skill when the user is working with React components or hooks that interact with Yo\n  Protocol vaults, or imports from `@yo-protocol\u002Freact`. This skill covers the full React SDK: YieldProvider\n  setup, query hooks (useVaultState, useVaultSnapshot, useUserPosition, useTokenBalance, useShareBalance,\n  useAllowance, useMerklRewards, useLeaderboard, usePrices, etc.), action hooks (useDeposit, useRedeem,\n  useApprove, useClaimMerklRewards), and migration from the old API (useVault→useVaultState,\n  useUserBalance→useUserPosition, inputToken→token, account→owner, partnerId string→number,\n  publicClient→publicClients). Trigger whenever the user mentions yo protocol React hooks, vault dashboard\n  components, deposit\u002Fredeem UI flows, YieldProvider, useYoClient, @yo-protocol\u002Freact, yo-kit, or asks\n  to build React components for yoETH, yoUSD, yoBTC, yoEUR, yoGOLD, or yoUSDT vaults. Also trigger when\n  the user has broken imports or API changes after upgrading @yo-protocol\u002Freact. Do NOT use for CLI shell\n  commands (use yo-protocol-cli) or server-side Node.js scripts without React (use yo-protocol-sdk).\nauthor: yoprotocol\nhomepage: https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\nsource: https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Ftree\u002Fmain\u002Fskills\u002Fyo-protocol-react\n---\n\nOfficial Yo Protocol skill.\nCanonical repository: https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\n\n# @yo-protocol\u002Freact SDK\n\n## Architecture\n\nThree layers:\n\n1. **Provider** — `YieldProvider` wraps app, provides config. `useYoClient()` creates `YoClient` from `@yo-protocol\u002Fcore`\n1. **Query hooks** (32) — Read data via `useQuery` + `client.getX()`. Return `{ data, isLoading, isError, error, refetch }`\n1. **Action hooks** (4) — Mutate via `client.prepareX()` + wagmi `sendTransactionAsync()`. Return `{ mutate, step, hash, reset }`\n\nCore only prepares transactions (`PreparedTransaction { to, data, value }`). React sends them via wagmi. No `walletClient` needed.\n\n## Quick Start\n\n```tsx\n\u002F\u002F Provider setup\n\u003CWagmiProvider config={wagmiConfig}>\n  \u003CQueryClientProvider client={queryClient}>\n    \u003CYieldProvider partnerId={9999} defaultSlippageBps={50}>\n      \u003CApp \u002F>\n    \u003C\u002FYieldProvider>\n  \u003C\u002FQueryClientProvider>\n\u003C\u002FWagmiProvider>\n\n\u002F\u002F Read vault state\nconst { vaultState } = useVaultState(\"yoUSD\")\n\n\u002F\u002F Read user position\nconst { position } = useUserPosition(\"yoUSD\") \u002F\u002F auto-uses connected wallet\n\n\u002F\u002F Deposit with auto-approval and chain switching\nconst { deposit, step } = useDeposit({ vault: \"yoUSD\", slippageBps: 50 })\nawait deposit({ token: usdcAddress, amount: 1_000_000n, chainId: 8453 })\n\n\u002F\u002F Redeem with auto-approval\nconst { redeem, instant, assetsOrRequestId } = useRedeem({ vault: \"yoUSD\" })\nawait redeem(500_000n)\n```\n\n## Migration\n\nWhen encountering code using the old API, consult [references\u002Fmigration.md](references\u002Fmigration.md) for the complete migration guide.\n\n### Quick migration checklist — search and replace:\n\n| Find                                  | Replace with                      |\n| ------------------------------------- | --------------------------------- |\n| `useVault(`                           | `useVaultState(`                  |\n| `useUserBalance(`                     | `useUserPosition(`                |\n| `useWeeklyRewards(`                   | `useLeaderboard(\"weekly\",`        |\n| `useAllTimeRewards(`                  | `useLeaderboard(\"allTime\",`       |\n| `{ vault: vaultState }`               | `{ vaultState }`                  |\n| `{ position } = useUserBalance`       | `{ position } = useUserPosition`  |\n| `inputToken:` (in deposit)            | `token:`                          |\n| `account:` (in deposit\u002Fredeem params) | `owner:`                          |\n| `fromChainId:` \u002F `toChainId:`         | `chainId:`                        |\n| `partnerId: \"`                        | `partnerId:` (number, not string) |\n| `publicClient:` (in createYoClient)   | `publicClients: { [chainId]:`     |\n| `useWalletClient` import              | Remove — no longer needed         |\n| `walletClient` param                  | Remove — core only prepares txs   |\n\n### Import updates\n\n```tsx\n\u002F\u002F Old imports to find and remove\nimport { useVault } from '*\u002FuseVault'\nimport { useUserBalance } from '*\u002FuseUserBalance'\nimport { useWeeklyRewards } from '*\u002FuseWeeklyRewards'\nimport { useAllTimeRewards } from '*\u002FuseAllTimeRewards'\n\n\u002F\u002F New imports\nimport { useVaultState } from '@yo-protocol\u002Freact'\nimport { useUserPosition } from '@yo-protocol\u002Freact'\nimport { useLeaderboard } from '@yo-protocol\u002Freact'\n```\n\n## Hooks Reference\n\nFor complete API signatures and query keys, see [references\u002Fhooks-api.md](references\u002Fhooks-api.md).\n\n### Hook → Client Method Map\n\n**Vault on-chain:** `useVaultState` → `getVaultState()`, `usePreviewDeposit` → `previewDeposit()`, `usePreviewRedeem` → `previewRedeem()`\n\n**Vault API:** `useVaults` → `getVaults()`, `useVaultStats` → `getVaultStats()`, `useVaultSnapshot` → `getVaultSnapshot()`, `useVaultSnapshots` → `getVaultSnapshots()`, `useVaultHistory` → `getVaultYieldHistory()` + `getVaultTvlHistory()`, `useVaultTransactionHistory` → `getVaultHistory()` | `getVaultHistoryAllNetworks()`, `useGlobalVaultHistory` → `getGlobalVaultHistory()`, `useVaultPerformance` → `getVaultPerformance()`, `useVaultPercentile` → `getVaultPercentile()`, `usePerformanceBenchmark` → `getPerformanceBenchmark()`, `useVaultAllocations` → `getVaultAllocationsTimeSeries()`, `useVaultPendingRedeems` → `getVaultPendingRedeems()`, `useSharePriceHistory` → `getSharePriceHistory()`, `useTotalTvl` → `getTotalTvlTimeseries()`, `usePrices` → `getPrices()`\n\n**User on-chain:** `useUserPosition` → `getUserPosition()`, `useUserPositions` → `getUserPositionsAllChains()`, `useTokenBalance` → `getTokenBalance()`, `useShareBalance` → `getShareBalance()`, `useAllowance` → `getAllowance()`\n\n**User API:** `useUserHistory` → `getUserHistory()`, `useUserPerformance` → `getUserPerformance()`, `useUserSnapshots` → `getUserSnapshots()`, `useUserBalances` → `getUserBalances()`, `usePendingRedemptions` → `getPendingRedemptions()`, `useUserRewards` → `getUserRewardsByAsset()`\n\n**Leaderboard:** `useLeaderboard(\"weekly\"|\"allTime\", tokenAddr)` → `getWeeklyRewards()` | `getAllTimeRewards()`\n\n**Merkl:** `useMerklCampaigns` → `getMerklCampaigns()`, `useMerklRewards` → `getClaimableRewards()`\n\n**Actions:** `useDeposit` → `prepareDepositWithApproval()`, `useRedeem` → `prepareRedeemWithApproval()`, `useApprove` → `prepareApprove()`, `useClaimMerklRewards` → `prepareClaimMerklRewards()`\n\n## Creating New Query Hooks\n\nFollow this pattern for any new query hook:\n\n```tsx\nimport { useQuery } from '@tanstack\u002Freact-query'\nimport type { VaultId } from '@yo-protocol\u002Fcore'\nimport type { Address } from 'viem'\nimport { useYoClient } from '..\u002Fcontext'\nimport { resolveVaultAddress } from '..\u002Futils\u002Fvault'\n\nexport function useNewHook(vault: Address | VaultId, options?: { enabled?: boolean }) {\n  const { enabled = true } = options ?? {}\n  const client = useYoClient()\n  const vaultAddress = resolveVaultAddress(vault)\n\n  const { data, isLoading, isError, error, refetch } = useQuery({\n    queryKey: ['yo-new-hook', vaultAddress, client?.chainId],\n    queryFn: () => {\n      if (!client) throw new Error('Client not available')\n      return client.newMethod(vaultAddress)\n    },\n    enabled: enabled && !!client,\n    staleTime: 30_000,\n  })\n\n  return { result: data, isLoading, isError, error: error ?? null, refetch }\n}\n```\n\nRules:\n\n- Query key prefix: `'yo-'` for protocol hooks, `'merkl-'` for Merkl hooks\n- Always include `client?.chainId` as last key segment\n- Guard with `enabled && !!client` (add `!!userAddress` for user-specific hooks)\n- Return `error ?? null` (not raw error)\n- User-scoped hooks should default to connected wallet via `useAccount()`\n\n## Creating New Action Hooks\n\nFollow this pattern — prepare+send with step tracking:\n\n```tsx\nimport { useCallback, useState } from 'react'\nimport { useSendTransaction, useWaitForTransactionReceipt, useAccount } from 'wagmi'\nimport { useQueryClient } from '@tanstack\u002Freact-query'\nimport { useYieldConfig, useYoClient } from '..\u002Fcontext'\n\nexport function useNewAction(options: { onSubmitted?, onConfirmed?, onError? }) {\n  const client = useYoClient()\n  const { address: account } = useAccount()\n  const { sendTransactionAsync } = useSendTransaction()\n  const queryClient = useQueryClient()\n  const [hash, setHash] = useState\u003CHash>()\n  const [step, setStep] = useState\u003Cstring>('idle')\n  const [error, setError] = useState\u003CError | null>(null)\n  const { isSuccess } = useWaitForTransactionReceipt({ hash, query: { enabled: !!hash } })\n\n  \u002F\u002F Invalidate on confirmation\n  useEffect(() => {\n    if (isSuccess && hash) {\n      queryClient.invalidateQueries({ queryKey: ['yo-relevant-key'] })\n      options.onConfirmed?.(hash)\n    }\n  }, [isSuccess, hash])\n\n  const execute = useCallback(async (params) => {\n    const txs = await client.prepareX(params)     \u002F\u002F PreparedTransaction[]\n    for (const tx of txs) {\n      const h = await sendTransactionAsync({ to: tx.to, data: tx.data, value: tx.value })\n      if (tx !== txs[txs.length - 1]) await client.waitForTransaction(h)\n    }\n  }, [client, account, sendTransactionAsync])\n\n  return { execute, step, isLoading: step !== 'idle' && step !== 'success' && step !== 'error', hash, error, reset }\n}\n```\n\n## Key Types\n\n```tsx\n\u002F\u002F Client config\ninterface YoClientConfig {\n  chainId: SupportedChainId\n  partnerId?: number\n  publicClients?: Partial\u003CRecord\u003CSupportedChainId, PublicClient>>\n}\n\n\u002F\u002F Prepared transaction (core output, wagmi input)\ninterface PreparedTransaction { to: Address; data: Hex; value: bigint }\n\n\u002F\u002F Deposit params\ninterface PrepareDepositWithApprovalParams {\n  vault: Address; token: Address; owner: Address\n  recipient?: Address; amount: bigint\n  slippageBps?: number; partnerId?: number; minShares?: bigint; chainId?: number\n}\n\n\u002F\u002F Redeem params\ninterface PrepareRedeemWithApprovalParams {\n  vault: Address; shares: bigint; owner: Address\n  recipient?: Address; slippageBps?: number; partnerId?: number; minAssetsOut?: bigint\n}\n\n\u002F\u002F Vault state\ninterface VaultState {\n  address: Address; name: string; symbol: string; decimals: number\n  totalAssets: bigint; totalSupply: bigint; asset: Address; assetDecimals: number; exchangeRate: bigint\n}\n\n\u002F\u002F User position\ninterface UserVaultPosition { shares: bigint; assets: bigint }\n```\n","Official Yo Protocol skill.\nCanonical repository: https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\n\n# @yo-protocol\u002Freact SDK\n\n## Architecture\n\nThree layers:\n\n1. **Provider** — `YieldProvider` wraps app, provides config. `useYoClient()` creates `YoClient` from `@yo-protocol\u002Fcore`\n1. **Query hooks** (32) — Read data via `useQuery` + `client.getX()`. Return `{ data, isLoading, isError, error, refetch }`\n1. **Action hooks** (4) — Mutate via `client.prepareX()` + wagmi `sendTransactionAsync()`. Return `{ mutate, step, hash, reset }`\n\nCore only prepares transactions (`PreparedTransaction { to, data, value }`). React sends them via wagmi. No `walletClient` needed.\n\n## Quick Start\n\n```tsx\n\u002F\u002F Provider setup\n\u003CWagmiProvider config={wagmiConfig}>\n  \u003CQueryClientProvider client={queryClient}>\n    \u003CYieldProvider partnerId={9999} defaultSlippageBps={50}>\n      \u003CApp \u002F>\n    \u003C\u002FYieldProvider>\n  \u003C\u002FQueryClientProvider>\n\u003C\u002FWagmiProvider>\n\n\u002F\u002F Read vault state\nconst { vaultState } = useVaultState(\"yoUSD\")\n\n\u002F\u002F Read user position\nconst { position } = useUserPosition(\"yoUSD\") \u002F\u002F auto-uses connected wallet\n\n\u002F\u002F Deposit with auto-approval and chain switching\nconst { deposit, step } = useDeposit({ vault: \"yoUSD\", slippageBps: 50 })\nawait deposit({ token: usdcAddress, amount: 1_000_000n, chainId: 8453 })\n\n\u002F\u002F Redeem with auto-approval\nconst { redeem, instant, assetsOrRequestId } = useRedeem({ vault: \"yoUSD\" })\nawait redeem(500_000n)\n```\n\n## Migration\n\nWhen encountering code using the old API, consult [references\u002Fmigration.md](references\u002Fmigration.md) for the complete migration guide.\n\n### Quick migration checklist — search and replace:\n\n| Find                                  | Replace with                      |\n| ------------------------------------- | --------------------------------- |\n| `useVault(`                           | `useVaultState(`                  |\n| `useUserBalance(`                     | `useUserPosition(`                |\n| `useWeeklyRewards(`                   | `useLeaderboard(\"weekly\",`        |\n| `useAllTimeRewards(`                  | `useLeaderboard(\"allTime\",`       |\n| `{ vault: vaultState }`               | `{ vaultState }`                  |\n| `{ position } = useUserBalance`       | `{ position } = useUserPosition`  |\n| `inputToken:` (in deposit)            | `token:`                          |\n| `account:` (in deposit\u002Fredeem params) | `owner:`                          |\n| `fromChainId:` \u002F `toChainId:`         | `chainId:`                        |\n| `partnerId: \"`                        | `partnerId:` (number, not string) |\n| `publicClient:` (in createYoClient)   | `publicClients: { [chainId]:`     |\n| `useWalletClient` import              | Remove — no longer needed         |\n| `walletClient` param                  | Remove — core only prepares txs   |\n\n### Import updates\n\n```tsx\n\u002F\u002F Old imports to find and remove\nimport { useVault } from '*\u002FuseVault'\nimport { useUserBalance } from '*\u002FuseUserBalance'\nimport { useWeeklyRewards } from '*\u002FuseWeeklyRewards'\nimport { useAllTimeRewards } from '*\u002FuseAllTimeRewards'\n\n\u002F\u002F New imports\nimport { useVaultState } from '@yo-protocol\u002Freact'\nimport { useUserPosition } from '@yo-protocol\u002Freact'\nimport { useLeaderboard } from '@yo-protocol\u002Freact'\n```\n\n## Hooks Reference\n\nFor complete API signatures and query keys, see [references\u002Fhooks-api.md](references\u002Fhooks-api.md).\n\n### Hook → Client Method Map\n\n**Vault on-chain:** `useVaultState` → `getVaultState()`, `usePreviewDeposit` → `previewDeposit()`, `usePreviewRedeem` → `previewRedeem()`\n\n**Vault API:** `useVaults` → `getVaults()`, `useVaultStats` → `getVaultStats()`, `useVaultSnapshot` → `getVaultSnapshot()`, `useVaultSnapshots` → `getVaultSnapshots()`, `useVaultHistory` → `getVaultYieldHistory()` + `getVaultTvlHistory()`, `useVaultTransactionHistory` → `getVaultHistory()` | `getVaultHistoryAllNetworks()`, `useGlobalVaultHistory` → `getGlobalVaultHistory()`, `useVaultPerformance` → `getVaultPerformance()`, `useVaultPercentile` → `getVaultPercentile()`, `usePerformanceBenchmark` → `getPerformanceBenchmark()`, `useVaultAllocations` → `getVaultAllocationsTimeSeries()`, `useVaultPendingRedeems` → `getVaultPendingRedeems()`, `useSharePriceHistory` → `getSharePriceHistory()`, `useTotalTvl` → `getTotalTvlTimeseries()`, `usePrices` → `getPrices()`\n\n**User on-chain:** `useUserPosition` → `getUserPosition()`, `useUserPositions` → `getUserPositionsAllChains()`, `useTokenBalance` → `getTokenBalance()`, `useShareBalance` → `getShareBalance()`, `useAllowance` → `getAllowance()`\n\n**User API:** `useUserHistory` → `getUserHistory()`, `useUserPerformance` → `getUserPerformance()`, `useUserSnapshots` → `getUserSnapshots()`, `useUserBalances` → `getUserBalances()`, `usePendingRedemptions` → `getPendingRedemptions()`, `useUserRewards` → `getUserRewardsByAsset()`\n\n**Leaderboard:** `useLeaderboard(\"weekly\"|\"allTime\", tokenAddr)` → `getWeeklyRewards()` | `getAllTimeRewards()`\n\n**Merkl:** `useMerklCampaigns` → `getMerklCampaigns()`, `useMerklRewards` → `getClaimableRewards()`\n\n**Actions:** `useDeposit` → `prepareDepositWithApproval()`, `useRedeem` → `prepareRedeemWithApproval()`, `useApprove` → `prepareApprove()`, `useClaimMerklRewards` → `prepareClaimMerklRewards()`\n\n## Creating New Query Hooks\n\nFollow this pattern for any new query hook:\n\n```tsx\nimport { useQuery } from '@tanstack\u002Freact-query'\nimport type { VaultId } from '@yo-protocol\u002Fcore'\nimport type { Address } from 'viem'\nimport { useYoClient } from '..\u002Fcontext'\nimport { resolveVaultAddress } from '..\u002Futils\u002Fvault'\n\nexport function useNewHook(vault: Address | VaultId, options?: { enabled?: boolean }) {\n  const { enabled = true } = options ?? {}\n  const client = useYoClient()\n  const vaultAddress = resolveVaultAddress(vault)\n\n  const { data, isLoading, isError, error, refetch } = useQuery({\n    queryKey: ['yo-new-hook', vaultAddress, client?.chainId],\n    queryFn: () => {\n      if (!client) throw new Error('Client not available')\n      return client.newMethod(vaultAddress)\n    },\n    enabled: enabled && !!client,\n    staleTime: 30_000,\n  })\n\n  return { result: data, isLoading, isError, error: error ?? null, refetch }\n}\n```\n\nRules:\n\n- Query key prefix: `'yo-'` for protocol hooks, `'merkl-'` for Merkl hooks\n- Always include `client?.chainId` as last key segment\n- Guard with `enabled && !!client` (add `!!userAddress` for user-specific hooks)\n- Return `error ?? null` (not raw error)\n- User-scoped hooks should default to connected wallet via `useAccount()`\n\n## Creating New Action Hooks\n\nFollow this pattern — prepare+send with step tracking:\n\n```tsx\nimport { useCallback, useState } from 'react'\nimport { useSendTransaction, useWaitForTransactionReceipt, useAccount } from 'wagmi'\nimport { useQueryClient } from '@tanstack\u002Freact-query'\nimport { useYieldConfig, useYoClient } from '..\u002Fcontext'\n\nexport function useNewAction(options: { onSubmitted?, onConfirmed?, onError? }) {\n  const client = useYoClient()\n  const { address: account } = useAccount()\n  const { sendTransactionAsync } = useSendTransaction()\n  const queryClient = useQueryClient()\n  const [hash, setHash] = useState\u003CHash>()\n  const [step, setStep] = useState\u003Cstring>('idle')\n  const [error, setError] = useState\u003CError | null>(null)\n  const { isSuccess } = useWaitForTransactionReceipt({ hash, query: { enabled: !!hash } })\n\n  \u002F\u002F Invalidate on confirmation\n  useEffect(() => {\n    if (isSuccess && hash) {\n      queryClient.invalidateQueries({ queryKey: ['yo-relevant-key'] })\n      options.onConfirmed?.(hash)\n    }\n  }, [isSuccess, hash])\n\n  const execute = useCallback(async (params) => {\n    const txs = await client.prepareX(params)     \u002F\u002F PreparedTransaction[]\n    for (const tx of txs) {\n      const h = await sendTransactionAsync({ to: tx.to, data: tx.data, value: tx.value })\n      if (tx !== txs[txs.length - 1]) await client.waitForTransaction(h)\n    }\n  }, [client, account, sendTransactionAsync])\n\n  return { execute, step, isLoading: step !== 'idle' && step !== 'success' && step !== 'error', hash, error, reset }\n}\n```\n\n## Key Types\n\n```tsx\n\u002F\u002F Client config\ninterface YoClientConfig {\n  chainId: SupportedChainId\n  partnerId?: number\n  publicClients?: Partial\u003CRecord\u003CSupportedChainId, PublicClient>>\n}\n\n\u002F\u002F Prepared transaction (core output, wagmi input)\ninterface PreparedTransaction { to: Address; data: Hex; value: bigint }\n\n\u002F\u002F Deposit params\ninterface PrepareDepositWithApprovalParams {\n  vault: Address; token: Address; owner: Address\n  recipient?: Address; amount: bigint\n  slippageBps?: number; partnerId?: number; minShares?: bigint; chainId?: number\n}\n\n\u002F\u002F Redeem params\ninterface PrepareRedeemWithApprovalParams {\n  vault: Address; shares: bigint; owner: Address\n  recipient?: Address; slippageBps?: number; partnerId?: number; minAssetsOut?: bigint\n}\n\n\u002F\u002F Vault state\ninterface VaultState {\n  address: Address; name: string; symbol: string; decimals: number\n  totalAssets: bigint; totalSupply: bigint; asset: Address; assetDecimals: number; exchangeRate: bigint\n}\n\n\u002F\u002F User position\ninterface UserVaultPosition { shares: bigint; assets: bigint }\n```\n",{"name":5,"author":9,"source":52,"homepage":53,"description":7},"https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Ftree\u002Fmain\u002Fskills\u002Fyo-protocol-react","https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills","85ca86ba6f1e897b87386540895633537cd0567a","skills\u002Fyo-protocol-react",0,"https:\u002F\u002Fwww.yo.xyz","https:\u002F\u002Fgithub.com\u002Fyoprotocol","https:\u002F\u002Fwww.yo.xyz\u002F","The best yield in DeFi, period.","2026-06-02 15:57:30",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add yoprotocol\u002Fyo-protocol-skills --skill yo-protocol-react-sdk",{"tool":68,"command":69},"bunx","bunx skills add yoprotocol\u002Fyo-protocol-skills --skill yo-protocol-react-sdk",{"tool":71,"command":72},"pnpm","pnpm dlx skills add yoprotocol\u002Fyo-protocol-skills --skill yo-protocol-react-sdk","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Fblob\u002Fmain\u002Fskills\u002Fyo-protocol-react\u002FSKILL.md",true,[76,82],{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fhooks-api.md","REFERENCE","参考文档",13988,"https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Fblob\u002Fmain\u002Fskills\u002Fyo-protocol-react\u002Freferences\u002Fhooks-api.md",{"path":83,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fmigration.md",8398,"https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Fblob\u002Fmain\u002Fskills\u002Fyo-protocol-react\u002Freferences\u002Fmigration.md",[87,106,128,156,174,200],{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":94,"publishedAt":47},"01M6CS7MTTR71862B7EF3BS8G9","yo-protocol-sdk","ALWAYS use this skill when the user writes TypeScript or JavaScript code that imports from `@yo-protocol\u002Fcore`, uses `createYoClient`, or programmatically interacts with Yo Protocol vaults (yoETH, yoUSD, yoBTC, yoEUR, yoGOLD, yoUSDT) via the SDK. This skill covers the complete `@yo-protocol\u002Fcore` SDK: client initialization (createYoClient, multi-chain publicClients, partnerId), vault reads (getVaultState, previewDeposit, previewRedeem, isPaused), user reads (getUserPosition, getShareBalance, getTokenBalance, getAllowance), prepared transactions (prepareDepositWithApproval, prepareRedeemWithApproval, prepareApprove), REST API queries (getVaultSnapshot, getVaultYieldHistory, getVaultTvlHistory, getUserHistory, getUserPerformance), Merkl reward claims (getClaimableRewards, prepareClaimMerklRewards), and utilities (parseTokenAmount, formatTokenAmount, VAULTS registry, gateway address). Trigger for Node.js scripts, backend services, bots, Safe\u002FAA batch transaction builders, or any non-React TypeScript code that interacts with Yo Protocol. Also trigger when the user mentions the Yo gateway, PreparedTransaction, ERC-4626 vault interactions specific to Yo, or asks about vault addresses and token addresses per chain. Do NOT use for React hooks (use yo-protocol-react) or CLI shell commands (use yo-protocol-cli).","https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Fblob\u002Fmain\u002Fskills\u002Fyo-protocol-sdk\u002FSKILL.md",[93],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[28,31,29,95,96,30,97,98,99,100,101,32,102,38,37,103,35,34,104,105],"yo protocol sdk","javascript","core","code","batch","gateway","REST","transactions","queries","bots","backend services",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":115,"publishedAt":47},"01M6CS7CXA28R1NED0WTPBVGD5","yo-protocol-cli","ALWAYS use this skill when the user mentions the YO Protocol CLI, the `yo` command, `@yo-protocol\u002Fcli`, or wants to interact with YO Protocol vaults (yoETH, yoUSD, yoBTC, yoEUR, yoGOLD, yoUSDT) from a shell script, terminal, or command line. The `yo` binary is an agent-first interface for ERC-4626 yield vaults on Ethereum (1), Base (8453), and Arbitrum (42161). It outputs structured JSON to stdout, never requires or accepts private keys, and produces unsigned calldata routed through the YO Gateway — ready for Safe\u002FAA wallets and Base MCP `send_calls`. Use it for: building unsigned transactions (`yo prepare {approve,deposit,redeem,deposit-with-approval}`), reading positions and rewards (`yo position`, `yo portfolio`, `yo pending-redeems`, `yo rewards`, `yo yo-rewards`, `yo user-perf`), listing vaults and history (`yo vaults`, `yo vault`, `yo history`, `yo prices`, `yo yield`, `yo tvl`, `yo share-price`, `yo perf`, `yo leaderboard`), self-describing the command surface for an agent (`yo schema`), setting up `YO_RPC_URL`, or piping output into jq or other tools. Do NOT use for React hooks (`@yo-protocol\u002Freact`) or TypeScript SDK code (`@yo-protocol\u002Fcore`) — those have dedicated skills.","https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Fblob\u002Fmain\u002Fskills\u002Fyo-protocol-cli\u002FSKILL.md",[112],{"categoryNo":113,"categoryName":114,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[40,31,29,116,117,118,119,120,30,98,121,102,122,123,124,125,126,37,34,127],"yo protocol cli","MCP","terminal","safe","typescript","ethereum","command","portfolio","never","ready","up","self",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":143,"publishedAt":47},"01M6CS79KBBDT71057WFHMQVHC","yo-design","Create distinctive, production-grade React + Tailwind v4 interfaces in YO's dark-theme aesthetic (#000 background, #D6FF34 neon accent, Space Grotesk). Use this skill when the user asks to build web components, pages, dashboards, or applications for YO — including vault displays, DeFi interfaces, landing pages, or any UI that should follow the YO brand. Also use when the user mentions \"YO theme\", \"YO style\", \"YO brand\", or asks to style something with the neon-on-black look.","https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Fblob\u002Fmain\u002Fskills\u002Fyo-design\u002FSKILL.md",[134,135,138],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":136,"categoryName":137,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":139,"categoryName":140,"taxonomyType":141,"taxonomyTypeDesc":142},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[144,145,46,146,44,30,147,148,31,149,150,41,151,152,153,38,154,155,36,34],"design","yo design","web","web components","create","https","applications","Tailwind","brand","landing","aesthetic","tailwind v4",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":163,"publishedAt":47},"01M6CS75XVA4Y5XD6X884A8MVN","yo-base-mcp-plugin","Base MCP plugin for YO Protocol — ERC-4626 yield vaults with ERC-7540 async redemption on Ethereum (1), Base (8453), and Arbitrum (42161). Both deposit and withdraw route through the YO Gateway. Use when the user wants to view YO vaults, check positions\u002Fbalances\u002Frewards, deposit, request a redeem (instant or async), or claim Merkl rewards via Base MCP's `send_calls`. Triggers on YO Protocol, yoUSD, yoETH, yoBTC, yoEUR, yoGOLD, yoUSDT, \"deposit into yo\", \"withdraw from yo\", \"yo vault\", or \"claim yo rewards\".","https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Fblob\u002Fmain\u002Fskills\u002Fyo-base-mcp-plugin\u002FSKILL.md",[162],{"categoryNo":113,"categoryName":114,"taxonomyType":21,"taxonomyTypeDesc":22},[117,164,165,166,46,31,100,149,121,41,167,168,169,170,38,171,34,172,173,29],"plugin","base","yo base mcp plugin","instant","check","view","redemption","async","route","claim",{"skillNo":175,"name":176,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":178,"categories":179,"keywords":181,"publishedAt":47},"01M6CS71D42M6B8A0R7FGCDYY7","risk-graph","Use Risk Graph's paid agent API (`\u002Fapi\u002Fv1\u002Fagent\u002F*`) — a DeFi risk-intelligence graph covering pools, assets, protocols, and chains, monetised via the [x402](https:\u002F\u002Fx402.org) micropayment standard over USDC on Base mainnet (chain id `8453`). Every endpoint costs between $0.001 and $0.75 per call; the payer pays no gas — settlement is EIP-3009 `transferWithAuthorization` via the Coinbase CDP facilitator. Use whenever an agent needs structured, programmatic DeFi-risk data and is willing to pay per call: ranking pools by risk, comparing protocols, fetching chain-level risk signals, mapping dependency chains between pools\u002Fassets, extracting subgraphs around a node, explaining why a node is risky, or building an autonomous agent that consumes on-chain risk intelligence. Make sure to use this skill whenever the user mentions Risk Graph, risk-graph, DeFi risk score, pool risk, protocol risk, chain risk, asset risk, node risk explain, subgraph extraction, dependency chain, `\u002Fapi\u002Fv1\u002Fagent\u002F`, x402, paid agent API, USDC paywall, EIP-3009 paywall, Coinbase CDP facilitator, or building AI agents that consume on-chain risk intelligence — even if they don't explicitly name \"Risk Graph\". Triggers on mentions of Risk Graph, risk-graph API, DeFi risk scoring, x402 paywall, USDC micropayments on Base, agent-facing DeFi data, pool\u002Fprotocol\u002Fasset\u002Fchain risk lookup, dependency-graph traversal, subgraph extraction, or paid `\u002Fapi\u002Fv1\u002Fagent\u002F*` endpoints.","https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Fblob\u002Fmain\u002Fskills\u002Frisk-graph\u002FSKILL.md",[180],{"categoryNo":113,"categoryName":114,"taxonomyType":21,"taxonomyTypeDesc":22},[182,183,184,185,186,187,188,189,32,190,191,192,193,194,195,34,196,197,198,199],"graph","risk","risk graph","ai agents","risk scoring","defi","data","endpoint","why","node","autonomous","gas","dependency","cdp","x402","coinbase","scoring","intelligence",{"skillNo":201,"name":202,"nameZh":6,"description":203,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":204,"categories":205,"keywords":206,"publishedAt":47},"01M6CS6YVBG96M4AG32H5SG51F","yo-protocol-skills","Official Yo Protocol skills bundle (SDK, CLI, React)","https:\u002F\u002Fgithub.com\u002Fyoprotocol\u002Fyo-protocol-skills\u002Fblob\u002Fmain\u002FSKILL.md",[],[31,207,40,46,28,30,208,149],"yo protocol skills","official"]