To continue on my technical journey of cryptocurrency coin management, I figured it would be a good idea to share how to create a paper wallet for DigiByte DGB coins. A few weeks back I had written a tutorial titled, Generate Cold Storage Paper Wallets for Ripple XRP Coins with Angular, but we all know Ripple isn’t the only technology on the block.

In case you’re unfamiliar with paper wallets, they are nothing more than printouts that contain your private and public key information. It is separated from the internet and the paper wallets can be placed in a cold storage location like a locked safe or a bank.

We’re going to see how to use JavaScript and the Vue.js framework to generate DigiByte DGB wallet information that includes QR codes for easy scanning.

So what do we hope to accomplish by the end of this guide? Take the image below for example:

As you can see, we have four different QR codes and four different hash values. The private values should be heavily protected while the public values can be shared. You’d hit the generate button and then print the page.

Creating a New Vue.js Web Application with Dependencies

The easiest way to create a Vue.js web application is by using the CLI. However, because we won’t be using Webpack in this example, it doesn’t really matter as it will be simple regardless. You’ll see by the end of this guide how easy it was.

From the Vue CLI, execute the following:

vue init simple dgb-paper-wallet

The above command will leave you with a project and a single index.html file when you’re done.

When generating a wallet, it is a bad idea to be connected to the internet. You never know what kind of malware is lingering around on your computer or the server you’re trying to run from. For this reason, we need to download a pre-built Vue.js rather than use the CDN.

The above commands will clone the repository, install all the necessary build dependencies, and then build a browser bundle of the project. In theory, a digibyte.min.js file should be generated, but I was only able to get a digibyte.js file. For this project, it doesn’t really matter. Copy the digibyte.js file into your Vue.js project.

At this time your project directory should look like the following:

index.html
qrcode.min.js
digibyte.js
vue.js

Before we start some actual development, let’s include the dependencies in our index.html file. Open it and include the following within the <head> tags:

Remember, we’ve swapped out pkg.com/vue with the local vue.js file. Ready to start the development of your paper wallet?

Generating DigiByte Wallet Information with JavaScript

There is a lot of stuff to cover, but it really isn’t difficult. With any Vue.js project you’re going to have a <script> section, a <style> section and then a bunch of HTML markup. While this is all in the index.html file, let’s start with the <script> content:

The above <script> block probably looks a bit scary, but it really isn’t. There is just a lot of repetition. In the data section we are defining all variables that can be bound to the HTML. When the application loads and the mounted method is triggered, it will call our generate method.

We can call the generate method by clicking the button and each variable can be rendered to the screen. Remember the $refs object? There are four <div> tags that have a ref attribute with a matching name. This is how we are able to interact with the DOM.

Finally, we have the <style> section, which isn’t truly necessary in this example because we don’t need it to look attractive, we only need it printable.

Remember, even though it seemed like a lot was going on, the reality is that it didn’t take much to generate wallet information and display QR codes for it with Vue.js. If you wanted to be a minimalist, this could have been done in just a few lines of code for printed text.

Conclusion

You just saw how to create a cold storage wallet for holding all your DigiByte DGB coins. This wallet, while nothing fancy, was created using only JavaScript and the Vue.js framework.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.