Guide: Integrating Gasless Crypto-Backed Loans with Gelato

┌─────────────────┐
│    End User     │
└─────────────────┘
         │
         │ Interacts with
         ▼
┌─────────────────┐
│ Your Application│
└─────────────────┘
         │
         │ Uses
         ▼
┌─────────────────┐
│ Gelato Smart    │
│ Wallet SDK      │
└─────────────────┘
         │
         │ 1. Creates Smart Account & Session
         │ 2. Bundles & Sponsors Transactions
         ▼
┌─────────────────┐
│   Blockchain    │
└─────────────────┘
         │
         │ Executes atomic calls
         ▼
┌─────────────────┐
│ Morpho Protocol │
│   Contracts     │
│ (supply, borrow)│
└─────────────────┘

// components/MorphoLendingComponent.tsx
import React, { useState } from "react";
import { useGelatoSmartWalletProviderContext } from "@gelatonetwork/smartwallet";
import { encodeFunctionData, parseUnits } from "viem";
import { sponsored } from "@gelatonetwork/smartwallet";
 
// Import constants and ABIs from your constants file
import {
  CBBTC_ADDRESS,
  USDC_ADDRESS,
  MORPHO_BLUE_ADDRESS,
  CBBTC_USDC_MARKET_PARAMS,
  ERC20_ABI,
  MORPHO_BLUE_ABI,
} from "../constants";
 
const GELATO_API_KEY = process.env.NEXT_PUBLIC_GELATO_API_KEY as string;
 
export const MorphoLendingComponent = () => {
  const [borrowAmount, setBorrowAmount] = useState("");
  const [collateralAmount, setCollateralAmount] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [txHash, setTxHash] = useState<string | null>(null);
 
  const {
    client: smartWalletClient,
    smartWallet,
    connect,
    disconnect,
    isConnected,
  } = useGelatoSmartWalletProviderContext();
 
  const handleBorrow = async () => {
    if (!smartWalletClient || !smartWallet || !borrowAmount || !collateralAmount) return;
 
    setLoading(true);
    setError(null);
    setTxHash(null);
 
    try {
      const parsedCollateral = parseUnits(collateralAmount, 8); // cbBTC has 8 decimals
      const parsedBorrow = parseUnits(borrowAmount, 6); // USDC has 6 decimals
 
      const calls = [
        // 1. Approve Morpho to spend the collateral
        {
          to: CBBTC_ADDRESS as `0x${string}`,
          data: encodeFunctionData({
            abi: ERC20_ABI,
            functionName: "approve",
            args: [MORPHO_BLUE_ADDRESS, parsedCollateral],
          }),
        },
        // 2. Supply collateral to the market
        {
          to: MORPHO_BLUE_ADDRESS as `0x${string}`,
          data: encodeFunctionData({
            abi: MORPHO_BLUE_ABI,
            functionName: "supplyCollateral",
            args: [CBBTC_USDC_MARKET_PARAMS, parsedCollateral, smartWallet.address, "0x"],
          }),
        },
        // 3. Borrow the loan asset
        {
          to: MORPHO_BLUE_ADDRESS as `0x${string}`,
          data: encodeFunctionData({
            abi: MORPHO_BLUE_ABI,
            functionName: "borrow",
            args: [
              CBBTC_USDC_MARKET_PARAMS,
              parsedBorrow,
              BigInt(0), // shares
              smartWallet.address, // receiver
              smartWallet.address, // onBehalf
            ],
          }),
        },
      ];
 
      // Execute the bundled, sponsored transaction
      const response = await smartWalletClient.execute({
        payment: sponsored(GELATO_API_KEY),
        calls,
      });
 
      const receipt = await response.wait();
      setTxHash(receipt.id);
 
    } catch (e: any) {
      console.error("Borrow failed:", e);
      setError(e.message || "An unknown error occurred.");
    } finally {
      setLoading(false);
    }
  };
  
  // UI Rendering
  if (!isConnected) {
    return <button onClick={() => connect()}>Create Wallet / Login</button>;
  }
 
  return (
    <div>
      <h3>Borrow USDC with cbBTC Collateral</h3>
      <input
        type="text"
        placeholder="Collateral Amount (cbBTC)"
        value={collateralAmount}
        onChange={(e) => setCollateralAmount(e.target.value)}
        disabled={loading}
      />
      <input
        type="text"
        placeholder="Borrow Amount (USDC)"
        value={borrowAmount}
        onChange={(e) => setBorrowAmount(e.target.value)}
        disabled={loading}
      />
      <button onClick={handleBorrow} disabled={loading}>
        {loading ? "Processing..." : "Supply & Borrow"}
      </button>
      <button onClick={() => disconnect()} disabled={loading}>
        Disconnect
      </button>
 
      {txHash && <p>Success! Transaction: {txHash}</p>}
      {error && <p style={{ color: "red" }}>Error: {error}</p>}
    </div>
  );
};