Demos
Sign Message

Sign Message

This example shows how to sign a message.

Sign Message

Sign a message using the Starknet wallet

The useSignTypedData hook

The useSignTypeData hook implements signature in the spirit of EIP-712.

The hook accepts 4 arguments:

  • types: type definitions used in message. Must contain the StarkNetDomain type defined below.
  • primaryType: the root type of message.
  • domain: its structure must follow StarkNetDomain.
  • message: the message to sign and that will be displayed in the wallet.

Example data

The following snippet contains an example JSON document.

1
const exampleData = {
2
types: {
3
StarkNetDomain: [
4
{ name: "name", type: "felt" },
5
{ name: "version", type: "felt" },
6
{ name: "chainId", type: "felt" },
7
],
8
Person: [
9
{ name: "name", type: "felt" },
10
{ name: "wallet", type: "felt" },
11
],
12
Mail: [
13
{ name: "from", type: "Person" },
14
{ name: "to", type: "Person" },
15
{ name: "contents", type: "felt" },
16
],
17
},
18
primaryType: "Mail",
19
domain: {
20
name: "Starknet Mail",
21
version: "1",
22
chainId: 1,
23
},
24
message: {
25
from: {
26
name: "Cow",
27
wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
28
},
29
to: {
30
name: "Bob",
31
wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
32
},
33
contents: "Hello, Bob!",
34
},
35
};

This how you can use the hook to request the user to sign a piece of data.

sign-message.tsx
1
import { useSignTypedData } from "@starknet-react/core";
2

3
function MyComponent() {
4
const {
5
data,
6
isLoading,
7
signTypedData
8
} = useSignTypedData(exampleData);
9

10
return (
11
<Button
12
className="w-full"
13
onClick={() => signTypedData({})}
14
disabled={!account}
15
>
16
{isLoading ? (
17
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
18
) : (
19
<PenLine className="h-4 w-4 mr-2" />
20
)}
21
Sign Message
22
</Button>
23
);
24
}