diff --git a/.nvmrc b/.nvmrc
index a5e323e..ff65059 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v14.17.3
+v16.13.0
diff --git a/Dockerfile b/Dockerfile
index aec42e4..0d910e2 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,5 +1,4 @@
-FROM node:14.17.3-alpine3.14 AS builder
-RUN npm i -g npm@7.19.1
+FROM node:16.13.0-alpine3.14 AS builder
 WORKDIR /otterscan-build
 COPY ["package.json", "package-lock.json", "/otterscan-build/"]
 RUN npm install
diff --git a/nginx/conf.d/default.conf b/nginx/conf.d/default.conf
index b5d141b..4fdf9a1 100644
--- a/nginx/conf.d/default.conf
+++ b/nginx/conf.d/default.conf
@@ -118,7 +118,7 @@ server {
         index  index.html;
         try_files $uri /index.html;
 
-        brotli_static on;
+        # brotli_static on;
     }
 
     #error_page  404              /404.html;
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
index 7364514..72d7924 100644
--- a/nginx/nginx.conf
+++ b/nginx/nginx.conf
@@ -4,7 +4,7 @@ worker_processes  auto;
 error_log  /var/log/nginx/error.log notice;
 pid        /var/run/nginx.pid;
 
-load_module modules/ngx_http_brotli_static_module.so;
+#load_module modules/ngx_http_brotli_static_module.so;
 
 events {
     worker_connections  1024;
diff --git a/package-lock.json b/package-lock.json
index ef51571..d3f7ea8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@blackbox-vision/react-qr-reader": "^5.0.0",
         "@chainlink/contracts": "^0.2.2",
         "@craco/craco": "^6.4.0",
-        "@fontsource/fira-code": "^4.5.1",
+        "@fontsource/fira-code": "^4.5.2",
         "@fontsource/roboto": "^4.5.1",
         "@fontsource/roboto-mono": "^4.5.0",
         "@fontsource/space-grotesk": "^4.5.0",
@@ -21,21 +21,21 @@
         "@fortawesome/free-regular-svg-icons": "^5.15.4",
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/react-fontawesome": "^0.1.16",
-        "@headlessui/react": "^1.4.1",
-        "@testing-library/jest-dom": "^5.14.1",
+        "@headlessui/react": "^1.4.2",
+        "@testing-library/jest-dom": "^5.15.0",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
         "@types/jest": "^26.0.24",
         "@types/node": "^14.17.5",
-        "@types/react": "^17.0.33",
+        "@types/react": "^17.0.35",
         "@types/react-blockies": "^1.4.1",
-        "@types/react-dom": "^17.0.10",
+        "@types/react-dom": "^17.0.11",
         "@types/react-highlight": "^0.12.5",
         "@types/react-router-dom": "^5.3.2",
         "@types/react-syntax-highlighter": "^13.5.2",
         "chart.js": "^3.5.1",
         "ethers": "^5.5.1",
-        "highlightjs-solidity": "^2.0.1",
+        "highlightjs-solidity": "^2.0.2",
         "query-string": "^7.0.1",
         "react": "^17.0.2",
         "react-blockies": "^1.4.1",
@@ -46,8 +46,8 @@
         "react-image": "^4.0.3",
         "react-router-dom": "^5.3.0",
         "react-scripts": "4.0.3",
-        "react-syntax-highlighter": "^15.4.4",
-        "serve": "^12.0.1",
+        "react-syntax-highlighter": "^15.4.5",
+        "serve": "^13.0.2",
         "typescript": "^4.4.4",
         "use-keyboard-shortcut": "^1.0.6",
         "web-vitals": "^1.0.1"
@@ -2049,9 +2049,9 @@
       }
     },
     "node_modules/@fontsource/fira-code": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-4.5.1.tgz",
-      "integrity": "sha512-8KTCsfs5m3UgICpHLglIKAS7vc2FFOu7/vvpWcE/42SWbh+9X8EJbEyJp6W96kU5iDVlAlUv4Cqc36Z9XUpLmA=="
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-4.5.2.tgz",
+      "integrity": "sha512-wNUvcqmm1dZYTbJlkbFZL9Huu7p+Hwaa4CLNTPql3CG90Rh9dSi43wNg5AnVHxjAhWQOGlCpSrEswnnHu1CkxA=="
     },
     "node_modules/@fontsource/roboto": {
       "version": "4.5.1",
@@ -2167,9 +2167,9 @@
       }
     },
     "node_modules/@headlessui/react": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.1.tgz",
-      "integrity": "sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.2.tgz",
+      "integrity": "sha512-N8tv7kLhg9qGKBkVdtg572BvKvWhmiudmeEpOCyNwzOsZHCXBtl8AazGikIfUS+vBoub20Fse3BjawXDVPPdug==",
       "engines": {
         "node": ">=10"
       },
@@ -2887,9 +2887,9 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz",
-      "integrity": "sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.15.0.tgz",
+      "integrity": "sha512-lOMuQidnL1tWHLEWIhL6UvSZC1Qt3OkNe1khvi2h6xFiqpe5O8arYs46OU0qyUGq0cSTbroQyMktYNXu3a7sAA==",
       "dependencies": {
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
@@ -3127,9 +3127,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "17.0.33",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.33.tgz",
-      "integrity": "sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==",
+      "version": "17.0.35",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.35.tgz",
+      "integrity": "sha512-r3C8/TJuri/SLZiiwwxQoLAoavaczARfT9up9b4Jr65+ErAUX3MIkU0oMOQnrpfgHme8zIqZLX7O5nnjm5Wayw==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3145,9 +3145,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "17.0.10",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.10.tgz",
-      "integrity": "sha512-8oz3NAUId2z/zQdFI09IMhQPNgIbiP8Lslhv39DIDamr846/0spjZK0vnrMak0iB8EKb9QFTTIdg2Wj2zH5a3g==",
+      "version": "17.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
+      "integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -3752,50 +3752,11 @@
       "license": "MIT"
     },
     "node_modules/ansi-align": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
-      "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
+      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
       "dependencies": {
-        "string-width": "^2.0.0"
-      }
-    },
-    "node_modules/ansi-align/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/ansi-align/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/ansi-align/node_modules/string-width": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-      "dependencies": {
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/ansi-align/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-      "dependencies": {
-        "ansi-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
+        "string-width": "^4.1.0"
       }
     },
     "node_modules/ansi-colors": {
@@ -3839,8 +3800,9 @@
       }
     },
     "node_modules/ansi-regex": {
-      "version": "5.0.0",
-      "license": "MIT",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "engines": {
         "node": ">=8"
       }
@@ -5145,110 +5107,62 @@
       "license": "ISC"
     },
     "node_modules/boxen": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
-      "integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
+      "integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==",
       "dependencies": {
-        "ansi-align": "^2.0.0",
-        "camelcase": "^4.0.0",
-        "chalk": "^2.0.1",
-        "cli-boxes": "^1.0.0",
-        "string-width": "^2.0.0",
-        "term-size": "^1.2.0",
-        "widest-line": "^2.0.0"
+        "ansi-align": "^3.0.0",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.1.0",
+        "cli-boxes": "^2.2.1",
+        "string-width": "^4.2.2",
+        "type-fest": "^0.20.2",
+        "widest-line": "^3.1.0",
+        "wrap-ansi": "^7.0.0"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/boxen/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/boxen/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==",
-      "dependencies": {
-        "color-convert": "^1.9.0"
+        "node": ">=10"
       },
-      "engines": {
-        "node": ">=4"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/boxen/node_modules/camelcase": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-      "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
+      "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
       "engines": {
-        "node": ">=4"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/boxen/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==",
+    "node_modules/boxen/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/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==",
       "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/boxen/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=",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/boxen/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/boxen/node_modules/string-width": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-      "dependencies": {
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^4.0.0"
+        "node": ">=10"
       },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/boxen/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-      "dependencies": {
-        "ansi-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/boxen/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==",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
     "node_modules/brace-expansion": {
@@ -5818,11 +5732,14 @@
       }
     },
     "node_modules/cli-boxes": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
-      "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM=",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/clipboardy": {
@@ -9366,9 +9283,9 @@
       }
     },
     "node_modules/highlightjs-solidity": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/highlightjs-solidity/-/highlightjs-solidity-2.0.1.tgz",
-      "integrity": "sha512-9YY+HQpXMTrF8HgRByjeQhd21GXAz2ktMPTcs6oWSj5HJR52fgsNoelMOmgigwcpt9j4tu4IVSaWaJB2n2TbvQ=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/highlightjs-solidity/-/highlightjs-solidity-2.0.2.tgz",
+      "integrity": "sha512-q0aYUKiZ9MPQg41qx/KpXKaCpqql50qTvmwGYyLFfcjt9AE/+C9CwjVIdJZc7EYj6NGgJuFJ4im1gfgrzUU1fQ=="
     },
     "node_modules/history": {
       "version": "4.10.1",
@@ -14188,11 +14105,6 @@
       "version": "1.0.1",
       "license": "MIT"
     },
-    "node_modules/pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
-    },
     "node_modules/psl": {
       "version": "1.8.0",
       "license": "MIT"
@@ -15008,20 +14920,25 @@
       }
     },
     "node_modules/react-syntax-highlighter": {
-      "version": "15.4.4",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz",
-      "integrity": "sha512-PsOFHNTzkb3OroXdoR897eKN5EZ6grht1iM+f1lJSq7/L0YVnkJaNVwC3wEUYPOAmeyl5xyer1DjL6MrumO6Zw==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.5.tgz",
+      "integrity": "sha512-RC90KQTxZ/b7+9iE6s9nmiFLFjWswUcfULi4GwVzdFVKVMQySkJWBuOmJFfjwjMVCo0IUUuJrWebNKyviKpwLQ==",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
         "highlight.js": "^10.4.1",
         "lowlight": "^1.17.0",
-        "prismjs": "^1.22.0",
+        "prismjs": "^1.25.0",
         "refractor": "^3.2.0"
       },
       "peerDependencies": {
         "react": ">= 0.14.0"
       }
     },
+    "node_modules/react-syntax-highlighter/node_modules/prismjs": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
+      "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "license": "MIT",
@@ -16100,14 +16017,14 @@
       }
     },
     "node_modules/serve": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/serve/-/serve-12.0.1.tgz",
-      "integrity": "sha512-CQ4ikLpxg/wmNM7yivulpS6fhjRiFG6OjmP8ty3/c1SBnSk23fpKmLAV4HboTA2KrZhkUPlDfjDhnRmAjQ5Phw==",
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/serve/-/serve-13.0.2.tgz",
+      "integrity": "sha512-71R6fKvNgKrqARAag6lYJNnxDzpH7DCNrMuvPY5PLVaC2PDhJsGTj/34o4o4tPWhTuLgEXqvgnAWbATQ9zGZTQ==",
       "dependencies": {
         "@zeit/schemas": "2.6.0",
         "ajv": "6.12.6",
         "arg": "2.0.0",
-        "boxen": "1.3.0",
+        "boxen": "5.1.2",
         "chalk": "2.4.1",
         "clipboardy": "2.3.0",
         "compression": "1.7.3",
@@ -16983,12 +16900,24 @@
       "license": "MIT"
     },
     "node_modules/string-width": {
-      "version": "4.2.0",
-      "license": "MIT",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.0"
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
       },
       "engines": {
         "node": ">=8"
@@ -17742,85 +17671,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/term-size": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
-      "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=",
-      "dependencies": {
-        "execa": "^0.7.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/term-size/node_modules/cross-spawn": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-      "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-      "dependencies": {
-        "lru-cache": "^4.0.1",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
-      }
-    },
-    "node_modules/term-size/node_modules/execa": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-      "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-      "dependencies": {
-        "cross-spawn": "^5.0.1",
-        "get-stream": "^3.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/term-size/node_modules/get-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/term-size/node_modules/lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dependencies": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
-    },
-    "node_modules/term-size/node_modules/shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "dependencies": {
-        "shebang-regex": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/term-size/node_modules/shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/term-size/node_modules/yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
-    },
     "node_modules/terminal-link": {
       "version": "2.1.1",
       "license": "MIT",
@@ -19444,53 +19294,14 @@
       "license": "ISC"
     },
     "node_modules/widest-line": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
-      "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
       "dependencies": {
-        "string-width": "^2.1.1"
+        "string-width": "^4.0.0"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/widest-line/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/widest-line/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/widest-line/node_modules/string-width": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-      "dependencies": {
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/widest-line/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-      "dependencies": {
-        "ansi-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
+        "node": ">=8"
       }
     },
     "node_modules/word-wrap": {
@@ -21089,9 +20900,9 @@
       }
     },
     "@fontsource/fira-code": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-4.5.1.tgz",
-      "integrity": "sha512-8KTCsfs5m3UgICpHLglIKAS7vc2FFOu7/vvpWcE/42SWbh+9X8EJbEyJp6W96kU5iDVlAlUv4Cqc36Z9XUpLmA=="
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-4.5.2.tgz",
+      "integrity": "sha512-wNUvcqmm1dZYTbJlkbFZL9Huu7p+Hwaa4CLNTPql3CG90Rh9dSi43wNg5AnVHxjAhWQOGlCpSrEswnnHu1CkxA=="
     },
     "@fontsource/roboto": {
       "version": "4.5.1",
@@ -21178,9 +20989,9 @@
       }
     },
     "@headlessui/react": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.1.tgz",
-      "integrity": "sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.2.tgz",
+      "integrity": "sha512-N8tv7kLhg9qGKBkVdtg572BvKvWhmiudmeEpOCyNwzOsZHCXBtl8AazGikIfUS+vBoub20Fse3BjawXDVPPdug==",
       "requires": {}
     },
     "@istanbuljs/load-nyc-config": {
@@ -21609,9 +21420,9 @@
       }
     },
     "@testing-library/jest-dom": {
-      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz",
-      "integrity": "sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.15.0.tgz",
+      "integrity": "sha512-lOMuQidnL1tWHLEWIhL6UvSZC1Qt3OkNe1khvi2h6xFiqpe5O8arYs46OU0qyUGq0cSTbroQyMktYNXu3a7sAA==",
       "requires": {
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
@@ -21796,9 +21607,9 @@
       "version": "1.5.4"
     },
     "@types/react": {
-      "version": "17.0.33",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.33.tgz",
-      "integrity": "sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==",
+      "version": "17.0.35",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.35.tgz",
+      "integrity": "sha512-r3C8/TJuri/SLZiiwwxQoLAoavaczARfT9up9b4Jr65+ErAUX3MIkU0oMOQnrpfgHme8zIqZLX7O5nnjm5Wayw==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -21814,9 +21625,9 @@
       }
     },
     "@types/react-dom": {
-      "version": "17.0.10",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.10.tgz",
-      "integrity": "sha512-8oz3NAUId2z/zQdFI09IMhQPNgIbiP8Lslhv39DIDamr846/0spjZK0vnrMak0iB8EKb9QFTTIdg2Wj2zH5a3g==",
+      "version": "17.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
+      "integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
       "requires": {
         "@types/react": "*"
       }
@@ -22243,40 +22054,11 @@
       "version": "1.0.2"
     },
     "ansi-align": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
