useSignTypedData

Hook for signing typed data with connected account.

This is a wrapper around viem's signTypedData.

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 message = {
  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,
      message,
      primaryType: 'Mail',
      types,
    })
 
  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
  signTypedDataAsync: (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,
    message,
  })
}

message (optional)

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

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

primaryType

The primary type to extract from types and use in message.

import { useSignTypedData } from 'wagmi'
 
function App() {
  const signTypedData = useSignTypedData({
    domain,
    types,
    primaryType: 'Mail',
    message,
  })
}

types (optional)

Typed data type definition.

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

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

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,
    message,
    onError(error) {
      console.log('Error', error)
    },
  })
}

onMutate (optional)

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,
    message,
    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,
    message,
    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,
    message,
    onSuccess(data) {
      console.log('Success', data)
    },
  })
}

useSignMessage useSwitchNetwork