feat(insights): mostly finish publishers index page

Author: cprussin

apps/insights/package.json

@@ -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:",

apps/insights/src/app/publishers/layout.ts

@@ -7,7 +7,7 @@ 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();

apps/insights/src/app/publishers/loading.ts

@@ -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);

apps/insights/src/app/yesterdays-prices/route.ts

@@ -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;
+};