There are many who would advise against storing sensitive wallet information on a computer or anything connected to the internet. As an alternative, people recommend printing your transaction signing information such as private keys and storing them on what’s called a paper wallet, destined for a locked safe in your home or the bank.

We’re going to see how to create a paper wallet for Ripple XRP coins using Angular and some packages provided by the Ripple development team.

The project we build is not going to be attractive because it is meant to be printed. For that reason it doesn’t need to be attractive. Take a look at the following image:

After clicking the generate button on the page, four values with four QR codes will be generated. The private values should be protected while the public values are meant to be shared.

Create a New Angular Web Application with the Angular CLI

The easiest way to get started with Angular is with the Angular CLI. With the CLI installed, execute the following to create a new project:

ng new ripple-paper-wallet

If you read my previous tutorial which used the ripple-lib package, you’ll remember that there wasn’t actually a way to generate key information. Instead, we’ll be using a different package created by Ripple.

We’re going to be using the ripple-keypairs package and it can be installed into our project by executing the following:

npm install ripple-keypairs --save

Most paper wallet generators that I’ve seen online for any cryptocurrency include QR codes. I couldn’t find a good NPM package for the job, but I found a great browser library called QRCode.js.

The private variables will be used to reference generated QR codes. These variables will not be the QR codes themselves, but more the objects that work with what we are rendering. The public variables referenced by @ViewChild will be actual QR codes rendered on the screen. Because you should never try to interact directly with the DOM in Angular, you should reference them with @ViewChild annotations. The other public variables will hold string values represent each of the codes that reside in our images. We want to have prints of both the QR codes and their values.

The generate method is where things get interesting. The most important part is the generation of our wallet values:

Each of the QR codes uses a local variable. Remember those @ViewChild annotations that were in the TypeScript code? We obtained them from #qrseed and similar. In the HTML we are also printing the public variables that represent the generated data.

Conclusion

You just saw how to generate a cold storage paper wallet for Ripple XRP coins using Angular and a library called ripple-keypairs. Generating paper wallets is great if you plan to store them in a safe, a bank, or anywhere else away from the internet.

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.