From 1ab77bb819e972015fbce45e9c7c793ce85f6e36 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 17 Jul 2021 15:00:08 -0300
Subject: [PATCH 01/15] Extract custom hook; simplify code

---
 src/Transaction.tsx   | 36 ++++--------------------------------
 src/nodeFunctions.ts  | 21 +++++++++++++++++++++
 src/useErigonHooks.ts | 25 +++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 32 deletions(-)
 create mode 100644 src/nodeFunctions.ts
 create mode 100644 src/useErigonHooks.ts

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 3f450e9..773901e 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  useContext,
-} from "react";
+import React, { useState, useEffect, useMemo, useContext } from "react";
 import { Route, Switch, useParams } from "react-router-dom";
 import { BigNumber, ethers } from "ethers";
 import StandardFrame from "./StandardFrame";
@@ -13,9 +7,10 @@ import Tab from "./components/Tab";
 import Details from "./transaction/Details";
 import Logs from "./transaction/Logs";
 import erc20 from "./erc20.json";
-import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
+import { TokenMetas, TokenTransfer, TransactionData } from "./types";
 import { RuntimeContext } from "./useRuntime";
 import { SelectionContext, useSelection } from "./useSelection";
+import { useInternalTransfers } from "./useErigonHooks";
 
 const TRANSFER_TOPIC =
   "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
@@ -110,7 +105,7 @@ const Transaction: React.FC = () => {
     readBlock();
   }, [provider, txhash]);
 
