diff --git a/src/Block.tsx b/src/Block.tsx
index bcffc27..9fd6e25 100644
--- a/src/Block.tsx
+++ b/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
-
+
diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx
index c780485..e5712c0 100644
--- a/src/BlockTransactions.tsx
+++ b/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++) {
- if (internalChecks[i]) {
- responses[i].internalMinerInteraction = true;
- }
- }
-
- setTxs(responses);
+ const processedResponses = responses.map((r, i): ProcessedTransaction => {
+ return { ...r, internalMinerInteraction: internalChecks[i] };
+ });
+ setTxs(processedResponses);
};
readBlock();
}, [blockNumber]);
diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
new file mode 100644
index 0000000..64351ee
--- /dev/null
+++ b/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 = ({
+ t,
+ tokenMetas,
+}) => (
+
+
+
+
+
From
+
+
To
+
+
For
+
+
+
+
+ {tokenMetas[t.token] ? (
+ <>
+
+
+
+
+ >
+ ) : (
+
+ )}
+
+
+);
+
+export default React.memo(TokenTransferItem);
diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index da0d33d..a461501 100644
--- a/src/Transaction.tsx
+++ b/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 {
- From,
- TokenMetas,
- TokenTransfer,
- TransactionData,
- Transfer,
-} from "./types";
-
-const USE_OTS = true;
+import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
const TRANSFER_TOPIC =
"0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
@@ -120,49 +112,18 @@ const Transaction: React.FC = () => {
}, [txhash]);
const [transfers, setTransfers] = useState();
-
- const traceTransfersUsingDebugTrace = async () => {
- const r = await provider.send("debug_traceTransaction", [
- 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),
- });
+ const sendsEthToMiner = useMemo(() => {
+ if (!txData || !transfers) {
+ return false;
}
- 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 = () => {
- {transfers ? (
+ {transfers && (
{transfers.map((t, i) => (
{
/>
))}
- ) : (
- !USE_OTS && (
-
- )
)}
@@ -271,48 +227,13 @@ const Transaction: React.FC = () => {
title={`Tokens Transferred (${txData.tokenTransfers.length})`}
>
- {txData.tokenTransfers &&
- txData.tokenTransfers.map((t, i) => (
-
-
-
-
-
From
-
-
To
-
-
For
-
-
-
-
- {txData.tokenMetas[t.token] ? (
- <>
-
-
-
-
- >
- ) : (
-
- )}
-
-
- ))}
+ {txData.tokenTransfers.map((t, i) => (
+
+ ))}
)}
@@ -325,9 +246,21 @@ const Transaction: React.FC = () => {
Ether
- Ether (
- {" "}
- Gwei)
+
+
+ Ether (
+ {" "}
+ Gwei)
+
+ {sendsEthToMiner && (
+
+ Flashbots
+
+ )}
+
N/A
diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx
index e3cfdb9..ce1ec8a 100644
--- a/src/components/AddressOrENSName.tsx
+++ b/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 = ({
address,
ensName,
selectedAddress,
-}) => {
- return address === selectedAddress ? (
- <>
- {ensName ? (
-
- ) : (
-
- )}
- >
- ) : (
- <>
- {ensName ? (
-
- ) : (
-
- )}
- >
- );
-};
+ minerAddress,
+}) => (
+
+ {minerAddress !== undefined && minerAddress === address && (
+
+
+
+ )}
+ {address === selectedAddress ? (
+ <>
+ {ensName ? (
+
+ ) : (
+
+ )}
+ >
+ ) : (
+ <>
+ {ensName ? (
+
+ ) : (
+
+ )}
+ >
+ )}
+
+);
export default React.memo(AddressOrENSName);
diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx
index 57ce084..7cfaf76 100644
--- a/src/search/TransactionItem.tsx
+++ b/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";
@@ -50,8 +47,8 @@ const TransactionItem: React.FC = ({
return (
@@ -72,18 +69,12 @@ const TransactionItem: React.FC
= ({
{tx.from && (
-
- {tx.miner && tx.miner === tx.from && (
-
-
-
- )}
-
-
+
)}
@@ -99,6 +90,7 @@ const TransactionItem: React.FC = ({
address={tx.to}
ensName={ensTo}
selectedAddress={selectedAddress}
+ minerAddress={tx.miner}
/>
)}