Extract highlighter decorator component
This commit is contained in:
parent
05719eb4ae
commit
4b3ab2ec8a
|
@ -154,7 +154,7 @@ const AddressTransactions: React.FC = () => {
|
|||
|
||||
const [feeDisplay, feeDisplayToggler] = useFeeToggler();
|
||||
|
||||
const selection = useSelection();
|
||||
const selectionCtx = useSelection();
|
||||
|
||||
return (
|
||||
<StandardFrame>
|
||||
|
@ -207,7 +207,7 @@ const AddressTransactions: React.FC = () => {
|
|||
feeDisplayToggler={feeDisplayToggler}
|
||||
/>
|
||||
{controller ? (
|
||||
<SelectionContext.Provider value={selection}>
|
||||
<SelectionContext.Provider value={selectionCtx}>
|
||||
{controller.getPage().map((tx) => (
|
||||
<TransactionItem
|
||||
key={tx.hash}
|
||||
|
|
|
@ -117,7 +117,7 @@ const BlockTransactions: React.FC = () => {
|
|||
|
||||
const [feeDisplay, feeDisplayToggler] = useFeeToggler();
|
||||
|
||||
const selection = useSelection();
|
||||
const selectionCtx = useSelection();
|
||||
|
||||
return (
|
||||
<StandardFrame>
|
||||
|
@ -145,7 +145,7 @@ const BlockTransactions: React.FC = () => {
|
|||
feeDisplayToggler={feeDisplayToggler}
|
||||
/>
|
||||
{page ? (
|
||||
<SelectionContext.Provider value={selection}>
|
||||
<SelectionContext.Provider value={selectionCtx}>
|
||||
{page.map((tx) => (
|
||||
<TransactionItem
|
||||
key={tx.hash}
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
import React from "react";
|
||||
import { useSelectionContext } from "../useSelection";
|
||||
|
||||
type AddressHighlighterProps = {
|
||||
address: string;
|
||||
};
|
||||
|
||||
const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
|
||||
address,
|
||||
children,
|
||||
}) => {
|
||||
const [selection, setSelection] = useSelectionContext();
|
||||
const select = () => {
|
||||
setSelection({ type: "address", content: address });
|
||||
};
|
||||
const deselect = () => {
|
||||
setSelection(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 ${
|
||||
selection !== null &&
|
||||
selection.type === "address" &&
|
||||
selection.content === address
|
||||
? "border-orange-400 bg-yellow-100"
|
||||
: "border-transparent"
|
||||
}`}
|
||||
onMouseEnter={select}
|
||||
onMouseLeave={deselect}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddressHighlighter;
|
|
@ -6,6 +6,7 @@ import BlockLink from "../components/BlockLink";
|
|||
import TransactionLink from "../components/TransactionLink";
|
||||
import AddressOrENSName from "../components/AddressOrENSName";
|
||||
import TimestampAge from "../components/TimestampAge";
|
||||
import AddressHighlighter from "../components/AddressHighlighter";
|
||||
import TransactionDirection, {
|
||||
Direction,
|
||||
Flags,
|
||||
|
@ -14,7 +15,6 @@ import TransactionValue from "../components/TransactionValue";
|
|||
import { ENSReverseCache, ProcessedTransaction } from "../types";
|
||||
import { FeeDisplay } from "./useFeeToggler";
|
||||
import { formatValue } from "../components/formatter";
|
||||
import { useSelectionContext } from "../useSelection";
|
||||
|
||||
type TransactionItemProps = {
|
||||
tx: ProcessedTransaction;
|
||||
|
@ -46,14 +46,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
const ensTo = ensCache && tx.to && ensCache[tx.to];
|
||||
const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction;
|
||||
|
||||
const [selection, setSelection] = useSelectionContext();
|
||||
const select = (address: string) => {
|
||||
setSelection({ type: "address", content: address });
|
||||
};
|
||||
const deselect = () => {
|
||||
setSelection(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 ${
|
||||
|
@ -78,24 +70,14 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
<span className="col-span-2 flex justify-between items-baseline space-x-2 pr-2">
|
||||
<span className="truncate" title={tx.from}>
|
||||
{tx.from && (
|
||||
<div
|
||||
className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 ${
|
||||
selection !== null &&
|
||||
selection.type === "address" &&
|
||||
selection.content === tx.from
|
||||
? "border-orange-400 bg-yellow-100"
|
||||
: "border-transparent"
|
||||
}`}
|
||||
onMouseEnter={() => select(tx.from!)}
|
||||
onMouseLeave={deselect}
|
||||
>
|
||||
<AddressHighlighter address={tx.from}>
|
||||
<AddressOrENSName
|
||||
address={tx.from}
|
||||
ensName={ensFrom}
|
||||
selectedAddress={selectedAddress}
|
||||
minerAddress={tx.miner}
|
||||
/>
|
||||
</div>
|
||||
</AddressHighlighter>
|
||||
)}
|
||||
</span>
|
||||
<span>
|
||||
|
@ -107,24 +89,14 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
</span>
|
||||
<span className="col-span-2 truncate" title={tx.to}>
|
||||
{tx.to && (
|
||||
<div
|
||||
className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 ${
|
||||
selection !== null &&
|
||||
selection.type === "address" &&
|
||||
selection.content === tx.to
|
||||
? "border-orange-400 bg-yellow-100"
|
||||
: "border-transparent"
|
||||
}`}
|
||||
onMouseEnter={() => select(tx.to!)}
|
||||
onMouseLeave={deselect}
|
||||
>
|
||||
<AddressHighlighter address={tx.to}>
|
||||
<AddressOrENSName
|
||||
address={tx.to}
|
||||
ensName={ensTo}
|
||||
selectedAddress={selectedAddress}
|
||||
minerAddress={tx.miner}
|
||||
/>
|
||||
</div>
|
||||
</AddressHighlighter>
|
||||
)}
|
||||
</span>
|
||||
<span className="col-span-2 truncate">
|
||||
|
|
Loading…
Reference in New Issue