Skip to content

useSignTypedData

⚠️

This hook uses an experimental ethers.js feature. If using it, please specify the exact version of ethers you are using (e.g. specify "5.0.18", not "^5.0.18").

Hook for signing the typed data value with types data structure for domain using the EIP-712 specification.

import { useSignTypedData } from 'wagmi'

Usage

The following examples use the typed data.

import { useSignTypedData } from 'wagmi'

// All properties on a domain are optional
const domain = {
  name: 'Ether Mail',
  version: '1',
  chainId: 1,
  verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
}

// The named list of all type definitions
const types = {
  Person: [
    { name: 'name', type: 'string' },
    { name: 'wallet', type: 'address' },
  ],
  Mail: [
    { name: 'from', type: 'Person' },
    { name: 'to', type: 'Person' },
    { name: 'contents', type: 'string' },
  ],
}

const value = {
  from: {
    name: 'Cow',
    wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
  },
  to: {
    name: 'Bob',
    wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
  },
  contents: 'Hello, Bob!',
}

const App = () => {
  const [{ data, error, loading }, signTypedData] = useSignTypedData({
    domain,
    types,
    value,
  })

  if (!data)
    return (
      <button disabled={loading} onClick={async () => await signTypedData()}>
        Sign typed Data
      </button>
    )

  return (
    <div>
      {data && <div>Signature: {data}</div>}
      {error && <div>Error signing message</div>}
    </div>
  )
}

Return Values

result

{
  data?: string
  error?: Error
  loading?: boolean
}

signTypedData

(config?: {
  domain: TypedDataDomain
  types: Record<string, Array<TypedDataField>>
  value: Record<string, any>
}) => Promise<{ data?: string; error?: Error }>