Merge branch 'feature/address-eoa-contract-decoration' into develop

src/TokenTransferItem.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
 import TransactionAddress from "./components/TransactionAddress";
@@ -9,13 +9,17 @@ import {
   ChecksummedAddress,
   TokenMeta,
   TokenTransfer,
+  TransactionData,
 } from "./types";
+import { RuntimeContext } from "./useRuntime";
+import { useHasCode } from "./useErigonHooks";
 import { Metadata } from "./sourcify/useSourcify";
 
 type TokenTransferItemProps = {
   t: TokenTransfer;
   tokenMeta?: TokenMeta | null | undefined;
   metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
+  txData: TransactionData;
 };
 
 // TODO: handle partial
@@ -23,7 +27,21 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
   t,
   tokenMeta,
   metadatas,
-}) => (
+  txData,
+}) => {
+  const { provider } = useContext(RuntimeContext);
+  const fromHasCode = useHasCode(
+    provider,
+    t.from,
+    txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
+  );
+  const toHasCode = useHasCode(
+    provider,
+    t.to,
+    txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
+  );
+
+  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 +53,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             address={t.from}
             addressCtx={AddressContext.FROM}
             metadata={metadatas[t.from]}
+            eoa={fromHasCode === undefined ? undefined : !fromHasCode}
           />
         </div>
         <div className="col-span-2 flex space-x-1">
@@ -43,6 +62,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             address={t.to}
             addressCtx={AddressContext.TO}
             metadata={metadatas[t.to]}
+            eoa={toHasCode === undefined ? undefined : !toHasCode}
           />
         </div>
         <div className="col-span-3 flex space-x-1">
@@ -59,6 +79,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
         </div>
       </div>
     </div>
-);
+  );
+};
 
 export default React.memo(TokenTransferItem);

src/components/AddressOrENSName.tsx

@@ -1,54 +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 (!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
-  );
-};
-
-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/InternalTransfer.tsx

