Merge branch 'feature/reduce-bundle-size' into develop

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"
     },

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"
   }
 }

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(

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 && (
         <ContentFrame>
           <InfoRow title="Block Height">
-            <span className="font-bold">
+            <span className="font-bold">{commify(block.number)}</span>
-              {ethers.utils.commify(block.number)}
-            </span>
           </InfoRow>
           <InfoRow title="Timestamp">
             <Timestamp value={block.timestamp} />
@@ -109,9 +109,7 @@ const Block: React.FC = () => {
           <InfoRow title="Uncles Reward">
             <TransactionValue value={block.unclesReward} />
           </InfoRow>
-          <InfoRow title="Size">
+          <InfoRow title="Size">{commify(block.size)} bytes</InfoRow>
-            {ethers.utils.commify(block.size)} bytes
-          </InfoRow>
           {block.baseFeePerGas && (
             <InfoRow title="Base Fee">
               <span>
@@ -156,11 +154,9 @@ const Block: React.FC = () => {
             <span className="font-data">{block.extraData}</span>)
           </InfoRow>
           <InfoRow title="Ether Price">N/A</InfoRow>
-          <InfoRow title="Difficult">
+          <InfoRow title="Difficult">{commify(block.difficulty)}</InfoRow>
-            {ethers.utils.commify(block.difficulty)}
-          </InfoRow>
           <InfoRow title="Total Difficult">
-            {ethers.utils.commify(block.totalDifficulty.toString())}
+            {commify(block.totalDifficulty.toString())}
           </InfoRow>
           <InfoRow title="Hash">
             <HexValue value={block.hash} />

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]
   );
 

src/ConnectionErrorPanel.tsx

@@ -1,10 +1,8 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
+import { faClock } from "@fortawesome/free-solid-svg-icons/faClock";
-  faClock,
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
-  faCheckCircle,
+import { faTimesCircle } from "@fortawesome/free-solid-svg-icons/faTimesCircle";
-  faTimesCircle,
-} from "@fortawesome/free-solid-svg-icons";
 import { ConnectionStatus } from "./types";
 import { OtterscanConfig } from "./useConfig";
 

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)}
           >
