8.md

Finalising frontend

We are going to change the frontend to represent our wallet, listen to events, and allow user to spend money.

We will open our console and run:

npm install --save-dev [email protected]

In older vertsions we would not be able to do things like instance.sendTransaction(...), so we need to use a newer version,

We will add an import in our app.js file.

import myWallet_artifact from '../../build/contracts/MyWallet.json'


// MetaCoin is our usable abstraction, which we'll use through the code below.
var MyWallet = contract(myWallet_artifact);

// The following code is simple to show off interacting with your contracts.
// As your needs grow you will likely need to change its form and structure.
// For application bootstrapping, check out window.addEventListener below.
var accounts;
var account;

window.App = {
  start: function() {
    var self = this;

    // Bootstrap the MetaCoin abstraction for Use.
    MyWallet.setProvider(web3.currentProvider);
...
}
...
}
...

We want to have multiple things that our contract has available. We first remove the stuff we don't need.

And we replace the body of html with:

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h1>Wallet</h1>
      <h2>Example shared wallet</h2>
      <h3>Wallet is on address <span id="walletAddress"></span> and contains <span id="walletEther"> ether</span></h3>
    </div>
  </div>
</div>

We now want to hav ea new function

basicInfoUpdate: function() {
    MyWallet.deployed().then(function(instance) {
        document.getElementById("walletAddress").innerHTML = instance.address;

        var wei = web3.eth.getBalance(instance.address).toNumber();
        document.getElementById("walletEther").innerHTML = web3.fromWei(wei, "ether");
    });
}

before we run the development server we need to run:

truffle compile

truffle migrate

and finally

npm run dev

Now we can see that we have the addresss and we have the number of ether.

Send money

Now we'll add a button to send money to wallet.

Now we have two options, we use web3.eth.sendTransaction, where we would send the transaction.

submitEtherToWallet: function() {
    MyWallet.deployed().then(function(instance) {
      web3.eth.sendTransaction({from: account, to: instance.address, value: web3.toWei(5, "ether")});
      App.basicInfoUpdate();
    })
  },

Then there is the other version, where we would have:

submitEtherToWallet: function() {
    MyWallet.deployed().then(function(instance) {
      return web3.eth.sendTransaction({from: account, to: instance.address, value: web3.toWei(5, "ether")});
    }).then(function(txHash) {
        App.basicInfoUpdate();
    })
  },

But we can't do this as there needs to wait until it's mined, so what we can do instead is to actually return a promise of th instance:

submitEtherToWallet: function() {
    MyWallet.deployed().then(function(instance) {
      return instance.sendTransaction({from: account, to: instance.address, value: web3.toWei(5, "ether")});
    }).then(function(txHash) {
        App.basicInfoUpdate();
    })
  },

Now we want to send money around so we create a form:

<h1>Send Ether around</h1>
       <form onsubmit="App.submitTransaction(); return false;">
         <div class="form-group">
           <label for="to">To (Address)</label>
           <input type="text" class="form-control" id="to" placeholder="0xDEADBEEF">
         </div>
         <div class="form-group">
           <label for="amount">Amount</label>
           <input type="number" class="form-control" id="amount" placeholder="123">
         </div>
         <div class="form-group">
           <label for="reason">Reason</label>
           <input type="text" class="form-control" id="reason" placeholder="Because its a cool thing">
         </div>

         <button type="submit" class="btn btn-default">Submit</button>
       </form>

Here is the function that would execute the form

submitTransaction: function () {
    var _to = document.getElementById("to").value
    var _amount = document.getElementById("amount").value
    var _reason = document.getElementById("reason").value

    MyWallet.deployed().then(function () {
      instance.spendMoneyOn(_to, _amount, _reason);
    }).then(function(result) {
      console.log(result);
    }).catch(function(error) {
      console.error(error);
    });
  }

And we want to see the addressses by adding

<span id="addresses"></span>

And let's fill it up inside the getAccounts funciton