useSignTypedData

⚠️

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

Hook for signing typed data with connected account.

import { useSignTypedData } from 'wagmi'

Usage

The following examples use the typed data:

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

// 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' },
  ],
} as const

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

From now on, the typed data variables (above) are referenced only by name for brevity.

import { useSignTypedData } from 'wagmi'

function App() {
  const { data, isError, isLoading, isSuccess, signTypedData } =
    useSignTypedData({
      domain,
      types,
      value,
    })

  return (
    <div>
      <button disabled={isLoading} onClick={() => signTypedData()}>
        Sign typed data
      </button>
      {isSuccess && <div>Signature: {data}</div>}
      {isError && <div>Error signing message</div>}
    </div>
  )
}

Return Value

{
  data?: string
  error?: Error
  isError: boolean
  isIdle: boolean
  isLoading: boolean
  isSuccess: boolean
  signTypedData: (args?: SignTypedDataArgs) => void
  signTypeDataAsync: (args?: SignTypedDataArgs) => Promise<string>
  reset: () => void
  status: 'idle' | 'error' | 'loading' | 'success'
}

Configuration

domain (optional)

Typed data domain. This can be a fixed object or a reactive state variable.

import { useSignTypedData } from 'wagmi'

function App() {
  const signTypedData = useSignTypedData({
    domain: {
      name: 'Ether Mail',
      version: '1',
      chainId: 1,
      verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
    },
    types,
    value,
  })
}

types (optional)

Typed data type definition.

By defining inline or adding a const assertion to types, TypeScript will infer the correct types value. See the wagmi TypeScript docs for more information.

import { useSignTypedData } from 'wagmi'

function App() {
  const signTypedData = useSignTypedData({
    domain,
    types: {
      Person: [
        { name: 'name', type: 'string' },
        { name: 'wallet', type: 'address' },
      ],
      Mail: [
        { name: 'from', type: 'Person' },
        { name: 'to', type: 'Person' },
        { name: 'contents', type: 'string' },
      ],
    },
    value,
  })
}

value (optional)

Typed data value. This can be a fixed object or a reactive state variable.

import { useSignTypedData } from 'wagmi'

function App() {
  const signTypedData = useSignTypedData({
    domain,
    types,
    value: {
      from: {
        name: 'Cow',
        wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
      },
      to: {
        name: 'Bob',
        wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
      },
      contents: 'Hello, Bob!',
    },
  })
}

onError (optional)

Function to invoke when an error is thrown while attempting to sign.

import { useSignTypedData } from 'wagmi'

function App() {
  const signTypedData = useSignTypedData({
    domain,
    types,
    value,
    onError(error) {
      console.log('Error', error)
    },
  })
}

Function fires before sign message function and is passed same variables sign message function would receive. Value returned from this function will be passed to both onError and onSettled functions in event of a sign message failure.

import { useSignTypedData } from 'wagmi'

function App() {
  const signTypedData = useSignTypedData({
    domain,
    types,
    value,
    onMutate(args) {
      console.log('Mutate', args)
    },
  })
}

onSettled (optional)

Function to invoke when sign message is settled (either successfully signed, or an error has thrown).

import { useSignTypedData } from 'wagmi'

function App() {
  const signTypedData = useSignTypedData({
    domain,
    types,
    value,
    onSettled(data, error) {
      console.log('Settled', { data, error })
    },
  })
}

onSuccess (optional)

Function to invoke when sign message is successful.

import { useSignTypedData } from 'wagmi'

function App() {
  const signTypedData = useSignTypedData({
    domain,
    types,
    value,
    onSuccess(data) {
      console.log('Success', data)
    },
  })
}