How to design a GUI/webpage that can interact with my deployed contract?

Question

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?

Answer 1

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.

Answer 2

Here's an article I wrote on this topic: https://medium.com/metamask/calling-a-smart-contract-with-a-button-d278b1e76705?source=linkShare-9cdd320de5c9-1504477348

Answer 3

web3.js is the thing that you need. It's quite simple to design web-interface that interacts with your contract using web3. You have to do the necessary installions/ imports that you can see from their github repo.

Here is a simple API written in node that checks balace of a erc-20 standard token.

var web3 = require('web3');
var options = { 
  host: ' http://localhost:8545',
  ipc : true,
  personal: true, 
  admin: false,
  debug: false
};
var contractABI= /*abi of contract */
var contractAddress = /* address of contract */
exports.checkCoinBalance = function(req, res) {
    var accountAddr = req.body.accountAddress;
    if(isAddress(accountAddr)==false){
        console.log("This address is not valid");
        return res.json({"success":"false","data":[{"message":"Inavlid address"}]});
    }
    var coinBalance=contract.balanceOf(accountAddr).toNumber();                 
    console.log(coinBalance);
    return res.json({"success":"true","data":[{balance: coinBalance}]});
    //return "success";
}

I hope this makes things easy to understand. I have designed web-interface for interacting with my erc-20 standard token. You can have a look at full source code prashantprabhakar/ethereum-web-wallet. Hope this helps. Edited:

Front-end Code Code:

$scope.checkCoinBalance = function(accountAddr) {
    var data = JSON.stringify({
        accountAddress: accountAddr
    });
    var config = {
        headers: {
            'Content-Type': 'application/json'
        }
    };
    $http.post('http://localhost:7000/eth/checkCoinBalance', data, config)
        .then(function successCallback(resp) {
                if (resp.data.success == 'true') {
                    console.log(resp.data.data[0].balance);
                    $scope.coinBalance = resp.data.data[0].balance;
                }
            },
            function failureCallback() {
                console.log('failure');
            });
}

You can call this checkCoinBalance() on a button click or so.