feat(insights): add search dialog

apps/insights/src/components/PublisherTag/index.module.scss

@@ -3,12 +3,18 @@
 .publisherTag {
   display: flex;
   flex-flow: row nowrap;
-  gap: theme.spacing(4);
+  gap: theme.spacing(3);
   align-items: center;
+  width: 100%;
+
+  .icon,
+  .undisclosedIconWrapper {
+    width: theme.spacing(10);
+    height: theme.spacing(10);
+  }
 
   .icon {
-    width: theme.spacing(9);
-    height: theme.spacing(9);
+    flex: none;
     display: grid;
     place-content: center;
 
@@ -20,16 +26,22 @@
     }
   }
 
+  .name {
+    color: theme.color("heading");
+    font-weight: theme.font-weight("medium");
+  }
+
+  .publisherKey,
+  .icon {
+    color: theme.color("foreground");
+  }
+
   .nameAndKey {
     display: flex;
     flex-flow: column nowrap;
     gap: theme.spacing(1);
     align-items: flex-start;
 
-    .name {
-      color: theme.color("heading");
-    }
-
     .key {
       margin-bottom: -#{theme.spacing(2)};
     }
@@ -55,4 +67,12 @@
       border-radius: theme.border-radius("full");
     }
   }
+
+  &[data-compact] {
+    .icon,
+    .undisclosedIconWrapper {
+      width: theme.spacing(6);
+      height: theme.spacing(6);
+    }
+  }
 }

apps/insights/src/components/PublisherTag/index.tsx

@@ -1,49 +1,41 @@
 import { Broadcast } from "@phosphor-icons/react/dist/ssr/Broadcast";
 import { Skeleton } from "@pythnetwork/component-library/Skeleton";
 import clsx from "clsx";
-import { type ComponentProps, type ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 
 import styles from "./index.module.scss";
 import { PublisherKey } from "../PublisherKey";
 
-type Props =
-  | { isLoading: true }
-  | ({
-      isLoading?: false;
-      publisherKey: string;
-    } & (
-      | { name: string; icon: ReactNode }
-      | { name?: undefined; icon?: undefined }
-    ));
+type Props = ComponentProps<"div"> & { compact?: boolean | undefined } & (
+    | { isLoading: true }
+    | ({
+        isLoading?: false;
+        publisherKey: string;
+      } & (
+        | { name: string; icon: ReactNode }
+        | { name?: undefined; icon?: undefined }
+      ))
+  );
 
-export const PublisherTag = (props: Props) => (
+export const PublisherTag = ({ className, ...props }: Props) => (
   <div
     data-loading={props.isLoading ? "" : undefined}
-    className={styles.publisherTag}
+    data-compact={props.compact ? "" : undefined}
+    className={clsx(styles.publisherTag, className)}
+    {...omitKeys(props, [
+      "compact",
+      "isLoading",
+      "publisherKey",
+      "name",
+      "icon",
+    ])}
   >
     {props.isLoading ? (
       <Skeleton fill className={styles.icon} />
     ) : (
       <div className={styles.icon}>{props.icon ?? <UndisclosedIcon />}</div>
     )}
-    {props.isLoading ? (
-      <Skeleton width={30} />
-    ) : (
-      <>
-        {props.name ? (
-          <div className={styles.nameAndKey}>
-            <div className={styles.name}>{props.name}</div>
-            <PublisherKey
-              className={styles.key ?? ""}
-              publisherKey={props.publisherKey}
-              size="xs"
-            />
-          </div>
-        ) : (
-          <PublisherKey publisherKey={props.publisherKey} size="sm" />
-        )}
-      </>
-    )}
+    <Contents {...props} />
   </div>
 );
 
@@ -52,3 +44,38 @@ const UndisclosedIcon = ({ className, ...props }: ComponentProps<"div">) => (
     <Broadcast className={styles.undisclosedIcon} />
   </div>
 );
+
+const Contents = (props: Props) => {
+  if (props.isLoading) {
+    return <Skeleton width={30} />;
+  } else if (props.compact) {
+    return props.name ? (
+      <div className={styles.name}>{props.name}</div>
+    ) : (
+      <PublisherKey publisherKey={props.publisherKey} size="xs" />
+    );
+  } else if (props.name) {
+    return (
+      <div className={styles.nameAndKey}>
+        <div className={styles.name}>{props.name}</div>
+        <PublisherKey
+          className={styles.key ?? ""}
+          publisherKey={props.publisherKey}
+          size="xs"
+        />
+      </div>
+    );
+  } else {
+    return <PublisherKey publisherKey={props.publisherKey} size="sm" />;
+  }
+};
+
+const omitKeys = <T extends Record<string, unknown>>(
+  obj: T,
+  keys: string[],
+) => {
+  const omitSet = new Set(keys);
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => !omitSet.has(key)),
+  );
+};

apps/insights/src/components/Root/index.tsx

@@ -1,37 +1,69 @@
+import { lookup as lookupPublisher } from "@pythnetwork/known-publishers";
 import { Root as BaseRoot } from "@pythnetwork/next-root";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import type { ReactNode } from "react";
+import { createElement } from "react";
 
 import { Footer } from "./footer";
 import { Header } from "./header";
 // import { MobileMenu } from "./mobile-menu";
 import styles from "./index.module.scss";
+import { SearchDialogProvider } from "./search-dialog";
 import { TabRoot, TabPanel } from "./tabs";
 import {
   IS_PRODUCTION_SERVER,
   GOOGLE_ANALYTICS_ID,
   AMPLITUDE_API_KEY,
 } from "../../config/server";
