Merge branch 'release/v2022.03.02-otterscan'

2022-03-30 17:58:20 -03:00 · 2022-03-30 17:58:20 -03:00 · 0f9f1e5211
parent fd9778443d c9debd585b
commit 0f9f1e5211
44 changed files with 1572 additions and 1110 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -5,3 +5,7 @@ node_modules
 !4bytes/with_parameter_names
 trustwallet
 !trustwallet/blockchains/ethereum/assets
+!trustwallet/blockchains/polygon/assets
+!trustwallet/blockchains/smartchain/assets
+chains
+!chains/_data/chains
--- a/.gitmodules
+++ b/.gitmodules
@ -10,3 +10,7 @@
 	path = topic0
 	url = https://github.com/wmitsuda/topic0.git
 	ignore = dirty
+[submodule "chains"]
+	path = chains
+	url = https://github.com/ethereum-lists/chains.git
+	ignore = dirty
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 0ee722e516c91dc6a3de01c26ea06955123eeddb
+Subproject commit 9603b20bd08ef0089a5fdca385afd3a3251d662c
--- a/19
+++ b/19
@ -1,4 +1,4 @@
-FROM node:16.13.0-alpine3.14 AS builder
+FROM node:16.14.0-alpine3.15 AS builder
 WORKDIR /otterscan-build
 COPY ["package.json", "package-lock.json", "/otterscan-build/"]
 RUN npm install
@ -7,21 +7,27 @@ COPY ["public", "/otterscan-build/public/"]
 COPY ["src", "/otterscan-build/src/"]
 RUN npm run build

-FROM alpine:3.14.0 AS logobuilder
+FROM alpine:3.15.0 AS logobuilder
 RUN apk add imagemagick parallel
 WORKDIR /assets
-COPY trustwallet/blockchains/ethereum/assets /assets/
-RUN find . -name logo.png | parallel magick convert {} -filter Lanczos -resize 32x32 {}
+COPY trustwallet/blockchains/ethereum/assets /assets/1/
+COPY trustwallet/blockchains/polygon/assets /assets/137/
+COPY trustwallet/blockchains/smartchain/assets /assets/56/
+RUN find . -name logo.png | parallel magick convert {} -filter Lanczos -resize 32x32 {}; exit 0

-FROM alpine:3.14.0 AS fourbytesbuilder
+FROM alpine:3.15.0 AS fourbytesbuilder
 WORKDIR /signatures
 COPY 4bytes/signatures /signatures/
 COPY 4bytes/with_parameter_names /signatures/

-FROM alpine:3.14.0 AS topic0builder
+FROM alpine:3.15.0 AS topic0builder
 WORKDIR /topic0
 COPY topic0/with_parameter_names /topic0/

+FROM alpine:3.15.0 AS chainsbuilder
+WORKDIR /chains
+COPY chains/_data/chains /chains/
+
 # Add brotli module to official nginx image
 # Based on: https://github.com/nginxinc/docker-nginx/tree/master/modules
 FROM nginx:1.21.3-alpine as nginxbuilder
@ -85,6 +91,7 @@ RUN set -ex \
       done \
    && rm -rf /tmp/packages
 RUN apk update && apk add jq
+COPY --from=chainsbuilder /chains /usr/share/nginx/html/chains/
 COPY --from=topic0builder /topic0 /usr/share/nginx/html/topic0/
 COPY --from=fourbytesbuilder /signatures /usr/share/nginx/html/signatures/
 COPY --from=logobuilder /assets /usr/share/nginx/html/assets/
--- a/1
+++ b/1
@ -0,0 +1 @@
+Subproject commit af79eb7387b2a4f747bf31cb318d4f1db43c4d84
--- a/nginx/conf.d/default.conf
+++ b/nginx/conf.d/default.conf
@ -113,6 +113,40 @@ server {
        }
    }