-      "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
+      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
       "requires": {
-        "string-width": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
-        },
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        }
+        "string-width": "^4.1.0"
       }
     },
     "ansi-colors": {
@@ -22297,7 +22079,9 @@
       "version": "0.0.7"
     },
     "ansi-regex": {
-      "version": "5.0.0"
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
     },
     "ansi-styles": {
       "version": "4.3.0",
@@ -23212,80 +22996,38 @@
       "version": "1.0.0"
     },
     "boxen": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
-      "integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
+      "integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==",
       "requires": {
-        "ansi-align": "^2.0.0",
-        "camelcase": "^4.0.0",
-        "chalk": "^2.0.1",
-        "cli-boxes": "^1.0.0",
-        "string-width": "^2.0.0",
-        "term-size": "^1.2.0",
-        "widest-line": "^2.0.0"
+        "ansi-align": "^3.0.0",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.1.0",
+        "cli-boxes": "^2.2.1",
+        "string-width": "^4.2.2",
+        "type-fest": "^0.20.2",
+        "widest-line": "^3.1.0",
+        "wrap-ansi": "^7.0.0"
       },
       "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
-        "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==",
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
         "camelcase": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
+          "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
         },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
+        },
+        "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==",
           "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="
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
-        },
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "requires": {
-            "has-flag": "^3.0.0"
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
           }
         }
       }
@@ -23684,9 +23426,9 @@
       "version": "2.2.0"
     },
     "cli-boxes": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
-      "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM="
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw=="
     },
     "clipboardy": {
       "version": "2.3.0",
@@ -26043,9 +25785,9 @@
       "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
     },
     "highlightjs-solidity": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/highlightjs-solidity/-/highlightjs-solidity-2.0.1.tgz",
-      "integrity": "sha512-9YY+HQpXMTrF8HgRByjeQhd21GXAz2ktMPTcs6oWSj5HJR52fgsNoelMOmgigwcpt9j4tu4IVSaWaJB2n2TbvQ=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/highlightjs-solidity/-/highlightjs-solidity-2.0.2.tgz",
+      "integrity": "sha512-q0aYUKiZ9MPQg41qx/KpXKaCpqql50qTvmwGYyLFfcjt9AE/+C9CwjVIdJZc7EYj6NGgJuFJ4im1gfgrzUU1fQ=="
     },
     "history": {
       "version": "4.10.1",
@@ -29246,11 +28988,6 @@
     "prr": {
       "version": "1.0.1"
     },
-    "pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
-    },
     "psl": {
       "version": "1.8.0"
     },
@@ -29815,15 +29552,22 @@
       }
     },
     "react-syntax-highlighter": {
-      "version": "15.4.4",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz",
-      "integrity": "sha512-PsOFHNTzkb3OroXdoR897eKN5EZ6grht1iM+f1lJSq7/L0YVnkJaNVwC3wEUYPOAmeyl5xyer1DjL6MrumO6Zw==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.5.tgz",
+      "integrity": "sha512-RC90KQTxZ/b7+9iE6s9nmiFLFjWswUcfULi4GwVzdFVKVMQySkJWBuOmJFfjwjMVCo0IUUuJrWebNKyviKpwLQ==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "highlight.js": "^10.4.1",
         "lowlight": "^1.17.0",
-        "prismjs": "^1.22.0",
+        "prismjs": "^1.25.0",
         "refractor": "^3.2.0"
+      },
+      "dependencies": {
+        "prismjs": {
+          "version": "1.25.0",
+          "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
+          "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
+        }
       }
     },
     "read-pkg": {
@@ -30541,14 +30285,14 @@
       }
     },
     "serve": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/serve/-/serve-12.0.1.tgz",
-      "integrity": "sha512-CQ4ikLpxg/wmNM7yivulpS6fhjRiFG6OjmP8ty3/c1SBnSk23fpKmLAV4HboTA2KrZhkUPlDfjDhnRmAjQ5Phw==",
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/serve/-/serve-13.0.2.tgz",
+      "integrity": "sha512-71R6fKvNgKrqARAag6lYJNnxDzpH7DCNrMuvPY5PLVaC2PDhJsGTj/34o4o4tPWhTuLgEXqvgnAWbATQ9zGZTQ==",
       "requires": {
         "@zeit/schemas": "2.6.0",
         "ajv": "6.12.6",
         "arg": "2.0.0",
-        "boxen": "1.3.0",
+        "boxen": "5.1.2",
         "chalk": "2.4.1",
         "clipboardy": "2.3.0",
         "compression": "1.7.3",
@@ -31203,11 +30947,23 @@
       "version": "3.0.1"
     },
     "string-width": {
-      "version": "4.2.0",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "requires": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.0"
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
       }
     },
     "string.prototype.matchall": {
@@ -31730,72 +31486,6 @@
         }
       }
     },
