Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Create Paper Wallets For Stellar XLM Coins With Angular

TwitterFacebookRedditLinkedInHacker News

Continuing down my adventure of learning about and investing in various cryptocurrencies, I thought I’d explore Stellar, which is what I understand to be, a competitor to Ripple. If you’ve been keeping up, you’ll remember that I had written about creating a Ripple XRP paper wallet in a tutorial titled, Generate Cold Storage Paper Wallets for Ripple XRP Coins with Angular.

In this tutorial, we’re going to see how to accomplish the same task of generating a cold storage paper wallet with Angular, but this time we’ll be doing it for Stellar XLM coins.

Let’s first get an understand of what it is that we hope to build. Take a look at the following simple, yet functional, image.

Stellar XLM Paper Wallet Generator with Angular

When the generate button is pressed, a new public and private key combination is generated as well as QR codes representing each of those keys. In theory, once you’ve generated the information, you’d print it out and store it somewhere safe.

Much of what comes next is inspired by the official Stellar paper wallet generator found on GitHub. However, I’ve noticed that the libraries for that project are not frequently updated with the latest code.

Creating a New Angular Project with the Angular CLI

Without question, the easiest and probably best way to get started with an Angular project is to use the Angular CLI. With the CLI available, execute the following command from your Command Prompt (Windows) or Terminal (Mac and Linux) to create a new project:

ng new stellar-project

When the command finishes, you’ll be left with a project with all the necessary Angular dependencies.

Including the Stellar Base and QR Code Project Dependencies

Before we can start generating wallets, we need two different project dependencies. We need a dependency for generating QR codes, and we need a dependency for working with Stellar.

The simplest dependency to obtain is our Stellar dependency. From the command line, execute the following:

npm install stellar-base --save

Unlike other cryptocurrency libraries, we don’t first need to browserify the Stellar library. Using the Node Package Manager (NPM) will install a perfectly compatible version of the library for us.

We don’t have the same NPM luxury when it comes to our QR code dependency. There are quite a few options circulating the internet, but I’ve found the simplest is QRCode.js. Download the qrcode.min.js file from the online repository and include it in your project’s src/assets directory.

Angular and Webpack will automatically include the Stellar dependency in our build, but for the QR code dependency, we need to add it to the project’s src/index.html file like so:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>StellarPaper</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
        <app-root></app-root>
        <script src="/assets/qrcode.min.js"></script>
    </body>
</html>

At this point in time, we can focus on the actual driving logic behind generating wallet addresses.

Developing the Simplistic Logic and UI for the Stellar XLM Paper Wallet

We’re going to spend all of our time in three different project files. We’re going to add a small amount of CSS, develop TypeScript logic, and add HTML markup to render information to the screen.

Open the project’s src/app/app.component.ts file so we can start adding some TypeScript logic. Within the open file, include the following code:

import { Component, ViewChild, ElementRef } from '@angular/core';
import * as StellarBase from "stellar-base";

declare var QRCode: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    @ViewChild("publicKey")
    public publicKeyImg: ElementRef;

    @ViewChild("privateKey")
    public privateKeyImg: ElementRef;

    public wallet: any;

    public constructor() {
        this.wallet = {
            publicKey: "",
            privateKey: ""
        }
    }

    public generate() {
        let keypair = StellarBase.Keypair.random();
        this.wallet.publicKey = keypair.publicKey();
        this.wallet.privateKey = keypair.secret();
        this.privateKeyImg.nativeElement.innerHTML = "";
        this.publicKeyImg.nativeElement.innerHTML = "";
        new QRCode(this.privateKeyImg.nativeElement, this.wallet.privateKey);
        new QRCode(this.publicKeyImg.nativeElement, this.wallet.publicKey);
    }

}

So what exactly is happening in the above code? Let’s figure this out!

You’ll notice that when we’re importing our classes to be used, we’re also importing the Stellar package that was previously downloaded:

import { Component, ViewChild, ElementRef } from '@angular/core';
import * as StellarBase from "stellar-base";

Because we didn’t use NPM to install the QR code dependency, we need to declare the class, otherwise we’ll get TypeScript errors when we try to compile:

declare var QRCode: any;

Within the AppComponent class we have a selection of public variables. Variables annotated with a @ViewChild are bound to HTML DOM elements. The QR code library uses the DOM, so the best way to obtain the elements in Angular are to reference them locally with the @ViewChild annotations. The wallet variable will hold our public and private key strings.

In the constructor method, we focus on initializing our wallet variable.

The core logic comes into play inside the generate method:

public generate() {
    let keypair = StellarBase.Keypair.random();
    this.wallet.publicKey = keypair.publicKey();
    this.wallet.privateKey = keypair.secret();
    this.privateKeyImg.nativeElement.innerHTML = "";
    this.publicKeyImg.nativeElement.innerHTML = "";
    new QRCode(this.privateKeyImg.nativeElement, this.wallet.privateKey);
    new QRCode(this.publicKeyImg.nativeElement, this.wallet.publicKey);
}

Using the stellar-base dependency, we can generate a random public key and private key pair. Every time we call the generate method, we clear out the DOM elements that hold our QR codes. We do this to prevent the codes from doubling up. Finally, a new QR code image is generated based on the DOM element and the private and public key variables.

So what does the HTML look like?

Open the project’s src/app/app.component.html file and include the following:

<p><button type="button" (click)="generate()">Generate</button></p>
<p>Only share your public key!</p>
<table>
    <tr>
        <td>
            <h2>Private Key</h2>
            <div #privateKey></div>
            <p>{{ wallet.privateKey }}</p>
        </td>
        <td>
            <h2>Public Key</h2>
            <div #publicKey></div>
            <p>{{ wallet.publicKey }}</p>
        </td>
    </tr>
</table>

In the above HTML, we have a button that calls the generate method when clicked. Inside the table, notice the #privateKey and #publicKey attributes. These are the local template variables which allow use to use the @ViewChild annotations. You’ll notice that they hold the same names.

Finally, we have our simple CSS. Open the project’s src/styles.css and include the following:

table {
    width: 100%;
    border: 1px solid #000000;
    padding: 20px;
}

h2 {
    margin: 0;
    margin-bottom: 20px;
}

We’re essentially just making the paper wallet a little more printer friendly. If you run the project, it should work without any issues.

Conclusion

You just saw how to create a paper wallet for Stellar XLM coins using Angular and some available JavaScript libraries. Because the Stellar JavaScript libraries are so good, the process for interacting with them and generating keys is very simple.

If you found this tutorial useful and you’re holding a lot of XLM coins, consider donating to GANRQF6LV7N4SKTGSPOZQDPQPWI2VQ4DUFO2CT7MO24L4DGIC6U5RZBS, which is my public address.

In case you’re interested, you can check out my previous tutorial which focuses on generating Ripple XRP paper wallets with Angular.

Nic Raboy

Nic Raboy

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

Search

Follow Us

Support This Site