wagmi-permit

Wagmi Permit

All you need to sign ERC-2612/DAI permits with viem and wagmi.

Features

  • A set of functions and wagmi hooks to sign Permits
  • Supports both ERC-2612 Permit and Dai non-standard permit
  • Automatically manages nonce, version and token name - just pass in the contract address
  • Handles USDC on Polygon PoS edge-case

Installation

npm i wagmi-permit
pnpm add wagmi-permit
bun i wagmi-permit
yarn add wagmi-permit

Usage

The auto-generated API docs can be found here

Hook

import { usePermit } from "wagmi-permit";

function PermitExample() {
const { data: walletClient } = useWalletClient();
/* No need to specify name, nonce and permit version, the hook takes care of all that automatically */
const { signPermit, signature } = usePermit({
walletClient,
ownerAddress: walletClient?.account.address,
chainId: 1,
spenderAddress: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", // vitalik.eth
contractAddress: "0xa2327a938febf5fec13bacfb16ae10ecbc4cbdcf", // usdc on mainnet
value: parseEther("10"),
deadline: BigInt(Date.now() + 100_000),
});

return (
<>
<pre>{JSON.stringify(signature, null, 2)}</pre>
<button
onClick={async () => {
/* Permit signature is returned both from the action and from the hook */
const permitSignature = await signPermit?.();
console.log(permitSignature);
}}
>
Sign Permit
</button>
</>
);
}

Hook with overrides

You can override the data passed to the permit signature in the hook...

const { signPermit, signature } = usePermit({
walletClient,
ownerAddress: walletClient?.account.address,
chainId: 1,
spenderAddress: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", // vitalik.eth
contractAddress: "0xa2327a938febf5fec13bacfb16ae10ecbc4cbdcf", // usdc on mainnet
value: parseEther("10"),
deadline: BigInt(Date.now() + 100_000),
/** Overrides */
nonce: 2n,
erc20Name: "Overriden Token Name",
version: "2",
});

or directly in the function

<button
onClick={async () => {
/* Permit signature is returned both from the action and from the hook */
const permitSignature = await signPermit?.({
nonce: 2n,
erc20Name: "Overriden Token Name",
version: "2",
});
console.log(permitSignature);
}}
>
Sign Permit
</button>

Dai hook

Sign Dai permits with the signPermitDai function returned from the hook

import { usePermit } from "wagmi-permit";

function DaiPermitExample() {
const { data: walletClient } = useWalletClient();
const { signPermitDai, signature } = usePermit({
walletClient,
ownerAddress: walletClient?.account.address,
chainId: 1,
spenderAddress: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", // vitalik.eth
contractAddress: "0x6b175474e89094c44da98b954eedeac495271d0f", // dai on mainnet
value: parseEther("10"),
deadline: BigInt(Date.now() + 100_000),
});

return (
<>
<pre>{JSON.stringify(signature, null, 2)}</pre>
<button
onClick={async () => {
/* Permit signature is returned both from the action and from the hook */
const permitSignature = await signPermitDai?.();
console.log(permitSignature);
}}
>
Sign Permit
</button>
</>
);
}

Actions

You can also use just the permit signing functions, for both standard tokens and Dai

import {signPermit} from "wagmi-permit";
import {WalletClient} from "wagmi";

async function signPermitForUSDC(walletClient: WalletClient) {
const sig = await signPermit(walletClient, {
spenderAddress: "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
ownerAddress: "0x70997970C51812dc3A010C7d01b50e0d17dc79C8",
contractAddress: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
erc20Name: "USD Coin",
version: "2",
deadline: BigInt(Date.now() + 100_000),
nonce: 0n,
chainId: 1,
value: 1_000_000_000n,
});

console.log(sig);
}

Example app

Play with an example of signing a USDC permit on Optimism Mainnet in the example app under example-app.

git clone https://github.com/vacekj/wagmi-permit
cd wagmi-permit
cd example-app
npm i
npm run dev

Permit information for common tokens

Information on various tokens, their supported permit type, version and methods can be found in PERMIT.md

Credits

Thank you to Ana, dcbuilder for feedback

Generated using TypeDoc