pyth-network · cprussin · Dec 7, 2024 · Dec 4, 2024
@@ -26,13 +26,15 @@
     "@pythnetwork/client": "catalog:",
     "@pythnetwork/component-library": "workspace:*",
     "@pythnetwork/fonts": "workspace:*",
+    "@pythnetwork/hermes-client": "workspace:*",
     "@pythnetwork/known-publishers": "workspace:*",
     "@pythnetwork/next-root": "workspace:*",
     "@react-hookz/web": "catalog:",
     "@solana/web3.js": "catalog:",
     "bs58": "catalog:",
     "clsx": "catalog:",
     "cryptocurrency-icons": "catalog:",
+    "dnum": "catalog:",
     "framer-motion": "catalog:",
     "next": "catalog:",
     "next-themes": "catalog:",
@@ -41,6 +43,7 @@
     "react-aria": "catalog:",
     "react-aria-components": "catalog:",
     "react-dom": "catalog:",
+    "recharts": "catalog:",
     "swr": "catalog:",
     "zod": "catalog:"
   },
@@ -49,6 +52,7 @@
     "@cprussin/jest-config": "catalog:",
     "@cprussin/prettier-config": "catalog:",
     "@cprussin/tsconfig": "catalog:",
+    "@pythnetwork/staking-sdk": "workspace:",
     "@svgr/webpack": "catalog:",
     "@types/jest": "catalog:",
     "@types/node": "catalog:",

@@ -1,14 +1,17 @@
 "use client";
 
+import { LoggerProvider } from "@pythnetwork/app-logger/provider";
 import type { ComponentProps } from "react";
 
 import { Error } from "../components/Error";
 
 const GlobalError = (props: ComponentProps<typeof Error>) => (
-  <html lang="en" dir="ltr">
-    <body>
-      <Error {...props} />
-    </body>
-  </html>
+  <LoggerProvider>
+    <html lang="en" dir="ltr">
+      <body>
+        <Error {...props} />
+      </body>
+    </html>
+  </LoggerProvider>
 );
 export default GlobalError;
@@ -1,13 +1,13 @@
 import type { NextRequest } from "next/server";
 import { z } from "zod";
 
