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?


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){

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.

  • thanks for the answer. My question is: where do you put the above code? in the HTML file? – Ay. Sep 4 '17 at 9:16
  • @AdrianAd Yes it all goes in the HTML file (or a js file linked to the HTML file). – Maximillian Laumeister Sep 4 '17 at 13:38

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


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;
        console.log("This address is not valid");
        return res.json({"success":"false","data":[{"message":"Inavlid address"}]});
    var coinBalance=contract.balanceOf(accountAddr).toNumber();                 
    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') {
                    $scope.coinBalance = resp.data.data[0].balance;
            function failureCallback() {

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

  • Thanks for the answer. My question is where do we put the above code and how HTML file interacts with the above code? – Ay. Sep 4 '17 at 11:21
  • If you have idea of node/angular, you can look at the code I shared. Here the api's are written in node and I called these api's in angularJs. If you want the more simple version you can call this function on a button click. – Prashant Prabhakar Singh Sep 4 '17 at 13:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.