Ethereum – Ethereum Wallet Using Meteor

September 13, 2018

Author: Srinivasan Swaminathan

Tutorial - MLG Blockchain

Create an Ethereum Wallet Using Meteor

This is the first in a two part series on how to create an Ethereum wallet using Meteor. This tutorial will go over how to get account balance information in Ethereum. To see how to create a wallet smart contract, you can check out this solidity development tutorial.

There are certain prerequesites that you must have in order to follow this tutorial. These are listed below

To build the wallet Dapp start with the following file structure.

Folders in Meteor Ethereum Wallet

From the root of our folder in the client directory create a /lib folder which is used to store all code that is meant to run on both the client and the server. Create the file init.js inside the /lib directory which is to use the Ethereum JavaScript API called web3. Web3 is an API to interact with the ethereum blockchain using a connection to a local node.

Add the meteor web3 package to our project folder as shown below.

Add web3 in Meteor

Do the same thing to add the ethereum: accounts package which will give information about the currently available ethereum accounts and balances. Next add iron: router package which will help to navigate to different pages through the web browser and add the twbs: bootstrap API for styling your front end. Use the following command in your init.js file to create a web3 object.

Create web3 object

You can now use your private key to generate a public key.

Use your private key to generate a public key

Also initialize ethereum accounts with the following code.

EthAccounts.init()

Now we can start to deign the UI using meteorJS and HTML. In your client folder create a folder called templates and then two folders inside called components and views.

The components directory contains helper functions that are attached to each template and execute code in the template. The views folder is for the HTML that the browser will read.

In your views folder create a file called accountInfo.html and in your components folder create a file called accountInfo.js, which will contain the helper functions. The code below can be used to create an account name, a public address and a balance of each account in the private ethereum blockchain network.

Meteor code for Ethereum accounts

If a helper function returns an array of data, we can loop through the data from within a template by using the ‘each’ syntax, as shown below. Account name, address and the balance of each account will be generated as an array of data.

Loop through Ethereum accounts

Next, create a file called route.js inside your lib folder, which is used to navigate throughout our application. The code for route.js is shown below.

Navigate through Ethereum wallet

Main.html is the default page that is loaded at the beginning. It will contain all the HTML tags and will provide functionality to loop to all the other pages. The helper command {{> yield}} works as a placeholder for dashboard content which will be injected when the route in run.

Ethereum wallet main page

Now we can start our application from the terminal from within the project directory by running the command “meteor”, as shown below. Meteor will run the application at localhost:3000.

Start Meteor Ethereum wallet

Make sure that from a different terminal window, you run testRPC. You can do this by running the command testrpc from the same project directory and you will see a list of available Ethereum accounts.

Testrpc Ethereum blockchain

When you open the web browser and copy and navigate to localhost:3000 you should see the following output.

Frontend of Ethereum wallet

MLG Blockchain is a blockchain development and consulting firm based in Toronto that is focused on building next generation applications using blockchain and smart contract technology. View all our blockchain development tutorials at www.mlgblockchain.com/learn.html.