feat(insights-hub, react-hooks): added a usePrevious and useDetectBrowserInfo hook, and made dialog stick around if new tab is opening

Author: benduran

apps/insights/src/components/Root/search-button.tsx

@@ -20,9 +20,10 @@ import {
 } from "@pythnetwork/component-library/unstyled/ListBox";
 import { useDrawer } from "@pythnetwork/component-library/useDrawer";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
+import { useDetectBrowserInfo } from '@pythnetwork/react-hooks/use-detect-browser-info';
 import { matchSorter } from "match-sorter";
 import type { ReactNode } from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { Cluster, ClusterToName } from "../../services/pyth";
 import { AssetClassBadge } from "../AssetClassBadge";
@@ -132,10 +133,19 @@ const SearchDialogContents = ({
   feeds,
   publishers,
 }: SearchDialogContentsProps) => {
+  /** hooks */
   const drawer = useDrawer();
   const logger = useLogger();
+  const browserInfo = useDetectBrowserInfo();
+
+  /** refs */
+  const openTabModifierActiveRef = useRef(false);
+  const middleMousePressedRef = useRef(false);
+
+  /** state */
   const [search, setSearch] = useState("");
   const [type, setType] = useState<ResultType | "">("");
+
   const closeDrawer = useCallback(() => {
     drawer.close().catch((error: unknown) => {
       logger.error(error);
@@ -231,13 +241,29 @@ const SearchDialogContents = ({
                     : (result.name ?? result.publisherKey)
                 }
                 className={styles.item ?? ""}
-                onAction={closeDrawer}
                 href={
                   result.type === ResultType.PriceFeed
                     ? `/price-feeds/${encodeURIComponent(result.symbol)}`
                     : `/publishers/${ClusterToName[result.cluster]}/${encodeURIComponent(result.publisherKey)}`
                 }
                 data-is-first={result.id === results[0]?.id ? "" : undefined}
+                onPointerDown={e => {
+                  middleMousePressedRef.current = e.button === 1;
+                  // on press is too abstracted and doesn't give us the native event
+                  // for determining if the user clicked their middle mouse button,
+                  // so we need to use the native onClick directly
+                  middleMousePressedRef.current = e.button === 1;
+                  openTabModifierActiveRef.current = (browserInfo?.isMacOS && e.metaKey) ?? e.ctrlKey;
+                }}
+                onPointerUp={() => {
+                  const userWantsNewTab = middleMousePressedRef.current || openTabModifierActiveRef.current;
+                  
+                  // they want a new tab, the search popover stays open
+                  if (!userWantsNewTab) closeDrawer();
+                  
+                  middleMousePressedRef.current = false;
+                  openTabModifierActiveRef.current = false;
+                }}
               >
                 <div className={styles.smallScreen}>
                   {result.type === ResultType.PriceFeed ? (

packages/react-hooks/jest.config.js

@@ -0,0 +1,3 @@
+import { defineJestConfigForNextJs } from "@pythnetwork/jest-config/define-next-config";
+
+export default defineJestConfigForNextJs();

packages/react-hooks/package.json

@@ -14,12 +14,14 @@
   },
   "devDependencies": {
     "@cprussin/eslint-config": "catalog:",
+    "@pythnetwork/jest-config": "workspace:",
     "@cprussin/tsconfig": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "eslint": "catalog:"
   },
   "dependencies": {
+    "ua-parser-js": "catalog:",
     "nuqs": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:"
@@ -42,6 +44,14 @@
       "types": "./dist/nuqs.d.ts",
       "default": "./dist/nuqs.mjs"
     },
+    "./use-detect-browser-info": {
+      "types": "./dist/use-detect-browser-info.d.ts",
+      "default": "./dist/use-detect-browser-info.mjs"
+    },
+    "./use-previous": {
+      "types": "./dist/use-previous.d.ts",
+      "default": "./dist/use-previous.mjs"
+    },
     "./package.json": "./package.json"
   }
 }

packages/react-hooks/src/use-detect-browser-info.ts

@@ -0,0 +1,81 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { UAParser } from "ua-parser-js";
+
+import { usePrevious } from "./use-previous.js";
+
+function safeGetUserAgent() {
+  // this guards against this blowing up in SSR
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  return globalThis.window?.navigator?.userAgent ?? "";
+}
+
+type UseDetectBrowserInfoOpts = Partial<{
+  /**
+   * how often to check and see if the user agent has updated
+   */
+  checkInterval: number;
+}>;
+
+const DEFAULT_CHECK_INTERVAL = 1000; // one secondrt
+
+/**
+ * returns relevant information about the user's browser, OS and Arch,
+ * using the super popular ua-parser-js library:
+ * npm i ua-parser-js
+ */
+export function useDetectBrowserInfo(opts?: UseDetectBrowserInfoOpts) {
+  /** props */
+  const { checkInterval = DEFAULT_CHECK_INTERVAL } = opts ?? {};
+
+  /** state */
+  const [userAgent, setUserAgent] = useState(() => safeGetUserAgent());
+
+  /** hooks */
+  const prevUserAgent = usePrevious(userAgent);
+
+  /** refs */
+  const prevUserAgentRef = useRef(prevUserAgent);
+
+  /** memos */
+  const details = useMemo(
+    () => (userAgent ? UAParser(userAgent) : undefined),
+    [userAgent],
+  );
+
+  /** effects */
+  useEffect(() => {
+    prevUserAgentRef.current = prevUserAgent;
+  });
+
+  useEffect(() => {
+    // in case somebody is spoofing their user agent using
+    // some type of browser extension, we check the user agent periodically
+    // to see if it's changed, and if it has, we update what we have
+    const userAgentCheckInterval = setInterval(() => {
+      const ua = safeGetUserAgent();
+
+      if (ua !== prevUserAgentRef.current) {
+        setUserAgent(ua);
+      }
+    }, checkInterval);
+
+    return () => {
+      clearInterval(userAgentCheckInterval);
+    };
+  }, [checkInterval]);
+
+  return useMemo(() => {
+    if (!details) return;
+
+    const lowerOsName = details.os.name?.toLowerCase() ?? "";
+    const isMacOS = lowerOsName === "macos";
+    const isWindows = lowerOsName === "windows" || lowerOsName === "win";
+
+    return {
+      ...details,
+      isLinux: !isMacOS && !isWindows,
+      isMacOS,
+      isWindows,
+    };
+  }, []);
+}

packages/react-hooks/src/use-previous.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * returns the n-1 value provided to it.
+ * useful for comparing a current component
+ * state value relative to a previous state value
+ */
+export function usePrevious<T>(val: T): T | undefined {
+  /** refs */
+  const prevRef = useRef<T>(undefined);
+
+  /** effects */
+  useEffect(() => {
+    prevRef.current = val;
+  });
+
+  return prevRef.current;
+}

packages/react-hooks/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "@cprussin/tsconfig/base.json",
+  "compilerOptions": {
+    "lib": ["DOM", "ESNext"]
+  },
   "exclude": ["node_modules", "dist"]
 }

pnpm-lock.yaml

@@ -161,6 +161,7 @@ catalog:
   typedoc: ^0.26.8
   typescript: ^5.9.3
   turbo: ^2.5.8
+  ua-parser-js: ^2.0.6
   vercel: ^41.4.1
   viem: ^2.37.13
   wagmi: ^2.14.16