-            <div>Latest block: {ethers.utils.commify(latestBlock.number)}</div>
+            <div>Latest block: {commify(latestBlock.number)}</div>
             <Timestamp value={latestBlock.timestamp} />
           </NavLink>
         )}

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(
+      new Contract("fast-gas-gwei.data.eth", AggregatorV3Interface, provider),
-        "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(
+    const formattedPrice = commify(formatUnits(price, 2));
-      ethers.utils.formatUnits(price, 2)
-    );
 
     const timestamp = new Date(latestPriceData.updatedAt * 1000);
     return [formattedPrice, timestamp];

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 <></>;
   }

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";

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<BlockTransactionHeaderProps> = ({

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 {
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons/faChevronLeft";
-  faChevronLeft,
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
-  faChevronRight,
-} from "@fortawesome/free-solid-svg-icons";
 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<NavBlockProps> = ({

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<NavButtonProps> = ({

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<BlockLinkProps> = ({ blockTag }) => {
   const isNum = typeof blockTag === "number";
   let text = blockTag;
   if (isNum) {
-    text = ethers.utils.commify(blockTag);
+    text = commify(blockTag);
   }
 
   return (

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 { faCopy } from "@fortawesome/free-regular-svg-icons/faCopy";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons/faCheckCircle";
+import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
 
 type CopyProps = {
   value: string;

src/components/DecoratedAddressLink.tsx

@@ -1,12 +1,10 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
+import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
-  faStar,
+import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
-  faBomb,
+import { faMoneyBillAlt } from "@fortawesome/free-solid-svg-icons/faMoneyBillAlt";
-  faMoneyBillAlt,
+import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
-  faBurn,
+import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
-  faCoins,
-} from "@fortawesome/free-solid-svg-icons";
 import TokenLogo from "./TokenLogo";
 import AddressOrENSName from "./AddressOrENSName";
 import { AddressContext, TokenMeta, ZERO_ADDRESS } from "../types";

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;

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<FormatterBalanceProps> = ({
   value,
   decimals = 18,
 }) => {
-  const formatted = ethers.utils.commify(
+  const formatted = commify(formatUnits(value, decimals));
-    ethers.utils.formatUnits(value, decimals)
-  );
   const stripZeroDec = formatted.endsWith(".0")
     ? formatted.slice(0, formatted.length - 2)
     : formatted;

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<GasValueProps> = ({ value }) => {
-  return <>{ethers.utils.commify(ethers.utils.formatUnits(value, 0))}</>;
+  return <>{commify(formatUnits(value, 0))}</>;
 };
 
 export default React.memo(GasValue);

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";

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<InternalSelfDestructProps> = ({
           <span className="text-gray-500">
             <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
           </span>
-          <span>{ethers.utils.formatEther(internalOp.value)} Ether</span>
+          <span>{formatEther(internalOp.value)} Ether</span>
           <div className="flex items-baseline">
             <span className="text-gray-500">To</span>
             <AddressHighlighter address={internalOp.to}>

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<InternalTransferProps> = ({
       <span className="text-gray-500">
         <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
       </span>
-      <span>{ethers.utils.formatEther(internalOp.value)} Ether</span>
+      <span>{formatEther(internalOp.value)} Ether</span>
       <div className="flex items-baseline">
         <span className="text-gray-500">From</span>
         <AddressHighlighter address={internalOp.from}>

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;

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 = {

src/components/TransactionDirection.tsx

@@ -1,9 +1,7 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
+import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
-  faCoins,
+import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons/faLongArrowAltRight";
-  faLongArrowAltRight,
-} from "@fortawesome/free-solid-svg-icons";
 
 export enum Direction {
   IN,
@@ -41,7 +39,7 @@ const TransactionDirection: React.FC<TransactionDirectionProps> = ({
     msg = "SELF";
   } else if (direction === Direction.INTERNAL) {
     msg = "INT";
-    bgColor = "bg-green-100"
+    bgColor = "bg-green-100";
   }
 
   if (flags === Flags.MINER) {

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 = {

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<{

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(
+  const formatted = commify(formatUnits(value, decimals));
-    ethers.utils.formatUnits(value, decimals)
-  );
   return formatted.endsWith(".0")
     ? formatted.slice(0, formatted.length - 2)
     : formatted;

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),
+      from: getAddress(t.from),
-      to: ethers.utils.getAddress(t.to),
+      to: getAddress(t.to),
       value: t.value,
     });
   }

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";

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 = (
+  private static rawToProcessed = (provider: JsonRpcProvider, _rawRes: any) => {
-    provider: ethers.providers.JsonRpcProvider,
+    const _res: TransactionResponse[] = _rawRes.txs.map((t: any) =>
-    _rawRes: any
+      provider.formatter.transactionResponse(t)
-  ) => {
-    const _res: ethers.providers.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<TransactionChunk> {
@@ -72,7 +69,7 @@ export class SearchController {
   }
 
   private static async readForwardPage(
-    provider: ethers.providers.JsonRpcProvider,
+    provider: JsonRpcProvider,
     address: string,
     baseBlock: number
   ): Promise<TransactionChunk> {
@@ -85,7 +82,7 @@ export class SearchController {
   }
 
   static async firstPage(
-    provider: ethers.providers.JsonRpcProvider,
+    provider: JsonRpcProvider,
     address: string
   ): Promise<SearchController> {
     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<SearchController> {
     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<SearchController> {
     // Already on this page
@@ -169,7 +166,7 @@ export class SearchController {
   }
 
   async nextPage(
-    provider: ethers.providers.JsonRpcProvider,
+    provider: JsonRpcProvider,
     hash: string
   ): Promise<SearchController> {
     // Already on this page

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<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
             : ""
         }`}
       >
-        {ethers.utils.commify(block.gasUsed.toString())}
+        {commify(block.gasUsed.toString())}
       </div>
       <div className="text-right text-gray-400">
-        {ethers.utils.commify(gasTarget.toString())}
+        {commify(gasTarget.toString())}
       </div>
       <div className="text-right">
         <div className="relative">
@@ -52,13 +53,10 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
         </div>
       </div>
       <div className="text-right col-span-2">
-        {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
+        {commify(formatEther(totalReward))} Ether
       </div>
       <div className="text-right col-span-2 line-through text-orange-500">
-        {ethers.utils.commify(
+        {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))} Ether
-          ethers.utils.formatEther(block.gasUsed.mul(block.baseFeePerGas!))
-        )}{" "}
-        Ether
       </div>
       <div className="text-right text-gray-400">
         <TimestampAge now={now / 1000} timestamp={block.timestamp} />

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 {
+import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
-  faBurn,
+import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
-  faCoins,
+import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
-  faCube,
+import { faGasPump } from "@fortawesome/free-solid-svg-icons/faGasPump";
-  faGasPump,
+import { faHistory } from "@fortawesome/free-solid-svg-icons/faHistory";
-  faHistory,
-} from "@fortawesome/free-solid-svg-icons";
 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;
 };
 

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;
+  provider: JsonRpcProvider;
-  currentBlock: ethers.providers.Block;
+  currentBlock: Block;
   targetBlock: number;
 };
 
@@ -31,12 +32,12 @@ const Countdown: React.FC<CountdownProps> = ({
       <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)}
+          {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>Current block: {commify(currentBlock.number)}</div>
-          <div>Target block: {ethers.utils.commify(targetBlock)}</div>
+          <div>Target block: {commify(targetBlock)}</div>
         </h2>
         {targetTimestamp && (
           <div className="text-lg">

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));
         },
       },
     },

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 {
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
-  faCheckCircle,
+import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
-  faCube,
+import { faTimesCircle } from "@fortawesome/free-solid-svg-icons/faTimesCircle";
-  faTimesCircle,
-} from "@fortawesome/free-solid-svg-icons";
 import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
 import BlockLink from "../components/BlockLink";
@@ -161,7 +159,7 @@ const Details: React.FC<DetailsProps> = ({
       )}
       <InfoRow title="Value">
         <span className="rounded bg-gray-100 px-2 py-1 text-xs">
-          {ethers.utils.formatEther(txData.value)} Ether
+          {formatEther(txData.value)} Ether
         </span>
       </InfoRow>
       <InfoRow

src/transaction/RewardSplit.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBurn, faCoins } 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 FormattedBalance from "../components/FormattedBalance";
 import { TransactionData } from "../types";
 import PercentageGauge from "../components/PercentageGauge";

src/types.ts

@@ -1,4 +1,5 @@
-import { ethers, BigNumber } from "ethers";
+import { BigNumber } from "@ethersproject/bignumber";
+import { Log } from "@ethersproject/providers";
 
 export enum ConnectionStatus {
   CONNECTING,
@@ -60,7 +61,7 @@ export type TransactionData = {
   gasLimit: BigNumber;
   nonce: number;
   data: string;
-  logs: ethers.providers.Log[];
+  logs: Log[];
 };
 
 // The VOID...

src/url.ts

@@ -1,4 +1,4 @@
-import { ethers } from "ethers";
+import { BlockTag } from "@ethersproject/abstract-provider";
 
 export const fourBytesURL = (
   assetsURLPrefix: string,
@@ -10,8 +10,6 @@ export const tokenLogoURL = (
   address: string
 ): string => `${assetsURLPrefix}/assets/${address}/logo.png`;
 
-export const blockURL = (blockNum: ethers.providers.BlockTag) =>
+export const blockURL = (blockNum: BlockTag) => `/block/${blockNum}`;
-  `/block/${blockNum}`;
 
-export const blockTxsURL = (blockNum: ethers.providers.BlockTag) =>
+export const blockTxsURL = (blockNum: BlockTag) => `/block/${blockNum}/txs`;
-  `/block/${blockNum}/txs`;

src/useErigonHooks.ts

@@ -1,6 +1,10 @@
 import { useState, useEffect } from "react";
-import { ethers, BigNumber } from "ethers";
+import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider";
-import { 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<any>;
-  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<ExtendedBlock>();
@@ -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<TransactionData>();
@@ -198,12 +202,8 @@ export const useTxData = (
         }
         tokenTransfers.push({
           token: l.address,
-          from: ethers.utils.getAddress(
+          from: getAddress(hexDataSlice(arrayify(l.topics[1]), 12)),
-            ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[1]), 12)
+          to: getAddress(hexDataSlice(arrayify(l.topics[2]), 12)),
-          ),
-          to: ethers.utils.getAddress(
-            ethers.utils.hexDataSlice(ethers.utils.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<InternalOperation[]>();

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) => {
+export const useLatestBlock = (provider?: JsonRpcProvider) => {
-  const [latestBlock, setLatestBlock] = useState<ethers.providers.Block>();
+  const [latestBlock, setLatestBlock] = useState<Block>();
 
   useEffect(() => {
     if (!provider) {
@@ -34,9 +35,7 @@ export const useLatestBlock = (provider?: ethers.providers.JsonRpcProvider) => {
   return latestBlock;
 };
 
-export const useLatestBlockNumber = (
+export const useLatestBlockNumber = (provider?: JsonRpcProvider) => {
-  provider?: ethers.providers.JsonRpcProvider
-) => {
   const [latestBlock, setLatestBlock] = useState<number>();
 
   useEffect(() => {

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>(
     ConnectionStatus.CONNECTING
   );
@@ -21,9 +21,7 @@ export const useProvider = (
     }
   }
 
-  const [provider, setProvider] = useState<
+  const [provider, setProvider] = useState<JsonRpcProvider | undefined>();
-    ethers.providers.JsonRpcProvider | undefined
-  >();
   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

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<ENSReverseCache>();

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 => {