From 42ea3534bf073ef85ab35a1e970b38e096331af5 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 23:33:19 -0300
Subject: [PATCH] Add highlighting support to transfer values

---
 src/TokenTransferItem.tsx           | 11 ++++++---
 src/components/ValueHighlighter.tsx | 38 +++++++++++++++++++++++++++++
 src/useSelection.ts                 |  2 +-
 3 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ValueHighlighter.tsx

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index 83c5e81..92ec6ee 100644
--- a/src/TokenTransferItem.tsx
+++ b/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
-            value={t.value}
-            decimals={tokenMetas[t.token].decimals}
-          />
+          <ValueHighlighter value={t.value}>
+            <FormattedBalance
+              value={t.value}
+              decimals={tokenMetas[t.token].decimals}
+            />
+          </ValueHighlighter>
         </span>
         <AddressHighlighter address={t.token}>
           <DecoratedAddressLink
diff --git a/src/components/ValueHighlighter.tsx b/src/components/ValueHighlighter.tsx
new file mode 100644
index 0000000..ce26b0e
--- /dev/null
+++ b/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);
diff --git a/src/useSelection.ts b/src/useSelection.ts
index a02f1fe..b34dc81 100644
--- a/src/useSelection.ts
+++ b/src/useSelection.ts
@@ -1,7 +1,7 @@
 import React, { useState, useContext } from "react";
 
 export type Selection = {
-  type: "address";
+  type: "address" | "value";
   content: string;
 };