fix(app): source feature flags from URL early in code (#1675)

passportxyz · Sep 11, 2023 · c46e499 · c46e499
1 parent 2be0b05
commit c46e499
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/app/components/NetworkCard.tsx b/app/components/NetworkCard.tsx
@@ -5,6 +5,7 @@ import { OnChainContext, OnChainProviderType } from "../context/onChainContext";
 import { ScorerContext, ScoreStateType } from "../context/scorerContext";
 import { SyncToChainButton } from "./SyncToChainButton";
 import { Chain } from "../utils/chains";
+import { FeatureFlags } from "../config/feature_flags";
 
 export enum OnChainStatus {
   NOT_MOVED,
@@ -82,7 +83,9 @@ export function NetworkCard({ chain }: { chain: Chain }) {
           <div>
             <div className="flex w-full flex-col">
               <h1 className="text-lg text-color-1">{chain.label}</h1>
-              <h2 className="text-sm text-color-4">{chain.attestationProvider?.name}</h2>
+              {FeatureFlags.FF_LINEA_ATTESTATIONS && (
+                <h2 className="text-sm text-color-4">{chain.attestationProvider?.name}</h2>
+              )}
               <p className="mt-2 text-color-4 md:inline-block">
                 {onChainLastUpdates[chain.id] ? onChainLastUpdates[chain.id].toLocaleString() : "Not moved yet"}
               </p>

diff --git a/app/config/feature_flags.ts b/app/config/feature_flags.ts
@@ -20,7 +20,13 @@ function configureFeatureFlag(
   }
 }
 
-export function configureFeatureFlags(queryString: URLSearchParams) {
+// FeatureFlags need to reliably be set before the chains are configured, and chains
+// must be configured before web3Onboard which must be initialized before any
+// React code, so we'll do it here.
+
+if (typeof window !== "undefined") {
+  const queryString = new URLSearchParams(window?.location?.search);
+
   // The env var names can't be dynamic due to the way Next.js works
   configureFeatureFlag(queryString, "FF_CHAIN_SYNC", process.env.NEXT_PUBLIC_FF_CHAIN_SYNC);
   configureFeatureFlag(queryString, "FF_LINEA_ATTESTATIONS", process.env.NEXT_PUBLIC_FF_LINEA_ATTESTATIONS);

diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
@@ -21,7 +21,6 @@ import { Provider as SelfIdProvider } from "@self.id/framework";
 import TagManager from "react-gtm-module";
 
 import { themes, ThemeWrapper } from "../utils/theme";
-import { configureFeatureFlags } from "../config/feature_flags";
 
 const FacebookAppId = process.env.NEXT_PUBLIC_PASSPORT_FACEBOOK_APP_ID || "";
 const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID || "";
@@ -121,8 +120,6 @@ function App({ Component, pageProps }: AppProps) {
 
       return <div></div>;
     }
-
-    configureFeatureFlags(queryString);
   }
 
   const facebookSdkScript = (