Sign Typed Data (EIP-712)

Sign EIP-712 typed data with an EVM wallet account using a Viem WalletClient.

EIP-712 defines a standard way to sign structured data so wallets can present human-readable information to the user instead of an opaque hex blob.

You can sign typed data with any EVM wallet account by creating a Viem WalletClient for it and calling signTypedData.

Usage

JavaScript

import { createWalletClientForWalletAccount } from '@dynamic-labs-sdk/evm/viem';

const signTypedData = async (walletAccount) => {
  const walletClient = await createWalletClientForWalletAccount({ walletAccount });

  const domain = {
    name: 'Example Message',
    version: '1.0.0',
    chainId: 1,
    verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
  };

  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: 'Cow', wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826' },
    to:   { name: 'Bob', wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB' },
    contents: 'Hello, Bob!',
  };

  const signature = await walletClient.signTypedData({
    domain,
    types,
    primaryType: 'Mail',
    message,
  });

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

React

import { createWalletClientForWalletAccount } from '@dynamic-labs-sdk/evm/viem';
import { useGetWalletAccounts } from '@dynamic-labs-sdk/react-hooks';
import { isEvmWalletAccount } from '@dynamic-labs-sdk/evm';

function SignTypedDataButton({ typedData }) {
  const { data: walletAccounts = [] } = useGetWalletAccounts();
  const walletAccount = walletAccounts.find(isEvmWalletAccount);

  const handleSign = async () => {
    if (!walletAccount) return;

    const walletClient = await createWalletClientForWalletAccount({ walletAccount });
    const signature = await walletClient.signTypedData(typedData);
    console.log('signature', signature);
  };

  return (
    <button onClick={handleSign} disabled={!walletAccount}>
      Sign typed data
    </button>
  );
}

Notes

• The wallet account must be an EVM account. Use isEvmWalletAccount to narrow the type before calling createWalletClientForWalletAccount.
• signTypedData will use the wallet’s currently active chain. If you need a different chain, switch first with switchActiveNetwork.
• The signature is 0x-prefixed hex (Hex); recover the signer with viem’s recoverTypedDataAddress or verify on-chain.
• If the wallet account is not currently selected in the user’s wallet app, the call throws WalletAccountNotSelectedError. Prompt the user to switch accounts and retry.

Related functions

• Getting a Viem WalletClient
• Checking EVM Wallet Account Type
• Signing a Message
• Switching Active Network