+import { toHex } from "../../hex";
+import { getPublishers } from "../../services/clickhouse";
+import { getData } from "../../services/pyth";
 import { LivePricesProvider } from "../LivePrices";
+import { PriceFeedIcon } from "../PriceFeedIcon";
 
 type Props = {
   children: ReactNode;
 };
 
-export const Root = ({ children }: Props) => (
-  <BaseRoot
-    amplitudeApiKey={AMPLITUDE_API_KEY}
-    googleAnalyticsId={GOOGLE_ANALYTICS_ID}
-    enableAccessibilityReporting={!IS_PRODUCTION_SERVER}
-    providers={[NuqsAdapter, LivePricesProvider]}
-    className={styles.root}
-  >
-    <TabRoot className={styles.tabRoot ?? ""}>
-      <Header className={styles.header} />
-      <main className={styles.main}>
-        <TabPanel>{children}</TabPanel>
-      </main>
-      <Footer />
-    </TabRoot>
-  </BaseRoot>
-);
+export const Root = async ({ children }: Props) => {
+  const [data, publishers] = await Promise.all([getData(), getPublishers()]);
+
+  return (
+    <BaseRoot
+      amplitudeApiKey={AMPLITUDE_API_KEY}
+      googleAnalyticsId={GOOGLE_ANALYTICS_ID}
+      enableAccessibilityReporting={!IS_PRODUCTION_SERVER}
+      providers={[NuqsAdapter, LivePricesProvider]}
+      className={styles.root}
+    >
+      <SearchDialogProvider
+        feeds={data.map((feed) => ({
+          id: feed.symbol,
+          key: toHex(feed.product.price_account),
+          displaySymbol: feed.product.display_symbol,
+          icon: <PriceFeedIcon symbol={feed.symbol} />,
+          assetClass: feed.product.asset_type,
+        }))}
+        publishers={publishers.map((publisher) => {
+          const knownPublisher = lookupPublisher(publisher.key);
+          return {
+            id: publisher.key,
+            medianScore: publisher.medianScore,
+            ...(knownPublisher && {
+              name: knownPublisher.name,
+              icon: createElement(knownPublisher.icon.color),
+            }),
+          };
+        })}
+      >
+        <TabRoot className={styles.tabRoot ?? ""}>
+          <Header className={styles.header} />
+          <main className={styles.main}>
+            <TabPanel>{children}</TabPanel>
+          </main>
+          <Footer />
+        </TabRoot>
+      </SearchDialogProvider>
+    </BaseRoot>
+  );
+};

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

@@ -6,11 +6,22 @@ import { Skeleton } from "@pythnetwork/component-library/Skeleton";
 import { useMemo } from "react";
 import { useIsSSR } from "react-aria";
 
-export const SearchButton = () => (
-  <Button beforeIcon={MagnifyingGlass} variant="outline" size="sm" rounded>
-    <SearchText />
-  </Button>
-);
+import { useToggleSearchDialog } from "./search-dialog";
+
+export const SearchButton = () => {
+  const toggleSearchDialog = useToggleSearchDialog();
+  return (
+    <Button
+      onPress={toggleSearchDialog}
+      beforeIcon={MagnifyingGlass}
+      variant="outline"
+      size="sm"
+      rounded
+    >
+      <SearchText />
+    </Button>
+  );
+};
 
 const SearchText = () => {
   const isSSR = useIsSSR();

apps/insights/src/components/Root/search-dialog.module.scss

@@ -0,0 +1,100 @@
+@use "@pythnetwork/component-library/theme";
+
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(from black r g b / 30%);
+  z-index: 1;
+
+  .searchMenu {
+    position: relative;
+    top: theme.spacing(32);
+    margin: 0 auto;
+    outline: none;
+    background: theme.color("background", "secondary");
+    border-radius: theme.border-radius("2xl");
+    padding: theme.spacing(1);
+    max-height: theme.spacing(120);
+    display: flex;
+    flex-flow: column nowrap;
+    flex-grow: 1;
+    gap: theme.spacing(1);
+    width: fit-content;
+
+    .searchBar {
+      flex: none;
+      display: flex;
+      flex-flow: row nowrap;
+      gap: theme.spacing(2);
+      align-items: center;
+      padding: theme.spacing(1);
+
+      .closeButton {
+        margin-left: theme.spacing(8);
+      }
+    }
+
+    .body {
+      background: theme.color("background", "primary");
+      border-radius: theme.border-radius("xl");
+      flex-grow: 1;
+      overflow: hidden;
+      display: flex;
+
+      .listbox {
+        outline: none;
+        overflow: auto;
+        flex-grow: 1;
+
+        .item {
+          padding: theme.spacing(3) theme.spacing(4);
+          display: flex;
+          flex-flow: row nowrap;
+          align-items: center;
+          width: 100%;
+          cursor: pointer;
+          transition: background-color 100ms linear;
+          outline: none;
+          text-decoration: none;
+          border-top: 1px solid theme.color("background", "secondary");
+
+          &[data-is-first] {
+            border-top: none;
+          }
+
+          & > *:last-child {
+            flex-shrink: 0;
+          }
+
+          &[data-focused] {
+            background-color: theme.color(
+              "button",
+              "outline",
+              "background",
+              "hover"
+            );
+          }
+
+          &[data-pressed] {
+            background-color: theme.color(
+              "button",
+              "outline",
+              "background",
+              "active"
+            );
+          }
+
+          .itemType {
+            width: theme.spacing(21);
+            flex-shrink: 0;
+            margin-right: theme.spacing(6);
+          }
+
+          .itemTag {
+            flex-grow: 1;
+          }
+        }
+      }
+    }
+  }
+}