Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/components/guides/steps/payments/SponsorUserFees.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
to: recipient as `0x${string}`,
token: alphaUsd,
memo: memo ? pad(stringToHex(memo), { size: 32 }) : undefined,
feePayer: true,
})
}

Expand Down
2 changes: 1 addition & 1 deletion src/pages/accounts/api/provider.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ const provider = Provider.create({
- **Type:** `string | { url: string; precedence?: 'fee-payer-first' | 'user-first' }`
- **Optional**

Fee payer configuration for interacting with a service running [`Handler.feePayer`](/accounts/server/handler.feePayer) from `accounts/server`. Pass a URL string, or an object with `url` and optional `precedence` to control whether the fee payer or the user pays first.
Fee payer configuration for interacting with a service running [`Handler.relay`](/accounts/server/handler.relay) from `accounts/server`. Pass a URL string, or an object with `url` and optional `precedence` to control whether the fee payer or the user pays first.

```ts twoslash
import { Provider } from 'accounts'
Expand Down
2 changes: 1 addition & 1 deletion src/pages/accounts/rpc/eth_fillTransaction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ result.capabilities.fee

### With Sponsorship

When the relay is configured with a [`feePayer`](/accounts/server/handler.relay#feepayer) and the request is sponsorable, the response includes `sponsored: true` and `sponsor` details.
When the relay is configured with a [`feePayer`](/accounts/server/handler.relay#feepayer), validated transactions are sponsored. The response includes `sponsored: true` and `sponsor` details.

```ts twoslash
// @noErrors
Expand Down
4 changes: 2 additions & 2 deletions src/pages/accounts/server/handler.compose.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ Composes multiple handlers into a single handler, routing requests to the handle
import { Handler } from 'accounts/server'

const handler = Handler.compose([
Handler.feePayer({
account: privateKeyToAccount('0x...')
Handler.relay({
feePayer: { account: privateKeyToAccount('0x...') },
}),
Handler.webAuthn({
kv: Kv.memory(),
Expand Down
167 changes: 30 additions & 137 deletions src/pages/accounts/server/handler.feePayer.mdx
Original file line number Diff line number Diff line change
@@ -1,149 +1,42 @@
---
title: Handler.feePayer
description: Server handler that sponsors transaction fees for users.
title: Handler.feePayer (Deprecated)
description: Deprecated — use Handler.relay with feePayer option instead.
---

# `Handler.feePayer`
# `Handler.feePayer` (Deprecated)

Creates a server handler that acts as a fee payer for transactions, enabling you to subsidize gas costs for users by signing transactions with a dedicated fee payer account on your backend.

:::info
[See the guide](/guide/payments/sponsor-user-fees)
:::warning
`Handler.feePayer` has been deprecated. Use [`Handler.relay`](/accounts/server/handler.relay) with the [`feePayer`](/accounts/server/handler.relay#feepayer) option instead.
:::

## Usage

```ts
import { privateKeyToAccount } from 'viem/accounts'
import { Handler } from 'accounts/server'

const handler = Handler.feePayer({
account: privateKeyToAccount('0x...'),
})
```

Then plug `handler` into your server framework of choice:

```ts
createServer(handler.listener) // Node.js
Bun.serve(handler) // Bun
Deno.serve(handler) // Deno
app.all('*', c => handler.fetch(c.request)) // Elysia
app.use(handler.listener) // Express
app.use(c => handler.fetch(c.req.raw)) // Hono
export const GET = handler.fetch // Next.js
export const POST = handler.fetch // Next.js
```

## Parameters

### account

- **Type:** `LocalAccount`
- **Required**
## Migration

The account to use as the fee payer. This account will sign all transactions and pay the gas fees.
Replace `Handler.feePayer` calls with `Handler.relay` and nest the `account` under `feePayer`:

```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
import { Handler } from 'accounts/server'

const handler = Handler.feePayer({
account: privateKeyToAccount('0x...'), // [!code focus]
})
```diff
- const handler = Handler.feePayer({
- account: privateKeyToAccount('0x...'),
- })
+ const handler = Handler.relay({
+ feePayer: {
+ account: privateKeyToAccount('0x...'),
+ },
+ })
```

### chains

- **Type:** `readonly [Chain, ...Chain[]]`
- **Default:** `[tempo, tempoModerato]`

Supported chains. The handler resolves the client based on the `chainId` in the incoming transaction.

```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
import { tempo } from 'viem/chains'
import { Handler } from 'accounts/server'

const handler = Handler.feePayer({
account: privateKeyToAccount('0x...'),
chains: [tempo], // [!code focus]
})
All other options (`chains`, `transports`, `path`, `onRequest`) remain the same — `validate` moves inside `feePayer`:

```diff
- const handler = Handler.feePayer({
- account: privateKeyToAccount('0x...'),
- validate: (request) => request.from !== blocked,
- })
+ const handler = Handler.relay({
+ feePayer: {
+ account: privateKeyToAccount('0x...'),
+ validate: (request) => request.from !== blocked,
+ },
+ })
```

### onRequest

- **Type:** `(request: RpcRequest) => Promise<void>`
- **Optional**

Callback called before processing each request. Useful for logging, rate limiting, or custom validation.

```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
import { Handler } from 'accounts/server'

const handler = Handler.feePayer({
account: privateKeyToAccount('0x...'),
onRequest: async (request) => { // [!code focus]
console.log('Processing request:', request.method) // [!code focus]
}, // [!code focus]
})
```

### path

- **Type:** `string`
- **Default:** `'/'`

Path where the handler listens for requests.

```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
import { Handler } from 'accounts/server'

const handler = Handler.feePayer({
account: privateKeyToAccount('0x...'),
path: '/fee-payer', // [!code focus]
})
```

### transports

- **Type:** `Record<number, Transport>`
- **Default:** `http()` for each chain

Transports keyed by chain ID.

```ts twoslash
import { http } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { tempo } from 'viem/chains'
import { Handler } from 'accounts/server'

const handler = Handler.feePayer({
account: privateKeyToAccount('0x...'),
transports: { // [!code focus]
[tempo.id]: http('https://rpc.tempo.xyz'), // [!code focus]
}, // [!code focus]
})
```


### validate

- **Type:** `(request: TransactionRequest) => boolean | Promise<boolean>`
- **Optional**

Validates whether to sponsor a transaction. When omitted, all transactions are sponsored. Return `false` to reject sponsorship — the handler will re-fill without `feePayer` so gas/nonce are correct for self-payment.

```ts twoslash
import { privateKeyToAccount } from 'viem/accounts'
import { Handler } from 'accounts/server'

const blocked = '0x...'

const handler = Handler.feePayer({
account: privateKeyToAccount('0x...'),
validate: (request) => request.from !== blocked, // [!code focus]
})
```
See [`Handler.relay`](/accounts/server/handler.relay) for the full API reference.
12 changes: 6 additions & 6 deletions src/pages/accounts/server/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ Handlers are compatible with any server framework that supports the:
import { Handler } from 'accounts/server'
import { privateKeyToAccount } from 'viem/accounts'

const handler = Handler.feePayer({
account: privateKeyToAccount('0x...'),
const handler = Handler.relay({
feePayer: { account: privateKeyToAccount('0x...') },
})

createServer(handler.listener) // Node.js
Expand All @@ -39,10 +39,10 @@ export const POST = handler.fetch // Next.js
title="Handler.compose"
/>
<Card
description="Handle transactions that require a fee payer"
icon="lucide:credit-card"
to="/accounts/server/feePayer"
title="Handler.feePayer"
description="Proxy RPC requests with sponsorship, auto-swap, and balance diffs"
icon="lucide:radio"
to="/accounts/server/relay"
title="Handler.relay"
/>
<Card
description="Handle WebAuthn credential registration and authentication"
Expand Down
2 changes: 1 addition & 1 deletion src/pages/accounts/wagmi/tempoWallet.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const config = createConfig({
- **Type:** `string | { url: string; precedence?: 'fee-payer-first' | 'user-first' }`
- **Optional**

Fee payer configuration for interacting with a service running [`Handler.feePayer`](/accounts/server/handler.feePayer) from `accounts/server`. Pass a URL string, or an object with `url` and optional `precedence`.
Fee payer configuration for interacting with a service running [`Handler.relay`](/accounts/server/handler.relay) from `accounts/server`. Pass a URL string, or an object with `url` and optional `precedence`.

:::info
[See the guide](/guide/payments/sponsor-user-fees)
Expand Down
2 changes: 1 addition & 1 deletion src/pages/accounts/wagmi/webAuthn.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export const config = createConfig({
- **Type:** `string | { url: string; precedence?: 'fee-payer-first' | 'user-first' }`
- **Optional**

Fee payer configuration for interacting with a service running [`Handler.feePayer`](/accounts/server/handler.feePayer) from `accounts/server`. Pass a URL string, or an object with `url` and optional `precedence`.
Fee payer configuration for interacting with a service running [`Handler.relay`](/accounts/server/handler.relay) from `accounts/server`. Pass a URL string, or an object with `url` and optional `precedence`.

:::info
[See the guide](/guide/payments/sponsor-user-fees)
Expand Down
12 changes: 6 additions & 6 deletions src/pages/guide/payments/sponsor-user-fees.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Enable gasless transactions by sponsoring transaction fees for your users. Tempo
Tempo provides a public testnet fee payer service at `https://sponsor.moderato.tempo.xyz` that you can use for development and testing. If you want to run your own, follow the instructions below.
:::

You can stand up a minimal fee payer service using the [`Handler.feePayer`](/accounts/server/handler.feePayer) handler provided by the [Tempo Accounts SDK](/accounts). To sponsor transactions, you need a funded account that will act as the fee payer.
You can stand up a minimal fee payer service using the [`Handler.relay`](/accounts/server/handler.relay) handler provided by the [Tempo Accounts SDK](/accounts). To sponsor transactions, you need a funded account that will act as the fee payer.

```ts twoslash [server.ts]
// @noErrors
Expand Down Expand Up @@ -78,15 +78,15 @@ export const config = createConfig({
// @noErrors
import { webAuthn } from 'accounts/wagmi'
import { tempo } from 'viem/chains'
import { withFeePayer } from 'viem/tempo'
import { withRelay } from 'viem/tempo'
import { createConfig, http } from 'wagmi'

export const config = createConfig({
connectors: [webAuthn({ authUrl: '/auth' })],
chains: [tempo],
multiInjectedProviderDiscovery: false,
transports: {
[tempo.id]: withFeePayer( // [!code focus]
[tempo.id]: withRelay( // [!code focus]
http(), // [!code focus]
http('https://sponsor.moderato.tempo.xyz'), // [!code focus]
), // [!code focus]
Expand All @@ -98,7 +98,7 @@ export const config = createConfig({

### Sponsor your user's transactions

Now you can sponsor transactions by passing `feePayer: true` in the transaction parameters. For more details on how to send a transaction, see the [Send a payment](/guide/payments/send-a-payment) guide.
Now transactions will be sponsored by your relay. For more details on how to send a transaction, see the [Send a payment](/guide/payments/send-a-payment) guide.

:::info
You can also build your own fee paying service. See [Build your own fee paying service](#build-your-own-fee-paying-service) below.
Expand Down Expand Up @@ -132,7 +132,7 @@ function SendSponsoredPayment() {

sendPayment.mutate({ // [!code hl]
amount: parseUnits('100', metadata.data.decimals), // [!code hl]
feePayer: true, // [!code focus]
feePayer: sponsorAccount, // [!code focus]
to: recipient, // [!code hl]
token: alphaUsd, // [!code hl]
}) // [!code hl]
Expand Down Expand Up @@ -211,7 +211,7 @@ The SDKs handle this automatically. Here's how each SDK manages the dual-signing
```

:::info
Alternatively, use `feePayer: true` with the [`withFeePayer`](https://viem.sh/tempo/transports/withFeePayer) transport to delegate signing to a remote fee payer service. See the [Steps section above](#configure-your-client-to-use-the-fee-payer-service) for setup.
Alternatively, use the [`withRelay`](https://viem.sh/tempo/transports/withRelay) transport to delegate signing to a remote fee payer service. See the [Steps section above](#configure-your-client-to-use-the-fee-payer-service) for setup.
:::

</Tab>
Expand Down
14 changes: 7 additions & 7 deletions src/snippets/unformatted/withFeePayer.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
// @ts-nocheck
// [!region client]
import { walletActions } from 'viem'
import { withFeePayer } from 'viem/tempo'
import { withRelay } from 'viem/tempo'

const _client = createClient({
account: privateKeyToAccount('0x...'),
chain: tempo,
transport: withFeePayer(
transport: withRelay(
// [!code hl]
http(), // [!code hl]
http('http://localhost:3000'), // [!code hl]
Expand All @@ -16,15 +16,15 @@ const _client = createClient({
// [!endregion client]

// [!region usage]
// Regular transaction
// Sponsored transaction (automatic when relay has feePayer configured)
const _receipt1 = await client.sendTransactionSync({
to: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
})

// Sponsored transaction // [!code hl]
// Opt out of sponsorship // [!code hl]
const _receipt2 = await client.sendTransactionSync({
// [!code hl]
feePayer: true, // [!code hl]
feePayer: false, // [!code hl]
to: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb', // [!code hl]
}) // [!code hl]

Expand All @@ -34,9 +34,9 @@ const _receipt2 = await client.sendTransactionSync({
import { Handler } from 'accounts/server'
import { privateKeyToAccount } from 'viem/accounts'

const handler = Handler.feePayer({
const handler = Handler.relay({
// [!code hl]
account: privateKeyToAccount('0x...'), // [!code hl]
feePayer: { account: privateKeyToAccount('0x...') }, // [!code hl]
}) // [!code hl]

const server = createServer(handler.listener)
Expand Down
2 changes: 1 addition & 1 deletion src/snippets/wagmi.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const config = createConfig({
// [!region withFeePayer]
import { tempoWallet } from 'accounts/wagmi'
import { tempo } from 'viem/chains'
import { withFeePayer } from 'viem/tempo'
import { withRelay } from 'viem/tempo'
import { createConfig, http } from 'wagmi'
import { KeyManager, webAuthn } from 'wagmi/tempo'

Expand Down
6 changes: 3 additions & 3 deletions src/wagmi.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { tempoWallet, webAuthn as webAuthnAccounts } from 'accounts/wagmi'
import * as React from 'react'
import { parseUnits } from 'viem'
import { tempoDevnet, tempoLocalnet, tempoModerato } from 'viem/chains'
import { withFeePayer } from 'viem/tempo'
import { withRelay } from 'viem/tempo'
import {
type CreateConfigParameters,
createConfig,
Expand Down Expand Up @@ -79,7 +79,7 @@ export function getConfig(options: getConfig.Options = {}) {
key: 'tempo-docs',
}),
transports: {
[tempoModerato.id]: withFeePayer(
[tempoModerato.id]: withRelay(
fallback([
http('https://rpc.moderato.tempo.xyz'),
webSocket('wss://rpc.moderato.tempo.xyz', {
Expand All @@ -89,7 +89,7 @@ export function getConfig(options: getConfig.Options = {}) {
http('https://sponsor.moderato.tempo.xyz'),
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Think we might need to update this service to the new Relay now. It's in https://github.com/tempoxyz/tempo-apps/tree/main/apps/fee-payer

{ policy: 'sign-only' },
),
[tempoDevnet.id]: withFeePayer(
[tempoDevnet.id]: withRelay(
fallback([
http(tempoDevnet.rpcUrls.default.http[0]),
webSocket(tempoDevnet.rpcUrls.default.webSocket[0], {
Expand Down
Loading
Loading