A simple app that lets you sign a message with an Ethereum account & generate shareable proof-of-signature links Please contact azf20 with questions
git clone -b signatorio https://github.com/scaffold-eth/scaffold-eth-examples.git signatorio
📝 Sign new messages from the home page
- This is the default option
- Signatorio uses "personal_sign" for safe message signing (Metamask have a good history of Ethereum signing methods).
- Write the message you want to sign, with an option to pre-pend the current time (see "Advanced").
- Hash the message if you would prefer to sign a hash (we hash the message with keccak256 ->
- Connect your account (Metamask or WalletConnect are both supported)
- Sign the message! (We directly invoke
personal_signto ensure consistency across wallets)
- Signatorio lets users sign typed data (see "Advanced"), in line with EIP-712: Ethereum typed structured data hashing and signing
- If you don't specify a domain with a chainId, we will populate a domain with
chainId: 1(otherwise Metamask signing fails)
- The component has some simple checks for whether the entered data is a valid JSON, whether it has the required fields, and whether it is able to generate a hash for EIP-712 signing
- Once you are ready to sign, click sign! We use
ethers.utils._signTypedData(), and you should see nicely formatted typedData when you sign in your wallet
- You can 'Create' without connecting your account, which will populate the message in a shareable URL to be signed later
- If you have a message, a signature and address, you can 'Verify' whether the address signed the message by entering all three!
📱 You can view a message at
/view, this requires at least a message or typedData to be a url search parameter (
- If the signature is successful, we pass the message, signature and signer address as URL parameters and link to the
/viewpage. This makes the link & the app immediately shareable with others!
SignatorVieweruses React Router
useLocationto parse the URL parameters, to identify the message or typedData, the signature and the signing addresses
- We can verify whether the signatures match the corresponding signing addresses using
ethers.utils.verifyMessage( messageToCheck , sig )-> if the returned address matches the signing address from the URL parameters.
- However Signatorio also supports smart contract wallets (e.g. Argent), via the EIP-1271. We can check if an address is a contract, and if it is we can use the
isValidSignaturemethod to determine whether the signature was valid.
- There is also some error handling at this step to identify bad data (i.e. addresses that aren't addresses, missing data, invalid & mismatched addresses & signatures)
- On the view page, if you connect an account you can sign the message yourself!
- This appends another signature and signing address to the URL search parameters (we are using comma-separation to represent the arrays of signatures and addresses)
- These are also parsed on page load, checking the signatures
- You can delete signatures, which will remove the corresponding Address and Signature from the URL parameters