Apply highlighter decorator to transaction details page
This commit is contained in:
parent
4b3ab2ec8a
commit
e2e94a4d30
|
@ -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<TokenTransferItemProps> = ({
|
|||
<div className="grid grid-cols-5">
|
||||
<div className="flex space-x-2">
|
||||
<span className="font-bold">From</span>
|
||||
<AddressHighlighter address={t.from}>
|
||||
<AddressOrENSName address={t.from} />
|
||||
</AddressHighlighter>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<span className="font-bold">To</span>
|
||||
<AddressHighlighter address={t.to}>
|
||||
<AddressOrENSName address={t.to} />
|
||||
</AddressHighlighter>
|
||||
</div>
|
||||
<div className="col-span-3 flex space-x-2">
|
||||
<span className="font-bold">For</span>
|
||||
|
|
|
@ -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 (
|
||||
<StandardFrame>
|
||||
<StandardSubtitle>Transaction Details</StandardSubtitle>
|
||||
{txData && (
|
||||
<>
|
||||
<SelectionContext.Provider value={selectionCtx}>
|
||||
<div className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
|
||||
<Tab href={`/tx/${txhash}`}>Overview</Tab>
|
||||
<Tab href={`/tx/${txhash}/logs`}>
|
||||
|
@ -206,19 +210,23 @@ const Transaction: React.FC = () => {
|
|||
</InfoRow>
|
||||
<InfoRow title="From">
|
||||
<div className="flex items-baseline space-x-2">
|
||||
<AddressHighlighter address={txData.from}>
|
||||
<AddressOrENSName
|
||||
address={txData.from}
|
||||
minerAddress={txData.miner}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
<Copy value={txData.from} />
|
||||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title="Interacted With (To)">
|
||||
<div className="flex items-baseline space-x-2">
|
||||
<AddressHighlighter address={txData.to}>
|
||||
<AddressOrENSName
|
||||
address={txData.to}
|
||||
minerAddress={txData.miner}
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
<Copy value={txData.to} />
|
||||
</div>
|
||||
{transfers && (
|
||||
|
@ -350,7 +358,7 @@ const Transaction: React.FC = () => {
|
|||
</ContentFrame>
|
||||
</Route>
|
||||
</Switch>
|
||||
</>
|
||||
</SelectionContext.Provider>
|
||||
)}
|
||||
</StandardFrame>
|
||||
);
|
||||
|
|
|
@ -19,7 +19,7 @@ const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 ${
|
||||
className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
|
||||
selection !== null &&
|
||||
selection.type === "address" &&
|
||||
selection.content === address
|
||||
|
|
|
@ -2,6 +2,7 @@ import React from "react";
|
|||
import { ethers } from "ethers";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faAngleRight, faCoins } from "@fortawesome/free-solid-svg-icons";
|
||||
import AddressHighlighter from "./AddressHighlighter";
|
||||
import AddressLink from "./AddressLink";
|
||||
import { TransactionData, Transfer } from "../types";
|
||||
|
||||
|
@ -25,6 +26,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
</span>
|
||||
<span>{ethers.utils.formatEther(transfer.value)} Ether</span>
|
||||
<span className="text-gray-500">From</span>
|
||||
<AddressHighlighter address={transfer.from}>
|
||||
<div
|
||||
className={`flex items-baseline space-x-1 ${
|
||||
fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
|
||||
|
@ -37,7 +39,9 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
)}
|
||||
<AddressLink address={transfer.from} />
|
||||
</div>
|
||||
</AddressHighlighter>
|
||||
<span className="text-gray-500">To</span>
|
||||
<AddressHighlighter address={transfer.to}>
|
||||
<div
|
||||
className={`flex items-baseline space-x-1 px-2 py-1 ${
|
||||
toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
|
||||
|
@ -50,6 +54,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
|
|||
)}
|
||||
<AddressLink address={transfer.to} />
|
||||
</div>
|
||||
</AddressHighlighter>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue