a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'release/v2021.07.05-otterscan'

This commit is contained in:
Willian Mitsuda 2021-07-30 19:37:53 -03:00
parent aa51bf5561 01a2af1d7b
commit 1e7c71284d
38 changed files with 1274 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
4bytes

@ -1 +1 @@
Subproject commit 3fde3a1b2e002736e9a5e0c35df5bbe386a18d55 Subproject commit 81138213c12364db38d5acbb40c0cf46f2ecdbfe

2
README.md
View File

@ -56,7 +56,7 @@ However, you will see that we made many UI improvements.
## Install instructions ## Install instructions
This software is currently available as compile-only form. This software is currently distributed as a docker image.
It depends heavily on a working Erigon installation with Otterscan patches applied, so let's begin with it first. It depends heavily on a working Erigon installation with Otterscan patches applied, so let's begin with it first.

225
package-lock.json generated
View File

@ -19,6 +19,7 @@
"@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14", "@fortawesome/react-fontawesome": "^0.1.14",
"@headlessui/react": "^1.4.0",
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
@ -28,10 +29,12 @@
"@types/react-blockies": "^1.4.1", "@types/react-blockies": "^1.4.1",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.8", "@types/react-router-dom": "^5.1.8",
"chart.js": "^3.5.0",
"ethers": "^5.4.1", "ethers": "^5.4.1",
"query-string": "^7.0.1", "query-string": "^7.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-blockies": "^1.4.1", "react-blockies": "^1.4.1",
"react-chartjs-2": "^3.0.4",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-error-boundary": "^3.1.3", "react-error-boundary": "^3.1.3",
"react-image": "^4.0.3", "react-image": "^4.0.3",
@ -45,7 +48,7 @@
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.8.6", "autoprefixer": "^9.8.6",
"postcss": "^7.0.36", "postcss": "^7.0.36",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4" "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6"
} }
}, },
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
@ -2077,15 +2080,6 @@
"react": ">=16.x" "react": ">=16.x"
} }
}, },
"node_modules/@fullhuman/postcss-purgecss": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
"integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
"dev": true,
"dependencies": {
"purgecss": "^3.1.3"
}
},
"node_modules/@hapi/address": { "node_modules/@hapi/address": {
"version": "2.1.4", "version": "2.1.4",
"license": "BSD-3-Clause" "license": "BSD-3-Clause"
@ -2115,6 +2109,18 @@
"@hapi/hoek": "^8.3.0" "@hapi/hoek": "^8.3.0"
} }
}, },
"node_modules/@headlessui/react": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz",
"integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==",
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": "^16 || ^17 || ^18",
"react-dom": "^16 || ^17 || ^18"
}
},
"node_modules/@istanbuljs/load-nyc-config": { "node_modules/@istanbuljs/load-nyc-config": {
"version": "1.1.0", "version": "1.1.0",
"license": "ISC", "license": "ISC",
@ -5510,6 +5516,11 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/chart.js": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.0.tgz",
"integrity": "sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA=="
},
"node_modules/check-types": { "node_modules/check-types": {
"version": "11.1.2", "version": "11.1.2",
"license": "MIT" "license": "MIT"
@ -5751,11 +5762,12 @@
} }
}, },
"node_modules/color": { "node_modules/color": {
"version": "3.1.3", "version": "3.2.1",
"license": "MIT", "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
"integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
"dependencies": { "dependencies": {
"color-convert": "^1.9.1", "color-convert": "^1.9.3",
"color-string": "^1.5.4" "color-string": "^1.6.0"
} }
}, },
"node_modules/color-convert": { "node_modules/color-convert": {
@ -5774,8 +5786,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/color-string": { "node_modules/color-string": {
"version": "1.5.4", "version": "1.6.0",
"license": "MIT", "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
"integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
"dependencies": { "dependencies": {
"color-name": "^1.0.0", "color-name": "^1.0.0",
"simple-swizzle": "^0.2.2" "simple-swizzle": "^0.2.2"
@ -6808,9 +6821,9 @@
} }
}, },
"node_modules/didyoumean": { "node_modules/didyoumean": {
"version": "1.2.1", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.1.tgz", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
"integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=", "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
"dev": true "dev": true
}, },
"node_modules/diff-sequences": { "node_modules/diff-sequences": {
@ -8270,15 +8283,15 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/fast-glob": { "node_modules/fast-glob": {
"version": "3.2.5", "version": "3.2.7",
"license": "MIT", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
"integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
"dependencies": { "dependencies": {
"@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.stat": "^2.0.2",
"@nodelib/fs.walk": "^1.2.3", "@nodelib/fs.walk": "^1.2.3",
"glob-parent": "^5.1.0", "glob-parent": "^5.1.2",
"merge2": "^1.3.0", "merge2": "^1.3.0",
"micromatch": "^4.0.2", "micromatch": "^4.0.4"
"picomatch": "^2.2.1"
}, },
"engines": { "engines": {
"node": ">=8" "node": ">=8"
@ -8864,8 +8877,9 @@
} }
}, },
"node_modules/glob-parent": { "node_modules/glob-parent": {
"version": "5.1.1", "version": "5.1.2",
"license": "ISC", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dependencies": { "dependencies": {
"is-glob": "^4.0.1" "is-glob": "^4.0.1"
}, },
@ -11228,14 +11242,15 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/micromatch": { "node_modules/micromatch": {
"version": "4.0.2", "version": "4.0.4",
"license": "MIT", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
"dependencies": { "dependencies": {
"braces": "^3.0.1", "braces": "^3.0.1",
"picomatch": "^2.0.5" "picomatch": "^2.2.3"
}, },
"engines": { "engines": {
"node": ">=8" "node": ">=8.6"
} }
}, },
"node_modules/micromatch/node_modules/braces": { "node_modules/micromatch/node_modules/braces": {
@ -12367,8 +12382,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/picomatch": { "node_modules/picomatch": {
"version": "2.2.2", "version": "2.3.0",
"license": "MIT", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
"engines": { "engines": {
"node": ">=8.6" "node": ">=8.6"
}, },
@ -13822,9 +13838,9 @@
} }
}, },
"node_modules/purgecss": { "node_modules/purgecss": {
"version": "3.1.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz", "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
"integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==", "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"commander": "^6.0.0", "commander": "^6.0.0",
@ -13846,9 +13862,9 @@
} }
}, },
"node_modules/purgecss/node_modules/postcss": { "node_modules/purgecss/node_modules/postcss": {
"version": "8.3.1", "version": "8.3.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.1.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
"integrity": "sha512-9qH0MGjsSm+fjxOi3GnwViL1otfi7qkj+l/WX5gcRGmZNGsIcqc+A5fBkE6PUobEQK4APqYVaES+B3Uti98TCw==", "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"colorette": "^1.2.2", "colorette": "^1.2.2",
@ -14055,6 +14071,18 @@
"react": ">=15.0.0" "react": ">=15.0.0"
} }
}, },
"node_modules/react-chartjs-2": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.4.tgz",
"integrity": "sha512-pcbFNpkPMTkGXXJ7k7hnukbRD0ZV01qB6JQY1ontITc2IYvhGlK6BBDy28VeydYs1Dl/c5ZpRgRVEtT5GUnxcQ==",
"dependencies": {
"lodash": "^4.17.19"
},
"peerDependencies": {
"chart.js": "^3.1.0",
"react": "^16.8.0 || ^17.0.0"
}
},
"node_modules/react-dev-utils": { "node_modules/react-dev-utils": {
"version": "11.0.4", "version": "11.0.4",
"license": "MIT", "license": "MIT",
@ -15929,14 +15957,16 @@
}, },
"node_modules/simple-swizzle": { "node_modules/simple-swizzle": {
"version": "0.2.2", "version": "0.2.2",
"license": "MIT", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
"dependencies": { "dependencies": {
"is-arrayish": "^0.3.1" "is-arrayish": "^0.3.1"
} }
}, },
"node_modules/simple-swizzle/node_modules/is-arrayish": { "node_modules/simple-swizzle/node_modules/is-arrayish": {
"version": "0.3.2", "version": "0.3.2",
"license": "MIT" "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
}, },
"node_modules/sisteransi": { "node_modules/sisteransi": {
"version": "1.0.5", "version": "1.0.5",
@ -16715,23 +16745,22 @@
}, },
"node_modules/tailwindcss": { "node_modules/tailwindcss": {
"name": "@tailwindcss/postcss7-compat", "name": "@tailwindcss/postcss7-compat",
"version": "2.2.4", "version": "2.2.6",
"resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.4.tgz", "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.6.tgz",
"integrity": "sha512-lFIBdD1D2w3RgHFg7kNB7U5LOlfbd+KXTzcLyC/RlQ9eVko6GjNCKpN/kdmfF9wiGxbSDT/3mousXeMZdOOuBg==", "integrity": "sha512-xrJqqVimKtNpyaaMapky3iFRCvEaA3PbdGG4HqHvyEdTLnfqKrRAv0znhqGeQlzFIL4P3w546cjWLYNtbvazFw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@fullhuman/postcss-purgecss": "^3.1.3",
"arg": "^5.0.0", "arg": "^5.0.0",
"autoprefixer": "^9", "autoprefixer": "^9",
"bytes": "^3.0.0", "bytes": "^3.0.0",
"chalk": "^4.1.1", "chalk": "^4.1.1",
"chokidar": "^3.5.2", "chokidar": "^3.5.2",
"color": "^3.1.3", "color": "^3.2.0",
"cosmiconfig": "^7.0.0", "cosmiconfig": "^7.0.0",
"detective": "^5.2.0", "detective": "^5.2.0",
"didyoumean": "^1.2.1", "didyoumean": "^1.2.2",
"dlv": "^1.1.3", "dlv": "^1.1.3",
"fast-glob": "^3.2.5", "fast-glob": "^3.2.7",
"fs-extra": "^10.0.0", "fs-extra": "^10.0.0",
"glob-parent": "^6.0.0", "glob-parent": "^6.0.0",
"html-tags": "^3.1.0", "html-tags": "^3.1.0",
@ -16750,6 +16779,7 @@
"postcss-selector-parser": "^6.0.6", "postcss-selector-parser": "^6.0.6",
"postcss-value-parser": "^4.1.0", "postcss-value-parser": "^4.1.0",
"pretty-hrtime": "^1.0.3", "pretty-hrtime": "^1.0.3",
"purgecss": "^4.0.3",
"quick-lru": "^5.1.1", "quick-lru": "^5.1.1",
"reduce-css-calc": "^2.1.8", "reduce-css-calc": "^2.1.8",
"resolve": "^1.20.0", "resolve": "^1.20.0",
@ -20422,15 +20452,6 @@
"prop-types": "^15.7.2" "prop-types": "^15.7.2"
} }
}, },
"@fullhuman/postcss-purgecss": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
"integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
"dev": true,
"requires": {
"purgecss": "^3.1.3"
}
},
"@hapi/address": { "@hapi/address": {
"version": "2.1.4" "version": "2.1.4"
}, },
@ -20455,6 +20476,12 @@
"@hapi/hoek": "^8.3.0" "@hapi/hoek": "^8.3.0"
} }
}, },
"@headlessui/react": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz",
"integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==",
"requires": {}
},
"@istanbuljs/load-nyc-config": { "@istanbuljs/load-nyc-config": {
"version": "1.1.0", "version": "1.1.0",
"requires": { "requires": {
@ -22777,6 +22804,11 @@
"char-regex": { "char-regex": {
"version": "1.0.2" "version": "1.0.2"
}, },
"chart.js": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.0.tgz",
"integrity": "sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA=="
},
"check-types": { "check-types": {
"version": "11.1.2" "version": "11.1.2"
}, },
@ -22947,10 +22979,12 @@
} }
}, },
"color": { "color": {
"version": "3.1.3", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
"integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
"requires": { "requires": {
"color-convert": "^1.9.1", "color-convert": "^1.9.3",
"color-string": "^1.5.4" "color-string": "^1.6.0"
} }
}, },
"color-convert": { "color-convert": {
@ -22968,7 +23002,9 @@
"version": "1.1.4" "version": "1.1.4"
}, },
"color-string": { "color-string": {
"version": "1.5.4", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
"integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
"requires": { "requires": {
"color-name": "^1.0.0", "color-name": "^1.0.0",
"simple-swizzle": "^0.2.2" "simple-swizzle": "^0.2.2"
@ -23658,9 +23694,9 @@
} }
}, },
"didyoumean": { "didyoumean": {
"version": "1.2.1", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.1.tgz", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
"integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=", "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
"dev": true "dev": true
}, },
"diff-sequences": { "diff-sequences": {
@ -24626,14 +24662,15 @@
"version": "3.1.3" "version": "3.1.3"
}, },
"fast-glob": { "fast-glob": {
"version": "3.2.5", "version": "3.2.7",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
"integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
"requires": { "requires": {
"@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.stat": "^2.0.2",
"@nodelib/fs.walk": "^1.2.3", "@nodelib/fs.walk": "^1.2.3",
"glob-parent": "^5.1.0", "glob-parent": "^5.1.2",
"merge2": "^1.3.0", "merge2": "^1.3.0",
"micromatch": "^4.0.2", "micromatch": "^4.0.4"
"picomatch": "^2.2.1"
} }
}, },
"fast-json-stable-stringify": { "fast-json-stable-stringify": {
@ -25012,7 +25049,9 @@
} }
}, },
"glob-parent": { "glob-parent": {
"version": "5.1.1", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"requires": { "requires": {
"is-glob": "^4.0.1" "is-glob": "^4.0.1"
} }
@ -26545,10 +26584,12 @@
"version": "0.1.1" "version": "0.1.1"
}, },
"micromatch": { "micromatch": {
"version": "4.0.2", "version": "4.0.4",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
"requires": { "requires": {
"braces": "^3.0.1", "braces": "^3.0.1",
"picomatch": "^2.0.5" "picomatch": "^2.2.3"
}, },
"dependencies": { "dependencies": {
"braces": { "braces": {
@ -27275,7 +27316,9 @@
"version": "2.1.0" "version": "2.1.0"
}, },
"picomatch": { "picomatch": {
"version": "2.2.2" "version": "2.3.0",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
}, },
"pify": { "pify": {
"version": "4.0.1" "version": "4.0.1"
@ -28290,9 +28333,9 @@
"version": "2.1.1" "version": "2.1.1"
}, },
"purgecss": { "purgecss": {
"version": "3.1.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz", "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
"integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==", "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
"dev": true, "dev": true,
"requires": { "requires": {
"commander": "^6.0.0", "commander": "^6.0.0",
@ -28308,9 +28351,9 @@
"dev": true "dev": true
}, },
"postcss": { "postcss": {
"version": "8.3.1", "version": "8.3.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.1.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
"integrity": "sha512-9qH0MGjsSm+fjxOi3GnwViL1otfi7qkj+l/WX5gcRGmZNGsIcqc+A5fBkE6PUobEQK4APqYVaES+B3Uti98TCw==", "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
"dev": true, "dev": true,
"requires": { "requires": {
"colorette": "^1.2.2", "colorette": "^1.2.2",
@ -28440,6 +28483,14 @@
"prop-types": "^15.5.10" "prop-types": "^15.5.10"
} }
}, },
"react-chartjs-2": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.4.tgz",
"integrity": "sha512-pcbFNpkPMTkGXXJ7k7hnukbRD0ZV01qB6JQY1ontITc2IYvhGlK6BBDy28VeydYs1Dl/c5ZpRgRVEtT5GUnxcQ==",
"requires": {
"lodash": "^4.17.19"
}
},
"react-dev-utils": { "react-dev-utils": {
"version": "11.0.4", "version": "11.0.4",
"requires": { "requires": {
@ -29729,12 +29780,16 @@
}, },
"simple-swizzle": { "simple-swizzle": {
"version": "0.2.2", "version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
"requires": { "requires": {
"is-arrayish": "^0.3.1" "is-arrayish": "^0.3.1"
}, },
"dependencies": { "dependencies": {
"is-arrayish": { "is-arrayish": {
"version": "0.3.2" "version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
} }
} }
}, },
@ -30274,23 +30329,22 @@
} }
}, },
"tailwindcss": { "tailwindcss": {
"version": "npm:@tailwindcss/postcss7-compat@2.2.4", "version": "npm:@tailwindcss/postcss7-compat@2.2.6",
"resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.4.tgz", "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.6.tgz",
"integrity": "sha512-lFIBdD1D2w3RgHFg7kNB7U5LOlfbd+KXTzcLyC/RlQ9eVko6GjNCKpN/kdmfF9wiGxbSDT/3mousXeMZdOOuBg==", "integrity": "sha512-xrJqqVimKtNpyaaMapky3iFRCvEaA3PbdGG4HqHvyEdTLnfqKrRAv0znhqGeQlzFIL4P3w546cjWLYNtbvazFw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@fullhuman/postcss-purgecss": "^3.1.3",
"arg": "^5.0.0", "arg": "^5.0.0",
"autoprefixer": "^9", "autoprefixer": "^9",
"bytes": "^3.0.0", "bytes": "^3.0.0",
"chalk": "^4.1.1", "chalk": "^4.1.1",
"chokidar": "^3.5.2", "chokidar": "^3.5.2",
"color": "^3.1.3", "color": "^3.2.0",
"cosmiconfig": "^7.0.0", "cosmiconfig": "^7.0.0",
"detective": "^5.2.0", "detective": "^5.2.0",
"didyoumean": "^1.2.1", "didyoumean": "^1.2.2",
"dlv": "^1.1.3", "dlv": "^1.1.3",
"fast-glob": "^3.2.5", "fast-glob": "^3.2.7",
"fs-extra": "^10.0.0", "fs-extra": "^10.0.0",
"glob-parent": "^6.0.0", "glob-parent": "^6.0.0",
"html-tags": "^3.1.0", "html-tags": "^3.1.0",
@ -30309,6 +30363,7 @@
"postcss-selector-parser": "^6.0.6", "postcss-selector-parser": "^6.0.6",
"postcss-value-parser": "^4.1.0", "postcss-value-parser": "^4.1.0",
"pretty-hrtime": "^1.0.3", "pretty-hrtime": "^1.0.3",
"purgecss": "^4.0.3",
"quick-lru": "^5.1.1", "quick-lru": "^5.1.1",
"reduce-css-calc": "^2.1.8", "reduce-css-calc": "^2.1.8",
"resolve": "^1.20.0", "resolve": "^1.20.0",

5
package.json
View File

@ -15,6 +15,7 @@
"@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14", "@fortawesome/react-fontawesome": "^0.1.14",
"@headlessui/react": "^1.4.0",
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
@ -24,10 +25,12 @@
"@types/react-blockies": "^1.4.1", "@types/react-blockies": "^1.4.1",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.8", "@types/react-router-dom": "^5.1.8",
"chart.js": "^3.5.0",
"ethers": "^5.4.1", "ethers": "^5.4.1",
"query-string": "^7.0.1", "query-string": "^7.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-blockies": "^1.4.1", "react-blockies": "^1.4.1",
"react-chartjs-2": "^3.0.4",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-error-boundary": "^3.1.3", "react-error-boundary": "^3.1.3",
"react-image": "^4.0.3", "react-image": "^4.0.3",
@ -70,6 +73,6 @@
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.8.6", "autoprefixer": "^9.8.6",
"postcss": "^7.0.36", "postcss": "^7.0.36",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4" "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6"
} }
} }

6
src/App.tsx
View File

@ -1,9 +1,11 @@
import React, { Suspense } from "react"; import React, { Suspense } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import WarningHeader from "./WarningHeader";
import Home from "./Home"; import Home from "./Home";
import Search from "./Search"; import Search from "./Search";
import Title from "./Title"; import Title from "./Title";
import ConnectionErrorPanel from "./ConnectionErrorPanel"; import ConnectionErrorPanel from "./ConnectionErrorPanel";
import London from "./special/london/London";
import Footer from "./Footer"; import Footer from "./Footer";
import { ConnectionStatus } from "./types"; import { ConnectionStatus } from "./types";
import { RuntimeContext, useRuntime } from "./useRuntime"; import { RuntimeContext, useRuntime } from "./useRuntime";
@ -26,6 +28,7 @@ const App = () => {
) : ( ) : (
<RuntimeContext.Provider value={runtime}> <RuntimeContext.Provider value={runtime}>
<div className="h-screen flex flex-col"> <div className="h-screen flex flex-col">
<WarningHeader />
<Router> <Router>
<Switch> <Switch>
<Route path="/" exact> <Route path="/" exact>
@ -34,6 +37,9 @@ const App = () => {
<Route path="/search" exact> <Route path="/search" exact>
<Search /> <Search />
</Route> </Route>
<Route path="/special/london" exact>
<London />
</Route>
<Route> <Route>
<div className="mb-auto"> <div className="mb-auto">
<Title /> <Title />

195
src/Block.tsx
View File

@ -1,92 +1,35 @@
import React, { useEffect, useState, useMemo, useContext } from "react"; import React, { useEffect, useMemo, useContext } from "react";
import { useParams, NavLink } from "react-router-dom"; import { useParams, NavLink } from "react-router-dom";
import { ethers, BigNumber } from "ethers"; import { BigNumber, ethers } from "ethers";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { import { faBurn } from "@fortawesome/free-solid-svg-icons";
faChevronLeft,
faChevronRight,
} from "@fortawesome/free-solid-svg-icons";
import StandardFrame from "./StandardFrame"; import StandardFrame from "./StandardFrame";
import StandardSubtitle from "./StandardSubtitle"; import StandardSubtitle from "./StandardSubtitle";
import NavBlock from "./block/NavBlock";
import ContentFrame from "./ContentFrame"; import ContentFrame from "./ContentFrame";
import NavButton from "./components/NavButton"; import InfoRow from "./components/InfoRow";
import Timestamp from "./components/Timestamp"; import Timestamp from "./components/Timestamp";
import GasValue from "./components/GasValue"; import GasValue from "./components/GasValue";
import PercentageBar from "./components/PercentageBar";
import BlockLink from "./components/BlockLink"; import BlockLink from "./components/BlockLink";
import DecoratedAddressLink from "./components/DecoratedAddressLink"; import DecoratedAddressLink from "./components/DecoratedAddressLink";
import TransactionValue from "./components/TransactionValue"; import TransactionValue from "./components/TransactionValue";
import FormattedBalance from "./components/FormattedBalance";
import HexValue from "./components/HexValue"; import HexValue from "./components/HexValue";
import { RuntimeContext } from "./useRuntime"; import { RuntimeContext } from "./useRuntime";
import { useLatestBlockNumber } from "./useLatestBlock"; import { useLatestBlockNumber } from "./useLatestBlock";
import { blockTxsURL } from "./url";
import { useBlockData } from "./useErigonHooks";
type BlockParams = { type BlockParams = {
blockNumberOrHash: string; blockNumberOrHash: string;
}; };
interface ExtendedBlock extends ethers.providers.Block {
blockReward: BigNumber;
unclesReward: BigNumber;
feeReward: BigNumber;
size: number;
sha3Uncles: string;
stateRoot: string;
totalDifficulty: BigNumber;
}
const Block: React.FC = () => { const Block: React.FC = () => {
const { provider } = useContext(RuntimeContext); const { provider } = useContext(RuntimeContext);
const params = useParams<BlockParams>(); const params = useParams<BlockParams>();
const [block, setBlock] = useState<ExtendedBlock>(); const block = useBlockData(provider, params.blockNumberOrHash);
useEffect(() => {
if (!provider) {
return;
}
const readBlock = async () => {
let blockPromise: Promise<any>;
if (ethers.utils.isHexString(params.blockNumberOrHash, 32)) {
blockPromise = provider.send("eth_getBlockByHash", [
params.blockNumberOrHash,
false,
]);
} else {
blockPromise = provider.send("eth_getBlockByNumber", [
params.blockNumberOrHash,
false,
]);
}
const [_rawBlock, _rawIssuance, _rawReceipts] = await Promise.all([
blockPromise,
provider.send("erigon_issuance", [params.blockNumberOrHash]),
provider.send("eth_getBlockReceipts", [params.blockNumberOrHash]),
]);
const receipts = (_rawReceipts as any[]).map((r) =>
provider.formatter.receipt(r)
);
const fees = receipts.reduce(
(acc, r) => acc.add(r.effectiveGasPrice.mul(r.gasUsed)),
BigNumber.from(0)
);
const _block = provider.formatter.block(_rawBlock);
const extBlock: ExtendedBlock = {
blockReward: provider.formatter.bigNumber(_rawIssuance.blockReward),
unclesReward: provider.formatter.bigNumber(_rawIssuance.uncleReward),
feeReward: fees,
size: provider.formatter.number(_rawBlock.size),
sha3Uncles: _rawBlock.sha3Uncles,
stateRoot: _rawBlock.stateRoot,
totalDifficulty: provider.formatter.bigNumber(
_rawBlock.totalDifficulty
),
..._block,
};
setBlock(extBlock);
};
readBlock();
}, [provider, params.blockNumberOrHash]);
useEffect(() => { useEffect(() => {
if (block) { if (block) {
document.title = `Block #${block.number} | Otterscan`; document.title = `Block #${block.number} | Otterscan`;
@ -101,50 +44,36 @@ const Block: React.FC = () => {
console.error(err); console.error(err);
} }
}, [block]); }, [block]);
const burntFees =
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
const netFeeReward = block && block.feeReward.sub(burntFees ?? 0);
const gasUsedPerc =
block && block.gasUsed.mul(10000).div(block.gasLimit).toNumber() / 100;
const latestBlockNumber = useLatestBlockNumber(provider); const latestBlockNumber = useLatestBlockNumber(provider);
return ( return (
<StandardFrame> <StandardFrame>
<StandardSubtitle> <StandardSubtitle>
Block{" "} <div className="flex space-x-1 items-baseline">
<span>Block</span>
<span className="text-base text-gray-500"> <span className="text-base text-gray-500">
#{params.blockNumberOrHash} #{params.blockNumberOrHash}
</span> </span>
{block && (
<NavBlock
blockNumber={block.number}
latestBlockNumber={latestBlockNumber}
/>
)}
</div>
</StandardSubtitle> </StandardSubtitle>
{block && ( {block && (
<ContentFrame> <ContentFrame>
<InfoRow title="Block Height"> <InfoRow title="Block Height">
<div className="flex space-x-1 items-baseline"> <span className="font-bold">
<span className="font-bold mr-1">
{ethers.utils.commify(block.number)} {ethers.utils.commify(block.number)}
</span> </span>
<NavButton
blockNum={block.number - 1}
disabled={block.number === 0}
>
<FontAwesomeIcon icon={faChevronLeft} />
</NavButton>
<NavButton
blockNum={block.number + 1}
disabled={
latestBlockNumber === undefined ||
block.number >= latestBlockNumber
}
>
<FontAwesomeIcon icon={faChevronRight} />
</NavButton>
<NavButton
blockNum={latestBlockNumber!}
disabled={
latestBlockNumber === undefined ||
block.number >= latestBlockNumber
}
>
<FontAwesomeIcon icon={faChevronRight} />
<FontAwesomeIcon icon={faChevronRight} />
</NavButton>
</div>
</InfoRow> </InfoRow>
<InfoRow title="Timestamp"> <InfoRow title="Timestamp">
<Timestamp value={block.timestamp} /> <Timestamp value={block.timestamp} />
@ -152,7 +81,7 @@ const Block: React.FC = () => {
<InfoRow title="Transactions"> <InfoRow title="Transactions">
<NavLink <NavLink
className="bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white rounded-lg px-2 py-1 text-xs" className="bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white rounded-lg px-2 py-1 text-xs"
to={`/block/${block.number}/txs`} to={blockTxsURL(block.number)}
> >
{block.transactions.length} transactions {block.transactions.length} transactions
</NavLink>{" "} </NavLink>{" "}
@ -162,38 +91,77 @@ const Block: React.FC = () => {
<DecoratedAddressLink address={block.miner} miner /> <DecoratedAddressLink address={block.miner} miner />
</InfoRow> </InfoRow>
<InfoRow title="Block Reward"> <InfoRow title="Block Reward">
<TransactionValue value={block.blockReward.add(block.feeReward)} /> <TransactionValue
value={block.blockReward.add(netFeeReward ?? 0)}
/>
{!block.feeReward.isZero() && ( {!block.feeReward.isZero() && (
<> <>
{" "} {" "}
(<TransactionValue value={block.blockReward} hideUnit /> +{" "} (<TransactionValue value={block.blockReward} hideUnit /> +{" "}
<TransactionValue value={block.feeReward} hideUnit />) <TransactionValue
value={netFeeReward ?? BigNumber.from(0)}
hideUnit
/>
)
</> </>
)} )}
</InfoRow> </InfoRow>
<InfoRow title="Uncles Reward"> <InfoRow title="Uncles Reward">
<TransactionValue value={block.unclesReward} /> <TransactionValue value={block.unclesReward} />
</InfoRow> </InfoRow>
<InfoRow title="Difficult">
{ethers.utils.commify(block.difficulty)}
</InfoRow>
<InfoRow title="Total Difficult">
{ethers.utils.commify(block.totalDifficulty.toString())}
</InfoRow>
<InfoRow title="Size"> <InfoRow title="Size">
{ethers.utils.commify(block.size)} bytes {ethers.utils.commify(block.size)} bytes
</InfoRow> </InfoRow>
<InfoRow title="Gas Used"> {block.baseFeePerGas && (
<GasValue value={block.gasUsed} /> <InfoRow title="Base Fee">
<span>
<FormattedBalance value={block.baseFeePerGas} decimals={9} />{" "}
Gwei (
<FormattedBalance
value={block.baseFeePerGas}
decimals={0}
/>{" "}
wei)
</span>
</InfoRow> </InfoRow>
<InfoRow title="Gas Limit"> )}
{burntFees && (
<InfoRow title="Burnt Fees">
<div className="flex items-baseline space-x-1">
<span className="flex space-x-1 text-orange-500">
<span title="Burnt fees">
<FontAwesomeIcon icon={faBurn} size="1x" />
</span>
<span>
<span className="line-through">
<FormattedBalance value={burntFees} />
</span>{" "}
Ether
</span>
</span>
</div>
</InfoRow>
)}
<InfoRow title="Gas Used/Limit">
<div className="flex space-x-3 items-baseline">
<div>
<GasValue value={block.gasUsed} /> /{" "}
<GasValue value={block.gasLimit} /> <GasValue value={block.gasLimit} />
</div>
<PercentageBar perc={gasUsedPerc!} />
</div>
</InfoRow> </InfoRow>
<InfoRow title="Extra Data"> <InfoRow title="Extra Data">
{extraStr} (Hex:{" "} {extraStr} (Hex:{" "}
<span className="font-data">{block.extraData}</span>) <span className="font-data">{block.extraData}</span>)
</InfoRow> </InfoRow>
<InfoRow title="Ether Price">N/A</InfoRow> <InfoRow title="Ether Price">N/A</InfoRow>
<InfoRow title="Difficult">
{ethers.utils.commify(block.difficulty)}
</InfoRow>
<InfoRow title="Total Difficult">
{ethers.utils.commify(block.totalDifficulty.toString())}
</InfoRow>
<InfoRow title="Hash"> <InfoRow title="Hash">
<HexValue value={block.hash} /> <HexValue value={block.hash} />
</InfoRow> </InfoRow>
@ -215,15 +183,4 @@ const Block: React.FC = () => {
); );
}; };
type InfoRowProps = {
title: string;
};
const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
<div className="grid grid-cols-4 py-4 text-sm">
<div>{title}:</div>
<div className="col-span-3">{children}</div>
</div>
);
export default React.memo(Block); export default React.memo(Block);

21
src/BlockTransactionHeader.tsx
View File

@ -1,21 +0,0 @@
import React from "react";
import { ethers } from "ethers";
import StandardSubtitle from "./StandardSubtitle";
import BlockLink from "./components/BlockLink";
type BlockTransactionHeaderProps = {
blockTag: ethers.providers.BlockTag;
};
const BlockTransactionHeader: React.FC<BlockTransactionHeaderProps> = ({
blockTag,
}) => (
<>
<StandardSubtitle>Transactions</StandardSubtitle>
<div className="pb-2 text-sm text-gray-500">
For Block <BlockLink blockTag={blockTag} />
</div>
</>
);
export default React.memo(BlockTransactionHeader);

18
src/BlockTransactions.tsx
View File

@ -3,8 +3,8 @@ import { useParams, useLocation } from "react-router";
import { ethers } from "ethers"; import { ethers } from "ethers";
import queryString from "query-string"; import queryString from "query-string";
import StandardFrame from "./StandardFrame"; import StandardFrame from "./StandardFrame";
import BlockTransactionHeader from "./BlockTransactionHeader"; import BlockTransactionHeader from "./block/BlockTransactionHeader";
import BlockTransactionResults from "./BlockTransactionResults"; import BlockTransactionResults from "./block/BlockTransactionResults";
import { import {
InternalOperation, InternalOperation,
OperationType, OperationType,
@ -63,10 +63,18 @@ const BlockTransactions: React.FC = () => {
to: t.to, to: t.to,
createdContractAddress: _receipts[i].contractAddress, createdContractAddress: _receipts[i].contractAddress,
value: t.value, value: t.value,
fee: provider.formatter fee:
t.type !== 2
? provider.formatter
.bigNumber(_receipts[i].gasUsed) .bigNumber(_receipts[i].gasUsed)
.mul(t.gasPrice!), .mul(t.gasPrice!)
gasPrice: t.gasPrice!, : provider.formatter
.bigNumber(_receipts[i].gasUsed)
.mul(t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!)),
gasPrice:
t.type !== 2
? t.gasPrice!
: t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!),
data: t.data, data: t.data,
status: provider.formatter.number(_receipts[i].status), status: provider.formatter.number(_receipts[i].status),
}; };

8
src/Footer.tsx
View File

@ -5,7 +5,13 @@ const Footer: React.FC = () => {
const { provider } = useContext(RuntimeContext); const { provider } = useContext(RuntimeContext);
return ( return (
<div className="w-full px-2 py-1 border-t border-t-gray-100 text-xs bg-link-blue text-gray-200 text-center"> <div
className={`w-full px-2 py-1 border-t border-t-gray-100 text-xs ${
provider?.network.chainId === 1
? "bg-link-blue text-gray-200"
: "bg-orange-400 text-white"
} text-center`}
>
{provider ? ( {provider ? (
<>Using Erigon node at {provider.connection.url}</> <>Using Erigon node at {provider.connection.url}</>
) : ( ) : (

18
src/Home.tsx
View File

@ -1,10 +1,13 @@
import React, { useState, useContext } from "react"; import React, { useState, useContext } from "react";
import { NavLink, useHistory } from "react-router-dom"; import { NavLink, useHistory } from "react-router-dom";
import { ethers } from "ethers"; import { ethers } from "ethers";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBurn } from "@fortawesome/free-solid-svg-icons";
import Logo from "./Logo"; import Logo from "./Logo";
import Timestamp from "./components/Timestamp"; import Timestamp from "./components/Timestamp";
import { RuntimeContext } from "./useRuntime"; import { RuntimeContext } from "./useRuntime";
import { useLatestBlock } from "./useLatestBlock"; import { useLatestBlock } from "./useLatestBlock";
import { blockURL } from "./url";
const Home: React.FC = () => { const Home: React.FC = () => {
const { provider } = useContext(RuntimeContext); const { provider } = useContext(RuntimeContext);
@ -53,10 +56,23 @@ const Home: React.FC = () => {
> >
Search Search
</button> </button>
<div className="mx-auto mt-5 mb-5 text-lg text-link-blue hover:text-link-blue-hover font-bold">
<NavLink to="/special/london">
<div className="flex space-x-2 items-baseline text-orange-500 hover:text-orange-700 hover:underline">
<span>
<FontAwesomeIcon icon={faBurn} />
</span>
<span>Check out the special dashboard for EIP-1559</span>
<span>
<FontAwesomeIcon icon={faBurn} />
</span>
</div>
</NavLink>
</div>
{latestBlock && ( {latestBlock && (
<NavLink <NavLink
className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue" className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
to={`/block/${latestBlock.number}`} to={blockURL(latestBlock.number)}
> >
<div>Latest block: {ethers.utils.commify(latestBlock.number)}</div> <div>Latest block: {ethers.utils.commify(latestBlock.number)}</div>
<Timestamp value={latestBlock.timestamp} /> <Timestamp value={latestBlock.timestamp} />

6
src/Title.tsx
View File

@ -1,9 +1,11 @@
import React, { useState, useRef } from "react"; import React, { useState, useRef, useContext } from "react";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import useKeyboardShortcut from "use-keyboard-shortcut"; import useKeyboardShortcut from "use-keyboard-shortcut";
import PriceBox from "./PriceBox"; import PriceBox from "./PriceBox";
import { RuntimeContext } from "./useRuntime";
const Title: React.FC = () => { const Title: React.FC = () => {
const { provider } = useContext(RuntimeContext);
const [search, setSearch] = useState<string>(); const [search, setSearch] = useState<string>();
const [canSubmit, setCanSubmit] = useState<boolean>(false); const [canSubmit, setCanSubmit] = useState<boolean>(false);
const history = useHistory(); const history = useHistory();
@ -43,7 +45,7 @@ const Title: React.FC = () => {
</div> </div>
</Link> </Link>
<div className="flex items-baseline space-x-3"> <div className="flex items-baseline space-x-3">
<PriceBox /> {provider?.network.chainId === 1 && <PriceBox />}
<form <form
className="flex" className="flex"
onSubmit={handleSubmit} onSubmit={handleSubmit}

8
src/Transaction.tsx
View File

@ -92,12 +92,14 @@ const Transaction: React.FC = () => {
value: _response.value, value: _response.value,
tokenTransfers, tokenTransfers,
tokenMetas, tokenMetas,
type: _response.type ?? 0,
fee: _response.gasPrice!.mul(_receipt.gasUsed), fee: _response.gasPrice!.mul(_receipt.gasUsed),
blockBaseFeePerGas: _block.baseFeePerGas,
maxFeePerGas: _response.maxFeePerGas,
maxPriorityFeePerGas: _response.maxPriorityFeePerGas,
gasPrice: _response.gasPrice!, gasPrice: _response.gasPrice!,
gasLimit: _response.gasLimit,
gasUsed: _receipt.gasUsed, gasUsed: _receipt.gasUsed,
gasUsedPerc: gasLimit: _response.gasLimit,
_receipt.gasUsed.toNumber() / _response.gasLimit.toNumber(),
nonce: _response.nonce, nonce: _response.nonce,
data: _response.data, data: _response.data,
logs: _receipt.logs, logs: _receipt.logs,

28
src/WarningHeader.tsx Normal file
View File

@ -0,0 +1,28 @@
import React, { useContext } from "react";
import { RuntimeContext } from "./useRuntime";
const WarningHeader: React.FC = () => {
const { provider } = useContext(RuntimeContext);
const chainId = provider?.network.chainId;
if (chainId === 1) {
return <></>;
}
let chainMsg = `ChainID: ${chainId}`;
if (chainId === 3) {
chainMsg = "Ropsten Testnet";
} else if (chainId === 4) {
chainMsg = "Rinkeby Testnet";
} else if (chainId === 5) {
chainMsg = "Görli Testnet";
} else if (chainId === 42) {
chainMsg = "Kovan Testnet";
}
return (
<div className="w-full bg-orange-400 text-white text-center font-bold px-2 py-1">
You are on {chainMsg}
</div>
);
};
export default React.memo(WarningHeader);

38
src/block/BlockTransactionHeader.tsx Normal file
View File

@ -0,0 +1,38 @@
import React, { useContext } from "react";
import { ethers } from "ethers";
import StandardSubtitle from "../StandardSubtitle";
import BlockLink from "../components/BlockLink";
import NavBlock from "./NavBlock";
import { RuntimeContext } from "../useRuntime";
import { useLatestBlockNumber } from "../useLatestBlock";
import { blockTxsURL } from "../url";
type BlockTransactionHeaderProps = {
blockTag: ethers.providers.BlockTag;
};
const BlockTransactionHeader: React.FC<BlockTransactionHeaderProps> = ({
blockTag,
}) => {
const { provider } = useContext(RuntimeContext);
const latestBlockNumber = useLatestBlockNumber(provider);
return (
<StandardSubtitle>
<div className="flex space-x-1 items-baseline">
<span>Transactions</span>
<div className="flex space-x-1 text-sm text-gray-500">
<span>For Block</span>
<BlockLink blockTag={blockTag} />
<NavBlock
blockNumber={blockTag as number}
latestBlockNumber={latestBlockNumber}
urlBuilder={blockTxsURL}
/>
</div>
</div>
</StandardSubtitle>
);
};
export default React.memo(BlockTransactionHeader);

22
src/BlockTransactionResults.tsx → src/block/BlockTransactionResults.tsx
View File

@ -1,15 +1,15 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import ContentFrame from "./ContentFrame"; import ContentFrame from "../ContentFrame";
import PageControl from "./search/PageControl"; import PageControl from "../search/PageControl";
import ResultHeader from "./search/ResultHeader"; import ResultHeader from "../search/ResultHeader";
import PendingResults from "./search/PendingResults"; import PendingResults from "../search/PendingResults";
import TransactionItem from "./search/TransactionItem"; import TransactionItem from "../search/TransactionItem";
import { useFeeToggler } from "./search/useFeeToggler"; import { useFeeToggler } from "../search/useFeeToggler";
import { RuntimeContext } from "./useRuntime"; import { RuntimeContext } from "../useRuntime";
import { SelectionContext, useSelection } from "./useSelection"; import { SelectionContext, useSelection } from "../useSelection";
import { useENSCache } from "./useReverseCache"; import { useENSCache } from "../useReverseCache";
import { ProcessedTransaction } from "./types"; import { ProcessedTransaction } from "../types";
import { PAGE_SIZE } from "./params"; import { PAGE_SIZE } from "../params";
type BlockTransactionResultsProps = { type BlockTransactionResultsProps = {
page?: ProcessedTransaction[]; page?: ProcessedTransaction[];

51
src/block/NavBlock.tsx Normal file
View File

@ -0,0 +1,51 @@
import React from "react";
import { ethers } from "ethers";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faChevronLeft,
faChevronRight,
} from "@fortawesome/free-solid-svg-icons";
import NavButton from "./NavButton";
type NavBlockProps = {
blockNumber: number;
latestBlockNumber: number | undefined;
urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string;
};
const NavBlock: React.FC<NavBlockProps> = ({
blockNumber,
latestBlockNumber,
urlBuilder,
}) => (
<div className="pl-2 self-center flex space-x-1">
<NavButton
blockNum={blockNumber - 1}
disabled={blockNumber === 0}
urlBuilder={urlBuilder}
>
<FontAwesomeIcon icon={faChevronLeft} />
</NavButton>
<NavButton
blockNum={blockNumber + 1}
disabled={
latestBlockNumber === undefined || blockNumber >= latestBlockNumber
}
urlBuilder={urlBuilder}
>
<FontAwesomeIcon icon={faChevronRight} />
</NavButton>
<NavButton
blockNum={latestBlockNumber!}
disabled={
latestBlockNumber === undefined || blockNumber >= latestBlockNumber
}
urlBuilder={urlBuilder}
>
<FontAwesomeIcon icon={faChevronRight} />
<FontAwesomeIcon icon={faChevronRight} />
</NavButton>
</div>
);
export default React.memo(NavBlock);

6
src/components/NavButton.tsx → src/block/NavButton.tsx
View File

@ -1,13 +1,17 @@
import { ethers } from "ethers";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { blockURL } from "../url";
type NavButtonProps = { type NavButtonProps = {
blockNum: number; blockNum: number;
disabled?: boolean; disabled?: boolean;
urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string;
}; };
const NavButton: React.FC<NavButtonProps> = ({ const NavButton: React.FC<NavButtonProps> = ({
blockNum, blockNum,
disabled, disabled,
urlBuilder,
children, children,
}) => { }) => {
if (disabled) { if (disabled) {
@ -21,7 +25,7 @@ const NavButton: React.FC<NavButtonProps> = ({
return ( return (
<NavLink <NavLink
className="transition-colors bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded px-2 py-1 text-xs" className="transition-colors bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded px-2 py-1 text-xs"
to={`/block/${blockNum}`} to={urlBuilder ? urlBuilder(blockNum) : blockURL(blockNum)}
> >
{children} {children}
</NavLink> </NavLink>

16
src/components/BlockConfirmations.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
type BlockConfirmationsProps = {
confirmations: number;
};
const BlockConfirmations: React.FC<BlockConfirmationsProps> = ({
confirmations,
}) => (
<span className="rounded text-xs bg-gray-100 text-gray-500 px-2 py-1">
{confirmations} Block{" "}
{confirmations === 1 ? "Confirmation" : "Confirmations"}
</span>
);
export default React.memo(BlockConfirmations);

3
src/components/BlockLink.tsx
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { ethers } from "ethers"; import { ethers } from "ethers";
import { blockURL } from "../url";
type BlockLinkProps = { type BlockLinkProps = {
blockTag: ethers.providers.BlockTag; blockTag: ethers.providers.BlockTag;
@ -18,7 +19,7 @@ const BlockLink: React.FC<BlockLinkProps> = ({ blockTag }) => {
className={`text-link-blue hover:text-link-blue-hover ${ className={`text-link-blue hover:text-link-blue-hover ${
isNum ? "font-blocknum" : "font-hash" isNum ? "font-blocknum" : "font-hash"
}`} }`}
to={`/block/${blockTag}`} to={blockURL(blockTag)}
> >
{text} {text}
</NavLink> </NavLink>

23
src/components/ExternalLink.tsx Normal file
View File

@ -0,0 +1,23 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
type ExternalLinkProps = {
href: string;
};
const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children }) => (
<a
className="text-link-blue hover:text-link-blue-hover"
href={href}
target="_blank"
rel="noopener noreferrer"
>
<span className="inline-flex items-baseline space-x-1">
<span>{children}</span>
<FontAwesomeIcon icon={faExternalLinkAlt} size="sm" />
</span>
</a>
);
export default ExternalLink;

2
src/components/InfoRow.tsx
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
type InfoRowProps = React.PropsWithChildren<{ type InfoRowProps = React.PropsWithChildren<{
title: string; title: React.ReactNode;
}>; }>;
const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => ( const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (

21
src/components/PercentageBar.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from "react";
type PercentageBarProps = {
perc: number;
};
const PercentageBar: React.FC<PercentageBarProps> = ({ perc }) => (
<div className="self-center w-40 border rounded border-gray-200">
<div className="w-full h-5 rounded bg-gradient-to-r from-red-400 via-yellow-300 to-green-400 relative">
<div
className="absolute top-0 right-0 bg-white h-full rounded-r"
style={{ width: `${100 - perc}%` }}
></div>
<div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
<span className="m-auto">{perc}%</span>
</div>
</div>
</div>
);
export default React.memo(PercentageBar);

34
src/components/PercentageGauge.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
type PercentageGaugeProps = {
perc: number;
bgFull: string;
bgPerc: string;
textPerc: string;
};
const PercentageGauge: React.FC<PercentageGaugeProps> = ({
perc,
bgFull,
bgPerc,
textPerc,
}) => (
<div className="w-60 h-6 border-l-2 border-gray-400 relative">
<div className="flex absolute w-full h-full">
<div className={`my-auto h-5 rounded-r-lg w-full ${bgFull}`}></div>
</div>
<div className="flex absolute w-full h-full">
<div
className={`my-auto h-5 rounded-r-lg ${bgPerc}`}
style={{ width: `${perc}%` }}
></div>
</div>
<div
className={`flex absolute w-full h-full mix-blend-multiply text-sans ${textPerc}`}
>
<span className="m-auto">{perc}%</span>
</div>
</div>
);
export default React.memo(PercentageGauge);

7
src/components/TimestampAge.tsx
View File

@ -1,11 +1,14 @@
import React from "react"; import React from "react";
type TimestampAgeProps = { type TimestampAgeProps = {
now?: number | undefined;
timestamp: number; timestamp: number;
}; };
const TimestampAge: React.FC<TimestampAgeProps> = ({ timestamp }) => { const TimestampAge: React.FC<TimestampAgeProps> = ({ now, timestamp }) => {
const now = Date.now() / 1000; if (now === undefined) {
now = Date.now() / 1000;
}
let diff = now - timestamp; let diff = now - timestamp;
let desc = ""; let desc = "";

39
src/components/TransactionType.tsx Normal file
View File

@ -0,0 +1,39 @@
import React from "react";
import ExternalLink from "./ExternalLink";
type TransactionTypeProps = {
type: number;
};
const TransactionType: React.FC<TransactionTypeProps> = ({ type }) => {
let description: React.ReactNode;
switch (type) {
case 0:
description = "legacy";
break;
case 1:
description = (
<ExternalLink href="https://eips.ethereum.org/EIPS/eip-2930">
EIP-2930
</ExternalLink>
);
break;
case 2:
description = (
<ExternalLink href="https://eips.ethereum.org/EIPS/eip-1559">
EIP-1559
</ExternalLink>
);
break;
default:
description = "unknown";
}
return (
<span>
{type} <span className="font-bold">({description})</span>
</span>
);
};
export default React.memo(TransactionType);

60
src/special/london/BlockRow.tsx Normal file
View File

@ -0,0 +1,60 @@
import { ethers } from "ethers";
import React from "react";
import BlockLink from "../../components/BlockLink";
import TimestampAge from "../../components/TimestampAge";
import { ExtendedBlock } from "../../useErigonHooks";
const ELASTICITY_MULTIPLIER = 2;
type BlockRowProps = {
now: number;
block: ExtendedBlock;
};
const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
const burntFees =
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
const netFeeReward = block && block.feeReward.sub(burntFees ?? 0);
const totalReward = block.blockReward.add(netFeeReward ?? 0);
return (
<div className="grid grid-cols-8 px-3 py-2 hover:bg-gray-100">
<div>
<BlockLink blockTag={block.number} />
</div>
<div
className={`text-right ${
block.gasUsed.gt(gasTarget)
? "text-green-500"
: block.gasUsed.lt(gasTarget)
? "text-red-500"
: ""
}`}
>
{ethers.utils.commify(block.gasUsed.toString())}
</div>
<div className="text-right text-gray-400">
{ethers.utils.commify(gasTarget.toString())}
</div>
<div className="text-right">{block.baseFeePerGas?.toString()} wei</div>
<div className="text-right col-span-2">
{ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
</div>
<div className="text-right line-through text-orange-500">
{ethers.utils.commify(
ethers.utils.formatUnits(
block.gasUsed.mul(block.baseFeePerGas!).toString(),
9
)
)}{" "}
Gwei
</div>
<div className="text-right text-gray-400">
<TimestampAge now={now / 1000} timestamp={block.timestamp} />
</div>
</div>
);
};
export default React.memo(BlockRow);

208
src/special/london/Blocks.tsx Normal file
View File

@ -0,0 +1,208 @@
import React, {
useState,
useEffect,
useContext,
useMemo,
useCallback,
} from "react";
import { ethers } from "ethers";
import { Line } from "react-chartjs-2";
import { ChartData, ChartOptions } from "chart.js";
import { Transition } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faBurn,
faCoins,
faCube,
faGasPump,
faHistory,
} from "@fortawesome/free-solid-svg-icons";
import BlockRow from "./BlockRow";
import { ExtendedBlock, readBlock } from "../../useErigonHooks";
import { RuntimeContext } from "../../useRuntime";
const MAX_BLOCK_HISTORY = 20;
const PREV_BLOCK_COUNT = 15;
const options: ChartOptions = {
animation: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
ticks: {
callback: function (v) {
// @ts-ignore
return ethers.utils.commify(this.getLabelForValue(v));
},
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Burnt fees",
},
ticks: {
callback: (v) => `${v} Gwei`,
},
},
},
};
type BlocksProps = {
latestBlock: ethers.providers.Block;
targetBlockNumber: number;
};
const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
const { provider } = useContext(RuntimeContext);
const [blocks, setBlock] = useState<ExtendedBlock[]>([]);
const [now, setNow] = useState<number>(Date.now());
const addBlock = useCallback(
async (blockNumber: number) => {
if (!provider) {
return;
}
// Skip blocks before the hard fork during the transition
if (blockNumber < targetBlockNumber) {
return;
}
const extBlock = await readBlock(provider, blockNumber.toString());
setNow(Date.now());
setBlock((_blocks) => {
if (_blocks.length > 0 && blockNumber === _blocks[0].number) {
return _blocks;
}
// Leave the last block because of transition animation
const newBlocks = [extBlock, ..._blocks].slice(
0,
MAX_BLOCK_HISTORY + 1
);
// Little hack to fix out of order block notifications
newBlocks.sort((a, b) => b.number - a.number);
return newBlocks;
});
},
[provider, targetBlockNumber]
);
useEffect(() => {
addBlock(latestBlock.number);
}, [addBlock, latestBlock]);
const data: ChartData = useMemo(() => {
return {
labels: blocks.map((b) => b.number.toString()).reverse(),
datasets: [
{
label: "Burnt fees (Gwei)",
data: blocks
.map((b) => b.gasUsed.mul(b.baseFeePerGas!).toNumber() / 1e9)
.reverse(),
fill: true,
backgroundColor: "#FDBA74",
borderColor: "#F97316",
tension: 0.2,
},
],
};
}, [blocks]);
// On page reload, pre-populate the last N blocks
useEffect(
() => {
const addPreviousBlocks = async () => {
for (
let i = latestBlock.number - PREV_BLOCK_COUNT;
i < latestBlock.number;
i++
) {
await addBlock(i);
}
};
addPreviousBlocks();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
return (
<div className="w-full mb-auto">
<div className="px-9 pt-3 pb-12 divide-y-2">
<div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
<span>
<FontAwesomeIcon icon={faBurn} />
</span>
<span>EIP-1559 is activated. Watch the fees burn.</span>
<span>
<FontAwesomeIcon icon={faBurn} />
</span>
</div>
<div>
<Line data={data} height={100} options={options} />
</div>
<div className="mt-5 grid grid-cols-8 px-3 py-2">
<div className="flex space-x-1 items-baseline">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCube} />
</span>
<span>Block</span>
</div>
<div className="text-right flex space-x-1 justify-end items-baseline">
<span className="text-gray-500">
<FontAwesomeIcon icon={faGasPump} />
</span>
<span>Gas used</span>
</div>
<div className="text-right">Gas target</div>
<div className="text-right">Base fee</div>
<div className="text-right col-span-2 flex space-x-1 justify-end items-baseline">
<span className="text-yellow-400">
<FontAwesomeIcon icon={faCoins} />
</span>
<span>Rewards</span>
</div>
<div className="text-right flex space-x-1 justify-end items-baseline">
<span className="text-orange-500">
<FontAwesomeIcon icon={faBurn} />
</span>
<span>Burnt fees</span>
</div>
<div className="text-right flex space-x-1 justify-end items-baseline">
<span className="text-gray-500">
<FontAwesomeIcon icon={faHistory} />
</span>
<span>Age</span>
</div>
</div>
{blocks.map((b, i) => (
<Transition
key={b.hash}
show={i < MAX_BLOCK_HISTORY}
appear
enter="transition transform ease-out duration-500"
enterFrom="opacity-0 -translate-y-10"
enterTo="opacity-100 translate-y-0"
leave="transition transform ease-out duration-1000"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-10"
>
<BlockRow now={now} block={b} />
</Transition>
))}
</div>
</div>
);
};
export default React.memo(Blocks);

52
src/special/london/Countdown.tsx Normal file
View File

@ -0,0 +1,52 @@
import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
type CountdownProps = {
provider: ethers.providers.JsonRpcProvider;
currentBlock: ethers.providers.Block;
targetBlock: number;
};
const Countdown: React.FC<CountdownProps> = ({
provider,
currentBlock,
targetBlock,
}) => {
const [targetTimestamp, setTargetTimestamp] = useState<number>();
useEffect(() => {
const calcTime = async () => {
const diff = targetBlock - currentBlock.number;
const _prevBlock = await provider.getBlock(currentBlock.number - diff);
const _targetTimestamp =
currentBlock.timestamp +
(currentBlock.timestamp - _prevBlock.timestamp);
setTargetTimestamp(_targetTimestamp);
};
calcTime();
}, [provider, currentBlock, targetBlock]);
return (
<div className="w-full h-full flex">
<div className="m-auto text-center">
<h1 className="text-6xl mb-10">London Network Upgrade</h1>
<h2 className="text-5xl">
{ethers.utils.commify(targetBlock - currentBlock.number)}
</h2>
<h6 className="text-sm mb-10">Blocks remaining</h6>
<h2 className="inline-flex space-x-10 text-base mb-10">
<div>Current block: {ethers.utils.commify(currentBlock.number)}</div>
<div>Target block: {ethers.utils.commify(targetBlock)}</div>
</h2>
{targetTimestamp && (
<div className="text-lg">
{new Date(targetTimestamp * 1000).toLocaleDateString()} @{" "}
{new Date(targetTimestamp * 1000).toLocaleTimeString()} (Estimative)
</div>
)}
</div>
</div>
);
};
export default React.memo(Countdown);

31
src/special/london/London.tsx Normal file
View File

@ -0,0 +1,31 @@
import React, { useContext } from "react";
import { useLatestBlock } from "../../useLatestBlock";
import { RuntimeContext } from "../../useRuntime";
import Countdown from "./Countdown";
import Blocks from "./Blocks";
import { londonBlockNumber } from "./params";
const London: React.FC = () => {
const { provider } = useContext(RuntimeContext);
const block = useLatestBlock(provider);
if (!provider || !block) {
return <></>;
}
// Display countdown
const targetBlockNumber =
londonBlockNumber[provider.network.chainId.toString()];
if (block.number < targetBlockNumber) {
return (
<Countdown
provider={provider}
currentBlock={block}
targetBlock={targetBlockNumber}
/>
);
}
return <Blocks latestBlock={block} targetBlockNumber={targetBlockNumber} />;
};
export default React.memo(London);

6
src/special/london/params.ts Normal file
View File

@ -0,0 +1,6 @@
export const londonBlockNumber: { [chainId: string]: number } = {
"1": 12965000,
"3": 10499401,
"4": 8897988,
"5": 5062605,
};

94
src/transaction/Details.tsx
View File

@ -8,16 +8,21 @@ import {
import ContentFrame from "../ContentFrame"; import ContentFrame from "../ContentFrame";
import InfoRow from "../components/InfoRow"; import InfoRow from "../components/InfoRow";
import BlockLink from "../components/BlockLink"; import BlockLink from "../components/BlockLink";
import BlockConfirmations from "../components/BlockConfirmations";
import AddressHighlighter from "../components/AddressHighlighter"; import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink"; import DecoratedAddressLink from "../components/DecoratedAddressLink";
import Copy from "../components/Copy"; import Copy from "../components/Copy";
import Timestamp from "../components/Timestamp"; import Timestamp from "../components/Timestamp";
import InternalTransactionOperation from "../components/InternalTransactionOperation"; import InternalTransactionOperation from "../components/InternalTransactionOperation";
import MethodName from "../components/MethodName"; import MethodName from "../components/MethodName";
import TransactionType from "../components/TransactionType";
import RewardSplit from "./RewardSplit";
import GasValue from "../components/GasValue"; import GasValue from "../components/GasValue";
import FormattedBalance from "../components/FormattedBalance"; import FormattedBalance from "../components/FormattedBalance";
import TokenTransferItem from "../TokenTransferItem"; import TokenTransferItem from "../TokenTransferItem";
import { TransactionData, InternalOperation } from "../types"; import { TransactionData, InternalOperation } from "../types";
import PercentageBar from "../components/PercentageBar";
import ExternalLink from "../components/ExternalLink";
type DetailsProps = { type DetailsProps = {
txData: TransactionData; txData: TransactionData;
@ -29,7 +34,12 @@ const Details: React.FC<DetailsProps> = ({
txData, txData,
internalOps, internalOps,
sendsEthToMiner, sendsEthToMiner,
}) => ( }) => {
const hasEIP1559 =
txData.blockBaseFeePerGas !== undefined &&
txData.blockBaseFeePerGas !== null;
return (
<ContentFrame tabs> <ContentFrame tabs>
<InfoRow title="Transaction Hash"> <InfoRow title="Transaction Hash">
<div className="flex items-baseline space-x-2"> <div className="flex items-baseline space-x-2">
@ -53,9 +63,7 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title="Block"> <InfoRow title="Block">
<div className="flex items-baseline space-x-2"> <div className="flex items-baseline space-x-2">
<BlockLink blockTag={txData.blockNumber} /> <BlockLink blockTag={txData.blockNumber} />
<span className="rounded text-xs bg-gray-100 text-gray-500 px-2 py-1"> <BlockConfirmations confirmations={txData.confirmations} />
{txData.confirmations} Block Confirmations
</span>
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title="Timestamp"> <InfoRow title="Timestamp">
@ -131,9 +139,43 @@ const Details: React.FC<DetailsProps> = ({
{ethers.utils.formatEther(txData.value)} Ether {ethers.utils.formatEther(txData.value)} Ether
</span> </span>
</InfoRow> </InfoRow>
<InfoRow title="Transaction Fee"> <InfoRow
<FormattedBalance value={txData.fee} /> Ether title={
<>
Type (
<ExternalLink href="https://eips.ethereum.org/EIPS/eip-2718">
EIP-2718
</ExternalLink>
)
</>
}
>
<TransactionType type={txData.type} />
</InfoRow> </InfoRow>
{txData.type === 2 && (
<>
<InfoRow title="Max Priority Fee Per Gas">
<span>
<FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
<FormattedBalance
value={txData.maxPriorityFeePerGas!}
decimals={9}
/>{" "}
Gwei)
</span>
</InfoRow>
<InfoRow title="Max Fee Per Gas">
<span>
<FormattedBalance value={txData.maxFeePerGas!} /> Ether (
<FormattedBalance
value={txData.maxFeePerGas!}
decimals={9}
/>{" "}
Gwei)
</span>
</InfoRow>
</>
)}
<InfoRow title="Gas Price"> <InfoRow title="Gas Price">
<div className="flex items-baseline space-x-1"> <div className="flex items-baseline space-x-1">
<span> <span>
@ -147,14 +189,43 @@ const Details: React.FC<DetailsProps> = ({
)} )}
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title="Ether Price">N/A</InfoRow> <InfoRow title="Gas Used/Limit">
<InfoRow title="Gas Limit"> <div className="flex space-x-3 items-baseline">
<div>
<GasValue value={txData.gasUsed} /> /{" "}
<GasValue value={txData.gasLimit} /> <GasValue value={txData.gasLimit} />
</div>
<PercentageBar
perc={
Math.round(
(txData.gasUsed.toNumber() / txData.gasLimit.toNumber()) * 10000
) / 100
}
/>
</div>
</InfoRow> </InfoRow>
<InfoRow title="Gas Used by Transaction"> {hasEIP1559 && (
<GasValue value={txData.gasUsed} /> ( <InfoRow title="Block Base Fee">
{(txData.gasUsedPerc * 100).toFixed(2)}%) <span>
<FormattedBalance value={txData.blockBaseFeePerGas!} decimals={9} />{" "}
Gwei (
<FormattedBalance
value={txData.blockBaseFeePerGas!}
decimals={0}
/>{" "}
wei)
</span>
</InfoRow> </InfoRow>
)}
<InfoRow title="Transaction Fee">
<div className="space-y-3">
<div>
<FormattedBalance value={txData.fee} /> Ether
</div>
{hasEIP1559 && <RewardSplit txData={txData} />}
</div>
</InfoRow>
<InfoRow title="Ether Price">N/A</InfoRow>
<InfoRow title="Nonce">{txData.nonce}</InfoRow> <InfoRow title="Nonce">{txData.nonce}</InfoRow>
<InfoRow title="Position in Block"> <InfoRow title="Position in Block">
<span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs"> <span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">
@ -170,5 +241,6 @@ const Details: React.FC<DetailsProps> = ({
</InfoRow> </InfoRow>
</ContentFrame> </ContentFrame>
); );
};
export default React.memo(Details); export default React.memo(Details);

2
src/transaction/Logs.tsx
View File

@ -21,7 +21,7 @@ const Logs: React.FC<LogsProps> = ({ txData }) => (
<div className="w-full space-y-2"> <div className="w-full space-y-2">
<div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"> <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
<div className="font-bold text-right">Address</div> <div className="font-bold text-right">Address</div>
<div className="col-span-11"> <div className="col-span-11 mr-auto">
<DecoratedAddressLink <DecoratedAddressLink
address={l.address} address={l.address}
miner={l.address === txData.miner} miner={l.address === txData.miner}

62
src/transaction/RewardSplit.tsx Normal file
View File

@ -0,0 +1,62 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBurn, faCoins } from "@fortawesome/free-solid-svg-icons";
import FormattedBalance from "../components/FormattedBalance";
import { TransactionData } from "../types";
import PercentageGauge from "../components/PercentageGauge";
type RewardSplitProps = {
txData: TransactionData;
};
const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
const burntFees = txData.blockBaseFeePerGas!.mul(txData.gasUsed);
const minerReward = txData.gasPrice.mul(txData.gasUsed).sub(burntFees);
const burntPerc =
burntFees.mul(10000).div(txData.gasPrice.mul(txData.gasUsed)).toNumber() /
100;
return (
<div className="inline-block">
<div className="grid grid-cols-2 gap-x-2 gap-y-1 items-center text-sm">
<PercentageGauge
perc={burntPerc}
bgFull="bg-orange-100"
bgPerc="bg-orange-500"
textPerc="text-orange-800"
/>
<div className="flex items-baseline space-x-1">
<span className="flex space-x-1 text-orange-500">
<span title="Burnt fees">
<FontAwesomeIcon icon={faBurn} size="1x" />
</span>
<span>
<span className="line-through">
<FormattedBalance value={burntFees} />
</span>{" "}
Ether
</span>
</span>
</div>
<PercentageGauge
perc={100 - burntPerc}
bgFull="bg-yellow-100"
bgPerc="bg-yellow-300"
textPerc="text-yellow-700"
/>
<div className="flex items-baseline space-x-1">
<span className="flex space-x-1">
<span className="text-yellow-300" title="Miner fees">
<FontAwesomeIcon icon={faCoins} size="1x" />
</span>
<span>
<FormattedBalance value={minerReward} /> Ether
</span>
</span>
</div>
</div>
</div>
);
};
export default React.memo(RewardSplit);

7
src/types.ts
View File

@ -49,11 +49,14 @@ export type TransactionData = {
value: BigNumber; value: BigNumber;
tokenTransfers: TokenTransfer[]; tokenTransfers: TokenTransfer[];
tokenMetas: TokenMetas; tokenMetas: TokenMetas;
type: number;
maxFeePerGas?: BigNumber | undefined;
maxPriorityFeePerGas?: BigNumber | undefined;
fee: BigNumber; fee: BigNumber;
blockBaseFeePerGas?: BigNumber | undefined | null;
gasPrice: BigNumber; gasPrice: BigNumber;
gasLimit: BigNumber;
gasUsed: BigNumber; gasUsed: BigNumber;
gasUsedPerc: number; gasLimit: BigNumber;
nonce: number; nonce: number;
data: string; data: string;
logs: ethers.providers.Log[]; logs: ethers.providers.Log[];

8
src/url.ts
View File

@ -1,3 +1,5 @@
import { ethers } from "ethers";
export const fourBytesURL = ( export const fourBytesURL = (
assetsURLPrefix: string, assetsURLPrefix: string,
fourBytes: string fourBytes: string
@ -7,3 +9,9 @@ export const tokenLogoURL = (
assetsURLPrefix: string, assetsURLPrefix: string,
address: string address: string
): string => `${assetsURLPrefix}/assets/${address}/logo.png`; ): string => `${assetsURLPrefix}/assets/${address}/logo.png`;
export const blockURL = (blockNum: ethers.providers.BlockTag) =>
`/block/${blockNum}`;
export const blockTxsURL = (blockNum: ethers.providers.BlockTag) =>
`/block/${blockNum}/txs`;

75
src/useErigonHooks.ts
View File

@ -1,8 +1,81 @@
import { ethers } from "ethers"; import { ethers, BigNumber } from "ethers";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { getInternalOperations } from "./nodeFunctions"; import { getInternalOperations } from "./nodeFunctions";
import { TransactionData, InternalOperation } from "./types"; import { TransactionData, InternalOperation } from "./types";
export interface ExtendedBlock extends ethers.providers.Block {
blockReward: BigNumber;
unclesReward: BigNumber;
feeReward: BigNumber;
size: number;
sha3Uncles: string;
stateRoot: string;
totalDifficulty: BigNumber;
}
export const readBlock = async (
provider: ethers.providers.JsonRpcProvider,
blockNumberOrHash: string
) => {
let blockPromise: Promise<any>;
if (ethers.utils.isHexString(blockNumberOrHash, 32)) {
blockPromise = provider.send("eth_getBlockByHash", [
blockNumberOrHash,
false,
]);
} else {
blockPromise = provider.send("eth_getBlockByNumber", [
blockNumberOrHash,
false,
]);
}
const [_rawBlock, _rawIssuance, _rawReceipts] = await Promise.all([
blockPromise,
provider.send("erigon_issuance", [blockNumberOrHash]),
provider.send("eth_getBlockReceipts", [blockNumberOrHash]),
]);
const receipts = (_rawReceipts as any[]).map((r) =>
provider.formatter.receipt(r)
);
const fees = receipts.reduce(
(acc, r) => acc.add(r.effectiveGasPrice.mul(r.gasUsed)),
BigNumber.from(0)
);
const _block = provider.formatter.block(_rawBlock);
const extBlock: ExtendedBlock = {
blockReward: provider.formatter.bigNumber(_rawIssuance.blockReward ?? 0),
unclesReward: provider.formatter.bigNumber(_rawIssuance.uncleReward ?? 0),
feeReward: fees,
size: provider.formatter.number(_rawBlock.size),
sha3Uncles: _rawBlock.sha3Uncles,
stateRoot: _rawBlock.stateRoot,
totalDifficulty: provider.formatter.bigNumber(_rawBlock.totalDifficulty),
..._block,
};
return extBlock;
};
export const useBlockData = (
provider: ethers.providers.JsonRpcProvider | undefined,
blockNumberOrHash: string
) => {
const [block, setBlock] = useState<ExtendedBlock>();
useEffect(() => {
if (!provider) {
return;
}
const _readBlock = async () => {
const extBlock = await readBlock(provider, blockNumberOrHash);
setBlock(extBlock);
};
_readBlock();
}, [provider, blockNumberOrHash]);
return block;
};
export const useInternalOperations = ( export const useInternalOperations = (
provider: ethers.providers.JsonRpcProvider | undefined, provider: ethers.providers.JsonRpcProvider | undefined,
txData: TransactionData | undefined txData: TransactionData | undefined

5
src/useProvider.ts
View File

@ -33,10 +33,7 @@ export const useProvider = (
setConnStatus(ConnectionStatus.CONNECTING); setConnStatus(ConnectionStatus.CONNECTING);
const tryToConnect = async () => { const tryToConnect = async () => {
const provider = new ethers.providers.JsonRpcProvider( const provider = new ethers.providers.JsonRpcProvider(erigonURL);
erigonURL,
"mainnet"
);
// Check if it is at least a regular ETH node // Check if it is at least a regular ETH node
let blockNumber: number = 0; let blockNumber: number = 0;

2
trustwallet

@ -1 +1 @@
Subproject commit 011ccb88adc70c27b0d4fc0a10564199efd0a81f Subproject commit 5b803d37011ff89b287630a9ce90f96f8ed3311f