Skip to main content

Bespoke web development & support

Blog

Introducing Ethereum Development - Part 1 - MetaMask and Web3

Submitted by Paul on 21/03/2017

In this series, we will introduce building simple Ethereum projects by following the fate of Alice the author.

Alice is a writer who wants to go freelance and escape the drudgery of her day job. She’s fed up with middlemen taking a cut of her earnings and wants to explore new technology. She has experience in web and is super happy to discover she can use a basic web stack to create interactive contracts on Ethereum Platform and get paid directly.

After a quick recce of dev tools and software, she decides to use MetaMask to enable creation of an embeddable donation button to use on her upcoming blog posts. She’s hoping Bob the benefactor and people like him will help support her work.

MetaMask app screenshot


 

MetaMask is a Chrome plugin that allows users to interact with accounts and contracts on Ethereum platform. On first install, it creates a randomly generated Deterministic Brain Wallet so that accounts can be used in different future contexts. It communicates with the blockchain over the web and injects Ethereum’s web3 javascript library allowing us to carry out transactions via a regular web page in Chrome. MetaMask has the option to use Live, Test, Local or Custom Ethereum nodes. We will use the Ropsten Test Net in most of our examples.

Alice's app consists of a basic HTML page with some javascript which reacts to a form submit. On click, we capture the field value and attempt to send that much Ether from the wallet of the current user (we'll call him Bob the benefactor). When Bob clicks, MetaMask proxies the web3 request to an external node and asks Bob to unlock his default account to release funds. 

 

web3.eth.sendTransaction() can be used to send messages and data but here we're just sending ether. It is possible to add a specific amount of Ether to cover the cost of making the transaction (gas price) and by excluding this value we allow MetaMask to make this decision for us. In the callback, we wait for a transaction receipt and which we can use to track the transaction via Etherscan

to: '0xE767aEB31dAAF66366999F72FB5De2CEEA76c277': Send this to Alices account

from: web3.eth.coinbase: Send this transaction from the current default authorised account.

toWei(): Our input field is expecting values set in Ether but transactions on the network itself are measured in a smaller unit called Wei. 1 Ether equals 1,000,000,000,000,000,000 Wei.

Return object: If the callback succeeds we get a hash of the pending transaction which we use to generate a link on the Testnet blockchain explorer. Here, we can watch the progress of our transaction as it gets mined. If our the transaction fails, we get an error object.

Here's a working example of the form.
 

 
 
Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.