Apply selection highlighter to function sigs

src/components/SelectionHighlighter.tsx

@@ -18,6 +18,8 @@ export const genericSelector =
     selection.content === content;
 
 export const addressSelector: ContentSelector = genericSelector("address");
+export const functionSigSelector: ContentSelector =
+  genericSelector("functionSig");
 
 type SelectionHighlighterProps = React.PropsWithChildren<{
   myType: SelectionType;

src/transaction/FunctionSignature.tsx

@@ -1,4 +1,7 @@
 import React from "react";
+import SelectionHighlighter, {
+  functionSigSelector,
+} from "../components/SelectionHighlighter";
 
 type FunctionSignatureProps = {
   callType: string;
@@ -9,17 +12,23 @@ const FunctionSignature: React.FC<FunctionSignatureProps> = ({
   callType,
   sig,
 }) => (
-  <span
+  <SelectionHighlighter
-    className={`font-bold ${
+    myType="functionSig"
-      callType === "STATICCALL"
+    myContent={sig}
-        ? "text-red-700"
+    selector={functionSigSelector}
-        : callType === "DELEGATECALL" || callType === "CALLCODE"
-        ? "text-gray-400"
-        : "text-blue-900"
-    }`}
   >
-    {sig}
+    <span
-  </span>
+      className={`font-bold ${
+        callType === "STATICCALL"
+          ? "text-red-700"
+          : callType === "DELEGATECALL" || callType === "CALLCODE"
+          ? "text-gray-400"
+          : "text-blue-900"
+      }`}
+    >
+      {sig}
+    </span>
+  </SelectionHighlighter>
 );
 
 export default FunctionSignature;