diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx index 64a42f6..b341f0d 100644 --- a/src/TokenTransferItem.tsx +++ b/src/TokenTransferItem.tsx @@ -1,8 +1,9 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCaretRight } from "@fortawesome/free-solid-svg-icons"; -import AddressLink from "./components/AddressLink"; +import AddressHighlighter from "./components/AddressHighlighter"; import AddressOrENSName from "./components/AddressOrENSName"; +import AddressLink from "./components/AddressLink"; import TokenLogo from "./components/TokenLogo"; import FormattedBalance from "./components/FormattedBalance"; import { TokenMetas, TokenTransfer } from "./types"; @@ -23,11 +24,15 @@ const TokenTransferItem: React.FC = ({
From - + + +
To - + + +
For diff --git a/src/Transaction.tsx b/src/Transaction.tsx index e2b6390..4235c3e 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -17,6 +17,7 @@ import StandardSubtitle from "./StandardSubtitle"; import Tab from "./components/Tab"; import ContentFrame from "./ContentFrame"; import BlockLink from "./components/BlockLink"; +import AddressHighlighter from "./components/AddressHighlighter"; import AddressOrENSName from "./components/AddressOrENSName"; import AddressLink from "./components/AddressLink"; import Copy from "./components/Copy"; @@ -29,6 +30,7 @@ import TokenTransferItem from "./TokenTransferItem"; import erc20 from "./erc20.json"; import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types"; import { RuntimeContext } from "./useRuntime"; +import { SelectionContext, useSelection } from "./useSelection"; const TRANSFER_TOPIC = "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef"; @@ -160,11 +162,13 @@ const Transaction: React.FC = () => { traceTransfersUsingOtsTrace(); }, [traceTransfersUsingOtsTrace]); + const selectionCtx = useSelection(); + return ( Transaction Details {txData && ( - <> +
Overview @@ -206,19 +210,23 @@ const Transaction: React.FC = () => {
- + + +
- + + +
{transfers && ( @@ -350,7 +358,7 @@ const Transaction: React.FC = () => { - + )} ); diff --git a/src/components/AddressHighlighter.tsx b/src/components/AddressHighlighter.tsx index 78524a7..114157c 100644 --- a/src/components/AddressHighlighter.tsx +++ b/src/components/AddressHighlighter.tsx @@ -19,7 +19,7 @@ const AddressHighlighter: React.FC = ({ return (
= ({ {ethers.utils.formatEther(transfer.value)} Ether From -
- {fromMiner && ( - - - - )} - -
+ +
+ {fromMiner && ( + + + + )} + +
+
To -
- {toMiner && ( - - - - )} - -
+ +
+ {toMiner && ( + + + + )} + +
+
); };