Earn accepts a children prop that can be used to render Earn subcomponents or custom components.For instance, you can render the EarnDeposit component by itself within the Earn component, along with any other custom components you’d like to render.
For more granular control, you can also render lower level subcomponents within EarnDeposit and EarnWithdraw. These subcomponents accept className props to customize their styles.
If you’d like to implement your own custom components, you can use useEarnContext within an Earn component to access context and build your own components.You can find the full interface for EarnContextType on the Types page.Below, we use useEarnContext to implement a custom deposit interface by using useEarnContext to access the depositAmount and setDepositAmount context values.
import { Earn, useEarnContext } from '@coinbase/onchainkit/earn';import { CustomDepositButtons } from '@/custom-deposit-buttons'; <Earn vaultAddress="0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A"> <CustomDepositButtons /> </Earn>
Taking advantage of the data and methods provided by useEarnContext, developers can implement fully custom deposit and withdraw interfaces, modifying everything from UI elements to input behavior.
The Earn component includes the following subcomponents:
<Earn /> - A fully built Withdraw and Deposit component. Also includes a children prop to render custom components and provides useEarnContext to access the context values.
<EarnProvider /> - A headless provider that provides the useEarnContext hook to the Earn component.
<EarnDeposit /> - A fully built deposit card.
<EarnWithdraw /> - A fully built withdraw card.
<EarnDetails /> - A component that displays the details of the vault.
<DepositAmountInput /> - A component that handles the deposit amount input.
<DepositBalance /> - A component that displays the balance underlying asset in the user’s wallet.
<DepositButton /> - A component that triggers the deposit transaction.
<WithdrawAmountInput /> - A component that handles the withdraw amount input.
<WithdrawBalance /> - A component that displays how much the user can withdraw from a vault.
<WithdrawButton /> - A component that triggers the withdraw transaction.
<YieldDetails /> - A component that displays the yield details of the vault.
<VaultDetails /> - A component that displays the vault details.
type EarnProps = { children?: React.ReactNode; className?: string; vaultAddress: Address; isSponsored?: boolean; /** An optional callback function that handles errors within the provider. */ onError?: (error: TransactionError) => void; /** An optional callback function that exposes the component lifecycle state */ onStatus?: (lifecycleStatus: LifecycleStatus) => void; /** An optional callback function that exposes the transaction receipt */ onSuccess?: (transactionReceipt?: TransactionReceipt) => void;};
type EarnProviderProps = { children: React.ReactNode; vaultAddress: Address; isSponsored?: boolean; /** An optional callback function that handles errors within the provider. */ onError?: (error: TransactionError) => void; /** An optional callback function that exposes the component lifecycle state */ onStatus?: (lifecycleStatus: LifecycleStatus) => void; /** An optional callback function that exposes the transaction receipt */ onSuccess?: (transactionReceipt?: TransactionReceipt) => void;};
type EarnContextType = { /** Warns users if vault address is invalid */ error: Error | null; recipientAddress?: Address; /** Balance of the underlying asset in the user's wallet, converted to the asset's decimals */ walletBalance?: string; /** Status of the wallet balance fetch */ walletBalanceStatus: 'pending' | 'success' | 'error'; refetchWalletBalance: () => void; vaultAddress: Address; /** The token that is being deposited or withdrawn (the underlying asset of the vault) */ vaultToken: Token | undefined; vaultName: string | undefined; /** Total deposits in the vault */ deposits: string | undefined; /** Total liquidity (available to borrow) in the vault */ liquidity: string | undefined; /** Total APY of the vault, including rewards */ apy: number | undefined; nativeApy: UseMorphoVaultReturnType['nativeApy']; vaultFee: UseMorphoVaultReturnType['vaultFee']; /** Rewards earned by the user in the vault */ rewards: UseMorphoVaultReturnType['rewards']; /** The amount of underlying asset that has been deposited in the vault by the connected user */ depositedBalance?: string; /** Whether the deposited balance is being fetched */ depositedBalanceStatus: 'pending' | 'success' | 'error'; refetchDepositedBalance: () => void; /** Interest earned by the user in the vault */ interestEarned?: string; /** Amount that the user has typed into the deposit amount input */ depositAmount: string; setDepositAmount: (amount: string) => void; depositAmountError: string | null; depositCalls: Call[]; /** Amount that the user has typed into the withdraw amount input */ withdrawAmount: string; setWithdrawAmount: (amount: string) => void; withdrawAmountError: string | null; withdrawCalls: Call[]; lifecycleStatus: LifecycleStatus; updateLifecycleStatus: ( status: LifecycleStatusUpdate<LifecycleStatus>, ) => void;};
