permit2-wagmi-integration

Automates Permit2 allowance reads and permit signing in wagmi-based wallet apps.

Updated Nov 5, 2025
One-click install
npx skills add https://github.com/cyotee/crane --skill permit2-wagmi-integration
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: permit2-wagmi-integration
Source: https://github.com/cyotee/crane/tree/main/.claude/skills/permit2-wagmi-integration
Command: npx skills add https://github.com/cyotee/crane --skill permit2-wagmi-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides reusable patterns to integrate Permit2 with wagmi-powered UI, enabling secure and streamlined token allowances and permit signing.

Core Features & Use Cases

  • Reading and validating allowances from ERC20 tokens via the Permit2 flow.
  • Signing permits with wagmi's useSignTypedData and the Permit2 SDK for seamless transfers.
  • UI integration patterns for wallet-based dapps that require per-token approvals and nonce management.

Quick Start

Implement a React component that uses wagmi to read allowances and sign permits through Permit2.

Frequently Asked Questions about permit2-wagmi-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sign Permit2 permits using wagmi in a React dapp?

To sign Permit2 permits using wagmi, utilize the useSignTypedData hook alongside the Permit2 SDK to generate and sign typed data for seamless token transfers. This pattern requires viem for encoding the permit payload before requesting the user's wallet signature.

What is the Permit2 flow for ERC20 token allowances?

The Permit2 flow for ERC20 token allowances involves reading existing token approvals and nonces, then generating off-chain permits for secure transfers. This mechanism streamlines user experience by combining multiple token approvals into a single signed message, avoiding separate on-chain approval transactions.

How do I read ERC20 allowances from the Permit2 contract with wagmi?

You read ERC20 allowances from the Permit2 contract by using wagmi's useReadContract hook configured with the PERMIT2_ADDRESS and the target chainId. This queries the Permit2 contract state to validate whether a token has sufficient allowance before generating a new permit signature.

Do I need viem and the Permit2 SDK to integrate Permit2 with wagmi?

Yes, you need viem and the Permit2 SDK to integrate Permit2 with wagmi. Viem handles the underlying Ethereum interactions and typed data encoding, while the Permit2 SDK provides the specific contract ABIs and utilities needed to manage nonces and generate valid permit payloads.

What's the best way to manage Permit2 nonces in a frontend web3 app?

The best way to manage Permit2 nonces in a frontend web3 app is to read the current nonce state via useReadContract against the PERMIT2_ADDRESS, then increment and structure it within the permit payload using the Permit2 SDK before signing with useSignTypedData.

Why does my Permit2 allowance check fail across different chainIds?

Permit2 allowance checks fail across different chainIds when the PERMIT2_ADDRESS is not dynamically updated for the connected network. You must manage PERMIT2_ADDRESS with chainId in your wagmi hooks to ensure the useReadContract query targets the correct Permit2 contract instance deployed on that specific chain.