feat(component-library, insights): added a simple datetime picker and historical fetching to the pyth feeds demo, with URL deeplinking

apps/developer-hub/content/docs/price-feeds/pro/getting-started.mdx

@@ -142,10 +142,11 @@ client.subscribe({
 ```
 
 <Callout type="info">
-  For a detailed explanation of every property passed to `client.subscribe`, see the [Payload Reference](/price-feeds/pro/payload-reference#stream-response-structure).
+  For a detailed explanation of every property passed to `client.subscribe`, see
+  the [Payload
+  Reference](/price-feeds/pro/payload-reference#stream-response-structure).
 </Callout>
 
-
   </Step>
 </Steps>
 

apps/insights/next.config.js

@@ -14,8 +14,6 @@ const config = {
     },
   },
 
-  serverExternalPackages: ["@duckdb/node-api"],
-
   turbopack: {
     rules: {
       "*.svg": {

apps/insights/package.json

@@ -12,7 +12,7 @@
     "fix:format": "prettier --write .",
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
-    "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_TBkf9EyQjQF37gs4Vk0sQKJj97kE vercel env pull",
+    "pull:env": "[ $CI ] || (VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_TBkf9EyQjQF37gs4Vk0sQKJj97kE vercel env pull && ../../scripts/nextjs/fix-env-vars.mjs)",
     "start:dev": "next dev --port 3003",
     "start:prod": "next start --port 3003",
     "test:format": "prettier --check .",
@@ -22,7 +22,6 @@
   },
   "dependencies": {
     "@clickhouse/client": "catalog:",
-    "@duckdb/node-api": "catalog:",
     "@phosphor-icons/react": "catalog:",
     "@pythnetwork/client": "catalog:",
     "@pythnetwork/component-library": "workspace:*",
@@ -87,4 +86,4 @@
     "stylelint-config-standard-scss": "catalog:",
     "vercel": "catalog:"
   }
-}
+}

apps/insights/src/app/api/pyth/get-pyth-feeds-demo-data/[symbol]/route.ts

@@ -1,58 +1,65 @@
 import { NextRequest, NextResponse } from "next/server";
 
-import { fetchHistoricalDataForPythFeedsDemo } from "../../../../../pyth-feed-demo-data/fetch-historical-data-from-db";
 import { GetPythFeedsDemoDataRequestSchema } from "../../../../../schemas/pyth/pyth-pro-demo-schema";
+import { getNbboAndPythProHistoricalPricesForSymbol } from "../../../../../services/clickhouse";
 
-export const GET = async (
+export async function GET(
   req: NextRequest,
   ctx: { params: Promise<Record<string, string>> },
-) => {
+) {
   const params = await ctx.params;
+
   const {
     nextUrl: { searchParams },
   } = req;
+  const dataSourcesToUse = searchParams.getAll("datasources[]");
 
-  const searchParamsToUse = {
+  const query = {
     ...Object.fromEntries(searchParams),
-    datasources: searchParams.getAll("datasources[]"),
+    datasources: dataSourcesToUse,
   };
 
-  const paramsAndQueryValidation = GetPythFeedsDemoDataRequestSchema.safeParse({
+  const validatedParams = GetPythFeedsDemoDataRequestSchema.safeParse({
     params,
-    searchParams: searchParamsToUse,
+    searchParams: query,
   });
 
-  if (paramsAndQueryValidation.error) {
+  if (validatedParams.error) {
     return NextResponse.json(
-      {
-        error: paramsAndQueryValidation.error.format(),
-      },
+      { error: validatedParams.error.format() },
       { status: 400 },
     );
   }
 
   const {
-    params: { symbol: symbolToUse },
-    searchParams: { datasources, startAt },
-  } = paramsAndQueryValidation.data;
+    data: {
+      params: { symbol },
+      searchParams: { datasources, startAt },
+    },
+  } = validatedParams;
+
+  const end = new Date(startAt);
+  // enforce the end time for this API,
+  // when called by a public user,
+  // only allows for 1 minute beyond the startAt.
+  end.setTime(end.getTime() + 1000 * 60);
 
   try {
-    const { data, hasNext } = await fetchHistoricalDataForPythFeedsDemo({
-      datasources,
-      startAt: startAt.toISOString(),
-      symbol: symbolToUse,
+    const response = await getNbboAndPythProHistoricalPricesForSymbol({
+      end,
+      sources: datasources,
+      start: startAt,
+      symbol,
     });
 
-    return NextResponse.json({
-      data,
-      hasNext,
-    });
+    return NextResponse.json(response);
   } catch (error) {
-    return NextResponse.json(
-      {
-        error: error instanceof Error ? error.message : String(error),
-      },
-      { status: 500 },
-    );
+    if (error instanceof Error) {
+      return NextResponse.json(
+        { error: error.message || error },
+        { status: 500 },
+      );
+    }
+    return NextResponse.json({ error: String(error) }, { status: 500 });
   }
-};
+}

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

@@ -4,6 +4,20 @@
   padding-top: theme.spacing(4);
 }
 
+.suspenseLoader {
+  @include theme.max-width;
+  align-items: center;
+  display: flex;
+  flex-flow: column;
+  gap: theme.spacing(2);
+  margin-top: theme.spacing(6);
+
+  & svg {
+    height: theme.spacing(10);
+    width: theme.spacing(10);
+  }
+}
+
 .subheader {
   border-bottom: 1px solid theme.color("border");
   display: flex;

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

@@ -1,5 +1,8 @@
 "use client";
 
+import { Spinner } from "@pythnetwork/component-library/Spinner";
+import { Suspense } from "react";
+
 import classes from "./index.module.scss";
 import {
   PythProApiTokensProvider,
@@ -12,32 +15,43 @@ import { PythProDemoPriceChart } from "../PythProDemoPriceChart";
 import { PythProDemoSourceSelector } from "../PythProDemoSourceSelector";
 
 export function PythFeedsDemoPage() {
+  const suspenseLoaderLabel = "Initializing Pyth Pro demo...";
+
   return (
     <PythProApiTokensProvider>
-      <PythProAppStateProvider>
-        <WebSocketsProvider>
-          <article className={classes.pythFeedsDemoPageRoot}>
-            <section>
-              <div className={classes.subheader}>
-                <div>
-                  <h3>Pyth Pro</h3>
-                  <h4>Real-time feed comparison tool</h4>
+      <Suspense
+        fallback={
+          <div className={classes.suspenseLoader}>
+            <div>{suspenseLoaderLabel}</div>
+            <Spinner isIndeterminate label={suspenseLoaderLabel} />
+          </div>
+        }
+      >
+        <PythProAppStateProvider>
+          <WebSocketsProvider>
+            <article className={classes.pythFeedsDemoPageRoot}>
+              <section>
+                <div className={classes.subheader}>
+                  <div>
+                    <h3>Pyth Pro</h3>
+                    <h4>Real-time feed comparison tool</h4>
+                  </div>
+                  <div>
+                    <PythProApiTokensMenu />
+                    <PythProDemoSourceSelector />
+                  </div>
                 </div>
-                <div>
-                  <PythProApiTokensMenu />
-                  <PythProDemoSourceSelector />
+                <div className={classes.body}>
+                  <PythProDemoCards />
                 </div>
-              </div>
-              <div className={classes.body}>
-                <PythProDemoCards />
-              </div>
-            </section>
-            <aside>
-              <PythProDemoPriceChart />
-            </aside>
-          </article>
-        </WebSocketsProvider>
-      </PythProAppStateProvider>
+              </section>
+              <aside>
+                <PythProDemoPriceChart />
+              </aside>
+            </article>
+          </WebSocketsProvider>
+        </PythProAppStateProvider>
+      </Suspense>
     </PythProApiTokensProvider>
   );
 }

apps/insights/src/components/PythProDemoCards/price-card.tsx

@@ -105,7 +105,8 @@ export function PythProDemoCard({
             {/* the token is either missing or it's a bad token */}
             {!isReplaySymbol(selectedSource) &&
             requiresToken &&
-            (!apiToken || socketStatus === "closed") ? (
+            !apiToken &&
+            socketStatus === "closed" ? (
               <>
                 Please enter a good API token
                 <br />

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

@@ -1,23 +1,68 @@
 @use "@pythnetwork/component-library/theme";
 
 .buttons {
-  align-items: center;
   display: flex;
+  flex-flow: column;
   flex-grow: 0;
   flex-shrink: 0;
   gap: theme.spacing(2);
-  justify-content: flex-end;
+
+  @include theme.breakpoint("sm") {
+    align-items: center;
+    flex-flow: initial;
+    justify-content: flex-end;
+  }
 }
 
 .chartContainer {
   flex-grow: 1;
   flex-shrink: 0;
 }
 
+.selectDateAndTimeMsg {
+  background-color: theme.color("background", "tooltip");
+  border-radius: theme.border-radius("md");
+  color: theme.color("tooltip");
+  margin-top: theme.spacing(4);
+  padding: theme.spacing(2);
+
+  &::before {
+    content: "";
+    border-bottom: theme.spacing(2) solid theme.color("background", "tooltip");
+    border-left: theme.spacing(2) solid transparent;
+    border-right: theme.spacing(2) solid transparent;
+    display: block;
+    height: 0;
+    left: 50%;
+    position: absolute;
+    top: calc((theme.spacing(2) * -1) + 1px);
+    width: 0;
+  }
+}
+
+.spinner {
+  align-items: center;
+  color: theme.color("muted");
+  display: flex;
+  flex-flow: column;
+  gap: theme.spacing(4);
+  margin-top: theme.spacing(6);
+
+  & svg {
+    height: theme.spacing(10);
+    width: theme.spacing(10);
+  }
+}
+
 .verticalDivider {
-  background-color: theme.color("border");
-  height: theme.spacing(6);
-  width: 1px;
+  display: none;
+
+  @include theme.breakpoint("sm") {
+    background-color: theme.color("border");
+    display: initial;
+    height: theme.spacing(6);
+    width: 1px;
+  }
 }
 
 .root {