Sign Typed Data (EIP-712) - Para Docs

You’re viewing the 2.0 (LTS) docs. View the current 3.0 version of this page.

Sign structured data according to the EIP-712 standard, which provides a more readable and secure signing experience for users. This guide covers signing typed data with , , and .

Prerequisites

You need Web3 libraries configured with Para authentication.

Sign Typed Data

Ethers.js
Viem
Wagmi

import { useParaEthersSigner, useParaEthersSignTypedData } from "@getpara/react-sdk";
import { JsonRpcProvider } from "ethers";

const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");

function SignTypedData({
  domain,
  types,
  value,
}: {
  domain: any;
  types: any;
  value: any;
}) {
  const { ethersSigner } = useParaEthersSigner({ provider });

  const {
    signTypedDataAsync,
    isPending,
    data: signature,
  } = useParaEthersSignTypedData(ethersSigner);

  return (
    <div>
      <button
        disabled={isPending}
        onClick={() => signTypedData({ domain, types, value })}
      >
        {isPending ? "Signing..." : "Sign Typed Data"}
      </button>
      {signature && <p>Signature: {signature}</p>}
    </div>
  );
}

import { useParaViemClient, useParaViemSignTypedData } from "@getpara/react-sdk";
import { http } from "viem";
import { sepolia } from "viem/chains";

function SignTypedData({
  domain,
  types,
  primaryType,
  message,
}: {
  domain: any;
  types: any;
  primaryType: string;
  message: any;
}) {
  const { viemClient } = useParaViemClient({
    walletClientConfig: { chain: sepolia, transport: http() },
  });

  const {
    signTypedDataAsync,
    isPending,
    data: signature,
  } = useParaViemSignTypedData(viemClient);

  return (
    <div>
      <button
        disabled={isPending}
        onClick={() => signTypedData({ domain, types, primaryType, message })}
      >
        {isPending ? "Signing..." : "Sign Typed Data"}
      </button>
      {signature && <p>Signature: {signature}</p>}
    </div>
  );
}

import { useSignTypedData } from "@getpara/react-sdk/wagmi";

function SignTypedData(
  domain: any,
  types: any,
  primaryType: string,
  message: any
) {
  const { data: signature, signTypedData } = useSignTypedData();

  return (
    <div>
      <button
        onClick={() =>
          signTypedData({
            domain,
            types,
            primaryType,
            message,
          })
        }
      >
        Sign Typed Data
      </button>
      {signature && <p>Signature: {signature}</p>}
    </div>
  );
}