Docs
Message signing
Standard messages

Standard message signing

Standard messaging signing allows for the signing of any arbitrary string message.

💡

If you're looking to sign Structured Data, please click here.

Usage

@micro-stacks/react exports a hook for this: useOpenSignMessage. This hook exposes the callback to interact with a connected wallet. The hook returns a callback, openSignMessage which takes a message of type string value. isRequestPending is also returned, a boolean value to denote if there is a current request open (meaning the use has already requested a signature). The pending state is handled all internally for every wallet request, so you don't need to manually handle any loading logic.

As with all of the hooks that interact with the wallet, you can also pass an onFinish and onCancel callback.

Example

Below you will find a simple component that renders an input and a button. The input is captured in a useState hook, and piped into the openSignMessage callback, wrapped in a useCallback hook.

import * as React from 'react';
import { useOpenSignMessage } from '@micro-stacks/react';

const SignMessageComponent = () => {
  const { openSignMessage, isRequestPending } = useOpenSignMessage();

  const [payload, setPayload] = React.useState(null);
  const [message, setMessage] = React.useState('');

  const onClick = React.useCallback(async () => {
    await openSignMessage({
      message,
      onFinish: walletResponse => {
        setPayload(walletResponse);
      },
    });
  }, [message]);

  return (
    <div
      style={{
        display: 'grid',
        gap: '20px',
      }}
    >
      <h5>Sign a message!</h5>
      <input
        style={{ display: 'block' }}
        onChange={e => setMessage(e.currentTarget.value)}
      />
      <button onClick={onClick}>{isRequestPending ? 'Loading...' : 'Sign message'}</button>
      <code>
        <pre>{JSON.stringify(payload, null, 2)}</pre>
      </code>
    </div>
  );
};

Verification

To verify a signed message, you can import verifyMessageSignature from micro-stacks/connect.

Example

import { verifyMessageSignature } from 'micro-stacks/connect';

// original message
const message = 'hi there how are you';

// from the wallet
const payload = {
  signature:
    '0c956388e3bf84a2873b2fdd9c6845cceb14cea0e342bdc233dbc25e32e84aa77d483f80160541c92bf3d48beed82dcbea58c3d3f93d7cbc3fbefdbd48cecf2e01',
  publicKey: '035b08fd4d14786187f51a3360864665fa437a9ad22bbdf7ae716d4599f26943a7',
};

const isValid = verifyMessageSignature({
  message,
  signature: payload.signature,
  publicKey: payload.publicKey,
});
Last updated on July 13, 2022
Structured data