> ## Documentation Index > Fetch the complete documentation index at: https://base-a060aa97-docs-use-case-ia-overhaul.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Integrate an Earn Product > Give users a one-deposit USDC earn experience with Morpho or Moonwell vaults on Base. export const DeFiDemo = ({flow}) => { const sans = "'Base Sans','Inter Tight',Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif"; const mono = "'Base Mono','Roboto Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace"; const c = { bg: "var(--dd-bg)", panel: "var(--dd-panel)", border: "var(--dd-border)", console: "var(--dd-console)", text: "var(--dd-text)", body: "var(--dd-body)", muted: "var(--dd-muted)", dim: "var(--dd-dim)", accent: "var(--dd-accent)", accentContrast: "var(--dd-accent-contrast)", accentSoft: "var(--dd-accent-soft)", success: "var(--dd-success)", successSoft: "var(--dd-success-soft)", error: "var(--dd-error)" }; const ok = (name, detail) => ({ kind: "ok", name, detail: detail || "" }); const err = (name, detail) => ({ kind: "err", name, detail: detail || "" }); const nfo = (name, detail) => ({ kind: "info", name, detail: detail || "" }); const glyph = { lend: , borrow: <>, earn: <> }; const Icon = ({k, size}) => {glyph[k]}; const freshSim = () => ({ metrics: [] }); const FLOWS = { lend: { label: "Lend", title: "Supply assets to a lending market", footer: "Illustrative only · rates and liquidity vary by market.", steps: [{ text: "A user has 1,000 USDC available in their wallet.", action: "Load wallet", run: s => { s.metrics = [{ label: "Wallet", value: "1,000 USDC" }, { label: "Supplied", value: "0 USDC" }]; return { entries: [nfo("wallet balance", "1,000 USDC")] }; } }, { text: "Approve the market and supply the USDC from the user's wallet.", action: "Supply USDC", run: s => { s.metrics = [{ label: "Wallet", value: "0 USDC" }, { label: "Supplied", value: "1,000 USDC" }, { label: "Supply APY", value: "4.2% variable" }]; return { entries: [ok("approve", "1,000 USDC"), ok("supply", "1,000 USDC")], caption: "The wallet now owns a direct protocol position." }; } }, { text: "The supplied position accrues illustrative variable interest.", action: "Accrue 30 days", run: s => { s.metrics = [{ label: "Wallet", value: "0 USDC" }, { label: "Supplied", value: "1,003.45 USDC" }, { label: "Supply APY", value: "4.2% variable" }]; return { entries: [ok("position updated", "+3.45 USDC")], caption: "Actual rates change with market utilization." }; } }, { text: "Withdraw the available position back to the user's wallet.", action: "Withdraw", run: s => { s.metrics = [{ label: "Wallet", value: "1,003.45 USDC" }, { label: "Supplied", value: "0 USDC" }]; return { entries: [ok("withdraw", "1,003.45 USDC")], caption: "Withdrawals depend on available market liquidity." }; } }] }, borrow: { label: "Borrow", title: "Borrow against supplied collateral", footer: "Illustrative only · liquidation parameters differ by protocol and market.", steps: [{ text: "A user supplies 2 WETH as collateral at an illustrative $2,500 price.", action: "Supply collateral", run: s => { s.metrics = [{ label: "Collateral", value: "2 WETH · $5,000" }, { label: "Debt", value: "0 USDC" }, { label: "Health factor", value: "—" }]; return { entries: [ok("supply collateral", "2 WETH"), ok("collateral enabled", "WETH")], caption: "The collateral remains exposed to market price changes." }; } }, { text: "Borrow 2,000 USDC against the collateral.", action: "Borrow USDC", run: s => { s.metrics = [{ label: "Collateral", value: "2 WETH · $5,000" }, { label: "Debt", value: "2,000 USDC" }, { label: "Health factor", value: "2.00", tone: "ok" }]; return { entries: [ok("borrow", "2,000 USDC"), nfo("health factor", "2.00")], caption: "A higher health factor provides more room before liquidation." }; } }, { text: "WETH falls to an illustrative $1,500 while the debt remains unchanged.", action: "Simulate price drop", run: s => { s.metrics = [{ label: "Collateral", value: "2 WETH · $3,000" }, { label: "Debt", value: "2,000 USDC" }, { label: "Health factor", value: "1.20", tone: "warn" }]; return { entries: [err("risk increased", "health factor 2.00 → 1.20")], caption: "At or below the protocol's liquidation threshold, collateral can be sold to repay debt." }; } }] }, earn: { label: "Earn", title: "Embed a vault-based earn product", footer: "Illustrative only · vault yield is variable and not guaranteed.", steps: [{ text: "A user has 1,000 USDC and chooses a curated vault in your app.", action: "Select vault", run: s => { s.metrics = [{ label: "Wallet", value: "1,000 USDC" }, { label: "Vault shares", value: "0" }, { label: "Redeemable", value: "0 USDC" }]; return { entries: [nfo("vault selected", "USDC · variable yield")], caption: "The vault abstracts the underlying market allocation." }; } }, { text: "Deposit once and receive shares that represent the vault position.", action: "Deposit USDC", run: s => { s.metrics = [{ label: "Wallet", value: "0 USDC" }, { label: "Vault shares", value: "1,000" }, { label: "Share price", value: "$1.00" }, { label: "Redeemable", value: "1,000 USDC" }]; return { entries: [ok("approve", "1,000 USDC"), ok("deposit", "1,000 USDC → 1,000 shares")], caption: "The user holds vault shares instead of managing each market position." }; } }, { text: "As the vault earns, each share becomes redeemable for more USDC.", action: "Accrue value", run: s => { s.metrics = [{ label: "Wallet", value: "0 USDC" }, { label: "Vault shares", value: "1,000" }, { label: "Share price", value: "$1.01" }, { label: "Redeemable", value: "1,010 USDC", tone: "ok" }]; return { entries: [ok("share value updated", "$1.00 → $1.01"), nfo("redeemable assets", "1,010 USDC")], caption: "Actual vault performance can rise or fall and depends on its strategy." }; } }] } }; const order = ["lend", "borrow", "earn"]; const pinned = flow ? FLOWS[flow] ? flow : order[0] : null; const [active, setActive] = useState(pinned || "lend"); const [sim, setSim] = useState(freshSim); const [results, setResults] = useState([]); const f = FLOWS[active] || FLOWS.lend; const stepIndex = results.length; const done = stepIndex >= f.steps.length; const pct = Math.round(stepIndex / f.steps.length * 100); const select = k => { setActive(k); setSim(freshSim()); setResults([]); }; const reset = () => { setSim(freshSim()); setResults([]); }; const runStep = () => { if (done) return; const s = { metrics: sim.metrics.map(metric => ({ ...metric })) }; const out = f.steps[stepIndex].run(s) || ({ entries: [] }); setSim(s); setResults(r => [...r, out]); }; return
{}
{}
Interactive demo · illustrative simulation {f.title}
{Math.min(stepIndex, f.steps.length)}/{f.steps.length} {results.length > 0 && }
{} {!pinned &&
{order.map(k => )}
} {}
{f.steps.map((step, i) => { const state = i < stepIndex ? "done" : i === stepIndex ? "now" : "future"; const res = results[i]; const last = i === f.steps.length - 1; return
{}
{state === "done" ? : i + 1} {!last &&
}
{}
{step.text} {state !== "done" && }
{res &&
{res.entries.map((e, j) =>
{e.kind === "ok" && } {e.kind === "err" && } {e.kind === "info" && } {e.name} {e.detail && · {e.detail}}
)} {res.caption &&
{res.caption}
}
}
; })} {} {sim.metrics.length > 0 &&
Illustrative position
{sim.metrics.map(metric => {metric.label}{metric.value} )}
}
{}
{f.footer}
{done && Flow complete }
; }; Embed a vault-based earn product through third-party protocols on Base. The user deposits once and receives vault shares; the vault abstracts its underlying market allocations while your app shows current redeemable value and risk. #### Demo ## Deposit into a USDC vault Both examples use `viem@2.55.11` and `@morpho-org/morpho-sdk@5.4.1`. The Moonwell tab also uses `@moonwell-fi/moonwell-sdk@0.22.0` for its maintained deployment addresses. Deposit into Steakhouse Prime USDC, a Morpho Vault V2 on Base. Treat the address as pinned configuration and review it whenever you upgrade the integration. ```ts deposit-morpho-vault.ts lines wrap highlight={11-15,25-27} theme={null} import { isRequirementSignature, morphoViemExtension, } from '@morpho-org/morpho-sdk'; import { parseUnits } from 'viem'; import { base } from 'viem/chains'; const vaultAddress = '0xBEeF0e0834849Acc03F0089F01F4F1EeB06873c9'; const user = walletClient.account.address; const client = publicClient.extend(morphoViemExtension()); const vault = client.morpho.vaultV2(vaultAddress, base.id); const action = await vault.deposit({ amount: parseUnits('1000', 6), userAddress: user, vaultData: await vault.getData(), }); const signatures = []; for (const requirement of await action.getRequirements()) { if (isRequirementSignature(requirement)) { signatures.push(await requirement.sign(walletClient, user)); } else { const hash = await walletClient.sendTransaction(requirement); await publicClient.waitForTransactionReceipt({ hash }); } } const request = action.buildTx(signatures); await publicClient.call({ account: user, ...request }); const hash = await walletClient.sendTransaction(request); await publicClient.waitForTransactionReceipt({ hash }); ``` Use Moonwell's maintained SDK to resolve the Flagship USDC Vault V2 address, then build the deposit with the Morpho vault SDK. ```ts deposit-moonwell-vault.ts lines wrap highlight={10-16,26-28} theme={null} import { createMoonwellClient } from '@moonwell-fi/moonwell-sdk'; import { isRequirementSignature, morphoViemExtension, } from '@morpho-org/morpho-sdk'; import { parseUnits } from 'viem'; import { base } from 'viem/chains'; const moonwell = createMoonwellClient({ networks: { base: { rpcUrls: ['https://mainnet.base.org'] } }, }); const vaultAddress = moonwell.environments.base.tokens.mwUSDC.address; const user = walletClient.account.address; const client = publicClient.extend(morphoViemExtension()); const vault = client.morpho.vaultV2(vaultAddress, base.id); const action = await vault.deposit({ amount: parseUnits('1000', 6), userAddress: user, vaultData: await vault.getData(), }); const signatures = []; for (const requirement of await action.getRequirements()) { if (isRequirementSignature(requirement)) { signatures.push(await requirement.sign(walletClient, user)); } else { const hash = await walletClient.sendTransaction(requirement); await publicClient.waitForTransactionReceipt({ hash }); } } const request = action.buildTx(signatures); await publicClient.call({ account: user, ...request }); const hash = await walletClient.sendTransaction(request); await publicClient.waitForTransactionReceipt({ hash }); ``` Vault yield is variable and not guaranteed. Review the curator, allocation strategy, fees, withdrawal liquidity, and smart-contract risk before listing a vault, and show users the current share-to-asset value rather than a fixed return. ## See also * [Integrate lending](/build-on-base/integrate-defi/integrate-lending) · [Integrate borrowing](/build-on-base/integrate-defi/integrate-borrowing) * [Integrate DeFi overview](/get-started/integrate-defi)