Paymasters (Sponsored Transactions)

One of the biggest UX enhancements unlocked by Smart Wallet is the ability for app developers to sponsor their users' transactions. If your app supports Smart Wallet, you can start sponsoring your users' transactions by using standardized paymaster service communication enabled by new wallet RPC methods.

Using Wagmi + Viem

1. Choose a paymaster service provider

As a prerequisite, you'll need to obtain a paymaster service URL from a paymaster service provider. To be compatible with Smart Wallet, the paymaster provider you choose must be ERC-7677-compliant.

Once you choose a paymaster service provider and obtain a paymaster service URL, you can proceed to integration.

2. (Recommended) Setup your paymaster proxy

Most service providers provide URLs that have API keys in them. More often than not, you'll want to keep these API keys secret. This could be problematic because sponsoring users' transactions involves passing your paymaster service URL to Smart Wallet so it can communicate with the service.

As a result, we recommend setting up an endpoint on your app's backend that is ultimately responsible for communication with your paymaster service URL. This way, you can give Smart Wallet your app's new endpoint instead of the service URL directly.

The proxy you create will need to handle the pm_getPaymasterStubData and pm_getPaymasterData JSON-RPC requests specified by ERC-7677.

route.ts

export async function POST(r: Request) {
  const req = await r.json()
  const method = req.method
  const [userOp, entrypoint, chainId] = req.params
 
  if (method === 'pm_getPaymasterStubData') {
    const data = {
      id: 1,
      jsonrpc: '2.0',
      method: 'pm_getPaymasterStubData',
      params: [userOp, entrypoint, chainId],
    }
    const res = await fetch(process.env.PAYMASTER_SERVICE_URL, { // URL from your paymaster service provider
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST',
      body: JSON.stringify(data)
    })
    return Response.json(await res.json())
  } else if (method === 'pm_getPaymasterData') {
    // handle pm_getPaymasterData
  }
}

3. Send EIP-5792 requests with a paymaster service capability

Once you have your paymaster service set up, you can now pass its URL along to Wagmi's useWriteContracts hook.

If you set up a proxy in your app's backend as recommended in step (2) above, you'll want to pass in the proxy URL you created.

App.tsx

import { useAccount } from 'wagmi'
import { useWriteContracts, useCallsStatus } from 'wagmi/experimental'
 
const abi = [
  {
    stateMutability: 'nonpayable',
    type: 'function',
    inputs: [{ name: 'to', type: 'address' }],
    name: 'safeMint',
    outputs: [],
  }
] as const
 
function App() {
  const account = useAccount()
  const { data: id, writeContracts } = useWriteContracts()
 
  const handleMint = () => {
    writeContracts({
      contracts: [
        {
          address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19",
          abi,
          functionName: "safeMint",
          args: [account.address],
        },
        {
          address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19",
          abi,
          functionName: "safeMint",
          args: [account.address],
        }
      ],
      capabilities: { 
        paymasterService: { 
          url: 'https://...' // The URL from your paymaster service provider, or your app's backend as described in step (2) above
        } 
      } 
    })
  }
 
  return ( 
    <div>
      <button onClick={handleMint}>Mint</button>
      {id && <div> ID: {id}</div>}
    </div>
  )
}

That's it! Smart Wallet will handle the rest. If your paymaster service is able to sponsor the transaction, Smart Wallet will indicate to your user that the transaction is sponsored.