-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
101 lines (97 loc) · 6.04 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fees.sigri44.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="https://fonts.googleapis.com/css2?family=Cabin:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/tipped.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.ethers.io/lib/ethers-5.1.umd.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/tipped.min.js"></script>
</head>
<body>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<defs>
<g id="nightIcon">
<path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571 C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23 c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369 c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65 c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z"></path>
</g>
</defs>
</svg>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 35 35">
<defs>
<g id="dayIcon">
<path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5 S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5 C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6 C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9 c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44 l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5 c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06 L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2 C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29 c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7 C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5 c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path>
</g>
</defs>
</svg>
<table>
<thead>
<tr>
<th>Chain</th>
<th>Symbol</th>
<th>Gas Fee Total</th>
<!-- <th>Transactions</th> -->
<th>Avg. Gwei</th>
<th>Total cost</th>
</tr>
</thead>
<tbody id="resultTableBody"></tbody>
</table>
<div id="tipsy">
<div class="toggle">
<svg class="nightIcon" viewBox="0 0 100 100"><use xlink:href="#nightIcon"></use></svg>
<svg class="dayIcon" viewBox="0 0 35 35"><use xlink:href="#dayIcon"></use></svg>
</div>
Tip me: <span class='tip' id='tinytip'>0.001</span> | <span class='tip' id='smalltip'>0.010</span> | <span class='tip' id='bigtip'>0.100</span> | <span class='tip' id='hugetip'>1.000</span>
</div>
<footer>
<p id='attrib'>Powered by <strong><a href='https://github.com/Sigri44' target="_blank">Sigri</a></strong> and <strong><a href='https://www.coingecko.com/en/api' target="_blank">CoinGecko</a></strong> APIs</p>
</footer>
</body>
<script>
window.addEventListener('load', async () => {
window.ethereum.on('chainChanged', (chainId) => {
location.reload()
});
let params = getUrlVars();
let address = params.address || params.a || null;
if (address == null) {
if(window.hasOwnProperty("ethereum") && window.ethereum.hasOwnProperty("isMetaMask")) {
let addresses = await ethereum.request({ method: 'eth_requestAccounts' });
address = addresses[0];
} else {
console.log('Specify an address via ?a= or ?address= url GET parameter, or sign into MetaMask.')
$('body').html('<p id="oops">Sign into <strong><a href="https://metamask.io">MetaMask</a></strong><!-- or pass an address via the url (like <strong><a href="http://fees.wtf?address=0xcdd6a2b9dd3e386c8cd4a7ada5cab2f1c561182d">this</a></strong>)-->.</p>')
return;
}
}
main(address)
});
$(document).ready(function(){
let mode;
mode = localStorage.getItem('mode');
if(mode==='dark') {
$('.toggle').toggleClass('active')
$('body').toggleClass('night')
}
Tipped.create('#tinytip', "It's the thought that counts.");
Tipped.create('#smalltip', "Buy me a beer.");
Tipped.create('#bigtip', "Grateful AF.");
Tipped.create('#hugetip', "<3 <3 <3");
$('.toggle').click(function(){
$('.toggle').toggleClass('active')
$('body').toggleClass('night')
if(mode==='dark') {
mode = 'light'
localStorage.setItem('mode', 'light');
} else {
mode = 'dark'
localStorage.setItem('mode', 'dark');
}
});
});
</script>
</html>