Merge pull request #3292 from pyth-network/bduran/hood-historical-demo-data

Bduran/hood historical demo data

Author: benduran

apps/insights/next.config.js

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

apps/insights/package.json

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "build:vercel": "next build",
+    "build:csv": "tsx ./src/pyth-feed-demo-data/fix-data.ts",
     "fix:format": "prettier --write .",
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
@@ -21,6 +22,7 @@
   },
   "dependencies": {
     "@clickhouse/client": "catalog:",
+    "@duckdb/node-api": "catalog:",
     "@phosphor-icons/react": "catalog:",
     "@pythnetwork/client": "catalog:",
     "@pythnetwork/component-library": "workspace:*",
@@ -33,16 +35,21 @@
     "bs58": "catalog:",
     "change-case": "catalog:",
     "clsx": "catalog:",
+    "color": "catalog:",
     "date-fns": "catalog:",
     "csv-stringify": "catalog:",
+    "dayjs": "catalog:",
     "dnum": "catalog:",
-    "ioredis": "^5.7.0",
+    "fs-extra": "catalog:",
+    "glob": "catalog:",
+    "ioredis": "catalog:",
     "lightweight-charts": "catalog:",
     "match-sorter": "catalog:",
     "motion": "catalog:",
     "next": "catalog:",
     "next-themes": "catalog:",
     "@pythnetwork/react-hooks": "workspace:",
+    "papaparse": "catalog:",
     "react": "catalog:",
     "react-aria": "catalog:",
     "react-aria-components": "catalog:",
@@ -51,6 +58,7 @@
     "sockette": "catalog:",
     "superjson": "catalog:",
     "swr": "catalog:",
+    "tsx": "catalog:",
     "zod": "catalog:",
     "zod-search-params": "catalog:",
     "zod-validation-error": "catalog:"
@@ -62,8 +70,10 @@
     "@cprussin/tsconfig": "catalog:",
     "@pythnetwork/staking-sdk": "workspace:*",
     "@svgr/webpack": "catalog:",
+    "@types/fs-extra": "catalog:",
     "@types/jest": "catalog:",
     "@types/node": "catalog:",
+    "@types/papaparse": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "catalog:",

apps/insights/public/db/historical-demo-data.db

@@ -0,0 +1,52 @@
+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";
+
+export const GET = async (
+  req: NextRequest,
+  ctx: { params: Promise<Record<string, string>> },
+) => {
+  const params = await ctx.params;
+  const {
+    nextUrl: { searchParams },
+  } = req;
+  const paramsAndQueryValidation = GetPythFeedsDemoDataRequestSchema.safeParse({
+    params,
+    searchParams: Object.fromEntries(searchParams),
+  });
+
+  if (paramsAndQueryValidation.error) {
+    return NextResponse.json(
+      {
+        error: paramsAndQueryValidation.error.message,
+      },
+      { status: 400 },
+    );
+  }
+
+  const {
+    params: { datasource: datasourceToUse, symbol: symbolToUse },
+    searchParams: { startAt },
+  } = paramsAndQueryValidation.data;
+
+  try {
+    const { data, hasNext } = await fetchHistoricalDataForPythFeedsDemo({
+      datasource: datasourceToUse,
+      startAt: startAt.toISOString(),
+      symbol: symbolToUse,
+    });
+
+    return NextResponse.json({
+      data,
+      hasNext,
+    });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        error: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+};

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

@@ -10,8 +10,13 @@ import { isAllowedSymbol } from "../../util/pyth-pro-demo";
 
 export function PythProDemoCards() {
   /** context */
-  const { dataSourcesInUse, metrics, selectedSource } =
-    usePythProAppStateContext();
+  const {
+    dataSourcesInUse,
+    dataSourceVisibility,
+    handleToggleDataSourceVisibility,
+    metrics,
+    selectedSource,
+  } = usePythProAppStateContext();
   const { tokens } = usePythProApiTokensContext();
   const { statuses } = useWebSocketsContext();
 
@@ -30,9 +35,11 @@ export function PythProDemoCards() {
             apiToken={tokens[dataSource]}
             currentPriceMetrics={sourceMetrics?.[selectedSource]}
             dataSource={dataSource}
+            key={dataSource}
             selectedSource={selectedSource}
             socketStatus={socketStatus}
-            key={dataSource}
+            sourceVisible={dataSourceVisibility[dataSource]}
+            toggleDataSourceVisibility={handleToggleDataSourceVisibility}
           />
         );
       })}

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

