Merge pull request #3006 from pyth-network/fix/callback

feat: separate into client component

Author: alexcambose

apps/insights/src/components/Publisher/layout.tsx

@@ -21,7 +21,12 @@ import {
   getPublisherAverageScoreHistory,
 } from "../../services/clickhouse";
 import { getPublisherCaps } from "../../services/hermes";
-import { ClusterToName, parseCluster, Cluster } from "../../services/pyth";
+import {
+  ClusterToName,
+  parseCluster,
+  Cluster,
+  CLUSTER_NAMES,
+} from "../../services/pyth";
 import { getPublisherPoolData } from "../../services/staking";
 import { Cards } from "../Cards";
 import { ChangePercent } from "../ChangePercent";
@@ -45,9 +50,7 @@ import { SemicircleMeter } from "../SemicircleMeter";
 import { TabPanel, TabRoot, Tabs } from "../Tabs";
 import { TokenIcon } from "../TokenIcon";
 import { OisApyHistory } from "./ois-apy-history";
-import ConformanceReport from "../ConformanceReport/conformance-report";
-import type { Interval } from "../ConformanceReport/types";
-import { useDownloadReportForPublisher } from "../ConformanceReport/use-download-report-for-publisher";
+import { PublisherConformanceReport } from "./publisher-conformance-report";
 
 type Props = {
   children: ReactNode;
@@ -107,16 +110,6 @@ const PublisherHeader = ({
 }) => {
   const knownPublisher = lookup(publisherKey);
 
-  const downloadReportForPublisher = useDownloadReportForPublisher();
-
-  const handleDownloadReport = (interval: Interval) => {
-    return downloadReportForPublisher({
-      publisher: publisherKey,
-      cluster: ClusterToName[cluster],
-      interval,
-    });
-  };
-
   return (
     <section className={styles.header}>
       <div className={styles.breadcrumbRow}>
@@ -139,7 +132,10 @@ const PublisherHeader = ({
             icon: <PublisherIcon knownPublisher={knownPublisher} />,
           })}
         />
-        <ConformanceReport onClick={handleDownloadReport} />
+        <PublisherConformanceReport
+          publisherKey={publisherKey}
+          cluster={CLUSTER_NAMES[cluster]}
+        />
       </div>
 
       <Cards className={styles.stats ?? ""}>

apps/insights/src/components/Publisher/publisher-conformance-report.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useCallback } from "react";
+
+import { CLUSTER_NAMES } from "../../services/pyth";
+import ConformanceReport from "../ConformanceReport/conformance-report";
+import type { Interval } from "../ConformanceReport/types";
+import { useDownloadReportForPublisher } from "../ConformanceReport/use-download-report-for-publisher";
+
+export const PublisherConformanceReport = ({
+  publisherKey,
+  cluster,
+}: {
+  publisherKey: string;
+  cluster: (typeof CLUSTER_NAMES)[number];
+}) => {
+  const downloadReportForPublisher = useDownloadReportForPublisher();
+  const handleDownloadReport = useCallback(
+    (interval: Interval) => {
+      return downloadReportForPublisher({
+        publisher: publisherKey,
+        cluster,
+        interval,
+      });
+    },
+    [publisherKey, cluster, downloadReportForPublisher],
+  );
+
+  return <ConformanceReport onClick={handleDownloadReport} />;
+};