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.

Wagmi is not available on React Native. Use Ethers.js or Viem for EVM operations.

Sign Typed Data

Ethers.js
Viem

import { useParaEthersSigner, useParaEthersSignTypedData } from "@getpara/react-native-wallet/evm/ethers";
import { JsonRpcProvider } from "ethers";
import { View, Text, TouchableOpacity } from "react-native";

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 (
    <View>
      <TouchableOpacity
        disabled={isPending}
        onPress={() => signTypedDataAsync({ domain, types, value })}
      >
        <Text>{isPending ? "Signing..." : "Sign Typed Data"}</Text>
      </TouchableOpacity>
      {signature && <Text>Signature: {signature}</Text>}
    </View>
  );
}

import { useParaViemClient, useParaViemSignTypedData } from "@getpara/react-native-wallet/evm/viem";
import { http } from "viem";
import { sepolia } from "viem/chains";
import { View, Text, TouchableOpacity } from "react-native";

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 (
    <View>
      <TouchableOpacity
        disabled={isPending}
        onPress={() => signTypedDataAsync({ domain, types, primaryType, message })}
      >
        <Text>{isPending ? "Signing..." : "Sign Typed Data"}</Text>
      </TouchableOpacity>
      {signature && <Text>Signature: {signature}</Text>}
    </View>
  );
}

Next Steps