move providers out of App directory

decentdao · Feb 21, 2024 · 19fced9 · 19fced9
1 parent 574812e
commit 19fced9
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 44 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,25 +1,13 @@
 'use client';
 
-import { ApolloProvider } from '@apollo/client';
-import { ChakraProvider } from '@chakra-ui/react';
-import { theme } from '@decent-org/fractal-ui';
 import '@fontsource/ibm-plex-mono';
 import '@fontsource/ibm-plex-sans';
-import { midnightTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import 'i18next';
 import { ReactNode, useEffect } from 'react';
-import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
-import { WagmiConfig } from 'wagmi';
-import { ModalProvider } from '../src/components/ui/modals/ModalProvider';
-import Layout from '../src/components/ui/page/Layout';
-import { ErrorFallback } from '../src/components/ui/utils/ErrorFallback';
 import { APP_NAME } from '../src/constants/common';
-import graphQLClient from '../src/graphql';
-import { FractalErrorBoundary, initErrorLogging } from '../src/helpers/errorLogging';
-import { AppProvider } from '../src/providers/App/AppProvider';
-import { NetworkConfigProvider } from '../src/providers/NetworkConfig/NetworkConfigProvider';
-import { chains, wagmiConfig } from '../src/providers/NetworkConfig/rainbow-kit.config';
+import { initErrorLogging } from '../src/helpers/errorLogging';
+import Providers from '../src/providers/Providers';
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   useEffect(() => {
@@ -90,36 +78,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <title>{APP_NAME}</title>
       </head>
       <body>
-        <ChakraProvider
-          theme={theme}
-          resetCSS
-        >
-          <FractalErrorBoundary fallback={<ErrorFallback />}>
-            <WagmiConfig config={wagmiConfig}>
-              <RainbowKitProvider
-                chains={chains}
-                modalSize="compact"
-                theme={midnightTheme()}
-              >
-                <NetworkConfigProvider>
-                  <AppProvider>
-                    <ToastContainer
-                      position="bottom-center"
-                      closeButton={false}
-                      newestOnTop={false}
-                      pauseOnFocusLoss={false}
-                    />
-                    <ApolloProvider client={graphQLClient}>
-                      <ModalProvider>
-                        <Layout>{children}</Layout>
-                      </ModalProvider>
-                    </ApolloProvider>
-                  </AppProvider>
-                </NetworkConfigProvider>
-              </RainbowKitProvider>
-            </WagmiConfig>
-          </FractalErrorBoundary>
-        </ChakraProvider>
+        <Providers>{children}</Providers>
       </body>
     </html>
   );

diff --git a/src/providers/Providers.tsx b/src/providers/Providers.tsx
@@ -0,0 +1,54 @@
+'use client';
+import { ApolloProvider } from '@apollo/client';
+import { ChakraProvider } from '@chakra-ui/react';
+import { theme } from '@decent-org/fractal-ui';
+import { RainbowKitProvider, midnightTheme } from '@rainbow-me/rainbowkit';
+import { ReactNode, useEffect } from 'react';
+import { ToastContainer } from 'react-toastify';
+import { WagmiConfig } from 'wagmi';
+import { ModalProvider } from '../components/ui/modals/ModalProvider';
+import Layout from '../components/ui/page/Layout';
+import { ErrorFallback } from '../components/ui/utils/ErrorFallback';
+import graphQLClient from '../graphql';
+import { FractalErrorBoundary, initErrorLogging } from '../helpers/errorLogging';
+import { AppProvider } from './App/AppProvider';
+import { NetworkConfigProvider } from './NetworkConfig/NetworkConfigProvider';
+import { wagmiConfig, chains } from './NetworkConfig/rainbow-kit.config';
+
+export default function Providers({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    initErrorLogging();
+  }, []);
+  return (
+    <ChakraProvider
+      theme={theme}
+      resetCSS
+    >
+      <FractalErrorBoundary fallback={<ErrorFallback />}>
+        <ApolloProvider client={graphQLClient}>
+          <WagmiConfig config={wagmiConfig}>
+            <RainbowKitProvider
+              chains={chains}
+              modalSize="compact"
+              theme={midnightTheme()}
+            >
+              <NetworkConfigProvider>
+                <AppProvider>
+                  <ToastContainer
+                    position="bottom-center"
+                    closeButton={false}
+                    newestOnTop={false}
+                    pauseOnFocusLoss={false}
+                  />
+                  <ModalProvider>
+                    <Layout>{children}</Layout>
+                  </ModalProvider>
+                </AppProvider>
+              </NetworkConfigProvider>
+            </RainbowKitProvider>
+          </WagmiConfig>
+        </ApolloProvider>
+      </FractalErrorBoundary>
+    </ChakraProvider>
+  );
+}