Add highlighting support to transfer values

This commit is contained in:
Willian Mitsuda 2021-07-19 23:33:19 -03:00
parent 8331e8d778
commit 42ea3534bf
3 changed files with 46 additions and 5 deletions

View File

@ -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

View File

@ -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);

View File

@ -1,7 +1,7 @@
import React, { useState, useContext } from "react";
export type Selection = {
type: "address";
type: "address" | "value";
content: string;
};