This repository has been archived by the owner on Nov 10, 2020. It is now read-only.
forked from omgnetwork/plasma-mvp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplasma_monitor.html
87 lines (87 loc) · 4.18 KB
/
plasma_monitor.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
<html>
<head>
<title>Plasma Monitor</title>
<link rel="stylesheet" href="static/css/bootstrap.min.css" />
<style>
.list-group-item{
margin-bottom: 2px;
}
</style>
</head>
<body>
<div class="container">
<h3 style="color: grey">Transactions</h3>
<ul id="transaction-container" class="list-group">
No New Transactions
</ul>
</div>
<script src="plasma_js_client.js"></script>
<script>
const fastx = new window.plasmaClient.client({
debug: true,
gethRpc: "http://localhost:8545",
fastXRpc: "http://localhost:8546/jsonrpc",
rootChainAddress: "0xa3b2a1804203b75b494028966c0f62e677447a39",
defaultAccount: "0xfd02EcEE62797e75D86BCff1642EB0844afB28c7",
});
const sleep = async (millisecond) => {
await new Promise(resolve => setTimeout(resolve, millisecond));
};
const ZERO_ADDRESS = "0000000000000000000000000000000000000000";
const autoRefresher = async() => {
const MAX_ELEMENT_COUNT = 50;
let curBlknum = await fastx.getCurrentBlockNum() - 1000;
let curTxindex = -1;
const txContainer = document.getElementById("transaction-container");
let isEmpty = true;
while(1){
let transactions;
let penddingBlknum;
try{
transactions = await fastx.getTransactionsAfter(curBlknum, curTxindex);
penddingBlknum = await fastx.getCurrentBlockNum();
}catch(err){
await sleep(1000);
continue;
}
for(const [blknum, txindex, transaction] of transactions){
console.log([blknum, txindex, transaction])
if(blknum > curBlknum){
curTxindex = txindex;
} else {
curTxindex = Math.max(curTxindex, txindex);
}
curBlknum = Math.max(curBlknum, blknum);
const newLi = document.createElement("li");
newLi.className = "list-group-item list-group-item-warning";
let html = "<strong>TX#" + blknum + "-" + txindex + "</strong>";
if(transaction.newowner1 != ZERO_ADDRESS){
html += "<br />0x"+ transaction.newowner1 + " (" + (transaction.contractaddress1 == ZERO_ADDRESS? "ETH": "0x" + transaction.contractaddress1) + "): " + (transaction.amount1 == 0? transaction.tokenid1: transaction.amount1);
}
if(transaction.newowner2 != ZERO_ADDRESS){
html += "<br />0x"+ transaction.newowner2 + " (" + (transaction.contractaddress2 == ZERO_ADDRESS? "ETH": "0x" + transaction.contractaddress2) + "): " + (transaction.amount2 == 0? transaction.tokenid2: transaction.amount2);
}
newLi.innerHTML = html;
newLi.blknum = blknum;
newLi.txindex = txindex;
if(isEmpty){
txContainer.innerHTML = "";
isEmpty = false;
}
txContainer.insertBefore(newLi, txContainer.childNodes[0]);
while(txContainer.childNodes.length > MAX_ELEMENT_COUNT){
txContainer.removeChild(txContainer.childNodes[MAX_ELEMENT_COUNT])
}
}
for(let element of txContainer.childNodes){
if(element.blknum < penddingBlknum){
element.className = "list-group-item list-group-item-info";
}
}
await sleep(500);
}
}
autoRefresher();
</script>
</body>
</html>