Guide: Integrating One-Click Yield with OnchainKit

┌───────────┐
│ End User  │
└───────────┘
      │
      │ Interacts with
      ▼
┌──────────────────┐
│ Your Application │
└──────────────────┘
      │
      │ Uses
      ▼
┌────────────────────┐
│ OnchainKit         │
│ <Earn /> Component │
└────────────────────┘
      │
      │ 1. Connects Wallet
      │ 2. Builds & Sponsors Transaction (via Paymaster)
      ▼
┌──────────────────┐
│   Base Chain     │
└──────────────────┘
      │
      │ Executes atomic deposit call
      ▼
┌──────────────────┐
│ Morpho Vault     │
│   (deposit)      │
└──────────────────┘

// components/SimpleEarnComponent.tsx
import { Earn } from '@coinbase/onchainkit/earn';
import { MORPHO_USDC_VAULT_ADDRESS } from '../constants';
 
export const SimpleEarnComponent = () => {
  return (
    <div style={{ width: '100%', maxWidth: '420px', margin: 'auto' }}>
      <Earn 
        vaultAddress={MORPHO_USDC_VAULT_ADDRESS}
        // This prop enables gas-sponsored transactions via your Paymaster
        isSponsored 
      />
    </div>
  );
};

// components/CustomEarnComponent.tsx
import React, { useCallback } from 'react';
import { useAccount } from 'wagmi';
import { 
  Earn,
  useEarnContext, 
  buildDepositToMorphoTx, 
} from '@coinbase/onchainkit/earn';
import { Transaction } from '@coinbase/onchainkit/transaction';
import { parseUnits } from 'viem';
import { MORPHO_USDC_VAULT_ADDRESS } from '../constants';
 
// A custom UI that uses the underlying context from the <Earn> provider
const CustomDepositUI = () => {
  const { address } = useAccount();
 
  // useEarnContext gives you all the data you need about the vault
  const { 
    apy, 
    vaultToken, 
    setDepositAmount, 
    depositAmount 
  } = useEarnContext();
 
  // This function prepares the transaction calls.
  // It's passed to the <Transaction> component, which handles execution.
  const buildCalls = useCallback(async () => {
    if (!address || !depositAmount || parseFloat(depositAmount) === 0) return [];
 
    const parsedAmount = parseUnits(depositAmount, vaultToken.decimals);
    
    // OnchainKit's helper function builds the necessary `approve` and `deposit` calls.
    const calls = await buildDepositToMorphoTx({
      vaultAddress: MORPHO_USDC_VAULT_ADDRESS,
      tokenAddress: vaultToken.address,
      amount: parsedAmount,
      recipientAddress: address,
    });
 
    return calls;
  }, [address, depositAmount, vaultToken]);
 
  return (
    <div>
      <h3>Custom Deposit for {vaultToken.symbol}</h3>
      <p>APY: {(apy * 100).toFixed(2)}%</p>
      <input
        type="text"
        placeholder={`Amount in ${vaultToken.symbol}`}
        onChange={(e) => setDepositAmount(e.target.value)}
      />
      
      {/* 
        The <Transaction> component is a declarative wrapper.
        It takes the `buildCalls` function and handles the button state,
        transaction submission, and waiting states for you.
      */}
      <Transaction
        calls={buildCalls}
        isSponsored
      >
        <button>Deposit Now</button>
      </Transaction>
    </div>
  );
};
 
// You must wrap your custom UI with the <Earn> component to provide the context.
export const CustomEarnComponent = () => {
  return (
    <Earn vaultAddress={MORPHO_USDC_VAULT_ADDRESS}>
      <CustomDepositUI />
    </Earn>
  );
};