Merge branch 'release/v2022.03.02-otterscan'

.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

.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

4bytes

@@ -1 +1 @@
-Subproject commit 0ee722e516c91dc6a3de01c26ea06955123eeddb
+Subproject commit 9603b20bd08ef0089a5fdca385afd3a3251d662c

Dockerfile

@@ -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/
+COPY trustwallet/blockchains/ethereum/assets /assets/1/
-RUN find . -name logo.png | parallel magick convert {} -filter Lanczos -resize 32x32 {}
+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/

chains

@@ -0,0 +1 @@
+Subproject commit af79eb7387b2a4f747bf31cb318d4f1db43c4d84

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;

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/fira-code": "^4.5.8",
-    "@fontsource/roboto": "^4.5.3",
+    "@fontsource/roboto": "^4.5.5",
-    "@fontsource/roboto-mono": "^4.5.3",
+    "@fontsource/roboto-mono": "^4.5.5",
-    "@fontsource/space-grotesk": "^4.5.3",
+    "@fontsource/space-grotesk": "^4.5.5",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.17",
+    "@fortawesome/react-fontawesome": "^0.1.18",
-    "@headlessui/react": "^1.4.3",
+    "@headlessui/react": "^1.5.0",
-    "@testing-library/jest-dom": "^5.16.2",
+    "@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",
+    "ethers": "^5.6.1",
-    "highlightjs-solidity": "^2.0.4",
+    "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",
+    "swr": "^1.2.2",
-    "typescript": "^4.5.5",
+    "typescript": "^4.6.3",
-    "use-keyboard-shortcut": "^1.1.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": "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 -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/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"

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,16 +41,19 @@ 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}>
+          <ChainInfoContext.Provider value={chainInfo}>
             <div className="h-screen flex flex-col">
               <WarningHeader />
               <Router>
@@ -57,7 +61,10 @@ const App = () => {
                   <Route index element={<Home />} />
                   <Route path="/special/london" element={<London />} />
                   <Route path="*" element={<Main />}>
-                  <Route path="block/:blockNumberOrHash" element={<Block />} />
+                    <Route
+                      path="block/:blockNumberOrHash"
+                      element={<Block />}
+                    />
                     <Route
                       path="block/:blockNumber/txs"
                       element={<BlockTransactions />}
@@ -73,6 +80,7 @@ const App = () => {
               </Router>
               <Footer />
             </div>
+          </ChainInfoContext.Provider>
         </RuntimeContext.Provider>
       )}
     </Suspense>

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

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 && (
             <>

src/TokenTransferItem.tsx

@@ -23,7 +23,8 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
   t,
   tokenMeta,
   metadatas,
-}) => (
+}) => {
+  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" />
@@ -35,6 +36,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             address={t.from}
             addressCtx={AddressContext.FROM}
             metadata={metadatas[t.from]}
+            showCodeIndicator
           />
         </div>
         <div className="col-span-2 flex space-x-1">
@@ -43,6 +45,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             address={t.to}
             addressCtx={AddressContext.TO}
             metadata={metadatas[t.to]}
+            showCodeIndicator
           />
         </div>
         <div className="col-span-3 flex space-x-1">
@@ -59,6 +62,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
         </div>
       </div>
     </div>
-);
+  );
+};
 
 export default React.memo(TokenTransferItem);

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,12 +75,14 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
 
   return (
     <SelectedTransactionContext.Provider value={txData}>
+      <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.
+                Transaction <span className="font-hash">{txHash}</span> not
+                found.
               </div>
             </ContentFrame>
           )}
@@ -91,7 +94,8 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
                   {txData.confirmedData?.blockNumber !== undefined && (
                     <NavTab href="logs">
                       Logs
-                    {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
+                      {txData &&
+                        ` (${txData.confirmedData?.logs?.length ?? 0})`}
                     </NavTab>
                   )}
                   <NavTab href="trace">Trace</NavTab>
@@ -124,6 +128,7 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
             </SelectionContext.Provider>
           )}
         </StandardFrame>
+      </BlockNumberContext.Provider>
     </SelectedTransactionContext.Provider>
   );
 };

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,6 +134,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
   return (
     <ContentFrame tabs>
       <SelectionContext.Provider value={selectionCtx}>
+        <BlockNumberContext.Provider value="latest">
           {balance && (
             <InfoRow title="Balance">
               <div className="space-x-2">
@@ -152,7 +154,10 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
             <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} />
+                  <TransactionAddress
+                    address={creator.creator}
+                    showCodeIndicator
+                  />
                   <Copy value={creator.creator} />
                 </div>
                 <div className="flex items-baseline pl-3">
@@ -161,6 +166,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
               </div>
             </InfoRow>
           )}
+        </BlockNumberContext.Provider>
         <NavBar address={address} page={page} controller={controller} />
         <ResultHeader
           feeDisplay={feeDisplay}

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,

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

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;

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>

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>

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;
+  address: ChecksummedAddress;
-  selectedAddress?: string;
+  selectedAddress?: ChecksummedAddress | undefined;
-  addressCtx?: AddressContext;
+  addressCtx?: AddressContext | undefined;
-  creation?: boolean;
+  creation?: boolean | undefined;
-  miner?: boolean;
+  miner?: boolean | undefined;
-  selfDestruct?: boolean;
+  selfDestruct?: boolean | undefined;
-  txFrom?: boolean;
+  txFrom?: boolean | undefined;
-  txTo?: boolean;
+  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);

src/components/ENSName.tsx

@@ -59,6 +59,7 @@ const Content: React.FC<ContentProps> = ({ linkable, name }) => (
 );
 
 export const ensRenderer: ResolvedAddressRenderer<string> = (
+  chainId,
   address,
   resolvedAddress,
   linkable,

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

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

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>

src/components/PlainString.tsx

@@ -37,6 +37,7 @@ const PlainString: React.FC<PlainStringProps> = ({
 };
 
 export const plainStringRenderer: ResolvedAddressRenderer<string> = (
+  chainId,
   address,
   resolvedAddress,
   linkable,

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

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}

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

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

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 }) => (
+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()
+              FixedNumber.fromValue(value, ETH_FEED_DECIMALS)
+                .round(2)
+                .toString()
             )}
           </span>{" "}
-        <span className="text-xs text-gray-500">/ ETH</span>
+          <span className="text-xs text-gray-500">/ {nativeSymbol}</span>
         </>
       ) : (
         "N/A"
       )}
     </span>
-);
+  );
+};
 
 export default React.memo(USDValue);

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

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

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,15 +104,17 @@ 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> =
+export const uniswapV3PairRenderer: ResolvedAddressRenderer<
-  (address, tokenMeta, linkable, dontOverrideColors) => (
+  UniswapV3PairMeta
+> = (chainId, address, tokenMeta, linkable, dontOverrideColors) => (
   <UniswapV3PairName
+    chainId={chainId}
     address={address}
     token0={tokenMeta.token0}
     token1={tokenMeta.token1}
@@ -114,6 +122,6 @@ export const uniswapV3PairRenderer: ResolvedAddressRenderer<UniswapV3PairMeta> =
     linkable={linkable}
     dontOverrideColors={dontOverrideColors}
   />
-  );
+);
 
 export default UniswapV3PairName;

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

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

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

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>

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

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

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

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

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

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

trustwallet

@@ -1 +1 @@
-Subproject commit 0e2488c4b4c366c0ed54d5d85b2feaa0f0940b05
+Subproject commit b8d1c58acfd93b1b698fe5854f2c09bff70e9fdf