Tooltip for SetHook codes in debug stream.

components/DebugStream.tsx

@@ -5,7 +5,7 @@ import { subscribeKey } from "valtio/utils";
 import { Select } from ".";
 import state, { ILog, transactionsState } from "../state";
 import { extractJSON } from "../utils/json";
-import EnrichAccounts from "./EnrichAccounts";
+import EnrichLog from "./EnrichLog";
 import LogBox from "./LogBox";
 
 interface ISelect<T = string> {
@@ -174,13 +174,13 @@ export const pushLog = (
   const _message = !extracted
     ? msg
     : msg.slice(0, extracted.start) + msg.slice(extracted.end + 1);
-  const message = ref(<EnrichAccounts str={_message} />);
+  const message = ref(<EnrichLog str={_message} />);
 
   const _jsonData = extracted
     ? JSON.stringify(extracted.result, null, 2)
     : undefined;
   const jsonData = _jsonData
-    ? ref(<EnrichAccounts str={_jsonData} />)
+    ? ref(<EnrichLog str={_jsonData} />)
     : undefined;
 
   if (extracted?.result?.id?._Request?.includes("hooks-builder-req")) {

components/EnrichAccounts.tsx

@@ -1,48 +0,0 @@
-import { FC, useState } from "react";
-import regexifyString from "regexify-string";
-import { useSnapshot } from "valtio";
-import { Link } from ".";
-import state from "../state";
-import { AccountDialog } from "./Accounts";
-
-interface EnrichAccountsProps {
-  str?: string;
-}
-
-const EnrichAccounts: FC<EnrichAccountsProps> = ({ str }) => {
-  const { accounts } = useSnapshot(state);
-  const [dialogAccount, setDialogAccount] = useState<string | null>(null);
-  if (!str || !accounts.length) return <>{str}</>;
-
-  const pattern = `(${accounts.map(acc => acc.address).join("|")})`;
-  const res = regexifyString({
-    pattern: new RegExp(pattern, "gim"),
-    decorator: (match, idx) => {
-      const name = accounts.find(acc => acc.address === match)?.name;
-      return (
-        <Link
-          key={match + idx}
-          as="a"
-          onClick={() => setDialogAccount(match)}
-          title={match}
-          highlighted
-        >
-          {name || match}
-        </Link>
-      );
-    },
-    input: str,
-  });
-
-  return (
-    <>
-      {res}
-      <AccountDialog
-        setActiveAccountAddress={setDialogAccount}
-        activeAccountAddress={dialogAccount}
-      />
-    </>
-  );
-};
-
-export default EnrichAccounts;

components/EnrichLog.tsx

@@ -0,0 +1,73 @@
+import { FC, useState } from "react";
+import regexifyString from "regexify-string";
+import { useSnapshot } from "valtio";
+import { Link } from ".";
+import state from "../state";
+import { AccountDialog } from "./Accounts";
+import Tooltip from "./Tooltip";
+import hookSetCodes from "../content/hook-set-codes.json";
+import { capitalize } from "../utils/helpers";
+
+interface EnrichLogProps {
+  str?: string;
+}
+
+const EnrichLog: FC<EnrichLogProps> = ({ str }) => {
+  const { accounts } = useSnapshot(state);
+  const [dialogAccount, setDialogAccount] = useState<string | null>(null);
+  if (!str || !accounts.length) return <>{str}</>;
+
+  const addrs = accounts.map(acc => acc.address);
+  const regex = `(${addrs.join("|")}|HookSet\\(\\d+\\))`;
+  const res = regexifyString({
+    pattern: new RegExp(regex, "gim"),
+    decorator: (match, idx) => {
+      if (match.startsWith("r")) {
+        // Account
+        const name = accounts.find(acc => acc.address === match)?.name;
+        return (
+          <Link
+            key={match + idx}
+            as="a"
+            onClick={() => setDialogAccount(match)}
+            title={match}
+            highlighted
+          >
+            {name || match}
+          </Link>
+        );
+      }
+      if (match.startsWith("HookSet")) {
+        const code = match.match(/^HookSet\((\d+)\)/)?.[1];
+        const val = hookSetCodes.find(v => code && v.code === +code);
+        console.log({ code, val });
+        if (!val) return match;
+
+        const content = capitalize(val.description) || "No hint available!";
+        return (
+          <>
+            HookSet(
+            <Tooltip content={content}>
+              <Link>{val.identifier}</Link>
+            </Tooltip>
+            )
+          </>
+        );
+      }
+      return match;
+    },
+    input: str,
+  });
+
+  return (
+    <>
+      {res}
+      <AccountDialog
+        setActiveAccountAddress={setDialogAccount}
+        activeAccountAddress={dialogAccount}
+      />
+    </>
+  );
+};
+
+export default EnrichLog;

components/Tooltip.tsx

@@ -79,6 +79,7 @@ const Tooltip: React.FC<
       open={open}
       defaultOpen={defaultOpen}
       onOpenChange={onOpenChange}
+      delayDuration={100}
     >
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <StyledContent side="bottom" align="center" {...rest}>