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} /> )}