Getting Started with Waves Signer
The working demo of the Waves Signer based application can be seen at https://vlzhr.github.io/waves-signer-example/src/. In this tech article I will describe the process of its creating step-by-step after a short introduction.
The official Waves Signer documentation is available here.
What is a problem?
User experience is one of the most challenging parts of dApps development. In my opinion, one of the key reasons for a lack of the technology adoption is a pretty high entry level. It’s difficult to start using blockchain! Partially, because of the inconvenient user authorisation approach.
For a long time, the only trustless way for a developer to implement authorisation in his Waves-based web application was a browser extension — Waves Keeper.
Waves Keeper is a technology that helps the user to store accounts data and to use it for creating transactions and authorisation in 3rd-party applications. It is secure but also has an important drawback: it’s necessary to install the extension before using it.
This means the dApp’s full functionality cannot be provided to the website visitor if he doesn’t have Waves Keeper installed. Such a good reason to say that the blockchain’s entry level is too high for mass adoption, right? 🙂
What is Waves Signer?
The new product called Waves Signer is created to partially solve the problem and remove a barrier for users in a Waves ecosystem. 🎉
Since now, developers can use Waves Signer functionality to allow users authorise using any preferable way — using any signature provider.
The following products can be used as a provider:
- Waves.Exchange Client
- Waves Desktop Client
- Waves Keeper
- Ledger … or any other private key storage
For now, Waves.Exchange provider is ready. It means, 🔷 users can authorise in the 3-rd party applications using the Waves.Exchange account in any browser 🔷 without downloading any extensions.
Right after the next picture I will describe the steps that developers need to do for implementing this feature to their dApps.
How to use Waves Signer?
Let’s discover the functionality that developers can implement to their dApps using Waves Signer. We will build an easy JS application step-by-step. The example is also published at github.
Our plan will be:
- Setup our environment
- Creating simple UI (user interface)
- Preparing Waves Signer for a smooth integration
- Using all the power of Waves Signer 💥
Let’s code!!!
Environment
We will use a simple JavaScript with Webpack bundler. To set up the environment please:
- Prepare the webpack.config file
- Install the signer and provider libraries using npm
npm i @waves/signer @waves.exchange/provider-web
User Interface
Let’s start coding by creating the UI. Nothing special, just a simple HTML page with four buttons: index.html
Later we will add handlers to these 4 buttons.
Preparing Waves Signer
Now let’s use Waves Signer and Waves.Exchange Provider libraries to create the waves object in the new JS file: index.js
SEED provider is the another provider option. Here is the way you can use it in your projects:
Since now we have the waves object that can be used to create and sign transactions using Waves.Exchange profile. Let’s add some basic functionality to the buttons’ handlers! 😃
User Authorisation
Waves Signer can be used to get the public data of an active user account from Waves.Exchange client.
As a result of this function the account address is displayed in a button. Waves.Exchange provides this information without revealing private key or seed of the account owner.
The Provider can use a seed phrase to sign transactions as well, so we can make Waves Signer send the transactions! 👍
Invoke Script Transaction
The Invoke Script transactions are used to call smart contracts created using Ride. Let’s add the function that calls a faucet script which will top up the balance of an active account.
You can see that waves object has invoke() method that creates the invoke transaction which is being sent to the blockchain using broadcast() method. The broadcast() returns a promise that can be handled as a usual one.
By the way, the great advantage of a new Waves Signer library is that developers don’t need to add the commission value into transaction object: the minimum fee amount is count by default.
If the script is called by user successfully, his account will have non-zero balance. It means the user now can pay fees and broadcast more transactions!
Data Transaction
One of the Blockchain purposes was initially users data storing. Waves Signer makes this process easier. Developers can add the sending data to blockchain functionality in a very simple way:
As a result of this handler, the current time will be sent to blockchain.
The only thing that was changed in a code comparing to the previous function is a method name. You can use waves.data() to create data transaction object.
Transfer Transaction
The last button will be used to send a minimum amount of tokens to a hardcoded address using Transfer Transaction:
Extremely easy and predictable code, right? 🙂
Please, take a look at the full JS file in the repo: https://github.com/vlzhr/waves-signer-example/blob/master/src/index.js
Conclusion
Waves Signer is a new product built to remove the entry barrier for the Waves ecosystem users making the authorisation via providers much easier. There are 2 providers right now — seed provider (for tests mostly) and provider from Waves Exchange client but many others will be added in the future.
Implementing Waves Signer functionality is pretty simple for 3rd party developers. I hope, this article helped you to get the basic understanding of implementation process! 👏
Links
Waves Signer documentation
docs.wavesplatform.com
Waves Signer source code
https://github.com/wavesplatform/signer
Waves.Exchange Provider source code
https://github.com/waves-exchange/provider-web
Waves Signer “Hello World” Example
https://github.com/vlzhr/waves-signer-example
Please share your feedback & ask any tech questions!
Developers Chat 🎁
https://t.me/waves_ride_dapps_dev
Thanks to Daniil Tsigelnitskiy and Inal Kardanov for assistance in preparing this tutorial.
