Highlight flashbot-like txs inside blocks

src/BlockTransactions.tsx

@@ -11,7 +11,7 @@ import ResultHeader from "./search/ResultHeader";
 import PendingResults from "./search/PendingResults";
 import TransactionItem from "./search/TransactionItem";
 import BlockLink from "./components/BlockLink";
-import { ProcessedTransaction } from "./types";
+import { ProcessedTransaction, Transfer } from "./types";
 import { PAGE_SIZE } from "./params";
 import { useFeeToggler } from "./search/useFeeToggler";
 import { useENSCache } from "./useReverseCache";
@@ -49,28 +49,51 @@ const BlockTransactions: React.FC = () => {
       ]);
       document.title = `Block #${_block.number} Transactions | Otterscan`;
 
-      setTxs(
-        _block.transactions
-          .map((t, i) => {
-            return {
-              blockNumber: blockNumber.toNumber(),
-              timestamp: _block.timestamp,
-              miner: _block.miner,
-              idx: i,
-              hash: t.hash,
-              from: t.from,
-              to: t.to,
-              value: t.value,
-              fee: provider.formatter
-                .bigNumber(_receipts[i].gasUsed)
-                .mul(t.gasPrice!),
-              gasPrice: t.gasPrice!,
-              data: t.data,
-              status: provider.formatter.number(_receipts[i].status),
-            };
-          })
-          .reverse()
+      const responses = _block.transactions
+        .map((t, i): ProcessedTransaction => {
+          return {
+            blockNumber: blockNumber.toNumber(),
+            timestamp: _block.timestamp,
+            miner: _block.miner,
+            idx: i,
+            hash: t.hash,
+            from: t.from,
+            to: t.to,
+            value: t.value,
+            fee: provider.formatter
+              .bigNumber(_receipts[i].gasUsed)
+              .mul(t.gasPrice!),
+            gasPrice: t.gasPrice!,
+            data: t.data,
+            status: provider.formatter.number(_receipts[i].status),
+          };
+        })
+        .reverse();
+
+      const internalChecks = await Promise.all(
+        responses.map(async (res) => {
+          const r = await provider.send("ots_getTransactionTransfers", [
+            res.hash,
+          ]);
+          for (const t of r) {
+            if (
+              res.miner &&
+              (res.miner === ethers.utils.getAddress(t.from) ||
+                res.miner === ethers.utils.getAddress(t.to))
+            ) {
+              return true;
+            }
+          }
+          return false;
+        })
       );
+      for (let i = 0; i < responses.length; i++) {
+        if (internalChecks[i]) {
+          responses[i].internalMinerInteraction = true;
+        }
+      }
+
+      setTxs(responses);
     };
     readBlock();
   }, [blockNumber]);

src/components/TransactionDirection.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCoins,
+  faLongArrowAltRight,
+} from "@fortawesome/free-solid-svg-icons";
 
 export enum Direction {
   IN,
@@ -9,12 +12,18 @@ export enum Direction {
   INTERNAL,
 }
 
+export enum Flags {
+  MINER,
+}
+
 type TransactionDirectionProps = {
   direction?: Direction;
+  flags?: Flags;
 };
 
 const TransactionDirection: React.FC<TransactionDirectionProps> = ({
   direction,
+  flags,
 }) => {
   let bgColor = "bg-green-50";
   let fgColor = "text-green-500";
@@ -34,6 +43,11 @@ const TransactionDirection: React.FC<TransactionDirectionProps> = ({
     msg = "INT";
   }
 
+  if (flags === Flags.MINER) {
+    bgColor = "bg-yellow-50";
+    fgColor = "text-yellow-400";
+  }
+
   return (
     <span
       className={`${bgColor} ${fgColor} ${
@@ -42,10 +56,14 @@ const TransactionDirection: React.FC<TransactionDirectionProps> = ({
           : "w-5 h-5 rounded-full flex justify-center items-center"
       } text-xs font-bold`}
     >
-      {msg ?? (
-        <span>
-          <FontAwesomeIcon icon={faLongArrowAltRight} />
-        </span>
+      {flags === Flags.MINER ? (
+        <FontAwesomeIcon icon={faCoins} size="1x" />
+      ) : (
+        msg ?? (
+          <span>
+            <FontAwesomeIcon icon={faLongArrowAltRight} />
+          </span>
+        )
       )}
     </span>
   );

src/search/TransactionItem.tsx

@@ -11,6 +11,7 @@ import AddressOrENSName from "../components/AddressOrENSName";
 import TimestampAge from "../components/TimestampAge";
 import TransactionDirection, {
   Direction,
+  Flags,
 } from "../components/TransactionDirection";
 import TransactionValue from "../components/TransactionValue";
 import { ENSReverseCache, ProcessedTransaction } from "../types";
@@ -45,9 +46,14 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
 
   const ensFrom = ensCache && tx.from && ensCache[tx.from];
   const ensTo = ensCache && tx.to && ensCache[tx.to];
+  const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction;
 
   return (
-    <div className="grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 hover:bg-gray-100 px-2 py-3">
+    <div
+      className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 hover:bg-gray-100 ${
+        flash ? "bg-yellow-100" : ""
+      } px-2 py-3`}
+    >
       <div className="col-span-2 flex space-x-1 items-baseline">
         {tx.status === 0 && (
           <span className="text-red-600" title="Transaction reverted">
@@ -81,7 +87,10 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
           )}
         </span>
         <span>
-          <TransactionDirection direction={direction} />
+          <TransactionDirection
+            direction={direction}
+            flags={tx.internalMinerInteraction ? Flags.MINER : undefined}
+          />
         </span>
       </span>
       <span className="col-span-2 truncate" title={tx.to}>

src/types.ts

@@ -8,6 +8,7 @@ export type ProcessedTransaction = {
   hash: string;
   from?: string;
   to?: string;
+  internalMinerInteraction?: boolean;
   value: BigNumber;
   fee: BigNumber;
   gasPrice: BigNumber;