SSM-Final-Project/payout.html at main · sivasankaranxyz/SSM-Final-Project · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head><!--If this ever goes live somewhere, remove all comments-->
  <meta charset="UTF-8">
  <title>SSM Royalties Payout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<p id="p01"></p> <!--Define p id so we can update display for errors-->
  <div class="wrapper">
    <h2><u>SSM Royalties Payout</u></h2>
    <p></p>
    <ul class="royaltyMember">
      <li>Loading error, please check...</li> <!--JS fuse so we can quickly see when we fuck up the code-->
    </ul><!--Form 1: Update Recipients and send data to contract (handles the ADD RECIPIENT button)-->
    <form onsubmit="Payout.addRecipient((this.querySelector('[placeholder=Percentage]')).value, (this.querySelector('[placeholder=Address]')).value, {gas:3000000});"
         class="add-items">
        <input type="text" name="item" placeholder="Name" required>
        <input type="text" id="addressInput" name="item" placeholder="Address" required>
        <input type="number" id="percentageCalc" name="item" placeholder="Percentage" min="1" max="100" required>
        <input type="submit" value="+ Add Recipient">
      </form>
      <br><hr><!--Form 2: Deposit funds and send data to contract-->
      <form onsubmit="
        if (sumPercentage != 100) {
          alert('Please update 100% of recipients');
          return false;
        } else {
          return sendRoyalties(((this.querySelector('[placeholder=Ether]')).value))};"
          class="sendRoyalties">
      <!-- <input type="number" name="item" placeholder="Payout Track ID" required>
      <input type="text" name="item" placeholder=" Name" required> -->
      <input type="number" name="item" placeholder="Ether" min="0" required>
      <input type="submit" value="SEND ROYALTIES" class="button">
    </form>
  </div>

  <!--Important note: I had a "same origin policiy CORS error" for a reason that is still unclear to me. npm install web3@0.20.6 --save  was used to fix this-->
  <!--There's still a  "Synchronous XMLHttpRequest on the main thread is deprecated" warning which I'll solve later-->

  <!--Use the web3 JS library: -->
  <script src="./node_modules/web3/dist/web3.min.js"></script>
  <!--Use the JQuery library: -->
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>

  <script>
    //Connection to the local web3 provider
    var Web3 = require('web3');
    var web3;

    if (typeof web3 !== 'undefined') {
              web3 = new Web3(web3.currentProvider);
    } else {
              // set the provider you want from Web3.providers
              web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
    }

    //Define thew default account used from then Web3 provider
    web3.eth.defaultAccount = web3.eth.accounts[0];

    //Needed for testing in Ropesten network:
    //***************************************
    //ROPSTEN
    //var web3 = new Web3(new Web3.providers.HttpProvider(
    //  'https://ropsten.infura.io/[infura_api_key_here]'
    //));
    //This https://ropsten.infura.io/TOKEN was given to me after registration on infura.io

    /*Our beautiful ABI generated by the compiler (Truffle), taken from the ABI section in the .JSON file in the project's build folder*/
    var abi = [
    {
      "constant": true,
      "inputs": [
        {
          "name": "",
          "type": "address"
        }
      ],
      "name": "shares",
      "outputs": [
        {
          "name": "",
          "type": "uint256"
        }
      ],
      "payable": false,
      "stateMutability": "view",
      "type": "function"
    },
    {
      "constant": true,
      "inputs": [
        {
          "name": "",
          "type": "uint256"
        }
      ],
      "name": "recipients",
      "outputs": [
        {
          "name": "",
          "type": "address"
        }
      ],
      "payable": false,
      "stateMutability": "view",
      "type": "function"
    },
    {
      "constant": false,
      "inputs": [],
      "name": "fundContract",
      "outputs": [],
      "payable": true,
      "stateMutability": "payable",
      "type": "function"
    },
    {
      "constant": false,
      "inputs": [
        {
          "name": "_percentage",
          "type": "uint256"
        },
        {
          "name": "_address",
          "type": "address"
        }
      ],
      "name": "addRecipient",
      "outputs": [
        {
          "name": "success",
          "type": "bool"
        }
      ],
      "payable": false,
      "stateMutability": "nonpayable",
      "type": "function"
    },
    {
      "constant": false,
      "inputs": [],
      "name": "payRecipients",
      "outputs": [
        {
          "name": "success",
          "type": "bool"
        }
      ],
      "payable": true,
      "stateMutability": "payable",
      "type": "function"
    }
  ];

    //DEFINE CONTRACT via WEB3
    var PayoutContract = web3.eth.contract(abi);
    /*our contract's address after deploying it on Ethereum with Truffle*/
    var contractAddress = '0xA52D9b975cCB6A89Df43d5C690dbee80aB30D7c7';
    var Payout = PayoutContract.at(contractAddress);

    //VARIABLES
    var sumPercentage  = 0;
    const addItems   = document.querySelector('.add-items');
    const itemsList  = document.querySelector('.royaltyMember');
    const items      = JSON.parse(localStorage.getItem('items')) || [];

    //ADD A NEW RECIPIENT
    function addItem(e) {
      e.preventDefault();
      const text = "<br>" + "<b>Name: </b>" + (this.querySelector('[placeholder=Name]')).value
                 + "<br>" + "<b>ETH Address: </b>" + (this.querySelector('[placeholder=Address]')).value
                 + "<br>" + "<b>% of royalties: </b>" + (this.querySelector('[placeholder=Percentage]')).value;

      //Variable used to monitor percentage is valie
      const web3PercentageForSum =  (this.querySelector('[placeholder=Percentage]')).value;
      //Sum up total percentage
      sumPercentage = +sumPercentage + +web3PercentageForSum;

      //Need to add error handling for address input in the future (even though this is checked by the contract)

      //Error handling for percantage calculation
      var message, x;
      message = document.getElementById("p01");
      message.innerHTML = "";
      x = document.getElementById("percentageCalc").value;

      try {
        if(x == "") throw "empty";
        if(isNaN(x)) throw "not a number";
        x = Number(x);
        if(100 < +sumPercentage) throw "above 100%";
      }
      catch(err) {
        message.innerHTML = "Percentage input is " + err;
      }

      //This defines the check boxes. The 'done' attribute configures whether they're initially checked or not
      //The check boxes aren't really necessary at the moment but I'm keeping them for later
      const item = {
        text,
        done: true
      };

      //If integrity is valid then perform the display update
      if (+100 >= +sumPercentage) {
      items.push(item);
      populateList(items, itemsList);
      //localStorage.setItem('items', JSON.stringify(items));
      this.reset();
      } else return;
    }

    //FUNCTIONS
    //Add recipient
    function populateList(royaltyMember = [], royaltyMemberList) {
      royaltyMemberList.innerHTML = royaltyMember.map((royaltyMember, i) => {
        return `
          <li>
            <input type="checkbox" data-index=${i} id="item${i}" ${royaltyMember.done ? 'checked' : ''} />
            <label for="item${i}">${royaltyMember.text}</label>
          </li>
        `;
      }).join('');
    }

    //Toggle the check boxes. Not really used at the moment
    function toggleDone(e) {
      if (!e.target.matches('input')) return; // skip this unless it's an input
      const el = e.target;
      const index = el.dataset.index;
      items[index].done = !items[index].done;
      //localStorage.setItem('items', JSON.stringify(items));
      populateList(items, itemsList);
    }

    //Handles the SEND ROYALTIES button
    function sendRoyalties(_amount) {
      //send data to contract
      var newAmount = +_amount;
      var etherAmount = web3.toBigNumber(newAmount);
      var weiValue = web3.toWei(etherAmount,'ether');
      Payout.fundContract({'value': weiValue, gas:3000000});
      Payout.payRecipients({gas:3000000});
      alert('Form submitted!');
    }

    addItems.addEventListener('submit', addItem);
    itemsList.addEventListener('click', toggleDone);

    populateList(items, itemsList);

  </script>

</body>
</html>