Earn interest on your crypto with OnchainKit
The Earn
component provides a simple interface for earning interest on your crypto via Morpho vaults on Base.
Before using the Earn
component, ensure you’ve completed the Getting Started steps.
If you’re starting a new project, we recommend using create onchain
to scaffold your project.
If you’re adding Earn
to an existing project, simply install OnchainKit.
Wrap the <OnchainKitProvider />
around your app, following the steps in Getting Started.
To use Earn
, you’ll need to provide a vaultAddress
prop. A vault address can be obtained from Morpho’s Vaults page.
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.
The Earn
component is best styled via a OnchainKit theme. You can also override individual component styles using className
.
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.
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.
To sponsor transactions, you can use the isSponsored
prop.
Ensure that your OnchainKitProvider
has a paymaster
configured:
If you have a contract allowlist set on Coinbase Developer Platform, you’ll need to ensure that the following contract functions are allowed:
deposit
on the Morpho vaultredeem
on the Morpho vaultapprove
on the token being depositedThe 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.useEarnContext
- A hook that provides the context values of the Earn
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.LifecycleStatus
EarnReact
EarnProviderReact
EarnContextType
EarnAmountInputReact
DepositAmountInputReact
WithdrawAmountInputReact
EarnBalanceReact
DepositBalanceReact
WithdrawBalanceReact
EarnDepositReact
EarnWithdrawReact
EarnDetailsReact
DepositButtonReact
WithdrawButtonReact