Add contract creation display on transaction details page

src/Transaction.tsx

@@ -88,6 +88,7 @@ const Transaction: React.FC = () => {
         miner: _block.miner,
         from: _receipt.from,
         to: _receipt.to,
+        createdContractAddress: _receipt.contractAddress,
         value: _response.value,
         tokenTransfers,
         tokenMetas,

src/components/DecoratedAddressLink.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+  faStar,
   faMoneyBillAlt,
   faBurn,
   faCoins,
@@ -15,6 +16,7 @@ type DecoratedAddressLinkProps = {
   selectedAddress?: string;
   text?: string;
   addressCtx?: AddressContext;
+  creation?: boolean;
   miner?: boolean;
   selfDestruct?: boolean;
   txFrom?: boolean;
@@ -28,6 +30,7 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
   selectedAddress,
   text,
   addressCtx,
+  creation,
   miner,
   selfDestruct,
   txFrom,
@@ -45,6 +48,11 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
         burn ? "line-through text-orange-500 hover:text-orange-700" : ""
       } ${selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""}`}
     >
+      {creation && (
+        <span className="text-yellow-300" title="Contract creation">
+          <FontAwesomeIcon icon={faStar} size="1x" />
+        </span>
+      )}
       {mint && (
         <span className="text-green-500" title="Mint address">
           <FontAwesomeIcon icon={faMoneyBillAlt} size="1x" />

src/transaction/Details.tsx

@@ -73,17 +73,30 @@ const Details: React.FC<DetailsProps> = ({
         <Copy value={txData.from} />
       </div>
     </InfoRow>
-    <InfoRow title="Interacted With (To)">
+    <InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
-      <div className="flex items-baseline space-x-2 -ml-1">
+      {txData.to ? (
-        <AddressHighlighter address={txData.to}>
+        <div className="flex items-baseline space-x-2 -ml-1">
-          <DecoratedAddressLink
+          <AddressHighlighter address={txData.to}>
-            address={txData.to}
+            <DecoratedAddressLink
-            miner={txData.to === txData.miner}
+              address={txData.to}
-            txTo
+              miner={txData.to === txData.miner}
-          />
+              txTo
-        </AddressHighlighter>
+            />
-        <Copy value={txData.to} />
+          </AddressHighlighter>
-      </div>
+          <Copy value={txData.to} />
+        </div>
+      ) : (
+        <div className="flex items-baseline space-x-2 -ml-1">
+          <AddressHighlighter address={txData.createdContractAddress!}>
+            <DecoratedAddressLink
+              address={txData.createdContractAddress!}
+              creation
+              txTo
+            />
+          </AddressHighlighter>
+          <Copy value={txData.createdContractAddress!} />
+        </div>
+      )}
       {internalTransfers && (
         <div className="mt-2 space-y-1">
           {internalTransfers.map((t, i) => (

src/types.ts

@@ -44,6 +44,7 @@ export type TransactionData = {
   miner?: string;
   from: string;
   to: string;
+  createdContractAddress?: string;
   value: BigNumber;
   tokenTransfers: TokenTransfer[];
   tokenMetas: TokenMetas;