solidity-101/index.html at master · underledgerteam/solidity-101 · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Listening Event from Contract</title>
</head>

<body style="text-align: center;">
  <h1>Test Listening Event from Contract</h1>
  <hr />
  <div id="content"></div>
</body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.7.5/web3.min.js" integrity="sha512-/T7YwzOsNeoNkuTfYKXn3CrJCGc5cnC8T4QW46Hy+3Xjdjrxzokmbx8M8Xavjq1K7dN4958kIRGy4J03VRIlSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
  window.web3.currentProvider.request({ method: "eth_requestAccounts" });

  const abi = [{"anonymous":false,"inputs":[{"indexed":false,"internalType":"address","name":"sender","type":"address"},{"indexed":false,"internalType":"string","name":"message","type":"string"},{"indexed":false,"internalType":"uint256","name":"timestamp","type":"uint256"}],"name":"HelloMessage","type":"event"},{"inputs":[],"name":"emitEvent","outputs":[],"stateMutability":"nonpayable","type":"function"}];
  const web3 = new Web3(window.web3.currentProvider);
  const ContractEvent = new web3.eth.Contract(abi, "0xD75018044c29358D85AAe7DA2C18d6e414F2943B");

  ContractEvent.events.HelloMessage({}, (error, event) => {
    console.log("event=> ", event);
    const element = document.getElementById("content");

    let message = document.createElement("h1"), sender = document.createElement("h2"), timestamp = document.createElement("h3");

    let text = document.createTextNode(`Message: ${event.returnValues.message}`);
    message.appendChild(text);
    element.appendChild(message);

    text = document.createTextNode(`Sender: ${event.returnValues.sender}`);
    sender.appendChild(text);
    element.appendChild(sender);

    text = document.createTextNode(`Timestamp: ${event.returnValues.timestamp} to DateTime:  ${new Date(Number(event.returnValues.timestamp) * 1000).toLocaleString("th-TH")}`);
    timestamp.appendChild(text);
    element.appendChild(timestamp);

    element.appendChild(document.createElement("hr"));
  });
</script>


</html>