useSignMessage

Returns value:

data: Uint8Array | null // signed message
loading: boolean // displaying loading state
error: Error // displaying error message if something went wrong
signMessage: (message: Uint8Array) => Promise<Uint8Array> // function to execute sign message

Example (live demo https://aleo-react-boilerplate.vercel.app/useSignMessage):

import { useSignMessage } from 'aleo-hooks'
import { FC, useCallback, useState } from 'react'
import { Button } from '../button'
import { Input } from '../input'
import { cn } from '@bem-react/classname'

import './sign-message.scss'

const CnSignMessage = cn('sign-message')

const Encoder = new TextEncoder()

export const SignMessage: FC = () => {
    const { data, signMessage, error, loading } = useSignMessage()
    const [message, setMessage] = useState('')

    const messageChangeCallback = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setMessage(e.target.value)
    }, [])

    const submit = useCallback(() => {
        signMessage(Encoder.encode(message))
    }, [message, signMessage])

    return (
        <div className={CnSignMessage()}>
            <h2>Sign message</h2>

            <div className={CnSignMessage('values')}>
                <div className={CnSignMessage('valuesItem')}>Loading: {String(loading)}</div>
                <div className={CnSignMessage('valuesItem')}>Error: {error?.message}</div>
                <div className={CnSignMessage('valuesItem')}>Data: {data}</div>
            </div>

            <Input placeholder="Message" value={message} onChange={messageChangeCallback} />
            <Button onClick={submit}>Sign message</Button>
        </div>
    )
}