Apply miner icon directly on AddressOrENSName component

src/Block.tsx

@@ -14,7 +14,7 @@ import NavButton from "./components/NavButton";
 import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
 import BlockLink from "./components/BlockLink";
-import AddressLink from "./components/AddressLink";
+import AddressOrENSName from "./components/AddressOrENSName";
 import TransactionValue from "./components/TransactionValue";
 import HexValue from "./components/HexValue";
 import { useLatestBlockNumber } from "./useLatestBlock";
@@ -154,9 +154,10 @@ const Block: React.FC = () => {
             in this block
           </InfoRow>
           <InfoRow title="Mined by">
-            <div className="flex">
-              <AddressLink address={block.miner} />
-            </div>
+            <AddressOrENSName
+              address={block.miner}
+              minerAddress={block.miner}
+            />
           </InfoRow>
           <InfoRow title="Block Reward">
             <TransactionValue value={block.blockReward.add(block.feeReward)} />

src/Transaction.tsx

@@ -13,6 +13,7 @@ import StandardSubtitle from "./StandardSubtitle";
 import Tab from "./components/Tab";
 import ContentFrame from "./ContentFrame";
 import BlockLink from "./components/BlockLink";
+import AddressOrENSName from "./components/AddressOrENSName";
 import AddressLink from "./components/AddressLink";
 import Copy from "./components/Copy";
 import Timestamp from "./components/Timestamp";
@@ -194,13 +195,19 @@ const Transaction: React.FC = () => {
                 </InfoRow>
                 <InfoRow title="From">
                   <div className="flex items-baseline space-x-2">
-                    <AddressLink address={txData.from} />
+                    <AddressOrENSName
+                      address={txData.from}
+                      minerAddress={txData.miner}
+                    />
                     <Copy value={txData.from} />
                   </div>
                 </InfoRow>
                 <InfoRow title="Interacted With (To)">
                   <div className="flex items-baseline space-x-2">
-                    <AddressLink address={txData.to} />
+                    <AddressOrENSName
+                      address={txData.to}
+                      minerAddress={txData.miner}
+                    />
                     <Copy value={txData.to} />
                   </div>
                   {transfers && (
@@ -284,7 +291,11 @@ const Transaction: React.FC = () => {
                       />{" "}
                       Gwei)
                     </span>
-                    {sendsEthToMiner && <span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">Flashbots</span>}
+                    {sendsEthToMiner && (
+                      <span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
+                        Flashbots
+                      </span>
+                    )}
                   </div>
                 </InfoRow>
                 <InfoRow title="Ether Price">N/A</InfoRow>

src/components/AddressOrENSName.tsx

@@ -1,4 +1,6 @@
 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";
@@ -8,30 +10,39 @@ type AddressOrENSNameProps = {
   address: string;
   ensName?: string;
   selectedAddress?: string;
+  minerAddress?: string;
 };
 
 const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   address,
   ensName,
   selectedAddress,
-}) => {
-  return address === selectedAddress ? (
-    <>
-      {ensName ? (
-        <ENSName name={ensName} address={address} />
-      ) : (
-        <Address address={address} />
-      )}
-    </>
-  ) : (
-    <>
-      {ensName ? (
-        <ENSNameLink name={ensName} address={address} />
-      ) : (
-        <AddressLink address={address} />
-      )}
-    </>
-  );
-};
+  minerAddress,
+}) => (
+  <div className="flex items-baseline space-x-1">
+    {minerAddress !== undefined && minerAddress === address && (
+      <span className="text-yellow-400" title="Miner address">
+        <FontAwesomeIcon icon={faCoins} size="1x" />
+      </span>
+    )}
+    {address === selectedAddress ? (
+      <>
+        {ensName ? (
+          <ENSName name={ensName} address={address} />
+        ) : (
+          <Address address={address} />
+        )}
+      </>
+    ) : (
+      <>
+        {ensName ? (
+          <ENSNameLink name={ensName} address={address} />
+        ) : (
+          <AddressLink address={address} />
+        )}
+      </>
+    )}
+  </div>
+);
 
 export default React.memo(AddressOrENSName);

src/search/TransactionItem.tsx

@@ -1,9 +1,6 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faExclamationCircle,
-  faCoins,
-} from "@fortawesome/free-solid-svg-icons";
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import MethodName from "../components/MethodName";
 import BlockLink from "../components/BlockLink";
 import TransactionLink from "../components/TransactionLink";
@@ -72,18 +69,12 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
       <span className="col-span-2 flex justify-between items-baseline space-x-2 pr-2">
         <span className="truncate" title={tx.from}>
           {tx.from && (
-            <div className="flex items-baseline space-x-1">
-              {tx.miner && tx.miner === tx.from && (
-                <span className="text-yellow-400" title="Miner address">
-                  <FontAwesomeIcon icon={faCoins} size="1x" />
-                </span>
-              )}
-              <AddressOrENSName
-                address={tx.from}
-                ensName={ensFrom}
-                selectedAddress={selectedAddress}
-              />
-            </div>
+            <AddressOrENSName
+              address={tx.from}
+              ensName={ensFrom}
+              selectedAddress={selectedAddress}
+              minerAddress={tx.miner}
+            />
           )}
         </span>
         <span>
@@ -99,6 +90,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
             address={tx.to}
             ensName={ensTo}
             selectedAddress={selectedAddress}
+            minerAddress={tx.miner}
           />
         )}
       </span>