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>
);
}