Add highlighting support to transfer values

src/TokenTransferItem.tsx

@@ -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>
-          <FormattedBalance
+          <ValueHighlighter value={t.value}>
-            value={t.value}
+            <FormattedBalance
-            decimals={tokenMetas[t.token].decimals}
+              value={t.value}
-          />
+              decimals={tokenMetas[t.token].decimals}
+            />
+          </ValueHighlighter>
         </span>
         <AddressHighlighter address={t.token}>
           <DecoratedAddressLink

src/components/ValueHighlighter.tsx

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

src/useSelection.ts

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