SpringWallet: A simple and effective wallet for seamless UI/UX experience


Motivation

User Experience is, without doubt, one of the biggest challenges that the blockchain ecosystem faces. Users might be curious to use decentralized application(dApps), but have limited knowledge about how blockchain works. Having them install Metamask or similar third party extensions creates unnecessary friction and scares them off at the on-boarding stage itself.

Users don’t care about the nuts and bolts of the system, they care about using the dApp and should have immediate access to all the functionality without too many steps involved.

https://giphy.com/gifs/3o752kZpnhfs7Mjq2k/html5

SpringWallet is our solution at making a frictionless wallet from the ground up that would make our non-blockchain users feel comfortable.

https://giphy.com/gifs/uAQm7xzHC0OB2VnSz4/html5

SpringWallet: A new journey

SpringWallet uses Hierarchical Deterministic Wallets (HD wallets) for identity management and blockchain transactions.

HD Wallets were introduced by Bitcoin Improvement Proposal 32 and later improved by BIP 44. HD wallets is the preferred way to integrate a wallet within a dApp. BIP 32 + BIP 44 provides a network agnostic method of generating secure keys in a flexible manner, and is used by the vast majority of cryptocurrencies.

If you want to take a deep dive into HD wallets here is an excellent article explaining it.

SpringWallet is built using two main components: 
1. bip39 
2. ether.js

Bip39 is used to generate random mnemonic phrase of 12 words and ether.js is used to create a wallet from that mnemonic, managing the private keys, and making a transaction in the blockchain on behalf of the users.

How to use SpringWallet

SpringWallet exposes functions which allows it to integrate to any dApp that wants to interact with the SpringChain.

Install SpringWallet npm module:

npm install --save @springrole/springwallet

Import it to your project:

const SpringWallet = require("@springrole/springwallet"); or use
import SpringWallet from "@springrole/springwallet";

1. Generate a random mnemonic for your user:

let mnemonic = SpringWallet.generateMnemonic();

This function generates random mnemonic every time. You can provide the user an option to regenerate mnemonic if you want or just continue with the one that you’ve generated.

2. Encrypt the mnemonic:

Now that we have our mnemonic we can use it to generate our wallet. As the user is not very tech savvy, the dApp has to provide the ability for the user to use the wallet from any device they want. How we can achieve this?

The simple answer is to encrypt the mnemonics and store it to your server on behalf of your user. Meanwhile, the user has to safely store the plain text mnemonic in case they want to reset the password.

https://giphy.com/gifs/dILrAu24mU729pxPYN/html5

Why do we do this?
This way we can send the encrypted wallet back to the user and let them decrypt the mnemonic with the password. To encrypt mnemonic in SpringWallet pass the plain text mnemonic created in the first step in the function encryptMnemonic()

https://gist.github.com/nervehammer/9201a02f8ffe57c7034e61a74b6a16b4

The password is either stored in encrypted form in session storage or can be entered by the user while encrypting mnemonic.

The password is stored in the session storage so that the user has a seamless experience and doesn’t have to enter the password repeatedly to make a transaction. This decision leads to better UX for the dApp.

The password is encrypted and remains in the client’s browser so there is no way the dApp can make a transaction by itself. Only the encrypting mnemonic is what dApps save in their database on behalf of their users.

3. Initializing the wallet:

After encrypting a mnemonic, we still need to create a wallet and we do so with the function initializeAndUnlockWallet().

We need to pass the encryptedMnemonic we generated in step 2. This function first decrypts the mnemonic with the password using the functiondecryptMnemonic(encryptedMnemonic, password).

Here again, encrypted password is stored in session storage, or the user can enter the password if it is not stored in session storage.

https://gist.github.com/nervehammer/d66c43f4cf757a9b2a8c3f6ced435389

This function stores the encryptedMnemonic in the browser’s local storage and returns the wallet address which we can use to identify our user.

At the same time, a wallet instance is also created using the function unlockWallet. This wallet instance remains in memory as long as the browser tab is not refreshed or closed.

A dApp can create a custom timeout logic for wallet instance where they can remove wallet instance after a particular time of inactivity. To recreate wallet instance, use the functionunlockWallet().

This function prompts for password if the encrypted password is not stored in session storage.

Congratulations! Your user has created a wallet, and all of this process happens in the client-side and the dApp has no access to the user’s wallet.

https://giphy.com/gifs/fxsqOYnIMEefC/html5

4. Use wallet:

Here we have a generic function sendTransaction(txParams)to send a transaction in the blockchain.

https://gist.github.com/nervehammer/4c8867923bf84f366e24c96f6fc1dbcd

This function sends any transaction to our SpringChain. You can also fetch the user’s balance using the function fetchWalletBalance()

let userBalance = await SpringWallet.fetchWalletBalance();
console.log("user balance", userBalance);

5. Change wallet Password:

To change a wallet’s password just decrypt the mnemonic by using the functiondecryptMnemonic() and encrypt mnemonic using the new password. Don’t forget to update new encrypted mnemonic in your DB. Reinitialize the wallet just as we did in step 3.

If a user forgets the password of their wallet the dApp doesn’t have the encrypted password stored in the session, in this case, we can’t decrypt the mnemonic then how do we reset a password?

Let’s explore this option in the next step.

6. Reset wallet password:

To reset the password the user has to enter its plain mnemonic phrase that was used to generate the wallet. We pass this plain text mnemonic to function encryptMnemonic() and using the new password we encrypt the mnemonic and using this encrypted mnemonic we initialize the wallet.

Here the dApp has to create a validation function which checks whether the address returned from the functioninitializeAndUnlockWallet() is the same as the previous address. That’s how we reset the wallet password. A dApp can show a user their plain mnemonic phrase using the same decryptMnemonic function.

https://giphy.com/gifs/8Bksh0hra9RcZcSNSO/html5

Conclusion

With the lack of well defined UI/UX patterns, the dApp user base only caters to people who are well versed with the blockchain ecosystem. “Regular” users don’t care about how the dApp works in the background and interacts with blockchain but they do care about the potential benefits a dApp can bring. They want to have access to all the features and flexibility of normal application in a decentralized application.

SpringWallet was created to serve this purpose. From the generation of mnemonic to creation of the wallet, the whole process happens on the client side and the private key never leaves the browser of the user making it more secure than a normally integrated wallet most of dApps provide to its users.

Do give it a try and let us know if you have any feedback!


About SpringRole

SpringRole is enabling everyone’s #VerifiedProfessionalProfile on the Blockchain. It is a decentralised attestation-based professional network platform powered by the blockchain.

SpringRole is the platform where people can view, share and get attestations on their professional profile, thereby creating a verified resume that they can share and use. A user’s educational qualifications and work experience are verified by the organisations themselves and written directly to the blockchain. To assess a user’s skill set, SpringRole has a system of weighted endorsements that let users objectively look at people’s profiles and assess their skill level.

Learn More

To learn more, and be up-to-date about all-things-SpringRole:

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A day in the life
Previous Story

Building on Blockchain: a Day in the Life of a Tech Lead

Blockchain Technology
Next Story

Blockchain Is Powering The Next Renaissance, And Humanity Would Rejoice Its Birth For Time To Come

Latest from Uncategorized