From 2c8b7527027178eca751018d17e9fde28bf3c4a8 Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Sun, 8 Dec 2024 19:13:56 +1000
Subject: [PATCH] Async the V4ProjectPage

---
 .../V4ProjectDashboard/V4ProjectDashboard.tsx |  2 +-
 .../V4ProjectDashboard/V4ProjectProviders.tsx | 49 +++++++++++++++
 .../v4/[chainName]/p/[projectId]/index.tsx    | 61 ++++---------------
 3 files changed, 62 insertions(+), 50 deletions(-)
 create mode 100644 src/packages/v4/views/V4ProjectDashboard/V4ProjectProviders.tsx

diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectDashboard.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectDashboard.tsx
index 52880d268e..3bdfa54f86 100644
--- a/src/packages/v4/views/V4ProjectDashboard/V4ProjectDashboard.tsx
+++ b/src/packages/v4/views/V4ProjectDashboard/V4ProjectDashboard.tsx
@@ -11,7 +11,7 @@ import { useProjectPageQueries } from './hooks/useProjectPageQueries'
 import { V4ProjectHeader } from './V4ProjectHeader'
 import { V4ProjectTabs } from './V4ProjectTabs/V4ProjectTabs'
 
-export function V4ProjectDashboard() {
+export default function V4ProjectDashboard() {
   const { projectPayReceipt } = useProjectPageQueries()
 
   if (projectPayReceipt !== undefined) {
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectProviders.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectProviders.tsx
new file mode 100644
index 0000000000..bd305f0437
--- /dev/null
+++ b/src/packages/v4/views/V4ProjectDashboard/V4ProjectProviders.tsx
@@ -0,0 +1,49 @@
+import { AppWrapper } from 'components/common/CoreAppWrapper/CoreAppWrapper'
+import { OPEN_IPFS_GATEWAY_HOSTNAME } from 'constants/ipfs'
+import { JBChainId, JBProjectProvider } from 'juice-sdk-react'
+import { ReduxProjectCartProvider } from 'packages/v4/components/ProjectDashboard/ReduxProjectCartProvider'
+import store from 'packages/v4/components/ProjectDashboard/redux/store'
+import { V4NftRewardsProvider } from 'packages/v4/contexts/V4NftRewards/V4NftRewardsProvider'
+import V4ProjectMetadataProvider from 'packages/v4/contexts/V4ProjectMetadataProvider'
+import { V4UserNftCreditsProvider } from 'packages/v4/contexts/V4UserNftCreditsProvider'
+import { V4UserTotalTokensBalanceProvider } from 'packages/v4/contexts/V4UserTotalTokensBalanceProvider'
+import { chainNameMap } from 'packages/v4/utils/networks'
+import { wagmiConfig } from 'packages/v4/wagmiConfig'
+import React, { PropsWithChildren } from 'react'
+import { Provider } from 'react-redux'
+import { WagmiProvider } from 'wagmi'
+
+const V4ProjectProviders: React.FC<
+  PropsWithChildren & { chainName: string; projectId: bigint }
+> = ({ chainName, projectId, children }) => {
+  const chainId = chainNameMap[chainName] as JBChainId
+
+  return (
+    <AppWrapper txHistoryProvider="wagmi">
+      <WagmiProvider config={wagmiConfig}>
+        <JBProjectProvider
+          chainId={chainId}
+          projectId={projectId}
+          ctxProps={{
+            metadata: { ipfsGatewayHostname: OPEN_IPFS_GATEWAY_HOSTNAME },
+          }}
+        >
+          <V4ProjectMetadataProvider projectId={projectId}>
+            <Provider store={store}>
+              <V4UserNftCreditsProvider>
+                <V4UserTotalTokensBalanceProvider>
+                  <V4NftRewardsProvider>
+                    <ReduxProjectCartProvider>
+                      {children}
+                    </ReduxProjectCartProvider>
+                  </V4NftRewardsProvider>
+                </V4UserTotalTokensBalanceProvider>
+              </V4UserNftCreditsProvider>
+            </Provider>
+          </V4ProjectMetadataProvider>
+        </JBProjectProvider>
+      </WagmiProvider>
+    </AppWrapper>
+  )
+}
+export default V4ProjectProviders
diff --git a/src/pages/v4/[chainName]/p/[projectId]/index.tsx b/src/pages/v4/[chainName]/p/[projectId]/index.tsx
index 1438b58689..0c989266fd 100644
--- a/src/pages/v4/[chainName]/p/[projectId]/index.tsx
+++ b/src/pages/v4/[chainName]/p/[projectId]/index.tsx
@@ -1,28 +1,24 @@
 import { V4ProjectSEO } from 'components/ProjectPageSEO'
-import { AppWrapper } from 'components/common/CoreAppWrapper/CoreAppWrapper'
 import { FEATURE_FLAGS } from 'constants/featureFlags'
-import { OPEN_IPFS_GATEWAY_HOSTNAME } from 'constants/ipfs'
 import { PV_V4 } from 'constants/pv'
-import { JBChainId, JBProjectProvider } from 'juice-sdk-react'
 import { loadCatalog } from 'locales/utils'
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next'
-import { ReduxProjectCartProvider } from 'packages/v4/components/ProjectDashboard/ReduxProjectCartProvider'
-import store from 'packages/v4/components/ProjectDashboard/redux/store'
-import { V4NftRewardsProvider } from 'packages/v4/contexts/V4NftRewards/V4NftRewardsProvider'
-import V4ProjectMetadataProvider from 'packages/v4/contexts/V4ProjectMetadataProvider'
-import { V4UserNftCreditsProvider } from 'packages/v4/contexts/V4UserNftCreditsProvider'
-import { V4UserTotalTokensBalanceProvider } from 'packages/v4/contexts/V4UserTotalTokensBalanceProvider'
-import { chainNameMap } from 'packages/v4/utils/networks'
-import { V4ProjectDashboard } from 'packages/v4/views/V4ProjectDashboard/V4ProjectDashboard'
-import { wagmiConfig } from 'packages/v4/wagmiConfig'
+import dynamic from 'next/dynamic'
 import React, { PropsWithChildren } from 'react'
-import { Provider } from 'react-redux'
 import { featureFlagEnabled } from 'utils/featureFlags'
 import {
   getProjectStaticProps,
   ProjectPageProps,
 } from 'utils/server/pages/props'
-import { WagmiProvider } from 'wagmi'
+
+const V4ProjectProviders = dynamic(
+  () => import('packages/v4/views/V4ProjectDashboard/V4ProjectProviders'),
+  { ssr: false },
+)
+const V4ProjectDashboard = dynamic(
+  () => import('packages/v4/views/V4ProjectDashboard/V4ProjectDashboard'),
+  { ssr: false },
+)
 
 export const getStaticPaths: GetStaticPaths = async () => {
   // TODO: static paths is convoluted with chains, needs some thought
@@ -101,7 +97,6 @@ export default function V4ProjectPage({
   if (!chainName || !projectId) {
     return <div>Invalid URL</div>
   }
-  const chainId = chainNameMap[chainName]
 
   return (
     <>
@@ -111,42 +106,10 @@ export default function V4ProjectPage({
         projectId={projectId}
       />
       <_Wrapper>
-        <Providers chainId={chainId} projectId={BigInt(projectId)}>
+        <V4ProjectProviders chainName={chainName} projectId={BigInt(projectId)}>
           <V4ProjectDashboard />
-        </Providers>
+        </V4ProjectProviders>
       </_Wrapper>
     </>
   )
 }
-
-const Providers: React.FC<
-  PropsWithChildren & { chainId: JBChainId; projectId: bigint }
-> = ({ chainId, projectId, children }) => {
-  return (
-    <AppWrapper txHistoryProvider="wagmi">
-      <WagmiProvider config={wagmiConfig}>
-        <JBProjectProvider
-          chainId={chainId}
-          projectId={projectId}
-          ctxProps={{
-            metadata: { ipfsGatewayHostname: OPEN_IPFS_GATEWAY_HOSTNAME },
-          }}
-        >
-          <V4ProjectMetadataProvider projectId={projectId}>
-            <Provider store={store}>
-              <V4UserNftCreditsProvider>
-                <V4UserTotalTokensBalanceProvider>
-                  <V4NftRewardsProvider>
-                    <ReduxProjectCartProvider>
-                      {children}
-                    </ReduxProjectCartProvider>
-                  </V4NftRewardsProvider>
-                </V4UserTotalTokensBalanceProvider>
-              </V4UserNftCreditsProvider>
-            </Provider>
-          </V4ProjectMetadataProvider>
-        </JBProjectProvider>
-      </WagmiProvider>
-    </AppWrapper>
-  )
-}