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 1/5] 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 2/5] 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 3/5] 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 4/5] 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 5/5] 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>