From 5216198b0612c157da03c046ed4d812e023b872f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 29 Nov 2021 15:32:07 -0300
Subject: [PATCH] Add selection highlighting support to decoded param table
 values

---
 src/components/SelectionHighlighter.tsx     |  1 +
 src/transaction/decoder/DecodedParamRow.tsx | 45 ++++++++++++---------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/components/SelectionHighlighter.tsx b/src/components/SelectionHighlighter.tsx
index 40a3431..bebd606 100644
--- a/src/components/SelectionHighlighter.tsx
+++ b/src/components/SelectionHighlighter.tsx
@@ -18,6 +18,7 @@ export const genericSelector =
     selection.content === content;
 
 export const addressSelector: ContentSelector = genericSelector("address");
+export const valueSelector: ContentSelector = genericSelector("value");
 export const functionSigSelector: ContentSelector =
   genericSelector("functionSig");
 
diff --git a/src/transaction/decoder/DecodedParamRow.tsx b/src/transaction/decoder/DecodedParamRow.tsx
index 78467d3..3ad47cc 100644
--- a/src/transaction/decoder/DecodedParamRow.tsx
+++ b/src/transaction/decoder/DecodedParamRow.tsx
@@ -9,6 +9,9 @@ import AddressDecoder from "./AddressDecoder";
 import BooleanDecoder from "./BooleanDecoder";
 import BytesDecoder from "./BytesDecoder";
 import { ResolvedAddresses } from "../../api/address-resolver";
+import SelectionHighlighter, {
+  valueSelector,
+} from "../../components/SelectionHighlighter";
 
 type DecodedParamRowProps = {
   prefix?: ReactNode;
@@ -68,24 +71,30 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
           {help && showHelp && <div className="mt-2 text-gray-400">{help}</div>}
         </td>
         <td className="col-span-1 text-gray-500">{paramType.type}</td>
-        <td className="col-span-8 pr-1 font-code break-all">
-          {paramType.baseType === "uint256" ? (
-            <Uint256Decoder r={r} />
-          ) : paramType.baseType === "address" ? (
-            <AddressDecoder
-              r={r.toString()}
-              resolvedAddresses={resolvedAddresses}
-            />
-          ) : paramType.baseType === "bool" ? (
-            <BooleanDecoder r={r} />
-          ) : paramType.baseType === "bytes" ? (
-            <BytesDecoder r={r} />
-          ) : paramType.baseType === "tuple" ||
-            paramType.baseType === "array" ? (
-            <></>
-          ) : (
-            r.toString()
-          )}
+        <td className="col-span-8 pr-1 font-code break-all flex">
+          <SelectionHighlighter
+            myType="value"
+            myContent={r.toString()}
+            selector={valueSelector}
+          >
+            {paramType.baseType === "uint256" ? (
+              <Uint256Decoder r={r} />
+            ) : paramType.baseType === "address" ? (
+              <AddressDecoder
+                r={r.toString()}
+                resolvedAddresses={resolvedAddresses}
+              />
+            ) : paramType.baseType === "bool" ? (
+              <BooleanDecoder r={r} />
+            ) : paramType.baseType === "bytes" ? (
+              <BytesDecoder r={r} />
+            ) : paramType.baseType === "tuple" ||
+              paramType.baseType === "array" ? (
+              <></>
+            ) : (
+              r.toString()
+            )}
+          </SelectionHighlighter>
         </td>
       </tr>
       {paramType.baseType === "tuple" &&