Add contract creation tracing

src/components/InternalCreate.tsx

@@ -0,0 +1,46 @@
+import React, { useContext } from "react";
+import { ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleRight, faBomb } from "@fortawesome/free-solid-svg-icons";
+import AddressHighlighter from "./AddressHighlighter";
+import DecoratedAddressLink from "./DecoratedAddressLink";
+import { TransactionData, Transfer } from "../types";
+
+type InternalCreateProps = {
+  txData: TransactionData;
+  transfer: Transfer;
+};
+
+const InternalCreate: React.FC<InternalCreateProps> = ({
+  txData,
+  transfer,
+}) => {
+  return (
+    <>
+      <div className="flex items-baseline space-x-1 text-xs">
+        <span className="text-gray-500">
+          <FontAwesomeIcon icon={faAngleRight} size="1x" /> CREATE
+        </span>
+        <span>Contract</span>
+        <div className="flex items-baseline">
+          <AddressHighlighter address={transfer.to}>
+            <DecoratedAddressLink address={transfer.to} creation />
+          </AddressHighlighter>
+        </div>
+        <span className="flex items-baseline text-gray-400">
+          (Creator:{" "}
+          <AddressHighlighter address={transfer.from}>
+            <DecoratedAddressLink
+              address={transfer.from}
+              txFrom={transfer.from === txData.from}
+              txTo={transfer.from === txData.to}
+            />
+          </AddressHighlighter>
+          )
+        </span>
+      </div>
+    </>
+  );
+};
+
+export default React.memo(InternalCreate);

src/components/InternalOperation.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import InternalTransfer from "./InternalTransfer";
 import InternalSelfDestruct from "./InternalSelfDestruct";
+import InternalCreate from "./InternalCreate";
 import { TransactionData, Transfer, TransferType } from "../types";
 
 type InternalOperationProps = {
@@ -19,6 +20,10 @@ const InternalOperation: React.FC<InternalOperationProps> = ({
     {transfer.type === TransferType.SELF_DESTRUCT && (
       <InternalSelfDestruct txData={txData} transfer={transfer} />
     )}
+    {(transfer.type === TransferType.CREATE ||
+      transfer.type === TransferType.CREATE2) && (
+      <InternalCreate txData={txData} transfer={transfer} />
+    )}
   </>
 );
 

src/types.ts

@@ -75,6 +75,8 @@ export type From = {
 export enum TransferType {
   TRANSFER = 0,
   SELF_DESTRUCT = 1,
+  CREATE = 2,
+  CREATE2 = 3,
 }
 
 export type Transfer = {