@@ -1,9 +1,11 @@
-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 { TransactionData, InternalOperation } from "../types";
 
 type InternalTransferProps = {
@@ -22,6 +24,18 @@ 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">
@@ -41,6 +55,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 +73,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/TransactionAddress.tsx

@@ -9,12 +9,14 @@ type TransactionAddressProps = {
   address: string;
   addressCtx?: AddressContext | undefined;
   metadata?: Metadata | null | undefined;
+  eoa?: boolean | undefined;
 };
 
 const TransactionAddress: React.FC<TransactionAddressProps> = ({
   address,
   addressCtx,
   metadata,
+  eoa,
 }) => {
   const txData = useSelectedTransaction();
   // TODO: push down creation coloring logic into DecoratedAddressLink
@@ -30,6 +32,7 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
         txTo={address === txData?.to || creation}
         creation={creation}
         metadata={metadata}
+        eoa={eoa}
       />
     </AddressHighlighter>
   );

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/transaction/Details.tsx

@@ -45,7 +45,7 @@ import {
 import { DevDoc, Metadata, useError, UserDoc } from "../sourcify/useSourcify";
 import { RuntimeContext } from "../useRuntime";
 import { useContractsMetadata } from "../hooks";
-import { useTransactionError } from "../useErigonHooks";
+import { useHasCode, useTransactionError } from "../useErigonHooks";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -118,6 +118,12 @@ const Details: React.FC<DetailsProps> = ({
     : undefined;
   const [expanded, setExpanded] = useState<boolean>(false);
 
+  const toHasCode = useHasCode(
+    provider,
+    txData.to,
+    txData.confirmedData ? txData.confirmedData.blockNumber - 1 : undefined
+  );
+
   return (
     <ContentFrame tabs>
       <InfoRow title="Transaction Hash">
@@ -264,6 +270,7 @@ const Details: React.FC<DetailsProps> = ({
             <TransactionAddress
               address={txData.to}
               metadata={metadatas?.[txData.to]}
+              eoa={toHasCode === undefined ? undefined : !toHasCode}
             />
             <Copy value={txData.to} />
           </div>
@@ -307,6 +314,7 @@ const Details: React.FC<DetailsProps> = ({
               t={t}
               tokenMeta={txData.tokenMetas[t.token]}
               metadatas={metadatas}
+              txData={txData}
             />
           ))}
         </InfoRow>

src/transaction/Trace.tsx

@@ -24,7 +24,12 @@ const Trace: React.FC<TraceProps> = ({ txData }) => {
             </div>
             <div className="ml-5 space-y-3 self-stretch">
               {traces.map((t, i, a) => (
-                <TraceItem key={i} t={t} last={i === a.length - 1} />
+                <TraceItem
+                  key={i}
+                  t={t}
+                  last={i === a.length - 1}
+                  txData={txData}
+                />
               ))}
             </div>
           </>

src/transaction/TraceInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
 import TransactionAddress from "../components/TransactionAddress";
@@ -6,18 +6,21 @@ import FormattedBalance from "../components/FormattedBalance";
 import FunctionSignature from "./FunctionSignature";
 import InputDecoder from "./decoder/InputDecoder";
 import ExpanderSwitch from "../components/ExpanderSwitch";
-import { TraceEntry } from "../useErigonHooks";
+import { RuntimeContext } from "../useRuntime";
+import { TraceEntry, useHasCode } from "../useErigonHooks";
 import {
   extract4Bytes,
   use4Bytes,
   useTransactionDescription,
 } from "../use4Bytes";
+import { TransactionData } from "../types";
 
 type TraceInputProps = {
   t: TraceEntry;
+  txData: TransactionData;
 };
 
-const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
+const TraceInput: React.FC<TraceInputProps> = ({ t, txData }) => {
   const raw4Bytes = extract4Bytes(t.input);
   const fourBytes = use4Bytes(raw4Bytes);
   const sigText =
@@ -32,6 +35,15 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
 
   const [expanded, setExpanded] = useState<boolean>(false);
 
+  const { provider } = useContext(RuntimeContext);
+  const toHasCode = useHasCode(
+    provider,
+    t.to,
+    txData.confirmedData !== undefined
+      ? txData.confirmedData.blockNumber - 1
+      : undefined
+  );
+
   return (
     <div
       className={`ml-5 border hover:border-gray-500 rounded px-1 py-0.5 ${
@@ -47,7 +59,10 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
         ) : (
           <>
             <span>
-              <TransactionAddress address={t.to} />
+              <TransactionAddress
+                address={t.to}
+                eoa={toHasCode === undefined ? undefined : !toHasCode}
+              />
             </span>
             {t.type !== "CREATE" && t.type !== "CREATE2" && (
               <>

src/transaction/TraceItem.tsx

@@ -5,13 +5,15 @@ import { faMinusSquare } from "@fortawesome/free-regular-svg-icons/faMinusSquare
 import { Switch } from "@headlessui/react";
 import { TraceGroup } from "../useErigonHooks";
 import TraceInput from "./TraceInput";
+import { TransactionData } from "../types";
 
 type TraceItemProps = {
   t: TraceGroup;
   last: boolean;
+  txData: TransactionData;
 };
 
-const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
+const TraceItem: React.FC<TraceItemProps> = ({ t, last, txData }) => {
   const [expanded, setExpanded] = useState<boolean>(true);
 
   return (
@@ -33,7 +35,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
             />
           </Switch>
         )}
-        <TraceInput t={t} />
+        <TraceInput t={t} txData={txData} />
       </div>
       {t.children && (
         <div
@@ -41,7 +43,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
             expanded ? "" : "hidden"
           }`}
         >
-          <TraceChildren c={t.children} />
+          <TraceChildren c={t.children} txData={txData} />
         </div>
       )}
     </>
@@ -50,16 +52,19 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
 
 type TraceChildrenProps = {
   c: TraceGroup[];
+  txData: TransactionData;
 };
 
-const TraceChildren: React.FC<TraceChildrenProps> = React.memo(({ c }) => {
+const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
+  ({ c, txData }) => {
     return (
       <>
         {c.map((tc, i, a) => (
-        <TraceItem key={i} t={tc} last={i === a.length - 1} />
+          <TraceItem key={i} t={tc} last={i === a.length - 1} txData={txData} />
         ))}
       </>
     );
-});
+  }
+);
 
 export default TraceItem;

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