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

• Install Go-Ethereum to set up your own private Ethereum Blockchain (You can refer to our tutorial for how to setup a private ethereum Blockchain
• Install the TestRPC Ethereum client for testing and development – https://github.com/ethereumjs/testrpc
• Install Truffle which is a testing framework and asset pipeline for Ethereum – https://github.com/ConsenSys/truffle
• Install Meteor JS which is a full-stack JavaScript platform for developing modern web and mobile applications – https://www.meteor.com/install

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

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.

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.

You can now 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.

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.

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.

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.

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.

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.

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

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.