Unified node-side tracing APIs

src/Transaction.tsx

@@ -111,12 +111,7 @@ const Transaction: React.FC = () => {
       return false;
     }
 
-    for (const t of intTransfers.transfers) {
+    for (const t of intTransfers) {
-      if (t.to === txData.miner) {
-        return true;
-      }
-    }
-    for (const t of intTransfers.selfDestructs) {
       if (t.to === txData.miner) {
         return true;
       }

src/components/InternalOperation.tsx

@@ -0,0 +1,25 @@
+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/nodeFunctions.ts

@@ -12,25 +12,7 @@ export const getTransactionTransfers = async (
   const _transfers: Transfer[] = [];
   for (const t of rawTransfers) {
     _transfers.push({
-      from: ethers.utils.getAddress(t.from),
+      type: t.type,
-      to: ethers.utils.getAddress(t.to),
-      value: t.value,
-    });
-  }
-  return _transfers;
-};
-
-export const getTransactionSelfDestructs = async (
-  provider: ethers.providers.JsonRpcProvider,
-  txData: TransactionData
-) => {
-  const rawTransfers = await provider.send("ots_getTransactionSelfDestructs", [
-    txData.transactionHash,
-  ]);
-
-  const _transfers: Transfer[] = [];
-  for (const t of rawTransfers) {
-    _transfers.push({
       from: ethers.utils.getAddress(t.from),
       to: ethers.utils.getAddress(t.to),
       value: t.value,

src/transaction/Details.tsx

@@ -12,17 +12,16 @@ import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import Copy from "../components/Copy";
 import Timestamp from "../components/Timestamp";
-import InternalTransfer from "../components/InternalTransfer";
+import InternalOperation from "../components/InternalOperation";
-import InternalSelfDestruct from "../components/InternalSelfDestruct";
 import MethodName from "../components/MethodName";
 import GasValue from "../components/GasValue";
 import FormattedBalance from "../components/FormattedBalance";
 import TokenTransferItem from "../TokenTransferItem";
-import { InternalTransfers, TransactionData } from "../types";
+import { TransactionData, Transfer } from "../types";
 
 type DetailsProps = {
   txData: TransactionData;
-  internalTransfers?: InternalTransfers;
+  internalTransfers?: Transfer[];
   sendsEthToMiner: boolean;
 };
 
@@ -87,11 +86,8 @@ const Details: React.FC<DetailsProps> = ({
       </div>
       {internalTransfers && (
         <div className="mt-2 space-y-1">
-          {internalTransfers.transfers.map((t, i) => (
+          {internalTransfers.map((t, i) => (
-            <InternalTransfer key={i} txData={txData} transfer={t} />
+            <InternalOperation key={i} txData={txData} transfer={t} />
-          ))}
-          {internalTransfers.selfDestructs.map((t, i) => (
-            <InternalSelfDestruct key={i} txData={txData} transfer={t} />
           ))}
         </div>
       )}

src/types.ts

@@ -70,17 +70,18 @@ export type From = {
   depth: number;
 };
 
+export enum TransferType {
+  TRANSFER = 0,
+  SELF_DESTRUCT = 1,
+}
+
 export type Transfer = {
+  type: TransferType;
   from: string;
   to: string;
   value: BigNumber;
 };
 
-export type InternalTransfers = {
-  transfers: Transfer[];
-  selfDestructs: Transfer[];
-};
-
 export type TokenTransfer = {
   token: string;
   from: string;

src/useErigonHooks.ts

@@ -1,16 +1,13 @@
 import { ethers } from "ethers";
 import { useState, useEffect } from "react";
-import {
+import { getTransactionTransfers } from "./nodeFunctions";
-  getTransactionSelfDestructs,
+import { TransactionData, Transfer } from "./types";
-  getTransactionTransfers,
-} from "./nodeFunctions";
-import { InternalTransfers, TransactionData } from "./types";
 
 export const useInternalTransfers = (
   provider: ethers.providers.JsonRpcProvider | undefined,
   txData: TransactionData | undefined
-): InternalTransfers | undefined => {
+): Transfer[] | undefined => {
-  const [intTransfers, setIntTransfers] = useState<InternalTransfers>();
+  const [intTransfers, setIntTransfers] = useState<Transfer[]>();
 
   useEffect(() => {
     const traceTransfers = async () => {
@@ -19,16 +16,12 @@ export const useInternalTransfers = (
       }
 
       const _transfers = await getTransactionTransfers(provider, txData);
-      const _selfDestructs = await getTransactionSelfDestructs(
+      for (const t of _transfers) {
-        provider,
+        t.from = provider.formatter.address(t.from);
-        txData
+        t.to = provider.formatter.address(t.to);
-      );
+        t.value = provider.formatter.bigNumber(t.value);
-      for (const s of _selfDestructs) {
-        s.from = provider.formatter.address(s.from);
-        s.to = provider.formatter.address(s.to);
-        s.value = provider.formatter.bigNumber(s.value);
       }
-      setIntTransfers({ transfers: _transfers, selfDestructs: _selfDestructs });
+      setIntTransfers(_transfers);
     };
     traceTransfers();
   }, [provider, txData]);