Build A Ripple XRP Wallet For Android And iOS With Ionic Framework

A few days ago I released, what turned out to be, a very popular article around developing a Ripple XRP wallet. It was titled, Create a Cross-Platform Desktop Ripple XRP Wallet with Vue.js and Electron, and it focused on cross-platform desktop application development. A popular request on Twitter was around developing a mobile Android and iOS wallet for Ripple XRP coins.

We’re going to see how to use Ionic Framework and Angular to create a Ripple XRP wallet for Android and iOS. Because our desktop application focused on the JavaScript stack, our mobile application will be able to recycle a lot of our code.

There are a lot of mobile frameworks that make use of JavaScript. For example, React Native, NativeScript, and Ionic Framework are all options for mobile development with JavaScript. However, the Ripple library is only Node.js or browser compatible. You might be wondering, well if it is Node.js compatible, what is the problem? The problem is that it uses libraries that aren’t yet available for native frameworks like NativeScript and React Native. Because Ionic Framework operates within a packaged web browser, we’ll be able to use the browser compatible version of the library.

So what do we plan on building in this example? Take a look at the screenshot below.

We’re trying to reproduce what we saw in the previous example, but this time mobile friendly. We’re going to take an address, look up the balance, and compare it to the current market value using libraries and public APIs.

Create a New Mobile Project with Ionic Framework

At this point we’re going to assume your computer is properly configured for Android and iOS development and that you have the Ionic Framework CLI installed. Using the CLI, create a new project with the following command:

ionic start ionic-ripple-wallet blank

This will leave us with a clean Ionic Framework project, which as of now, is version 3.9.2. We won’t be including any Node Package Module (NPM) dependencies for this particular project.

At this point we can get our JavaScript library for Ripple and start implementing some logic.

Building the Ripple Library for the Web Browser

Before we can start developing, we need to build the Ripple library for use in web browsers. Remember, our previous example had full Node.js support, so we could use NPM. We don’t have that luxury for this example as we’ll get errors if we tried.

We’ve added the scripts to the <head> because we want them to be loaded and available before Angular starts doing its magic. Since we’ll be issuing HTTP requests, we’ll need to add the Angular HTTP module.

Open the project’s src/app/app.module.ts file and make it look like the following:

We are defining the Ripple server and an address. I’ve provided my own public address, r3qpzJaUnhRqBgvXwC26Mk6jGpRi89Aoin, but you could easily use the ripple-keypairs library to get your address from your private key.

To keep things Angular friendly, we’re going to work with observables rather than promises. We create a new observable, convert our connection promise into an observable, switch to another observable stream after connecting, the new observable stream will get our balance, and then we’ll disconnect from the API. When we subscribe to this observable, everything in the chain happens. Welcome to RxJS and reactive extensions!

We want to subscribe to both observables in parallel similar to Promise.all and this can be done with a forkJoin operator. When the observables have finished, we can do some basic math to figure out the dollar value for our XRP coins.

Now we can jump over to the HTML markup. Open the project’s src/pages/home/home.html and include the following:

Nothing fancy is happening in the above markup. We’re using some Ionic Framework tags and rendering our public variables to the screen.

At this point, you should be able to build for either Android or iOS.

Conclusion

You just saw how to create a mobile Ripple XRP coin wallet for Android and iOS using web technologies with Ionic Framework. While not a native mobile application, we chose Ionic Framework and the WebView because ripple-lib was browser friendly and not compatible with the native frameworks.

If you wanted to, you could take the previous Vue.js with Electron tutorial, swap out Vue.js, and include Angular. You could even rely strictly on the renderer process with the browser version of the library.

My public Ripple XRP address is r3qpzJaUnhRqBgvXwC26Mk6jGpRi89Aoin if you’re interested in donating some coin.

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.