<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 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.
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 achildren
prop to render custom components and providesuseEarnContext
to access the context values.<EarnProvider />
- A headless provider that provides theuseEarnContext
hook to theEarn
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
useEarnContext
- A hook that provides the context values of theEarn
component.useBuildDepositToMorphoTx
- A hook that builds a deposit transaction to Morpho.useBuildWithdrawFromMorphoTx
- A hook that builds a withdraw transaction from Morpho.useMorphoVault
- A hook that provides the details of a Morpho vault.