-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (157 loc) · 7.33 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
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
---
layout: default
---
<!-- Header -->
<header>
<div class="container mt-5 text-center text-white">
<img src="assets/img/logo.png" class="mb-3" style="width: 20rem; max-width: 60vw;">
<div class="col-lg-7 mx-auto mb-3">
<p class="lead mb-0">A simplified view of Ethereum Layer 2 risks</p>
<small class="fst-italic opacity-75">
Data sourced from <a class="link" href="https://l2beat.com">L2Beat</a>
<span id="lastUpdated" data-epoch={{site.data.l2safety.epoch}}></span>
</small>
</div>
</div>
</header>
<!-- Content -->
<section class="">
<div class="container pt-3 pt-sm-4 pt-lg-5 pb-5">
<div class="card mx-auto l2s-radius l2s-bg-primary" style="max-width: 63rem;">
<div class="card-body my-3 mx-0 mx-sm-2 mx-md-3">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">
L2
<span class="sort" onclick="sortTable(this, 'l2', 1)">
{{site.data.icons.sort}}
</span>
</th>
<th scope="col">
TVL
<span class="sort" onclick="sortTable(this, 'tvl', 2)">
{{site.data.icons.sort}}
</span>
</th>
<th scope="col" style="width: 8rem; min-width: 8rem;">
State Validation
<span class="sort float-end" onclick="sortTable(this, 'stateValidation', 3)">
{{site.data.icons.sort}}
</span>
</th>
<th scope="col" style="width: 8rem; min-width: 8rem;">
Data Availability
<span class="sort float-end" onclick="sortTable(this, 'dataAvailability', 4)">
{{site.data.icons.sort}}
</span>
</th>
<th scope="col" style="width: 6rem; min-width: 6rem;">
Exit Window
<span class="sort float-end" onclick="sortTable(this, 'exitWindow', 5)">
{{site.data.icons.sort}}
</span>
</th>
<th scope="col" style="width: 7rem; min-width: 7rem;">
Proposer Failure
<span class="sort float-end" onclick="sortTable(this, 'proposerFailure', 6)">
{{site.data.icons.sort}}
</span>
</th>
<th scope="col" style="width: 7rem; min-width: 7rem;">
Sequencer Failure
<span class="sort float-end" onclick="sortTable(this, 'sequencerFailure', 7)">
{{site.data.icons.sort}}
</span>
</th>
<th scope="col">
Status
<span class="sort" onclick="sortTable(this, 'status', 8)">
{{site.data.icons.sort}}
</span>
</th>
<!-- <th scope="col">
Type
<span class="sort" onclick="sortTable(this, 'type', 9)">
{{site.data.icons.sort}}
</span>
</th> -->
<!-- <th scope="col">
Score
<span class="sort" onclick="sortTable(this, 'score', 10)">
{{site.data.icons.sort}}
</span>
</th> -->
</tr>
</thead>
<tbody>
{%- comment -%}
<!--
example entry
{
"name":"fuelv1",
"stage":"Stage 2",
"layer":"L2",
"state_validation":{"status":"Fraud proofs (1R)","color":"white","score":3},
"data_availability":{"status":"On chain","color":"white","score":3},
"exit_window":{"status":"∞","color":"white","score":3},
"sequencer_failure":{"status":"Self sequence","color":"white","score":3},
"proposer_failure":{"status":"Self propose","color":"white","score":3},
"checkmarks":5,
"score":15
}
​ is used to avoid a js error if the tooltip is empty
-->
{%- endcomment -%}
{%- for l2 in site.data.l2safety.data -%}
{%- assign color = "" -%}
{%- if l2.stage.status == "in review" -%}
{%- assign color = "text-muted" -%}
{%- endif -%}
<tr class="{{color}}" data-id="{{l2.id}}" data-score={{l2.score}}>
<td data-sort="{{l2.name}}" scope="row">
<a class="text-light {{color}}" href="https://l2beat.com/scaling/projects/{{l2.id}}">
{{l2.name | replace: "-", " "}}
</a>
</td>
<td class="text-{{l2.tvl.color}} {{color}}">{{l2.tvl.str}}</td>
<td data-sort={{l2.state_validation.score}}>
<img src="assets/img/symbol-{{l2.state_validation.color}}.png"
data-bs-toggle="tooltip" data-bs-title="{{l2.state_validation.note}}​">
</td>
<td data-sort={{l2.data_availability.score}}>
<img src="assets/img/symbol-{{l2.data_availability.color}}.png"
data-bs-toggle="tooltip" data-bs-title="{{l2.data_availability.note}}​">
</td>
<td data-sort={{l2.exit_window.score}}>
<img src="assets/img/symbol-{{l2.exit_window.color}}.png"
data-bs-toggle="tooltip" data-bs-title="{{l2.exit_window.note}}​">
</td>
<td data-sort={{l2.sequencer_failure.score}}>
<img src="assets/img/symbol-{{l2.sequencer_failure.color}}.png"
data-bs-toggle="tooltip" data-bs-title="{{l2.sequencer_failure.note}}​">
</td>
<td data-sort={{l2.proposer_failure.score}}>
<img src="assets/img/symbol-{{l2.proposer_failure.color}}.png"
data-bs-toggle="tooltip" data-bs-title="{{l2.proposer_failure.note}}​">
</td>
<td data-sort="{{l2.stage.status}}" class="text-{{l2.stage.color}} {{color}}">
<span data-bs-toggle="tooltip" data-bs-title="{{l2.type | titlecase}}​">
{{l2.stage.status | titlecase | replace: "N/a", "n/a" }}
</span>
</td>
<!-- <td data-sort="{{l2.type}}">{{l2.type}}</td> -->
<!-- <td data-sort="{{l2.score}}">{{l2.score | divided_by: 18.0 | times: 100 | round}}</td> -->
</tr>
{%- endfor -%}
</tbody>
</table>
</div>
<p class="text-center mb-0 d-lg-none">
<small class="text-muted opacity-75">(scroll table)</small>
</p>
</div>
</div>
</div>
</section>