diff --git a/package-lock.json b/package-lock.json index 7b87ef2..8cfe621 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,6 +48,7 @@ "devDependencies": { "autoprefixer": "^9.8.6", "postcss": "^7.0.36", + "source-map-explorer": "^2.5.2", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6" } }, @@ -5268,6 +5269,18 @@ "node-int64": "^0.4.0" } }, + "node_modules/btoa": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz", + "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==", + "dev": true, + "bin": { + "btoa": "bin/btoa.js" + }, + "engines": { + "node": ">= 0.4.0" + } + }, "node_modules/buffer": { "version": "4.9.2", "license": "MIT", @@ -8437,6 +8450,15 @@ "license": "MIT", "optional": true }, + "node_modules/filelist": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz", + "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==", + "dev": true, + "dependencies": { + "minimatch": "^3.0.4" + } + }, "node_modules/filesize": { "version": "6.1.0", "license": "BSD-3-Clause", @@ -10115,6 +10137,77 @@ "node": ">=8" } }, + "node_modules/jake": { + "version": "10.8.2", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz", + "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==", + "dev": true, + "dependencies": { + "async": "0.9.x", + "chalk": "^2.4.2", + "filelist": "^1.0.1", + "minimatch": "^3.0.4" + }, + "bin": { + "jake": "bin/cli.js" + }, + "engines": { + "node": "*" + } + }, + "node_modules/jake/node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/jake/node_modules/async": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz", + "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=", + "dev": true + }, + "node_modules/jake/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/jake/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/jake/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/jest": { "version": "26.6.0", "license": "MIT", @@ -16156,6 +16249,136 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-explorer": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/source-map-explorer/-/source-map-explorer-2.5.2.tgz", + "integrity": "sha512-gBwOyCcHPHcdLbgw6Y6kgoH1uLKL6hN3zz0xJcNI2lpnElZliIlmSYAjUVwAWnc7+HscoTyh1ScR7ITtFuEnxg==", + "dev": true, + "dependencies": { + "btoa": "^1.2.1", + "chalk": "^4.1.0", + "convert-source-map": "^1.7.0", + "ejs": "^3.1.5", + "escape-html": "^1.0.3", + "glob": "^7.1.6", + "gzip-size": "^6.0.0", + "lodash": "^4.17.20", + "open": "^7.3.1", + "source-map": "^0.7.3", + "temp": "^0.9.4", + "yargs": "^16.2.0" + }, + "bin": { + "sme": "bin/cli.js", + "source-map-explorer": "bin/cli.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/source-map-explorer/node_modules/cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "node_modules/source-map-explorer/node_modules/ejs": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz", + "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==", + "dev": true, + "dependencies": { + "jake": "^10.6.1" + }, + "bin": { + "ejs": "bin/cli.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-explorer/node_modules/gzip-size": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz", + "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==", + "dev": true, + "dependencies": { + "duplexer": "^0.1.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/source-map-explorer/node_modules/source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/source-map-explorer/node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/source-map-explorer/node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/source-map-explorer/node_modules/yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "dev": true, + "dependencies": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/source-map-explorer/node_modules/yargs-parser": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/source-map-js": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", @@ -17138,6 +17361,19 @@ "node": ">=10" } }, + "node_modules/temp": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.4.tgz", + "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==", + "dev": true, + "dependencies": { + "mkdirp": "^0.5.1", + "rimraf": "~2.6.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/temp-dir": { "version": "1.0.0", "license": "MIT", @@ -17145,6 +17381,18 @@ "node": ">=4" } }, + "node_modules/temp/node_modules/rimraf": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", + "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", + "dev": true, + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + } + }, "node_modules/tempy": { "version": "0.3.0", "license": "MIT", @@ -22688,6 +22936,12 @@ "node-int64": "^0.4.0" } }, + "btoa": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz", + "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==", + "dev": true + }, "buffer": { "version": "4.9.2", "requires": { @@ -24808,6 +25062,15 @@ "version": "1.0.0", "optional": true }, + "filelist": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz", + "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==", + "dev": true, + "requires": { + "minimatch": "^3.0.4" + } + }, "filesize": { "version": "6.1.0" }, @@ -25855,6 +26118,61 @@ "istanbul-lib-report": "^3.0.0" } }, + "jake": { + "version": "10.8.2", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz", + "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==", + "dev": true, + "requires": { + "async": "0.9.x", + "chalk": "^2.4.2", + "filelist": "^1.0.1", + "minimatch": "^3.0.4" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "async": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz", + "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=", + "dev": true + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "jest": { "version": "26.6.0", "requires": { @@ -29964,6 +30282,101 @@ "source-map": { "version": "0.6.1" }, + "source-map-explorer": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/source-map-explorer/-/source-map-explorer-2.5.2.tgz", + "integrity": "sha512-gBwOyCcHPHcdLbgw6Y6kgoH1uLKL6hN3zz0xJcNI2lpnElZliIlmSYAjUVwAWnc7+HscoTyh1ScR7ITtFuEnxg==", + "dev": true, + "requires": { + "btoa": "^1.2.1", + "chalk": "^4.1.0", + "convert-source-map": "^1.7.0", + "ejs": "^3.1.5", + "escape-html": "^1.0.3", + "glob": "^7.1.6", + "gzip-size": "^6.0.0", + "lodash": "^4.17.20", + "open": "^7.3.1", + "source-map": "^0.7.3", + "temp": "^0.9.4", + "yargs": "^16.2.0" + }, + "dependencies": { + "cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "dev": true, + "requires": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "ejs": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz", + "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==", + "dev": true, + "requires": { + "jake": "^10.6.1" + } + }, + "gzip-size": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz", + "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==", + "dev": true, + "requires": { + "duplexer": "^0.1.2" + } + }, + "source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", + "dev": true + }, + "wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + } + }, + "y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true + }, + "yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "dev": true, + "requires": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + } + }, + "yargs-parser": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "dev": true + } + } + }, "source-map-js": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", @@ -30657,6 +31070,27 @@ } } }, + "temp": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.4.tgz", + "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==", + "dev": true, + "requires": { + "mkdirp": "^0.5.1", + "rimraf": "~2.6.2" + }, + "dependencies": { + "rimraf": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", + "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } + } + }, "temp-dir": { "version": "1.0.0" }, diff --git a/package.json b/package.json index 172b201..3bb6c3c 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "build": "craco build", "test": "craco test", "eject": "react-scripts eject", + "source-map-explorer": "source-map-explorer build/static/js/*.js", "assets-start": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/signatures:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets -v$(pwd)/nginx.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine", "assets-stop": "docker stop otterscan-assets", "docker-build": "DOCKER_BUILDKIT=1 docker build -t otterscan -f Dockerfile .", @@ -73,6 +74,7 @@ "devDependencies": { "autoprefixer": "^9.8.6", "postcss": "^7.0.36", + "source-map-explorer": "^2.5.2", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6" } } diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index 4727f7c..e79253e 100644 --- a/src/AddressTransactions.tsx +++ b/src/AddressTransactions.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useMemo, useContext } from "react"; import { useParams, useLocation, useHistory } from "react-router-dom"; -import { ethers } from "ethers"; +import { getAddress, isAddress } from "@ethersproject/address"; import queryString from "query-string"; import Blockies from "react-blockies"; import StandardFrame from "./StandardFrame"; @@ -43,12 +43,12 @@ const AddressTransactions: React.FC = () => { // If it looks like it is an ENS name, try to resolve it useEffect(() => { - if (ethers.utils.isAddress(params.addressOrName)) { + if (isAddress(params.addressOrName)) { setENS(false); setError(false); // Normalize to checksummed address - const _checksummedAddress = ethers.utils.getAddress(params.addressOrName); + const _checksummedAddress = getAddress(params.addressOrName); if (_checksummedAddress !== params.addressOrName) { // Request came with a non-checksummed address; fix the URL history.replace( diff --git a/src/Block.tsx b/src/Block.tsx index 298ef01..875d2f4 100644 --- a/src/Block.tsx +++ b/src/Block.tsx @@ -1,8 +1,10 @@ import React, { useEffect, useMemo, useContext } from "react"; import { useParams, NavLink } from "react-router-dom"; -import { BigNumber, ethers } from "ethers"; +import { BigNumber } from "@ethersproject/bignumber"; +import { commify } from "@ethersproject/units"; +import { toUtf8String } from "@ethersproject/strings"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faBurn } from "@fortawesome/free-solid-svg-icons"; +import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn"; import StandardFrame from "./StandardFrame"; import StandardSubtitle from "./StandardSubtitle"; import NavBlock from "./block/NavBlock"; @@ -38,7 +40,7 @@ const Block: React.FC = () => { const extraStr = useMemo(() => { try { - return block && ethers.utils.toUtf8String(block.extraData); + return block && toUtf8String(block.extraData); } catch (err) { console.error("Error while converting block extra data to string"); console.error(err); @@ -71,9 +73,7 @@ const Block: React.FC = () => { {block && ( - - {ethers.utils.commify(block.number)} - + {commify(block.number)} @@ -109,9 +109,7 @@ const Block: React.FC = () => { - - {ethers.utils.commify(block.size)} bytes - + {commify(block.size)} bytes {block.baseFeePerGas && ( @@ -156,11 +154,9 @@ const Block: React.FC = () => { {block.extraData}) N/A - - {ethers.utils.commify(block.difficulty)} - + {commify(block.difficulty)} - {ethers.utils.commify(block.totalDifficulty.toString())} + {commify(block.totalDifficulty.toString())} diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx index 4835fd3..5a7209f 100644 --- a/src/BlockTransactions.tsx +++ b/src/BlockTransactions.tsx @@ -1,6 +1,6 @@ import React, { useMemo, useContext } from "react"; import { useParams, useLocation } from "react-router"; -import { ethers } from "ethers"; +import { BigNumber } from "@ethersproject/bignumber"; import queryString from "query-string"; import StandardFrame from "./StandardFrame"; import BlockTransactionHeader from "./block/BlockTransactionHeader"; @@ -30,7 +30,7 @@ const BlockTransactions: React.FC = () => { } const blockNumber = useMemo( - () => ethers.BigNumber.from(params.blockNumber), + () => BigNumber.from(params.blockNumber), [params.blockNumber] ); diff --git a/src/ConnectionErrorPanel.tsx b/src/ConnectionErrorPanel.tsx index 47b1584..80a8205 100644 --- a/src/ConnectionErrorPanel.tsx +++ b/src/ConnectionErrorPanel.tsx @@ -1,10 +1,8 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faClock, - faCheckCircle, - faTimesCircle, -} from "@fortawesome/free-solid-svg-icons"; +import { faClock } from "@fortawesome/free-solid-svg-icons/faClock"; +import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle"; +import { faTimesCircle } from "@fortawesome/free-solid-svg-icons/faTimesCircle"; import { ConnectionStatus } from "./types"; import { OtterscanConfig } from "./useConfig"; diff --git a/src/Home.tsx b/src/Home.tsx index 9bee0e9..31ecb9a 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -1,8 +1,8 @@ import React, { useState, useContext } from "react"; import { NavLink, useHistory } from "react-router-dom"; -import { ethers } from "ethers"; +import { commify } from "@ethersproject/units"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faBurn } from "@fortawesome/free-solid-svg-icons"; +import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn"; import Logo from "./Logo"; import Timestamp from "./components/Timestamp"; import { RuntimeContext } from "./useRuntime"; @@ -74,7 +74,7 @@ const Home: React.FC = () => { className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue" to={blockURL(latestBlock.number)} > -
Latest block: {ethers.utils.commify(latestBlock.number)}
+
Latest block: {commify(latestBlock.number)}
)} diff --git a/src/PriceBox.tsx b/src/PriceBox.tsx index af5e461..ad73d06 100644 --- a/src/PriceBox.tsx +++ b/src/PriceBox.tsx @@ -1,7 +1,8 @@ import React, { useState, useEffect, useMemo, useContext } from "react"; -import { ethers } from "ethers"; +import { Contract } from "@ethersproject/contracts"; +import { commify, formatUnits } from "@ethersproject/units"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faGasPump } from "@fortawesome/free-solid-svg-icons"; +import { faGasPump } from "@fortawesome/free-solid-svg-icons/faGasPump"; import AggregatorV3Interface from "@chainlink/contracts/abi/v0.8/AggregatorV3Interface.json"; import { RuntimeContext } from "./useRuntime"; import { formatValue } from "./components/formatter"; @@ -19,17 +20,13 @@ const PriceBox: React.FC = () => { const ethFeed = useMemo( () => provider && - new ethers.Contract("eth-usd.data.eth", AggregatorV3Interface, provider), + new Contract("eth-usd.data.eth", AggregatorV3Interface, provider), [provider] ); const gasFeed = useMemo( () => provider && - new ethers.Contract( - "fast-gas-gwei.data.eth", - AggregatorV3Interface, - provider - ), + new Contract("fast-gas-gwei.data.eth", AggregatorV3Interface, provider), [provider] ); @@ -57,9 +54,7 @@ const PriceBox: React.FC = () => { } const price = latestPriceData.answer.div(10 ** (ETH_FEED_DECIMALS - 2)); - const formattedPrice = ethers.utils.commify( - ethers.utils.formatUnits(price, 2) - ); + const formattedPrice = commify(formatUnits(price, 2)); const timestamp = new Date(latestPriceData.updatedAt * 1000); return [formattedPrice, timestamp]; diff --git a/src/Search.tsx b/src/Search.tsx index 7b5adc3..78dc724 100644 --- a/src/Search.tsx +++ b/src/Search.tsx @@ -1,5 +1,6 @@ import { useLocation, useHistory } from "react-router-dom"; -import { ethers } from "ethers"; +import { isAddress } from "@ethersproject/address"; +import { isHexString } from "@ethersproject/bytes"; import queryString from "query-string"; type SearchParams = { @@ -12,11 +13,11 @@ const Search: React.FC = () => { const qs = queryString.parse(location.search); const q = (qs.q ?? "").toString(); - if (ethers.utils.isAddress(q)) { + if (isAddress(q)) { history.replace(`/address/${q}`); return <>; } - if (ethers.utils.isHexString(q, 32)) { + if (isHexString(q, 32)) { history.replace(`/tx/${q}`); return <>; } diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx index 92ec6ee..a093b7f 100644 --- a/src/TokenTransferItem.tsx +++ b/src/TokenTransferItem.tsx @@ -1,6 +1,6 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCaretRight } from "@fortawesome/free-solid-svg-icons"; +import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight"; import AddressHighlighter from "./components/AddressHighlighter"; import ValueHighlighter from "./components/ValueHighlighter"; import DecoratedAddressLink from "./components/DecoratedAddressLink"; diff --git a/src/block/BlockTransactionHeader.tsx b/src/block/BlockTransactionHeader.tsx index a15c463..724cee8 100644 --- a/src/block/BlockTransactionHeader.tsx +++ b/src/block/BlockTransactionHeader.tsx @@ -1,5 +1,5 @@ import React, { useContext } from "react"; -import { ethers } from "ethers"; +import { BlockTag } from "@ethersproject/abstract-provider"; import StandardSubtitle from "../StandardSubtitle"; import BlockLink from "../components/BlockLink"; import NavBlock from "./NavBlock"; @@ -8,7 +8,7 @@ import { useLatestBlockNumber } from "../useLatestBlock"; import { blockTxsURL } from "../url"; type BlockTransactionHeaderProps = { - blockTag: ethers.providers.BlockTag; + blockTag: BlockTag; }; const BlockTransactionHeader: React.FC = ({ diff --git a/src/block/NavBlock.tsx b/src/block/NavBlock.tsx index 32a1dee..081ec80 100644 --- a/src/block/NavBlock.tsx +++ b/src/block/NavBlock.tsx @@ -1,16 +1,14 @@ import React from "react"; -import { ethers } from "ethers"; +import { BlockTag } from "@ethersproject/abstract-provider"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faChevronLeft, - faChevronRight, -} from "@fortawesome/free-solid-svg-icons"; +import { faChevronLeft } from "@fortawesome/free-solid-svg-icons/faChevronLeft"; +import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight"; import NavButton from "./NavButton"; type NavBlockProps = { blockNumber: number; latestBlockNumber: number | undefined; - urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string; + urlBuilder?: (blockNumber: BlockTag) => string; }; const NavBlock: React.FC = ({ diff --git a/src/block/NavButton.tsx b/src/block/NavButton.tsx index edc85c4..dcdc9a4 100644 --- a/src/block/NavButton.tsx +++ b/src/block/NavButton.tsx @@ -1,11 +1,11 @@ -import { ethers } from "ethers"; import { NavLink } from "react-router-dom"; +import { BlockTag } from "@ethersproject/abstract-provider"; import { blockURL } from "../url"; type NavButtonProps = { blockNum: number; disabled?: boolean; - urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string; + urlBuilder?: (blockNumber: BlockTag) => string; }; const NavButton: React.FC = ({ diff --git a/src/components/BlockLink.tsx b/src/components/BlockLink.tsx index 155553f..fc639a7 100644 --- a/src/components/BlockLink.tsx +++ b/src/components/BlockLink.tsx @@ -1,17 +1,18 @@ import React from "react"; import { NavLink } from "react-router-dom"; -import { ethers } from "ethers"; +import { BlockTag } from "@ethersproject/abstract-provider"; +import { commify } from "@ethersproject/units"; import { blockURL } from "../url"; type BlockLinkProps = { - blockTag: ethers.providers.BlockTag; + blockTag: BlockTag; }; const BlockLink: React.FC = ({ blockTag }) => { const isNum = typeof blockTag === "number"; let text = blockTag; if (isNum) { - text = ethers.utils.commify(blockTag); + text = commify(blockTag); } return ( diff --git a/src/components/Copy.tsx b/src/components/Copy.tsx index 30f18b3..86e902d 100644 --- a/src/components/Copy.tsx +++ b/src/components/Copy.tsx @@ -1,7 +1,8 @@ import React, { useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCopy, faCheckCircle } from "@fortawesome/free-regular-svg-icons"; -import { faCheck } from "@fortawesome/free-solid-svg-icons"; +import { faCopy } from "@fortawesome/free-regular-svg-icons/faCopy"; +import { faCheckCircle } from "@fortawesome/free-regular-svg-icons/faCheckCircle"; +import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck"; type CopyProps = { value: string; diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx index 82d70f9..a325343 100644 --- a/src/components/DecoratedAddressLink.tsx +++ b/src/components/DecoratedAddressLink.tsx @@ -1,12 +1,10 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faStar, - faBomb, - faMoneyBillAlt, - faBurn, - faCoins, -} from "@fortawesome/free-solid-svg-icons"; +import { faStar } from "@fortawesome/free-solid-svg-icons/faStar"; +import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb"; +import { faMoneyBillAlt } from "@fortawesome/free-solid-svg-icons/faMoneyBillAlt"; +import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn"; +import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins"; import TokenLogo from "./TokenLogo"; import AddressOrENSName from "./AddressOrENSName"; import { AddressContext, TokenMeta, ZERO_ADDRESS } from "../types"; diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx index 51769a8..8d38069 100644 --- a/src/components/ExternalLink.tsx +++ b/src/components/ExternalLink.tsx @@ -1,6 +1,6 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"; +import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt"; type ExternalLinkProps = { href: string; diff --git a/src/components/FormattedBalance.tsx b/src/components/FormattedBalance.tsx index 1b6e1b3..6f83163 100644 --- a/src/components/FormattedBalance.tsx +++ b/src/components/FormattedBalance.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { ethers, BigNumber } from "ethers"; +import { BigNumber } from "@ethersproject/bignumber"; +import { commify, formatUnits } from "@ethersproject/units"; type FormatterBalanceProps = { value: BigNumber; @@ -10,9 +11,7 @@ const FormattedBalance: React.FC = ({ value, decimals = 18, }) => { - const formatted = ethers.utils.commify( - ethers.utils.formatUnits(value, decimals) - ); + const formatted = commify(formatUnits(value, decimals)); const stripZeroDec = formatted.endsWith(".0") ? formatted.slice(0, formatted.length - 2) : formatted; diff --git a/src/components/GasValue.tsx b/src/components/GasValue.tsx index 2b76a05..1a87b0c 100644 --- a/src/components/GasValue.tsx +++ b/src/components/GasValue.tsx @@ -1,12 +1,13 @@ import React from "react"; -import { BigNumber, ethers } from "ethers"; +import { BigNumber } from "@ethersproject/bignumber"; +import { commify, formatUnits } from "@ethersproject/units"; type GasValueProps = { value: BigNumber; }; const GasValue: React.FC = ({ value }) => { - return <>{ethers.utils.commify(ethers.utils.formatUnits(value, 0))}; + return <>{commify(formatUnits(value, 0))}; }; export default React.memo(GasValue); diff --git a/src/components/InternalCreate.tsx b/src/components/InternalCreate.tsx index e048477..7a723ce 100644 --- a/src/components/InternalCreate.tsx +++ b/src/components/InternalCreate.tsx @@ -1,6 +1,6 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faAngleRight } from "@fortawesome/free-solid-svg-icons"; +import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight"; import AddressHighlighter from "./AddressHighlighter"; import DecoratedAddressLink from "./DecoratedAddressLink"; import { TransactionData, InternalOperation } from "../types"; diff --git a/src/components/InternalSelfDestruct.tsx b/src/components/InternalSelfDestruct.tsx index 543b429..384ef14 100644 --- a/src/components/InternalSelfDestruct.tsx +++ b/src/components/InternalSelfDestruct.tsx @@ -1,7 +1,7 @@ import React, { useContext } from "react"; -import { ethers } from "ethers"; +import { formatEther } from "@ethersproject/units"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faAngleRight } from "@fortawesome/free-solid-svg-icons"; +import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight"; import AddressHighlighter from "./AddressHighlighter"; import DecoratedAddressLink from "./DecoratedAddressLink"; import { RuntimeContext } from "../useRuntime"; @@ -48,7 +48,7 @@ const InternalSelfDestruct: React.FC = ({ TRANSFER - {ethers.utils.formatEther(internalOp.value)} Ether + {formatEther(internalOp.value)} Ether
To diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx index 90dd967..b126d6f 100644 --- a/src/components/InternalTransfer.tsx +++ b/src/components/InternalTransfer.tsx @@ -1,7 +1,7 @@ import React from "react"; -import { ethers } from "ethers"; +import { formatEther } from "@ethersproject/units"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faAngleRight } from "@fortawesome/free-solid-svg-icons"; +import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight"; import AddressHighlighter from "./AddressHighlighter"; import DecoratedAddressLink from "./DecoratedAddressLink"; import { TransactionData, InternalOperation } from "../types"; @@ -24,7 +24,7 @@ const InternalTransfer: React.FC = ({ TRANSFER - {ethers.utils.formatEther(internalOp.value)} Ether + {formatEther(internalOp.value)} Ether
From diff --git a/src/components/Nonce.tsx b/src/components/Nonce.tsx index 69f1c17..f03eaad 100644 --- a/src/components/Nonce.tsx +++ b/src/components/Nonce.tsx @@ -1,6 +1,6 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowUp } from "@fortawesome/free-solid-svg-icons"; +import { faArrowUp } from "@fortawesome/free-solid-svg-icons/faArrowUp"; type NonceProps = { value: number; diff --git a/src/components/Timestamp.tsx b/src/components/Timestamp.tsx index 8da83d8..78c55b0 100644 --- a/src/components/Timestamp.tsx +++ b/src/components/Timestamp.tsx @@ -1,6 +1,6 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faClock } from "@fortawesome/free-regular-svg-icons"; +import { faClock } from "@fortawesome/free-regular-svg-icons/faClock"; import TimestampAge from "./TimestampAge"; type TimestampProps = { diff --git a/src/components/TransactionDirection.tsx b/src/components/TransactionDirection.tsx index 3695a77..948b8eb 100644 --- a/src/components/TransactionDirection.tsx +++ b/src/components/TransactionDirection.tsx @@ -1,9 +1,7 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faCoins, - faLongArrowAltRight, -} from "@fortawesome/free-solid-svg-icons"; +import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins"; +import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons/faLongArrowAltRight"; export enum Direction { IN, @@ -41,7 +39,7 @@ const TransactionDirection: React.FC = ({ msg = "SELF"; } else if (direction === Direction.INTERNAL) { msg = "INT"; - bgColor = "bg-green-100" + bgColor = "bg-green-100"; } if (flags === Flags.MINER) { diff --git a/src/components/TransactionValue.tsx b/src/components/TransactionValue.tsx index 9b9403c..f403b4a 100644 --- a/src/components/TransactionValue.tsx +++ b/src/components/TransactionValue.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { BigNumber } from "ethers"; +import { BigNumber } from "@ethersproject/bignumber"; import { formatValue } from "./formatter"; type TransactionValueProps = { diff --git a/src/components/ValueHighlighter.tsx b/src/components/ValueHighlighter.tsx index ce26b0e..c15b514 100644 --- a/src/components/ValueHighlighter.tsx +++ b/src/components/ValueHighlighter.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { BigNumber } from "ethers"; +import { BigNumber } from "@ethersproject/bignumber"; import { useSelectionContext } from "../useSelection"; type ValueHighlighterProps = React.PropsWithChildren<{ diff --git a/src/components/formatter.ts b/src/components/formatter.ts index 3a5a344..c3face8 100644 --- a/src/components/formatter.ts +++ b/src/components/formatter.ts @@ -1,9 +1,8 @@ -import { ethers, BigNumber } from "ethers"; +import { BigNumber } from "@ethersproject/bignumber"; +import { commify, formatUnits } from "@ethersproject/units"; export const formatValue = (value: BigNumber, decimals: number): string => { - const formatted = ethers.utils.commify( - ethers.utils.formatUnits(value, decimals) - ); + const formatted = commify(formatUnits(value, decimals)); return formatted.endsWith(".0") ? formatted.slice(0, formatted.length - 2) : formatted; diff --git a/src/nodeFunctions.ts b/src/nodeFunctions.ts index 29bd5d5..5a6f140 100644 --- a/src/nodeFunctions.ts +++ b/src/nodeFunctions.ts @@ -1,8 +1,9 @@ -import { ethers } from "ethers"; +import { JsonRpcProvider } from "@ethersproject/providers"; +import { getAddress } from "@ethersproject/address"; import { InternalOperation } from "./types"; export const getInternalOperations = async ( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, txHash: string ) => { const rawTransfers = await provider.send("ots_getInternalOperations", [ @@ -13,8 +14,8 @@ export const getInternalOperations = async ( for (const t of rawTransfers) { _transfers.push({ type: t.type, - from: ethers.utils.getAddress(t.from), - to: ethers.utils.getAddress(t.to), + from: getAddress(t.from), + to: getAddress(t.to), value: t.value, }); } diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx index bc84a6c..32aab32 100644 --- a/src/search/TransactionItem.tsx +++ b/src/search/TransactionItem.tsx @@ -1,6 +1,6 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons"; +import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle"; import MethodName from "../components/MethodName"; import BlockLink from "../components/BlockLink"; import TransactionLink from "../components/TransactionLink"; diff --git a/src/search/search.ts b/src/search/search.ts index e2d96c7..26af5e2 100644 --- a/src/search/search.ts +++ b/src/search/search.ts @@ -1,4 +1,4 @@ -import { ethers } from "ethers"; +import { JsonRpcProvider, TransactionResponse } from "@ethersproject/providers"; import { PAGE_SIZE } from "../params"; import { ProcessedTransaction, TransactionChunk } from "../types"; @@ -26,12 +26,9 @@ export class SearchController { } } - private static rawToProcessed = ( - provider: ethers.providers.JsonRpcProvider, - _rawRes: any - ) => { - const _res: ethers.providers.TransactionResponse[] = _rawRes.txs.map( - (t: any) => provider.formatter.transactionResponse(t) + private static rawToProcessed = (provider: JsonRpcProvider, _rawRes: any) => { + const _res: TransactionResponse[] = _rawRes.txs.map((t: any) => + provider.formatter.transactionResponse(t) ); return { @@ -59,7 +56,7 @@ export class SearchController { }; private static async readBackPage( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, address: string, baseBlock: number ): Promise { @@ -72,7 +69,7 @@ export class SearchController { } private static async readForwardPage( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, address: string, baseBlock: number ): Promise { @@ -85,7 +82,7 @@ export class SearchController { } static async firstPage( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, address: string ): Promise { const newTxs = await SearchController.readBackPage(provider, address, 0); @@ -99,7 +96,7 @@ export class SearchController { } static async middlePage( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, address: string, hash: string, next: boolean @@ -122,7 +119,7 @@ export class SearchController { } static async lastPage( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, address: string ): Promise { const newTxs = await SearchController.readForwardPage(provider, address, 0); @@ -140,7 +137,7 @@ export class SearchController { } async prevPage( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, hash: string ): Promise { // Already on this page @@ -169,7 +166,7 @@ export class SearchController { } async nextPage( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, hash: string ): Promise { // Already on this page diff --git a/src/special/london/BlockRow.tsx b/src/special/london/BlockRow.tsx index f8da89c..8915417 100644 --- a/src/special/london/BlockRow.tsx +++ b/src/special/london/BlockRow.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { ethers, FixedNumber } from "ethers"; +import { FixedNumber } from "@ethersproject/bignumber"; +import { commify, formatEther } from "@ethersproject/units"; import BlockLink from "../../components/BlockLink"; import TimestampAge from "../../components/TimestampAge"; import { ExtendedBlock } from "../../useErigonHooks"; @@ -34,10 +35,10 @@ const BlockRow: React.FC = ({ now, block, baseFeeDelta }) => { : "" }`} > - {ethers.utils.commify(block.gasUsed.toString())} + {commify(block.gasUsed.toString())}
- {ethers.utils.commify(gasTarget.toString())} + {commify(gasTarget.toString())}
@@ -52,13 +53,10 @@ const BlockRow: React.FC = ({ now, block, baseFeeDelta }) => {
- {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether + {commify(formatEther(totalReward))} Ether
- {ethers.utils.commify( - ethers.utils.formatEther(block.gasUsed.mul(block.baseFeePerGas!)) - )}{" "} - Ether + {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))} Ether
diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx index a07cfe6..64fcba8 100644 --- a/src/special/london/Blocks.tsx +++ b/src/special/london/Blocks.tsx @@ -5,17 +5,16 @@ import React, { useMemo, useCallback, } from "react"; -import { ethers, FixedNumber } from "ethers"; +import { Block } from "@ethersproject/abstract-provider"; +import { FixedNumber } from "@ethersproject/bignumber"; import { Line } from "react-chartjs-2"; import { Transition } from "@headlessui/react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faBurn, - faCoins, - faCube, - faGasPump, - faHistory, -} from "@fortawesome/free-solid-svg-icons"; +import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn"; +import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins"; +import { faCube } from "@fortawesome/free-solid-svg-icons/faCube"; +import { faGasPump } from "@fortawesome/free-solid-svg-icons/faGasPump"; +import { faHistory } from "@fortawesome/free-solid-svg-icons/faHistory"; import BlockRow from "./BlockRow"; import { ExtendedBlock, readBlock } from "../../useErigonHooks"; import { RuntimeContext } from "../../useRuntime"; @@ -31,7 +30,7 @@ const MAX_BLOCK_HISTORY = 20; const PREV_BLOCK_COUNT = 15; type BlocksProps = { - latestBlock: ethers.providers.Block; + latestBlock: Block; targetBlockNumber: number; }; diff --git a/src/special/london/Countdown.tsx b/src/special/london/Countdown.tsx index 718aa22..1c83773 100644 --- a/src/special/london/Countdown.tsx +++ b/src/special/london/Countdown.tsx @@ -1,9 +1,10 @@ import React, { useEffect, useState } from "react"; -import { ethers } from "ethers"; +import { JsonRpcProvider, Block } from "@ethersproject/providers"; +import { commify } from "@ethersproject/units"; type CountdownProps = { - provider: ethers.providers.JsonRpcProvider; - currentBlock: ethers.providers.Block; + provider: JsonRpcProvider; + currentBlock: Block; targetBlock: number; }; @@ -31,12 +32,12 @@ const Countdown: React.FC = ({

London Network Upgrade

- {ethers.utils.commify(targetBlock - currentBlock.number)} + {commify(targetBlock - currentBlock.number)}

Blocks remaining

-
Current block: {ethers.utils.commify(currentBlock.number)}
-
Target block: {ethers.utils.commify(targetBlock)}
+
Current block: {commify(currentBlock.number)}
+
Target block: {commify(targetBlock)}

{targetTimestamp && (
diff --git a/src/special/london/chart.ts b/src/special/london/chart.ts index 4ce3de1..8c57fdf 100644 --- a/src/special/london/chart.ts +++ b/src/special/london/chart.ts @@ -1,4 +1,4 @@ -import { ethers } from "ethers"; +import { commify } from "@ethersproject/units"; import { ChartData, ChartOptions } from "chart.js"; import { ExtendedBlock } from "../../useErigonHooks"; @@ -14,7 +14,7 @@ export const burntFeesChartOptions: ChartOptions = { ticks: { callback: function (v) { // @ts-ignore - return ethers.utils.commify(this.getLabelForValue(v)); + return commify(this.getLabelForValue(v)); }, }, }, @@ -84,7 +84,7 @@ export const gasChartOptions: ChartOptions = { ticks: { callback: function (v) { // @ts-ignore - return ethers.utils.commify(this.getLabelForValue(v)); + return commify(this.getLabelForValue(v)); }, }, }, diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx index 2946df5..6a1f4d6 100644 --- a/src/transaction/Details.tsx +++ b/src/transaction/Details.tsx @@ -1,11 +1,9 @@ import React from "react"; -import { ethers } from "ethers"; +import { formatEther } from "@ethersproject/units"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faCheckCircle, - faCube, - faTimesCircle, -} from "@fortawesome/free-solid-svg-icons"; +import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle"; +import { faCube } from "@fortawesome/free-solid-svg-icons/faCube"; +import { faTimesCircle } from "@fortawesome/free-solid-svg-icons/faTimesCircle"; import ContentFrame from "../ContentFrame"; import InfoRow from "../components/InfoRow"; import BlockLink from "../components/BlockLink"; @@ -161,7 +159,7 @@ const Details: React.FC = ({ )} - {ethers.utils.formatEther(txData.value)} Ether + {formatEther(txData.value)} Ether `${assetsURLPrefix}/assets/${address}/logo.png`; -export const blockURL = (blockNum: ethers.providers.BlockTag) => - `/block/${blockNum}`; +export const blockURL = (blockNum: BlockTag) => `/block/${blockNum}`; -export const blockTxsURL = (blockNum: ethers.providers.BlockTag) => - `/block/${blockNum}/txs`; +export const blockTxsURL = (blockNum: BlockTag) => `/block/${blockNum}/txs`; diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts index 0c9c7c5..4067f4c 100644 --- a/src/useErigonHooks.ts +++ b/src/useErigonHooks.ts @@ -1,6 +1,10 @@ import { useState, useEffect } from "react"; -import { ethers, BigNumber } from "ethers"; -import { BlockWithTransactions } from "@ethersproject/abstract-provider"; +import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider"; +import { JsonRpcProvider } from "@ethersproject/providers"; +import { getAddress } from "@ethersproject/address"; +import { Contract } from "@ethersproject/contracts"; +import { BigNumber } from "@ethersproject/bignumber"; +import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes"; import { getInternalOperations } from "./nodeFunctions"; import { TokenMetas, @@ -15,7 +19,7 @@ import erc20 from "./erc20.json"; const TRANSFER_TOPIC = "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef"; -export interface ExtendedBlock extends ethers.providers.Block { +export interface ExtendedBlock extends Block { blockReward: BigNumber; unclesReward: BigNumber; feeReward: BigNumber; @@ -27,11 +31,11 @@ export interface ExtendedBlock extends ethers.providers.Block { } export const readBlock = async ( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, blockNumberOrHash: string ) => { let blockPromise: Promise; - if (ethers.utils.isHexString(blockNumberOrHash, 32)) { + if (isHexString(blockNumberOrHash, 32)) { // TODO: fix blockPromise = provider.send("eth_getBlockByHash", [ blockNumberOrHash, @@ -65,7 +69,7 @@ export const readBlock = async ( }; export const useBlockTransactions = ( - provider: ethers.providers.JsonRpcProvider | undefined, + provider: JsonRpcProvider | undefined, blockNumber: number, pageNumber: number, pageSize: number @@ -129,7 +133,7 @@ export const useBlockTransactions = ( (op) => op.type === OperationType.TRANSFER && res.miner !== undefined && - res.miner === ethers.utils.getAddress(op.to) + res.miner === getAddress(op.to) ) !== -1 ); }) @@ -149,7 +153,7 @@ export const useBlockTransactions = ( }; export const useBlockData = ( - provider: ethers.providers.JsonRpcProvider | undefined, + provider: JsonRpcProvider | undefined, blockNumberOrHash: string ) => { const [block, setBlock] = useState(); @@ -169,7 +173,7 @@ export const useBlockData = ( }; export const useTxData = ( - provider: ethers.providers.JsonRpcProvider | undefined, + provider: JsonRpcProvider | undefined, txhash: string ): TransactionData | undefined => { const [txData, setTxData] = useState(); @@ -198,12 +202,8 @@ export const useTxData = ( } tokenTransfers.push({ token: l.address, - from: ethers.utils.getAddress( - ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[1]), 12) - ), - to: ethers.utils.getAddress( - ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[2]), 12) - ), + from: getAddress(hexDataSlice(arrayify(l.topics[1]), 12)), + to: getAddress(hexDataSlice(arrayify(l.topics[2]), 12)), value: BigNumber.from(l.data), }); } @@ -214,7 +214,7 @@ export const useTxData = ( if (tokenMetas[t.token]) { continue; } - const erc20Contract = new ethers.Contract(t.token, erc20, provider); + const erc20Contract = new Contract(t.token, erc20, provider); const [name, symbol, decimals] = await Promise.all([ erc20Contract.name(), erc20Contract.symbol(), @@ -262,7 +262,7 @@ export const useTxData = ( }; export const useInternalOperations = ( - provider: ethers.providers.JsonRpcProvider | undefined, + provider: JsonRpcProvider | undefined, txData: TransactionData | undefined ): InternalOperation[] | undefined => { const [intTransfers, setIntTransfers] = useState(); diff --git a/src/useLatestBlock.ts b/src/useLatestBlock.ts index 5ed444b..a38a4ef 100644 --- a/src/useLatestBlock.ts +++ b/src/useLatestBlock.ts @@ -1,8 +1,9 @@ import { useState, useEffect } from "react"; -import { ethers } from "ethers"; +import { Block } from "@ethersproject/abstract-provider"; +import { JsonRpcProvider } from "@ethersproject/providers"; -export const useLatestBlock = (provider?: ethers.providers.JsonRpcProvider) => { - const [latestBlock, setLatestBlock] = useState(); +export const useLatestBlock = (provider?: JsonRpcProvider) => { + const [latestBlock, setLatestBlock] = useState(); useEffect(() => { if (!provider) { @@ -34,9 +35,7 @@ export const useLatestBlock = (provider?: ethers.providers.JsonRpcProvider) => { return latestBlock; }; -export const useLatestBlockNumber = ( - provider?: ethers.providers.JsonRpcProvider -) => { +export const useLatestBlockNumber = (provider?: JsonRpcProvider) => { const [latestBlock, setLatestBlock] = useState(); useEffect(() => { diff --git a/src/useProvider.ts b/src/useProvider.ts index 183f51f..7f89f36 100644 --- a/src/useProvider.ts +++ b/src/useProvider.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { ethers } from "ethers"; +import { JsonRpcProvider, WebSocketProvider } from "@ethersproject/providers"; import { ConnectionStatus } from "./types"; import { MIN_API_LEVEL } from "./params"; @@ -7,7 +7,7 @@ export const DEFAULT_ERIGON_URL = "http://127.0.0.1:8545"; export const useProvider = ( erigonURL?: string -): [ConnectionStatus, ethers.providers.JsonRpcProvider | undefined] => { +): [ConnectionStatus, JsonRpcProvider | undefined] => { const [connStatus, setConnStatus] = useState( ConnectionStatus.CONNECTING ); @@ -21,9 +21,7 @@ export const useProvider = ( } } - const [provider, setProvider] = useState< - ethers.providers.JsonRpcProvider | undefined - >(); + const [provider, setProvider] = useState(); useEffect(() => { if (erigonURL === undefined) { setConnStatus(ConnectionStatus.NOT_ETH_NODE); @@ -33,11 +31,11 @@ export const useProvider = ( setConnStatus(ConnectionStatus.CONNECTING); const tryToConnect = async () => { - let provider: ethers.providers.JsonRpcProvider; + let provider: JsonRpcProvider; if (erigonURL?.startsWith("ws://") || erigonURL?.startsWith("wss://")) { - provider = new ethers.providers.WebSocketProvider(erigonURL); + provider = new WebSocketProvider(erigonURL); } else { - provider = new ethers.providers.JsonRpcProvider(erigonURL); + provider = new JsonRpcProvider(erigonURL); } // Check if it is at least a regular ETH node diff --git a/src/useReverseCache.ts b/src/useReverseCache.ts index 4188904..86c6472 100644 --- a/src/useReverseCache.ts +++ b/src/useReverseCache.ts @@ -1,9 +1,9 @@ import { useState, useEffect } from "react"; -import { ethers } from "ethers"; +import { JsonRpcProvider } from "@ethersproject/providers"; import { ENSReverseCache, ProcessedTransaction } from "./types"; export const useENSCache = ( - provider?: ethers.providers.JsonRpcProvider, + provider?: JsonRpcProvider, page?: ProcessedTransaction[] ) => { const [reverseCache, setReverseCache] = useState(); diff --git a/src/useRuntime.ts b/src/useRuntime.ts index 77fef72..4573e84 100644 --- a/src/useRuntime.ts +++ b/src/useRuntime.ts @@ -1,5 +1,5 @@ import React, { useMemo } from "react"; -import { ethers } from "ethers"; +import { JsonRpcProvider } from "@ethersproject/providers"; import { OtterscanConfig, useConfig } from "./useConfig"; import { useProvider } from "./useProvider"; import { ConnectionStatus } from "./types"; @@ -7,7 +7,7 @@ import { ConnectionStatus } from "./types"; export type OtterscanRuntime = { config?: OtterscanConfig; connStatus: ConnectionStatus; - provider?: ethers.providers.JsonRpcProvider; + provider?: JsonRpcProvider; }; export const useRuntime = (): OtterscanRuntime => {