Integrate crypto-backed loans into your app using Gelato’s Smart Wallet SDK and Morpho’s lending protocol. This guide walks you through setting up embedded wallet onboarding and implementing both the Supply/Earn and Borrow flows.
This guide assumes you’re using React + TypeScript.
Smart Wallet Onboarding Setup
Before users can supply or borrow assets, they must onboard into a Smart Wallet via a frictionless embedded flow. Powered by Gelato’s SDK and Dynamic, users can create smart accounts using just their email, social login, or passkeys — no browser extensions or seed phrases needed.
Key Features of Embedded Wallets
- EIP-7702 & ERC-4337 compliant
- Supports gasless transactions (sponsored execution)
- Runs across 50+ EVM chains
- Session-based login — no need to reconnect every time
Code Snippet
Embed the following setup within your app to configure the provider:
<GelatoSmartWalletContextProvider
settings={{
scw: {
type: "gelato",
},
apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
waas: dynamic(
process.env.NEXT_PUBLIC_MORPHO_DYNAMIC_ENVIRONMENT_ID as string
),
wagmi: wagmi({
chains: [baseSepolia],
transports: {
[baseSepolia.id]: http(),
},
}),
}}
>
<QueryClientProvider client={queryClient}>
<ActivityLogProvider>
<RouteGuard>
{children}
<Toaster />
</RouteGuard>
</ActivityLogProvider>
</QueryClientProvider>
</GelatoSmartWalletContextProvider>
- Wallet creation and session
- Transaction preparation and sending
- Provider availability across your components
const { gelato: { client }, logout} = useGelatoSmartWalletProviderContext();
Part 1: Supply & Earn
Allow users to supply assets (e.g., USDC) and earn yield in Morpho’s vaults — fully onchain, without user signatures or gas fees.
Flow Overview
- Approve vault to spend USDC
- Deposit USDC to Morpho vault
- Optionally, record stats to external tracking contract
Code Snippet
const calls = [
{
to: USDC_ADDRESS,
data: encodeFunctionData({
abi: tokenABI,
functionName: "approve",
args: [MORPHO_VAULT_ADDRESS, parseUnits(amount, 6)],
}),
},
{
to: MORPHO_VAULT_ADDRESS,
data: encodeFunctionData({
abi: morphoVaultABI,
functionName: "deposit",
args: [parseUnits(amount, 6), smartWallet.address],
}),
},
{
to: VAULT_STATS_ADDRESS,
data: encodeFunctionData({
abi: vaultStatsABI,
functionName: "deposit",
args: [parseUnits(amount, 6), userAssets, totalAssets],
}),
},
];
const response = await smartWalletClient.execute({
payment: sponsored(GELATO_API_KEY),
calls,
});
console.log("userOp Hash", response.id);
const txHash = await response.wait();
Part 2: Borrow
Let users borrow stablecoins (like USDC) using crypto collateral (cbBTC) — trustless, non-custodial, and instant.
Flow Overview
- Approve Morpho to move collateral
- Supply collateral to Morpho
- Borrow USDC
Code Snippet
const approveCall = {
to: COLLATERAL_TOKEN_ADDRESS,
data: encodeFunctionData({
abi: tokenABI,
functionName: "approve",
args: [MORPHO_MARKET_ADDRESS, collateralAmount],
}),
};
const supplyCollateralCall = {
to: MORPHO_MARKET_ADDRESS,
data: encodeFunctionData({
abi: morphoABI,
functionName: "supplyCollateral",
args: [marketParams, collateralAmount, smartWallet.address, "0x"],
}),
};
const borrowCall = {
to: MORPHO_MARKET_ADDRESS,
data: encodeFunctionData({
abi: morphoABI,
functionName: "borrow",
args: [
marketParams,
borrowAmount,
BigInt(0),
smartWallet.address,
smartWallet.address,
],
}),
};
const response = await smartWalletClient.execute({
payment: sponsored(GELATO_API_KEY),
calls: [approveCall, supplyCollateralCall, borrowCall]
});
console.log("userOp Hash", response.id);
const txHash = await response.wait();
Summary
What You Can Build
Using these flows, your app can now offer:
- Embedded lending dashboards
- Crypto credit lines
- Non-custodial stablecoin loans
- Yield vault integrations
- Composable DeFi automations
You get the power of Morpho and the abstraction of Gelato — without the overhead of building wallets, managing custody, or dealing with onchain UX friction. 
