Scout App for monitoring

Install Metamask

Metamask is a browser extension that allows your web browser to connect to Ethereum blockchains (networks). That can be the main network, one of the 3 test networks, or your local development network. It’s available for Google Chrome, Firefox and Opera. Let’s go ahead and install that right now. After you add it to your browser you are redirected to its page with a video explaining how to set it up.

After you accept the Terms and Conditions it asks for a password. Make this a good password because it is the main password of your Metamask wallet. All accounts created with Metamask will be kept in this wallet.

After you set the password, twelve words will appear; this is the seed phrase for your account. Keep these words in a safe place. They can be used to recover your account if you forget your password or lose your private keys.

When finished, you will see the connection to the main Ethereum network.

Deploying to Testnet

Let’s deploy our smart contract to the Ropsten Ethereum network, which is one of the test networks (testnets). To do this we’ll need some test Ethers. You can get them from websites called faucets that provide a limited amount of testnet Ether for free every minute. One such faucet is http://faucet.ropsten.be:3001/. First, connect Metamask to the Ropsten testnet and then copy your account’s public address.

image alt text

Click the three dots button and choose Copy Address to clipboard.

image alt text

Go to the faucet page and enter your address to receive one test Ether which will be more than enough.

image alt text

You will notice your address appear in the faucet queue. When it leaves the queue, that means your test coins have been transferred. It could take about 10 minutes for you to see your coins in Metamask.

Deploying to Testnet

Once we have Metamask installed, the simplest way to deploy our smart contract is via remix. Remix is the online Solidity IDE that we used on Day One.

Copy the contents of DailyToken into the online editor. There should be no errors in red boxes in the right sidebar; the warnings are not a problem.

Look at the menu on the top right. Choose Run and you will see the following panel.

image alt text

Here you have options to choose which environment to deploy to and which account to deploy from. Also you can set a Gas limit on the Gas needed to deploy the contract, as well as choose a value (Ether) to send to a smart contract. Some contract functions can be declared as *payable*;they will not execute if you don’t send enough Ether.

For now just change the Environment to *Injected Web3*. This means it will use the web3 instance injected by Metamask. The account on that web3 instance has our test Ether coins.

image alt text

Your account should change and the test Ether balance should appear next to it.

To deploy the smart contract just supply the constructor arguments for our contract and then click Create.

The total supply should be a number, and the owner’s address should be in quotes:

image alt text

After you click Create, a Metamask window will appear where you will confirm the transaction.

image alt text

This shows the Gas Limit and Gas Price that will be used to create this contract, as well as how much Ether that would cost — in this case, 0.000829 ETH or 0.72 USD. That is quite cheap for deploying to a network of thousands of computers worldwide. Click Submit.

In the Remix console you’ll see your transaction pending for a few minutes;when it finishes, the receipt will appear.

image alt text

In the bottom half of the right sidebar you will notice all the methods from our contract have their own action buttons. You can just click the totalSupply and owner buttons and the values will appear immediately. These are instantaneous because they are calls, not transactions.

For every call you make again in the console you get a detailed overview of what was called, by whom, and the return value.

image alt text

Make sure the owner’s address is your account’s address.

Now let’s use this deployed contract in our application without running the local blockchain.

Using the Deployed Contract in our DApp

First copy the address of the contract from the field that says DailyToken at to clipboard and use it in the initialization of the contractInstance variable.

When Metamask is enabled, it automatically injects its own instance of the web3 library initialized with the network and account that are chosen. This is attached to the browser’s *window* object. So in our code we need to replace

var web3 = new Web3(new Web3.providers.HttpProvider("[http://localhost:9545](http://localhost:9545)"));

with

var web3 = window.web3;

Just to make sure that Metamask has had a chance to inject the library, we’ll wrap all our code into the document ready section. So the initialization ends up looking like this:

$(document).ready(function() {
var web3 = window.web3;
var abi = [...];
 var TokenContract = web3.eth.contract(abi);
var contractInstance = TokenContract.at(0x2687f4b9c26b305fad2d6b3642419f6bea0a7ed7);

We use the address of the deployed contract to get the contract instance from the Ropsten test network.

Next we need to make all our function calls asynchronous; the transactions already are but the calls aren’t. First, add a callback parameter to the getBalance function:

function checkBalance(accountAddr, clb){
  contractInstance.balanceOf.call(accountAddr, {from: accountAddr}, clb);  
}

And now add the actual callback handler. The callback results use the error first format.

$('#checkBalanceBtn').click(function(){
    owner = $('#ownerAddress').val();
    checkBalance(owner, function(err, rez){
      console.log("async balance rez");
      console.log(rez);
      $('#showBalance').html("Your balance is " + rez.toString());
    });
  });

Also update the sendTokens function because we’re calling getBalance inside of it. Add a callback as the last parameter:

function sendTokens(senderAddr, recipientAddr, amount, clb){
  contractInstance.transfer(recipientAddr, amount, {from: senderAddr}, function() {
    checkBalance(recipientAddr, clb);
  })
}

And the onClick handler:

$('#sendTokensBtn').click(function(){
    let sender = $('#senderAddress').val();
    let recipient = $('#recipientAddress').val();
    let amount = $('#amount').val();
    sendTokens(sender, recipient, amount, function(err, rez){
      $('#showBalance').html("Your balance is " + rez.toString());
    });
  })

Let’s test the Send Tokens functionality. Use the same account that deployed the smart contract as the sender of tokens. For recipient you can create a new account with Metamask:

image alt text

Copy the new account’s address to the R**ecipient field but then make sure in Metamask to once again select your main (owner) account before making the transfer.

image alt text

When you click Send Tokens a transaction is about to be executed. Metamask will generate another pop-up for you to confirm the transaction.

image alt text

This is a great feature of Metamask that forces you to confirm every transaction. Otherwise, a malware DApp could make many transactions in the background without your knowledge.

You can see the cost of the transaction, but you can’t see the tokens being transferred because no real tokens are transferred. All that’s happening is a change of the state to the contract.

After a few minutes the balance of the recipient should show 19 tokens, while the owner has 20999981.

image alt text

If you activate the balance sheet with Listen Transfers you should see the outgoing transaction in there as well.

image alt text

The recipient’s balance:

image alt text

And balance sheet:

image alt text

Resources with Best Practices

Keep in mind that Solidity is still a very very young language with lots of rough edges. In our smart contract we had to do assertions for simple things like addition and subtraction of two numbers. Of course, overflows do happen in other languages, but the consequences are not as severe.

If a contract function throws an exception that isn’t handled properly, it can leave the contract in a compromised state, opening up security holes like we have seen again and again.

Also, smart contracts can hold a lot of money in their accounts, which makes them an attractive target for attacks. So as always the best thing to do is to use proven libraries and code that has been community-tested and reviewed.

Zeppelin Solidity is one such project. It is an open-source framework for smart contract development that already has libraries with common math and utility functions. It also has different kinds of implementations for token contracts.

If you’re interested in running a crowdsale or an ICO, then I suggest looking at the project TokenMarketNet/ico also open-source and available on Github.

Scout App for monitoring

Darko Kolev

Student of life, people, software development and business. Currently Lead Software Engineer at BitcoinAverage

  1. Comments for Deploying to Testnet

You must login to comment

You May Also Like