From 4cfb9ee1db6771cfdb0bb2d016ad5b847e2ea08f Mon Sep 17 00:00:00 2001
From: Johnny D <johnnyD.eth@protonmail.com>
Date: Sun, 11 Aug 2024 09:26:01 +1000
Subject: [PATCH] V4 project page: volume charts [1/n] (#4420)

---
 .../VolumeChart/hooks/useProjectTimeline.ts   | 19 +++++++------------
 .../V4ActivityPanel/V4ActivityList.tsx        |  4 ++--
 .../V4ActivityPanel/V4ActivityPanel.tsx       | 13 +++++++------
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/VolumeChart/hooks/useProjectTimeline.ts b/src/components/VolumeChart/hooks/useProjectTimeline.ts
index cc8fea805e..3410c66eae 100644
--- a/src/components/VolumeChart/hooks/useProjectTimeline.ts
+++ b/src/components/VolumeChart/hooks/useProjectTimeline.ts
@@ -1,12 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
 import { PV_V2, PV_V4 } from 'constants/pv'
 import { readProvider } from 'constants/readProvider'
+import { RomanStormVariables } from 'constants/romanStorm'
 import EthDater from 'ethereum-block-by-date'
-import {
-  ProjectTlQuery,
-  useProjectsQuery,
-  useProjectTlQuery,
-} from 'generated/graphql'
+import { ProjectTlQuery, useProjectsQuery, useProjectTlQuery } from 'generated/graphql'
 import { client } from 'lib/apollo/client'
 import { PV } from 'models/pv'
 import { ProjectTlDocument } from 'packages/v4/graphql/client/graphql'
@@ -15,7 +12,6 @@ import { useMemo } from 'react'
 import { wadToFloat } from 'utils/format/formatNumber'
 import { getSubgraphIdForProject } from 'utils/graph'
 import { daysToMS, minutesToMS } from 'utils/units'
-import { RomanStormVariables } from 'constants/romanStorm'
 
 import { ProjectTimelinePoint, ProjectTimelineRange } from '../types'
 
@@ -105,13 +101,14 @@ export function useProjectTimeline({
       skip: pv === PV_V4,
     })
 
+
   const { data: v4QueryResult } = useSubgraphQuery({
-    document: ProjectTlDocument,
+    document: ProjectTlDocument, 
     variables: {
       id: blocks ? projectId.toString() : '',
       ...blocks,
     },
-    enabled: pv === PV_V4,
+    enabled: pv === PV_V4
   })
 
   const points = useMemo(() => {
@@ -121,9 +118,7 @@ export function useProjectTimeline({
     const points: ProjectTimelinePoint[] = []
 
     for (let i = 0; i < COUNT; i++) {
-      const point = (queryResult as ProjectTlQuery)[
-        `p${i}` as keyof typeof queryResult
-      ]
+      const point = (queryResult as ProjectTlQuery)[`p${i}` as keyof typeof queryResult]
 
       if (!point) continue
       if (exceptionTimestamp && exceptionTimestamp > timestamps[i]) {
@@ -149,7 +144,7 @@ export function useProjectTimeline({
     }
 
     return points
-  }, [timestamps, v1v2v3QueryResult, v4QueryResult, pv])
+  }, [timestamps, v1v2v3QueryResult, v4QueryResult, pv, projectId, exceptionTimestamp, romanStormData?.projects])
 
   return {
     points,
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4ActivityPanel/V4ActivityList.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4ActivityPanel/V4ActivityList.tsx
index 7341ebabb9..27db6ece2d 100644
--- a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4ActivityPanel/V4ActivityList.tsx
+++ b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4ActivityPanel/V4ActivityList.tsx
@@ -22,14 +22,14 @@ export function V4ActivityList() {
 
   // TODO: pageSize (pagination)
   const { data: payEventsData, isLoading } = useSubgraphQuery({
-    document: PayEventsDocument,
+    document: PayEventsDocument, 
     variables: {
       orderBy: PayEvent_OrderBy.timestamp,
       orderDirection: OrderDirection.desc,
       where: {
         projectId: Number(projectId),
       },
-    },
+    }
   })
 
   const payEvents = transformPayEventsRes(payEventsData) ?? []
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4ActivityPanel/V4ActivityPanel.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4ActivityPanel/V4ActivityPanel.tsx
index b1428fbbee..cb8274affc 100644
--- a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4ActivityPanel/V4ActivityPanel.tsx
+++ b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4ActivityPanel/V4ActivityPanel.tsx
@@ -1,7 +1,8 @@
 import { Trans } from '@lingui/macro'
 import { ErrorBoundaryCallout } from 'components/Callout/ErrorBoundaryCallout'
 import Loading from 'components/Loading'
-// import VolumeChart from 'components/VolumeChart'
+import VolumeChart from 'components/VolumeChart'
+import { PV_V4 } from 'constants/pv'
 import { useJBContractContext } from 'juice-sdk-react'
 import { ProjectsDocument } from 'packages/v4/graphql/client/graphql'
 import { useSubgraphQuery } from 'packages/v4/graphql/useSubgraphQuery'
@@ -11,14 +12,14 @@ import { V4ActivityList } from './V4ActivityList'
 export function V4ActivityPanel() {
   const { projectId } = useJBContractContext()
   const { data } = useSubgraphQuery({
-    document: ProjectsDocument,
+    document: ProjectsDocument, 
     variables: {
       where: {
         projectId: Number(projectId),
       },
-    },
+    }
   })
-
+  
   const createdAt = data?.projects?.[0].createdAt
 
   return (
@@ -29,12 +30,12 @@ export function V4ActivityPanel() {
             <ErrorBoundaryCallout
               message={<Trans>Volume chart failed to load.</Trans>}
             >
-              {/* <VolumeChart
+              <VolumeChart
                 height={240}
                 projectId={Number(projectId)}
                 createdAt={createdAt}
                 pv={PV_V4}
-              /> */}
+              />
             </ErrorBoundaryCallout>
           </Suspense>
         </div>