-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
370 lines (307 loc) · 23.1 KB
/
index.html
File metadata and controls
370 lines (307 loc) · 23.1 KB
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
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<html lang="en">
<head>
<title>SmartWed</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="https://fonts.googleapis.com/css?family=Varela" rel="stylesheet" />
<link href="./default.css" rel="stylesheet" type="text/css" media="all" />
<link href="./fonts.css" rel="stylesheet" type="text/css" media="all" />
<!-- include button css for now -->
<link href="buttonstyle.css" rel="stylesheet" type="text/css" media="all" />
<!-- include web3.js for blockchain interaction-->
<script src="https://cdn.rawgit.com/ethereum/web3.js/develop/dist/web3.js"></script>
<!-- include moment - consider making a copy of this into the repo -->
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<!-- include jQuery - because it looks easier than jumping into angular or react quite yet -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
// intialize vars to go between functions
var MyContract;
var myContractInstance;
var partner1;
var partner2;
var vows;
var owner;
var marriageDate;
var smartWedContAddr;
var indexWeddingDate;
//from button
var MyContract2;
var myContract2Instance;
var numEntries;
var htmlContent2;
var numIndex;
// function to parse variables from URL
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i=0; i<vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
}
// set variable for the smartWedContAddr to have some value
//
function setWedContAddr() {
smartWedContAddr = getQueryVariable('smartWedAddress');
if (smartWedContAddr != null) {
// alert(smartWedContAddr);
} else {
smartWedContAddr = '0xd09B6E3C8FB7E05e248197EC45c38cD338d66C1a';
}
}
// set wedding date passed from smartwedindex contract
function setIndexWeddingDate() {
indexWeddingDate = getQueryVariable('indexWedDate');
if (indexWeddingDate != null) {
indexWeddingDate = moment(getQueryVariable('indexWedDate'),"X").format("DD MMM YYYY");
} else {
indexWeddingDate = "not indexed";
}
$('#lblIndexWedDate').html(indexWeddingDate);
// alert(indexWeddingDate);
}
//
// **** PUTTING THE BUTTON CONNECTION AND STRING CREATION HERE ****
//
var IfaceAddress;
IfaceAddress = './index.html';
function indexInit() {
// connect direct to infura - needs to change to metamask when guestbook entry is created
web3 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/v3/a51f08f1a07e438e99a2abc278d63dab"));
// contract ABI set
MyContract2 = web3.eth.contract([{"constant":true,"inputs":[],"name":"numberOfIndex","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"indexdate","type":"uint256"},{"name":"wedaddress","type":"string"},{"name":"partnernames","type":"string"},{"name":"weddingdate","type":"uint256"},{"name":"displaymultisig","type":"uint256"}],"name":"writeIndex","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"partnernames","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"wedaddress","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"indexdate","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"acceptOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_newOwner","type":"address"}],"name":"changeOwner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"indexarray","outputs":[{"name":"indexdate","type":"uint256"},{"name":"wedaddress","type":"string"},{"name":"partnernames","type":"string"},{"name":"weddingdate","type":"uint256"},{"name":"displaymultisig","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_dst","type":"address"},{"name":"_value","type":"uint256"},{"name":"_data","type":"bytes"}],"name":"execute","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"weddingdate","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"displaymultisig","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"newOwner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"anonymous":false,"inputs":[{"indexed":false,"name":"time","type":"uint256"},{"indexed":false,"name":"contractaddress","type":"string"},{"indexed":false,"name":"partners","type":"string"},{"indexed":false,"name":"weddingdate","type":"uint256"},{"indexed":false,"name":"display","type":"uint256"}],"name":"IndexWritten","type":"event"}]);
// smartwedindex address
var myContract2Instance = MyContract2.at("0x84D9EC85C9C568eB332b7226a8f826D897e0a4a8");
// get number of entries in index
numIndex = myContract2Instance.numberOfIndex.call();
// set up string for creating the buttons
var htmlContent2 = "";
htmlContent2 += '<div class="dropdown"><button onclick="myFunction()" class="dropbtn">Choose SmartWed Contract</button><div id="myDropdown" class="dropdown-content">';
// loop thru each entry until finished
for (var i = 0, max = numIndex; i < max; i++)
{
// make currentMessage[] single line array for current message
var currentIndex = myContract2Instance.indexarray(i);
// date formatting
var formattedWedDate = moment(currentIndex[3],"X").format("DD MMM YYYY, h:mma");
// htmlContent += ' address: ' + currentIndex[1] + ' - couple: ' + currentIndex[2] + ' - wedding date: ' + formattedWedDate + ' <br>';
htmlContent2 += '<a href="' + IfaceAddress + '?smartWedAddress=' + currentIndex[1] + '&indexWedDate=' + currentIndex[3] + '">' + currentIndex[2] + '</a>';
}
htmlContent2 += '</div></div>';
$("#buttonIndex").html(htmlContent2);
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
//
// **** END BUTTON STUFF ****
//
function connectionInit() {
// connect direct to infura - needs to change to metamask when guestbook entry is created
web3 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/ySFxqrROS2e1chccEsyS"));
// contract ABI set
MyContract = web3.eth.contract([{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"messages","outputs":[{"name":"date","type":"uint256"},{"name":"nameFrom","type":"string"},{"name":"text","type":"string"},{"name":"url","type":"string"},{"name":"value","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"nameFrom","type":"string"},{"name":"text","type":"string"},{"name":"url","type":"string"}],"name":"sendMessage","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":true,"inputs":[],"name":"marriageDate","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"majorEvents","outputs":[{"name":"date","type":"uint256"},{"name":"name","type":"string"},{"name":"description","type":"string"},{"name":"url","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"name","type":"string"},{"name":"description","type":"string"},{"name":"url","type":"string"}],"name":"setMajorEvent","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"acceptOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"partner2","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"partner1","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_newOwner","type":"address"}],"name":"changeOwner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_dst","type":"address"},{"name":"_value","type":"uint256"},{"name":"_data","type":"bytes"}],"name":"execute","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"status","type":"string"},{"name":"url","type":"string"}],"name":"setStatus","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"vows","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"marriageStatus","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"newOwner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"numberOfMajorEvents","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_partner1","type":"string"},{"name":"_partner2","type":"string"},{"name":"_vows","type":"string"},{"name":"url","type":"string"}],"name":"createMarriage","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"numberOfMessages","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[{"name":"_owner","type":"address"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":false,"name":"name","type":"string"},{"indexed":false,"name":"description","type":"string"},{"indexed":false,"name":"url","type":"string"}],"name":"MajorEvent","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"name","type":"string"},{"indexed":false,"name":"description","type":"string"},{"indexed":false,"name":"url","type":"string"},{"indexed":false,"name":"value","type":"uint256"}],"name":"MessageSent","type":"event"}]);
// contract addresses are hardcoded for now, uncomment one
// hax & luker contract address
// myContractInstance = MyContract.at("0xd09B6E3C8FB7E05e248197EC45c38cD338d66C1a");
myContractInstance = MyContract.at(smartWedContAddr);
// garrett & stephanie contract address
//var myContractInstance = MyContract.at("0x958a8f594101d2c0485a52319f29b2647f2ebc06");
// gather values for partner1, partner2, vows, owner
partner1 = myContractInstance.partner1.call();
partner2 = myContractInstance.partner2.call();
vows = myContractInstance.vows.call();
owner = myContractInstance.owner.call();
marriageDate = myContractInstance.marriageDate.call();
}
// printAccountBalance() from infura tutorial
function getAccountBalance() {
var GET = {};
var query = window.location.search.substring(1).split("&");
for (var i = 0, max = query.length; i < max; i++)
{
if (query[i] === "") //check for trailing & with no param
continue;
var param = query[i].split("=");
GET[decodeURIComponent(param[0])] = decodeURIComponent(param[1] || "");
}
var account = myContractInstance.owner.call();
var balanceWei = web3.eth.getBalance(account).toNumber();
var balance = web3.fromWei(balanceWei, 'ether');
return balance;
/*
var mutisigUrl = 'http://etherscan.io/address/' + account;
document.write('[<a href="http://etherscan.io/address/' + account + '">' + account + '</a>]<br><br>')
document.write(balance + ' Ether');
*/
}
// simple loop to read out guestbook messages
function guestbook() {
// determine the number of messages for loop
var numMsg = myContractInstance.numberOfMessages.call();
var htmlContent = "";
// loop thru each message until finished
for (var i = 0, max = numMsg; i < max; i++)
{
// make currentMessage[] single line array for current message
var currentMessage = myContractInstance.messages(i);
// date formatting
var formattedDate = moment(currentMessage[0],"X").format("DD MMM YYYY, h:mma");
// display the message properly
// currentMessage[0] is date, [1] is fromName, [2] is message, [3] is url, [4] is donation value in wei
htmlContent += ' From: ' + currentMessage[1] + ' - ' + formattedDate + '<br>Message: ' + currentMessage[2] +'<br> URL: <a href="' + currentMessage[3] + '" target="new">' + currentMessage[3] +'</a><br>';
if (currentMessage[4] != 0) {
var donationBalance = web3.fromWei(currentMessage[4]);
htmlContent += 'Donation: ' + donationBalance + ' ETH <br>';
}
htmlContent +=('<br>');
}
$("#guestbook").html(htmlContent);
}
function loadPartners() {
$('#lblPartner1').html(partner1);
$('#lblPartner2').html(partner2);
$('#lblVows').html(vows);
}
function printMultisigUrl() {
var multisigUrl = '<a href="https://etherscan.io/address/' + owner + '/" target="new">' + owner + '</a>';
$('#lblMultisigUrl').html(multisigUrl);
}
function printMultisigBalance() {
var acctBalance = getAccountBalance();
$('#lblPrintAcctBal').html(acctBalance);
}
function printGuestbookUrl() {
var guestbookUrl = '<a href="https://bowensanders.github.io/meta-test.html?smartWedAddress=' + smartWedContAddr +'"class="button">Sign the Guestbook</a>';
$('#lblPrintGuestbookUrl').html(guestbookUrl);
}
function bodyOnLoad() {
setWedContAddr();
// Code running here will be unable to access important blockchain stuff
connectionInit();
indexInit();
etherscanAPIParse();
loadPartners();
setIndexWeddingDate();
printMultisigUrl();
printMultisigBalance();
guestbook();
printGuestbookUrl();
// Put the second function here
}
// code to parse data from etherscan api for first transaction datestamp (wedding date) and confirmations
function etherscanAPIParse() {
var address2 = smartWedContAddr;
$.getJSON('https://api.etherscan.io/api?module=account&action=txlist&address=' + address2 + '&sort=asc&page=1&offset=1&apikey=8VII5WKFAB7FXWFUGI9HAMK6Z6DMYXAZNJ', function(data) {
var inceptDate = moment(data.result[0].timeStamp,"X").format("DD MMM YYYY");
var contractAcceptDate = moment(marriageDate,"X").format("DD MMM YYYY");
var confs = data.result[0].confirmations;
$("#lblConfs").html(confs);
$("#lblInceptText").html(inceptDate);
$("#lblContractAcceptDate").html(contractAcceptDate);
//alert(confs);
});
}
</script>
</head>
<body onload="bodyOnLoad()">
<div id="wrapper">
<!-- Nav Section -->
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1><a href="#"><img src="ethmarriage-logo.png" height="40" width="40" align="top"> SmartWed</a></h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>
<li><a href="https://wallet.gnosis.pm" accesskey="2" title="" target="new">Access Multisig</a></li>
<!--
<li><a href="#" accesskey="3" title="">Sign Guestbook</a></li>
<li><a href="index-button-test.html">Choose Contract</a>
-->
<li><div id="buttonIndex"></div></li>
</li>
</ul>
</div>
</div>
</div>
<!-- Header and Names and Vows section -->
<div id="banner">
<div class="container">
<div class="title">
<!-- scriptlet to show partner1 and partner2 -->
<h2>The Marriage Contract of<br><label id="lblPartner1"></label> and <br><label id="lblPartner2"></label></h2>
<!-- scriptlet to show vows -->
<span class="byline"><br><label id="lblVows"></label></span>
<!-- incept date temporary usage of contract marriageDate until etherscan API data can be parsed -->
<p><br />
Wedding Date - <label id="lblIndexWedDate"></label><br />
Contract Deployed - <label id="lblInceptText"></label><br />
Contract Finalized - <label id="lblContractAcceptDate"></label><br />
Marriage Validity Confirmed <label id="lblConfs"></label> Times.
</p>
</div>
</div>
</div>
<!-- Multisig Account Balance Section -->
<div id="page" class="container">
<div class="title">
<h2>Multisig Account Balance:</h2>
<span class="byline">
<label id="lblMultisigUrl"></label><br>
<label id="lblPrintAcctBal"></label> ETH
</span>
</div>
</div>
<!-- Guestbook Section -->
<div id="featured">
<div class="container">
<div class="title">
<h2>Wedding Guestbook</h2>
<span class="byline">
Here are the messages left in the guestbook:
</div>
<p>
<label id="guestbook"></label>
</p>
</div>
<ul class="actions">
<li>
<label id="lblPrintGuestbookUrl"></label>
<!--
<a href="#" class="button">Sign the Guestbook</a>
-->
</li>
</ul>
</div>
<!-- footer section with acknowledgements -->
<div id="footer">
<div class="container">
<div class="title">
<p>SmartWed is a <a href="https://giveth.io" target="new">Giveth</a> Social Coding Project, Interface by <a href="https://github.com/bowensanders/" target="new">Bowen Sanders</a> with help from <a href="https://github.com/craigkc/" target="new">Craig Scheets</a></a>.<br>The first instance of this Smart Marriage contract was coded by <a href="https://github.com/jbaylina" target="new">Jordi Baylina</a> and
<!-- this creates a link to the contract being examined from the myContractInstance array -->
<a href="https://etherscan.io/address/0xd09B6E3C8FB7E05e248197EC45c38cD338d66C1a" target="new"> deployed to the Ethereum Blockchain</a> at Burning Man 2017. <br>The contract was based on the first Ethereum Marriage Contract by <a href="https://github.com/Souptacular" target="new">Hudson Jameson</a>.<br>Theme based on <strong>PlainDisplay</strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. </p>
</div>
</div>
</div>
</body>
</html>