Merge branch 'feature/contract-creation' into develop

src/BlockTransactions.tsx

@@ -57,6 +57,7 @@ const BlockTransactions: React.FC = () => {
             hash: t.hash,
             from: t.from,
             to: t.to,
+            createdContractAddress: _receipts[i].contractAddress,
             value: t.value,
             fee: provider.formatter
               .bigNumber(_receipts[i].gasUsed)

src/Transaction.tsx

@@ -10,7 +10,7 @@ import erc20 from "./erc20.json";
 import { TokenMetas, TokenTransfer, TransactionData } from "./types";
 import { RuntimeContext } from "./useRuntime";
 import { SelectionContext, useSelection } from "./useSelection";
-import { useInternalTransfers } from "./useErigonHooks";
+import { useInternalOperations } from "./useErigonHooks";
 
 const TRANSFER_TOPIC =
   "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
@@ -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,
@@ -105,19 +106,19 @@ const Transaction: React.FC = () => {
     readBlock();
   }, [provider, txhash]);
 
-  const intTransfers = useInternalTransfers(provider, txData);
+  const internalOps = useInternalOperations(provider, txData);
   const sendsEthToMiner = useMemo(() => {
-    if (!txData || !intTransfers) {
+    if (!txData || !internalOps) {
       return false;
     }
 
-    for (const t of intTransfers) {
+    for (const t of internalOps) {
       if (t.to === txData.miner) {
         return true;
       }
     }
     return false;
-  }, [txData, intTransfers]);
+  }, [txData, internalOps]);
 
   const selectionCtx = useSelection();
 
