Prerequisites
You need Web3 libraries configured with Para authentication.- Ethers.js
- Viem
- Wagmi
Sign Personal Messages
import { useParaEthersSigner, useParaEthersSignMessage } from "@getpara/react-sdk";
import { JsonRpcProvider } from "ethers";
const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");
function SignMessage() {
const { ethersSigner } = useParaEthersSigner({ provider });
const {
signMessageAsync,
isPending,
data: signature,
} = useParaEthersSignMessage(ethersSigner);
return (
<div>
<button
disabled={isPending}
onClick={() => signMessage("Hello from Para!")}
>
{isPending ? "Signing..." : "Sign Message"}
</button>
{signature && <p>Signature: {signature.slice(0, 20)}...</p>}
</div>
);
}
Sign Structured Messages
import { useParaEthersSigner, useParaEthersSignMessage } from "@getpara/react-sdk";
import { JsonRpcProvider } from "ethers";
const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");
function SignStructuredMessage() {
const { ethersSigner } = useParaEthersSigner({ provider });
const {
signMessageAsync,
isPending,
data: signature,
} = useParaEthersSignMessage(ethersSigner);
const handleSign = () => {
const data = {
action: "authenticate",
timestamp: Date.now(),
nonce: Math.random().toString(36).substring(7),
};
signMessage(JSON.stringify(data, null, 2));
};
return (
<div>
<button onClick={handleSign} disabled={isPending}>
{isPending ? "Signing..." : "Sign Structured Data"}
</button>
{signature && <p>Signature: {signature.slice(0, 30)}...</p>}
</div>
);
}
Sign Personal Messages
import { useParaViemClient, useParaViemSignMessage } from "@getpara/react-sdk";
import { http } from "viem";
import { sepolia } from "viem/chains";
function SignMessage() {
const { viemClient } = useParaViemClient({
walletClientConfig: { chain: sepolia, transport: http() },
});
const {
signMessageAsync,
isPending,
data: signature,
} = useParaViemSignMessage(viemClient);
return (
<div>
<button
disabled={isPending}
onClick={() => signMessage({ message: "Hello from Para!" })}
>
{isPending ? "Signing..." : "Sign Message"}
</button>
{signature && <p>Signature: {signature.slice(0, 20)}...</p>}
</div>
);
}
Sign Structured Messages
import { useParaViemClient, useParaViemSignMessage } from "@getpara/react-sdk";
import { http } from "viem";
import { sepolia } from "viem/chains";
function SignStructuredMessage() {
const { viemClient } = useParaViemClient({
walletClientConfig: { chain: sepolia, transport: http() },
});
const {
signMessageAsync,
isPending,
data: signature,
} = useParaViemSignMessage(viemClient);
const handleSign = () => {
const data = {
action: "authenticate",
timestamp: Date.now(),
nonce: Math.random().toString(36).substring(7),
};
signMessage({ message: JSON.stringify(data, null, 2) });
};
return (
<div>
<button onClick={handleSign} disabled={isPending}>
{isPending ? "Signing..." : "Sign Structured Data"}
</button>
{signature && <p>Signature: {signature.slice(0, 30)}...</p>}
</div>
);
}
Sign Personal Messages
import { useSignMessage } from "@getpara/react-sdk/wagmi";
import { verifyMessage } from "viem";
function SignMessage() {
const { data: signature, isPending, signMessage } = useSignMessage();
return (
<div>
<button
onClick={() => signMessage({ message: "Hello from Para!" })}
disabled={isPending}
>
{isPending ? "Signing..." : "Sign Message"}
</button>
{signature && <p>Signature: {signature.slice(0, 20)}...</p>}
</div>
);
}
Sign Structured Messages
import { useSignMessage } from "@getpara/react-sdk/wagmi";
function SignStructuredMessage() {
const { signMessage, data: signature, isPending } = useSignMessage();
const handleSign = () => {
const data = {
action: "authenticate",
timestamp: Date.now(),
nonce: Math.random().toString(36).substring(7)
};
signMessage({ message: JSON.stringify(data, null, 2) });
};
return (
<div>
<button onClick={handleSign} disabled={isPending}>
{isPending ? "Signing..." : "Sign Structured Data"}
</button>
{signature && <p>Signature: {signature.slice(0, 30)}...</p>}
</div>
);
}