Skip to content
Get help

<Earn />

The Earn component provides a simple interface for earning interest on your crypto via Morpho vaults on Base.

Prerequisites

Before using the Earn component, ensure you've completed the Getting Started steps.

Starting a new project

If you're starting a new project, we recommend using create onchain to scaffold your project.

npm create onchain@latest

Adding to an existing project

If you're adding Earn to an existing project, simply install OnchainKit.

npm
npm install @coinbase/onchainkit

Wrap the <OnchainKitProvider /> around your app, following the steps in Getting Started.

Quickstart

To use Earn, you'll need to provide a vaultAddress prop. A vault address can be obtained from Morpho's Vaults page.

import { Earn } from '@coinbase/onchainkit/earn'; 
 
<Earn vaultAddress="0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A" />

Customization

Custom components and layouts

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.

import { Earn, EarnDeposit } from '@coinbase/onchainkit/earn';
 
<Earn vaultAddress="0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A">
  <div>Custom header</div>
  <EarnDeposit />
  <div>Custom footer</div>
</Earn>

For more granular control, you can also render lower level subcomponents within EarnDeposit and EarnWithdraw. These subcomponents accept className props to customize their styles.

import { Earn,
        EarnDeposit,
        EarnDetails,
        DepositBalance,
        DepositAmountInput,
        DepositButton } from '@coinbase/onchainkit/earn';
 
<Earn vaultAddress="0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A">
  <EarnDeposit>
    <EarnDetails />
    <DepositBalance />
    <DepositAmountInput className="border-2 border-green-400" />
    <DepositButton />
  </EarnDeposit>
</Earn>

Customizing styles

The Earn component is best styled via a OnchainKit theme. You can also override individual component styles using className.

Advanced Usage

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.

index.tsx
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.

Examples

Sponsoring transactions

To sponsor transactions, you can use the isSponsored prop.

<Earn vaultAddress="0x7BfA7C4f149E7415b73bdeDfe609237e29CBF34A" isSponsored />

Ensure that your OnchainKitProvider has a paymaster configured:

<OnchainKitProvider
  config={{ 
    paymaster: process.env.PAYMASTER_ENDPOINT, 
  }} 
>

Components

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.

Hooks

Props