Changelly Addon for NanoWallet and How to Add Modules to NanoWallet

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 addon for the NanoWallet. The rest of this article is written from his perspective, attempting to write a NanoWallet addon with no documentation. Since as of right now there's no documentation on the NanoWallet, here's what I figured out so far. 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). ```
...
``` 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](https://github.com/nikhiljha/nanowallet-changelly). This is a companion discussion topic for the original entry at [blog.nem.io/changellyaddon_nanowallet](http://blog.nem.io/changellyaddon_nanowallet/)
1 Like

This is a great exhibition of simplicity in the NEM blockchain technology.

1 Like