-    "term-size": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
-      "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=",
-      "requires": {
-        "execa": "^0.7.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "execa": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-          "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
-        },
-        "lru-cache": {
-          "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-          "requires": {
-            "pseudomap": "^1.0.2",
-            "yallist": "^2.1.2"
-          }
-        },
-        "shebang-command": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-          "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-          "requires": {
-            "shebang-regex": "^1.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-          "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
-        },
-        "yallist": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
-        }
-      }
-    },
     "terminal-link": {
       "version": "2.1.1",
       "requires": {
@@ -32868,40 +32558,11 @@
       "version": "2.0.0"
     },
     "widest-line": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
-      "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
       "requires": {
-        "string-width": "^2.1.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
-        },
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        }
+        "string-width": "^4.0.0"
       }
     },
     "word-wrap": {
diff --git a/package.json b/package.json
index d301e67..386cded 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "@blackbox-vision/react-qr-reader": "^5.0.0",
     "@chainlink/contracts": "^0.2.2",
     "@craco/craco": "^6.4.0",
-    "@fontsource/fira-code": "^4.5.1",
+    "@fontsource/fira-code": "^4.5.2",
     "@fontsource/roboto": "^4.5.1",
     "@fontsource/roboto-mono": "^4.5.0",
     "@fontsource/space-grotesk": "^4.5.0",
@@ -16,21 +16,21 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
-    "@headlessui/react": "^1.4.1",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@headlessui/react": "^1.4.2",
+    "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.24",
     "@types/node": "^14.17.5",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.35",
     "@types/react-blockies": "^1.4.1",
-    "@types/react-dom": "^17.0.10",
+    "@types/react-dom": "^17.0.11",
     "@types/react-highlight": "^0.12.5",
     "@types/react-router-dom": "^5.3.2",
     "@types/react-syntax-highlighter": "^13.5.2",
     "chart.js": "^3.5.1",
     "ethers": "^5.5.1",
-    "highlightjs-solidity": "^2.0.1",
+    "highlightjs-solidity": "^2.0.2",
     "query-string": "^7.0.1",
     "react": "^17.0.2",
     "react-blockies": "^1.4.1",
@@ -41,8 +41,8 @@
     "react-image": "^4.0.3",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
-    "react-syntax-highlighter": "^15.4.4",
-    "serve": "^12.0.1",
+    "react-syntax-highlighter": "^15.4.5",
+    "serve": "^13.0.2",
     "typescript": "^4.4.4",
     "use-keyboard-shortcut": "^1.0.6",
     "web-vitals": "^1.0.1"
diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx
index 19d41bb..a1013c8 100644
--- a/src/AddressTransactions.tsx
+++ b/src/AddressTransactions.tsx
@@ -31,7 +31,8 @@ import { useFeeToggler } from "./search/useFeeToggler";
 import { SelectionContext, useSelection } from "./useSelection";
 import { useMultipleETHUSDOracle } from "./usePriceOracle";
 import { useAppConfigContext } from "./useAppConfig";
-import { useSourcify } from "./useSourcify";
+import { useMultipleMetadata } from "./useSourcify";
+import { ChecksummedAddress } from "./types";
 import SourcifyLogo from "./sourcify.svg";
 
 type BlockParams = {
@@ -181,12 +182,31 @@ const AddressTransactions: React.FC = () => {
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
   const selectionCtx = useSelection();
+  const addresses = useMemo(() => {
+    const _addresses: ChecksummedAddress[] = [];
+    if (checksummedAddress) {
+      _addresses.push(checksummedAddress);
+    }
+    if (page) {
+      for (const t of page) {
+        if (t.to) {
+          _addresses.push(t.to);
+        }
+      }
+    }
+    return _addresses;
+  }, [checksummedAddress, page]);
   const { sourcifySource } = useAppConfigContext();
-  const rawMetadata = useSourcify(
-    checksummedAddress,
+  const metadatas = useMultipleMetadata(
+    undefined,
+    addresses,
     provider?.network.chainId,
     sourcifySource
   );
+  const addressMetadata =
+    checksummedAddress !== undefined
+      ? metadatas[checksummedAddress]
+      : undefined;
 
   return (
     <StandardFrame>
@@ -224,18 +244,18 @@ const AddressTransactions: React.FC = () => {
                 <NavTab href={`/address/${checksummedAddress}/contract`}>
                   <span
                     className={`flex items-baseline space-x-2 ${
-                      rawMetadata === undefined ? "italic opacity-50" : ""
+                      addressMetadata === undefined ? "italic opacity-50" : ""
                     }`}
                   >
                     <span>Contract</span>
-                    {rawMetadata === undefined ? (
+                    {addressMetadata === undefined ? (
                       <span className="self-center">
                         <FontAwesomeIcon
                           className="animate-spin"
                           icon={faCircleNotch}
                         />
                       </span>
-                    ) : rawMetadata === null ? (
+                    ) : addressMetadata === null ? (
                       <span className="self-center text-red-500">
                         <FontAwesomeIcon icon={faQuestionCircle} />
                       </span>
@@ -288,6 +308,7 @@ const AddressTransactions: React.FC = () => {
                               selectedAddress={checksummedAddress}
                               feeDisplay={feeDisplay}
                               priceMap={priceMap}
+                              metadatas={metadatas}
                             />
                           ))}
                           <div className="flex justify-between items-baseline py-3">
@@ -316,7 +337,7 @@ const AddressTransactions: React.FC = () => {
                   <Route path="/address/:addressOrName/contract" exact>
                     <Contracts
                       checksummedAddress={checksummedAddress}
-                      rawMetadata={rawMetadata}
+                      rawMetadata={addressMetadata}
                     />
                   </Route>
                 </Switch>
diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index 03fa198..c56bc26 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -1,31 +1,31 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
-import AddressHighlighter from "./components/AddressHighlighter";
+import TransactionAddress from "./components/TransactionAddress";
 import ValueHighlighter from "./components/ValueHighlighter";
-import DecoratedAddressLink from "./components/DecoratedAddressLink";
 import FormattedBalance from "./components/FormattedBalance";
 import {
   AddressContext,
+  ChecksummedAddress,
   TokenMeta,
   TokenTransfer,
-  TransactionData,
 } from "./types";
 import { ResolvedAddresses } from "./api/address-resolver";
+import { Metadata } from "./useSourcify";
 
 type TokenTransferItemProps = {
   t: TokenTransfer;
-  txData: TransactionData;
-  tokenMeta?: TokenMeta | undefined;
+  tokenMeta?: TokenMeta | null | undefined;
   resolvedAddresses: ResolvedAddresses | undefined;
+  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
 // TODO: handle partial
 const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
   t,
-  txData,
   tokenMeta,
   resolvedAddresses,
+  metadatas,
 }) => (
   <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
     <span className="text-gray-500">
@@ -34,25 +34,21 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
     <div className="grid grid-cols-5 gap-x-1">
       <div className="flex space-x-1">
         <span className="font-bold">From</span>
-        <AddressHighlighter address={t.from}>
-          <DecoratedAddressLink
-            address={t.from}
-            addressCtx={AddressContext.FROM}
-            txFrom={t.from === txData.from}
-            txTo={t.from === txData.to}
-          />
-        </AddressHighlighter>
+        <TransactionAddress
+          address={t.from}
+          addressCtx={AddressContext.FROM}
+          resolvedAddresses={resolvedAddresses}
+          metadata={metadatas[t.from]}
+        />
       </div>
       <div className="flex space-x-1">
         <span className="font-bold">To</span>
-        <AddressHighlighter address={t.to}>
-          <DecoratedAddressLink
-            address={t.to}
-            addressCtx={AddressContext.TO}
-            txFrom={t.to === txData.from}
-            txTo={t.to === txData.to}
-          />
-        </AddressHighlighter>
+        <TransactionAddress
+          address={t.to}
+          addressCtx={AddressContext.TO}
+          resolvedAddresses={resolvedAddresses}
+          metadata={metadatas[t.to]}
+        />
       </div>
       <div className="col-span-3 flex space-x-1">
         <span className="font-bold">For</span>
@@ -64,12 +60,11 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             />
           </ValueHighlighter>
         </span>
-        <AddressHighlighter address={t.token}>
-          <DecoratedAddressLink
-            address={t.token}
-            resolvedAddresses={resolvedAddresses}
-          />
-        </AddressHighlighter>
+        <TransactionAddress
+          address={t.token}
+          resolvedAddresses={resolvedAddresses}
+          metadata={metadatas[t.token]}
+        />
       </div>
     </div>
   </div>
diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 7107b32..168c83f 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -15,6 +15,7 @@ import {
   transactionDataCollector,
   useResolvedAddresses,
 } from "./useResolvedAddresses";
+import { SelectedTransactionContext } from "./useSelectedTransaction";
 
 const Details = React.lazy(
   () =>
@@ -29,6 +30,12 @@ const Logs = React.lazy(
       /* webpackChunkName: "txlogs", webpackPrefetch: true */ "./transaction/Logs"
     )
 );
+const Trace = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "txtrace", webpackPrefetch: true */ "./transaction/Trace"
+    )
+);
 
 type TransactionParams = {
   txhash: string;
@@ -76,54 +83,63 @@ const Transaction: React.FC = () => {
   const txDesc = useTransactionDescription(metadata, txData);
 
   return (
-    <StandardFrame>
-      <StandardSubtitle>Transaction Details</StandardSubtitle>
-      {txData === null && (
-        <ContentFrame>
-          <div className="py-4 text-sm">
-            Transaction <span className="font-hash">{txhash}</span> not found.
-          </div>
-        </ContentFrame>
-      )}
-      {txData && (
-        <SelectionContext.Provider value={selectionCtx}>
-          <Tab.Group>
-            <Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
-              <NavTab href={`/tx/${txhash}`}>Overview</NavTab>
-              {txData.confirmedData?.blockNumber !== undefined && (
-                <NavTab href={`/tx/${txhash}/logs`}>
-                  Logs
-                  {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
-                </NavTab>
-              )}
-            </Tab.List>
-          </Tab.Group>
-          <React.Suspense fallback={null}>
-            <Switch>
-              <Route path="/tx/:txhash/" exact>
-                <Details
-                  txData={txData}
-                  txDesc={txDesc}
-                  userDoc={metadata?.output.userdoc}
-                  devDoc={metadata?.output.devdoc}
-                  internalOps={internalOps}
-                  sendsEthToMiner={sendsEthToMiner}
-                  ethUSDPrice={blockETHUSDPrice}
-                  resolvedAddresses={resolvedAddresses}
-                />
-              </Route>
-              <Route path="/tx/:txhash/logs/" exact>
-                <Logs
-                  txData={txData}
-                  metadata={metadata}
-                  resolvedAddresses={resolvedAddresses}
-                />
-              </Route>
-            </Switch>
-          </React.Suspense>
-        </SelectionContext.Provider>
-      )}
-    </StandardFrame>
+    <SelectedTransactionContext.Provider value={txData}>
+      <StandardFrame>
+        <StandardSubtitle>Transaction Details</StandardSubtitle>
+        {txData === null && (
+          <ContentFrame>
+            <div className="py-4 text-sm">
+              Transaction <span className="font-hash">{txhash}</span> not found.
+            </div>
+          </ContentFrame>
+        )}
+        {txData && (
+          <SelectionContext.Provider value={selectionCtx}>
+            <Tab.Group>
+              <Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
+                <NavTab href={`/tx/${txhash}`}>Overview</NavTab>
+                {txData.confirmedData?.blockNumber !== undefined && (
+                  <NavTab href={`/tx/${txhash}/logs`}>
+                    Logs
+                    {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
+                  </NavTab>
+                )}
+                <NavTab href={`/tx/${txhash}/trace`}>Trace</NavTab>
+              </Tab.List>
+            </Tab.Group>
+            <React.Suspense fallback={null}>
+              <Switch>
+                <Route path="/tx/:txhash/" exact>
+                  <Details
+                    txData={txData}
+                    txDesc={txDesc}
+                    userDoc={metadata?.output.userdoc}
+                    devDoc={metadata?.output.devdoc}
+                    internalOps={internalOps}
+                    sendsEthToMiner={sendsEthToMiner}
+                    ethUSDPrice={blockETHUSDPrice}
+                    resolvedAddresses={resolvedAddresses}
+                  />
+                </Route>
+                <Route path="/tx/:txhash/logs/" exact>
+                  <Logs
+                    txData={txData}
+                    metadata={metadata}
+                    resolvedAddresses={resolvedAddresses}
+                  />
+                </Route>
+                <Route path="/tx/:txhash/trace" exact>
+                  <Trace
+                    txData={txData}
+                    resolvedAddresses={resolvedAddresses}
+                  />
+                </Route>
+              </Switch>
+            </React.Suspense>
+          </SelectionContext.Provider>
+        )}
+      </StandardFrame>
+    </SelectedTransactionContext.Provider>
   );
 };
 
diff --git a/src/api/address-resolver/ERCTokenResolver.ts b/src/api/address-resolver/ERCTokenResolver.ts
index 02625dc..f087ec6 100644
--- a/src/api/address-resolver/ERCTokenResolver.ts
+++ b/src/api/address-resolver/ERCTokenResolver.ts
@@ -11,11 +11,17 @@ export class ERCTokenResolver implements IAddressResolver<TokenMeta> {
   ): Promise<TokenMeta | undefined> {
     const erc20Contract = new Contract(address, erc20, provider);
     try {
-      const [name, symbol, decimals] = await Promise.all([
+      const [name, symbol, decimals] = (await Promise.all([
         erc20Contract.name(),
         erc20Contract.symbol(),
         erc20Contract.decimals(),
-      ]);
+      ])) as [string, string, number];
+
+      // Prevent faulty tokens with empty name/symbol
+      if (!name.trim() || !symbol.trim()) {
+        return undefined;
+      }
+
       return {
         name,
         symbol,
diff --git a/src/api/address-resolver/HardcodedAddressResolver.ts b/src/api/address-resolver/HardcodedAddressResolver.ts
new file mode 100644
index 0000000..42d1102
--- /dev/null
+++ b/src/api/address-resolver/HardcodedAddressResolver.ts
@@ -0,0 +1,22 @@
+import { BaseProvider } from "@ethersproject/providers";
+import { IAddressResolver } from "./address-resolver";
+
+type HardcodedAddressMap = Record<string, string | undefined>;
+
+export class HardcodedAddressResolver implements IAddressResolver<string> {
+  async resolveAddress(
+    provider: BaseProvider,
+    address: string
+  ): Promise<string | undefined> {
+    try {
+      const addressMap: HardcodedAddressMap = await import(
+        `./hardcoded-addresses/${provider.network.chainId}.json`
+      );
+
+      return addressMap[address];
+    } catch (err) {
+      // Ignore on purpose
+      return undefined;
+    }
+  }
+}
diff --git a/src/api/address-resolver/hardcoded-addresses/1.json b/src/api/address-resolver/hardcoded-addresses/1.json
new file mode 100644
index 0000000..072a2c0
--- /dev/null
+++ b/src/api/address-resolver/hardcoded-addresses/1.json
@@ -0,0 +1,13 @@
+{
+  "0x7d655c57f71464B6f83811C55D84009Cd9f5221C": "Gitcoin: Bulk Checkout",
+  "0xf2354570bE2fB420832Fb7Ff6ff0AE0dF80CF2c6": "Gitcoin: GR8 Matching Payout",
+  "0x3342E3737732D879743f2682A3953a730ae4F47C": "Gitcoin: GR9 Matching Payout",
+  "0x3ebAFfe01513164e638480404c651E885cCA0AA4": "Gitcoin: GR10 Matching Payout",
+  "0x0EbD2E2130b73107d0C45fF2E16c93E7e2e10e3a": "Gitcoin: GR11 Matching Payout",
+  "0x722122dF12D4e14e13Ac3b6895a86e84145b6967": "Tornado Cash: Proxy",
+  "0xc0a47dFe034B400B47bDaD5FecDa2621de6c4d95": "Uniswap V1: Factory",
+  "0x5C69bEe701ef814a2B6a3EDD4B1652CB9cc5aA6f": "Uniswap V2: Factory",
+  "0xf164fC0Ec4E93095b804a4795bBe1e041497b92a": "Uniswap V2: Router 1",
+  "0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D": "Uniswap V2: Router 2",
+  "0x1F98431c8aD98523631AE4a59f267346ea31F984": "Uniswap V3: Router"
+}
\ No newline at end of file
diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts
index dc72a9f..f1514be 100644
--- a/src/api/address-resolver/index.ts
+++ b/src/api/address-resolver/index.ts
@@ -1,5 +1,6 @@
 import { BaseProvider } from "@ethersproject/providers";
 import { ensRenderer } from "../../components/ENSName";
+import { plainStringRenderer } from "../../components/PlainString";
 import { tokenRenderer } from "../../components/TokenName";
 import { IAddressResolver, ResolvedAddressRenderer } from "./address-resolver";
 import {
@@ -8,16 +9,19 @@ import {
 } from "./CompositeAddressResolver";
 import { ENSAddressResolver } from "./ENSAddressResolver";
 import { ERCTokenResolver } from "./ERCTokenResolver";
+import { HardcodedAddressResolver } from "./HardcodedAddressResolver";
 
 export type ResolvedAddresses = Record<string, SelectedResolvedName<any>>;
 
 // Create and configure the main resolver
 export const ensResolver = new ENSAddressResolver();
 export const ercTokenResolver = new ERCTokenResolver();
+export const hardcodedResolver = new HardcodedAddressResolver();
 
 const _mainResolver = new CompositeAddressResolver();
 _mainResolver.addResolver(ensResolver);
 _mainResolver.addResolver(ercTokenResolver);
+_mainResolver.addResolver(hardcodedResolver);
 
 export const mainResolver: IAddressResolver<SelectedResolvedName<any>> =
   _mainResolver;
@@ -28,6 +32,7 @@ export const resolverRendererRegistry = new Map<
 >();
 resolverRendererRegistry.set(ensResolver, ensRenderer);
 resolverRendererRegistry.set(ercTokenResolver, tokenRenderer);
+resolverRendererRegistry.set(hardcodedResolver, plainStringRenderer);
 
 // TODO: implement progressive resolving
 export const batchPopulate = async (
diff --git a/src/block/BlockTransactionResults.tsx b/src/block/BlockTransactionResults.tsx
index f9cfc27..969e4a4 100644
--- a/src/block/BlockTransactionResults.tsx
+++ b/src/block/BlockTransactionResults.tsx
@@ -9,9 +9,11 @@ import { useFeeToggler } from "../search/useFeeToggler";
 import { RuntimeContext } from "../useRuntime";
 import { SelectionContext, useSelection } from "../useSelection";
 import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses";
-import { ProcessedTransaction } from "../types";
+import { ChecksummedAddress, ProcessedTransaction } from "../types";
 import { PAGE_SIZE } from "../params";
 import { useMultipleETHUSDOracle } from "../usePriceOracle";
+import { useAppConfigContext } from "../useAppConfig";
+import { useMultipleMetadata } from "../useSourcify";
 
 type BlockTransactionResultsProps = {
   blockTag: BlockTag;
@@ -34,6 +36,21 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
   const blockTags = useMemo(() => [blockTag], [blockTag]);
   const priceMap = useMultipleETHUSDOracle(provider, blockTags);
 
+  const addresses = useMemo((): ChecksummedAddress[] => {
+    if (!page) {
+      return [];
+    }
+
+    return page.map((t) => t.to).filter((to): to is string => to !== undefined);
+  }, [page]);
+  const { sourcifySource } = useAppConfigContext();
+  const metadatas = useMultipleMetadata(
+    undefined,
+    addresses,
+    provider?.network.chainId,
+    sourcifySource
+  );
+
   return (
     <ContentFrame>
       <div className="flex justify-between items-baseline py-3">
@@ -63,6 +80,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
               resolvedAddresses={resolvedAddresses}
               feeDisplay={feeDisplay}
               priceMap={priceMap}
+              metadatas={metadatas}
             />
           ))}
           <div className="flex justify-between items-baseline py-3">
diff --git a/src/components/AddressHighlighter.tsx b/src/components/AddressHighlighter.tsx
index e8078d6..9c2c4c3 100644
--- a/src/components/AddressHighlighter.tsx
+++ b/src/components/AddressHighlighter.tsx
@@ -1,40 +1,22 @@
-import React, { useMemo } from "react";
-import { useSelectionContext } from "../useSelection";
+import React from "react";
+import SelectionHighlighter, { addressSelector } from "./SelectionHighlighter";
 
 type AddressHighlighterProps = React.PropsWithChildren<{
   address: string;
 }>;
 
+// TODO: replace all occurences with SelectionHighlighter and remove this component
 const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
   address,
   children,
-}) => {
-  const [selection, setSelection] = useSelectionContext();
-  const [select, deselect] = useMemo(() => {
-    const _select = () => {
-      setSelection({ type: "address", content: address });
-    };
-    const _deselect = () => {
-      setSelection(null);
-    };
-    return [_select, _deselect];
-  }, [setSelection, address]);
+}) => (
+  <SelectionHighlighter
+    myType="address"
+    myContent={address}
+    selector={addressSelector}
+  >
+    {children}
+  </SelectionHighlighter>
+);
 
-  return (
-    <div
-      className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
-        selection !== null &&
-        selection.type === "address" &&
-        selection.content === address
-          ? "border-orange-400 bg-yellow-100"
-          : "border-transparent"
-      }`}
-      onMouseEnter={select}
-      onMouseLeave={deselect}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default React.memo(AddressHighlighter);
+export default AddressHighlighter;
diff --git a/src/components/AddressLink.tsx b/src/components/AddressLink.tsx
new file mode 100644
index 0000000..4b6f99e
--- /dev/null
+++ b/src/components/AddressLink.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+type AddressLinkProps = {
+  address: string;
+  text?: string;
+  dontOverrideColors?: boolean;
+};
+
+const AddressLink: React.FC<AddressLinkProps> = ({
+  address,
+  text,
+  dontOverrideColors,
+}) => (
+  <NavLink
+    className={`${
+      dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
+    } font-address truncate`}
+    to={`/address/${address}`}
+  >
+    <span className="truncate" title={text ?? address}>
+      {text ?? address}
+    </span>
+  </NavLink>
+);
+
+export default AddressLink;
diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index cadc77f..333e1ff 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { NavLink } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
 import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
@@ -8,6 +9,8 @@ import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
 import AddressOrENSName from "./AddressOrENSName";
 import { AddressContext, ZERO_ADDRESS } from "../types";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { Metadata } from "../useSourcify";
+import SourcifyLogo from "../sourcify.svg";
 
 type DecoratedAddressLinkProps = {
   address: string;
@@ -19,6 +22,7 @@ type DecoratedAddressLinkProps = {
   txFrom?: boolean;
   txTo?: boolean;
   resolvedAddresses?: ResolvedAddresses | undefined;
+  metadata?: Metadata | null | undefined;
 };
 
 const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
@@ -31,6 +35,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
   txFrom,
   txTo,
   resolvedAddresses,
+  metadata,
 }) => {
   const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
   const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
@@ -70,6 +75,20 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
           <FontAwesomeIcon icon={faCoins} size="1x" />
         </span>
       )}
+      {metadata && (
+        <NavLink
+          className="self-center flex-shrink-0 flex items-center"
+          to={`/address/${address}/contract`}
+        >
+          <img
+            src={SourcifyLogo}
+            alt="Sourcify logo"
+            title="Verified by Sourcify"
+            width={16}
+            height={16}
+          />
+        </NavLink>
+      )}
       <AddressOrENSName
         address={address}
         selectedAddress={selectedAddress}
diff --git a/src/components/ENSNameLink.tsx b/src/components/ENSNameLink.tsx
new file mode 100644
index 0000000..ad5df4d
--- /dev/null
+++ b/src/components/ENSNameLink.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import ENSLogo from "./ensLogo.svg";
+
+type ENSNameLinkProps = {
+  name: string;
+  address: string;
+  dontOverrideColors?: boolean;
+};
+
+const ENSNameLink: React.FC<ENSNameLinkProps> = ({
+  name,
+  address,
+  dontOverrideColors,
+}) => (
+  <NavLink
+    className={`flex items-baseline space-x-1 font-sans ${
+      dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
+    } truncate`}
+    to={`/address/${name}`}
+    title={`${name}: ${address}`}
+  >
+    <img
+      className="self-center"
+      src={ENSLogo}
+      alt="ENS Logo"
+      width={12}
+      height={12}
+    />
+    <span className="truncate">{name}</span>
+  </NavLink>
+);
+
+export default ENSNameLink;
diff --git a/src/components/InternalCreate.tsx b/src/components/InternalCreate.tsx
index 7a723ce..e086e9d 100644
--- a/src/components/InternalCreate.tsx
+++ b/src/components/InternalCreate.tsx
@@ -1,45 +1,44 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
+import TransactionAddress from "./TransactionAddress";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
-import { TransactionData, InternalOperation } from "../types";
+import { InternalOperation } from "../types";
+import { ResolvedAddresses } from "../api/address-resolver";
 
 type InternalCreateProps = {
-  txData: TransactionData;
   internalOp: InternalOperation;
+  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const InternalCreate: React.FC<InternalCreateProps> = ({
-  txData,
   internalOp,
-}) => {
-  return (
-    <>
-      <div className="flex items-baseline space-x-1 text-xs">
-        <span className="text-gray-500">
-          <FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
-        </span>
-        <span>Contract</span>
-        <div className="flex items-baseline">
-          <AddressHighlighter address={internalOp.to}>
-            <DecoratedAddressLink address={internalOp.to} creation />
-          </AddressHighlighter>
-        </div>
-        <span className="flex items-baseline text-gray-400">
-          (Creator:{" "}
-          <AddressHighlighter address={internalOp.from}>
-            <DecoratedAddressLink
-              address={internalOp.from}
-              txFrom={internalOp.from === txData.from}
-              txTo={internalOp.from === txData.to}
-            />
-          </AddressHighlighter>
-          )
-        </span>
-      </div>
-    </>
-  );
-};
+  resolvedAddresses,
+}) => (
+  <div className="flex items-baseline space-x-1 whitespace-nowrap">
+    <span className="text-gray-500">
+      <FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
+    </span>
+    <span>Contract</span>
+    <div className="flex items-baseline">
+      <AddressHighlighter address={internalOp.to}>
+        <DecoratedAddressLink
+          address={internalOp.to}
+          creation
+          resolvedAddresses={resolvedAddresses}
+        />
+      </AddressHighlighter>
+    </div>
+    <span className="flex items-baseline text-gray-400">
+      (Creator:{" "}
+      <TransactionAddress
+        address={internalOp.from}
+        resolvedAddresses={resolvedAddresses}
+      />
+      )
+    </span>
+  </div>
+);
 
-export default React.memo(InternalCreate);
+export default InternalCreate;
diff --git a/src/components/InternalSelfDestruct.tsx b/src/components/InternalSelfDestruct.tsx
index 007fb32..794b987 100644
--- a/src/components/InternalSelfDestruct.tsx
+++ b/src/components/InternalSelfDestruct.tsx
@@ -1,52 +1,57 @@
-import React, { useContext } from "react";
+import React from "react";
 import { formatEther } from "@ethersproject/units";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
-import { RuntimeContext } from "../useRuntime";
 import { TransactionData, InternalOperation } from "../types";
-
-const CHI_ADDRESS = "0x0000000000004946c0e9F43F4Dee607b0eF1fA1c";
-const GST2_ADDRESS = "0x0000000000b3F879cb30FE243b4Dfee438691c04";
+import { ResolvedAddresses } from "../api/address-resolver";
+import TransactionAddress from "./TransactionAddress";
 
 type InternalSelfDestructProps = {
   txData: TransactionData;
   internalOp: InternalOperation;
+  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
   txData,
   internalOp,
+  resolvedAddresses,
 }) => {
-  const { provider } = useContext(RuntimeContext);
-  const network = provider?.network;
-
   const toMiner =
     txData.confirmedData?.miner !== undefined &&
     internalOp.to === txData.confirmedData.miner;
 
   return (
     <>
-      <div className="flex items-baseline space-x-1 text-xs">
+      <div className="flex items-baseline space-x-1 whitespace-nowrap">
         <span className="text-gray-500">
           <FontAwesomeIcon icon={faAngleRight} size="1x" /> SELF DESTRUCT
         </span>
         <span>Contract</span>
         <div className="flex items-baseline">
           <AddressHighlighter address={internalOp.from}>
-            <DecoratedAddressLink address={internalOp.from} selfDestruct />
+            <DecoratedAddressLink
+              address={internalOp.from}
+              selfDestruct
+              resolvedAddresses={resolvedAddresses}
+            />
           </AddressHighlighter>
         </div>
-        {network?.chainId === 1 && internalOp.to === CHI_ADDRESS && (
-          <span className="text-gray-400">(Chi Gastoken)</span>
-        )}
-        {network?.chainId === 1 && internalOp.to === GST2_ADDRESS && (
-          <span className="text-gray-400">(GST2 Gastoken)</span>
+        {internalOp.value.isZero() && (
+          <div className="flex items-baseline text-gray-400">
+            (To:{" "}
+            <TransactionAddress
+              address={internalOp.to}
+              resolvedAddresses={resolvedAddresses}
+            />
+            )
+          </div>
         )}
       </div>
       {!internalOp.value.isZero() && (
-        <div className="ml-5 flex items-baseline space-x-1 text-xs">
+        <div className="ml-5 flex items-baseline space-x-1">
           <span className="text-gray-500">
             <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
           </span>
@@ -59,7 +64,11 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
                   toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
                 }`}
               >
-                <DecoratedAddressLink address={internalOp.to} miner={toMiner} />
+                <DecoratedAddressLink
+                  address={internalOp.to}
+                  miner={toMiner}
+                  resolvedAddresses={resolvedAddresses}
+                />
               </div>
             </AddressHighlighter>
           </div>
@@ -69,4 +78,4 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
   );
 };
 
-export default React.memo(InternalSelfDestruct);
+export default InternalSelfDestruct;
diff --git a/src/components/InternalTransactionOperation.tsx b/src/components/InternalTransactionOperation.tsx
index 7de3bb2..f167eb5 100644
--- a/src/components/InternalTransactionOperation.tsx
+++ b/src/components/InternalTransactionOperation.tsx
@@ -22,11 +22,18 @@ const InternalTransactionOperation: React.FC<InternalTransactionOperationProps>
         />
       )}
       {internalOp.type === OperationType.SELF_DESTRUCT && (
-        <InternalSelfDestruct txData={txData} internalOp={internalOp} />
+        <InternalSelfDestruct
+          txData={txData}
+          internalOp={internalOp}
+          resolvedAddresses={resolvedAddresses}
+        />
       )}
       {(internalOp.type === OperationType.CREATE ||
         internalOp.type === OperationType.CREATE2) && (
-        <InternalCreate txData={txData} internalOp={internalOp} />
+        <InternalCreate
+          internalOp={internalOp}
+          resolvedAddresses={resolvedAddresses}
+        />
       )}
     </>
   );
diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx
index 2958452..bf46778 100644
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@@ -26,7 +26,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
     internalOp.to === txData.confirmedData.miner;
 
   return (
-    <div className="flex items-baseline space-x-1 text-xs">
+    <div className="flex items-baseline space-x-1 whitespace-nowrap">
       <span className="text-gray-500">
         <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
       </span>
@@ -44,6 +44,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
               miner={fromMiner}
               txFrom={internalOp.from === txData.from}
               txTo={internalOp.from === txData.to}
+              resolvedAddresses={resolvedAddresses}
             />
           </div>
         </AddressHighlighter>
@@ -61,6 +62,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
               miner={toMiner}
               txFrom={internalOp.to === txData.from}
               txTo={internalOp.to === txData.to}
+              resolvedAddresses={resolvedAddresses}
             />
           </div>
         </AddressHighlighter>
@@ -69,4 +71,4 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
   );
 };
 
-export default React.memo(InternalTransfer);
+export default InternalTransfer;
diff --git a/src/components/ModeTab.tsx b/src/components/ModeTab.tsx
index 14a33fd..52ec3f9 100644
--- a/src/components/ModeTab.tsx
+++ b/src/components/ModeTab.tsx
@@ -1,13 +1,20 @@
 import React from "react";
 import { Tab } from "@headlessui/react";
 
-const ModeTab: React.FC = ({ children }) => (
+type ModeTabProps = {
+  disabled?: boolean | undefined;
+};
+
+const ModeTab: React.FC<ModeTabProps> = ({ disabled, children }) => (
   <Tab
     className={({ selected }) =>
-      `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
-        selected ? "border-blue-300" : ""
-      }`
+      `border rounded-lg px-2 py-1 bg-gray-100 ${
+        disabled
+          ? "border-gray-100 text-gray-300 cursor-default"
+          : "hover:bg-gray-200 hover:shadow text-gray-500 hover:text-gray-600"
+      } text-xs ${selected ? "border-blue-300" : ""}`
     }
+    disabled={disabled}
   >
     {children}
   </Tab>
diff --git a/src/components/PlainString.tsx b/src/components/PlainString.tsx
new file mode 100644
index 0000000..5b891bf
--- /dev/null
+++ b/src/components/PlainString.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver";
+
+type PlainStringProps = {
+  address: string;
+  name: string;
+  linkable: boolean;
+  dontOverrideColors: boolean | undefined;
+};
+
+const PlainString: React.FC<PlainStringProps> = ({
+  address,
+  name,
+  linkable,
+  dontOverrideColors,
+}) => {
+  if (linkable) {
+    return (
+      <NavLink
+        className={`${
+          dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
+        } truncate`}
+        to={`/address/${address}`}
+        title={name}
+      >
+        {name}
+      </NavLink>
+    );
+  }
+
+  return (
+    <span className="text-gray-400 truncate" title={name}>
+      {name}
+    </span>
+  );
+};
+
+export const plainStringRenderer: ResolvedAddressRenderer<string> = (
+  address,
+  resolvedAddress,
+  linkable,
+  dontOverrideColors
+) => (
+  <PlainString
+    address={address}
+    name={resolvedAddress}
+    linkable={linkable}
+    dontOverrideColors={dontOverrideColors}
+  />
+);
+
+export default PlainString;
diff --git a/src/components/SelectionHighlighter.tsx b/src/components/SelectionHighlighter.tsx
new file mode 100644
index 0000000..40a3431
--- /dev/null
+++ b/src/components/SelectionHighlighter.tsx
@@ -0,0 +1,78 @@
+import React, { useMemo } from "react";
+import {
+  useSelectionContext,
+  OptionalSelection,
+  SelectionType,
+} from "../useSelection";
+
+export type ContentSelector = (
+  selection: OptionalSelection,
+  content: string
+) => boolean;
+
+export const genericSelector =
+  (type: SelectionType) =>
+  (selection: OptionalSelection, content: string): boolean =>
+    selection !== null &&
+    selection.type === type &&
+    selection.content === content;
+
+export const addressSelector: ContentSelector = genericSelector("address");
+export const functionSigSelector: ContentSelector =
+  genericSelector("functionSig");
+
+type SelectionHighlighterProps = React.PropsWithChildren<{
+  myType: SelectionType;
+  myContent: string;
+  selector: ContentSelector;
+}>;
+
+const SelectionHighlighter: React.FC<SelectionHighlighterProps> = ({
+  myType,
+  myContent,
+  selector,
+  children,
+}) => {
+  const [selection, setSelection] = useSelectionContext();
+  const [select, deselect] = useMemo(() => {
+    const _select = () => {
+      setSelection({ type: myType, content: myContent });
+    };
+    const _deselect = () => {
+      setSelection(null);
+    };
+    return [_select, _deselect];
+  }, [setSelection, myType, myContent]);
+
+  return (
+    <HighlighterBox
+      selected={selector(selection, myContent)}
+      select={select}
+      deselect={deselect}
+    >
+      {children}
+    </HighlighterBox>
+  );
+};
+
+type HighlighterBoxProps = {
+  selected: boolean;
+  select: () => void;
+  deselect: () => void;
+};
+
+const HighlighterBox: React.FC<HighlighterBoxProps> = React.memo(
+  ({ selected, select, deselect, children }) => (
+    <div
+      className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
+        selected ? "border-orange-400 bg-yellow-100" : "border-transparent"
+      }`}
+      onMouseEnter={select}
+      onMouseLeave={deselect}
+    >
+      {children}
+    </div>
+  )
+);
+
+export default SelectionHighlighter;
diff --git a/src/components/TransactionAddress.tsx b/src/components/TransactionAddress.tsx
new file mode 100644
index 0000000..28540dd
--- /dev/null
+++ b/src/components/TransactionAddress.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import AddressHighlighter from "./AddressHighlighter";
+import DecoratedAddressLink from "./DecoratedAddressLink";
+import { ResolvedAddresses } from "../api/address-resolver";
+import { useSelectedTransaction } from "../useSelectedTransaction";
+import { AddressContext } from "../types";
+import { Metadata } from "../useSourcify";
+
+type TransactionAddressProps = {
+  address: string;
+  addressCtx?: AddressContext | undefined;
+  resolvedAddresses: ResolvedAddresses | undefined;
+  metadata?: Metadata | null | undefined;
+};
+
+const TransactionAddress: React.FC<TransactionAddressProps> = ({
+  address,
+  addressCtx,
+  resolvedAddresses,
+  metadata,
+}) => {
+  const txData = useSelectedTransaction();
+  // TODO: push down creation coloring logic into DecoratedAddressLink
+  const creation = address === txData?.confirmedData?.createdContractAddress;
+
+  return (
+    <AddressHighlighter address={address}>
+      <DecoratedAddressLink
+        address={address}
+        addressCtx={addressCtx}
+        miner={address === txData?.confirmedData?.miner}
+        txFrom={address === txData?.from}
+        txTo={address === txData?.to || creation}
+        creation={creation}
+        resolvedAddresses={resolvedAddresses}
+        metadata={metadata}
+      />
+    </AddressHighlighter>
+  );
+};
+
+export default TransactionAddress;
diff --git a/src/components/ValueHighlighter.tsx b/src/components/ValueHighlighter.tsx
index c15b514..b9c813f 100644
--- a/src/components/ValueHighlighter.tsx
+++ b/src/components/ValueHighlighter.tsx
@@ -6,6 +6,7 @@ type ValueHighlighterProps = React.PropsWithChildren<{
   value: BigNumber;
 }>;
 
+// TODO: replace all occurences with SelectionHighlighter and remove this component
 const ValueHighlighter: React.FC<ValueHighlighterProps> = ({
   value,
   children,
diff --git a/src/params.ts b/src/params.ts
index 2bfd757..5c95cfa 100644
--- a/src/params.ts
+++ b/src/params.ts
@@ -1,3 +1,3 @@
-export const MIN_API_LEVEL = 2;
+export const MIN_API_LEVEL = 3;
 
 export const PAGE_SIZE = 25;
diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx
index 2e6132d..446daf4 100644
--- a/src/search/TransactionItem.tsx
+++ b/src/search/TransactionItem.tsx
@@ -14,11 +14,12 @@ import TransactionDirection, {
   Flags,
 } from "../components/TransactionDirection";
 import TransactionValue from "../components/TransactionValue";
-import { ProcessedTransaction } from "../types";
+import { ChecksummedAddress, ProcessedTransaction } from "../types";
 import { FeeDisplay } from "./useFeeToggler";
 import { formatValue } from "../components/formatter";
 import ETH2USDValue from "../components/ETH2USDValue";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { Metadata } from "../useSourcify";
 
 type TransactionItemProps = {
   tx: ProcessedTransaction;
@@ -26,6 +27,7 @@ type TransactionItemProps = {
   selectedAddress?: string;
   feeDisplay: FeeDisplay;
   priceMap: Record<BlockTag, BigNumber>;
+  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
 const TransactionItem: React.FC<TransactionItemProps> = ({
@@ -34,6 +36,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
   selectedAddress,
   feeDisplay,
   priceMap,
+  metadatas,
 }) => {
   let direction: Direction | undefined;
   if (selectedAddress) {
@@ -105,6 +108,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 selectedAddress={selectedAddress}
                 miner={tx.miner === tx.to}
                 resolvedAddresses={resolvedAddresses}
+                metadata={metadatas[tx.to]}
               />
             </AddressHighlighter>
           ) : (
@@ -114,6 +118,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 selectedAddress={selectedAddress}
                 creation
                 resolvedAddresses={resolvedAddresses}
+                metadata={metadatas[tx.createdContractAddress!]}
               />
             </AddressHighlighter>
           )}
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 9c9e29d..e2613be 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -1,12 +1,6 @@
-import React, { useMemo } from "react";
-import {
-  TransactionDescription,
-  Fragment,
-  Interface,
-} from "@ethersproject/abi";
+import React, { useContext, useMemo } from "react";
+import { TransactionDescription } from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
-import { toUtf8String } from "@ethersproject/strings";
-import { Tab } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
 import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@@ -15,8 +9,7 @@ import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
 import BlockLink from "../components/BlockLink";
 import BlockConfirmations from "../components/BlockConfirmations";
-import AddressHighlighter from "../components/AddressHighlighter";
-import DecoratedAddressLink from "../components/DecoratedAddressLink";
+import TransactionAddress from "../components/TransactionAddress";
 import Copy from "../components/Copy";
 import Nonce from "../components/Nonce";
 import Timestamp from "../components/Timestamp";
@@ -29,16 +22,25 @@ import USDValue from "../components/USDValue";
 import FormattedBalance from "../components/FormattedBalance";
 import ETH2USDValue from "../components/ETH2USDValue";
 import TokenTransferItem from "../TokenTransferItem";
-import { TransactionData, InternalOperation } from "../types";
+import {
+  TransactionData,
+  InternalOperation,
+  ChecksummedAddress,
+} from "../types";
 import PercentageBar from "../components/PercentageBar";
 import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
-import ModeTab from "../components/ModeTab";
-import DecodedParamsTable from "./decoder/DecodedParamsTable";
-import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
-import { DevDoc, UserDoc } from "../useSourcify";
+import InputDecoder from "./decoder/InputDecoder";
+import {
+  rawInputTo4Bytes,
+  use4Bytes,
+  useTransactionDescription,
+} from "../use4Bytes";
+import { DevDoc, useMultipleMetadata, UserDoc } from "../useSourcify";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { RuntimeContext } from "../useRuntime";
+import { useAppConfigContext } from "../useAppConfig";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -65,35 +67,42 @@ const Details: React.FC<DetailsProps> = ({
     txData.confirmedData?.blockBaseFeePerGas !== undefined &&
     txData.confirmedData?.blockBaseFeePerGas !== null;
 
-  const utfInput = useMemo(() => {
-    try {
-      return txData && toUtf8String(txData.data);
-    } catch (err) {
-      console.warn("Error while converting input data to string");
-      console.warn(err);
-      return "<can't decode>";
-    }
-  }, [txData]);
-
   const fourBytes = txData.to !== null ? rawInputTo4Bytes(txData.data) : "0x";
   const fourBytesEntry = use4Bytes(fourBytes);
-  const fourBytesTxDesc = useMemo(() => {
-    if (!fourBytesEntry) {
-      return fourBytesEntry;
-    }
-    if (!txData || !fourBytesEntry.signature) {
-      return undefined;
-    }
-    const sig = fourBytesEntry?.signature;
-    const functionFragment = Fragment.fromString(`function ${sig}`);
-    const intf = new Interface([functionFragment]);
-    return intf.parseTransaction({ data: txData.data, value: txData.value });
-  }, [txData, fourBytesEntry]);
+  const fourBytesTxDesc = useTransactionDescription(
+    fourBytesEntry,
+    txData.data,
+    txData.value
+  );
 
   const resolvedTxDesc = txDesc ?? fourBytesTxDesc;
   const userMethod = txDesc ? userDoc?.methods[txDesc.signature] : undefined;
   const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined;
 
+  const { provider } = useContext(RuntimeContext);
+  const addresses = useMemo(() => {
+    const _addresses: ChecksummedAddress[] = [];
+    if (txData.to) {
+      _addresses.push(txData.to);
+    }
+    if (txData.confirmedData?.createdContractAddress) {
+      _addresses.push(txData.confirmedData.createdContractAddress);
+    }
+    for (const t of txData.tokenTransfers) {
+      _addresses.push(t.from);
+      _addresses.push(t.to);
+      _addresses.push(t.token);
+    }
+    return _addresses;
+  }, [txData]);
+  const { sourcifySource } = useAppConfigContext();
+  const metadatas = useMultipleMetadata(
+    undefined,
+    addresses,
+    provider?.network.chainId,
+    sourcifySource
+  );
+
   return (
     <ContentFrame tabs>
       <InfoRow title="Transaction Hash">
@@ -152,14 +161,10 @@ const Details: React.FC<DetailsProps> = ({
       <InfoRow title="From / Nonce">
         <div className="flex divide-x-2 divide-dotted divide-gray-300">
           <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-            <AddressHighlighter address={txData.from}>
-              <DecoratedAddressLink
-                address={txData.from}
-                miner={txData.from === txData.confirmedData?.miner}
-                txFrom
-                resolvedAddresses={resolvedAddresses}
-              />
-            </AddressHighlighter>
+            <TransactionAddress
+              address={txData.from}
+              resolvedAddresses={resolvedAddresses}
+            />
             <Copy value={txData.from} />
           </div>
           <div className="flex items-baseline pl-3">
@@ -170,14 +175,11 @@ const Details: React.FC<DetailsProps> = ({
       <InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
         {txData.to ? (
           <div className="flex items-baseline space-x-2 -ml-1">
-            <AddressHighlighter address={txData.to}>
-              <DecoratedAddressLink
-                address={txData.to}
-                miner={txData.to === txData.confirmedData?.miner}
-                txTo
-                resolvedAddresses={resolvedAddresses}
-              />
-            </AddressHighlighter>
+            <TransactionAddress
+              address={txData.to}
+              resolvedAddresses={resolvedAddresses}
+              metadata={metadatas?.[txData.to]}
+            />
             <Copy value={txData.to} />
           </div>
         ) : txData.confirmedData === undefined ? (
@@ -186,21 +188,18 @@ const Details: React.FC<DetailsProps> = ({
           </span>
         ) : (
           <div className="flex items-baseline space-x-2 -ml-1">
-            <AddressHighlighter
+            <TransactionAddress
               address={txData.confirmedData?.createdContractAddress!}
-            >
-              <DecoratedAddressLink
-                address={txData.confirmedData.createdContractAddress!}
-                creation
-                txTo
-                resolvedAddresses={resolvedAddresses}
-              />
-            </AddressHighlighter>
+              resolvedAddresses={resolvedAddresses}
+              metadata={
+                metadatas?.[txData.confirmedData?.createdContractAddress!]
+              }
+            />
             <Copy value={txData.confirmedData.createdContractAddress!} />
           </div>
         )}
         {internalOps && internalOps.length > 0 && (
-          <div className="mt-2 space-y-1">
+          <div className="mt-2 space-y-1 overflow-x-auto">
             {internalOps.map((op, i) => (
               <InternalTransactionOperation
                 key={i}
@@ -219,17 +218,15 @@ const Details: React.FC<DetailsProps> = ({
       )}
       {txData.tokenTransfers.length > 0 && (
         <InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
-          <div>
-            {txData.tokenTransfers.map((t, i) => (
-              <TokenTransferItem
-                key={i}
-                t={t}
-                txData={txData}
-                tokenMeta={txData.tokenMetas[t.token]}
-                resolvedAddresses={resolvedAddresses}
-              />
-            ))}
-          </div>
+          {txData.tokenTransfers.map((t, i) => (
+            <TokenTransferItem
+              key={i}
+              t={t}
+              tokenMeta={txData.tokenMetas[t.token]}
+              resolvedAddresses={resolvedAddresses}
+              metadatas={metadatas}
+            />
+          ))}
         </InfoRow>
       )}
       <InfoRow title="Value">
@@ -256,24 +253,16 @@ const Details: React.FC<DetailsProps> = ({
       {txData.type === 2 && (
         <>
           <InfoRow title="Max Priority Fee Per Gas">
-            <span>
-              <FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
-              <FormattedBalance
-                value={txData.maxPriorityFeePerGas!}
-                decimals={9}
-              />{" "}
-              Gwei)
-            </span>
+            <FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
+            <FormattedBalance
+              value={txData.maxPriorityFeePerGas!}
+              decimals={9}
+            />{" "}
+            Gwei)
           </InfoRow>
           <InfoRow title="Max Fee Per Gas">
-            <span>
-              <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
-              <FormattedBalance
-                value={txData.maxFeePerGas!}
-                decimals={9}
-              />{" "}
-              Gwei)
-            </span>
+            <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
+            <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
           </InfoRow>
         </>
       )}
@@ -315,18 +304,16 @@ const Details: React.FC<DetailsProps> = ({
       )}
       {txData.confirmedData && hasEIP1559 && (
         <InfoRow title="Block Base Fee">
-          <span>
-            <FormattedBalance
-              value={txData.confirmedData.blockBaseFeePerGas!}
-              decimals={9}
-            />{" "}
-            Gwei (
-            <FormattedBalance
-              value={txData.confirmedData.blockBaseFeePerGas!}
-              decimals={0}
-            />{" "}
-            wei)
-          </span>
+          <FormattedBalance
+            value={txData.confirmedData.blockBaseFeePerGas!}
+            decimals={9}
+          />{" "}
+          Gwei (
+          <FormattedBalance
+            value={txData.confirmedData.blockBaseFeePerGas!}
+            decimals={0}
+          />{" "}
+          wei)
         </InfoRow>
       )}
       {txData.confirmedData && (
@@ -353,47 +340,15 @@ const Details: React.FC<DetailsProps> = ({
         </>
       )}
       <InfoRow title="Input Data">
-        <Tab.Group>
-          <Tab.List className="flex space-x-1 mb-1">
-            <ModeTab>Decoded</ModeTab>
-            <ModeTab>Raw</ModeTab>
-            <ModeTab>UTF-8</ModeTab>
-          </Tab.List>
-          <Tab.Panels>
-            <Tab.Panel>
-              {fourBytes === "0x" ? (
-                <>No parameters</>
-              ) : resolvedTxDesc === undefined ? (
-                <>Waiting for data...</>
-              ) : resolvedTxDesc === null ? (
-                <>Can't decode data</>
-              ) : (
-                <DecodedParamsTable
-                  args={resolvedTxDesc.args}
-                  paramTypes={resolvedTxDesc.functionFragment.inputs}
-                  txData={txData}
-                  hasParamNames={resolvedTxDesc === txDesc}
-                  userMethod={userMethod}
-                  devMethod={devMethod}
-                />
-              )}
-            </Tab.Panel>
-            <Tab.Panel>
-              <textarea
-                className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
-                value={txData.data}
-                readOnly
-              />
-            </Tab.Panel>
-            <Tab.Panel>
-              <textarea
-                className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
-                value={utfInput}
-                readOnly
-              />
-            </Tab.Panel>
-          </Tab.Panels>
-        </Tab.Group>
+        <InputDecoder
+          fourBytes={fourBytes}
+          resolvedTxDesc={resolvedTxDesc}
+          hasParamNames={resolvedTxDesc === txDesc}
+          data={txData.data}
+          userMethod={userMethod}
+          devMethod={devMethod}
+          resolvedAddresses={resolvedAddresses}
+        />
       </InfoRow>
     </ContentFrame>
   );
diff --git a/src/transaction/FunctionSignature.tsx b/src/transaction/FunctionSignature.tsx
new file mode 100644
index 0000000..718138e
--- /dev/null
+++ b/src/transaction/FunctionSignature.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import SelectionHighlighter, {
+  functionSigSelector,
+} from "../components/SelectionHighlighter";
+
+type FunctionSignatureProps = {
+  callType: string;
+  sig: string;
+};
+
+const FunctionSignature: React.FC<FunctionSignatureProps> = ({
+  callType,
+  sig,
+}) => (
+  <SelectionHighlighter
+    myType="functionSig"
+    myContent={sig}
+    selector={functionSigSelector}
+  >
+    <span
+      className={`font-bold ${
+        callType === "STATICCALL"
+          ? "text-red-700"
+          : callType === "DELEGATECALL" || callType === "CALLCODE"
+          ? "text-gray-400"
+          : "text-blue-900"
+      }`}
+    >
+      {sig}
+    </span>
+  </SelectionHighlighter>
+);
+
+export default FunctionSignature;
diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx
index 2993e16..109ec1e 100644
--- a/src/transaction/LogEntry.tsx
+++ b/src/transaction/LogEntry.tsx
@@ -2,28 +2,28 @@ import React, { useMemo } from "react";
 import { Log } from "@ethersproject/abstract-provider";
 import { Fragment, Interface, LogDescription } from "@ethersproject/abi";
 import { Tab } from "@headlessui/react";
-import AddressHighlighter from "../components/AddressHighlighter";
-import DecoratedAddressLink from "../components/DecoratedAddressLink";
+import TransactionAddress from "../components/TransactionAddress";
 import Copy from "../components/Copy";
 import ModeTab from "../components/ModeTab";
 import DecodedParamsTable from "./decoder/DecodedParamsTable";
 import DecodedLogSignature from "./decoder/DecodedLogSignature";
-import { TransactionData } from "../types";
 import { useTopic0 } from "../useTopic0";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { ChecksummedAddress } from "../types";
+import { Metadata } from "../useSourcify";
 
 type LogEntryProps = {
-  txData: TransactionData;
   log: Log;
   logDesc: LogDescription | null | undefined;
   resolvedAddresses: ResolvedAddresses | undefined;
+  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
 const LogEntry: React.FC<LogEntryProps> = ({
-  txData,
   log,
   logDesc,
   resolvedAddresses,
+  metadatas,
 }) => {
   const rawTopic0 = log.topics[0];
   const topic0 = useTopic0(rawTopic0);
@@ -63,15 +63,11 @@ const LogEntry: React.FC<LogEntryProps> = ({
           <div className="font-bold text-right">Address</div>
           <div className="col-span-11 mr-auto">
             <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-              <AddressHighlighter address={log.address}>
-                <DecoratedAddressLink
-                  address={log.address}
-                  miner={log.address === txData.confirmedData?.miner}
-                  txFrom={log.address === txData.from}
-                  txTo={log.address === txData.to}
-                  resolvedAddresses={resolvedAddresses}
-                />
-              </AddressHighlighter>
+              <TransactionAddress
+                address={log.address}
+                resolvedAddresses={resolvedAddresses}
+                metadata={metadatas[log.address]}
+              />
               <Copy value={log.address} />
             </div>
           </div>
@@ -112,8 +108,8 @@ const LogEntry: React.FC<LogEntryProps> = ({
                       <DecodedParamsTable
                         args={resolvedLogDesc.args}
                         paramTypes={resolvedLogDesc.eventFragment.inputs}
-                        txData={txData}
                         hasParamNames={resolvedLogDesc === logDesc}
+                        resolvedAddresses={resolvedAddresses}
                       />
                     </div>
                   </div>
diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index 1fd4207..bbf0475 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import { Interface } from "@ethersproject/abi";
 import ContentFrame from "../ContentFrame";
 import LogEntry from "./LogEntry";
@@ -6,6 +6,7 @@ import { TransactionData } from "../types";
 import { useAppConfigContext } from "../useAppConfig";
 import { Metadata, useMultipleMetadata } from "../useSourcify";
 import { ResolvedAddresses } from "../api/address-resolver";
+import { RuntimeContext } from "../useRuntime";
 
 type LogsProps = {
   txData: TransactionData;
@@ -24,15 +25,16 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
     return md;
   }, [txData.to, metadata]);
 
-  const { sourcifySource } = useAppConfigContext();
   const logAddresses = useMemo(
     () => txData.confirmedData?.logs.map((l) => l.address) ?? [],
     [txData]
   );
+  const { provider } = useContext(RuntimeContext);
+  const { sourcifySource } = useAppConfigContext();
   const metadatas = useMultipleMetadata(
     baseMetadatas,
     logAddresses,
-    1,
+    provider?.network.chainId,
     sourcifySource
   );
   const logDescs = useMemo(() => {
@@ -69,10 +71,10 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
               {txData.confirmedData.logs.map((l, i) => (
                 <LogEntry
                   key={i}
-                  txData={txData}
                   log={l}
                   logDesc={logDescs?.[i]}
                   resolvedAddresses={resolvedAddresses}
+                  metadatas={metadatas}
                 />
               ))}
             </>
diff --git a/src/transaction/Trace.tsx b/src/transaction/Trace.tsx
new file mode 100644
index 0000000..5002391
--- /dev/null
+++ b/src/transaction/Trace.tsx
@@ -0,0 +1,69 @@
+import React, { useContext, useMemo } from "react";
+import ContentFrame from "../ContentFrame";
+import TransactionAddress from "../components/TransactionAddress";
+import TraceItem from "./TraceItem";
+import { TransactionData } from "../types";
+import { useBatch4Bytes } from "../use4Bytes";
+import { useTraceTransaction, useUniqueSignatures } from "../useErigonHooks";
+import { RuntimeContext } from "../useRuntime";
+import { ResolvedAddresses } from "../api/address-resolver";
+import { tracesCollector, useResolvedAddresses } from "../useResolvedAddresses";
+
+type TraceProps = {
+  txData: TransactionData;
+  resolvedAddresses: ResolvedAddresses | undefined;
+};
+
+const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
+  const { provider } = useContext(RuntimeContext);
+  const traces = useTraceTransaction(provider, txData.transactionHash);
+  const uniqueSignatures = useUniqueSignatures(traces);
+  const sigMap = useBatch4Bytes(uniqueSignatures);
+
+  const addrCollector = useMemo(() => tracesCollector(traces), [traces]);
+  const traceResolvedAddresses = useResolvedAddresses(provider, addrCollector);
+  const mergedResolvedAddresses = useMemo(() => {
+    const merge = {};
+    if (resolvedAddresses) {
+      Object.assign(merge, resolvedAddresses);
+    }
+    if (traceResolvedAddresses) {
+      Object.assign(merge, traceResolvedAddresses);
+    }
+    return merge;
+  }, [resolvedAddresses, traceResolvedAddresses]);
+
+  return (
+    <ContentFrame tabs>
+      <div className="mt-4 mb-5 space-y-3 font-code text-sm flex flex-col items-start overflow-x-auto">
+        {traces ? (
+          <>
+            <div className="border hover:border-gray-500 rounded px-1 py-0.5">
+              <TransactionAddress
+                address={txData.from}
+                resolvedAddresses={resolvedAddresses}
+              />
+            </div>
+            <div className="ml-5 space-y-3 self-stretch">
+              {traces.map((t, i, a) => (
+                <TraceItem
+                  key={i}
+                  t={t}
+                  last={i === a.length - 1}
+                  fourBytesMap={sigMap}
+                  resolvedAddresses={mergedResolvedAddresses}
+                />
+              ))}
+            </div>
+          </>
+        ) : (
+          <div className="border hover:border-gray-500 rounded px-1 py-1 w-96 h-7">
+            <div className="animate-pulse w-full h-full rounded bg-gray-200"></div>
+          </div>
+        )}
+      </div>
+    </ContentFrame>
+  );
+};
+
+export default React.memo(Trace);
diff --git a/src/transaction/TraceInput.tsx b/src/transaction/TraceInput.tsx
new file mode 100644
index 0000000..667977e
--- /dev/null
+++ b/src/transaction/TraceInput.tsx
@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { Switch } from "@headlessui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
+import TransactionAddress from "../components/TransactionAddress";
+import FormattedBalance from "../components/FormattedBalance";
+import FunctionSignature from "./FunctionSignature";
+import InputDecoder from "./decoder/InputDecoder";
+import { TraceEntry } from "../useErigonHooks";
+import { ResolvedAddresses } from "../api/address-resolver";
+import {
+  extract4Bytes,
+  FourBytesEntry,
+  useTransactionDescription,
+} from "../use4Bytes";
+
+type TraceInputProps = {
+  t: TraceEntry;
+  fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
+  resolvedAddresses: ResolvedAddresses | undefined;
+};
+
+const TraceInput: React.FC<TraceInputProps> = ({
+  t,
+  fourBytesMap,
+  resolvedAddresses,
+}) => {
+  const raw4Bytes = extract4Bytes(t.input);
+  const fourBytes = raw4Bytes !== null ? fourBytesMap[raw4Bytes] : null;
+  const sigText =
+    raw4Bytes === null ? "<fallback>" : fourBytes?.name ?? raw4Bytes;
+  const hasParams = t.input.length > 10;
+
+  const fourBytesTxDesc = useTransactionDescription(
+    fourBytes,
+    t.input,
+    t.value
+  );
+
+  const [expanded, setExpanded] = useState<boolean>(false);
+
+  return (
+    <div
+      className={`ml-5 border hover:border-gray-500 rounded px-1 py-0.5 ${
+        expanded ? "w-full" : ""
+      }`}
+    >
+      <div className="flex items-baseline">
+        <span className="text-xs text-gray-400 lowercase">{t.type}</span>
+        {t.type === "SELFDESTRUCT" ? (
+          <span className="pl-2 text-red-800" title="Self destruct">
+            <FontAwesomeIcon icon={faBomb} size="1x" />
+          </span>
+        ) : (
+          <>
+            <span>
+              <TransactionAddress
+                address={t.to}
+                resolvedAddresses={resolvedAddresses}
+              />
+            </span>
+            {t.type !== "CREATE" && t.type !== "CREATE2" && (
+              <>
+                <span>.</span>
+                <FunctionSignature callType={t.type} sig={sigText} />
+                {t.value && !t.value.isZero() && (
+                  <span className="text-red-700 whitespace-nowrap">
+                    {"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
+                  </span>
+                )}
+                <span className="whitespace-nowrap">
+                  (
+                  {hasParams && (
+                    <Switch
+                      className="text-xs"
+                      checked={expanded}
+                      onChange={setExpanded}
+                    >
+                      {expanded ? (
+                        <span className="text-gray-400">[-]</span>
+                      ) : (
+                        <>[...]</>
+                      )}
+                    </Switch>
+                  )}
+                  {(!hasParams || !expanded) && <>)</>}
+                </span>
+              </>
+            )}
+          </>
+        )}
+      </div>
+      {hasParams && expanded && (
+        <>
+          <div className="ml-5 mr-1 my-2">
+            <InputDecoder
+              fourBytes={raw4Bytes ?? "0x"}
+              resolvedTxDesc={fourBytesTxDesc}
+              hasParamNames={false}
+              data={t.input}
+              userMethod={undefined}
+              devMethod={undefined}
+              resolvedAddresses={resolvedAddresses}
+            />
+          </div>
+          <div>)</div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default TraceInput;
diff --git a/src/transaction/TraceItem.tsx b/src/transaction/TraceItem.tsx
new file mode 100644
index 0000000..60e4d85
--- /dev/null
+++ b/src/transaction/TraceItem.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlusSquare } from "@fortawesome/free-regular-svg-icons/faPlusSquare";
+import { faMinusSquare } from "@fortawesome/free-regular-svg-icons/faMinusSquare";
+import { Switch } from "@headlessui/react";
+import { FourBytesEntry } from "../use4Bytes";
+import { TraceGroup } from "../useErigonHooks";
+import { ResolvedAddresses } from "../api/address-resolver";
+import TraceInput from "./TraceInput";
+
+type TraceItemProps = {
+  t: TraceGroup;
+  last: boolean;
+  fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
+  resolvedAddresses: ResolvedAddresses | undefined;
+};
+
+const TraceItem: React.FC<TraceItemProps> = ({
+  t,
+  last,
+  fourBytesMap,
+  resolvedAddresses,
+}) => {
+  const [expanded, setExpanded] = useState<boolean>(true);
+
+  return (
+    <>
+      <div className="flex relative">
+        <div className="absolute border-l border-b w-5 h-6 transform -translate-y-3"></div>
+        {!last && (
+          <div className="absolute left-0 border-l w-5 h-full transform translate-y-3"></div>
+        )}
+        {t.children && (
+          <Switch
+            className="absolute left-0 bg-white transform -translate-x-1/2 text-gray-500"
+            checked={expanded}
+            onChange={setExpanded}
+          >
+            <FontAwesomeIcon
+              icon={expanded ? faMinusSquare : faPlusSquare}
+              size="1x"
+            />
+          </Switch>
+        )}
+        <TraceInput
+          t={t}
+          fourBytesMap={fourBytesMap}
+          resolvedAddresses={resolvedAddresses}
+        />
+      </div>
+      {t.children && (
+        <div
+          className={`pl-10 ${last ? "" : "border-l"} space-y-3 ${
+            expanded ? "" : "hidden"
+          }`}
+        >
+          <TraceChildren
+            c={t.children}
+            fourBytesMap={fourBytesMap}
+            resolvedAddresses={resolvedAddresses}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+type TraceChildrenProps = {
+  c: TraceGroup[];
+  fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
+  resolvedAddresses: ResolvedAddresses | undefined;
+};
+
+const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
+  ({ c, fourBytesMap, resolvedAddresses }) => {
+    return (
+      <>
+        {c.map((tc, i, a) => (
+          <TraceItem
+            key={i}
+            t={tc}
+            last={i === a.length - 1}
+            fourBytesMap={fourBytesMap}
+            resolvedAddresses={resolvedAddresses}
+          />
+        ))}
+      </>
+    );
+  }
+);
+
+export default TraceItem;
diff --git a/src/transaction/decoder/AddressDecoder.tsx b/src/transaction/decoder/AddressDecoder.tsx
index ee6369a..49726e6 100644
--- a/src/transaction/decoder/AddressDecoder.tsx
+++ b/src/transaction/decoder/AddressDecoder.tsx
@@ -1,26 +1,21 @@
 import React from "react";
-import AddressHighlighter from "../../components/AddressHighlighter";
-import DecoratedAddressLink from "../../components/DecoratedAddressLink";
+import TransactionAddress from "../../components/TransactionAddress";
 import Copy from "../../components/Copy";
-import { TransactionData } from "../../types";
+import { ResolvedAddresses } from "../../api/address-resolver";
 
 type AddressDecoderProps = {
-  r: any;
-  txData: TransactionData;
+  r: string;
+  resolvedAddresses?: ResolvedAddresses | undefined;
 };
 
-const AddressDecoder: React.FC<AddressDecoderProps> = ({ r, txData }) => (
+const AddressDecoder: React.FC<AddressDecoderProps> = ({
+  r,
+  resolvedAddresses,
+}) => (
   <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-    <AddressHighlighter address={r.toString()}>
-      <DecoratedAddressLink
-        address={r.toString()}
-        miner={r.toString() === txData.confirmedData?.miner}
-        txFrom={r.toString() === txData.from}
-        txTo={r.toString() === txData.to}
-      />
-    </AddressHighlighter>
-    <Copy value={r.toString()} />
+    <TransactionAddress address={r} resolvedAddresses={resolvedAddresses} />
+    <Copy value={r} />
   </div>
 );
 
-export default React.memo(AddressDecoder);
+export default AddressDecoder;
diff --git a/src/transaction/decoder/DecodedParamRow.tsx b/src/transaction/decoder/DecodedParamRow.tsx
index fed9ecb..78467d3 100644
--- a/src/transaction/decoder/DecodedParamRow.tsx
+++ b/src/transaction/decoder/DecodedParamRow.tsx
@@ -8,16 +8,16 @@ import Uint256Decoder from "./Uint256Decoder";
 import AddressDecoder from "./AddressDecoder";
 import BooleanDecoder from "./BooleanDecoder";
 import BytesDecoder from "./BytesDecoder";
-import { TransactionData } from "../../types";
+import { ResolvedAddresses } from "../../api/address-resolver";
 
 type DecodedParamRowProps = {
   prefix?: ReactNode;
   i?: number | undefined;
   r: any;
   paramType: ParamType;
-  txData: TransactionData;
   arrayElem?: number | undefined;
   help?: string | undefined;
+  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
@@ -25,9 +25,9 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
   i,
   r,
   paramType,
-  txData,
   arrayElem,
   help,
+  resolvedAddresses,
 }) => {
   const [showHelp, setShowHelp] = useState<boolean>(false);
 
@@ -72,7 +72,10 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
           {paramType.baseType === "uint256" ? (
             <Uint256Decoder r={r} />
           ) : paramType.baseType === "address" ? (
-            <AddressDecoder r={r} txData={txData} />
+            <AddressDecoder
+              r={r.toString()}
+              resolvedAddresses={resolvedAddresses}
+            />
           ) : paramType.baseType === "bool" ? (
             <BooleanDecoder r={r} />
           ) : paramType.baseType === "bytes" ? (
@@ -99,7 +102,7 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
             i={idx}
             r={e}
             paramType={paramType.components[idx]}
-            txData={txData}
+            resolvedAddresses={resolvedAddresses}
           />
         ))}
       {paramType.baseType === "array" &&
@@ -109,8 +112,8 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
             prefix={paramType.name ?? <span className="italic">param_{i}</span>}
             r={e}
             paramType={paramType.arrayChildren}
-            txData={txData}
             arrayElem={idx}
+            resolvedAddresses={resolvedAddresses}
           />
         ))}
     </>
diff --git a/src/transaction/decoder/DecodedParamsTable.tsx b/src/transaction/decoder/DecodedParamsTable.tsx
index f7daee5..376eee2 100644
--- a/src/transaction/decoder/DecodedParamsTable.tsx
+++ b/src/transaction/decoder/DecodedParamsTable.tsx
@@ -1,24 +1,24 @@
 import React from "react";
 import { ParamType, Result } from "@ethersproject/abi";
 import DecodedParamRow from "./DecodedParamRow";
-import { TransactionData } from "../../types";
 import { DevMethod, UserMethod } from "../../useSourcify";
+import { ResolvedAddresses } from "../../api/address-resolver";
 
 type DecodedParamsTableProps = {
   args: Result;
   paramTypes: ParamType[];
-  txData: TransactionData;
   hasParamNames?: boolean;
   userMethod?: UserMethod | undefined;
   devMethod?: DevMethod | undefined;
+  resolvedAddresses?: ResolvedAddresses | undefined;
 };
 
 const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
   args,
   paramTypes,
-  txData,
   hasParamNames = true,
   devMethod,
+  resolvedAddresses,
 }) => (
   <table className="border w-full">
     <thead>
@@ -46,8 +46,8 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
           i={i}
           r={r}
           paramType={paramTypes[i]}
-          txData={txData}
           help={devMethod?.params?.[paramTypes[i].name]}
+          resolvedAddresses={resolvedAddresses}
         />
       ))}
     </tbody>
diff --git a/src/transaction/decoder/InputDecoder.tsx b/src/transaction/decoder/InputDecoder.tsx
new file mode 100644
index 0000000..e3d041c
--- /dev/null
+++ b/src/transaction/decoder/InputDecoder.tsx
@@ -0,0 +1,83 @@
+import React, { useMemo } from "react";
+import { TransactionDescription } from "@ethersproject/abi";
+import { toUtf8String } from "@ethersproject/strings";
+import { Tab } from "@headlessui/react";
+import ModeTab from "../../components/ModeTab";
+import DecodedParamsTable from "./DecodedParamsTable";
+import { DevMethod, UserMethod } from "../../useSourcify";
+import { ResolvedAddresses } from "../../api/address-resolver";
+
+type InputDecoderProps = {
+  fourBytes: string;
+  resolvedTxDesc: TransactionDescription | null | undefined;
+  hasParamNames: boolean;
+  data: string;
+  userMethod: UserMethod | undefined;
+  devMethod: DevMethod | undefined;
+  resolvedAddresses: ResolvedAddresses | undefined;
+};
+
+const InputDecoder: React.FC<InputDecoderProps> = ({
+  fourBytes,
+  resolvedTxDesc,
+  hasParamNames,
+  data,
+  userMethod,
+  devMethod,
+  resolvedAddresses,
+}) => {
+  const utfInput = useMemo(() => {
+    try {
+      return toUtf8String(data);
+    } catch (err) {
+      // Silently ignore on purpose
+      return undefined;
+    }
+  }, [data]);
+
+  return (
+    <Tab.Group>
+      <Tab.List className="flex space-x-1 mb-1">
+        <ModeTab disabled={!resolvedTxDesc}>Decoded</ModeTab>
+        <ModeTab>Raw</ModeTab>
+        <ModeTab disabled={utfInput === undefined}>UTF-8</ModeTab>
+      </Tab.List>
+      <Tab.Panels>
+        <Tab.Panel>
+          {fourBytes === "0x" ? (
+            <>No parameters</>
+          ) : resolvedTxDesc === undefined ? (
+            <>Waiting for data...</>
+          ) : resolvedTxDesc === null ? (
+            <>Can't decode data</>
+          ) : (
+            <DecodedParamsTable
+              args={resolvedTxDesc.args}
+              paramTypes={resolvedTxDesc.functionFragment.inputs}
+              hasParamNames={hasParamNames}
+              userMethod={userMethod}
+              devMethod={devMethod}
+              resolvedAddresses={resolvedAddresses}
+            />
+          )}
+        </Tab.Panel>
+        <Tab.Panel>
+          <textarea
+            className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
+            value={data}
+            readOnly
+          />
+        </Tab.Panel>
+        <Tab.Panel>
+          <textarea
+            className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
+            value={utfInput}
+            readOnly
+          />
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+};
+
+export default InputDecoder;
diff --git a/src/types.ts b/src/types.ts
index 12763bb..fde36bb 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -67,6 +67,9 @@ export type ConfirmedTransactionData = {
 // The VOID...
 export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
 
+// TODO: replace all occurrences of plain string
+export type ChecksummedAddress = string;
+
 export enum AddressContext {
   FROM,
   TO,
@@ -104,4 +107,4 @@ export type TokenMeta = {
   decimals: number;
 };
 
-export type TokenMetas = Record<string, TokenMeta>;
+export type TokenMetas = Record<string, TokenMeta | null | undefined>;
diff --git a/src/url.ts b/src/url.ts
index 4639738..471c9d8 100644
--- a/src/url.ts
+++ b/src/url.ts
@@ -1,4 +1,5 @@
 import { BlockTag } from "@ethersproject/abstract-provider";
+import { ChecksummedAddress } from "./types";
 
 export const fourBytesURL = (
   assetsURLPrefix: string,
@@ -38,27 +39,27 @@ const resolveSourcifySource = (source: SourcifySource) => {
     return sourcifyHttpRepoPrefix;
   }
 
-  throw new Error(`Unknown Sourcify intergration source code: ${source}`);
+  throw new Error(`Unknown Sourcify integration source code: ${source}`);
 };
 
 export const sourcifyMetadata = (
-  checksummedAddress: string,
-  networkId: number,
+  address: ChecksummedAddress,
+  chainId: number,
   source: SourcifySource
 ) =>
   `${resolveSourcifySource(
     source
-  )}/contracts/full_match/${networkId}/${checksummedAddress}/metadata.json`;
+  )}/contracts/full_match/${chainId}/${address}/metadata.json`;
 
 export const sourcifySourceFile = (
-  checksummedAddress: string,
-  networkId: number,
+  address: ChecksummedAddress,
+  chainId: number,
   filepath: string,
   source: SourcifySource
 ) =>
   `${resolveSourcifySource(
     source
-  )}/contracts/full_match/${networkId}/${checksummedAddress}/sources/${filepath}`;
+  )}/contracts/full_match/${chainId}/${address}/sources/${filepath}`;
 
 export const openInRemixURL = (checksummedAddress: string, networkId: number) =>
   `https://remix.ethereum.org/#call=source-verification//fetchAndSave//${checksummedAddress}//${networkId}`;
diff --git a/src/use4Bytes.ts b/src/use4Bytes.ts
index 9fe9252..690d5a3 100644
--- a/src/use4Bytes.ts
+++ b/src/use4Bytes.ts
@@ -1,21 +1,97 @@
-import { useState, useEffect, useContext } from "react";
+import { useState, useEffect, useContext, useMemo } from "react";
+import {
+  Fragment,
+  Interface,
+  TransactionDescription,
+} from "@ethersproject/abi";
 import { RuntimeContext } from "./useRuntime";
 import { fourBytesURL } from "./url";
+import { BigNumberish } from "@ethersproject/bignumber";
 
 export type FourBytesEntry = {
   name: string;
   signature: string | undefined;
 };
 
+export type FourBytesMap = Record<string, FourBytesEntry | null | undefined>;
+
 const simpleTransfer: FourBytesEntry = {
-  name: "Transfer",
+  name: "transfer",
   signature: undefined,
 };
 
 const fullCache = new Map<string, FourBytesEntry | null>();
 
+export const extract4Bytes = (rawInput: string): string | null => {
+  if (rawInput.length < 10) {
+    return null;
+  }
+  return rawInput.slice(0, 10);
+};
+
 export const rawInputTo4Bytes = (rawInput: string) => rawInput.slice(0, 10);
 
+const fetch4Bytes = async (
+  assetsURLPrefix: string,
+  fourBytes: string
+): Promise<FourBytesEntry | null> => {
+  const signatureURL = fourBytesURL(assetsURLPrefix, fourBytes);
+
+  try {
+    const res = await fetch(signatureURL);
+    if (!res.ok) {
+      console.error(`Signature does not exist in 4bytes DB: ${fourBytes}`);
+      return null;
+    }
+
+    // Get only the first occurrence, for now ignore alternative param names
+    const sigs = await res.text();
+    const sig = sigs.split(";")[0];
+    const cut = sig.indexOf("(");
+    const method = sig.slice(0, cut);
+
+    const entry: FourBytesEntry = {
+      name: method,
+      signature: sig,
+    };
+    return entry;
+  } catch (err) {
+    console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
+    return null;
+  }
+};
+
+export const useBatch4Bytes = (
+  rawFourByteSigs: string[] | undefined
+): FourBytesMap => {
+  const runtime = useContext(RuntimeContext);
+  const assetsURLPrefix = runtime.config?.assetsURLPrefix;
+
+  const [fourBytesMap, setFourBytesMap] = useState<FourBytesMap>({});
+  useEffect(() => {
+    if (!rawFourByteSigs || assetsURLPrefix === undefined) {
+      setFourBytesMap({});
+      return;
+    }
+
+    const loadSigs = async () => {
+      const promises = rawFourByteSigs.map((s) =>
+        fetch4Bytes(assetsURLPrefix, s.slice(2))
+      );
+      const results = await Promise.all(promises);
+
+      const _fourBytesMap: Record<string, FourBytesEntry | null> = {};
+      for (let i = 0; i < rawFourByteSigs.length; i++) {
+        _fourBytesMap[rawFourByteSigs[i]] = results[i];
+      }
+      setFourBytesMap(_fourBytesMap);
+    };
+    loadSigs();
+  }, [assetsURLPrefix, rawFourByteSigs]);
+
+  return fourBytesMap;
+};
+
 /**
  * Extract 4bytes DB info
  *
@@ -47,35 +123,12 @@ export const use4Bytes = (
       return;
     }
 
-    const signatureURL = fourBytesURL(assetsURLPrefix, fourBytes);
-    fetch(signatureURL)
-      .then(async (res) => {
-        if (!res.ok) {
-          console.error(`Signature does not exist in 4bytes DB: ${fourBytes}`);
-          fullCache.set(fourBytes, null);
-          setEntry(null);
-          return;
-        }
-
-        // Get only the first occurrence, for now ignore alternative param names
-        const sigs = await res.text();
-        const sig = sigs.split(";")[0];
-        const cut = sig.indexOf("(");
-        let method = sig.slice(0, cut);
-        method = method.charAt(0).toUpperCase() + method.slice(1);
-
-        const entry: FourBytesEntry = {
-          name: method,
-          signature: sig,
-        };
-        setEntry(entry);
-        fullCache.set(fourBytes, entry);
-      })
-      .catch((err) => {
-        console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
-        setEntry(null);
-        fullCache.set(fourBytes, null);
-      });
+    const loadSig = async () => {
+      const entry = await fetch4Bytes(assetsURLPrefix, fourBytes);
+      fullCache.set(fourBytes, entry);
+      setEntry(entry);
+    };
+    loadSig();
   }, [fourBytes, assetsURLPrefix]);
 
   if (rawFourBytes === "0x") {
@@ -96,3 +149,29 @@ export const use4Bytes = (
   fullCache.set(fourBytes, entry);
   return entry;
 };
+
+export const useTransactionDescription = (
+  fourBytesEntry: FourBytesEntry | null | undefined,
+  data: string | undefined,
+  value: BigNumberish | undefined
+): TransactionDescription | null | undefined => {
+  const txDesc = useMemo(() => {
+    if (!fourBytesEntry) {
+      return fourBytesEntry;
+    }
+    if (
+      !fourBytesEntry.signature ||
+      data === undefined ||
+      value === undefined
+    ) {
+      return undefined;
+    }
+
+    const sig = fourBytesEntry?.signature;
+    const functionFragment = Fragment.fromString(`function ${sig}`);
+    const intf = new Interface([functionFragment]);
+    return intf.parseTransaction({ data, value });
+  }, [fourBytesEntry, data, value]);
+
+  return txDesc;
+};
diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts
index 7322a0d..17d629f 100644
--- a/src/useErigonHooks.ts
+++ b/src/useErigonHooks.ts
@@ -1,10 +1,11 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 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 { extract4Bytes } from "./use4Bytes";
 import { getInternalOperations } from "./nodeFunctions";
 import {
   TokenMetas,
@@ -221,7 +222,7 @@ export const useTxData = (
       // Extract token meta
       const tokenMetas: TokenMetas = {};
       for (const t of tokenTransfers) {
-        if (tokenMetas[t.token]) {
+        if (tokenMetas[t.token] !== undefined) {
           continue;
         }
         const erc20Contract = new Contract(t.token, erc20, provider);
@@ -237,6 +238,7 @@ export const useTxData = (
             decimals,
           };
         } catch (err) {
+          tokenMetas[t.token] = null;
           console.warn(`Couldn't get token ${t.token} metadata; ignoring`, err);
         }
       }
@@ -308,3 +310,133 @@ export const useInternalOperations = (
 
   return intTransfers;
 };
+
+export type TraceEntry = {
+  type: string;
+  depth: number;
+  from: string;
+  to: string;
+  value: BigNumber;
+  input: string;
+};
+
+export type TraceGroup = TraceEntry & {
+  children: TraceGroup[] | null;
+};
+
+export const useTraceTransaction = (
+  provider: JsonRpcProvider | undefined,
+  txHash: string
+): TraceGroup[] | undefined => {
+  const [traceGroups, setTraceGroups] = useState<TraceGroup[] | undefined>();
+
+  useEffect(() => {
+    if (!provider) {
+      setTraceGroups(undefined);
+      return;
+    }
+
+    const traceTx = async () => {
+      const results = await provider.send("ots_traceTransaction", [txHash]);
+
+      // Implement better formatter
+      for (let i = 0; i < results.length; i++) {
+        results[i].from = provider.formatter.address(results[i].from);
+        results[i].to = provider.formatter.address(results[i].to);
+        results[i].value =
+          results[i].value === null
+            ? null
+            : provider.formatter.bigNumber(results[i].value);
+      }
+
+      // Build trace tree
+      const buildTraceTree = (
+        flatList: TraceEntry[],
+        depth: number = 0
+      ): TraceGroup[] => {
+        const entries: TraceGroup[] = [];
+
+        let children: TraceEntry[] | null = null;
+        for (let i = 0; i < flatList.length; i++) {
+          if (flatList[i].depth === depth) {
+            if (children !== null) {
+              const childrenTree = buildTraceTree(children, depth + 1);
+              const prev = entries.pop();
+              if (prev) {
+                prev.children = childrenTree;
+                entries.push(prev);
+              }
+            }
+
+            entries.push({
+              ...flatList[i],
+              children: null,
+            });
+            children = null;
+          } else {
+            if (children === null) {
+              children = [];
+            }
+            children.push(flatList[i]);
+          }
+        }
+        if (children !== null) {
+          const childrenTree = buildTraceTree(children, depth + 1);
+          const prev = entries.pop();
+          if (prev) {
+            prev.children = childrenTree;
+            entries.push(prev);
+          }
+        }
+
+        return entries;
+      };
+
+      const traceTree = buildTraceTree(results);
+      setTraceGroups(traceTree);
+    };
+    traceTx();
+  }, [provider, txHash]);
+
+  return traceGroups;
+};
+
+/**
+ * Flatten a trace tree and extract and dedup 4byte function signatures
+ */
+export const useUniqueSignatures = (traces: TraceGroup[] | undefined) => {
+  const uniqueSignatures = useMemo(() => {
+    if (!traces) {
+      return undefined;
+    }
+
+    const sigs = new Set<string>();
+    let nextTraces: TraceGroup[] = [...traces];
+    while (nextTraces.length > 0) {
+      const traces = nextTraces;
+      nextTraces = [];
+
+      for (const t of traces) {
+        if (
+          t.type === "CALL" ||
+          t.type === "DELEGATECALL" ||
+          t.type === "STATICCALL" ||
+          t.type === "CALLCODE"
+        ) {
+          const fourBytes = extract4Bytes(t.input);
+          if (fourBytes) {
+            sigs.add(fourBytes);
+          }
+        }
+
+        if (t.children) {
+          nextTraces.push(...t.children);
+        }
+      }
+    }
+
+    return [...sigs];
+  }, [traces]);
+
+  return uniqueSignatures;
+};
diff --git a/src/useProvider.ts b/src/useProvider.ts
index 7f89f36..b189b7f 100644
--- a/src/useProvider.ts
+++ b/src/useProvider.ts
@@ -1,5 +1,9 @@
 import { useEffect, useState } from "react";
-import { JsonRpcProvider, WebSocketProvider } from "@ethersproject/providers";
+import {
+  JsonRpcProvider,
+  JsonRpcBatchProvider,
+  WebSocketProvider,
+} from "@ethersproject/providers";
 import { ConnectionStatus } from "./types";
 import { MIN_API_LEVEL } from "./params";
 
@@ -35,7 +39,7 @@ export const useProvider = (
       if (erigonURL?.startsWith("ws://") || erigonURL?.startsWith("wss://")) {
         provider = new WebSocketProvider(erigonURL);
       } else {
-        provider = new JsonRpcProvider(erigonURL);
+        provider = new JsonRpcBatchProvider(erigonURL);
       }
 
       // Check if it is at least a regular ETH node
diff --git a/src/useResolvedAddresses.ts b/src/useResolvedAddresses.ts
index 1936da0..9eadfde 100644
--- a/src/useResolvedAddresses.ts
+++ b/src/useResolvedAddresses.ts
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { JsonRpcProvider } from "@ethersproject/providers";
 import { ProcessedTransaction, TransactionData } from "./types";
 import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
+import { TraceGroup } from "./useErigonHooks";
 
 export type AddressCollector = () => string[];
 
@@ -61,6 +62,31 @@ export const transactionDataCollector =
     return Array.from(uniqueAddresses);
   };
 
+export const tracesCollector =
+  (traces: TraceGroup[] | undefined): AddressCollector =>
+  () => {
+    if (traces === undefined) {
+      return [];
+    }
+
+    const uniqueAddresses = new Set<string>();
+    let searchTraces = [...traces];
+    while (searchTraces.length > 0) {
+      const nextSearch: TraceGroup[] = [];
+
+      for (const g of searchTraces) {
+        uniqueAddresses.add(g.from);
+        uniqueAddresses.add(g.to);
+        if (g.children) {
+          nextSearch.push(...g.children);
+        }
+      }
+
+      searchTraces = nextSearch;
+    }
+    return Array.from(uniqueAddresses);
+  };
+
 export const useResolvedAddresses = (
   provider: JsonRpcProvider | undefined,
   addrCollector: AddressCollector
diff --git a/src/useSelectedTransaction.ts b/src/useSelectedTransaction.ts
new file mode 100644
index 0000000..8676a53
--- /dev/null
+++ b/src/useSelectedTransaction.ts
@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+import { TransactionData } from "./types";
+
+export const SelectedTransactionContext = createContext<
+  TransactionData | null | undefined
+>(undefined);
+
+export const useSelectedTransaction = () =>
+  useContext(SelectedTransactionContext);
diff --git a/src/useSelection.ts b/src/useSelection.ts
index 03a2a92..8dc8f95 100644
--- a/src/useSelection.ts
+++ b/src/useSelection.ts
@@ -6,12 +6,14 @@ import {
   useContext,
 } from "react";
 
+export type SelectionType = "address" | "value" | "functionSig";
+
 export type Selection = {
-  type: "address" | "value";
+  type: SelectionType;
   content: string;
 };
 
-type OptionalSelection = Selection | null;
+export type OptionalSelection = Selection | null;
 
 export const useSelection = (): [
   OptionalSelection,
diff --git a/src/useSourcify.ts b/src/useSourcify.ts
index 0d6ea59..10f0c68 100644
--- a/src/useSourcify.ts
+++ b/src/useSourcify.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from "react";
 import { Interface } from "@ethersproject/abi";
-import { TransactionData } from "./types";
+import { ChecksummedAddress, TransactionData } from "./types";
 import { sourcifyMetadata, SourcifySource, sourcifySourceFile } from "./url";
 
 export type UserMethod = {
@@ -65,24 +65,19 @@ export type Metadata = {
   };
 };
 
-export const fetchSourcifyMetadata = async (
-  checksummedAddress: string,
+const fetchSourcifyMetadata = async (
+  address: ChecksummedAddress,
   chainId: number,
   source: SourcifySource,
   abortController: AbortController
 ): Promise<Metadata | null> => {
   try {
-    const contractMetadataURL = sourcifyMetadata(
-      checksummedAddress,
-      chainId,
-      source
-    );
-    const result = await fetch(contractMetadataURL, {
+    const metadataURL = sourcifyMetadata(address, chainId, source);
+    const result = await fetch(metadataURL, {
       signal: abortController.signal,
     });
     if (result.ok) {
-      const _metadata = await result.json();
-      return _metadata;
+      return await result.json();
     }
 
     return null;
@@ -92,15 +87,16 @@ export const fetchSourcifyMetadata = async (
   }
 };
 
+// TODO: replace every occurrence with the multiple version one
 export const useSourcify = (
-  checksummedAddress: string | undefined,
+  address: ChecksummedAddress | undefined,
   chainId: number | undefined,
   source: SourcifySource
 ): Metadata | null | undefined => {
   const [rawMetadata, setRawMetadata] = useState<Metadata | null | undefined>();
 
   useEffect(() => {
-    if (!checksummedAddress || chainId === undefined) {
+    if (!address || chainId === undefined) {
       return;
     }
     setRawMetadata(undefined);
@@ -108,7 +104,7 @@ export const useSourcify = (
     const abortController = new AbortController();
     const fetchMetadata = async () => {
       const _metadata = await fetchSourcifyMetadata(
-        checksummedAddress,
+        address,
         chainId,
         source,
         abortController
@@ -120,47 +116,53 @@ export const useSourcify = (
     return () => {
       abortController.abort();
     };
-  }, [checksummedAddress, chainId, source]);
+  }, [address, chainId, source]);
 
   return rawMetadata;
 };
 
 export const useMultipleMetadata = (
-  baseMetadatas: Record<string, Metadata | null>,
-  checksummedAddress: (string | undefined)[],
+  baseMetadatas: Record<string, Metadata | null> | undefined,
+  addresses: (ChecksummedAddress | undefined)[],
   chainId: number | undefined,
   source: SourcifySource
-): Record<string, Metadata | null | undefined> => {
+): Record<ChecksummedAddress, Metadata | null | undefined> => {
   const [rawMetadata, setRawMetadata] = useState<
     Record<string, Metadata | null | undefined>
   >({});
 
   useEffect(() => {
-    if (!checksummedAddress || chainId === undefined) {
+    if (!addresses || chainId === undefined) {
       return;
     }
     setRawMetadata({});
 
     const abortController = new AbortController();
-    const fetchMetadata = async (addresses: string[]) => {
+    const fetchMetadata = async (dedupedAddresses: string[]) => {
       const promises: Promise<Metadata | null>[] = [];
-      for (const addr of addresses) {
+      for (const address of dedupedAddresses) {
         promises.push(
-          fetchSourcifyMetadata(addr, chainId, source, abortController)
+          fetchSourcifyMetadata(address, chainId, source, abortController)
         );
       }
 
       const results = await Promise.all(promises);
-      const metadatas: Record<string, Metadata | null> = { ...baseMetadatas };
+      if (abortController.signal.aborted) {
+        return;
+      }
+      const metadatas: Record<string, Metadata | null> = baseMetadatas
+        ? { ...baseMetadatas }
+        : {};
       for (let i = 0; i < results.length; i++) {
-        metadatas[addresses[i]] = results[i];
+        metadatas[dedupedAddresses[i]] = results[i];
       }
       setRawMetadata(metadatas);
     };
 
     const deduped = new Set(
-      checksummedAddress.filter(
-        (a): a is string => a !== undefined && baseMetadatas[a] === undefined
+      addresses.filter(
+        (a): a is ChecksummedAddress =>
+          a !== undefined && baseMetadatas?.[a] === undefined
       )
     );
     fetchMetadata(Array.from(deduped));
@@ -168,7 +170,7 @@ export const useMultipleMetadata = (
     return () => {
       abortController.abort();
     };
-  }, [baseMetadatas, checksummedAddress, chainId, source]);
+  }, [baseMetadatas, addresses, chainId, source]);
 
   return rawMetadata;
 };
diff --git a/trustwallet b/trustwallet
index e439c36..30e4ffa 160000
--- a/trustwallet
+++ b/trustwallet
@@ -1 +1 @@
-Subproject commit e439c36937deb321ad01c23ac23941e8a491efe9
+Subproject commit 30e4ffa0153594b11421cf383b1192e4414d2f66
diff --git a/tsconfig.json b/tsconfig.json
index 9d379a3..23c0098 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "downlevelIteration": true
   },
   "include": ["src"]
 }