Sign a Typed Message

import { useSignTypedData } from "wagmi";
 
const typedData = {
  domain: {
    name: "Ether Mail",
    version: "1",
    chainId: 1,
    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 onClick={handleSign} disabled={isPending}>
        {isPending ? "Signing..." : "Sign typed data"}
      </button>
 
      {data && <p>Signature: {data}</p>}
      {error && <p>Signing failed: {error.message}</p>}
    </div>
  );
}