Merge branch 'feature/flash-tx-ui-tweaks' into develop

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">
+            <AddressOrENSName
-              <AddressLink address={block.miner} />
+              address={block.miner}
-            </div>
+              minerAddress={block.miner}
+            />
           </InfoRow>
           <InfoRow title="Block Reward">
             <TransactionValue value={block.blockReward.add(block.feeReward)} />

src/BlockTransactions.tsx

@@ -69,6 +69,7 @@ const BlockTransactions: React.FC = () => {
           };
         })
         .reverse();
+      setTxs(responses);
 
       const internalChecks = await Promise.all(
         responses.map(async (res) => {
@@ -87,13 +88,10 @@ const BlockTransactions: React.FC = () => {
           return false;
         })
       );
-      for (let i = 0; i < responses.length; i++) {
+      const processedResponses = responses.map((r, i): ProcessedTransaction => {
-        if (internalChecks[i]) {
+        return { ...r, internalMinerInteraction: internalChecks[i] };
-          responses[i].internalMinerInteraction = true;
+      });
-        }
+      setTxs(processedResponses);
-      }
-
-      setTxs(responses);
     };
     readBlock();
   }, [blockNumber]);

src/TokenTransferItem.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
+import AddressLink from "./components/AddressLink";
+import AddressOrENSName from "./components/AddressOrENSName";
+import TokenLogo from "./components/TokenLogo";
+import FormattedBalance from "./components/FormattedBalance";
+import { TokenMetas, TokenTransfer } from "./types";
+
+type TokenTransferItemProps = {
+  t: TokenTransfer;
+  tokenMetas: TokenMetas;
+};
+
+const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
+  t,
+  tokenMetas,
+}) => (
+  <div className="flex items-baseline space-x-2 truncate">
+    <span className="text-gray-500">
+      <FontAwesomeIcon icon={faCaretRight} size="1x" />
+    </span>
+    <span className="font-bold">From</span>
+    <AddressOrENSName address={t.from} />
+    <span className="font-bold">To</span>
+    <AddressOrENSName address={t.to} />
+    <span className="font-bold">For</span>
+    <span>
+      <FormattedBalance
+        value={t.value}
+        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>
+          <AddressLink
+            address={t.token}
+            text={`${tokenMetas[t.token].name} (${tokenMetas[t.token].symbol})`}
+          />
+        </>
+      ) : (
+        <AddressOrENSName address={t.token} />
+      )}
+    </span>
+  </div>
+);
+
+export default React.memo(TokenTransferItem);

src/Transaction.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Route, Switch, useParams } from "react-router-dom";
 import { BigNumber, ethers } from "ethers";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCheckCircle,
   faTimesCircle,
-  faCaretRight,
 } from "@fortawesome/free-solid-svg-icons";
 import { provider } from "./ethersconfig";
 import StandardFrame from "./StandardFrame";
@@ -13,23 +12,16 @@ 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";
 import InternalTransfer from "./components/InternalTransfer";
-import TokenLogo from "./components/TokenLogo";
 import GasValue from "./components/GasValue";
 import FormattedBalance from "./components/FormattedBalance";
+import TokenTransferItem from "./TokenTransferItem";
 import erc20 from "./erc20.json";
-import {
+import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
-  From,
-  TokenMetas,
-  TokenTransfer,
-  TransactionData,
-  Transfer,
-} from "./types";
-
-const USE_OTS = true;
 
 const TRANSFER_TOPIC =
   "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
@@ -120,49 +112,18 @@ const Transaction: React.FC = () => {
   }, [txhash]);
 
   const [transfers, setTransfers] = useState<Transfer[]>();
