Fix/ld config fix

.env

@@ -8,7 +8,7 @@ I18_RELOAD_ON_PRERENDER=false
 STATS_API_URL=https://mainnet.api.daostats.io
 TOASTS_NOTIFICATIONS_TIMEOUT=20000
 APP_DOMAIN=.astrodao.com
-NEXT_PUBLIC_LAUNCHDARKLY_ID=620ac654be1f0913f65d9ca4
+#NEXT_PUBLIC_LAUNCHDARKLY_ID=620ac654be1f0913f65d9ca4
 NEAR_CONTRACT_NAME=sputnikv2.testnet
 TOKEN_FACTORY_CONTRACT_NAME=tokens.testnet
 

env.d.ts

@@ -24,6 +24,8 @@ declare global {
       TOASTS_NOTIFICATIONS_TIMEOUT: number;
       I18_RELOAD_ON_PRERENDER: boolean;
 
+      NEXT_PUBLIC_LAUNCHDARKLY_ID: string;
+
       NEAR_ENV: string;
     }
   }

pages/_app.tsx

@@ -1,11 +1,10 @@
-import React, { FunctionComponent, useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import Head from 'next/head';
 import { appWithTranslation } from 'next-i18next';
 import type { AppContext, AppProps } from 'next/app';
-import { withLDProvider } from 'launchdarkly-react-client-sdk';
+import { LDProvider } from 'launchdarkly-react-client-sdk';
 
 import nextI18NextConfig from 'next-i18next.config';
-import { appConfig as applicationConfig } from 'config';
 
 import { ModalProvider } from 'components/modal';
 import { PageLayout } from 'astro_2.0/components/PageLayout';
@@ -24,6 +23,7 @@ import { DAO_COOKIE, DEFAULT_OPTIONS } from 'constants/cookies';
 import { AppMonitoring } from 'astro_2.0/features/AppMonitoring/AppMonitoring';
 import ErrorBoundary from 'astro_2.0/components/ErrorBoundary';
 import { useAppInitialize } from 'hooks/useAppInitialize';
+import { configService } from 'services/ConfigService';
 
 function App({ Component, pageProps }: AppProps): JSX.Element | null {
   const router = useRouter();
@@ -35,12 +35,27 @@ function App({ Component, pageProps }: AppProps): JSX.Element | null {
 
   useIntercomAdjust();
 
-  if (!initialized) {
+  const ldProps = useMemo(() => {
+    if (initialized) {
+      const { appConfig } = configService.get();
+
+      return {
+        clientSideID: appConfig.LAUNCHDARKLY_ID as string,
+        reactOptions: {
+          useCamelCaseFlagKeys: true,
+        },
+      };
+    }
+
+    return null;
+  }, [initialized]);
+
+  if (!initialized || !ldProps) {
     return null;
   }
 
   return (
-    <>
+    <LDProvider {...ldProps}>
       <AppMonitoring />
       <WrappedWalletContext>
         <ModalProvider>
@@ -61,7 +76,7 @@ function App({ Component, pageProps }: AppProps): JSX.Element | null {
           </SocketProvider>
         </ModalProvider>
       </WrappedWalletContext>
-    </>
+    </LDProvider>
   );
 }
 
@@ -73,9 +88,4 @@ App.getInitialProps = async ({ ctx }: AppContext) => {
   return {};
 };
 
-export default withLDProvider({
-  clientSideID: applicationConfig.LAUNCHDARKLY_ID as string,
-  reactOptions: {
-    useCamelCaseFlagKeys: true,
-  },
-})(appWithTranslation(App, nextI18NextConfig) as FunctionComponent);
+export default appWithTranslation(App, nextI18NextConfig);

pages/api/config.ts

@@ -21,6 +21,7 @@ export default function handler(
     APP_DOMAIN: process.env.APP_DOMAIN,
     NEAR_ENV: process.env.NEAR_ENV,
     NEAR_CONTRACT_NAME: process.env.NEAR_CONTRACT_NAME,
+    LAUNCHDARKLY_ID: process.env.NEXT_PUBLIC_LAUNCHDARKLY_ID,
   };
 
   res.status(200).json(config);

types/config.ts

@@ -13,6 +13,7 @@ export type Config = {
   LOCAL_WALLET_REDIRECT: boolean;
   NEAR_CONTRACT_NAME: string;
   TOKEN_FACTORY_CONTRACT_NAME: string;
+  LAUNCHDARKLY_ID: string;
 };
 
 export enum WalletType {