40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { BigNumber } from "@ethersproject/bignumber";
|
|
import { useSelectionContext } from "../useSelection";
|
|
|
|
type ValueHighlighterProps = React.PropsWithChildren<{
|
|
value: BigNumber;
|
|
}>;
|
|
|
|
// TODO: replace all occurences with SelectionHighlighter and remove this component
|
|
const ValueHighlighter: React.FC<ValueHighlighterProps> = ({
|
|
value,
|
|
children,
|
|
}) => {
|
|
const [selection, setSelection] = useSelectionContext();
|
|
const select = () => {
|
|
setSelection({ type: "value", content: value.toString() });
|
|
};
|
|
const deselect = () => {
|
|
setSelection(null);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
|
|
selection !== null &&
|
|
selection.type === "value" &&
|
|
selection.content === value.toString()
|
|
? "border-orange-400 bg-amber-100"
|
|
: "border-transparent"
|
|
}`}
|
|
onMouseEnter={select}
|
|
onMouseLeave={deselect}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ValueHighlighter);
|