From 1b26e6be27e0be5e4bfc56059389228079252242 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Mon, 5 Jul 2021 17:44:57 -0300 Subject: [PATCH 1/7] Dark yellow highlight --- src/search/TransactionItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx index 57ce084..73fc211 100644 --- a/src/search/TransactionItem.tsx +++ b/src/search/TransactionItem.tsx @@ -50,8 +50,8 @@ const TransactionItem: React.FC = ({ return (
From 754369578f1025d471e01706b3f153002e5e4ab8 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Mon, 5 Jul 2021 17:52:20 -0300 Subject: [PATCH 2/7] Lazy load flashbot tx checking --- src/BlockTransactions.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) 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]); From 36a69db5d8df75b444a02f8dd6bbee3e44f23ae6 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Mon, 5 Jul 2021 17:59:39 -0300 Subject: [PATCH 3/7] Remove dead code --- src/Transaction.tsx | 68 ++------------------------------------------- 1 file changed, 3 insertions(+), 65 deletions(-) diff --git a/src/Transaction.tsx b/src/Transaction.tsx index da0d33d..c233f0d 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -21,15 +21,7 @@ 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; +import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types"; const TRANSFER_TOPIC = "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef"; @@ -121,49 +113,6 @@ const Transaction: React.FC = () => { 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), - }); - } - - setTransfers(_transfers); - }; - const traceTransfersUsingOtsTrace = useCallback(async () => { if (!txData) { return; @@ -184,9 +133,7 @@ const Transaction: React.FC = () => { setTransfers(_transfers); }, [txData]); useEffect(() => { - if (USE_OTS) { - traceTransfersUsingOtsTrace(); - } + traceTransfersUsingOtsTrace(); }, [traceTransfersUsingOtsTrace]); return ( @@ -244,7 +191,7 @@ const Transaction: React.FC = () => {
- {transfers ? ( + {transfers && (
{transfers.map((t, i) => ( { /> ))}
- ) : ( - !USE_OTS && ( - - ) )} From 24ae87a092d801f1976e75a7a369d55efab34141 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Mon, 5 Jul 2021 18:08:52 -0300 Subject: [PATCH 4/7] Add flashbot classification --- src/Transaction.tsx | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/Transaction.tsx b/src/Transaction.tsx index c233f0d..c538bc4 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -1,4 +1,4 @@ -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"; @@ -112,6 +112,18 @@ const Transaction: React.FC = () => { }, [txhash]); const [transfers, setTransfers] = useState(); + const sendsEthToMiner = useMemo(() => { + if (!txData || !transfers) { + return false; + } + + for (const t of transfers) { + if (t.to === txData.miner) { + return true; + } + } + return false; + }, [txData, transfers]); const traceTransfersUsingOtsTrace = useCallback(async () => { if (!txData) { @@ -263,9 +275,17 @@ const Transaction: React.FC = () => { Ether - Ether ( - {" "} - Gwei) +
+ + Ether ( + {" "} + Gwei) + + {sendsEthToMiner && Flashbots} +
N/A From ac389429339646fb3fbab515e086eeb3173e1bc5 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Mon, 5 Jul 2021 20:55:07 -0300 Subject: [PATCH 5/7] Apply miner icon directly on AddressOrENSName component --- src/Block.tsx | 9 +++--- src/Transaction.tsx | 17 ++++++++-- src/components/AddressOrENSName.tsx | 49 ++++++++++++++++++----------- src/search/TransactionItem.tsx | 24 +++++--------- 4 files changed, 57 insertions(+), 42 deletions(-) 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/Transaction.tsx b/src/Transaction.tsx index c538bc4..2041b2b 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -13,6 +13,7 @@ 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"; @@ -194,13 +195,19 @@ const Transaction: React.FC = () => {
- +
- +
{transfers && ( @@ -284,7 +291,11 @@ const Transaction: React.FC = () => { />{" "} Gwei) - {sendsEthToMiner && Flashbots} + {sendsEthToMiner && ( + + Flashbots + + )}
N/A diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx index e3cfdb9..8bcf024 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 73fc211..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"; @@ -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} /> )} From 3a1fa13c442ee6c9a2fc570627b17a866c93d7cd Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Mon, 5 Jul 2021 21:08:58 -0300 Subject: [PATCH 6/7] Extract TokenTransferItem component --- src/TokenTransferItem.tsx | 51 ++++++++++++++++++++++++++++++++++++++ src/Transaction.tsx | 52 ++++++--------------------------------- 2 files changed, 59 insertions(+), 44 deletions(-) create mode 100644 src/TokenTransferItem.tsx diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx new file mode 100644 index 0000000..bbdd45b --- /dev/null +++ b/src/TokenTransferItem.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faCaretRight } from "@fortawesome/free-solid-svg-icons"; +import AddressLink from "./components/AddressLink"; +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 2041b2b..a461501 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -5,7 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCheckCircle, faTimesCircle, - faCaretRight, } from "@fortawesome/free-solid-svg-icons"; import { provider } from "./ethersconfig"; import StandardFrame from "./StandardFrame"; @@ -18,9 +17,9 @@ 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 { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types"; @@ -228,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) => ( + + ))}
)} From b6c176fb0e7fd347ec6d7f791e79d5bba7712873 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Mon, 5 Jul 2021 21:12:16 -0300 Subject: [PATCH 7/7] Fix truncation --- src/TokenTransferItem.tsx | 7 ++++--- src/components/AddressOrENSName.tsx | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx index bbdd45b..64351ee 100644 --- a/src/TokenTransferItem.tsx +++ b/src/TokenTransferItem.tsx @@ -2,6 +2,7 @@ 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"; @@ -20,9 +21,9 @@ const TokenTransferItem: React.FC = ({ From - + To - + For = ({ /> ) : ( - + )} diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx index 8bcf024..ce1ec8a 100644 --- a/src/components/AddressOrENSName.tsx +++ b/src/components/AddressOrENSName.tsx @@ -19,7 +19,7 @@ const AddressOrENSName: React.FC = ({ selectedAddress, minerAddress, }) => ( -
+
{minerAddress !== undefined && minerAddress === address && (