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 1/3] 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 2/3] 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 3/3] 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} />
           ))}