@@ -10,6 +10,13 @@ $price-card-width: 250px;
   padding-top: 0;
 }
 
+.dataSourceName {
+  align-items: center;
+  display: flex;
+  gap: theme.spacing(2);
+  justify-content: space-between;
+}
+
 .price {
   font-size: 1.2rem;
   font-weight: bold;
@@ -34,6 +41,15 @@ $price-card-width: 250px;
   font-style: italic;
 }
 
+.toggleVisibilityBtn[data-size="sm"] {
+  align-items: center;
+  display: inline-flex;
+  padding: 0;
+  height: 2em;
+  justify-content: center;
+  width: 2em;
+}
+
 .root {
   @include theme.elevation("default", 1);
 

apps/insights/src/components/PythProDemoCards/price-card.module.scss

@@ -1,3 +1,5 @@
+import { Eye, EyeSlash } from "@phosphor-icons/react/dist/ssr";
+import { Button } from "@pythnetwork/component-library/Button";
 import { Card } from "@pythnetwork/component-library/Card";
 import type { useWebSocket } from "@pythnetwork/react-hooks/use-websocket";
 import type { Nullish } from "@pythnetwork/shared-lib/types";
@@ -11,9 +13,10 @@ import type {
   AllDataSourcesType,
   CurrentPriceMetrics,
 } from "../../schemas/pyth/pyth-pro-demo-schema";
+import { removeReplaySymbolSuffix } from "../../schemas/pyth/pyth-pro-demo-schema";
 import {
   datasourceRequiresApiToken,
-  getColorForSymbol,
+  getColorForDataSource,
   isAllowedSymbol,
 } from "../../util/pyth-pro-demo";
 
@@ -23,6 +26,8 @@ type PriceCardProps = {
   dataSource: AllDataSourcesType;
   selectedSource: Nullish<AllAllowedSymbols>;
   socketStatus: Nullish<ReturnType<typeof useWebSocket>["status"]>;
+  sourceVisible: boolean;
+  toggleDataSourceVisibility: (dataSource: AllDataSourcesType) => void;
 };
 
 export function PythProDemoCard({
@@ -31,13 +36,17 @@ export function PythProDemoCard({
   dataSource,
   selectedSource,
   socketStatus,
+  sourceVisible,
+  toggleDataSourceVisibility,
 }: PriceCardProps) {
   if (!isAllowedSymbol(selectedSource)) return;
 
   /** local variables */
   const requiresToken = datasourceRequiresApiToken(dataSource);
 
-  const formattedSymbol = selectedSource.toUpperCase();
+  const toggleVisibilityTooltip = `${sourceVisible ? "Hide" : "Show"} this data source in the chart`;
+  const formattedSymbol =
+    removeReplaySymbolSuffix(selectedSource).toUpperCase();
   const formattedDataSource = capitalCase(dataSource);
   let priceChangeClassName: Nullish<string> = "";
 
@@ -55,7 +64,21 @@ export function PythProDemoCard({
       className={classes.root}
       nonInteractive
       title={
-        <span style={{ color: getColorForSymbol(dataSource) }}>
+        <span
+          className={classes.dataSourceName}
+          style={{ color: getColorForDataSource(dataSource) }}
+        >
+          <Button
+            aria-label={toggleVisibilityTooltip}
+            className={classes.toggleVisibilityBtn ?? ""}
+            onPress={() => {
+              toggleDataSourceVisibility(dataSource);
+            }}
+            size="sm"
+            variant="ghost"
+          >
+            {sourceVisible ? <Eye /> : <EyeSlash />}
+          </Button>
           {formattedDataSource}
         </span>
       }

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

@@ -1,14 +1,30 @@
 @use "@pythnetwork/component-library/theme";
 
-.root {
-  height: 300px;
+.buttons {
+  align-items: center;
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  gap: theme.spacing(2);
+  justify-content: flex-end;
+}
+
+.chartContainer {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
 
-  @include theme.breakpoint("sm") {
-    height: 600px;
-  }
+.verticalDivider {
+  background-color: theme.color("border");
+  height: theme.spacing(6);
+  width: 1px;
+}
 
-  & > canvas {
-    height: 100%;
-    width: 100%;
-  }
+.root {
+  display: flex;
+  flex-flow: column;
+  gap: theme.spacing(2);
+  height: theme.spacing(110);
+  position: relative;
+  width: 100%;
 }