Sign Typed Data in Ethereum/EVM

import { useDynamicContext } from '@dynamic-labs/sdk-react-core';

const SignTypedDataButton = () => {
  const { primaryWallet } = useDynamicContext();

  const signTypedData = async () => {
    if (!primaryWallet) return;

    const domain = {
        name: 'Example Message',
        version: '1.0.0',
        chainId: 1,
        salt: '0',
        verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC' as `0x${string}`,
    };
    
    const types = {
        Person: [
            {name: 'name', type: 'string'},
            {name: 'wallet', type: 'address'},
        ],
        Mail: [
            {name: 'from', type: 'Person'},
            {name: 'to', type: 'Person'},
            {name: 'contents', type: 'string'},
        ],
        EIP712Domain: [
            {
            name: 'name',
            type: 'string',
            },
            {
            name: 'version',
            type: 'string',
            },
            {
            name: 'chainId',
            type: 'uint256',
            },
            {
            name: 'salt',
            type: 'string',
            },
            {
            name: 'verifyingContract',
            type: 'string',
            },
        ],
    };

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

    const typedData = {primaryType: 'Mail', domain, types, message};
    const walletClient = primaryWallet.connector.getWalletClient();

    const signature = await walletClient.signTypedData(typedData);

    console.log('signature', signature);
  };

  return <button onClick={signTypeData}>Sign typed data</button>;
};