Sign Messages

import { useSignMessage } from 'wagmi'

export function SignMessage() {
  const { signMessage, data, isPending, error } = useSignMessage()

  const handleSign = () =>
    signMessage({
      message: 'Hello from ZeroDev Wallet',
    })

  return (
    <div>
      <button type="button" onClick={handleSign} disabled={isPending}>
        {isPending ? 'Signing...' : 'Sign message'}
      </button>

      {data ? <p>Signature: {data}</p> : null}
      {error ? <p>Signing failed: {error.message}</p> : null}
    </div>
  )
}

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>
  )
}