[Ethereum] How to design a GUI/webpage that can interact with the deployed contract

contract-invocationmetamaskmyetherwallet

At the moment I'm using MyEthereumWallet, testrpc and MetaMask to interact with my contract deployed on testrpc. So, I'm using only "contract" tab of "MyEthereumWallet", but I'd like to change the background and etc, so it looks more customized.

Question 1: How can I design a GUI, like MyEthereumWallet, that allows me to interact with my deployed contract?

Best Answer

You will need to create an HTML page that uses the web3 library to interact with your Ethereum-enabled browser (MetaMask, Mist, etc.).

First include web3.js or web3.min.js in your HTML, then you will be able to call JavaScript functions that interact with accounts and contracts, check syncing status and block numbers, etc.

<script src="web3.min.js"></script>

Here is an example of how to instantiate a web3 instance:

if (typeof web3 !== 'undefined') {
  web3 = new Web3(web3.currentProvider);
} else {
  // browser is not web3-enabled
}

Then you can use it like this:

web3.eth.getBlock(48, function(error, result){
    if(!error)
        console.log(result)
    else
        console.error(error);
})

Here is the API reference: https://github.com/ethereum/wiki/wiki/JavaScript-API

Heads up: The API reference has a lot of examples of synchronous calls, but web3 has deprecated them in a lot of cases. Most of the function calls will need to specify callbacks.

Related Topic