Base OnchainKit just introduced Earn, a pre-built component that allows any app developer building on Base to integrate any Morpho Vaults into their apps in minutes, not weeks.

Now, anyone, regardless of their blockchain experience, can add an onchain yield component to their applications with a few snippets of code.

Why Onchain Kit, Why Morpho?

Benefits of Onchain Kit

OnchainKit streamlines onchain app development by providing a comprehensive toolkit that combines powerful onchain features with developer-friendly design:

1. Faster: takes minutes, not weeks to integrate.

2. Easier: pre-made components are simple to plug and play.

3. Safer: industry best practices packaged into ready-to-use solutions.

Integrating Morpho Vaults with Ease

Earn is a specific component within the Kit that enables any Base Builders to integrate Morpho Vaults directly into their apps, and allow users to generate interest on their assets in-app.

By leveraging Morpho, developers can avoid building their earn product from scratch, managing risks or bootstraping liquidity. This frees them to concentrate on delivering exceptional app experiences.

Potential Use Cases

Integrating Morpho Vaults allows builders to add an yield component to enrich their app's user experience:

• Passive income: allows users to earn a yield on USDC and other tokens.

• Value-added services: opening up new monetization avenues.

• Daily interactions: frequent updates boost engagement.

• User retention: active funds increase retention and value.

How Morpho Vaults Work

Morpho Vaults are the entry point for users to lend out their assets for yield.

Assets deposited in a vault are supplied to underlying Morpho Markets.

Each vault has one Curator—an entity or person who sets the risk profile of a Morpho Vault.

Morpho Vaults can be accessed permissionlessly - in the case of Onchain Kit, builders can configure the pre-built component to access Morpho Vaults directly from the App's interface.

Learn more about Morpho Vaults here.

How to integrate Morpho Vaults using OnchainKit Earn

Install OnchainKit:

npm install @coinbase/onchainkit

Set up the Provider in your app (typically in providers.tsx):

'use client';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { base } from 'wagmi/chains';

export function Providers({ children }) {
  return (
    <OnchainKitProvider
      apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
      chain={base}
    >
      {children}
    </OnchainKitProvider>
  );
}

Import the Earn component and styles:

import { Earn } from '@coinbase/onchainkit/earn';
import '@coinbase/onchainkit/styles.css';

Implement the Earn component with your vault addresses:

export default function EarnComponents() {
  const vaultAddresses = [
    '0xa0E430870c4604CcfC7B38Ca7845B1FF653D0ff1',
    '0x7BFA7C4f149E7415b73bdeDfe609237e29CBF34A'
  ];

  return (
    <div>
      {vaultAddresses.map(address => (
        <Earn vaultAddress={address} />
      ))}
    </div>
  );
}

For further customization, check out this developer doc by Onchain Kit.

Build on Based Morpho

Since Earn's release, some based builders have already launched a few concept apps to demonstrate how Earn can be integrated or be the main feature of the app:

• Tang Earn

• BuynEarn

• Crypto Defi

• Coco BTC

Integration Morpho Vaults with Onchain Kit Earn now.