Add eoa/contract legend support to trace page

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 }) => {
-  return (
-    <>
-      {c.map((tc, i, a) => (
-        <TraceItem key={i} t={tc} last={i === a.length - 1} />
-      ))}
-    </>
-  );
-});
+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} txData={txData} />
+        ))}
+      </>
+    );
+  }
+);
 
 export default TraceItem;