Stop Losing Users to Gas Fees: Build Gasless dApps with EIP-7702 (Pectra is Live!)

// Before EIP-7702: Deploy a whole smart contract wallet
const smartWallet = await factory.createAccount(userAddress, salt)
await smartWallet.executeTransaction(targetContract, data)

// After EIP-7702: Your EOA just "points" to smart contract logic
const authorization = await signAuthorization(implementationAddress)
await sendTransaction({
  to: userEOA,
  data: batchCallData,
  authorizationList: [authorization]
})

// contracts/GaslessImplementation.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;

contract GaslessImplementation {
    struct Call {
        address target;
        uint256 value;
        bytes data;
    }
    
    // Allow batch transactions
    function batchExecute(Call[] calldata calls) external payable {
        require(msg.sender == address(this), "Only self-calls allowed");
        
        for (uint256 i = 0; i < calls.length; i++) {
            (bool success, bytes memory result) = calls[i].target.call{
                value: calls[i].value
            }(calls[i].data);
            
            if (!success) {
                // Return the error from the failed call
                assembly {
                    revert(add(result, 32), mload(result))
                }
            }
        }
    }
    
    // Allow gas payment in USDC instead of ETH
    function executeWithTokenGas(
        Call[] calldata calls,
        address gasToken,
        uint256 gasAmount,
        address gasRecipient
    ) external {
        require(msg.sender == address(this), "Only self-calls allowed");
        
        // Execute the main calls first
        for (uint256 i = 0; i < calls.length; i++) {
            (bool success,) = calls[i].target.call{value: calls[i].value}(calls[i].data);
            require(success, "Call failed");
        }
        
        // Pay gas in tokens
        IERC20(gasToken).transfer(gasRecipient, gasAmount);
    }
}

interface IERC20 {
    function transfer(address to, uint256 amount) external returns (bool);
    function balanceOf(address account) external view returns (uint256);
}

# Deploy to Sepolia testnet first
forge create contracts/GaslessImplementation.sol:GaslessImplementation \
  --rpc-url $SEPOLIA_RPC_URL \
  --private-key $PRIVATE_KEY \
  --etherscan-api-key $ETHERSCAN_API_KEY \
  --verify

// components/GaslessSwap.tsx
import { useSendCalls, useAccount } from 'wagmi'
import { parseEther, encodeFunctionData } from 'viem'
import { useState } from 'react'

const IMPLEMENTATION_ADDRESS = '0x742d35Cc6635C0532925a3b8D6Ac9bE4' // Your deployed contract

export function GaslessSwap() {
  const { address } = useAccount()
  const { sendCalls, isPending } = useSendCalls()
  const [isSuccess, setIsSuccess] = useState(false)
  
  const executeGaslessSwap = async () => {
    if (!address) return
    
    // Prepare batch transaction calls
    const calls = [
      {
        to: '0xA0b86a33E6441C8E4517A5E8c4F6BA58F3E8CA2D', // USDC contract
        data: encodeFunctionData({
          abi: [{
            name: 'approve',
            type: 'function',
            inputs: [
              { name: 'spender', type: 'address' },
              { name: 'amount', type: 'uint256' }
            ]
          }],
          functionName: 'approve',
          args: ['0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D', parseEther('100')] // Uniswap router
        })
      },
      {
        to: '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D', // Uniswap V2 Router
        data: encodeFunctionData({
          abi: [{
            name: 'swapExactTokensForTokens',
            type: 'function',
            inputs: [
              { name: 'amountIn', type: 'uint256' },
              { name: 'amountOutMin', type: 'uint256' },
              { name: 'path', type: 'address[]' },
              { name: 'to', type: 'address' },
              { name: 'deadline', type: 'uint256' }
            ]
          }],
          functionName: 'swapExactTokensForTokens',
          args: [
            parseEther('100'),
            parseEther('95'),
            ['0xA0b86a33E6441C8E4517A5E8c4F6BA58F3E8CA2D', '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2'], // USDC -> WETH
            address,
            Math.floor(Date.now() / 1000) + 1200 // 20 minutes
          ]
        })
      }
    ]
    
    // Encode the batch call
    const batchCallData = encodeFunctionData({
      abi: [{
        name: 'batchExecute',
        type: 'function',
        inputs: [{
          name: 'calls',
          type: 'tuple[]',
          components: [
            { name: 'target', type: 'address' },
            { name: 'value', type: 'uint256' },
            { name: 'data', type: 'bytes' }
          ]
        }]
      }],
      functionName: 'batchExecute',
      args: [calls.map(call => ({
        target: call.to,
        value: 0n,
        data: call.data
      }))]
    })
    
    try {
      // Send EIP-7702 transaction
      await sendCalls({
        calls: [{
          to: address, // Call your own EOA address
          data: batchCallData
        }],
        capabilities: {
          // This tells the wallet to use EIP-7702
          paymasterService: {
            url: 'https://paymaster.example.com/sponsor' // Your paymaster
          },
          atomicBatch: {
            supported: true
          }
        }
      })
      
      setIsSuccess(true)
    } catch (error) {
      console.error('Transaction failed:', error)
    }
  }
  
  return (
    <div className="p-6 bg-white rounded-lg shadow-lg">
      <h2 className="text-xl font-bold mb-4">Gasless Token Swap</h2>
      <p className="text-gray-600 mb-4">
        Approve USDC and swap to WETH in one transaction - zero gas fees!
      </p>
      
      {isSuccess ? (
        <div className="p-4 bg-green-100 text-green-800 rounded">
          ✅ Swap completed with zero gas fees!
        </div>
      ) : (
        <button
          onClick={executeGaslessSwap}
          disabled={isPending || !address}
          className="w-full py-3 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
        >
          {isPending ? 'Processing...' : 'Execute Gasless Swap'}
        </button>
      )}
    </div>
  )
}

