Sign Typed Data

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

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

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

    const domain = {
      name: 'Example DApp',
      version: '1.0.0',
      chainId: 1,
      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' },
      ],
    };

    const message = {
      from: {
        name: 'Alice',
        wallet: primaryWallet.address,
      },
      to: {
        name: 'Bob',
        wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
      },
      contents: 'Hello, this is a signed message!',
    };

    const typedData = {
      primaryType: 'Mail' as const,
      domain,
      types,
      message
    };

    try {
      const walletClient = await primaryWallet.getWalletClient();
      const signature = await walletClient.signTypedData(typedData);

      console.log('Typed data signature:', signature);
      return signature;
    } catch (error) {
      console.error('Error signing typed data:', error);
      throw error;
    }
  };

  return (
    <button onClick={signTypedData}>
      Sign Typed Data
    </button>
  );
};