SignMessage.tsx: 👉 Click to expand/collapse
```tsx [SignMessage.tsx] import { useCallback, useEffect, useMemo, useState } from "react"; import type { Hex } from "viem"; import { useAccount, usePublicClient, useSignMessage } from "wagmi"; import { SiweMessage } from "siwe"; export function SignMessage() { const account = useAccount(); const client = usePublicClient(); const [signature, setSignature] = useStateSign Message (Sign In with Ethereum)
{}
{signature &&Signature: {signature}
} {valid != undefined &&Is valid: {valid.toString()}
}TypedSign.tsx: 👉 Click to expand/collapse
```tsx [TypedSign.tsx] import { useCallback, useEffect, useState } from "react"; import type { Address, Hex } from "viem"; import { useAccount, usePublicClient, useSignTypedData } from "wagmi"; export const domain = { name: "Ether Mail", version: "1", chainId: 1, verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC", } as const; export const types = { Person: [ { name: "name", type: "string" }, { name: "wallet", type: "address" }, ], Mail: [ { name: "from", type: "Person" }, { name: "to", type: "Person" }, { name: "contents", type: "string" }, ], } as const; export function TypedSign() { const account = useAccount(); const client = usePublicClient(); const [signature, setSignature] = useStateSign Typed Data
{}
{signature &&Signature: {signature}
} {valid != undefined &&Is valid: {valid.toString()}
}route.ts: 👉 Click to expand/collapse
```typescript [route.ts] import { NextRequest, NextResponse } from 'next/server'; import { createPublicClient, http } from 'viem'; import { baseSepolia, base } from 'viem/chains'; export async function POST(request: NextRequest) { try { const { address, message, signature } = await request.json(); const CHAIN = process.env.NODE_ENV === 'production' ? base : baseSepolia const publicClient = createPublicClient({ chain: CHAIN, transport: http(), }); const valid = await publicClient.verifyMessage({ address: address, message: message, signature: signature, }); console.log("valid", valid); if (valid){ return NextResponse.json({ success: true, message: 'Signature verified', address: address }); } else { return NextResponse.json( { success: false, message: 'Invalid signature' }, { status: 400 } ); } } catch (error) { console.error('Error verifying signature:', error); return NextResponse.json( { success: false, message: 'Invalid signature' }, { status: 400 } ); } } ```SIWE Example
Account
status: {account.status}
addresses: {JSON.stringify(account.addresses)}
chainId: {account.chainId}
addresses: {JSON.stringify(account.addresses)}
chainId: {account.chainId}
Connect
{connectors.map((connector) => ( ))}{status}
{error?.message}
SIWE Example
{signature &&Signature: {signature}
}SIWE Example
{signature &&Signature: {signature}
} {valid !== undefined &&Is valid: {valid.toString()}
}{/* // [!code focus] */}
{callsStatus &&
)
}
```
:::
import { Callout } from "vocs/components"
# 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](https://erc7677.xyz) enabled by [new wallet RPC methods](https://eip5792.xyz).
This guide is specific to using Smart Wallet, you can find our more about using Paymasters with Base in
the [Base Go Gasless page](https://docs.base.org/use-cases/go-gasless).
The code below is also in our [Wagmi Smart Wallet template](https://github.com/wilsoncusack/wagmi-scw/).
## Skip ahead and clone the template
If you are looking for a complete example, you can skip the steps below and clone the [Wagmi Smart Wallet template](https://github.com/wilsoncusack/wagmi-scw/). Simply open a terminal and run:
```bash
git clone https://github.com/wilsoncusack/wagmi-scw.git
```
Follow the instructions in the README to install the dependencies and run the app.
## Add Support in your Next.js app (using Wagmi/Viem)
::::steps
### Set up your Paymaster service
As a prerequisite, you'll need to obtain a Paymaster service URL from a Paymaster service provider.
We'll use [Coinbase Developer Platform](https://www.coinbase.com/developer-platform) as a Paymaster service provider,
currently offering up to $15k in gas credits as part of the [Base Gasless Campaign](/identity/smart-wallet/introduction/base-gasless-campaign).
Status: {callsStatus.status}
}
How to get your Paymaster service URL
How to set your Paymaster contracts allowlist
Transact With Paymaster
{JSON.stringify(capabilities)}
{id &&