Add contextual global tx from/to addresss highlighting

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">

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">

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>

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>

src/useSelection.ts

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from "react";
 
 export type Selection = {
-  type: string;
+  type: "address";
   content: string;
 };