forked from ethjs/examples
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathsimple-storage.html
163 lines (128 loc) · 5.21 KB
/
simple-storage.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
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
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.2.3/milligram.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
</head>
<body class="container">
<!-- Uncomment for local build
<p><a href="index.html">Back to Landing Page</a></p>
-->
<!-- Comment next line for local build -->
<p><a href="../">Back to Landing Page</a></p>
<h2>Simple Storage dApp</h2>
<!-- Import Notifications -->
<div id="notifications"></div>
<hr>
<!-- Webpage Frontend-->
<div class="row">
<div class="column column-60">
<label>Set Value</label>
<input id="valueAmount" type="number" placeholder="i.e. 4500" required>
<div class="txnote">Anyone can set/get values to/from the blockchain.
</div>
<button id="setValue">Set Value</button>
<button id="getValue">Get Value</button>
<br>
<div id="response" class="response">
Empty response window</div>
</div>
<div class="column column-40">
<label>ABI</label>
<textarea id="abi" class="abi"></textarea>
</div>
</div>
<br>
<label>Solidity Code</label>
<pre><code>
pragma solidity >=0.7.0 <0.9.0;
contract SimpleStore {
function set(uint _value) public {
value = _value;
}
function get() public view returns (uint) {
return value;
}
uint value;
}
</code></pre>
<hr>
<b>Repository File:</b><br><a href="https://github.com/lukso-network/example-dapps/blob/master/simple-storage.html"
target="_blank">lukso-network/example-dapps/simple-storage.html</a>
<!-- Connect Extension & Check Network & Check Balance & Change Network-->
<script src="./utils.js"></script>
<!-- Query Selector & Login Event Function & Network Swap Function-->
<script src="./events.js"></script>
<!-- Main Function -->
<script type="text/javascript">
// ABI of the deployed contract
const SimpleStoreABI = [{ "inputs": [], "name": "get", "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }], "stateMutability": "view", "type": "function" }, { "inputs": [{ "internalType": "uint256", "name": "_value", "type": "uint256" }], "name": "set", "outputs": [], "stateMutability": "nonpayable", "type": "function" }];
// Showing the ABI in the input field
el('#abi').value = JSON.stringify(SimpleStoreABI, null, 2);
// Simple Storage Application
async function app() {
/**
* Only start the application if: an extension is installed and right network connected
* Functions can be found in utils.js and return bool
*/
if (await connectWeb3() && await checkNetwork()) {
// Set up web3 library and get account
const web3 = new Web3(window.ethereum);
let account = await ethereum.request({ method: "eth_accounts" });
// Deployed smart contract on L16
const chainID = await web3.eth.getChainId();
const isL16 = false;
let simpleStoreInstance = null;
// is L14
if(chainID === 22){
simpleStoreInstance = new web3.eth.Contract(SimpleStoreABI, '0xaA61d96cB849246Ebf3cf148e2f42F3FF216EA4D');
}
// is L16
else if (chainID === 2828){
simpleStoreInstance = new web3.eth.Contract(SimpleStoreABI, '0x4041F84910CbF99BfF7f1c5F4b4Ce07eF50A10a7');
}
// Add set button functionality
el('#setValue').addEventListener('click', function () {
let input = el('#valueAmount').value;
// Check if user input is a valid
// Update response and error element
el('#response').innerHTML = "Trying to set value...";
/**
* Send set transaction from connected account.
* Will use first connected address on 3rd party extensions
*/
simpleStoreInstance.methods.set(input).send({ from: account[0] })
.then(function (transactionReceipt) {
el('#response').innerHTML = 'Value set. Your transaction hash is: ' + transactionReceipt.transactionHash;
}).catch(e => { el('#response').innerHTML = 'Transaction canceled.'; });
});
// Add get button functionality
el('#getValue').addEventListener('click', function () {
// Make a call to the smart contract and receive the stored value
simpleStoreInstance.methods.get().call()
.then(function (valueStored) {
el('#response').innerHTML = 'The current value stored in the smart contract is: ' + valueStored;
});
});
}
};
/**
* Check if notifications were loaded to the page
* before starting the app. If not, add a 100ms delay
* so jQuery can load them.
*
* @dev: important on first load / no cache.
*/
if (el("#notifications").childElementCount === 0) {
setTimeout(function () { app() }, 100);
}
else {
app()
}
</script>
</body>
</html>