Sign a Typed Message

import { useSignTypedData } from 'wagmi'
import { arbitrumSepolia } from 'wagmi/chains'
 
const typedData = {
  domain: {
    name: 'Ether Mail',
    version: '1',
    chainId: arbitrumSepolia.id,
    verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
  },
  types: {
    Person: [
      { name: 'name', type: 'string' },
      { name: 'wallet', type: 'address' },
    ],
    Mail: [
      { name: 'from', type: 'Person' },
      { name: 'to', type: 'Person' },
      { name: 'contents', type: 'string' },
    ],
  },
  primaryType: 'Mail',
  message: {
    from: {
      name: 'Alice',
      wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
    },
    to: {
      name: 'Bob',
      wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
    },
    contents: 'Hello, Bob!',
  },
} as const
 
export function SignTypedData() {
  const { signTypedData, data, isPending, error } = useSignTypedData()
 
  const handleSign = () => signTypedData(typedData)
 
  return (
    <div>
      <button type="button" onClick={handleSign} disabled={isPending}>
        {isPending ? 'Signing...' : 'Sign typed data'}
      </button>
 
      {data ? <p>Signature: {data}</p> : null}
      {error ? <p>Signing failed: {error.message}</p> : null}
    </div>
  )
}