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.


_35
const exampleData = {
_35
types: {
_35
StarkNetDomain: [
_35
{ name: "name", type: "felt" },
_35
{ name: "version", type: "felt" },
_35
{ name: "chainId", type: "felt" },
_35
],
_35
Person: [
_35
{ name: "name", type: "felt" },
_35
{ name: "wallet", type: "felt" },
_35
],
_35
Mail: [
_35
{ name: "from", type: "Person" },
_35
{ name: "to", type: "Person" },
_35
{ name: "contents", type: "felt" },
_35
],
_35
},
_35
primaryType: "Mail",
_35
domain: {
_35
name: "Starknet Mail",
_35
version: "1",
_35
chainId: 1,
_35
},
_35
message: {
_35
from: {
_35
name: "Cow",
_35
wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
_35
},
_35
to: {
_35
name: "Bob",
_35
wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
_35
},
_35
contents: "Hello, Bob!",
_35
},
_35
};

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

sign-message.tsx

_24
import { useSignTypedData } from "@starknet-react/core";
_24
_24
function MyComponent() {
_24
const {
_24
data,
_24
isLoading,
_24
signTypedData
_24
} = useSignTypedData(exampleData);
_24
_24
return (
_24
<Button
_24
className="w-full"
_24
onClick={() => signTypedData({})}
_24
disabled={!account}
_24
>
_24
{isLoading ? (
_24
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
_24
) : (
_24
<PenLine className="h-4 w-4 mr-2" />
_24
)}
_24
Sign Message
_24
</Button>
_24
);
_24
}