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-permitpnpm add wagmi-permitbun i wagmi-permityarn add wagmi-permitUsage
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(Math.floor(Date.now() / 1000) + 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(Math.floor(Date.now() / 1000) + 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(Math.floor(Date.now() / 1000) + 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(Math.floor(Date.now() / 1000) + 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 devPermit information for common tokens
Information on various tokens, their supported permit type, version and methods can be found in PERMIT.md
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent