chore(insights-hub): ensured links continue working on mobile

Author: benduran

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

@@ -14,13 +14,13 @@ import {
   Virtualizer,
 } from "@pythnetwork/component-library/Virtualizer";
 import type { Button as UnstyledButton } from "@pythnetwork/component-library/unstyled/Button";
+import type { ListBoxItemProps } from "@pythnetwork/component-library/unstyled/ListBox";
 import {
   ListBox,
   ListBoxItem,
 } 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, useRef, useState } from "react";
@@ -58,9 +58,9 @@ type ResolvedSearchButtonProps = {
     averageScore?: number | undefined;
     cluster: Cluster;
   } & (
-      | { name: string; icon: ReactNode }
-      | { name?: undefined; icon?: undefined }
-    ))[];
+    | { name: string; icon: ReactNode }
+    | { name?: undefined; icon?: undefined }
+  ))[];
 };
 
 const ResolvedSearchButton = (props: ResolvedSearchButtonProps) => {
@@ -136,22 +136,59 @@ const SearchDialogContents = ({
   /** hooks */
   const drawer = useDrawer();
   const logger = useLogger();
-  const browserInfo = useDetectBrowserInfo();
 
   /** refs */
+  const closeDrawerDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const openTabModifierActiveRef = useRef(false);
   const middleMousePressedRef = useRef(false);
 
   /** state */
   const [search, setSearch] = useState("");
   const [type, setType] = useState<ResultType | "">("");
 
+  /** callbacks */
   const closeDrawer = useCallback(() => {
-    drawer.close().catch((error: unknown) => {
-      logger.error(error);
-    });
+    if (closeDrawerDebounceRef.current) {
+      clearTimeout(closeDrawerDebounceRef.current);
+      closeDrawerDebounceRef.current = undefined;
+    }
+
+    // we debounce the drawer closure because, if we don't,
+    // mobile browsers (at least on iOS) may squash the native <a />
+    // click, resulting in no price feed loading for the user
+    closeDrawerDebounceRef.current = setTimeout(() => {
+      drawer.close().catch((error: unknown) => {
+        logger.error(error);
+      });
+    }, 250);
   }, [drawer, logger]);
+  const onLinkPointerDown = useCallback<
+    NonNullable<ListBoxItemProps<never>["onPointerDown"]>
+  >((e) => {
+    const { button, ctrlKey, metaKey } = e;
+
+    middleMousePressedRef.current = 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 = button === 1;
+    openTabModifierActiveRef.current = metaKey || ctrlKey;
+  }, []);
+  const onLinkPointerUp = useCallback<
+    NonNullable<ListBoxItemProps<never>["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;
+  }, [closeDrawer]);
 
+  /** memos */
   const results = useMemo(() => {
     const filteredFeeds = matchSorter(feeds, search, {
       keys: ["displaySymbol", "symbol", "description", "priceAccount"],
@@ -178,6 +215,7 @@ const SearchDialogContents = ({
     }
     return [...filteredFeeds, ...filteredPublishers];
   }, [feeds, publishers, search, type]);
+
   return (
     <div className={styles.searchDialogContents}>
       <div className={styles.searchBar}>
@@ -247,23 +285,8 @@ const SearchDialogContents = ({
                     : `/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;
-                }}
+                onPointerDown={onLinkPointerDown}
+                onPointerUp={onLinkPointerUp}
               >
                 <div className={styles.smallScreen}>
                   {result.type === ResultType.PriceFeed ? (

packages/component-library/src/unstyled/ListBox/index.tsx

@@ -7,7 +7,7 @@ import { usePrefetch } from "../../use-prefetch.js";
 
 export { ListBox, ListBoxSection } from "react-aria-components";
 
-type ListBoxItemProps<T extends object> = ComponentProps<
+export type ListBoxItemProps<T extends object> = ComponentProps<
   typeof BaseListBoxItem<T>
 > & {
   prefetch?: Parameters<typeof usePrefetch>[0]["prefetch"];

packages/react-hooks/package.json

@@ -21,7 +21,6 @@
     "eslint": "catalog:"
   },
   "dependencies": {
-    "ua-parser-js": "catalog:",
     "nuqs": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:"
@@ -44,14 +43,6 @@
       "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

@@ -161,7 +161,6 @@ 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