MetaMask Hackathon Guide

If you’re new to developing for Ethereum and MetaMask, it can be a daunting task! To make things easier, I’m keeping this article up to date with some useful tips for the first-timer!

What Even is Blockchain or Ethereum?

If you’re confused by the basics, here’s a video where I explain the data structures involved in just 10 minutes. Check it out!

Your First Smart Contract

If you want to get your feet wet with your first smart contracts, a popular language at the moment is Solidity. You can always get the full docs for solidity on The Solidity Docs Site.

There are a ton of tutorials on Solidity out there, but a some that we’re fans of are:

• Learning Solidity series by Karl Floersch.
• Getting Started as an Ethereum Web Developer by Alex Miller.

For messing around & trying out your first Solidity code, you can’t do much better than a zero-install, in-browser IDE like The Remix Solidity Editor.

Remix lets you write, deploy, and even interact with your first smart contracts, either on a virtual local virtual machine, or onto a live network!

If you find your code is in need of automated testing, and a more mature deploy process, there are a variety of Solidity frameworks to choose from:

• Truffle (Full framework, includes UI building tools)
• Dappsys (Small, modular systems for deploying Solidity)
• OpenZeppelin (A suite of common, reusable smart contracts)
• Embark (Full stack framework, includes UI development)

Building an Ethereum User Interface

There are a lot of ways that users might interact with a blockchain, and some applications (like Internet of Things) might not have an interface at all, but for a hackathon, there are few kinds of interfaces as easy to get up and running as a web UI with MetaMask.

MetaMask takes two of the hardest parts of building an Ethereum interface, and provides you a simple API so you don’t have to think about them:

• User account management.
• Communication with a trusted blockchain data source.

Both of these things are provided via the web3 API, and when MetaMask is installed on a user’s browser, it can be easily detected in every page load:

if (typeof window.web3 !== 'undefined') {
  // This user has MetaMask, or another Web3 browser installed!
  var ethereumProvider = web3.currentProvider  
}

The web3 API is primarily exposed as the EthereumProvider object, and usually you’ll initialize your favorite abstraction with it.

For example, if you were using the web3.js library, your initialization, and looking up a user’s balance might look like this:

var Web3 = require('web3') // The web3.js library
var myWeb3 = new Web3(web3.currentProvider)
myWeb3.getAccounts(function (err, accounts) {
  myWeb3.eth.getBalance(accounts[0], function (err, balance) {
    console.log('Your balance is ' + Web3.fromWei(balance, 'ether'))   
  })
})

Or if you prefer promises, you might use EthJS, where the same lookup might look like this:

var Eth = require('ethjs')
var eth = new Eth(web3.currentProvider)
eth.accounts()
.then((accounts) => {
  const account = accounts[0]
return eth.getBalance(account)
})
.then((balance) => {
  console.log('Your balance is ' + Eth.fromWei(balance, 'ether'))
})

There are a variety of JavaScript libraries for interacting with smart contracts via the web3.currentProvider, so when asking for help, always make sure to specify what libraries you’re using. Maybe ask the library’s own experts!

For general MetaMask API best practices, we try to keep this Developer FAQ up to date.

Live Web Examples

I’ve started collecting live, editable, in-browser examples using WebpackBin, so you can see how some real apps might be assembled. Enjoy!

• Simple Counter contract in Remix
• Checking Ether Balance
• Tip Button
• Simple counter contract
• Publish & Interact with MetaMascara

Advanced Topics

• Use off-chain signatures to help your smart contract scale.