Add highlighting support to transfer values
This commit is contained in:
parent
8331e8d778
commit
42ea3534bf
|
@ -2,6 +2,7 @@ import React from "react";
|
|||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCaretRight } from "@fortawesome/free-solid-svg-icons";
|
||||
import AddressHighlighter from "./components/AddressHighlighter";
|
||||
import ValueHighlighter from "./components/ValueHighlighter";
|
||||
import DecoratedAddressLink from "./components/DecoratedAddressLink";
|
||||
import FormattedBalance from "./components/FormattedBalance";
|
||||
import {
|
||||
|
@ -52,10 +53,12 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
|
|||
<div className="col-span-3 flex space-x-1">
|
||||
<span className="font-bold">For</span>
|
||||
<span>
|
||||
<ValueHighlighter value={t.value}>
|
||||
<FormattedBalance
|
||||
value={t.value}
|
||||
decimals={tokenMetas[t.token].decimals}
|
||||
/>
|
||||
</ValueHighlighter>
|
||||
</span>
|
||||
<AddressHighlighter address={t.token}>
|
||||
<DecoratedAddressLink
|
||||
|
|
|
@ -0,0 +1,38 @@
|
|||
import React from "react";
|
||||
import { BigNumber } from "ethers";
|
||||
import { useSelectionContext } from "../useSelection";
|
||||
|
||||
type ValueHighlighterProps = React.PropsWithChildren<{
|
||||
value: BigNumber;
|
||||
}>;
|
||||
|
||||
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-yellow-100"
|
||||
: "border-transparent"
|
||||
}`}
|
||||
onMouseEnter={select}
|
||||
onMouseLeave={deselect}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ValueHighlighter);
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState, useContext } from "react";
|
||||
|
||||
export type Selection = {
|
||||
type: "address";
|
||||
type: "address" | "value";
|
||||
content: string;
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue