-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (110 loc) · 3.85 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My First DApp</title>
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<h1>My First DApp</h1>
<p id="result"></p>
<p>
<label for="name">Name:</label>
<input id="name">
</p>
<p>
<label for="message">Message:</label>
<input id="message">
</p>
<p><button id="btnSave">Save</button></p>
<script src="https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js" crossorigin="anonymous"></script>
</body>
<script>
// instantiate html dom elements
const name = document.getElementById('name');
const message = document.getElementById('message');
const result = document.getElementById('result');
const btnSave = document.getElementById('btnSave');
// initialize Web3
const web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545'));
web3.eth.getAccounts(function(error, accounts) {
if (error) return console.log(error);
// use the first account as default
web3.eth.defaultAccount = accounts[0];
init();
});
// initialize DApp
function init() {
// HelloWorld deployed contract address (change this to your own)
const helloWorldAddress = '0x8cdaf0cd259887258bc13a92c0a6da92698644c0';
// HelloWorld deployed contract ABI (also change this to your own)
const helloWorldAbi = [
{
"constant": false,
"inputs": [
{
"name": "_message",
"type": "string"
},
{
"name": "_name",
"type": "string"
}
],
"name": "setMessage",
"outputs": [],
"payable": true,
"stateMutability": "payable",
"type": "function"
},
{
"constant": true,
"inputs": [],
"name": "getMessage",
"outputs": [
{
"name": "",
"type": "string"
},
{
"name": "",
"type": "string"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
}
];
// intantiate HelloWorld contract using its Address and ABI
const helloWorld = new web3.eth.Contract(helloWorldAbi, helloWorldAddress);
// function to read the current saved Message
function readMessage() {
helloWorld.methods
.getMessage()
.call()
.then((res) => {
const resMessage = res[0];
const resName = res[1];
result.innerHTML = resMessage + ' (' + resName + ')';
})
.catch(console.error);
}
// save name and message when save button is clicked
btnSave.addEventListener('click', function() {
if (!(message.value && name.value)) {
throw new Error("Message and Name are required");
}
helloWorld.methods
.setMessage(message.value, name.value)
.send({from: web3.eth.defaultAccount})
.then(() => {
readMessage();
})
.catch(console.error);
});
// read current Message once everything is ready
readMessage();
}
</script>
</html>