Skip to main content

useSignPersonalMessage

Use the useSignPersonalMessage hook to prompt the user to sign a message with their wallet.

Live Editor
function withProviders(
    Component: React.FunctionComponent<object>,
    walletProviderProps?: Omit<ComponentProps<typeof WalletProvider>, 'children'>,
) {
    // Work around server-side pre-rendering
    const queryClient = new QueryClient();
    const networks = {
        testnet: { url: getFullnodeUrl('testnet') },
    };

    return () => {
        const [shouldRender, setShouldRender] = useState(false);
        useEffect(() => {
            setShouldRender(true);
        }, [setShouldRender]);

        if (!shouldRender) {
            return null;
        }

        return (
            <QueryClientProvider client={queryClient}>
                <IotaClientProvider networks={networks}>
                    <WalletProvider {...walletProviderProps}>
                        <Component />
                    </WalletProvider>
                </IotaClientProvider>
            </QueryClientProvider>
        );
    };
}

const UseSignPersonalMessageExample = withProviders(() => {
    const { mutate: signPersonalMessage } = useSignPersonalMessage();
    const [message, setMessage] = useState('hello, World!');
    const [signature, setSignature] = useState('');
    const currentAccount = useCurrentAccount();

    return (
        <div style={{ padding: 20 }}>
            <ConnectButton />
            {currentAccount && (
                <>
                    <div>
                        <label>
                            Message:{' '}
                            <input
                                type="text"
                                value={message}
                                onChange={(ev) => setMessage(ev.target.value)}
                            />
                        </label>
                    </div>
                    <button
                        onClick={() => {
                            signPersonalMessage(
                                {
                                    message: new TextEncoder().encode(message),
                                },
                                {
                                    onSuccess: (result) => {
                                        console.log('signed message', result);
                                        setSignature(result.signature);
                                    },
                                },
                            );
                        }}
                    >
                        Sign message
                    </button>
                    <div>Signature: {signature}</div>
                </>
            )}
        </div>
    );
});

render(<UseSignPersonalMessageExample/>)
Result
Loading...

Arguments​

  • message: The message to sign, as a Uint8Array.

Result​

  • signature: The signature of the message, as a Base64-encoded string.
  • bytes: The bytes of the message, as a a Base64-encoded string.