-import { client } from "../../clickhouse";
+import { client } from "../../services/clickhouse";
 
 export async function GET(req: NextRequest) {
   const symbols = req.nextUrl.searchParams.getAll("symbols");
   const rows = await client.query({
     query:
-      "select * from insights_yesterdays_prices(symbols={symbols: Array(String)})",
+      "select symbol, price from insights_yesterdays_prices(symbols={symbols: Array(String)})",
     query_params: { symbols },
   });
   const result = await rows.json();

@@ -0,0 +1,21 @@
+"use client";
+
+import { Skeleton } from "@pythnetwork/component-library/Skeleton";
+import { Suspense, use } from "react";
+
+type Props<T> = {
+  placeholderWidth: number;
+  valuePromise: Promise<T>;
+};
+
+export const AsyncValue = <T,>({
+  placeholderWidth,
+  valuePromise,
+}: Props<T>) => (
+  <Suspense fallback={<Skeleton width={placeholderWidth} />}>
+    <ResolvedValue valuePromise={valuePromise} />
+  </Suspense>
+);
+
+const ResolvedValue = <T,>({ valuePromise }: Pick<Props<T>, "valuePromise">) =>
+  use(valuePromise);
@@ -0,0 +1,26 @@
+"use client";
+
+import * as dnum from "dnum";
+import { useMemo } from "react";
+import { useLocale } from "react-aria";
+
+const DECIMALS = 6;
+
+type Props = {
+  mode?: "compact" | "wholePart" | "full";
+  children: bigint;
+};
+
+export const FormattedTokens = ({ children, mode = "compact" }: Props) => {
+  const { locale } = useLocale();
+  const value = useMemo(
+    () =>
+      dnum.format([children, DECIMALS], {
+        compact: mode === "compact",
+        locale,
+      }),
+    [children, locale, mode],
+  );
+
+  return mode === "wholePart" ? value.split(".")[0] : value;
+};
@@ -16,7 +16,7 @@ import {
 import { useNumberFormatter } from "react-aria";
 
 import styles from "./index.module.scss";
-import { client, subscribe } from "../../pyth";
+import { client, subscribe } from "../../services/pyth";
 
 export const SKELETON_WIDTH = 20;
 

@@ -2,4 +2,12 @@
 
 .overview {
   @include theme.max-width;
+
+  .header {
+    @include theme.h3;
+
+    color: theme.color("heading");
+    font-weight: theme.font-weight("semibold");
+    margin: theme.spacing(6) 0;
+  }
 }
@@ -1,8 +1,7 @@
 import styles from "./index.module.scss";
-import { H1 } from "../H1";
 
 export const Overview = () => (
   <div className={styles.overview}>
-    <H1>Overview</H1>
+    <h1 className={styles.header}>Overview</h1>
   </div>
 );
@@ -6,49 +6,36 @@
   Drawer,
   DrawerTrigger,
 } from "@pythnetwork/component-library/Drawer";
-import { Skeleton } from "@pythnetwork/component-library/Skeleton";
-import { StatCard } from "@pythnetwork/component-library/StatCard";
 import { Table } from "@pythnetwork/component-library/Table";
 import { usePathname } from "next/navigation";
-import { createSerializer } from "nuqs";
-import { Suspense, use, useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 import { useCollator } from "react-aria";
 
-import styles from "./asset-classes-card.module.scss";
-import { queryParams, useQuery } from "./use-query";
+import { serialize, useQueryParams } from "./query-params";
 
 type Props = {
-  numFeedsByAssetClassPromise: Promise<Record<string, number>>;
+  numFeedsByAssetClass: Record<string, number>;
+  children: ReactNode;
 };
 
-export const AssetClassesCard = ({ numFeedsByAssetClassPromise }: Props) => (
-  <Suspense
-    fallback={
-      <StatCard stat={<Skeleton width={10} />} {...sharedStatCardProps} />
-    }
-  >
-    <ResolvedAssetClassesCard
-      numFeedsByAssetClassPromise={numFeedsByAssetClassPromise}
-    />
-  </Suspense>
-);
-
-const ResolvedAssetClassesCard = ({ numFeedsByAssetClassPromise }: Props) => {
-  const numFeedsByAssetClass = use(numFeedsByAssetClassPromise);
+export const AssetClassesDrawer = ({
+  numFeedsByAssetClass,
+  children,
+}: Props) => {
   const numAssetClasses = useMemo(
     () => Object.keys(numFeedsByAssetClass).length,
     [numFeedsByAssetClass],
   );
 
   return (
     <DrawerTrigger>
-      <StatCard stat={numAssetClasses} {...sharedStatCardProps} />
+      {children}
       <Drawer
         title={
-          <div className={styles.drawerTitle}>
+          <>
             <span>Asset Classes</span>
             <Badge>{numAssetClasses}</Badge>
-          </div>
+          </>
         }
       >
         {({ close }) => (
@@ -62,10 +49,6 @@
   );
 };
 
-const sharedStatCardProps = {
-  header: "Asset Classes",
-};
-
 type AssetClassTableProps = {
   numFeedsByAssetClass: Record<string, number>;
   closeDrawer: () => void;
@@ -77,29 +60,27 @@
 }: AssetClassTableProps) => {
   const collator = useCollator();
   const pathname = usePathname();
-  const { updateAssetClass } = useQuery();
+  const { updateAssetClass, updateSearch } = useQueryParams();
   const assetClassRows = useMemo(
     () =>
       Object.entries(numFeedsByAssetClass)
         .sort(([a], [b]) => collator.compare(a, b))
-        .map(([assetClass, count]) => {
-          const serialize = createSerializer(queryParams);
-          return {
-            id: assetClass,
-            href: `${pathname}${serialize({ assetClass })}`,
-            onAction: () => {
-              closeDrawer();
-              setTimeout(() => {
-                updateAssetClass(assetClass);
-              }, CLOSE_DURATION_IN_MS);
-            },
-            data: {
-              assetClass,
-              count: <Badge style="outline">{count}</Badge>,
-            },
-          };
-        }),
+        .map(([assetClass, count]) => ({
+          id: assetClass,
+          href: `${pathname}${serialize({ assetClass })}`,
+          onAction: () => {
+            closeDrawer();
+            setTimeout(() => {
+              updateAssetClass(assetClass);
+              updateSearch("");
+            }, CLOSE_DURATION_IN_MS);
+          },
+          data: {
+            assetClass,
+            count: <Badge style="outline">{count}</Badge>,
+          },
+        })),
     [numFeedsByAssetClass, collator, closeDrawer, pathname, updateAssetClass],
   );
   return (
    <Table

@@ -0,0 +1,15 @@
+@use "@pythnetwork/component-library/theme";
+
+.searchBar {
+  width: 100%;
+  padding: theme.spacing(3);
+  display: flex;
+  flex-flow: row nowrap;
+  gap: theme.spacing(3);
+  flex: none;
+}
+
+.priceFeeds {
+  overflow: auto;
+  flex-grow: 1;
+}