@@ -136,7 +137,7 @@ const Transaction: React.FC = () => {
             <Route path="/tx/:txhash/" exact>
               <Details
                 txData={txData}
-                internalTransfers={intTransfers}
+                internalOps={internalOps}
                 sendsEthToMiner={sendsEthToMiner}
               />
             </Route>

src/components/DecoratedAddressLink.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+  faStar,
+  faBomb,
   faMoneyBillAlt,
   faBurn,
   faCoins,
@@ -15,6 +17,7 @@ type DecoratedAddressLinkProps = {
   selectedAddress?: string;
   text?: string;
   addressCtx?: AddressContext;
+  creation?: boolean;
   miner?: boolean;
   selfDestruct?: boolean;
   txFrom?: boolean;
@@ -28,6 +31,7 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
   selectedAddress,
   text,
   addressCtx,
+  creation,
   miner,
   selfDestruct,
   txFrom,
@@ -45,6 +49,16 @@ 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>
+      )}
+      {selfDestruct && (
+        <span className="text-red-800" title="Self destruct">
+          <FontAwesomeIcon icon={faBomb} size="1x" />
+        </span>
+      )}
       {mint && (
         <span className="text-green-500" title="Mint address">
           <FontAwesomeIcon icon={faMoneyBillAlt} size="1x" />

src/components/InternalCreate.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
+import AddressHighlighter from "./AddressHighlighter";
+import DecoratedAddressLink from "./DecoratedAddressLink";
+import { TransactionData, InternalOperation } from "../types";
+
+type InternalCreateProps = {
+  txData: TransactionData;
+  internalOp: InternalOperation;
+};
+
+const InternalCreate: React.FC<InternalCreateProps> = ({
+  txData,
+  internalOp,
+}) => {
+  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={internalOp.to}>
+            <DecoratedAddressLink address={internalOp.to} creation />
+          </AddressHighlighter>
+        </div>
+        <span className="flex items-baseline text-gray-400">
+          (Creator:{" "}
+          <AddressHighlighter address={internalOp.from}>
+            <DecoratedAddressLink
+              address={internalOp.from}
+              txFrom={internalOp.from === txData.from}
+              txTo={internalOp.from === txData.to}
+            />
+          </AddressHighlighter>
+          )
+        </span>
+      </div>
+    </>
+  );
+};
+
+export default React.memo(InternalCreate);

src/components/InternalOperation.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import InternalTransfer from "./InternalTransfer";
-import InternalSelfDestruct from "./InternalSelfDestruct";
-import { TransactionData, Transfer, TransferType } from "../types";
-
-type InternalOperationProps = {
-  txData: TransactionData;
-  transfer: Transfer;
-};
-
-const InternalOperation: React.FC<InternalOperationProps> = ({
-  txData,
-  transfer,
-}) => (
-  <>
-    {transfer.type === TransferType.TRANSFER && (
-      <InternalTransfer txData={txData} transfer={transfer} />
-    )}
-    {transfer.type === TransferType.SELF_DESTRUCT && (
-      <InternalSelfDestruct txData={txData} transfer={transfer} />
-    )}
-  </>
-);
-
-export default React.memo(InternalOperation);

src/components/InternalSelfDestruct.tsx

@@ -1,66 +1,63 @@
 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 { faAngleRight } from "@fortawesome/free-solid-svg-icons";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { RuntimeContext } from "../useRuntime";
-import { TransactionData, Transfer } from "../types";
+import { TransactionData, InternalOperation } from "../types";
 
 const CHI_ADDRESS = "0x0000000000004946c0e9F43F4Dee607b0eF1fA1c";
 const GST2_ADDRESS = "0x0000000000b3F879cb30FE243b4Dfee438691c04";
 
 type InternalSelfDestructProps = {
   txData: TransactionData;
-  transfer: Transfer;
+  internalOp: InternalOperation;
 };
 
 const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
   txData,
-  transfer,
+  internalOp,
 }) => {
   const { provider } = useContext(RuntimeContext);
   const network = provider?.network;
 
-  const toMiner = txData.miner !== undefined && transfer.to === txData.miner;
+  const toMiner = txData.miner !== undefined && internalOp.to === txData.miner;
 
   return (
     <>
       <div className="flex items-baseline space-x-1 text-xs">
         <span className="text-gray-500">
-          <span className="text-red-900">
+          <FontAwesomeIcon icon={faAngleRight} size="1x" /> SELF DESTRUCT
-            <FontAwesomeIcon icon={faBomb} size="1x" />
-          </span>{" "}
-          SELF DESTRUCT
         </span>
         <span>Contract</span>
         <div className="flex items-baseline">
-          <AddressHighlighter address={transfer.from}>
+          <AddressHighlighter address={internalOp.from}>
-            <DecoratedAddressLink address={transfer.from} selfDestruct />
+            <DecoratedAddressLink address={internalOp.from} selfDestruct />
           </AddressHighlighter>
         </div>
-        {network?.chainId === 1 && transfer.to === CHI_ADDRESS && (
+        {network?.chainId === 1 && internalOp.to === CHI_ADDRESS && (
           <span className="text-gray-400">(Chi Gastoken)</span>
         )}
-        {network?.chainId === 1 && transfer.to === GST2_ADDRESS && (
+        {network?.chainId === 1 && internalOp.to === GST2_ADDRESS && (
           <span className="text-gray-400">(GST2 Gastoken)</span>
         )}
       </div>
-      {!transfer.value.isZero() && (
+      {!internalOp.value.isZero() && (
         <div className="ml-5 flex items-baseline space-x-1 text-xs">
           <span className="text-gray-500">
             <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
           </span>
-          <span>{ethers.utils.formatEther(transfer.value)} Ether</span>
+          <span>{ethers.utils.formatEther(internalOp.value)} Ether</span>
           <div className="flex items-baseline">
             <span className="text-gray-500">To</span>
-            <AddressHighlighter address={transfer.to}>
+            <AddressHighlighter address={internalOp.to}>
               <div
                 className={`flex items-baseline space-x-1 ${
                   toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
                 }`}
               >
-                <DecoratedAddressLink address={transfer.to} miner={toMiner} />
+                <DecoratedAddressLink address={internalOp.to} miner={toMiner} />
               </div>
             </AddressHighlighter>
           </div>

src/components/InternalTransactionOperation.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import InternalTransfer from "./InternalTransfer";
+import InternalSelfDestruct from "./InternalSelfDestruct";
+import InternalCreate from "./InternalCreate";
+import { TransactionData, InternalOperation, OperationType } from "../types";
+
+type InternalTransactionOperationProps = {
+  txData: TransactionData;
+  internalOp: InternalOperation;
+};
+
+const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> =
+  ({ txData, internalOp }) => (
+    <>
+      {internalOp.type === OperationType.TRANSFER && (
+        <InternalTransfer txData={txData} internalOp={internalOp} />
+      )}
+      {internalOp.type === OperationType.SELF_DESTRUCT && (
+        <InternalSelfDestruct txData={txData} internalOp={internalOp} />
+      )}
+      {(internalOp.type === OperationType.CREATE ||
+        internalOp.type === OperationType.CREATE2) && (
+        <InternalCreate txData={txData} internalOp={internalOp} />
+      )}
+    </>
+  );
+
+export default React.memo(InternalTransactionOperation);

src/components/InternalTransfer.tsx

@@ -4,57 +4,57 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
-import { TransactionData, Transfer } from "../types";
+import { TransactionData, InternalOperation } from "../types";
 
 type InternalTransferProps = {
   txData: TransactionData;
-  transfer: Transfer;
+  internalOp: InternalOperation;
 };
 
 const InternalTransfer: React.FC<InternalTransferProps> = ({
   txData,
-  transfer,
+  internalOp,
 }) => {
   const fromMiner =
-    txData.miner !== undefined && transfer.from === txData.miner;
+    txData.miner !== undefined && internalOp.from === txData.miner;
-  const toMiner = txData.miner !== undefined && transfer.to === txData.miner;
+  const toMiner = txData.miner !== undefined && internalOp.to === txData.miner;
 
   return (
     <div className="flex items-baseline space-x-1 text-xs">
       <span className="text-gray-500">
         <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
       </span>
-      <span>{ethers.utils.formatEther(transfer.value)} Ether</span>
+      <span>{ethers.utils.formatEther(internalOp.value)} Ether</span>
       <div className="flex items-baseline">
         <span className="text-gray-500">From</span>
-        <AddressHighlighter address={transfer.from}>
+        <AddressHighlighter address={internalOp.from}>
           <div
             className={`flex items-baseline space-x-1 ${
               fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
             }`}
           >
             <DecoratedAddressLink
-              address={transfer.from}
+              address={internalOp.from}
               miner={fromMiner}
-              txFrom={transfer.from === txData.from}
+              txFrom={internalOp.from === txData.from}
-              txTo={transfer.from === txData.to}
+              txTo={internalOp.from === txData.to}
             />
           </div>
         </AddressHighlighter>
       </div>
       <div className="flex items-baseline">
         <span className="text-gray-500">To</span>
-        <AddressHighlighter address={transfer.to}>
+        <AddressHighlighter address={internalOp.to}>
           <div
             className={`flex items-baseline space-x-1 ${
               toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
             }`}
           >
             <DecoratedAddressLink
-              address={transfer.to}
+              address={internalOp.to}
               miner={toMiner}
-              txFrom={transfer.to === txData.from}
+              txFrom={internalOp.to === txData.from}
-              txTo={transfer.to === txData.to}
+              txTo={internalOp.to === txData.to}
             />
           </div>
         </AddressHighlighter>

src/nodeFunctions.ts

@@ -1,15 +1,15 @@
 import { ethers } from "ethers";
-import { TransactionData, Transfer } from "./types";
+import { TransactionData, InternalOperation } from "./types";
 
-export const getTransactionTransfers = async (
+export const getInternalOperations = async (
   provider: ethers.providers.JsonRpcProvider,
   txData: TransactionData
 ) => {
-  const rawTransfers = await provider.send("ots_getTransactionTransfers", [
+  const rawTransfers = await provider.send("ots_getInternalOperations", [
     txData.transactionHash,
   ]);
 
-  const _transfers: Transfer[] = [];
+  const _transfers: InternalOperation[] = [];
   for (const t of rawTransfers) {
     _transfers.push({
       type: t.type,

src/search/TransactionItem.tsx

@@ -35,7 +35,10 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
       direction = Direction.SELF;
     } else if (tx.from === selectedAddress) {
       direction = Direction.OUT;
-    } else if (tx.to === selectedAddress) {
+    } else if (
+      tx.to === selectedAddress ||
+      tx.createdContractAddress === selectedAddress
+    ) {
       direction = Direction.IN;
     } else {
       direction = Direction.INTERNAL;
@@ -44,6 +47,10 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
 
   const ensFrom = ensCache && tx.from && ensCache[tx.from];
   const ensTo = ensCache && tx.to && ensCache[tx.to];
+  const ensCreated =
+    ensCache &&
+    tx.createdContractAddress &&
+    ensCache[tx.createdContractAddress];
   const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction;
 
   return (
@@ -89,7 +96,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
       </span>
       <span className="col-span-2 flex items-baseline" title={tx.to}>
         <span className="truncate">
-          {tx.to && (
+          {tx.to ? (
             <AddressHighlighter address={tx.to}>
               <DecoratedAddressLink
                 address={tx.to}
@@ -98,6 +105,15 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 miner={tx.miner === tx.to}
               />
             </AddressHighlighter>
+          ) : (
+            <AddressHighlighter address={tx.createdContractAddress!}>
+              <DecoratedAddressLink
+                address={tx.createdContractAddress!}
+                ensName={ensCreated}
+                selectedAddress={selectedAddress}
+                creation
+              />
+            </AddressHighlighter>
           )}
         </span>
       </span>

src/search/search.ts

@@ -45,6 +45,7 @@ export class SearchController {
           hash: t.hash,
           from: t.from,
           to: t.to,
+          createdContractAddress: _receipt.contractAddress,
           value: t.value,
           fee: _receipt.gasUsed.mul(t.gasPrice!),
           gasPrice: t.gasPrice!,

src/transaction/Details.tsx

@@ -12,22 +12,22 @@ import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import Copy from "../components/Copy";
 import Timestamp from "../components/Timestamp";
-import InternalOperation from "../components/InternalOperation";
+import InternalTransactionOperation from "../components/InternalTransactionOperation";
 import MethodName from "../components/MethodName";
 import GasValue from "../components/GasValue";
 import FormattedBalance from "../components/FormattedBalance";
 import TokenTransferItem from "../TokenTransferItem";
-import { TransactionData, Transfer } from "../types";
+import { TransactionData, InternalOperation } from "../types";
 
 type DetailsProps = {
   txData: TransactionData;
-  internalTransfers?: Transfer[];
+  internalOps?: InternalOperation[];
   sendsEthToMiner: boolean;
 };
 
 const Details: React.FC<DetailsProps> = ({
   txData,
-  internalTransfers,
+  internalOps,
   sendsEthToMiner,
 }) => (
   <ContentFrame tabs>
@@ -73,7 +73,8 @@ 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"}>
+      {txData.to ? (
         <div className="flex items-baseline space-x-2 -ml-1">
           <AddressHighlighter address={txData.to}>
             <DecoratedAddressLink
@@ -84,10 +85,26 @@ const Details: React.FC<DetailsProps> = ({
           </AddressHighlighter>
           <Copy value={txData.to} />
         </div>
-      {internalTransfers && (
+      ) : (
+        <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>
+      )}
+      {internalOps && (
         <div className="mt-2 space-y-1">
-          {internalTransfers.map((t, i) => (
+          {internalOps.map((op, i) => (
-            <InternalOperation key={i} txData={txData} transfer={t} />
+            <InternalTransactionOperation
+              key={i}
+              txData={txData}
+              internalOp={op}
+            />
           ))}
         </div>
       )}

src/types.ts

@@ -16,6 +16,7 @@ export type ProcessedTransaction = {
   hash: string;
   from?: string;
   to?: string;
+  createdContractAddress?: string;
   internalMinerInteraction?: boolean;
   value: BigNumber;
   fee: BigNumber;
@@ -44,6 +45,7 @@ export type TransactionData = {
   miner?: string;
   from: string;
   to: string;
+  createdContractAddress?: string;
   value: BigNumber;
   tokenTransfers: TokenTransfer[];
   tokenMetas: TokenMetas;
@@ -70,13 +72,15 @@ export type From = {
   depth: number;
 };
 
-export enum TransferType {
+export enum OperationType {
   TRANSFER = 0,
   SELF_DESTRUCT = 1,
+  CREATE = 2,
+  CREATE2 = 3,
 }
 
-export type Transfer = {
+export type InternalOperation = {
-  type: TransferType;
+  type: OperationType;
   from: string;
   to: string;
   value: BigNumber;

src/useErigonHooks.ts

@@ -1,13 +1,13 @@
 import { ethers } from "ethers";
 import { useState, useEffect } from "react";
-import { getTransactionTransfers } from "./nodeFunctions";
+import { getInternalOperations } from "./nodeFunctions";
-import { TransactionData, Transfer } from "./types";
+import { TransactionData, InternalOperation } from "./types";
 
-export const useInternalTransfers = (
+export const useInternalOperations = (
   provider: ethers.providers.JsonRpcProvider | undefined,
   txData: TransactionData | undefined
-): Transfer[] | undefined => {
+): InternalOperation[] | undefined => {
-  const [intTransfers, setIntTransfers] = useState<Transfer[]>();
+  const [intTransfers, setIntTransfers] = useState<InternalOperation[]>();
 
   useEffect(() => {
     const traceTransfers = async () => {
@@ -15,7 +15,7 @@ export const useInternalTransfers = (
         return;
       }
 
-      const _transfers = await getTransactionTransfers(provider, txData);
+      const _transfers = await getInternalOperations(provider, txData);
       for (const t of _transfers) {
         t.from = provider.formatter.address(t.from);
         t.to = provider.formatter.address(t.to);