> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gelato.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Morpho

Integrate crypto-backed loans into your app using Gelato’s Gasless 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.

<Note>
  This guide assumes you're using React + TypeScript.
</Note>

## 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

<img src="https://mintcdn.com/gelato-6540eeb1/8BeiyOhSgNF7mtMT/images/morpho-demo-login.png?fit=max&auto=format&n=8BeiyOhSgNF7mtMT&q=85&s=4100049cf6b90f2b1ee18a364571b135" alt="Smart Wallet Onboarding" width="2304" height="1250" data-path="images/morpho-demo-login.png" />

### Code Snippet

Embed the following setup within your app to configure the provider:

```typescript theme={null}
<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>
```

This context enables smart wallet access throughout your app, setting up:

* Wallet creation and session
* Transaction preparation and sending
* Provider availability across your components

```typescript theme={null}
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

<img src="https://mintcdn.com/gelato-6540eeb1/8BeiyOhSgNF7mtMT/images/morpho-demo-supply-earn.png?fit=max&auto=format&n=8BeiyOhSgNF7mtMT&q=85&s=1b46de5532c15b95cc50560470779c74" alt="Supply & Earn Flow" width="2304" height="1273" data-path="images/morpho-demo-supply-earn.png" />

### Code Snippet

```typescript theme={null}
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();
```

Users never sign a transaction or pay gas. All logic executes onchain using their smart account.

## 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

<img src="https://mintcdn.com/gelato-6540eeb1/8BeiyOhSgNF7mtMT/images/morpho-demo-borrow.png?fit=max&auto=format&n=8BeiyOhSgNF7mtMT&q=85&s=48d2af0d17b68b365aaece25e037e673" alt="Borrow Flow" width="2304" height="1464" data-path="images/morpho-demo-borrow.png" />

### Code Snippet

```typescript theme={null}
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

{(() => {
const featuresData = [
  { 
    feature: "Smart wallet onboarding (social/email)", 
    available: "Yes" 
  },
  { 
    feature: "Embedded supply to Morpho vaults", 
    available: "Yes" 
  },
  { 
    feature: "Embedded borrow against crypto", 
    available: "Yes" 
  },
  { 
    feature: "Gasless transactions via Gelato", 
    available: "Yes" 
  },
  { 
    feature: "Fully onchain, no custody", 
    available: "Yes" 
  }
];

return (
  <div className="w-full max-w-4xl mx-auto">
    <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
      <div className="flex w-full bg-gray-50 dark:bg-gray-900">
        <div className="flex-1 py-4 px-6 font-semibold text-gray-800 dark:text-white text-sm sm:text-base text-left">
          Feature
        </div>
        <div className="flex-1 py-4 px-6 font-semibold text-gray-800 dark:text-white text-sm sm:text-base text-center">
          Available Now
        </div>
      </div>
      
      {featuresData.map((item, index) => (
        <div
          key={index}
          className="flex w-full border-b border-gray-100 dark:border-gray-800"
        >
          <div className="flex-1 py-4 px-6 text-gray-700 dark:text-gray-300 text-sm sm:text-base text-left">
            {item.feature}
          </div>
          <div className="flex-1 py-4 px-6 text-green-600 dark:text-green-400 font-medium text-sm sm:text-base text-center">
            {item.available}
          </div>
        </div>
      ))}
    </div>
  </div>
);
})()}

## 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.