Extract TraceInput component

src/transaction/TraceInput.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import AddressHighlighter from "../components/AddressHighlighter";
+import DecoratedAddressLink from "../components/DecoratedAddressLink";
+import FormattedBalance from "../components/FormattedBalance";
+import FunctionSignature from "./FunctionSignature";
+import { TraceEntry } from "../useErigonHooks";
+import { TransactionData } from "../types";
+import { ResolvedAddresses } from "../api/address-resolver";
+import { extract4Bytes, FourBytesEntry } from "../use4Bytes";
+
+type TraceInputProps = {
+  t: TraceEntry;
+  txData: TransactionData;
+  fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
+  resolvedAddresses: ResolvedAddresses | undefined;
+};
+
+const TraceInput: React.FC<TraceInputProps> = ({
+  t,
+  txData,
+  fourBytesMap,
+  resolvedAddresses,
+}) => {
+  const raw4Bytes = extract4Bytes(t.input);
+  const sigText =
+    raw4Bytes === null
+      ? "<fallback>"
+      : fourBytesMap[raw4Bytes]?.name ?? raw4Bytes;
+
+  return (
+    <div className="ml-5 flex items-baseline border rounded px-1 py-px">
+      <span className="text-xs text-gray-400 lowercase">{t.type}</span>
+      <span>
+        <AddressHighlighter address={t.to}>
+          <DecoratedAddressLink
+            address={t.to}
+            miner={t.to === txData.confirmedData?.miner}
+            txFrom={t.to === txData.from}
+            txTo={t.to === txData.to}
+            resolvedAddresses={resolvedAddresses}
+          />
+        </AddressHighlighter>
+      </span>
+      <span>.</span>
+      <FunctionSignature callType={t.type} sig={sigText} />
+      {t.value && !t.value.isZero() && (
+        <span className="text-red-700 whitespace-nowrap">
+          {"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
+        </span>
+      )}
+      <span className="whitespace-nowrap">
+        ({t.input.length > 10 && <>input=[0x{t.input.slice(10)}]</>})
+      </span>
+    </div>
+  );
+};
+
+export default TraceInput;

src/transaction/TraceItem.tsx

@@ -3,14 +3,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlusSquare } from "@fortawesome/free-regular-svg-icons/faPlusSquare";
 import { faMinusSquare } from "@fortawesome/free-regular-svg-icons/faMinusSquare";
 import { Switch } from "@headlessui/react";
-import AddressHighlighter from "../components/AddressHighlighter";
-import DecoratedAddressLink from "../components/DecoratedAddressLink";
-import FormattedBalance from "../components/FormattedBalance";
-import FunctionSignature from "./FunctionSignature";
 import { TransactionData } from "../types";
-import { extract4Bytes, FourBytesEntry } from "../use4Bytes";
+import { FourBytesEntry } from "../use4Bytes";
 import { TraceGroup } from "../useErigonHooks";
 import { ResolvedAddresses } from "../api/address-resolver";
+import TraceInput from "./TraceInput";
 
 type TraceItemProps = {
   t: TraceGroup;
@@ -28,11 +25,6 @@ const TraceItem: React.FC<TraceItemProps> = ({
   resolvedAddresses,
 }) => {
   const [expanded, setExpanded] = useState<boolean>(true);
-  const raw4Bytes = extract4Bytes(t.input);
-  const sigText =
-    raw4Bytes === null
-      ? "<fallback>"
-      : fourBytesMap[raw4Bytes]?.name ?? raw4Bytes;
 
   return (
     <>
@@ -53,30 +45,12 @@ const TraceItem: React.FC<TraceItemProps> = ({
             />
           </Switch>
         )}
-        <div className="ml-5 flex items-baseline border rounded px-1 py-px">
+        <TraceInput
-          <span className="text-xs text-gray-400 lowercase">{t.type}</span>
+          t={t}
-          <span>
+          txData={txData}
-            <AddressHighlighter address={t.to}>
+          fourBytesMap={fourBytesMap}
-              <DecoratedAddressLink
-                address={t.to}
-                miner={t.to === txData.confirmedData?.miner}
-                txFrom={t.to === txData.from}
-                txTo={t.to === txData.to}
           resolvedAddresses={resolvedAddresses}
         />
-            </AddressHighlighter>
-          </span>
-          <span>.</span>
-          <FunctionSignature callType={t.type} sig={sigText} />
-          {t.value && !t.value.isZero() && (
-            <span className="text-red-700 whitespace-nowrap">
-              {"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
-            </span>
-          )}
-          <span className="whitespace-nowrap">
-            ({t.input.length > 10 && <>input=[0x{t.input.slice(10)}]</>})
-          </span>
-        </div>
       </div>
       {t.children && (
         <div