Signal miner address on transaction page and blokc ktransaction list

src/BlockTransactions.tsx

@@ -55,6 +55,7 @@ const BlockTransactions: React.FC = () => {
             return {
               blockNumber: blockNumber.toNumber(),
               timestamp: _block.timestamp,
+              miner: _block.miner,
               idx: i,
               hash: t.hash,
               from: t.from,

src/Transaction.tsx

@@ -5,7 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCheckCircle,
   faTimesCircle,
-  faAngleRight,
   faCaretRight,
 } from "@fortawesome/free-solid-svg-icons";
 import { provider } from "./ethersconfig";
@@ -17,10 +16,18 @@ import BlockLink from "./components/BlockLink";
 import AddressLink from "./components/AddressLink";
 import Copy from "./components/Copy";
 import Timestamp from "./components/Timestamp";
+import InternalTransfer from "./components/InternalTransfer";
 import TokenLogo from "./components/TokenLogo";
 import GasValue from "./components/GasValue";
 import FormattedBalance from "./components/FormattedBalance";
 import erc20 from "./erc20.json";
+import {
+  From,
+  TokenMetas,
+  TokenTransfer,
+  TransactionData,
+  Transfer,
+} from "./types";
 
 const USE_OTS = true;
 
@@ -31,56 +38,6 @@ type TransactionParams = {
   txhash: string;
 };
 
-type TransactionData = {
-  transactionHash: string;
-  status: boolean;
-  blockNumber: number;
-  transactionIndex: number;
-  confirmations: number;
-  timestamp: number;
-  from: string;
-  to: string;
-  value: BigNumber;
-  tokenTransfers: TokenTransfer[];
-  tokenMetas: TokenMetas;
-  fee: BigNumber;
-  gasPrice: BigNumber;
-  gasLimit: BigNumber;
-  gasUsed: BigNumber;
-  gasUsedPerc: number;
-  nonce: number;
-  data: string;
-  logs: ethers.providers.Log[];
-};
-
-type From = {
-  current: string;
-  depth: number;
-};
-
-type Transfer = {
-  from: string;
-  to: string;
-  value: BigNumber;
-};
-
-type TokenTransfer = {
-  token: string;
-  from: string;
-  to: string;
-  value: BigNumber;
-};
-
-type TokenMeta = {
-  name: string;
-  symbol: string;
-  decimals: number;
-};
-
-type TokenMetas = {
-  [tokenAddress: string]: TokenMeta;
-};
-
 const Transaction: React.FC = () => {
   const params = useParams<TransactionParams>();
   const { txhash } = params;
@@ -142,6 +99,7 @@ const Transaction: React.FC = () => {
         transactionIndex: _receipt.transactionIndex,
         confirmations: _receipt.confirmations,
         timestamp: _block.timestamp,
+        miner: _block.miner,
         from: _receipt.from,
         to: _receipt.to,
         value: _response.value,
@@ -289,17 +247,11 @@ const Transaction: React.FC = () => {
                   {transfers ? (
                     <div className="mt-2 space-y-1">
                       {transfers.map((t, i) => (
-                        <div key={i} className="flex space-x-1 text-xs">
+                        <InternalTransfer
-                          <span className="text-gray-500">
+                          key={i}
-                            <FontAwesomeIcon icon={faAngleRight} size="1x" />{" "}
+                          txData={txData}
-                            TRANSFER
+                          transfer={t}
-                          </span>
+                        />
-                          <span>{ethers.utils.formatEther(t.value)} Ether</span>
-                          <span className="text-gray-500">From</span>
-                          <AddressLink address={t.from} />
-                          <span className="text-gray-500">To</span>
-                          <AddressLink address={t.to} />
-                        </div>
                       ))}
                     </div>
                   ) : (

src/components/InternalTransfer.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleRight, faCoins } from "@fortawesome/free-solid-svg-icons";
+import AddressLink from "./AddressLink";
+import { TransactionData, Transfer } from "../types";
+
+type InternalTransferProps = {
+  txData: TransactionData;
+  transfer: Transfer;
+};
+
+const InternalTransfer: React.FC<InternalTransferProps> = ({
+  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">
+        <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
+      </span>
+      <span>{ethers.utils.formatEther(transfer.value)} Ether</span>
+      <span className="text-gray-500">From</span>
+      <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>
+      <span className="text-gray-500">To</span>
+      <div
+        className={`flex items-baseline space-x-1 px-2 py-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>
+    </div>
+  );
+};
+
+export default React.memo(InternalTransfer);

src/search/TransactionItem.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+import {
+  faExclamationCircle,
+  faCoins,
+} from "@fortawesome/free-solid-svg-icons";
 import MethodName from "../components/MethodName";
 import BlockLink from "../components/BlockLink";
 import TransactionLink from "../components/TransactionLink";
@@ -63,11 +66,18 @@ 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 && (
-            <AddressOrENSName
+            <div className="flex items-baseline space-x-1">
-              address={tx.from}
+              {tx.miner && tx.miner === tx.from && (
-              ensName={ensFrom}
+                <span className="text-yellow-400" title="Miner address">
-              selectedAddress={selectedAddress}
+                  <FontAwesomeIcon icon={faCoins} size="1x" />
-            />
+                </span>
+              )}
+              <AddressOrENSName
+                address={tx.from}
+                ensName={ensFrom}
+                selectedAddress={selectedAddress}
+              />
+            </div>
           )}
         </span>
         <span>

src/types.ts

@@ -1,8 +1,9 @@
-import { BigNumber } from "ethers";
+import { ethers, BigNumber } from "ethers";
 
 export type ProcessedTransaction = {
   blockNumber: number;
   timestamp: number;
+  miner?: string;
   idx: number;
   hash: string;
   from?: string;
@@ -23,3 +24,54 @@ export type TransactionChunk = {
 export type ENSReverseCache = {
   [address: string]: string;
 };
+
+export type TransactionData = {
+  transactionHash: string;
+  status: boolean;
+  blockNumber: number;
+  transactionIndex: number;
+  confirmations: number;
+  timestamp: number;
+  miner?: string;
+  from: string;
+  to: string;
+  value: BigNumber;
+  tokenTransfers: TokenTransfer[];
+  tokenMetas: TokenMetas;
+  fee: BigNumber;
+  gasPrice: BigNumber;
+  gasLimit: BigNumber;
+  gasUsed: BigNumber;
+  gasUsedPerc: number;
+  nonce: number;
+  data: string;
+  logs: ethers.providers.Log[];
+};
+
+export type From = {
+  current: string;
+  depth: number;
+};
+
+export type Transfer = {
+  from: string;
+  to: string;
+  value: BigNumber;
+};
+
+export type TokenTransfer = {
+  token: string;
+  from: string;
+  to: string;
+  value: BigNumber;
+};
+
+export type TokenMeta = {
+  name: string;
+  symbol: string;
+  decimals: number;
+};
+
+export type TokenMetas = {
+  [tokenAddress: string]: TokenMeta;
+};