Morpho Integration - Coinbase Developer Documentation

Overview

This guide shows how to integrate a Morpho vault with CDP user wallets so your users can deposit tokens to earn yield and withdraw them, without leaving your application. Morpho vaults are ERC-4626 tokenized wrappers that automatically allocate deposits across multiple Morpho Blue lending markets. This guide uses the Steakhouse USDC vault on Base.

Morpho Documentation

Learn more about Morpho Blue markets, vaults, and protocol mechanics.

Non-custodial Wallets

CDP non-custodial wallet overview

What you’ll build

Authenticate users and create user wallets with CDP hooks
Deposit USDC into a Morpho vault to earn yield
Withdraw USDC from the vault
Read a user’s vault position

Prerequisites

A CDP project with your domain configured
Node.js 24+

Installation

Create a React project and install dependencies:

npm create vite@latest cdp-morpho-app -- --template react-ts
cd cdp-morpho-app

pnpm create vite@latest cdp-morpho-app --template react-ts
cd cdp-morpho-app

yarn create vite cdp-morpho-app --template react-ts
cd cdp-morpho-app

Install CDP packages and viem:

npm install @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks viem

pnpm install @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks viem

yarn add @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks viem

Provider setup

Wrap your app with CDPReactProvider:

main.tsx

import { CDPReactProvider } from "@coinbase/cdp-react";

createRoot(document.getElementById("root")!).render(
  <CDPReactProvider
    config={{
      projectId: "YOUR_CDP_PROJECT_ID",
      // Use "smart" for gasless transactions via CDP Paymaster
      // Use "eoa" for standard EOA wallets
      ethereum: { createOnLogin: "smart" },
      appName: "Morpho Vault guide",
    }}
  >
    <App />
  </CDPReactProvider>
);

Configuration

Define the vault and token addresses, and a public client for reading onchain data:

morpho.ts

import {
  createPublicClient,
  http,
  encodeFunctionData,
  parseAbi,
  parseUnits,
  formatUnits,
  maxUint256,
  type Address,
} from "viem";
import { base } from "viem/chains";

// Steakhouse USDC vault on Base
const VAULT_ADDRESS: Address = "0xbeeF010f9cb27031ad51e3333f9aF9C6B1228183";
// USDC on Base
const USDC_ADDRESS: Address = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913";

const publicClient = createPublicClient({
  chain: base,
  transport: http(),
});

Deposit

Before depositing, the user must approve the vault to spend their USDC. Then call deposit with the amount and receiver address.

morpho.ts

import { useEvmAddress, useSendEvmTransaction } from "@coinbase/cdp-hooks";

const { evmAddress } = useEvmAddress();
const { sendEvmTransaction } = useSendEvmTransaction();

// Step 1: Approve the vault to spend USDC (one-time)
const approveData = encodeFunctionData({
  abi: parseAbi(["function approve(address spender, uint256 amount) returns (bool)"]),
  functionName: "approve",
  args: [VAULT_ADDRESS, maxUint256],
});

await sendEvmTransaction({
  evmAccount: evmAddress,
  network: "base",
  transaction: {
    to: USDC_ADDRESS,
    data: approveData,
    chainId: 8453,
  },
});

// Step 2: Deposit USDC into the vault
const amount = parseUnits("100", 6); // 100 USDC

const depositData = encodeFunctionData({
  abi: parseAbi(["function deposit(uint256 assets, address receiver) returns (uint256 shares)"]),
  functionName: "deposit",
  args: [amount, evmAddress],
});

const { transactionHash } = await sendEvmTransaction({
  evmAccount: evmAddress,
  network: "base",
  transaction: {
    to: VAULT_ADDRESS,
    data: depositData,
    chainId: 8453,
  },
});

Withdraw

To withdraw, call withdraw with the amount of underlying USDC to receive:

morpho.ts

const amount = parseUnits("10", 6); // 10 USDC

const withdrawData = encodeFunctionData({
  abi: parseAbi([
    "function withdraw(uint256 assets, address receiver, address owner) returns (uint256 shares)",
  ]),
  functionName: "withdraw",
  args: [amount, evmAddress, evmAddress],
});

const { transactionHash } = await sendEvmTransaction({
  evmAccount: evmAddress,
  network: "base",
  transaction: {
    to: VAULT_ADDRESS,
    data: withdrawData,
    chainId: 8453,
  },
});

To withdraw the entire position, use redeem with all vault shares instead:

morpho.ts

const shares = await publicClient.readContract({
  address: VAULT_ADDRESS,
  abi: parseAbi(["function balanceOf(address owner) view returns (uint256)"]),
  functionName: "balanceOf",
  args: [evmAddress],
});

const redeemData = encodeFunctionData({
  abi: parseAbi([
    "function redeem(uint256 shares, address receiver, address owner) returns (uint256 assets)",
  ]),
  functionName: "redeem",
  args: [shares, evmAddress, evmAddress],
});

Check position

Read the user’s vault share balance and convert it to the underlying USDC value:

morpho.ts

async function getPosition(userAddress: Address) {
  const shares = await publicClient.readContract({
    address: VAULT_ADDRESS,
    abi: parseAbi(["function balanceOf(address owner) view returns (uint256)"]),
    functionName: "balanceOf",
    args: [userAddress],
  });

  const assets = await publicClient.readContract({
    address: VAULT_ADDRESS,
    abi: parseAbi(["function convertToAssets(uint256 shares) view returns (uint256)"]),
    functionName: "convertToAssets",
    args: [shares],
  });

  return {
    shares,
    assets,
    formatted: formatUnits(assets, 6),
  };
}

Using other vaults

This code works with any ERC-4626 Morpho vault. To use a different vault:

Replace VAULT_ADDRESS with the target vault’s address
Replace USDC_ADDRESS with the vault’s underlying token
Update the parseUnits/formatUnits decimals to match the token.

Browse available vaults here.

​Overview

Morpho Documentation

Non-custodial Wallets

​What you’ll build

​Prerequisites

​Installation

​Provider setup

​Configuration

​Deposit

​Withdraw

​Check position

​Using other vaults

Overview

What you’ll build

Prerequisites

Installation

Provider setup

Configuration

Deposit

Withdraw

Check position

Using other vaults