smartsponsor/index.html at master · glynnbird/smartsponsor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>SmartSponsor</title>
    <meta name="author" content="name">
    <meta name="ethereum-dapp-url-bar-style" content="transparent">
    <link rel="shortcut icon" href="sponsor.png" type="image/vnd.microsoft.icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
    <script type="text/javascript">

      // address of the contract
      var addr = '0x5877e8b9aa55286E7fF6E072C19dfd7fB8Cd987a';

      // abi definition
      var abi = [ { "constant": true, "inputs": [], "name": "refunded", "outputs": [ { "name": "", "type": "bool", "value": false } ], "type": "function" }, { "constant": true, "inputs": [], "name": "getPot", "outputs": [ { "name": "", "type": "uint256", "value": "100000000000000000" } ], "type": "function" }, { "constant": true, "inputs": [], "name": "complete", "outputs": [ { "name": "", "type": "bool", "value": false } ], "type": "function" }, { "constant": false, "inputs": [], "name": "refund", "outputs": [], "type": "function" }, { "constant": false, "inputs": [ { "name": "_message", "type": "bytes32" } ], "name": "pledge", "outputs": [], "type": "function" }, { "constant": true, "inputs": [], "name": "benefactor", "outputs": [ { "name": "", "type": "address", "value": "0x552d6ae0152c7a1c4c79aba047ec3f0a2af5177a" } ], "type": "function" }, { "constant": true, "inputs": [], "name": "owner", "outputs": [ { "name": "", "type": "address", "value": "0xd7a75f8c9fc6db3b1ac935c60b400f93240ddd73" } ], "type": "function" }, { "constant": true, "inputs": [], "name": "numPledges", "outputs": [ { "name": "", "type": "uint256", "value": "1" } ], "type": "function" }, { "constant": true, "inputs": [ { "name": "", "type": "uint256" } ], "name": "pledges", "outputs": [ { "name": "amount", "type": "uint256", "value": "0" }, { "name": "eth_address", "type": "address", "value": "0x0000000000000000000000000000000000000000" }, { "name": "message", "type": "bytes32", "value": "0x0000000000000000000000000000000000000000000000000000000000000000" } ], "type": "function" }, { "constant": false, "inputs": [], "name": "drawdown", "outputs": [], "type": "function" }, { "inputs": [ { "name": "_benefactor", "type": "address" } ], "type": "constructor" } ];

      var ss = null;

      var pledge = function() {
        var v = $('#pledge').val();
        try {
          v = parseFloat(v);
        } catch(e) {
          Materialize.toast('Please enter a value to pledge', 4000);
        }
        v = web3.toWei(v, 'ether');
        $('#pledgebutton').attr("disabled", true);
        ss.pledge(0,{from:web3.eth.accounts[0], value:v, gas:2000000 }, function(err, data) {
          console.log(err, data);
          $('#progress').removeClass('hide');
          Materialize.toast('Sent transaction to the blockchain', 4000);
          var transactionHash = data;
          var interval = setInterval(function() {
            web3.eth.getTransaction(transactionHash, function(err, data) {
              console.log(err, data);
              if (data.blockNumber !== null) {
                clearInterval(interval);
                $('#progress').addClass('hide');
                $('#pledgebutton').attr("disabled", false);
                getPot();
              }
            });
          }, 5000);
        });
      }


      var getPot = function() {
        ss.getPot(function(err, data) {
          var wei = parseInt(data);
          var eth = web3.fromWei(wei, 'ether');
          $('#total').html(eth);
        });
      }

      var init = function() {
        if (typeof web3 === 'undefined') {
          Materialize.toast('Please run in the Mist browser', 4000);
          return;
        }

        ss = web3.eth.contract(abi).at(addr);
        getPot();
      };

      $( document ).ready(init);

    </script>
  </head>
  <body>

    <div class="container">
      <div style="height:50px"></div>
      <h2>SmartSponsor</h2>
      <p>I am running a marathon on 32nd of December 2016. Please help me raise money for my nominated charity</p>

      <div class="row">
        <div class="col s12 m6">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">Current Total</span>
              <p>I have currently raised <span id="total" style="font-weight:bold">0</span> ETH in pledges</p>
            </div>
          </div>
        </div>
      </div>

      <div id="debug"></div>

      <h4>Please sponsor me</h3>
      <div class="input-field">
        <input id="pledge" placeholder="0.1" value="" type="number">
      </div>
      <a class="waves-effect waves-light btn" id="pledgebutton" href="Javascript:pledge()">Sponsor</a>
      <div id="progress" class="progress hide">
          <div class="indeterminate"></div>
      </div>

    </div>

  </body>
</html>