-  const [transfers, setTransfers] = useState<Transfer[]>();
+  const transfers = useInternalTransfers(provider, txData);
   const sendsEthToMiner = useMemo(() => {
     if (!txData || !transfers) {
       return false;
@@ -124,29 +119,6 @@ const Transaction: React.FC = () => {
     return false;
   }, [txData, transfers]);
 
-  const traceTransfers = useCallback(async () => {
-    if (!provider || !txData) {
-      return;
-    }
-
-    const r = await provider.send("ots_getTransactionTransfers", [
-      txData.transactionHash,
-    ]);
-    const _transfers: Transfer[] = [];
-    for (const t of r) {
-      _transfers.push({
-        from: ethers.utils.getAddress(t.from),
-        to: ethers.utils.getAddress(t.to),
-        value: t.value,
-      });
-    }
-
-    setTransfers(_transfers);
-  }, [provider, txData]);
-  useEffect(() => {
-    traceTransfers();
-  }, [traceTransfers]);
-
   const selectionCtx = useSelection();
 
   return (
diff --git a/src/nodeFunctions.ts b/src/nodeFunctions.ts
new file mode 100644
index 0000000..9ddd788
--- /dev/null
+++ b/src/nodeFunctions.ts
@@ -0,0 +1,21 @@
+import { ethers } from "ethers";
+import { TransactionData, Transfer } from "./types";
+
+export const getTransactionTransfers = async (
+  provider: ethers.providers.JsonRpcProvider,
+  txData: TransactionData
+) => {
+  const r = await provider.send("ots_getTransactionTransfers", [
+    txData.transactionHash,
+  ]);
+
+  const _transfers: Transfer[] = [];
+  for (const t of r) {
+    _transfers.push({
+      from: ethers.utils.getAddress(t.from),
+      to: ethers.utils.getAddress(t.to),
+      value: t.value,
+    });
+  }
+  return _transfers;
+};
diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts
new file mode 100644
index 0000000..2d3aa9b
--- /dev/null
+++ b/src/useErigonHooks.ts
@@ -0,0 +1,25 @@
+import { ethers } from "ethers";
+import { useState, useEffect } from "react";
+import { getTransactionTransfers } from "./nodeFunctions";
+import { TransactionData, Transfer } from "./types";
+
+export const useInternalTransfers = (
+  provider: ethers.providers.JsonRpcProvider | undefined,
+  txData: TransactionData | undefined
+) => {
+  const [transfers, setTransfers] = useState<Transfer[]>();
+
+  useEffect(() => {
+    const traceTransfers = async () => {
+      if (!provider || !txData) {
+        return;
+      }
+
+      const _transfers = await getTransactionTransfers(provider, txData);
+      setTransfers(_transfers);
+    };
+    traceTransfers();
+  }, [provider, txData]);
+
+  return transfers;
+};

From 683da61778e8101ad107fbe4a50a3d480472ee99 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 17 Jul 2021 15:58:33 -0300
Subject: [PATCH 02/15] Initial tracking ot self-destructs

---
 src/Transaction.tsx                     | 15 +++--
 src/components/InternalSelfDestruct.tsx | 82 +++++++++++++++++++++++++
 src/nodeFunctions.ts                    | 23 ++++++-
 src/params.ts                           |  2 +-
 src/transaction/Details.tsx             | 26 +++++---
 src/types.ts                            |  5 ++
 src/useErigonHooks.ts                   | 22 +++++--
 7 files changed, 152 insertions(+), 23 deletions(-)
 create mode 100644 src/components/InternalSelfDestruct.tsx

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 773901e..96b7bf9 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -105,19 +105,24 @@ const Transaction: React.FC = () => {
     readBlock();
   }, [provider, txhash]);
 
-  const transfers = useInternalTransfers(provider, txData);
+  const intTransfers = useInternalTransfers(provider, txData);
   const sendsEthToMiner = useMemo(() => {
-    if (!txData || !transfers) {
+    if (!txData || !intTransfers) {
       return false;
     }
 
-    for (const t of transfers) {
+    for (const t of intTransfers.transfers) {
+      if (t.to === txData.miner) {
+        return true;
+      }
+    }
+    for (const t of intTransfers.selfDestructs) {
       if (t.to === txData.miner) {
         return true;
       }
     }
     return false;
-  }, [txData, transfers]);
+  }, [txData, intTransfers]);
 
   const selectionCtx = useSelection();
 
@@ -136,7 +141,7 @@ const Transaction: React.FC = () => {
             <Route path="/tx/:txhash/" exact>
               <Details
                 txData={txData}
-                transfers={transfers}
+                internalTransfers={intTransfers}
                 sendsEthToMiner={sendsEthToMiner}
               />
             </Route>
diff --git a/src/components/InternalSelfDestruct.tsx b/src/components/InternalSelfDestruct.tsx
new file mode 100644
index 0000000..862eac8
--- /dev/null
+++ b/src/components/InternalSelfDestruct.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import { ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faAngleRight,
+  faBomb,
+  faCoins,
+} from "@fortawesome/free-solid-svg-icons";
+import AddressHighlighter from "./AddressHighlighter";
+import AddressLink from "./AddressLink";
+import { TransactionData, Transfer } from "../types";
+
+type InternalSelfDestructProps = {
+  txData: TransactionData;
+  transfer: Transfer;
+};
+
+const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
+  txData,
+  transfer,
+}) => {
+  const fromMiner =
+    txData.miner !== undefined && transfer.from === txData.miner;
+  const toMiner = txData.miner !== undefined && transfer.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={faBomb} size="1x" />
+          </span>{" "}
+          SELF DESTRUCT
+        </span>
+        <span>Contract</span>
+        <div className="flex items-baseline">
+          <AddressHighlighter address={transfer.from}>
+            <div
+              className={`flex items-baseline space-x-1 ${
+                fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+              }`}
+            >
+              {fromMiner && (
+                <span className="text-yellow-400" title="Miner address">
+                  <FontAwesomeIcon icon={faCoins} size="1x" />
+                </span>
+              )}
+              <AddressLink address={transfer.from} />
+            </div>
+          </AddressHighlighter>
+        </div>
+      </div>
+      {!transfer.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>
+          <div className="flex items-baseline">
+            <span className="text-gray-500">To</span>
+            <AddressHighlighter address={transfer.to}>
+              <div
+                className={`flex items-baseline space-x-1 ${
+                  toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+                }`}
+              >
+                {toMiner && (
+                  <span className="text-yellow-400" title="Miner address">
+                    <FontAwesomeIcon icon={faCoins} size="1x" />
+                  </span>
+                )}
+                <AddressLink address={transfer.to} />
+              </div>
+            </AddressHighlighter>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default React.memo(InternalSelfDestruct);
diff --git a/src/nodeFunctions.ts b/src/nodeFunctions.ts
index 9ddd788..b3ff583 100644
--- a/src/nodeFunctions.ts
+++ b/src/nodeFunctions.ts
@@ -5,12 +5,31 @@ export const getTransactionTransfers = async (
   provider: ethers.providers.JsonRpcProvider,
   txData: TransactionData
 ) => {
-  const r = await provider.send("ots_getTransactionTransfers", [
+  const rawTransfers = await provider.send("ots_getTransactionTransfers", [
     txData.transactionHash,
   ]);
 
   const _transfers: Transfer[] = [];
-  for (const t of r) {
+  for (const t of rawTransfers) {
+    _transfers.push({
+      from: ethers.utils.getAddress(t.from),
+      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),
diff --git a/src/params.ts b/src/params.ts
index 75d31c3..2bfd757 100644
--- a/src/params.ts
+++ b/src/params.ts
@@ -1,3 +1,3 @@
-export const MIN_API_LEVEL = 1;
+export const MIN_API_LEVEL = 2;
 
 export const PAGE_SIZE = 25;
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index f5022da..614c32f 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -13,21 +13,22 @@ import AddressOrENSName from "../components/AddressOrENSName";
 import Copy from "../components/Copy";
 import Timestamp from "../components/Timestamp";
 import InternalTransfer from "../components/InternalTransfer";
+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 { TransactionData, Transfer } from "../types";
+import { InternalTransfers, TransactionData } from "../types";
 
 type DetailsProps = {
   txData: TransactionData;
-  transfers?: Transfer[];
+  internalTransfers?: InternalTransfers;
   sendsEthToMiner: boolean;
 };
 
 const Details: React.FC<DetailsProps> = ({
   txData,
-  transfers,
+  internalTransfers,
   sendsEthToMiner,
 }) => (
   <ContentFrame tabs>
@@ -76,12 +77,19 @@ const Details: React.FC<DetailsProps> = ({
         </AddressHighlighter>
         <Copy value={txData.to} />
       </div>
-      {transfers && (
-        <div className="mt-2 space-y-1">
-          {transfers.map((t, i) => (
-            <InternalTransfer key={i} txData={txData} transfer={t} />
-          ))}
-        </div>
+      {internalTransfers && (
+        <>
+          <div className="mt-2 space-y-1">
+            {internalTransfers.transfers.map((t, i) => (
+              <InternalTransfer key={i} txData={txData} transfer={t} />
+            ))}
+          </div>
+          <div className="mt-2 space-y-1">
+            {internalTransfers.selfDestructs.map((t, i) => (
+              <InternalSelfDestruct key={i} txData={txData} transfer={t} />
+            ))}
+          </div>
+        </>
       )}
     </InfoRow>
     <InfoRow title="Transaction Action">
diff --git a/src/types.ts b/src/types.ts
index 9ee8d3d..2e572bd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -68,6 +68,11 @@ export type Transfer = {
   value: BigNumber;
 };
 
+export type InternalTransfers = {
+  transfers: Transfer[];
+  selfDestructs: Transfer[];
+};
+
 export type TokenTransfer = {
   token: string;
   from: string;
diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts
index 2d3aa9b..589ec34 100644
--- a/src/useErigonHooks.ts
+++ b/src/useErigonHooks.ts
@@ -1,13 +1,16 @@
 import { ethers } from "ethers";
 import { useState, useEffect } from "react";
-import { getTransactionTransfers } from "./nodeFunctions";
-import { TransactionData, Transfer } from "./types";
+import {
+  getTransactionSelfDestructs,
+  getTransactionTransfers,
+} from "./nodeFunctions";
+import { InternalTransfers, TransactionData } from "./types";
 
 export const useInternalTransfers = (
   provider: ethers.providers.JsonRpcProvider | undefined,
   txData: TransactionData | undefined
-) => {
-  const [transfers, setTransfers] = useState<Transfer[]>();
+): InternalTransfers | undefined => {
+  const [intTransfers, setIntTransfers] = useState<InternalTransfers>();
 
   useEffect(() => {
     const traceTransfers = async () => {
@@ -16,10 +19,17 @@ export const useInternalTransfers = (
       }
 
       const _transfers = await getTransactionTransfers(provider, txData);
-      setTransfers(_transfers);
+      const _selfDestructs = await getTransactionSelfDestructs(
+        provider,
+        txData
+      );
+      for (const s of _selfDestructs) {
+        s.value = provider.formatter.bigNumber(s.value);
+      }
+      setIntTransfers({ transfers: _transfers, selfDestructs: _selfDestructs });
     };
     traceTransfers();
   }, [provider, txData]);
 
-  return transfers;
+  return intTransfers;
 };

From 2494fa4adced8614a50c74db30e9b80557306691 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 00:38:38 -0300
Subject: [PATCH 03/15] Pull up all decoration logic from AddressOrENSName to
 DecoratedAddressLink

---
 src/Block.tsx                           |  7 +--
 src/TokenTransferItem.tsx               | 16 ++++---
 src/components/AddressOrENSName.tsx     | 17 ++-----
 src/components/DecoratedAddressLink.tsx | 62 +++++++++++++++++++++++++
 src/components/InternalTransfer.tsx     |  6 +--
 src/search/TransactionItem.tsx          | 10 ++--
 src/transaction/Details.tsx             | 12 +++--
 src/types.ts                            |  8 ++++
 8 files changed, 103 insertions(+), 35 deletions(-)
 create mode 100644 src/components/DecoratedAddressLink.tsx

diff --git a/src/Block.tsx b/src/Block.tsx
index 963f2f9..c1578a8 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -13,7 +13,7 @@ import NavButton from "./components/NavButton";
 import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
 import BlockLink from "./components/BlockLink";
-import AddressOrENSName from "./components/AddressOrENSName";
+import DecoratedAddressLink from "./components/DecoratedAddressLink";
 import TransactionValue from "./components/TransactionValue";
 import HexValue from "./components/HexValue";
 import { RuntimeContext } from "./useRuntime";
@@ -159,10 +159,7 @@ const Block: React.FC = () => {
             in this block
           </InfoRow>
           <InfoRow title="Mined by">
-            <AddressOrENSName
-              address={block.miner}
-              minerAddress={block.miner}
-            />
+            <DecoratedAddressLink address={block.miner} miner />
           </InfoRow>
           <InfoRow title="Block Reward">
             <TransactionValue value={block.blockReward.add(block.feeReward)} />
diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index 4b1fc62..dc6fd45 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -2,11 +2,10 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import AddressHighlighter from "./components/AddressHighlighter";
-import AddressOrENSName from "./components/AddressOrENSName";
-import AddressLink from "./components/AddressLink";
+import DecoratedAddressLink from "./components/DecoratedAddressLink";
 import TokenLogo from "./components/TokenLogo";
 import FormattedBalance from "./components/FormattedBalance";
-import { TokenMetas, TokenTransfer } from "./types";
+import { AddressContext, TokenMetas, TokenTransfer } from "./types";
 
 type TokenTransferItemProps = {
   t: TokenTransfer;
@@ -25,13 +24,16 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
       <div className="flex space-x-1">
         <span className="font-bold">From</span>
         <AddressHighlighter address={t.from}>
-          <AddressOrENSName address={t.from} />
+          <DecoratedAddressLink
+            address={t.from}
+            addressCtx={AddressContext.FROM}
+          />
         </AddressHighlighter>
       </div>
       <div className="flex space-x-1">
         <span className="font-bold">To</span>
         <AddressHighlighter address={t.to}>
-          <AddressOrENSName address={t.to} />
+          <DecoratedAddressLink address={t.to} addressCtx={AddressContext.TO} />
         </AddressHighlighter>
       </div>
       <div className="col-span-3 flex space-x-1">
@@ -48,7 +50,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
               <div className="self-center">
                 <TokenLogo address={t.token} name={tokenMetas[t.token].name} />
               </div>
-              <AddressLink
+              <DecoratedAddressLink
                 address={t.token}
                 text={`${tokenMetas[t.token].name} (${
                   tokenMetas[t.token].symbol
@@ -56,7 +58,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
               />
             </>
           ) : (
-            <AddressOrENSName address={t.token} />
+            <DecoratedAddressLink address={t.token} />
           )}
         </span>
       </div>
diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx
index ce1ec8a..6e871aa 100644
--- a/src/components/AddressOrENSName.tsx
+++ b/src/components/AddressOrENSName.tsx
@@ -1,6 +1,4 @@
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCoins } from "@fortawesome/free-solid-svg-icons";
 import Address from "./Address";
 import AddressLink from "./AddressLink";
 import ENSName from "./ENSName";
@@ -10,21 +8,16 @@ type AddressOrENSNameProps = {
   address: string;
   ensName?: string;
   selectedAddress?: string;
-  minerAddress?: string;
+  text?: string;
 };
 
 const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   address,
   ensName,
   selectedAddress,
-  minerAddress,
+  text,
 }) => (
-  <div className="flex items-baseline space-x-1 truncate">
-    {minerAddress !== undefined && minerAddress === address && (
-      <span className="text-yellow-400" title="Miner address">
-        <FontAwesomeIcon icon={faCoins} size="1x" />
-      </span>
-    )}
+  <>
     {address === selectedAddress ? (
       <>
         {ensName ? (
@@ -38,11 +31,11 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
         {ensName ? (
           <ENSNameLink name={ensName} address={address} />
         ) : (
-          <AddressLink address={address} />
+          <AddressLink address={address} text={text} />
         )}
       </>
     )}
-  </div>
+  </>
 );
 
 export default React.memo(AddressOrENSName);
diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
new file mode 100644
index 0000000..7f897b2
--- /dev/null
+++ b/src/components/DecoratedAddressLink.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faMoneyBillAlt,
+  faBurn,
+  faCoins,
+} from "@fortawesome/free-solid-svg-icons";
+import AddressOrENSName from "./AddressOrENSName";
+import { AddressContext, ZERO_ADDRESS } from "../types";
+
+type DecoratedAddressLinkProps = {
+  address: string;
+  ensName?: string;
+  selectedAddress?: string;
+  text?: string;
+  addressCtx?: AddressContext;
+  miner?: boolean;
+};
+
+const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
+  address,
+  ensName,
+  selectedAddress,
+  text,
+  addressCtx,
+  miner,
+}) => {
+  const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
+  const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
+
+  return (
+    <div
+      className={`flex items-baseline space-x-1 ${mint ? "italic" : ""} ${
+        burn ? "line-through" : ""
+      }`}
+    >
+      {mint && (
+        <span className="text-green-500" title="Mint address">
+          <FontAwesomeIcon icon={faMoneyBillAlt} size="1x" />
+        </span>
+      )}
+      {burn && (
+        <span className="text-orange-500" title="Burn address">
+          <FontAwesomeIcon icon={faBurn} size="1x" />
+        </span>
+      )}
+      {miner && (
+        <span className="text-yellow-400" title="Miner address">
+          <FontAwesomeIcon icon={faCoins} size="1x" />
+        </span>
+      )}
+      <AddressOrENSName
+        address={address}
+        ensName={ensName}
+        selectedAddress={selectedAddress}
+        text={text}
+      />
+    </div>
+  );
+};
+
+export default React.memo(DecoratedAddresssLink);
diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx
index c135a43..64e8953 100644
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@@ -3,7 +3,7 @@ import { ethers } from "ethers";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight, faCoins } from "@fortawesome/free-solid-svg-icons";
 import AddressHighlighter from "./AddressHighlighter";
-import AddressLink from "./AddressLink";
+import DecoratedAddressLink from "./DecoratedAddressLink";
 import { TransactionData, Transfer } from "../types";
 
 type InternalTransferProps = {
@@ -38,7 +38,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
                 <FontAwesomeIcon icon={faCoins} size="1x" />
               </span>
             )}
-            <AddressLink address={transfer.from} />
+            <DecoratedAddressLink address={transfer.from} />
           </div>
         </AddressHighlighter>
       </div>
@@ -55,7 +55,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
                 <FontAwesomeIcon icon={faCoins} size="1x" />
               </span>
             )}
-            <AddressLink address={transfer.to} />
+            <DecoratedAddressLink address={transfer.to} />
           </div>
         </AddressHighlighter>
       </div>
diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx
index 3829010..6d78f7e 100644
--- a/src/search/TransactionItem.tsx
+++ b/src/search/TransactionItem.tsx
@@ -4,7 +4,7 @@ import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import MethodName from "../components/MethodName";
 import BlockLink from "../components/BlockLink";
 import TransactionLink from "../components/TransactionLink";
-import AddressOrENSName from "../components/AddressOrENSName";
+import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import TimestampAge from "../components/TimestampAge";
 import AddressHighlighter from "../components/AddressHighlighter";
 import TransactionDirection, {
@@ -71,11 +71,11 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
         <span className="truncate">
           {tx.from && (
             <AddressHighlighter address={tx.from}>
-              <AddressOrENSName
+              <DecoratedAddressLink
                 address={tx.from}
                 ensName={ensFrom}
                 selectedAddress={selectedAddress}
-                minerAddress={tx.miner}
+                miner={tx.miner === tx.from}
               />
             </AddressHighlighter>
           )}
@@ -91,11 +91,11 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
         <span className="truncate">
           {tx.to && (
             <AddressHighlighter address={tx.to}>
-              <AddressOrENSName
+              <DecoratedAddressLink
                 address={tx.to}
                 ensName={ensTo}
                 selectedAddress={selectedAddress}
-                minerAddress={tx.miner}
+                miner={tx.miner === tx.to}
               />
             </AddressHighlighter>
           )}
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 614c32f..ec24229 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -9,7 +9,7 @@ import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
 import BlockLink from "../components/BlockLink";
 import AddressHighlighter from "../components/AddressHighlighter";
-import AddressOrENSName from "../components/AddressOrENSName";
+import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import Copy from "../components/Copy";
 import Timestamp from "../components/Timestamp";
 import InternalTransfer from "../components/InternalTransfer";
@@ -65,7 +65,10 @@ const Details: React.FC<DetailsProps> = ({
     <InfoRow title="From">
       <div className="flex items-baseline space-x-2 -ml-1">
         <AddressHighlighter address={txData.from}>
-          <AddressOrENSName address={txData.from} minerAddress={txData.miner} />
+          <DecoratedAddressLink
+            address={txData.from}
+            miner={txData.from === txData.miner}
+          />
         </AddressHighlighter>
         <Copy value={txData.from} />
       </div>
@@ -73,7 +76,10 @@ const Details: React.FC<DetailsProps> = ({
     <InfoRow title="Interacted With (To)">
       <div className="flex items-baseline space-x-2 -ml-1">
         <AddressHighlighter address={txData.to}>
-          <AddressOrENSName address={txData.to} minerAddress={txData.miner} />
+          <DecoratedAddressLink
+            address={txData.to}
+            miner={txData.to === txData.miner}
+          />
         </AddressHighlighter>
         <Copy value={txData.to} />
       </div>
diff --git a/src/types.ts b/src/types.ts
index 2e572bd..94301e5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -57,6 +57,14 @@ export type TransactionData = {
   logs: ethers.providers.Log[];
 };
 
+// The VOID...
+export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+
+export enum AddressContext {
+  FROM,
+  TO,
+}
+
 export type From = {
   current: string;
   depth: number;

From 18530798811a2ea41d650dbac102be32c503f4ab Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 00:50:32 -0300
Subject: [PATCH 04/15] Custom text/hover colors for burn/mint addresses

---
 src/components/AddressLink.tsx          | 11 +++++++++--
 src/components/AddressOrENSName.tsx     | 14 ++++++++++++--
 src/components/DecoratedAddressLink.tsx |  7 ++++---
 src/components/ENSNameLink.tsx          | 11 +++++++++--
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/components/AddressLink.tsx b/src/components/AddressLink.tsx
index 36acac6..abddf99 100644
--- a/src/components/AddressLink.tsx
+++ b/src/components/AddressLink.tsx
@@ -4,11 +4,18 @@ import { NavLink } from "react-router-dom";
 type AddressLinkProps = {
   address: string;
   text?: string;
+  dontOverrideColors?: boolean;
 };
 
-const AddressLink: React.FC<AddressLinkProps> = ({ address, text }) => (
+const AddressLink: React.FC<AddressLinkProps> = ({
+  address,
+  text,
+  dontOverrideColors,
+}) => (
   <NavLink
-    className="text-link-blue hover:text-link-blue-hover font-address truncate"
+    className={`${
+      dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
+    } font-address truncate`}
     to={`/address/${address}`}
   >
     <p className="truncate" title={text ?? address}>
diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx
index 6e871aa..9cb2f9e 100644
--- a/src/components/AddressOrENSName.tsx
+++ b/src/components/AddressOrENSName.tsx
@@ -9,6 +9,7 @@ type AddressOrENSNameProps = {
   ensName?: string;
   selectedAddress?: string;
   text?: string;
+  dontOverrideColors?: boolean;
 };
 
 const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
@@ -16,6 +17,7 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   ensName,
   selectedAddress,
   text,
+  dontOverrideColors,
 }) => (
   <>
     {address === selectedAddress ? (
@@ -29,9 +31,17 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
     ) : (
       <>
         {ensName ? (
-          <ENSNameLink name={ensName} address={address} />
+          <ENSNameLink
+            name={ensName}
+            address={address}
+            dontOverrideColors={dontOverrideColors}
+          />
         ) : (
-          <AddressLink address={address} text={text} />
+          <AddressLink
+            address={address}
+            text={text}
+            dontOverrideColors={dontOverrideColors}
+          />
         )}
       </>
     )}
diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index 7f897b2..2579848 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -30,9 +30,9 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
 
   return (
     <div
-      className={`flex items-baseline space-x-1 ${mint ? "italic" : ""} ${
-        burn ? "line-through" : ""
-      }`}
+      className={`flex items-baseline space-x-1 ${
+        mint ? "italic text-green-500 hover:text-green-700" : ""
+      } ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""}`}
     >
       {mint && (
         <span className="text-green-500" title="Mint address">
@@ -54,6 +54,7 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
         ensName={ensName}
         selectedAddress={selectedAddress}
         text={text}
+        dontOverrideColors={mint || burn}
       />
     </div>
   );
diff --git a/src/components/ENSNameLink.tsx b/src/components/ENSNameLink.tsx
index a111139..ae8f6f8 100644
--- a/src/components/ENSNameLink.tsx
+++ b/src/components/ENSNameLink.tsx
@@ -5,11 +5,18 @@ import ENSLogo from "./ensLogo.svg";
 type ENSNameLinkProps = {
   name: string;
   address: string;
+  dontOverrideColors?: boolean;
 };
 
-const ENSNameLink: React.FC<ENSNameLinkProps> = ({ name, address }) => (
+const ENSNameLink: React.FC<ENSNameLinkProps> = ({
+  name,
+  address,
+  dontOverrideColors,
+}) => (
   <NavLink
-    className="flex items-baseline space-x-1 font-sans text-link-blue hover:text-link-blue-hover truncate"
+    className={`flex items-baseline space-x-1 font-sans ${
+      dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
+    } truncate`}
     to={`/address/${name}`}
     title={`${name}: ${address}`}
   >

From 71e35129baabef311b361bbe87f789712963e80b Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 00:55:21 -0300
Subject: [PATCH 05/15] Add bg hover color to token transfer list

---
 src/TokenTransferItem.tsx   | 2 +-
 src/transaction/Details.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index dc6fd45..286d43f 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -16,7 +16,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
   t,
   tokenMetas,
 }) => (
-  <div className="flex items-baseline space-x-2 truncate">
+  <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
     <span className="text-gray-500">
       <FontAwesomeIcon icon={faCaretRight} size="1x" />
     </span>
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index ec24229..1863b33 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -103,7 +103,7 @@ const Details: React.FC<DetailsProps> = ({
     </InfoRow>
     {txData.tokenTransfers.length > 0 && (
       <InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
-        <div className="space-y-2">
+        <div>
           {txData.tokenTransfers.map((t, i) => (
             <TokenTransferItem key={i} t={t} tokenMetas={txData.tokenMetas} />
           ))}

From 261847bec1a05052bb336255d178544f50a90081 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 01:03:32 -0300
Subject: [PATCH 06/15] Change p for span to avoid block filling the entire row

---
 src/components/Address.tsx     | 2 +-
 src/components/AddressLink.tsx | 4 ++--
 src/components/ENSName.tsx     | 2 +-
 src/components/ENSNameLink.tsx | 2 +-
 src/transaction/Logs.tsx       | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Address.tsx b/src/components/Address.tsx
index d757ed3..d7694e5 100644
--- a/src/components/Address.tsx
+++ b/src/components/Address.tsx
@@ -6,7 +6,7 @@ type AddressProps = {
 
 const Address: React.FC<AddressProps> = ({ address }) => (
   <span className="font-address text-gray-400 truncate" title={address}>
-    <p className="truncate">{address}</p>
+    <span className="truncate">{address}</span>
   </span>
 );
 
diff --git a/src/components/AddressLink.tsx b/src/components/AddressLink.tsx
index abddf99..a8fd5c3 100644
--- a/src/components/AddressLink.tsx
+++ b/src/components/AddressLink.tsx
@@ -18,9 +18,9 @@ const AddressLink: React.FC<AddressLinkProps> = ({
     } font-address truncate`}
     to={`/address/${address}`}
   >
-    <p className="truncate" title={text ?? address}>
+    <span className="truncate" title={text ?? address}>
       {text ?? address}
-    </p>
+    </span>
   </NavLink>
 );
 
diff --git a/src/components/ENSName.tsx b/src/components/ENSName.tsx
index 035c4ed..7bc8032 100644
--- a/src/components/ENSName.tsx
+++ b/src/components/ENSName.tsx
@@ -18,7 +18,7 @@ const ENSName: React.FC<ENSNameProps> = ({ name, address }) => (
       width={12}
       height={12}
     />
-    <p className="truncate">{name}</p>
+    <span className="truncate">{name}</span>
   </div>
 );
 
diff --git a/src/components/ENSNameLink.tsx b/src/components/ENSNameLink.tsx
index ae8f6f8..c1da646 100644
--- a/src/components/ENSNameLink.tsx
+++ b/src/components/ENSNameLink.tsx
@@ -27,7 +27,7 @@ const ENSNameLink: React.FC<ENSNameLinkProps> = ({
       width={12}
       height={12}
     />
-    <p className="truncate">{name}</p>
+    <span className="truncate">{name}</span>
   </NavLink>
 );
 
diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index eda12be..d8cb868 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ContentFrame from "../ContentFrame";
-import AddressLink from "../components/AddressLink";
+import AddressOrENSName from "../components/AddressOrENSName";
 import { TransactionData } from "../types";
 
 type LogsProps = {
@@ -22,7 +22,7 @@ const Logs: React.FC<LogsProps> = ({ txData }) => (
             <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
               <div className="font-bold text-right">Address</div>
               <div className="col-span-11">
-                <AddressLink address={l.address} />
+                <AddressOrENSName address={l.address} />
               </div>
             </div>
             {l.topics.map((t, i) => (

From 6bf905d33ae423de9f207cd6bb2d5b9e61bb5680 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 03:15:43 -0300
Subject: [PATCH 07/15] Fix missing readonly attribute on textarea

---
 src/transaction/Logs.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index d8cb868..bf101fb 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -45,6 +45,7 @@ const Logs: React.FC<LogsProps> = ({ txData }) => (
                 <textarea
                   className="w-full h-20 bg-gray-50 font-mono focus:outline-none border rounded p-2"
                   value={l.data}
+                  readOnly
                 />
               </div>
             </div>

From 03ce994a5c41ac02971cb62b9222319d6441257f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 04:14:56 -0300
Subject: [PATCH 08/15] Add hint to GST2/CHI gastoken selfdestructs on mainnet

---
 src/components/InternalSelfDestruct.tsx | 45 ++++++++++---------------
 src/components/InternalTransfer.tsx     | 16 ++-------
 src/transaction/Details.tsx             | 20 +++++------
 src/useErigonHooks.ts                   |  2 ++
 4 files changed, 31 insertions(+), 52 deletions(-)

diff --git a/src/components/InternalSelfDestruct.tsx b/src/components/InternalSelfDestruct.tsx
index 862eac8..bc8eba8 100644
--- a/src/components/InternalSelfDestruct.tsx
+++ b/src/components/InternalSelfDestruct.tsx
@@ -1,15 +1,15 @@
-import React from "react";
+import React, { useContext } from "react";
 import { ethers } from "ethers";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faAngleRight,
-  faBomb,
-  faCoins,
-} from "@fortawesome/free-solid-svg-icons";
+import { faAngleRight, faBomb } from "@fortawesome/free-solid-svg-icons";
 import AddressHighlighter from "./AddressHighlighter";
-import AddressLink from "./AddressLink";
+import DecoratedAddressLink from "./DecoratedAddressLink";
+import { RuntimeContext } from "../useRuntime";
 import { TransactionData, Transfer } from "../types";
 
+const CHI_ADDRESS = "0x0000000000004946c0e9F43F4Dee607b0eF1fA1c";
+const GST2_ADDRESS = "0x0000000000b3F879cb30FE243b4Dfee438691c04";
+
 type InternalSelfDestructProps = {
   txData: TransactionData;
   transfer: Transfer;
@@ -19,8 +19,9 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
   txData,
   transfer,
 }) => {
-  const fromMiner =
-    txData.miner !== undefined && transfer.from === txData.miner;
+  const { provider } = useContext(RuntimeContext);
+  const network = provider?.network;
+
   const toMiner = txData.miner !== undefined && transfer.to === txData.miner;
 
   return (
@@ -35,20 +36,15 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
         <span>Contract</span>
         <div className="flex items-baseline">
           <AddressHighlighter address={transfer.from}>
-            <div
-              className={`flex items-baseline space-x-1 ${
-                fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-              }`}
-            >
-              {fromMiner && (
-                <span className="text-yellow-400" title="Miner address">
-                  <FontAwesomeIcon icon={faCoins} size="1x" />
-                </span>
-              )}
-              <AddressLink address={transfer.from} />
-            </div>
+            <DecoratedAddressLink address={transfer.from} />
           </AddressHighlighter>
         </div>
+        {network?.chainId === 1 && transfer.to === CHI_ADDRESS && (
+          <span className="text-gray-400">(CHI Gastoken)</span>
+        )}
+        {network?.chainId === 1 && transfer.to === GST2_ADDRESS && (
+          <span className="text-gray-400">(GST2 Gastoken)</span>
+        )}
       </div>
       {!transfer.value.isZero() && (
         <div className="ml-5 flex items-baseline space-x-1 text-xs">
@@ -64,12 +60,7 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
                   toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
                 }`}
               >
-                {toMiner && (
-                  <span className="text-yellow-400" title="Miner address">
-                    <FontAwesomeIcon icon={faCoins} size="1x" />
-                  </span>
-                )}
-                <AddressLink address={transfer.to} />
+                <DecoratedAddressLink address={transfer.to} miner={toMiner} />
               </div>
             </AddressHighlighter>
           </div>
diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx
index 64e8953..af101e0 100644
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ethers } from "ethers";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleRight, faCoins } from "@fortawesome/free-solid-svg-icons";
+import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { TransactionData, Transfer } from "../types";
@@ -33,12 +33,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
               fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
             }`}
           >
-            {fromMiner && (
-              <span className="text-yellow-400" title="Miner address">
-                <FontAwesomeIcon icon={faCoins} size="1x" />
-              </span>
-            )}
-            <DecoratedAddressLink address={transfer.from} />
+            <DecoratedAddressLink address={transfer.from} miner={fromMiner} />
           </div>
         </AddressHighlighter>
       </div>
@@ -50,12 +45,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
               toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
             }`}
           >
-            {toMiner && (
-              <span className="text-yellow-400" title="Miner address">
-                <FontAwesomeIcon icon={faCoins} size="1x" />
-              </span>
-            )}
-            <DecoratedAddressLink address={transfer.to} />
+            <DecoratedAddressLink address={transfer.to} miner={toMiner} />
           </div>
         </AddressHighlighter>
       </div>
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 1863b33..441226a 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -84,18 +84,14 @@ const Details: React.FC<DetailsProps> = ({
         <Copy value={txData.to} />
       </div>
       {internalTransfers && (
-        <>
-          <div className="mt-2 space-y-1">
-            {internalTransfers.transfers.map((t, i) => (
-              <InternalTransfer key={i} txData={txData} transfer={t} />
-            ))}
-          </div>
-          <div className="mt-2 space-y-1">
-            {internalTransfers.selfDestructs.map((t, i) => (
-              <InternalSelfDestruct key={i} txData={txData} transfer={t} />
-            ))}
-          </div>
-        </>
+        <div className="mt-2 space-y-1">
+          {internalTransfers.transfers.map((t, i) => (
+            <InternalTransfer key={i} txData={txData} transfer={t} />
+          ))}
+          {internalTransfers.selfDestructs.map((t, i) => (
+            <InternalSelfDestruct key={i} txData={txData} transfer={t} />
+          ))}
+        </div>
       )}
     </InfoRow>
     <InfoRow title="Transaction Action">
diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts
index 589ec34..0ca4a06 100644
--- a/src/useErigonHooks.ts
+++ b/src/useErigonHooks.ts
@@ -24,6 +24,8 @@ export const useInternalTransfers = (
         txData
       );
       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 });

From 163cef69394a956a5bdd48ccb3564194a9d78530 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 04:19:24 -0300
Subject: [PATCH 09/15] Add selfdestruct decoration

---
 src/components/DecoratedAddressLink.tsx | 6 +++++-
 src/components/InternalSelfDestruct.tsx | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index 2579848..9dcd416 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -15,6 +15,7 @@ type DecoratedAddressLinkProps = {
   text?: string;
   addressCtx?: AddressContext;
   miner?: boolean;
+  selfDestruct?: boolean;
 };
 
 const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
@@ -24,6 +25,7 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
   text,
   addressCtx,
   miner,
+  selfDestruct,
 }) => {
   const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
   const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
@@ -32,7 +34,9 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
     <div
       className={`flex items-baseline space-x-1 ${
         mint ? "italic text-green-500 hover:text-green-700" : ""
-      } ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""}`}
+      } ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""} ${
+        selfDestruct ? "line-through" : ""
+      }`}
     >
       {mint && (
         <span className="text-green-500" title="Mint address">
diff --git a/src/components/InternalSelfDestruct.tsx b/src/components/InternalSelfDestruct.tsx
index bc8eba8..b717d38 100644
--- a/src/components/InternalSelfDestruct.tsx
+++ b/src/components/InternalSelfDestruct.tsx
@@ -36,11 +36,11 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
         <span>Contract</span>
         <div className="flex items-baseline">
           <AddressHighlighter address={transfer.from}>
-            <DecoratedAddressLink address={transfer.from} />
+            <DecoratedAddressLink address={transfer.from} selfDestruct />
           </AddressHighlighter>
         </div>
         {network?.chainId === 1 && transfer.to === CHI_ADDRESS && (
-          <span className="text-gray-400">(CHI Gastoken)</span>
+          <span className="text-gray-400">(Chi Gastoken)</span>
         )}
         {network?.chainId === 1 && transfer.to === GST2_ADDRESS && (
           <span className="text-gray-400">(GST2 Gastoken)</span>

From 26a8e5bea2a7e1b662e665ee8c822a087f0bc74f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 13:01:15 -0300
Subject: [PATCH 10/15] Lower opacity of self-destruct addresses

---
 src/components/DecoratedAddressLink.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index 9dcd416..7fb76f7 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -35,7 +35,7 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
       className={`flex items-baseline space-x-1 ${
         mint ? "italic text-green-500 hover:text-green-700" : ""
       } ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""} ${
-        selfDestruct ? "line-through" : ""
+        selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""
       }`}
     >
       {mint && (

From 00cc2d0d29ce229cd8c88f6f357d1223abb6db75 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 13:29:49 -0300
Subject: [PATCH 11/15] Add contextual global tx from/to addresss highlighting

---
 src/TokenTransferItem.tsx               | 18 ++++++++++++++++--
 src/components/DecoratedAddressLink.tsx | 14 +++++++++-----
 src/components/InternalTransfer.tsx     | 14 ++++++++++++--
 src/transaction/Details.tsx             |  9 ++++++++-
 src/useSelection.ts                     |  2 +-
 5 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index 286d43f..1e171de 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -5,15 +5,22 @@ import AddressHighlighter from "./components/AddressHighlighter";
 import DecoratedAddressLink from "./components/DecoratedAddressLink";
 import TokenLogo from "./components/TokenLogo";
 import FormattedBalance from "./components/FormattedBalance";
-import { AddressContext, TokenMetas, TokenTransfer } from "./types";
+import {
+  AddressContext,
+  TokenMetas,
+  TokenTransfer,
+  TransactionData,
+} from "./types";
 
 type TokenTransferItemProps = {
   t: TokenTransfer;
+  txData: TransactionData;
   tokenMetas: TokenMetas;
 };
 
 const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
   t,
+  txData,
   tokenMetas,
 }) => (
   <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
@@ -27,13 +34,20 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
           <DecoratedAddressLink
             address={t.from}
             addressCtx={AddressContext.FROM}
+            txFrom={t.from === txData.from}
+            txTo={t.from === txData.to}
           />
         </AddressHighlighter>
       </div>
       <div className="flex space-x-1">
         <span className="font-bold">To</span>
         <AddressHighlighter address={t.to}>
-          <DecoratedAddressLink address={t.to} addressCtx={AddressContext.TO} />
+          <DecoratedAddressLink
+            address={t.to}
+            addressCtx={AddressContext.TO}
+            txFrom={t.to === txData.from}
+            txTo={t.to === txData.to}
+          />
         </AddressHighlighter>
       </div>
       <div className="col-span-3 flex space-x-1">
diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index 7fb76f7..f82c7a4 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -16,6 +16,8 @@ type DecoratedAddressLinkProps = {
   addressCtx?: AddressContext;
   miner?: boolean;
   selfDestruct?: boolean;
+  txFrom?: boolean;
+  txTo?: boolean;
 };
 
 const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
@@ -26,17 +28,19 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
   addressCtx,
   miner,
   selfDestruct,
+  txFrom,
+  txTo,
 }) => {
   const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
   const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
 
   return (
     <div
-      className={`flex items-baseline space-x-1 ${
-        mint ? "italic text-green-500 hover:text-green-700" : ""
-      } ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""} ${
-        selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""
-      }`}
+      className={`flex items-baseline space-x-1 ${txFrom ? "bg-red-50" : ""} ${
+        txTo ? "bg-green-50" : ""
+      } ${mint ? "italic text-green-500 hover:text-green-700" : ""} ${
+        burn ? "line-through text-orange-500 hover:text-orange-700" : ""
+      } ${selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""}`}
     >
       {mint && (
         <span className="text-green-500" title="Mint address">
diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx
index af101e0..d0ccbf2 100644
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@@ -33,7 +33,12 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
               fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
             }`}
           >
-            <DecoratedAddressLink address={transfer.from} miner={fromMiner} />
+            <DecoratedAddressLink
+              address={transfer.from}
+              miner={fromMiner}
+              txFrom={transfer.from === txData.from}
+              txTo={transfer.from === txData.to}
+            />
           </div>
         </AddressHighlighter>
       </div>
@@ -45,7 +50,12 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
               toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
             }`}
           >
-            <DecoratedAddressLink address={transfer.to} miner={toMiner} />
+            <DecoratedAddressLink
+              address={transfer.to}
+              miner={toMiner}
+              txFrom={transfer.to === txData.from}
+              txTo={transfer.to === txData.to}
+            />
           </div>
         </AddressHighlighter>
       </div>
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 441226a..cba7a9a 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -68,6 +68,7 @@ const Details: React.FC<DetailsProps> = ({
           <DecoratedAddressLink
             address={txData.from}
             miner={txData.from === txData.miner}
+            txFrom
           />
         </AddressHighlighter>
         <Copy value={txData.from} />
@@ -79,6 +80,7 @@ const Details: React.FC<DetailsProps> = ({
           <DecoratedAddressLink
             address={txData.to}
             miner={txData.to === txData.miner}
+            txTo
           />
         </AddressHighlighter>
         <Copy value={txData.to} />
@@ -101,7 +103,12 @@ const Details: React.FC<DetailsProps> = ({
       <InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
         <div>
           {txData.tokenTransfers.map((t, i) => (
-            <TokenTransferItem key={i} t={t} tokenMetas={txData.tokenMetas} />
+            <TokenTransferItem
+              key={i}
+              t={t}
+              txData={txData}
+              tokenMetas={txData.tokenMetas}
+            />
           ))}
         </div>
       </InfoRow>
diff --git a/src/useSelection.ts b/src/useSelection.ts
index ed66746..a02f1fe 100644
--- a/src/useSelection.ts
+++ b/src/useSelection.ts
@@ -1,7 +1,7 @@
 import React, { useState, useContext } from "react";
 
 export type Selection = {
-  type: string;
+  type: "address";
   content: string;
 };
 

From 2aa6298fdf926662921618fcc2a1658e15b17a58 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 14:47:14 -0300
Subject: [PATCH 12/15] Use decorated addresss component on logs section

---
 src/transaction/Logs.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index bf101fb..f965ecc 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ContentFrame from "../ContentFrame";
-import AddressOrENSName from "../components/AddressOrENSName";
+import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import { TransactionData } from "../types";
 
 type LogsProps = {
@@ -22,7 +22,12 @@ const Logs: React.FC<LogsProps> = ({ txData }) => (
             <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
               <div className="font-bold text-right">Address</div>
               <div className="col-span-11">
-                <AddressOrENSName address={l.address} />
+                <DecoratedAddressLink
+                  address={l.address}
+                  miner={l.address === txData.miner}
+                  txFrom={l.address === txData.from}
+                  txTo={l.address === txData.to}
+                />
               </div>
             </div>
             {l.topics.map((t, i) => (

From 83af14259b8e407e7b1b5b22d172346049070ff2 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 14:56:36 -0300
Subject: [PATCH 13/15] Push token decoration into DecoratedAddressLink
 component

---
 src/TokenTransferItem.tsx               | 27 +++++++++----------------
 src/components/DecoratedAddressLink.tsx | 10 ++++++++-
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index 1e171de..c8d51c8 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import AddressHighlighter from "./components/AddressHighlighter";
 import DecoratedAddressLink from "./components/DecoratedAddressLink";
-import TokenLogo from "./components/TokenLogo";
 import FormattedBalance from "./components/FormattedBalance";
 import {
   AddressContext,
@@ -58,23 +57,15 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             decimals={tokenMetas[t.token].decimals}
           />
         </span>
-        <span className="flex space-x-1 items-baseline truncate">
-          {tokenMetas[t.token] ? (
-            <>
-              <div className="self-center">
-                <TokenLogo address={t.token} name={tokenMetas[t.token].name} />
-              </div>
-              <DecoratedAddressLink
-                address={t.token}
-                text={`${tokenMetas[t.token].name} (${
-                  tokenMetas[t.token].symbol
-                })`}
-              />
-            </>
-          ) : (
-            <DecoratedAddressLink address={t.token} />
-          )}
-        </span>
+        <DecoratedAddressLink
+          address={t.token}
+          text={
+            tokenMetas[t.token]
+              ? `${tokenMetas[t.token].name} (${tokenMetas[t.token].symbol})`
+              : ""
+          }
+          tokenMeta={tokenMetas[t.token]}
+        />
       </div>
     </div>
   </div>
diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index f82c7a4..6d58bf5 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -5,8 +5,9 @@ import {
   faBurn,
   faCoins,
 } from "@fortawesome/free-solid-svg-icons";
+import TokenLogo from "./TokenLogo";
 import AddressOrENSName from "./AddressOrENSName";
-import { AddressContext, ZERO_ADDRESS } from "../types";
+import { AddressContext, TokenMeta, ZERO_ADDRESS } from "../types";
 
 type DecoratedAddressLinkProps = {
   address: string;
@@ -18,6 +19,7 @@ type DecoratedAddressLinkProps = {
   selfDestruct?: boolean;
   txFrom?: boolean;
   txTo?: boolean;
+  tokenMeta?: TokenMeta;
 };
 
 const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
@@ -30,6 +32,7 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
   selfDestruct,
   txFrom,
   txTo,
+  tokenMeta,
 }) => {
   const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
   const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
@@ -57,6 +60,11 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
           <FontAwesomeIcon icon={faCoins} size="1x" />
         </span>
       )}
+      {tokenMeta && (
+        <div className="self-center">
+          <TokenLogo address={address} name={tokenMeta.name} />
+        </div>
+      )}
       <AddressOrENSName
         address={address}
         ensName={ensName}

From bd421700508ee82b5aef1daeb3df841bdabe57be Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 15:00:15 -0300
Subject: [PATCH 14/15] Apply address highlighting to token names

---
 src/TokenTransferItem.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index c8d51c8..83c5e81 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -57,15 +57,17 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             decimals={tokenMetas[t.token].decimals}
           />
         </span>
-        <DecoratedAddressLink
-          address={t.token}
-          text={
-            tokenMetas[t.token]
-              ? `${tokenMetas[t.token].name} (${tokenMetas[t.token].symbol})`
-              : ""
-          }
-          tokenMeta={tokenMetas[t.token]}
-        />
+        <AddressHighlighter address={t.token}>
+          <DecoratedAddressLink
+            address={t.token}
+            text={
+              tokenMetas[t.token]
+                ? `${tokenMetas[t.token].name} (${tokenMetas[t.token].symbol})`
+                : ""
+            }
+            tokenMeta={tokenMetas[t.token]}
+          />
+        </AddressHighlighter>
       </div>
     </div>
   </div>

From c3684151bf1e10c62a7633222b75fd790956ba87 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 20:49:54 -0300
Subject: [PATCH 15/15] Unified node-side tracing APIs

---
 src/Transaction.tsx                  |  7 +------
 src/components/InternalOperation.tsx | 25 +++++++++++++++++++++++++
 src/nodeFunctions.ts                 | 20 +-------------------
 src/transaction/Details.tsx          | 14 +++++---------
 src/types.ts                         | 11 ++++++-----
 src/useErigonHooks.ts                | 25 +++++++++----------------
 6 files changed, 47 insertions(+), 55 deletions(-)
 create mode 100644 src/components/InternalOperation.tsx

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 96b7bf9..ce564f9 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -111,12 +111,7 @@ const Transaction: React.FC = () => {
       return false;
     }
 
-    for (const t of intTransfers.transfers) {
-      if (t.to === txData.miner) {
-        return true;
-      }
-    }
-    for (const t of intTransfers.selfDestructs) {
+    for (const t of intTransfers) {
       if (t.to === txData.miner) {
         return true;
       }
diff --git a/src/components/InternalOperation.tsx b/src/components/InternalOperation.tsx
new file mode 100644
index 0000000..0ae0a38
--- /dev/null
+++ b/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);
diff --git a/src/nodeFunctions.ts b/src/nodeFunctions.ts
index b3ff583..2cb5558 100644
--- a/src/nodeFunctions.ts
+++ b/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),
-      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({
+      type: t.type,
       from: ethers.utils.getAddress(t.from),
       to: ethers.utils.getAddress(t.to),
       value: t.value,
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index cba7a9a..7d18098 100644
--- a/src/transaction/Details.tsx
+++ b/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 InternalSelfDestruct from "../components/InternalSelfDestruct";
+import InternalOperation from "../components/InternalOperation";
 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) => (
-            <InternalTransfer key={i} txData={txData} transfer={t} />
-          ))}
-          {internalTransfers.selfDestructs.map((t, i) => (
-            <InternalSelfDestruct key={i} txData={txData} transfer={t} />
+          {internalTransfers.map((t, i) => (
+            <InternalOperation key={i} txData={txData} transfer={t} />
           ))}
         </div>
       )}
diff --git a/src/types.ts b/src/types.ts
index 94301e5..29cc6bc 100644
--- a/src/types.ts
+++ b/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;
diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts
index 0ca4a06..447408c 100644
--- a/src/useErigonHooks.ts
+++ b/src/useErigonHooks.ts
@@ -1,16 +1,13 @@
 import { ethers } from "ethers";
 import { useState, useEffect } from "react";
-import {
-  getTransactionSelfDestructs,
-  getTransactionTransfers,
-} from "./nodeFunctions";
-import { InternalTransfers, TransactionData } from "./types";
+import { getTransactionTransfers } from "./nodeFunctions";
+import { TransactionData, Transfer } from "./types";
 
 export const useInternalTransfers = (
   provider: ethers.providers.JsonRpcProvider | undefined,
   txData: TransactionData | undefined
-): InternalTransfers | undefined => {
-  const [intTransfers, setIntTransfers] = useState<InternalTransfers>();
+): Transfer[] | undefined => {
+  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(
-        provider,
-        txData
-      );
-      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);
+      for (const t of _transfers) {
+        t.from = provider.formatter.address(t.from);
+        t.to = provider.formatter.address(t.to);
+        t.value = provider.formatter.bigNumber(t.value);
       }
-      setIntTransfers({ transfers: _transfers, selfDestructs: _selfDestructs });
+      setIntTransfers(_transfers);
     };
     traceTransfers();
   }, [provider, txData]);