+    location /chains {
+        root   /usr/share/nginx/html;
+        expires 30d;
+
+        # Base on: https://michielkalkman.com/snippets/nginx-cors-open-configuration/
+        if ($request_method = 'OPTIONS') {
+            add_header 'Access-Control-Allow-Origin' '*';
+            #
+            # Om nom nom cookies
+            #
+            add_header 'Access-Control-Allow-Credentials' 'true';
+            add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
+
+            #
+            # Custom headers and headers various browsers *should* be OK with but aren't
+            #
+            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
+
+            #
+            # Tell client that this pre-flight info is valid for 20 days
+            #
+            add_header 'Access-Control-Max-Age' 1728000;
+            add_header 'Content-Type' 'text/plain charset=UTF-8';
+            add_header 'Content-Length' 0;
+            return 204;
+        }
+        if ($request_method = 'GET') {
+            add_header 'Access-Control-Allow-Origin' '*' always;
+            add_header 'Access-Control-Allow-Credentials' 'true' always;
+            add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
+            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
+        }
+    }
+
    location / {
        root   /usr/share/nginx/html;
        index  index.html;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -7,43 +7,43 @@
    "@blackbox-vision/react-qr-reader": "^5.0.0",
    "@chainlink/contracts": "^0.4.0",
    "@craco/craco": "^6.4.3",
-    "@fontsource/fira-code": "^4.5.5",
-    "@fontsource/roboto": "^4.5.3",
-    "@fontsource/roboto-mono": "^4.5.3",
-    "@fontsource/space-grotesk": "^4.5.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.17",
-    "@headlessui/react": "^1.4.3",
-    "@testing-library/jest-dom": "^5.16.2",
+    "@fontsource/fira-code": "^4.5.8",
+    "@fontsource/roboto": "^4.5.5",
+    "@fontsource/roboto-mono": "^4.5.5",
+    "@fontsource/space-grotesk": "^4.5.5",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@headlessui/react": "^1.5.0",
+    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.24",
    "@types/node": "^16.11.14",
-    "@types/react": "^17.0.39",
+    "@types/react": "^17.0.43",
    "@types/react-blockies": "^1.4.1",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^17.0.14",
    "@types/react-highlight": "^0.12.5",
    "@types/react-syntax-highlighter": "^13.5.2",
    "chart.js": "^3.7.1",
-    "ethers": "^5.5.4",
-    "highlightjs-solidity": "^2.0.4",
+    "ethers": "^5.6.1",
+    "highlightjs-solidity": "^2.0.5",
    "react": "^17.0.2",
    "react-blockies": "^1.4.1",
    "react-chartjs-2": "^4.0.0",
    "react-dom": "^17.0.2",
    "react-error-boundary": "^3.1.4",
-    "react-helmet-async": "^1.1.2",
+    "react-helmet-async": "^1.2.3",
    "react-image": "^4.0.3",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.2.2",
    "react-scripts": "4.0.3",
-    "react-syntax-highlighter": "^15.4.5",
+    "react-syntax-highlighter": "^15.5.0",
    "serve": "^13.0.2",
-    "swr": "^1.2.1",
-    "typescript": "^4.5.5",
-    "use-keyboard-shortcut": "^1.1.3",
+    "swr": "^1.2.2",
+    "typescript": "^4.6.3",
+    "use-keyboard-shortcut": "^1.1.4",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
@ -52,8 +52,8 @@
    "test": "craco test",
    "eject": "react-scripts eject",
    "source-map-explorer": "source-map-explorer build/static/js/*.js",
-    "assets-start": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/signatures:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets -v$(pwd)/topic0/with_parameter_names:/usr/share/nginx/html/topic0/ -v$(pwd)/nginx/nginx.conf:/etc/nginx/nginx.conf -v$(pwd)/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine",
-    "assets-start-with-param-names": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/with_parameter_names:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets -v$(pwd)/topic0/with_parameter_names:/usr/share/nginx/html/topic0/ -v$(pwd)/nginx/nginx.conf:/etc/nginx/nginx.conf -v$(pwd)/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine",
+    "assets-start": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/signatures:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets/1 -v$(pwd)/topic0/with_parameter_names:/usr/share/nginx/html/topic0/ -v$(pwd)/chains/_data/chains:/usr/share/nginx/html/chains/ -v$(pwd)/nginx/nginx.conf:/etc/nginx/nginx.conf -v$(pwd)/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine",
+    "assets-start-with-param-names": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/with_parameter_names:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets/1 -v$(pwd)/topic0/with_parameter_names:/usr/share/nginx/html/topic0/ -v$(pwd)/chains/_data/chains:/usr/share/nginx/html/chains/ -v$(pwd)/nginx/nginx.conf:/etc/nginx/nginx.conf -v$(pwd)/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine",
    "assets-stop": "docker stop otterscan-assets",
    "docker-build": "DOCKER_BUILDKIT=1 docker build -t otterscan -f Dockerfile .",
    "docker-start": "docker run --rm -p 5000:80 --name otterscan -d otterscan",
@ -79,7 +79,7 @@
  },
  "devDependencies": {
    "autoprefixer": "^9.8.8",
-    "compress-create-react-app": "^1.1.3",
+    "compress-create-react-app": "^1.2.1",
    "postcss": "^7.0.39",
    "source-map-explorer": "^2.5.2",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6"
--- a/src/App.tsx
+++ b/src/App.tsx
@ -7,6 +7,7 @@ import ConnectionErrorPanel from "./ConnectionErrorPanel";
 import Footer from "./Footer";
 import { ConnectionStatus } from "./types";
 import { RuntimeContext, useRuntime } from "./useRuntime";
+import { ChainInfoContext, useChainInfoFromMetadataFile } from "./useChainInfo";

 const Block = React.lazy(
  () => import(/* webpackChunkName: "block", webpackPrefetch: true */ "./Block")
@ -40,39 +41,46 @@ const PageNotFound = React.lazy(

 const App = () => {
  const runtime = useRuntime();
+  const chainInfo = useChainInfoFromMetadataFile(runtime);

  return (
    <Suspense fallback={null}>
-      {runtime.connStatus !== ConnectionStatus.CONNECTED ? (
+      {runtime.connStatus !== ConnectionStatus.CONNECTED ||
+      chainInfo === undefined ? (
        <ConnectionErrorPanel
          connStatus={runtime.connStatus}
          config={runtime.config}
        />
      ) : (
        <RuntimeContext.Provider value={runtime}>
-          <div className="h-screen flex flex-col">
-            <WarningHeader />
-            <Router>
-              <Routes>
-                <Route index element={<Home />} />
-                <Route path="/special/london" element={<London />} />
-                <Route path="*" element={<Main />}>
-                  <Route path="block/:blockNumberOrHash" element={<Block />} />
-                  <Route
-                    path="block/:blockNumber/txs"
-                    element={<BlockTransactions />}
-                  />
-                  <Route path="tx/:txhash/*" element={<Transaction />} />
-                  <Route
-                    path="address/:addressOrName/*"
-                    element={<Address />}
-                  />
-                  <Route path="*" element={<PageNotFound />} />
-                </Route>
-              </Routes>
-            </Router>
-            <Footer />
-          </div>
+          <ChainInfoContext.Provider value={chainInfo}>
+            <div className="h-screen flex flex-col">
+              <WarningHeader />
+              <Router>
+                <Routes>
+                  <Route index element={<Home />} />
+                  <Route path="/special/london" element={<London />} />
+                  <Route path="*" element={<Main />}>
+                    <Route
+                      path="block/:blockNumberOrHash"
+                      element={<Block />}
+                    />
+                    <Route
+                      path="block/:blockNumber/txs"
+                      element={<BlockTransactions />}
+                    />
+                    <Route path="tx/:txhash/*" element={<Transaction />} />
+                    <Route
+                      path="address/:addressOrName/*"
+                      element={<Address />}
+                    />
+                    <Route path="*" element={<PageNotFound />} />
+                  </Route>
+                </Routes>
+              </Router>
+              <Footer />
+            </div>
+          </ChainInfoContext.Provider>
        </RuntimeContext.Provider>
      )}
    </Suspense>
--- a/src/Block.tsx
+++ b/src/Block.tsx
@ -9,6 +9,7 @@ import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import NavBlock from "./block/NavBlock";
 import ContentFrame from "./ContentFrame";
+import BlockNotFound from "./components/BlockNotFound";
 import InfoRow from "./components/InfoRow";
 import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
@ -25,7 +26,7 @@ import { useLatestBlockNumber } from "./useLatestBlock";
 import { blockTxsURL } from "./url";
 import { useBlockData } from "./useErigonHooks";
 import { useETHUSDOracle } from "./usePriceOracle";
-import BlockNotFound from "./components/BlockNotFound";
+import { useChainInfo } from "./useChainInfo";

 const Block: React.FC = () => {
  const { provider } = useContext(RuntimeContext);
@ -33,6 +34,7 @@ const Block: React.FC = () => {
  if (blockNumberOrHash === undefined) {
    throw new Error("blockNumberOrHash couldn't be undefined here");
  }
+  const { nativeName, nativeSymbol } = useChainInfo();

  const block = useBlockData(provider, blockNumberOrHash);
  useEffect(() => {
@ -144,7 +146,7 @@ const Block: React.FC = () => {
                    <span className="line-through">
                      <FormattedBalance value={burntFees} />
                    </span>{" "}
-                    Ether
+                    {nativeSymbol}
                  </span>
                </span>
              </div>
@ -163,7 +165,7 @@ const Block: React.FC = () => {
            {extraStr} (Hex:{" "}
            <span className="font-data break-all">{block.extraData}</span>)
          </InfoRow>
-          <InfoRow title="Ether Price">
+          <InfoRow title={`${nativeName} Price`}>
            <USDValue value={blockETHUSDPrice} />
          </InfoRow>
          <InfoRow title="Difficult">
--- a/src/PriceBox.tsx
+++ b/src/PriceBox.tsx
@ -7,12 +7,14 @@ import AggregatorV3Interface from "@chainlink/contracts/abi/v0.8/AggregatorV3Int
 import { RuntimeContext } from "./useRuntime";
 import { formatValue } from "./components/formatter";
 import { useLatestBlock } from "./useLatestBlock";
+import { useChainInfo } from "./useChainInfo";

 const ETH_FEED_DECIMALS = 8;

 // TODO: reduce duplication with useETHUSDOracle
 const PriceBox: React.FC = () => {
  const { provider } = useContext(RuntimeContext);
+  const { nativeSymbol } = useChainInfo();
  const latestBlock = useLatestBlock(provider);

  const maybeOutdated: boolean =
@ -80,9 +82,9 @@ const PriceBox: React.FC = () => {
          } font-sans text-xs text-gray-800`}
        >
          <span
-            title={`ETH/USD last updated at: ${latestPriceTimestamp?.toString()}`}
+            title={`${nativeSymbol}/USD last updated at: ${latestPriceTimestamp?.toString()}`}
          >
-            Eth: $<span className="font-balance">{latestPrice}</span>
+            {nativeSymbol}: $<span className="font-balance">{latestPrice}</span>
          </span>
          {latestGasData && (
            <>
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@ -23,42 +23,46 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
  t,
  tokenMeta,
  metadatas,
-}) => (
-  <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
-    <span className="text-gray-500">
-      <FontAwesomeIcon icon={faCaretRight} size="1x" />
-    </span>
-    <div className="grid grid-cols-7 gap-x-1 w-full">
-      <div className="col-span-2 flex space-x-1">
-        <span className="font-bold">From</span>
-        <TransactionAddress
-          address={t.from}
-          addressCtx={AddressContext.FROM}
-          metadata={metadatas[t.from]}
-        />
-      </div>
-      <div className="col-span-2 flex space-x-1">
-        <span className="font-bold">To</span>
-        <TransactionAddress
-          address={t.to}
-          addressCtx={AddressContext.TO}
-          metadata={metadatas[t.to]}
-        />
-      </div>
-      <div className="col-span-3 flex space-x-1">
-        <span className="font-bold">For</span>
-        <span>
-          <ValueHighlighter value={t.value}>
-            <FormattedBalance
-              value={t.value}
-              decimals={tokenMeta?.decimals ?? 0}
-            />
-          </ValueHighlighter>
-        </span>
-        <TransactionAddress address={t.token} metadata={metadatas[t.token]} />
+}) => {
+  return (
+    <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
+      <span className="text-gray-500">
+        <FontAwesomeIcon icon={faCaretRight} size="1x" />
+      </span>
+      <div className="grid grid-cols-7 gap-x-1 w-full">
+        <div className="col-span-2 flex space-x-1">
+          <span className="font-bold">From</span>
+          <TransactionAddress
+            address={t.from}
+            addressCtx={AddressContext.FROM}
+            metadata={metadatas[t.from]}
+            showCodeIndicator
+          />
+        </div>
+        <div className="col-span-2 flex space-x-1">
+          <span className="font-bold">To</span>
+          <TransactionAddress
+            address={t.to}
+            addressCtx={AddressContext.TO}
+            metadata={metadatas[t.to]}
+            showCodeIndicator
+          />
+        </div>
+        <div className="col-span-3 flex space-x-1">
+          <span className="font-bold">For</span>
+          <span>
+            <ValueHighlighter value={t.value}>
+              <FormattedBalance
+                value={t.value}
+                decimals={tokenMeta?.decimals ?? 0}
+              />
+            </ValueHighlighter>
+          </span>
+          <TransactionAddress address={t.token} metadata={metadatas[t.token]} />
+        </div>
      </div>
    </div>
-  </div>
-);
+  );
+};

 export default React.memo(TokenTransferItem);
--- a/src/TransactionPageContent.tsx
+++ b/src/TransactionPageContent.tsx
@ -9,6 +9,7 @@ import { RuntimeContext } from "./useRuntime";
 import { useInternalOperations, useTxData } from "./useErigonHooks";
 import { SelectionContext, useSelection } from "./useSelection";
 import { SelectedTransactionContext } from "./useSelectedTransaction";
+import { BlockNumberContext } from "./useBlockTagContext";
 import { useETHUSDOracle } from "./usePriceOracle";
 import { useAppConfigContext } from "./useAppConfig";
 import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify";
@ -74,56 +75,60 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({

  return (
    <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=".">Overview</NavTab>
-                {txData.confirmedData?.blockNumber !== undefined && (
-                  <NavTab href="logs">
-                    Logs
-                    {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
-                  </NavTab>
-                )}
-                <NavTab href="trace">Trace</NavTab>
-              </Tab.List>
-            </Tab.Group>
-            <React.Suspense fallback={null}>
-              <Routes>
-                <Route
-                  index
-                  element={
-                    <Details
-                      txData={txData}
-                      txDesc={txDesc}
-                      toMetadata={metadata}
-                      userDoc={metadata?.output.userdoc}
-                      devDoc={metadata?.output.devdoc}
-                      internalOps={internalOps}
-                      sendsEthToMiner={sendsEthToMiner}
-                      ethUSDPrice={blockETHUSDPrice}
-                    />
-                  }
-                />
-                <Route
-                  path="logs"
-                  element={<Logs txData={txData} metadata={metadata} />}
-                />
-                <Route path="trace" element={<Trace txData={txData} />} />
-              </Routes>
-            </React.Suspense>
-          </SelectionContext.Provider>
-        )}
-      </StandardFrame>
+      <BlockNumberContext.Provider value={txData?.confirmedData?.blockNumber}>
+        <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=".">Overview</NavTab>
+                  {txData.confirmedData?.blockNumber !== undefined && (
+                    <NavTab href="logs">
+                      Logs
+                      {txData &&
+                        ` (${txData.confirmedData?.logs?.length ?? 0})`}
+                    </NavTab>
+                  )}
+                  <NavTab href="trace">Trace</NavTab>
+                </Tab.List>
+              </Tab.Group>
+              <React.Suspense fallback={null}>
+                <Routes>
+                  <Route
+                    index
+                    element={
+                      <Details
+                        txData={txData}
+                        txDesc={txDesc}
+                        toMetadata={metadata}
+                        userDoc={metadata?.output.userdoc}
+                        devDoc={metadata?.output.devdoc}
+                        internalOps={internalOps}
+                        sendsEthToMiner={sendsEthToMiner}
+                        ethUSDPrice={blockETHUSDPrice}
+                      />
+                    }
+                  />
+                  <Route
+                    path="logs"
+                    element={<Logs txData={txData} metadata={metadata} />}
+                  />
+                  <Route path="trace" element={<Trace txData={txData} />} />
+                </Routes>
+              </React.Suspense>
+            </SelectionContext.Provider>
+          )}
+        </StandardFrame>
+      </BlockNumberContext.Provider>
    </SelectedTransactionContext.Provider>
  );
 };
--- a/src/address/AddressTransactionResults.tsx
+++ b/src/address/AddressTransactionResults.tsx
@ -20,6 +20,7 @@ import { useParams, useSearchParams } from "react-router-dom";
 import { ChecksummedAddress, ProcessedTransaction } from "../types";
 import { useContractsMetadata } from "../hooks";
 import { useAddressBalance, useContractCreator } from "../useErigonHooks";
+import { BlockNumberContext } from "../useBlockTagContext";

 type AddressTransactionResultsProps = {
  address: ChecksummedAddress;
@ -133,34 +134,39 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
  return (
    <ContentFrame tabs>
      <SelectionContext.Provider value={selectionCtx}>
-        {balance && (
-          <InfoRow title="Balance">
-            <div className="space-x-2">
-              <TransactionValue value={balance} />
-              {!balance.isZero() && priceMap["latest"] !== undefined && (
-                <span className="px-2 border-green-200 border rounded-lg bg-green-100 text-green-600">
-                  <ETH2USDValue
-                    ethAmount={balance}
-                    eth2USDValue={priceMap["latest"]}
+        <BlockNumberContext.Provider value="latest">
+          {balance && (
+            <InfoRow title="Balance">
+              <div className="space-x-2">
+                <TransactionValue value={balance} />
+                {!balance.isZero() && priceMap["latest"] !== undefined && (
+                  <span className="px-2 border-green-200 border rounded-lg bg-green-100 text-green-600">
+                    <ETH2USDValue
+                      ethAmount={balance}
+                      eth2USDValue={priceMap["latest"]}
+                    />
+                  </span>
+                )}
+              </div>
+            </InfoRow>
+          )}
+          {creator && (
+            <InfoRow title="Contract creator">
+              <div className="flex divide-x-2 divide-dotted divide-gray-300">
+                <div className="flex items-baseline space-x-2 -ml-1 mr-3">
+                  <TransactionAddress
+                    address={creator.creator}
+                    showCodeIndicator
                  />
-                </span>
-              )}
-            </div>
-          </InfoRow>
-        )}
-        {creator && (
-          <InfoRow title="Contract creator">
-            <div className="flex divide-x-2 divide-dotted divide-gray-300">
-              <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-                <TransactionAddress address={creator.creator} />
-                <Copy value={creator.creator} />
+                  <Copy value={creator.creator} />
+                </div>
+                <div className="flex items-baseline pl-3">
+                  <TransactionLink txHash={creator.hash} />
+                </div>
              </div>
-              <div className="flex items-baseline pl-3">
-                <TransactionLink txHash={creator.hash} />
-              </div>
-            </div>
-          </InfoRow>
-        )}
+            </InfoRow>
+          )}
+        </BlockNumberContext.Provider>
        <NavBar address={address} page={page} controller={controller} />
        <ResultHeader
          feeDisplay={feeDisplay}
--- a/src/api/address-resolver/address-resolver.ts
+++ b/src/api/address-resolver/address-resolver.ts
@ -9,6 +9,7 @@ export interface IAddressResolver<T> {
 }

 export type ResolvedAddressRenderer<T> = (
+  chainId: number,
  address: string,
  resolvedAddress: T,
  linkable: boolean,
--- a/src/api/address-resolver/hardcoded-addresses/1.json
+++ b/src/api/address-resolver/hardcoded-addresses/1.json
@ -46,6 +46,7 @@
  "0x610B717796ad172B316836AC95a2ffad065CeaB4": "Tornado Cash: 1 WBTC",
  "0xbB93e510BbCD0B7beb5A853875f9eC60275CF498": "Tornado Cash: 10 WBTC",
  "0x94A1B5CdB22c43faab4AbEb5c74999895464Ddaf": "Tornado Cash: Old Proxy",
+  "0xCa0840578f57fE71599D29375e16783424023357": "Tornado Cash: Nova",
  "0x56Eddb7aa87536c09CCc2793473599fD21A8b17F": "Binance",
  "0x9696f59E4d72E237BE84fFD425DCaD154Bf96976": "Binance"
 }
--- a/src/components/AddressOrENSName.tsx
+++ b/src/components/AddressOrENSName.tsx
@ -1,48 +0,0 @@
-import React, { useContext } from "react";
-import PlainAddress from "./PlainAddress";
-import { resolverRendererRegistry } from "../api/address-resolver";
-import { useResolvedAddress } from "../useResolvedAddresses";
-import { RuntimeContext } from "../useRuntime";
-import { ChecksummedAddress } from "../types";
-
-type AddressOrENSNameProps = {
-  address: ChecksummedAddress;
-  selectedAddress?: string;
-  dontOverrideColors?: boolean;
-};
-
-const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
-  address,
-  selectedAddress,
-  dontOverrideColors,
-}) => {
-  const { provider } = useContext(RuntimeContext);
-  const resolvedAddress = useResolvedAddress(provider, address);
-  const linkable = address !== selectedAddress;
-
-  if (!resolvedAddress) {
-    return (
-      <PlainAddress
-        address={address}
-        linkable={linkable}
-        dontOverrideColors={dontOverrideColors}
-      />
-    );
-  }
-
-  const [resolver, resolvedName] = resolvedAddress;
-  const renderer = resolverRendererRegistry.get(resolver);
-  if (renderer === undefined) {
-    return (
-      <PlainAddress
-        address={address}
-        linkable={linkable}
-        dontOverrideColors={dontOverrideColors}
-      />
-    );
-  }
-
-  return renderer(address, resolvedName, linkable, !!dontOverrideColors);
-};
-
-export default AddressOrENSName;
--- a/src/components/AddressOrENSNameInvalidNonce.tsx
+++ b/src/components/AddressOrENSNameInvalidNonce.tsx
@ -1,7 +1,7 @@
 import React from "react";
 import StandardSubtitle from "../StandardSubtitle";
 import ContentFrame from "../ContentFrame";
-import AddressOrENSName from "./AddressOrENSName";
+import DecoratedAddressLink from "./DecoratedAddressLink";

 type AddressOrENSNameInvalidNonceProps = {
  addressOrENSName: string;
@ -15,7 +15,7 @@ const AddressOrENSNameInvalidNonce: React.FC<
    <StandardSubtitle>Transaction Details</StandardSubtitle>
    <ContentFrame>
      <div className="flex py-4 text-sm">
-        <AddressOrENSName address={addressOrENSName} />
+        <DecoratedAddressLink address={addressOrENSName} />
        <span>: no transaction found for nonce="{nonce}".</span>
      </div>
    </ContentFrame>
--- a/src/components/AddressOrENSNameNoTx.tsx
+++ b/src/components/AddressOrENSNameNoTx.tsx
@ -1,7 +1,7 @@
 import React from "react";
 import StandardSubtitle from "../StandardSubtitle";
 import ContentFrame from "../ContentFrame";
-import AddressOrENSName from "./AddressOrENSName";
+import DecoratedAddressLink from "./DecoratedAddressLink";

 type AddressOrENSNameNoTxProps = {
  addressOrENSName: string;
@ -14,7 +14,7 @@ const AddressOrENSNameNoTx: React.FC<AddressOrENSNameNoTxProps> = ({
    <StandardSubtitle>Transaction Details</StandardSubtitle>
    <ContentFrame>
      <div className="flex py-4 text-sm">
-        <AddressOrENSName address={addressOrENSName} />
+        <DecoratedAddressLink address={addressOrENSName} />
        <span>: no outbound transactions found.</span>
      </div>
    </ContentFrame>
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { NavLink } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
@ -6,21 +6,25 @@ import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
 import { faMoneyBillAlt } from "@fortawesome/free-solid-svg-icons/faMoneyBillAlt";
 import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
 import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
-import AddressOrENSName from "./AddressOrENSName";
 import SourcifyLogo from "../sourcify/SourcifyLogo";
-import { AddressContext, ZERO_ADDRESS } from "../types";
+import PlainAddress from "./PlainAddress";
 import { Metadata } from "../sourcify/useSourcify";
+import { RuntimeContext } from "../useRuntime";
+import { useResolvedAddress } from "../useResolvedAddresses";
+import { AddressContext, ChecksummedAddress, ZERO_ADDRESS } from "../types";
+import { resolverRendererRegistry } from "../api/address-resolver";

 type DecoratedAddressLinkProps = {
-  address: string;
-  selectedAddress?: string;
-  addressCtx?: AddressContext;
-  creation?: boolean;
-  miner?: boolean;
-  selfDestruct?: boolean;
-  txFrom?: boolean;
-  txTo?: boolean;
+  address: ChecksummedAddress;
+  selectedAddress?: ChecksummedAddress | undefined;
+  addressCtx?: AddressContext | undefined;
+  creation?: boolean | undefined;
+  miner?: boolean | undefined;
+  selfDestruct?: boolean | undefined;
+  txFrom?: boolean | undefined;
+  txTo?: boolean | undefined;
  metadata?: Metadata | null | undefined;
+  eoa?: boolean | undefined;
 };

 const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
@ -33,6 +37,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
  txFrom,
  txTo,
  metadata,
+  eoa,
 }) => {
  const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
  const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
@ -80,13 +85,84 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
          <SourcifyLogo />
        </NavLink>
      )}
-      <AddressOrENSName
+      <ResolvedAddress
        address={address}
        selectedAddress={selectedAddress}
        dontOverrideColors={mint || burn}
      />
+      {!mint && !burn && (
+        <>
+          {eoa === true && (
+            <AddressLegend title="Externally owned account">
+              [EOA]
+            </AddressLegend>
+          )}
+          {eoa === false && (
+            <AddressLegend title="Contract account">[C]</AddressLegend>
+          )}
+        </>
+      )}
    </div>
  );
 };

+type ResolvedAddressProps = {
+  address: ChecksummedAddress;
+  selectedAddress?: ChecksummedAddress | undefined;
+  dontOverrideColors?: boolean;
+};
+
+const ResolvedAddress: React.FC<ResolvedAddressProps> = ({
+  address,
+  selectedAddress,
+  dontOverrideColors,
+}) => {
+  const { provider } = useContext(RuntimeContext);
+  const resolvedAddress = useResolvedAddress(provider, address);
+  const linkable = address !== selectedAddress;
+
+  if (!provider || !resolvedAddress) {
+    return (
+      <PlainAddress
+        address={address}
+        linkable={linkable}
+        dontOverrideColors={dontOverrideColors}
+      />
+    );
+  }
+
+  const [resolver, resolvedName] = resolvedAddress;
+  const renderer = resolverRendererRegistry.get(resolver);
+  if (renderer === undefined) {
+    return (
+      <PlainAddress
+        address={address}
+        linkable={linkable}
+        dontOverrideColors={dontOverrideColors}
+      />
+    );
+  }
+
+  return renderer(
+    provider.network.chainId,
+    address,
+    resolvedName,
+    linkable,
+    !!dontOverrideColors
+  );
+};
+
+type AddressLegendProps = {
+  title: string;
+};
+
+const AddressLegend: React.FC<AddressLegendProps> = ({ title, children }) => (
+  <span
+    className="text-xs text-gray-400 text-opacity-70 not-italic"
+    title={title}
+  >
+    {children}
+  </span>
+);
+
 export default React.memo(DecoratedAddressLink);
--- a/src/components/ENSName.tsx
+++ b/src/components/ENSName.tsx
@ -59,6 +59,7 @@ const Content: React.FC<ContentProps> = ({ linkable, name }) => (
 );

 export const ensRenderer: ResolvedAddressRenderer<string> = (
+  chainId,
  address,
  resolvedAddress,
  linkable,
--- a/src/components/InternalCreate.tsx
+++ b/src/components/InternalCreate.tsx
@ -22,7 +22,8 @@ const InternalCreate: React.FC<InternalCreateProps> = ({ internalOp }) => (
      </AddressHighlighter>
    </div>
    <span className="flex items-baseline text-gray-400">
-      (Creator: <TransactionAddress address={internalOp.from} />)
+      (Creator:{" "}
+      <TransactionAddress address={internalOp.from} showCodeIndicator />)
    </span>
  </div>
 );
--- a/src/components/InternalSelfDestruct.tsx
+++ b/src/components/InternalSelfDestruct.tsx
@ -4,8 +4,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
-import { TransactionData, InternalOperation } from "../types";
 import TransactionAddress from "./TransactionAddress";
+import { useChainInfo } from "../useChainInfo";
+import { TransactionData, InternalOperation } from "../types";

 type InternalSelfDestructProps = {
  txData: TransactionData;
@ -16,6 +17,7 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
  txData,
  internalOp,
 }) => {
+  const { nativeSymbol } = useChainInfo();
  const toMiner =
    txData.confirmedData?.miner !== undefined &&
    internalOp.to === txData.confirmedData.miner;
@ -43,7 +45,9 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
          <span className="text-gray-500">
            <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
          </span>
-          <span>{formatEther(internalOp.value)} Ether</span>
+          <span>
+            {formatEther(internalOp.value)} {nativeSymbol}
+          </span>
          <div className="flex items-baseline">
            <span className="text-gray-500">To</span>
            <AddressHighlighter address={internalOp.to}>
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@ -1,9 +1,12 @@
-import React from "react";
+import React, { useContext } 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 { useHasCode } from "../useErigonHooks";
+import { useChainInfo } from "../useChainInfo";
 import { TransactionData, InternalOperation } from "../types";

 type InternalTransferProps = {
@ -15,6 +18,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
  txData,
  internalOp,
 }) => {
+  const { nativeSymbol } = useChainInfo();
  const fromMiner =
    txData.confirmedData?.miner !== undefined &&
    internalOp.from === txData.confirmedData.miner;
@ -22,12 +26,26 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
    txData.confirmedData?.miner !== undefined &&
    internalOp.to === txData.confirmedData.miner;

+  const { provider } = useContext(RuntimeContext);
+  const fromHasCode = useHasCode(
+    provider,
+    internalOp.from,
+    txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
+  );
+  const toHasCode = useHasCode(
+    provider,
+    internalOp.to,
+    txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
+  );
+
  return (
    <div className="flex items-baseline space-x-1 whitespace-nowrap">
      <span className="text-gray-500">
        <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
      </span>
-      <span>{formatEther(internalOp.value)} Ether</span>
+      <span>
+        {formatEther(internalOp.value)} {nativeSymbol}
+      </span>
      <div className="flex items-baseline">
        <span className="text-gray-500">From</span>
        <AddressHighlighter address={internalOp.from}>
@ -41,6 +59,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
              miner={fromMiner}
              txFrom={internalOp.from === txData.from}
              txTo={internalOp.from === txData.to}
+              eoa={fromHasCode === undefined ? undefined : !fromHasCode}
            />
          </div>
        </AddressHighlighter>
@ -58,6 +77,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
              miner={toMiner}
              txFrom={internalOp.to === txData.from}
              txTo={internalOp.to === txData.to}
+              eoa={toHasCode === undefined ? undefined : !toHasCode}
            />
          </div>
        </AddressHighlighter>
--- a/src/components/PlainString.tsx
+++ b/src/components/PlainString.tsx
@ -37,6 +37,7 @@ const PlainString: React.FC<PlainStringProps> = ({
 };

 export const plainStringRenderer: ResolvedAddressRenderer<string> = (
+  chainId,
  address,
  resolvedAddress,
  linkable,
--- a/src/components/TokenLogo.tsx
+++ b/src/components/TokenLogo.tsx
@ -7,16 +7,17 @@ import { RuntimeContext } from "../useRuntime";
 import { ChecksummedAddress } from "../types";

 type TokenLogoProps = {
+  chainId: number;
  address: ChecksummedAddress;
  name: string;
 };

-const TokenLogo: React.FC<TokenLogoProps> = ({ address, name }) => {
+const TokenLogo: React.FC<TokenLogoProps> = ({ chainId, address, name }) => {
  const { config } = useContext(RuntimeContext);

  const srcList: string[] = [];
  if (config) {
-    srcList.push(tokenLogoURL(config.assetsURLPrefix ?? "", address));
+    srcList.push(tokenLogoURL(config.assetsURLPrefix ?? "", chainId, address));
  }
  const { src, isLoading } = useImage({ srcList, useSuspense: false });

--- a/src/components/TokenName.tsx
+++ b/src/components/TokenName.tsx
@ -5,6 +5,7 @@ import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolve
 import { TokenMeta } from "../types";

 type TokenNameProps = {
+  chainId: number;
  address: string;
  name: string;
  symbol: string;
@ -13,6 +14,7 @@ type TokenNameProps = {
 };

 const TokenName: React.FC<TokenNameProps> = ({
+  chainId,
  address,
  name,
  symbol,
@ -29,6 +31,7 @@ const TokenName: React.FC<TokenNameProps> = ({
        title={`${name} (${symbol}): ${address}`}
      >
        <Content
+          chainId={chainId}
          address={address}
          linkable={true}
          name={name}
@ -43,12 +46,19 @@ const TokenName: React.FC<TokenNameProps> = ({
      className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
      title={`${name} (${symbol}): ${address}`}
    >
-      <Content address={address} linkable={false} name={name} symbol={symbol} />
+      <Content
+        chainId={chainId}
+        address={address}
+        linkable={false}
+        name={name}
+        symbol={symbol}
+      />
    </div>
  );
 };

 type ContentProps = {
+  chainId: number;
  address: string;
  name: string;
  symbol: string;
@ -56,6 +66,7 @@ type ContentProps = {
 };

 const Content: React.FC<ContentProps> = ({
+  chainId,
  address,
  name,
  symbol,
@ -65,7 +76,7 @@ const Content: React.FC<ContentProps> = ({
    <div
      className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
    >
-      <TokenLogo address={address} name={name} />
+      <TokenLogo chainId={chainId} address={address} name={name} />
    </div>
    <span className="truncate">
      {name} ({symbol})
@ -74,12 +85,14 @@ const Content: React.FC<ContentProps> = ({
 );

 export const tokenRenderer: ResolvedAddressRenderer<TokenMeta> = (
+  chainId,
  address,
  tokenMeta,
  linkable,
  dontOverrideColors
 ) => (
  <TokenName
+    chainId={chainId}
    address={address}
    name={tokenMeta.name}
    symbol={tokenMeta.symbol}
--- a/src/components/TransactionAddress.tsx
+++ b/src/components/TransactionAddress.tsx
@ -1,25 +1,42 @@
-import React from "react";
+import React, { useContext } from "react";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { useSelectedTransaction } from "../useSelectedTransaction";
-import { AddressContext } from "../types";
+import { useBlockNumberContext } from "../useBlockTagContext";
+import { RuntimeContext } from "../useRuntime";
+import { useHasCode } from "../useErigonHooks";
 import { Metadata } from "../sourcify/useSourcify";
+import { AddressContext, ChecksummedAddress } from "../types";

 type TransactionAddressProps = {
-  address: string;
+  address: ChecksummedAddress;
  addressCtx?: AddressContext | undefined;
  metadata?: Metadata | null | undefined;
+  showCodeIndicator?: boolean;
 };

 const TransactionAddress: React.FC<TransactionAddressProps> = ({
  address,
  addressCtx,
  metadata,
+  showCodeIndicator = false,
 }) => {
  const txData = useSelectedTransaction();
  // TODO: push down creation coloring logic into DecoratedAddressLink
  const creation = address === txData?.confirmedData?.createdContractAddress;

+  const { provider } = useContext(RuntimeContext);
+  const blockNumber = useBlockNumberContext();
+  const toHasCode = useHasCode(
+    provider,
+    address,
+    blockNumber !== undefined
+      ? blockNumber === "latest"
+        ? "latest"
+        : blockNumber - 1
+      : undefined
+  );
+
  return (
    <AddressHighlighter address={address}>
      <DecoratedAddressLink
@ -30,6 +47,11 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
        txTo={address === txData?.to || creation}
        creation={creation}
        metadata={metadata}
+        eoa={
+          showCodeIndicator && blockNumber !== undefined
+            ? !toHasCode
+            : undefined
+        }
      />
    </AddressHighlighter>
  );
--- a/src/components/TransactionValue.tsx
+++ b/src/components/TransactionValue.tsx
@ -1,12 +1,11 @@
 import React from "react";
 import { BigNumber } from "@ethersproject/bignumber";
+import { useChainInfo } from "../useChainInfo";
 import { formatValue } from "./formatter";

 type TransactionValueProps = {
  value: BigNumber;
-  decimals?: number;
  hideUnit?: boolean;
-  unitName?: string;
 };

 /**
@ -21,19 +20,18 @@ type TransactionValueProps = {
 */
 const TransactionValue: React.FC<TransactionValueProps> = ({
  value,
-  decimals = 18,
  hideUnit,
-  unitName = "ETH",
 }) => {
-  const formattedValue = formatValue(value, decimals);
+  const { nativeSymbol, nativeDecimals } = useChainInfo();
+  const formattedValue = formatValue(value, nativeDecimals);

  return (
    <span
      className={`text-sm ${value.isZero() ? "text-gray-400" : ""}`}
-      title={`${formattedValue} ${unitName}`}
+      title={`${formattedValue} ${nativeSymbol}`}
    >
      <span className={`font-balance`}>{formattedValue}</span>
-      {!hideUnit && ` ${unitName}`}
+      {!hideUnit && ` ${nativeSymbol}`}
    </span>
  );
 };
--- a/src/components/USDValue.tsx
+++ b/src/components/USDValue.tsx
@ -1,6 +1,7 @@
 import React from "react";
 import { BigNumber, FixedNumber } from "@ethersproject/bignumber";
 import { commify } from "@ethersproject/units";
+import { useChainInfo } from "../useChainInfo";

 const ETH_FEED_DECIMALS = 8;

@ -8,22 +9,28 @@ type USDValueProps = {
  value: BigNumber | undefined;
 };

-const USDValue: React.FC<USDValueProps> = ({ value }) => (
-  <span className="text-sm">
-    {value ? (
-      <>
-        $
-        <span className="font-balance">
-          {commify(
-            FixedNumber.fromValue(value, ETH_FEED_DECIMALS).round(2).toString()
-          )}
-        </span>{" "}
-        <span className="text-xs text-gray-500">/ ETH</span>
-      </>
-    ) : (
-      "N/A"
-    )}
-  </span>
-);
+const USDValue: React.FC<USDValueProps> = ({ value }) => {
+  const { nativeSymbol } = useChainInfo();
+
+  return (
+    <span className="text-sm">
+      {value ? (
+        <>
+          $
+          <span className="font-balance">
+            {commify(
+              FixedNumber.fromValue(value, ETH_FEED_DECIMALS)
+                .round(2)
+                .toString()
+            )}
+          </span>{" "}
+          <span className="text-xs text-gray-500">/ {nativeSymbol}</span>
+        </>
+      ) : (
+        "N/A"
+      )}
+    </span>
+  );
+};

 export default React.memo(USDValue);
--- a/src/components/UniswapV1ExchangeName.tsx
+++ b/src/components/UniswapV1ExchangeName.tsx
@ -9,6 +9,7 @@ import {
 } from "../api/address-resolver/UniswapV1Resolver";

 type UniswapV1ExchangeNameProps = {
+  chainId: number;
  address: string;
  token: UniswapV1TokenMeta;
  linkable: boolean;
@ -16,6 +17,7 @@ type UniswapV1ExchangeNameProps = {
 };

 const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
+  chainId,
  address,
  token,
  linkable,
@ -32,10 +34,11 @@ const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
      >
        <span>Uniswap V1 LP:</span>
        <Content
-          linkable={true}
+          chainId={chainId}
          address={token.address}
          name={token.name}
          symbol={token.symbol}
+          linkable
        />
      </NavLink>
    );
@ -48,7 +51,7 @@ const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
    >
      <span>Uniswap V1 LP:</span>
      <Content
-        linkable={false}
+        chainId={chainId}
        address={token.address}
        name={token.name}
        symbol={token.symbol}
@ -58,13 +61,15 @@ const UniswapV1ExchangeName: React.FC<UniswapV1ExchangeNameProps> = ({
 };

 type ContentProps = {
-  linkable: boolean;
+  chainId: number;
  address: ChecksummedAddress;
  name: string;
  symbol: string;
+  linkable?: boolean;
 };

 const Content: React.FC<ContentProps> = ({
+  chainId,
  address,
  name,
  symbol,
@ -74,20 +79,22 @@ const Content: React.FC<ContentProps> = ({
    <div
      className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
    >
-      <TokenLogo address={address} name={name} />
+      <TokenLogo chainId={chainId} address={address} name={name} />
    </div>
    <span>{symbol}</span>
  </>
 );

-export const uniswapV1PairRenderer: ResolvedAddressRenderer<UniswapV1PairMeta> =
-  (address, tokenMeta, linkable, dontOverrideColors) => (
-    <UniswapV1ExchangeName
-      address={address}
-      token={tokenMeta.token}
-      linkable={linkable}
-      dontOverrideColors={dontOverrideColors}
-    />
-  );
+export const uniswapV1PairRenderer: ResolvedAddressRenderer<
+  UniswapV1PairMeta
+> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
+  <UniswapV1ExchangeName
+    chainId={chainId}
+    address={address}
+    token={tokenMeta.token}
+    linkable={linkable}
+    dontOverrideColors={dontOverrideColors}
+  />
+);

 export default UniswapV1ExchangeName;
--- a/src/components/UniswapV2PairName.tsx
+++ b/src/components/UniswapV2PairName.tsx
@ -9,6 +9,7 @@ import {
 import { ChecksummedAddress } from "../types";

 type UniswapV2PairNameProps = {
+  chainId: number;
  address: string;
  token0: UniswapV2TokenMeta;
  token1: UniswapV2TokenMeta;
@ -17,6 +18,7 @@ type UniswapV2PairNameProps = {
 };

 const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
+  chainId,
  address,
  token0,
  token1,
@ -34,17 +36,19 @@ const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
      >
        <span>Uniswap V2 LP:</span>
        <Content
-          linkable={true}
+          chainId={chainId}
          address={token0.address}
          name={token0.name}
          symbol={token0.symbol}
+          linkable
        />
        <span>/</span>
        <Content
-          linkable={true}
+          chainId={chainId}
          address={token1.address}
          name={token1.name}
          symbol={token1.symbol}
+          linkable
        />
      </NavLink>
    );
@ -57,14 +61,14 @@ const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
    >
      <span>Uniswap V2 LP:</span>
      <Content
-        linkable={false}
+        chainId={chainId}
        address={token0.address}
        name={token0.name}
        symbol={token0.symbol}
      />
      <span>/</span>
      <Content
-        linkable={false}
+        chainId={chainId}
        address={token1.address}
        name={token1.name}
        symbol={token1.symbol}
@ -74,13 +78,15 @@ const UniswapV2PairName: React.FC<UniswapV2PairNameProps> = ({
 };

 type ContentProps = {
-  linkable: boolean;
+  chainId: number;
  address: ChecksummedAddress;
  name: string;
  symbol: string;
+  linkable?: boolean;
 };

 const Content: React.FC<ContentProps> = ({
+  chainId,
  address,
  name,
  symbol,
@ -90,21 +96,23 @@ const Content: React.FC<ContentProps> = ({
    <div
      className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
    >
-      <TokenLogo address={address} name={name} />
+      <TokenLogo chainId={chainId} address={address} name={name} />
    </div>
    <span>{symbol}</span>
  </>
 );

-export const uniswapV2PairRenderer: ResolvedAddressRenderer<UniswapV2PairMeta> =
-  (address, tokenMeta, linkable, dontOverrideColors) => (
-    <UniswapV2PairName
-      address={address}
-      token0={tokenMeta.token0}
-      token1={tokenMeta.token1}
-      linkable={linkable}
-      dontOverrideColors={dontOverrideColors}
-    />
-  );
+export const uniswapV2PairRenderer: ResolvedAddressRenderer<
+  UniswapV2PairMeta
+> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
+  <UniswapV2PairName
+    chainId={chainId}
+    address={address}
+    token0={tokenMeta.token0}
+    token1={tokenMeta.token1}
+    linkable={linkable}
+    dontOverrideColors={dontOverrideColors}
+  />
+);

 export default UniswapV2PairName;
--- a/src/components/UniswapV3PoolName.tsx
+++ b/src/components/UniswapV3PoolName.tsx
@ -9,6 +9,7 @@ import {
 import { ChecksummedAddress } from "../types";

 type UniswapV3PoolNameProps = {
+  chainId: number;
  address: string;
  token0: UniswapV3TokenMeta;
  token1: UniswapV3TokenMeta;
@ -18,6 +19,7 @@ type UniswapV3PoolNameProps = {
 };

 const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
+  chainId,
  address,
  token0,
  token1,
@ -38,17 +40,19 @@ const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
      >
        <span>Uniswap V3 LP:</span>
        <Content
-          linkable={true}
+          chainId={chainId}
          address={token0.address}
          name={token0.name}
          symbol={token0.symbol}
+          linkable
        />
        <span>/</span>
        <Content
-          linkable={true}
+          chainId={chainId}
          address={token1.address}
          name={token1.name}
          symbol={token1.symbol}
+          linkable
        />
        <span>/ {fee / 10000}%</span>
      </NavLink>
@ -64,14 +68,14 @@ const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
    >
      <span>Uniswap V3 LP:</span>
      <Content
-        linkable={false}
+        chainId={chainId}
        address={token0.address}
        name={token0.name}
        symbol={token0.symbol}
      />
      <span>/</span>
      <Content
-        linkable={false}
+        chainId={chainId}
        address={token1.address}
        name={token1.name}
        symbol={token1.symbol}
@ -82,13 +86,15 @@ const UniswapV3PairName: React.FC<UniswapV3PoolNameProps> = ({
 };

 type ContentProps = {
-  linkable: boolean;
+  chainId: number;
  address: ChecksummedAddress;
  name: string;
  symbol: string;
+  linkable?: boolean;
 };

 const Content: React.FC<ContentProps> = ({
+  chainId,
  address,
  name,
  symbol,
@ -98,22 +104,24 @@ const Content: React.FC<ContentProps> = ({
    <div
      className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
    >
-      <TokenLogo address={address} name={name} />
+      <TokenLogo chainId={chainId} address={address} name={name} />
    </div>
    <span>{symbol}</span>
  </>
 );

-export const uniswapV3PairRenderer: ResolvedAddressRenderer<UniswapV3PairMeta> =
-  (address, tokenMeta, linkable, dontOverrideColors) => (
-    <UniswapV3PairName
-      address={address}
-      token0={tokenMeta.token0}
-      token1={tokenMeta.token1}
-      fee={tokenMeta.fee}
-      linkable={linkable}
-      dontOverrideColors={dontOverrideColors}
-    />
-  );
+export const uniswapV3PairRenderer: ResolvedAddressRenderer<
+  UniswapV3PairMeta
+> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
+  <UniswapV3PairName
+    chainId={chainId}
+    address={address}
+    token0={tokenMeta.token0}
+    token1={tokenMeta.token1}
+    fee={tokenMeta.fee}
+    linkable={linkable}
+    dontOverrideColors={dontOverrideColors}
+  />
+);

 export default UniswapV3PairName;
--- a/src/search/TransactionItem.tsx
+++ b/src/search/TransactionItem.tsx
@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { BlockTag } from "@ethersproject/abstract-provider";
 import { BigNumber } from "@ethersproject/bignumber";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -16,6 +16,8 @@ import TransactionDirection, {
 import TransactionValue from "../components/TransactionValue";
 import { ChecksummedAddress, ProcessedTransaction } from "../types";
 import { FeeDisplay } from "./useFeeToggler";
+import { RuntimeContext } from "../useRuntime";
+import { useHasCode } from "../useErigonHooks";
 import { formatValue } from "../components/formatter";
 import ETH2USDValue from "../components/ETH2USDValue";
 import { Metadata } from "../sourcify/useSourcify";
@ -35,6 +37,13 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
  priceMap,
  metadatas,
 }) => {
+  const { provider } = useContext(RuntimeContext);
+  const toHasCode = useHasCode(
+    provider,
+    tx.to ?? undefined,
+    tx.blockNumber - 1
+  );
+
  let direction: Direction | undefined;
  if (selectedAddress) {
    if (tx.from === selectedAddress && tx.to === selectedAddress) {
@ -107,6 +116,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                selectedAddress={selectedAddress}
                miner={tx.miner === tx.to}
                metadata={metadatas[tx.to]}
+                eoa={toHasCode === undefined ? undefined : !toHasCode}
              />
            </AddressHighlighter>
          ) : (
@ -116,6 +126,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                selectedAddress={selectedAddress}
                creation
                metadata={metadatas[tx.createdContractAddress!]}
+                eoa={false}
              />
            </AddressHighlighter>
          )}
--- a/src/special/london/BlockRow.tsx
+++ b/src/special/london/BlockRow.tsx
@ -3,8 +3,9 @@ import { FixedNumber } from "@ethersproject/bignumber";
 import { commify, formatEther } from "@ethersproject/units";
 import BlockLink from "../../components/BlockLink";
 import TimestampAge from "../../components/TimestampAge";
-import { ExtendedBlock } from "../../useErigonHooks";
 import Blip from "./Blip";
+import { ExtendedBlock } from "../../useErigonHooks";
+import { useChainInfo } from "../../useChainInfo";

 const ELASTICITY_MULTIPLIER = 2;

@ -15,6 +16,7 @@ type BlockRowProps = {
 };

 const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
+  const { nativeSymbol } = useChainInfo();
  const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
  const burntFees =
    block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@ -53,10 +55,11 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
        </div>
      </div>
      <div className="text-right col-span-2">
-        {commify(formatEther(totalReward))} Ether
+        {commify(formatEther(totalReward))} {nativeSymbol}
      </div>
      <div className="text-right col-span-2 line-through text-orange-500">
-        {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))} Ether
+        {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))}{" "}
+        {nativeSymbol}
      </div>
      <div className="text-right text-gray-400">
        <TimestampAge now={now / 1000} timestamp={block.timestamp} />
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@ -46,6 +46,7 @@ import { DevDoc, Metadata, useError, UserDoc } from "../sourcify/useSourcify";
 import { RuntimeContext } from "../useRuntime";
 import { useContractsMetadata } from "../hooks";
 import { useTransactionError } from "../useErigonHooks";
+import { useChainInfo } from "../useChainInfo";

 type DetailsProps = {
  txData: TransactionData;
@ -86,6 +87,7 @@ const Details: React.FC<DetailsProps> = ({
  const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined;

  const { provider } = useContext(RuntimeContext);
+  const { nativeName, nativeSymbol } = useChainInfo();
  const addresses = useMemo(() => {
    const _addresses: ChecksummedAddress[] = [];
    if (txData.to) {
@ -264,6 +266,7 @@ const Details: React.FC<DetailsProps> = ({
            <TransactionAddress
              address={txData.to}
              metadata={metadatas?.[txData.to]}
+              showCodeIndicator
            />
            <Copy value={txData.to} />
          </div>
@ -312,7 +315,7 @@ const Details: React.FC<DetailsProps> = ({
        </InfoRow>
      )}
      <InfoRow title="Value">
-        <FormattedBalance value={txData.value} /> Ether{" "}
+        <FormattedBalance value={txData.value} /> {nativeSymbol}{" "}
        {!txData.value.isZero() && ethUSDPrice && (
          <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
            <ETH2USDValue ethAmount={txData.value} eth2USDValue={ethUSDPrice} />
@ -335,7 +338,8 @@ const Details: React.FC<DetailsProps> = ({
      {txData.type === 2 && (
        <>
          <InfoRow title="Max Priority Fee Per Gas">
-            <FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
+            <FormattedBalance value={txData.maxPriorityFeePerGas!} />{" "}
+            {nativeSymbol} (
            <FormattedBalance
              value={txData.maxPriorityFeePerGas!}
              decimals={9}
@ -343,7 +347,7 @@ const Details: React.FC<DetailsProps> = ({
            Gwei)
          </InfoRow>
          <InfoRow title="Max Fee Per Gas">
-            <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
+            <FormattedBalance value={txData.maxFeePerGas!} /> {nativeSymbol} (
            <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
          </InfoRow>
        </>
@ -352,7 +356,7 @@ const Details: React.FC<DetailsProps> = ({
        <InfoRow title="Gas Price">
          <div className="flex items-baseline space-x-1">
            <span>
-              <FormattedBalance value={txData.gasPrice} /> Ether (
+              <FormattedBalance value={txData.gasPrice} /> {nativeSymbol} (
              <FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
            </span>
            {sendsEthToMiner && (
@ -403,7 +407,8 @@ const Details: React.FC<DetailsProps> = ({
          <InfoRow title="Transaction Fee">
            <div className="space-y-3">
              <div>
-                <FormattedBalance value={txData.confirmedData.fee} /> Ether{" "}
+                <FormattedBalance value={txData.confirmedData.fee} />{" "}
+                {nativeSymbol}{" "}
                {ethUSDPrice && (
                  <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
                    <ETH2USDValue
@ -416,7 +421,7 @@ const Details: React.FC<DetailsProps> = ({
              {hasEIP1559 && <RewardSplit txData={txData} />}
            </div>
          </InfoRow>
-          <InfoRow title="Ether Price">
+          <InfoRow title={`${nativeName} Price`}>
            <USDValue value={ethUSDPrice} />
          </InfoRow>
        </>
--- a/src/transaction/RewardSplit.tsx
+++ b/src/transaction/RewardSplit.tsx
@ -3,14 +3,16 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
 import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
 import FormattedBalance from "../components/FormattedBalance";
-import { TransactionData } from "../types";
 import PercentageGauge from "../components/PercentageGauge";
+import { TransactionData } from "../types";
+import { useChainInfo } from "../useChainInfo";

 type RewardSplitProps = {
  txData: TransactionData;
 };

 const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
+  const { nativeSymbol } = useChainInfo();
  const paidFees = txData.gasPrice.mul(txData.confirmedData!.gasUsed);
  const burntFees = txData.confirmedData!.blockBaseFeePerGas!.mul(
    txData.confirmedData!.gasUsed
@ -39,7 +41,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
              <span className="line-through">
                <FormattedBalance value={burntFees} />
              </span>{" "}
-              Ether
+              {nativeSymbol}
            </span>
          </span>
        </div>
@ -55,7 +57,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
              <FontAwesomeIcon icon={faCoins} size="1x" />
            </span>
            <span>
-              <FormattedBalance value={minerReward} /> Ether
+              <FormattedBalance value={minerReward} /> {nativeSymbol}
            </span>
          </span>
        </div>
--- a/src/transaction/TraceInput.tsx
+++ b/src/transaction/TraceInput.tsx
@ -12,12 +12,14 @@ import {
  use4Bytes,
  useTransactionDescription,
 } from "../use4Bytes";
+import { useChainInfo } from "../useChainInfo";

 type TraceInputProps = {
  t: TraceEntry;
 };

 const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
+  const { nativeSymbol } = useChainInfo();
  const raw4Bytes = extract4Bytes(t.input);
  const fourBytes = use4Bytes(raw4Bytes);
  const sigText =
@ -47,7 +49,7 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
        ) : (
          <>
            <span>
-              <TransactionAddress address={t.to} />
+              <TransactionAddress address={t.to} showCodeIndicator />
            </span>
            {t.type !== "CREATE" && t.type !== "CREATE2" && (
              <>
@ -55,7 +57,9 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
                <FunctionSignature callType={t.type} sig={sigText} />
                {t.value && !t.value.isZero() && (
                  <span className="text-red-700 whitespace-nowrap">
-                    {"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
+                    {"{"}value: <FormattedBalance value={t.value} />{" "}
+                    {nativeSymbol}
+                    {"}"}
                  </span>
                )}
                <span className="whitespace-nowrap">
--- a/src/transaction/decoder/AddressDecoder.tsx
+++ b/src/transaction/decoder/AddressDecoder.tsx
@ -1,14 +1,15 @@
 import React from "react";
 import TransactionAddress from "../../components/TransactionAddress";
 import Copy from "../../components/Copy";
+import { ChecksummedAddress } from "../../types";

 type AddressDecoderProps = {
-  r: string;
+  r: ChecksummedAddress;
 };

 const AddressDecoder: React.FC<AddressDecoderProps> = ({ r }) => (
  <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-    <TransactionAddress address={r} />
+    <TransactionAddress address={r} showCodeIndicator />
    <Copy value={r} />
  </div>
 );
--- a/src/url.ts
+++ b/src/url.ts
@ -11,8 +11,14 @@ export const topic0URL = (assetsURLPrefix: string, topic0: string): string =>

 export const tokenLogoURL = (
  assetsURLPrefix: string,
+  chainId: number,
  address: string
-): string => `${assetsURLPrefix}/assets/${address}/logo.png`;
+): string => `${assetsURLPrefix}/assets/${chainId}/${address}/logo.png`;
+
+export const chainInfoURL = (
+  assetsURLPrefix: string,
+  chainId: number
+): string => `${assetsURLPrefix}/chains/eip155-${chainId}.json`;

 export const blockURL = (blockNum: BlockTag) => `/block/${blockNum}`;

@ -67,4 +73,4 @@ export const sourcifySourceFile = (
  )}/contracts/full_match/${chainId}/${address}/sources/${filepath}`;

 export const openInRemixURL = (checksummedAddress: string, networkId: number) =>
-  `https://remix.ethereum.org/#call=source-verification//fetchAndSave//${checksummedAddress}//${networkId}`;
+  `https://remix.ethereum.org/#activate=sourcify&call=sourcify//fetchAndSave//${checksummedAddress}//${networkId}`;
--- a/src/useBlockTagContext.tsx
+++ b/src/useBlockTagContext.tsx
@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+/**
+ * This context means child components have a temporal context expressed in
+ * terms of BlockTag.
+ *
+ * One obvious example is: child components want to show an UI indicator if
+ * the address is an EOA or contract. But if this address is currently a
+ * contract and it is an UI element of an existing transaction, it may be that
+ * at the time (block) the transaction happened it was still an EOA (create2),
+ * so it should be displayed as an EOA.
+ */
+export const BlockNumberContext = createContext<number | "latest" | undefined>(
+  undefined
+);
+
+export const useBlockNumberContext = () => useContext(BlockNumberContext);
--- a/src/useChainInfo.ts
+++ b/src/useChainInfo.ts
@ -0,0 +1,59 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { chainInfoURL } from "./url";
+import { OtterscanRuntime } from "./useRuntime";
+
+export type ChainInfo = {
+  nativeName: string;
+  nativeSymbol: string;
+  nativeDecimals: number;
+};
+
+export const defaultChainInfo: ChainInfo = {
+  nativeName: "Ether",
+  nativeSymbol: "ETH",
+  nativeDecimals: 18,
+};
+
+export const ChainInfoContext = createContext<ChainInfo | undefined>(undefined);
+
+export const useChainInfoFromMetadataFile = (
+  runtime: OtterscanRuntime | undefined
+): ChainInfo | undefined => {
+  const assetsURLPrefix = runtime?.config?.assetsURLPrefix;
+  const chainId = runtime?.provider?.network.chainId;
+
+  const [chainInfo, setChainInfo] = useState<ChainInfo | undefined>(undefined);
+
+  useEffect(() => {
+    if (chainId === undefined) {
+      setChainInfo(undefined);
+      return;
+    }
+
+    const readChainInfo = async () => {
+      const res = await fetch(chainInfoURL(assetsURLPrefix!, chainId));
+      if (!res.ok) {
+        setChainInfo(defaultChainInfo);
+        return;
+      }
+      const info = await res.json();
+
+      setChainInfo({
+        nativeName: info.nativeCurrency.name,
+        nativeDecimals: info.nativeCurrency.decimals,
+        nativeSymbol: info.nativeCurrency.symbol,
+      });
+    };
+    readChainInfo();
+  }, [assetsURLPrefix, chainId]);
+
+  return chainInfo;
+};
+
+export const useChainInfo = (): ChainInfo => {
+  const chainInfo = useContext(ChainInfoContext);
+  if (chainInfo === undefined) {
+    throw new Error("no chain info");
+  }
+  return chainInfo;
+};
--- a/src/useErigonHooks.ts
+++ b/src/useErigonHooks.ts
@ -1,5 +1,9 @@
 import { useState, useEffect } from "react";
-import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider";
+import {
+  Block,
+  BlockWithTransactions,
+  BlockTag,
+} from "@ethersproject/abstract-provider";
 import { JsonRpcProvider } from "@ethersproject/providers";
 import { getAddress } from "@ethersproject/address";
 import { Contract } from "@ethersproject/contracts";
@ -7,6 +11,7 @@ import { defaultAbiCoder } from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
 import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
 import useSWR, { useSWRConfig } from "swr";
+import useSWRImmutable from "swr/immutable";
 import { getInternalOperations } from "./nodeFunctions";
 import {
  TokenMetas,
@ -679,3 +684,43 @@ export const useAddressBalance = (

  return balance;
 };
+
+/**
+ * This is a generic fetch for SWR, where the key is an array, whose
+ * element 0 is the JSON-RPC method, and the remaining are the method
+ * arguments.
+ */
+export const providerFetcher =
+  (provider: JsonRpcProvider | undefined) =>
+  async (...key: any[]): Promise<any | undefined> => {
+    if (provider === undefined) {
+      return undefined;
+    }
+    for (const a of key) {
+      if (a === undefined) {
+        return undefined;
+      }
+    }
+
+    const method = key[0];
+    const args = key.slice(1);
+    const result = await provider.send(method, args);
+    // console.log(`providerFetcher: ${method} ${args} === ${result}`);
+    return result;
+  };
+
+export const useHasCode = (
+  provider: JsonRpcProvider | undefined,
+  address: ChecksummedAddress | undefined,
+  blockTag: BlockTag = "latest"
+): boolean | undefined => {
+  const fetcher = providerFetcher(provider);
+  const { data, error } = useSWRImmutable(
+    ["ots_hasCode", address, blockTag],
+    fetcher
+  );
+  if (error) {
+    return undefined;
+  }
+  return data as boolean | undefined;
+};
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 0e2488c4b4c366c0ed54d5d85b2feaa0f0940b05
+Subproject commit b8d1c58acfd93b1b698fe5854f2c09bff70e9fdf
				`@ -0,0 +1 @@`
				`Subproject commit af79eb7387b2a4f747bf31cb318d4f1db43c4d84`