Sponsor User Fees

Enable gasless transactions by sponsoring transaction fees for your users. Tempo's native fee sponsorship allows applications to pay fees on behalf of users, improving UX and removing friction from payment flows.

Demo

Steps

import { createClient, http } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { tempoModerato } from 'viem/chains'
 
const client = createClient({
  chain: tempoModerato.extend({
    feeToken: '0x20c0000000000000000000000000000000000001',
  }),
  transport: http(),
})
 
const handler = Handler.feePayer({
  account: privateKeyToAccount('0x...'), 
  client, 
}) 
 
const server = createServer(handler.listener)
server.listen(3000)

import { tempoModerato } from 'viem/chains'
import { withFeePayer } from 'viem/tempo'
import { createConfig, http } from 'wagmi'
import { KeyManager, webAuthn } from 'wagmi/tempo'
 
export const config = createConfig({
  connectors: [
    webAuthn({
      keyManager: KeyManager.http('https://keys.tempo.xyz'),
    }),
  ],
  chains: [tempoModerato],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempoModerato.id]: withFeePayer(http(), http('https://sponsor.moderato.tempo.xyz')),
  },
})

import { Hooks } from 'wagmi/tempo'
import { parseUnits } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
 
const alphaUsd = '0x20c0000000000000000000000000000000000001'
 
function SendSponsoredPayment() {
  const sponsorAccount = privateKeyToAccount('0x...')
  const sendPayment = Hooks.token.useTransferSync() 
  const metadata = Hooks.token.useGetMetadata({
    token: alphaUsd,
  })
 
  return (
    <form onSubmit={
      (event) => {
        event.preventDefault()
        const formData = new FormData(event.target as HTMLFormElement)
 
        const recipient = (formData.get('recipient') ||
          '0x0000000000000000000000000000000000000000') as `0x${string}`
 
        sendPayment.mutate({ 
          amount: parseUnits('100', metadata.data.decimals), 
          feePayer: true, 
          to: recipient, 
          token: alphaUsd, 
        }) 
      }
    }>
      <div>
        <label htmlFor="recipient"> Recipient address </label>
        <input type="text" placeholder="0x..." />
      </div>
      <button type="submit" disabled={sendPayment.isPending}>
        Send Payment
      </button>
    </form>
  )
}

Recipes

Local account sponsorship

The example above uses a fee payer server to sign and sponsor transactions. If you want to sponsor transactions locally, you can easily do so by passing a local account to the feePayer parameter.

import { createClient, http } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { tempoModerato } from 'viem/chains'
 
const client = createClient({
  chain: tempoModerato,
  transport: http(),
})
 
const { receipt } = await client.token.transferSync({
  amount: parseUnits('10.5', 6),
  to: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
  token: '0x20c0000000000000000000000000000000000000',
  feePayer: privateKeyToAccount('0x...'), 
})

Best practices

1. Set sponsorship limits: Implement daily or per-user limits to control costs
2. Monitor expenses: Track sponsorship costs regularly to stay within budget
3. Consider selective sponsorship: Only sponsor fees for specific operations or user segments
4. Educate users: Clearly communicate when fees are being sponsored

Security Considerations

• Transaction-specific: Fee payer signatures are tied to specific transactions
• No delegation risk: Fee payer can't execute arbitrary transactions
• Balance checks: Network verifies fee payer has sufficient balance
• Signature validation: Both signatures must be valid

Signing Hash Behavior

When building fee-sponsored transactions, the sender must indicate sponsorship before signing. This is because the transaction's signing hash differs based on whether it will be sponsored:

• Sponsored transactions: The fee_token field is omitted from the sender's signing payload, and a 0x00 marker is used. This allows the fee payer to choose the fee token.
• Non-sponsored transactions: The fee_token is included in the sender's signing payload.

The withFeePayer transport and feePayer: true parameter handle this automatically. If you're building transactions manually with a local account as fee payer, the Viem SDK handles this for you:

import { createClient, http, parseUnits } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { tempoModerato } from 'viem/chains'
 
const client = createClient({
  chain: tempoModerato,
  transport: http(),
})
 
const senderAccount = privateKeyToAccount('0x...')
const feePayerAccount = privateKeyToAccount('0x...')
 
// When feePayer is an Account object, Viem:
// 1. Has the sender sign the transaction (with feeToken)
// 2. Recovers the sender address from their signature  
// 3. Has the fee payer sign a separate hash (includes sender + feeToken)
// 4. Serializes the dual-signed transaction
const { receipt } = await client.token.transferSync({
  account: senderAccount,
  amount: parseUnits('10.5', 6),
  to: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
  token: '0x20c0000000000000000000000000000000000000',
  feePayer: feePayerAccount, 
})

Learning Resources