// server/paymaster.ts (Next.js API route)
import { createWalletClient, http, parseEther, encodeFunctionData } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { sepolia } from 'viem/chains'

const sponsorAccount = privateKeyToAccount(process.env.SPONSOR_PRIVATE_KEY as `0x${string}`)
const walletClient = createWalletClient({
  account: sponsorAccount,
  chain: sepolia,
  transport: http(process.env.RPC_URL)
})

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' })
  }
  
  const { userAddress, calls, authorizationList } = req.body
  
  try {
    // Validate the calls (important for security)
    const isValidCall = validateCalls(calls)
    if (!isValidCall) {
      return res.status(400).json({ error: 'Invalid transaction calls' })
    }
    
    // Send the sponsored transaction
    const hash = await walletClient.sendTransaction({
      to: userAddress, // Send to the user's EOA
      data: calls[0].data, // The batch call data
      authorizationList, // EIP-7702 authorization
      value: 0n
    })
    
    res.json({ success: true, hash })
  } catch (error) {
    console.error('Sponsorship failed:', error)
    res.status(500).json({ error: 'Failed to sponsor transaction' })
  }
}

function validateCalls(calls: any[]): boolean {
  // Add your validation logic here
  // For example: only allow swaps on certain DEXes
  const allowedTargets = [
    '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D', // Uniswap V2 Router
    '0xA0b86a33E6441C8E4517A5E8c4F6BA58F3E8CA2D'  // USDC
  ]
  
  return calls.every(call => allowedTargets.includes(call.to))
}

// Using Circle's Paymaster for USDC transactions
import { createPaymasterClient } from '@circle/paymaster-sdk'

const paymasterClient = createPaymasterClient({
  apiKey: process.env.CIRCLE_API_KEY,
  network: 'sepolia'
})

// In your component
const sponsorTransaction = async (userOp) => {
  const sponsoredOp = await paymasterClient.sponsorUserOperation({
    userOperation: userOp,
    entryPoint: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789'
  })
  
  return sponsoredOp
}

// hooks/useEIP7702Support.ts
import { useAccount, useWalletClient } from 'wagmi'
import { useEffect, useState } from 'react'

export function useEIP7702Support() {
  const { isConnected } = useAccount()
  const { data: walletClient } = useWalletClient()
  const [isSupported, setIsSupported] = useState(false)
  const [isChecking, setIsChecking] = useState(true)
  
  useEffect(() => {
    async function checkSupport() {
      if (!walletClient || !isConnected) {
        setIsSupported(false)
        setIsChecking(false)
        return
      }
      
      try {
        // Check if wallet supports the sendCalls method
        const supportsEIP7702 = 'request' in walletClient && 
          typeof walletClient.request === 'function'
        
        // Try a test request
        await walletClient.request({
          method: 'wallet_getCapabilities',
          params: []
        })
        
        setIsSupported(true)
      } catch (error) {
        console.log('EIP-7702 not supported:', error)
        setIsSupported(false)
      } finally {
        setIsChecking(false)
      }
    }
    
    checkSupport()
  }, [walletClient, isConnected])
  
  return { isSupported, isChecking }
}

// components/SmartGaslessSwap.tsx
import { useEIP7702Support } from '../hooks/useEIP7702Support'
import { useSendTransaction } from 'wagmi'

export function SmartGaslessSwap() {
  const { isSupported, isChecking } = useEIP7702Support()
  const { sendTransaction } = useSendTransaction()
  
  const handleSwap = async () => {
    if (isSupported) {
      // Use EIP-7702 gasless flow
      await executeGaslessSwap()
    } else {
      // Fallback to regular transaction
      await sendTransaction({
        to: USDC_ADDRESS,
        data: approveData,
        value: 0n
      })
      
      // Show message about gas fees
      alert('This transaction will require ETH for gas fees. Consider upgrading to a supported wallet for gasless transactions.')
    }
  }
  
  if (isChecking) {
    return <div>Checking wallet compatibility...</div>
  }
  
  return (
    <div>
      {isSupported ? (
        <div className="p-4 bg-green-50 border border-green-200 rounded-lg mb-4">
          ✨ Your wallet supports gasless transactions!
        </div>
      ) : (
        <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg mb-4">
          ⚠️ Your wallet doesn't support gasless transactions yet. 
          <a href="https://metamask.io" className="text-blue-600 hover:underline ml-1">
            Try MetaMask
          </a> for the best experience.
        </div>
      )}
      
      <button onClick={handleSwap}>
        {isSupported ? 'Execute Gasless Swap' : 'Execute Swap (Gas Required)'}
      </button>
    </div>
  )
}