read

The NanoWallet was finally released in a beta stage this September with many new features previous wallets never had. One such feature was easy extensibility via add-ons. One community developer, Nikhil, decided to see just how easy it was to create an add-on for the NanoWallet. The rest of this article is written from his perspective, attempting to write a NanoWallet add-on with help from this documentation.

Before starting this project, the documentation above hadn't been published, but here's what I figured out. A module is simply a folder with the following directory structure at minimum.

- index.js
- ModuleName.config.js
- ModuleName.controller.js
- ModuleName.html

In this blog post, I'll be going over the basic file layouts of all of these files, as well as everything I needed to do to implement Changelly.

index.js

import angular from 'angular';

let ChangellyModule = angular.module('app.changelly', []);

import ChangellyConfig from './changelly.config';  
ChangellyModule.config(ChangellyConfig);

import ChangellyCtrl from './changelly.controller';  
ChangellyModule.controller('ChangellyCtrl', ChangellyCtrl);

export default ChangellyModule;  

It's pretty standard JavaScript, with three key parts.

  1. Declaration of the module name
  2. Declaration of the configuration file
  3. Declaration of the controller

Adapting this to a module that, say, implements the Poloniex trollbox would be simple. You could just copy and paste this and change variable names.

ModuleName.html

(For me it was called changelly.html).

<div class="changelly-page">  
    ...
</div>  

This is simply the html that you want to display in your module. The module can either be implemented as a tab or as an item nested within a tab.

ModuleName.config.js

(For me it was called changelly.config.js).

function ChangellyConfig($stateProvider) {  
    'ngInject';

    $stateProvider
        .state('app.changelly', {
            url: '/changelly',
            controller: 'ChangellyCtrl',
            controllerAs: '$ctrl',
            templateUrl: 'modules/changelly/changelly.html',
            title: 'Convert to XEM'
        });

};

export default ChangellyConfig;  

Very straightforward configuration, almost no thinking required on my part.

ModuleName.controller.js

(Mine was called changelly.controller.js).

class ChangellyCtrl {  
    constructor($location, Alert, Wallet) {
        'ngInject';

        // Alert service
        this._Alert = Alert;
        // $location to redirect
        this._location = $location;
        // Wallet service
        this._Wallet = Wallet; 

        // If no wallet show alert and redirect to home
        if (!this._Wallet.current) {
            this._Alert.noWalletLoaded();
            this._location.path('/');
            return;
        }

        TODO: Your code.

export default ChangellyCtrl;  

This is where the real magic happens. The above snippet isn't mine, but it's a taste of what can be accessed by the modules.

Using the controller you're able to interact with the NEM related functions of the wallet, such as sending, receiving, and signing messages.

For the Changelly addon, it was used in order to retrieve the user's address and send it to Changelly.

Once the module is ready it needs to be defined inside the main application file (app.js) along with other modules.

// Import our app modules
import './modules/home';  
import './modules/dashboard';  
import './modules/signup';  
...
import './modules/mosaics';  
import './modules/explorer';  
import './modules/importanceTransfer';  
import './modules/faq';  
import './modules/changelly';  

And finally added to the application “requires” (app.js)

// Create and bootstrap application
const requires = [  
    'ui.router',
    'templates',
    'app.layout',
    'app.components',
    'app.filters',
    'app.home',
    'app.dashboard',
    'app.transferTransaction',
    'app.createMultisig',
    …
'app.changelly'  
];

Conclusion

Writing the Changelly addon for the NanoWallet was very easy, and can be done by nearly any web or javascript developer. Rather than allow the user to interact with the chain directly (like Ethereum), we can build great user experiences by extending the wallet.

The code for the Changelly addon is availible on github.

The NEM team would like to thank Nikhil contributing this blog.

Blog Logo

A Nember


Published


Image

NEM

Official Blog of NEM/XEM

Back to Overview