-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
53 lines (48 loc) · 1.9 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
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script src="web3.js"></script>
<script>
// connect to WebSocket server and start listening for notifications
let socket = io();
let el;
socket.on('notification', (notificationBody) => {
console.log("got notification", JSON.parse(notificationBody));
el = document.getElementById('server-notification');
el.innerHTML = 'Look what just happened!: ' + notificationBody;
});
</script>
</head>
<body>
<button class="enableEthereumButton">Enable Ethereum</button>
<h2>Account: <span class="showAccount"></span></h2>
<button class="enableNotificationsButton">Enable Notifications on this address</button>
<p class="message"></p>
<script>
const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');
const enableNotificationsButton = document.querySelector('.enableNotificationsButton');
const messageUpdate = document.querySelector('.message');
// when clicked, send request to server to register the connected Ethereum address with Alchemy
enableNotificationsButton.addEventListener('click', function (e) {
e.preventDefault();
console.log("send address");
if (showAccount.innerHTML) {
socket.emit('register address', showAccount.innerHTML);
}
alert(showAccount.innerHTML+" added to notifications.");
messageUpdate.innerHTML = "Listening to an event update..."
});
// when clicked, connect to a web3 Ethereum wallet and get the active account
ethereumButton.addEventListener('click', () => {
getAccount();
});
async function getAccount() {
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
const account = accounts[0];
showAccount.innerHTML = account;
}
</script>
<p id="server-notification"></p>
</body>
</html>