use approve

Mutation hook for ERC-20 token approvals. Supports both exact amounts and unlimited (maxUint256) approval.

const { approve, approveMax, isPending, isSuccess } = useApprove({ token })

Usage

import { useApprove } from '@yo-protocol/react'
import { parseEther } from 'viem'

function ApproveButton({ token }: { token: `0x${string}` }) {
  const {
    approve,
    approveMax,
    isPending,
    isSuccess,
    hash,
    error,
    reset,
  } = useApprove({
    token,
    onSubmitted: (hash) => console.log('Approved:', hash),
  })

  return (
    <div>
      <button onClick={() => approve(parseEther('10'))} disabled={isPending}>
        {isPending ? 'Approving...' : 'Approve 10 tokens'}
      </button>
      <button onClick={approveMax} disabled={isPending}>
        Approve unlimited
      </button>

      {isSuccess && <p>Approved! Tx: {hash}</p>}
      {error && (
        <p>
          Error: {error.message}
          <button onClick={reset}>Dismiss</button>
        </p>
      )}
    </div>
  )
}

When to approve

Call approve or approveMax before the first deposit. The gateway checks allowance on-chain and will revert if it's insufficient. You can check the current allowance via YoClient.hasEnoughAllowance().

Options

Option	Type	Default	Description
token	Address	—	Required. ERC-20 token address to approve
spender	Address	YO_GATEWAY_ADDRESS	Contract that receives the allowance
onSubmitted	(hash: Hash) => void	—	Called after the transaction is sent
onConfirmed	(hash: Hash) => void	—	Called after the transaction is confirmed on-chain
onError	(error: Error) => void	—	Called on error

Return Value

Field	Type	Description
approve	(amount: bigint) => Promise<Hash>	Approve a specific token amount
approveMax	() => Promise<Hash>	Approve maxUint256 (unlimited)
isPending	boolean	true while the transaction is being sent or confirmed
isError	boolean	true if the transaction failed
error	Error | null	Error object
isSuccess	boolean	true after the transaction is confirmed on-chain
hash	Hash | undefined	Transaction hash once submitted
reset	() => void	Reset all state back to idle

Behavior

Behavior	Detail
Default spender	Defaults to YO_GATEWAY_ADDRESS — the standard deposit entry point
Confirmation tracking	Uses useWaitForTransactionReceipt internally
Error propagation	Fires both the local onError callback and the global YieldProvider.onError handler