Merge pull request #2206 from pyth-network/cprussin/add-component-table

feat(staking): add price components table

Author: cprussin

apps/insights/package.json

@@ -44,6 +44,7 @@
     "react-aria-components": "catalog:",
     "react-dom": "catalog:",
     "recharts": "catalog:",
+    "superjson": "catalog:",
     "swr": "catalog:",
     "zod": "catalog:"
   },

apps/insights/src/app/price-feeds/[slug]/layout.ts

@@ -1,13 +1,13 @@
 import type { Metadata } from "next";
 
-import { client } from "../../../services/pyth";
+import { getData } from "../../../services/pyth";
 export { PriceFeedLayout as default } from "../../../components/PriceFeed/layout";
 
 export const metadata: Metadata = {
   title: "Price Feeds",
 };
 
 export const generateStaticParams = async () => {
-  const data = await client.getData();
-  return data.symbols.map((symbol) => ({ slug: encodeURIComponent(symbol) }));
+  const data = await getData();
+  return data.map(({ symbol }) => ({ slug: encodeURIComponent(symbol) }));
 };

apps/insights/src/app/price-feeds/[slug]/price-components/[componentId]/page.tsx

@@ -0,0 +1,11 @@
+type Props = {
+  params: Promise<{
+    componentId: string;
+  }>;
+};
+
+const PriceFeedComponent = async ({ params }: Props) => {
+  const { componentId } = await params;
+  return componentId;
+};
+export default PriceFeedComponent;

apps/insights/src/app/price-feeds/[slug]/price-components/layout.tsx

@@ -0,0 +1 @@
+export { PriceComponents as default } from "../../../../components/PriceFeed/price-components";

apps/insights/src/app/price-feeds/[slug]/price-components/page.tsx

@@ -1 +1,3 @@
-export { PriceComponents as default } from "../../../../components/PriceFeed/price-components";
+// eslint-disable-next-line unicorn/no-null
+const Page = () => null;
+export default Page;

apps/insights/src/cache.ts

@@ -0,0 +1,16 @@
+import { unstable_cache } from "next/cache";
+import { parse, stringify } from "superjson";
+
+export const cache = <T, P extends unknown[]>(
+  fn: (...params: P) => Promise<T>,
+  keys?: Parameters<typeof unstable_cache>[1],
+  opts?: Parameters<typeof unstable_cache>[2],
+) => {
+  const cachedFn = unstable_cache(
+    async (params: P): Promise<string> => stringify(await fn(...params)),
+    keys,
+    opts,
+  );
+
+  return async (...params: P): Promise<T> => parse(await cachedFn(params));
+};

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

@@ -3,23 +3,31 @@
 import { Check } from "@phosphor-icons/react/dist/ssr/Check";
 import { Copy } from "@phosphor-icons/react/dist/ssr/Copy";
 import { useLogger } from "@pythnetwork/app-logger";
-import { Button } from "@pythnetwork/component-library/Button";
+import {
+  type Props as ButtonProps,
+  Button,
+} from "@pythnetwork/component-library/Button";
 import clsx from "clsx";
-import { type ComponentProps, useCallback, useEffect, useState } from "react";
+import { type ElementType, useCallback, useEffect, useState } from "react";
 
 import styles from "./index.module.scss";
 
 type OwnProps = {
   text: string;
 };
 
-type Props = Omit<
-  ComponentProps<typeof Button>,
+type Props<T extends ElementType> = Omit<
+  ButtonProps<T>,
   keyof OwnProps | "onPress" | "afterIcon"
 > &
   OwnProps;
 
-export const CopyButton = ({ text, children, className, ...props }: Props) => {
+export const CopyButton = <T extends ElementType>({
+  text,
+  children,
+  className,
+  ...props
+}: Props<T>) => {
   const [isCopied, setIsCopied] = useState(false);
   const logger = useLogger();
   const copy = useCallback(() => {

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

@@ -1,6 +1,6 @@
-import base58 from "bs58";
 import { useMemo, type ComponentProps } from "react";
 
+import { toHex, truncateHex } from "../../hex";
 import { CopyButton } from "../CopyButton";
 
 type OwnProps = {
@@ -22,24 +22,11 @@ export const FeedKey = ({ feed, ...props }: Props) => {
     () => toHex(feed.product.price_account),
     [feed.product.price_account],
   );
-  const truncatedKey = useMemo(
-    () => toTruncatedHex(feed.product.price_account),
-    [feed.product.price_account],
-  );
+  const truncatedKey = useMemo(() => truncateHex(key), [key]);
 
   return (
     <CopyButton text={key} {...props}>
       {truncatedKey}
     </CopyButton>
   );
 };
-
-const toHex = (value: string) => toHexString(base58.decode(value));
-
-const toTruncatedHex = (value: string) => {
-  const hex = toHex(value);
-  return `${hex.slice(0, 6)}...${hex.slice(-4)}`;
-};
-
-const toHexString = (byteArray: Uint8Array) =>
-  `0x${Array.from(byteArray, (byte) => byte.toString(16).padStart(2, "0")).join("")}`;

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

@@ -0,0 +1,13 @@
+"use client";
+
+import { useMemo } from "react";
+import { useNumberFormatter } from "react-aria";
+
+type Props = Parameters<typeof useNumberFormatter>[0] & {
+  value: number;
+};
+
+export const FormattedNumber = ({ value, ...args }: Props) => {
+  const numberFormatter = useNumberFormatter(args);
+  return useMemo(() => numberFormatter.format(value), [numberFormatter, value]);
+};

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

@@ -53,7 +53,7 @@ export const LayoutTransition = ({ children, ...props }: Props) => {
 
   return (
     <AnimatePresence
-      mode="wait"
+      mode="popLayout"
       initial={false}
       onExitComplete={updatePrevSegment}
       custom={{ segment, prevSegment: prevSegment.current }}