Wallet UIs

Once PrivyElements is set up, you can start using the UI components to interact with the embedded wallet.

WARNING

Wallet UIs are actively being built. Keep an eye on this page for updates on support for additional flows.

Wallet signatures

To request a signature from a user's wallet, use the signMessage method from the useSignMessage or useSolanaSignMessage hook. As a parameter to this method, pass an object containing the message to sign as a string or Uint8Array.

const {signMessage} = useSignMessage();

const message = 'Some message to have your users sign!'

return (
  <Button onPress={() => signMessage({ message })} title="Sign Message" />
)

This returns a promise that resolves to a SignMessageResult object, with the fields below:

Parameter	Type	Description
signature	string	The signature of the requested message.

Customization

As an optional parameter in the object you pass to signMessage, you can pass an appearance configuration with the following properties to customize Privy's wallet UIs:

Parameter	Type	Description
logo	string	A URL for the logo shown in the Wallet UI. Aspect ratio should be 2:1.
title	string	Title text to show. Defaults to 'Sign message'.
description	string	Description text to show. Defaults to 'Sign to continue'.
buttonText	string	Text for the CTA button. Defaults to 'Confirm signature'.

const {signMessage} = useSignMessage();

const message = 'I hereby vote for foobar';

const VotingButton = () => {
  return (
    <Button
      onPress={() =>
        signMessage({
          message,
          appearance: {
            title: 'Cast your vote',
            description: 'Please sign to confirm your vote',
            buttonText: 'Submit vote',
          },
        })
      }
      title="Prompt Vote"
    />
  );
};

Signing raw bytes

On both Ethereum and Solana it is possible to pass in a string as the message to sign. But you can also pass in a Uint8Array if the message you with to sign is in binary format. Note in this case, Privy's UIs will display the message serialized as a hexstring for the user to preview.

const {signMessage} = useSignMessage();
const message = new Uint8Array([0x01, 0x02, 0x03, 0x04]);

const BinaryMessageButton = () => {
  return <Button onPress={() => signMessage({message})} title="Sign Binary Message" />;
};