-
+  const sendsEthToMiner = useMemo(() => {
-  const traceTransfersUsingDebugTrace = async () => {
+    if (!txData || !transfers) {
-    const r = await provider.send("debug_traceTransaction", [
+      return false;
-      txData?.transactionHash,
-      { disableStorage: true, disableMemory: true },
-    ]);
-    const fromStack: From[] = [
-      {
-        current: txData!.to,
-        depth: 0,
-      },
-    ];
-    const _transfers: Transfer[] = [];
-    for (const l of r.structLogs) {
-      if (l.op !== "CALL") {
-        if (parseInt(l.depth) === fromStack[fromStack.length - 1].depth) {
-          fromStack.pop();
-        }
-        continue;
-      }
-
-      const { stack } = l;
-      const addr = stack[stack.length - 2].slice(24);
-      const value = BigNumber.from("0x" + stack[stack.length - 3]);
-      if (!value.isZero()) {
-        const t: Transfer = {
-          from: ethers.utils.getAddress(
-            fromStack[fromStack.length - 1].current
-          ),
-          to: ethers.utils.getAddress(addr),
-          value,
-        };
-        _transfers.push(t);
-      }
-
-      fromStack.push({
-        current: addr,
-        depth: parseInt(l.depth),
-      });
     }
 
-    setTransfers(_transfers);
+    for (const t of transfers) {
-  };
+      if (t.to === txData.miner) {
+        return true;
+      }
+    }
+    return false;
+  }, [txData, transfers]);
 
   const traceTransfersUsingOtsTrace = useCallback(async () => {
     if (!txData) {
@@ -184,9 +145,7 @@ const Transaction: React.FC = () => {
     setTransfers(_transfers);
   }, [txData]);
   useEffect(() => {
-    if (USE_OTS) {
+    traceTransfersUsingOtsTrace();
-      traceTransfersUsingOtsTrace();
-    }
   }, [traceTransfersUsingOtsTrace]);
 
   return (
@@ -235,16 +194,22 @@ 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 ? (
+                  {transfers && (
                     <div className="mt-2 space-y-1">
                       {transfers.map((t, i) => (
                         <InternalTransfer
@@ -254,15 +219,6 @@ const Transaction: React.FC = () => {
                         />
                       ))}
                     </div>
-                  ) : (
-                    !USE_OTS && (
-                      <button
-                        className="rounded focus:outline-none bg-gray-100 mt-2 px-3 py-2"
-                        onClick={traceTransfersUsingDebugTrace}
-                      >
-                        Trace transfers
-                      </button>
-                    )
                   )}
                 </InfoRow>
                 <InfoRow title="Transaction Action"></InfoRow>
@@ -271,48 +227,13 @@ const Transaction: React.FC = () => {
                     title={`Tokens Transferred (${txData.tokenTransfers.length})`}
                   >
                     <div className="space-y-2">
-                      {txData.tokenTransfers &&
+                      {txData.tokenTransfers.map((t, i) => (
-                        txData.tokenTransfers.map((t, i) => (
+                        <TokenTransferItem
-                          <div
+                          key={i}
-                            className="flex items-baseline space-x-2 truncate"
+                          t={t}
-                            key={i}
+                          tokenMetas={txData.tokenMetas}
-                          >
+                        />
-                            <span className="text-gray-500">
+                      ))}
-                              <FontAwesomeIcon icon={faCaretRight} size="1x" />
-                            </span>
-                            <span className="font-bold">From</span>
-                            <AddressLink address={t.from} />
-                            <span className="font-bold">To</span>
-                            <AddressLink address={t.to} />
-                            <span className="font-bold">For</span>
-                            <span>
-                              <FormattedBalance
-                                value={t.value}
-                                decimals={txData.tokenMetas[t.token].decimals}
-                              />
-                            </span>
-                            <span className="flex space-x-1 items-baseline truncate">
-                              {txData.tokenMetas[t.token] ? (
-                                <>
-                                  <div className="self-center">
-                                    <TokenLogo
-                                      address={t.token}
-                                      name={txData.tokenMetas[t.token].name}
-                                    />
-                                  </div>
-                                  <AddressLink
-                                    address={t.token}
-                                    text={`${
-                                      txData.tokenMetas[t.token].name
-                                    } (${txData.tokenMetas[t.token].symbol})`}
-                                  />
-                                </>
-                              ) : (
-                                <AddressLink address={t.token} />
-                              )}
-                            </span>
-                          </div>
-                        ))}
                     </div>
                   </InfoRow>
                 )}
@@ -325,9 +246,21 @@ const Transaction: React.FC = () => {
                   <FormattedBalance value={txData.fee} /> Ether
                 </InfoRow>
                 <InfoRow title="Gas Price">
-                  <FormattedBalance value={txData.gasPrice} /> Ether (
+                  <div className="flex items-baseline space-x-1">
-                  <FormattedBalance value={txData.gasPrice} decimals={9} />{" "}
+                    <span>
-                  Gwei)
+                      <FormattedBalance value={txData.gasPrice} /> Ether (
+                      <FormattedBalance
+                        value={txData.gasPrice}
+                        decimals={9}
+                      />{" "}
+                      Gwei)
+                    </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>
                 <InfoRow title="Gas Limit">

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,
-}) => {
+  minerAddress,
-  return address === selectedAddress ? (
+}) => (
-    <>
+  <div className="flex items-baseline space-x-1 truncate">
-      {ensName ? (
+    {minerAddress !== undefined && minerAddress === address && (
-        <ENSName name={ensName} address={address} />
+      <span className="text-yellow-400" title="Miner address">
-      ) : (
+        <FontAwesomeIcon icon={faCoins} size="1x" />
-        <Address address={address} />
+      </span>
-      )}
+    )}
-    </>
+    {address === selectedAddress ? (
-  ) : (
+      <>
-    <>
+        {ensName ? (
-      {ensName ? (
+          <ENSName name={ensName} address={address} />
-        <ENSNameLink name={ensName} address={address} />
+        ) : (
-      ) : (
+          <Address address={address} />
-        <AddressLink 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 {
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
-  faExclamationCircle,
-  faCoins,
-} from "@fortawesome/free-solid-svg-icons";
 import MethodName from "../components/MethodName";
 import BlockLink from "../components/BlockLink";
 import TransactionLink from "../components/TransactionLink";
@@ -50,8 +47,8 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
 
   return (
     <div
-      className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 hover:bg-gray-100 ${
+      className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 ${
-        flash ? "bg-yellow-100" : ""
+        flash ? "bg-yellow-100 hover:bg-yellow-200" : "hover:bg-gray-100"
       } px-2 py-3`}
     >
       <div className="col-span-2 flex space-x-1 items-baseline">
@@ -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">
+            <AddressOrENSName
-              {tx.miner && tx.miner === tx.from && (
+              address={tx.from}
-                <span className="text-yellow-400" title="Miner address">
+              ensName={ensFrom}
-                  <FontAwesomeIcon icon={faCoins} size="1x" />
+              selectedAddress={selectedAddress}
-                </span>
+              minerAddress={tx.miner}
-              )}
+            />
-              <AddressOrENSName
-                address={tx.from}
-                ensName={ensFrom}
-                selectedAddress={selectedAddress}
-              />
-            </div>
           )}
         </span>
         <span>
@@ -99,6 +90,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
             address={tx.to}
             ensName={ensTo}
             selectedAddress={selectedAddress}
+            minerAddress={tx.miner}
           />
         )}
       </span>