block-parser/index.html at main · daplcor/block-parser · 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
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
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Live view of Chainweb miner voting and fork state, parsed from block header ForkState flags.">
    <meta name="theme-color" content="#0a0a0a">
    <title>Chainweb Fork Monitor</title>
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="site-header">
        <div class="brand">
            <img src="img/logo.svg" alt="Kadena Community Edition" class="brand-logo">
            <div class="brand-divider"></div>
            <h1 class="brand-title">Fork Monitor</h1>
        </div>
        <div class="header-status">
            <span class="badge" id="network">mainnet01</span>
            <span class="status">
                <span class="status-dot" id="status-dot"></span>
                <span id="status-text">Connecting…</span>
            </span>
        </div>
    </header>

    <div class="banner" id="error-banner" hidden>
        <span id="error-text"></span>
        <button type="button" id="error-dismiss" aria-label="Dismiss">✕</button>
    </div>

    <main>
        <section class="card hero-card">
            <p class="tile-label">Fork vote support this epoch</p>
            <p class="hero-value"><span id="support-pct">–</span><span class="hero-unit">%</span></p>
            <p class="hero-sub" id="verdict">Waiting for first cut…</p>
            <div class="meter" role="img" aria-label="Vote support versus the two-thirds activation threshold">
                <div class="meter-track">
                    <div class="meter-fill" id="support-fill"></div>
                    <div class="meter-threshold" id="threshold-marker"></div>
                </div>
                <div class="meter-scale">
                    <span>0%</span>
                    <span class="meter-threshold-label" id="threshold-label">66.7% to activate</span>
                    <span>100%</span>
                </div>
            </div>
        </section>

        <section class="tile-grid">
            <div class="card tile" title="Forks are numbered sequentially; every block header records the fork it was mined under.">
                <p class="tile-label">Current fork number</p>
                <p class="tile-value" id="fork-number">–</p>
                <p class="tile-sub" id="fork-number-sub">across all chains</p>
            </div>
            <div class="card tile" title="Each mined block may carry one vote for the next fork, read from the header's ForkState counter.">
                <p class="tile-label">Votes this epoch</p>
                <p class="tile-value" id="votes">–</p>
                <p class="tile-sub" id="votes-sub">avg per chain</p>
            </div>
            <div class="card tile" title="A fork epoch is 14,400 blocks (~5 days): 14,280 for voting, then 120 for counting.">
                <p class="tile-label">Epoch progress</p>
                <p class="tile-value" id="epoch-progress">–</p>
                <p class="tile-sub" id="epoch-progress-sub">of 14,400 blocks</p>
            </div>
            <div class="card tile" title="Votes are tallied at the epoch boundary; a passing fork activates immediately.">
                <p class="tile-label">Next decision</p>
                <p class="tile-value" id="decision-eta">–</p>
                <p class="tile-sub" id="decision-sub">at the epoch boundary</p>
            </div>
        </section>

        <section class="card">
            <div class="section-head">
                <h2>Fork epoch timeline</h2>
                <span class="section-note" id="phase-label"></span>
            </div>
            <div class="timeline" role="img" aria-label="Position within the current fork epoch">
                <div class="timeline-track">
                    <div class="timeline-progress" id="timeline-progress"></div>
                    <div class="timeline-counting"></div>
                </div>
                <div class="timeline-scale">
                    <span>Voting · 14,280 blocks</span>
                    <span>Counting · 120</span>
                </div>
            </div>
        </section>

        <section class="card">
            <details class="explainer">
                <summary>How on-chain voting works</summary>
                <div class="explainer-body">
                    <p>
                        Miners state their preference in every block they mine: the ForkState
                        field at the start of the header — the flag this page parses — carries
                        one optional vote for the next fork.
                    </p>
                    <ul>
                        <li><strong>Vote.</strong> For 119 hours (14,280 blocks) each new block can add one vote to its chain's running total.</li>
                        <li><strong>Count.</strong> In the final hour (120 blocks) the chains average their totals with their neighbors, converging on a single network-wide result.</li>
                        <li><strong>Decide.</strong> If at least two-thirds of the voting blocks signaled support, the new rules apply from the first block of the next epoch; otherwise the current rules stay and voting starts over.</li>
                    </ul>
                    <p>
                        Upgrades therefore activate only when a supermajority of hashrate backs
                        them, not on a deadline set by developers. For the full story, read
                        <a href="https://medium.com/@communitykadena/kadena-on-chain-voting-for-miners-on-the-way-to-decentralization-2bc0047df3d2" rel="noopener">Kadena — on-chain voting for miners</a>
                        by KDA Community Edition.
                    </p>
                </div>
            </details>
        </section>

        <section>
            <div class="section-head">
                <h2>Chains</h2>
                <span class="section-note" id="cut-info"></span>
            </div>
            <div class="chain-grid" id="chain-grid"></div>
        </section>
    </main>

    <footer class="site-footer">
        <p>
            Data from <a href="https://api.chainweb-community.org" rel="noopener">api.chainweb-community.org</a>
            · ForkState per
            <a href="https://github.com/kadena-io/chainweb-node/blob/master/src/Chainweb/ForkState.hs" rel="noopener">Chainweb.ForkState</a>
            · Refreshes every 30 s
        </p>
    </footer>

    <template id="chain-tile-template">
        <div class="card chain-tile">
            <div class="chain-head">
                <span class="chain-name"></span>
                <span class="chain-phase"><span class="phase-dot"></span><span class="phase-text"></span></span>
            </div>
            <p class="chain-height mono"></p>
            <p class="chain-votes"></p>
            <div class="minibar"><div class="minibar-fill"></div></div>
        </div>
    </template>

    <script src="chainweb.js"></script>
    <script src="app.js"></script>
</body>
</html>