Migrated env feature flags to openfeature

package.json

@@ -57,6 +57,7 @@
     "@babel/register": "^7.4.0",
     "@canvas-js/core": "0.5.0-alpha4",
     "@istanbuljs/nyc-config-typescript": "^0.1.3",
+    "@openfeature/web-sdk": "^0.4.12",
     "@openzeppelin/contracts": "^2.4.0",
     "@openzeppelin/contracts-governance": "npm:@openzeppelin/contracts@^4.3.2",
     "@osmonauts/lcd": "^0.10.0",

packages/commonwealth/client/scripts/App.tsx

@@ -1,3 +1,4 @@
+import { InMemoryProvider, OpenFeature } from '@openfeature/web-sdk';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import useInitApp from 'hooks/useInitApp';
@@ -6,6 +7,8 @@ import React, { StrictMode } from 'react';
 import { RouterProvider } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import { queryClient } from 'state/api/config';
+import { featureFlags } from './helpers/feature-flags';
+import { OpenFeatureProvider } from './hooks/openFeature/OpenFeatureProvider';
 import { CWIcon } from './views/components/component_kit/cw_icons/cw_icon';
 
 const Splash = () => {
@@ -17,6 +20,8 @@ const Splash = () => {
   );
 };
 
+OpenFeature.setProvider(new InMemoryProvider(featureFlags));
+
 const App = () => {
   const { customDomain, isLoading } = useInitApp();
 
@@ -26,7 +31,9 @@ const App = () => {
         {isLoading ? (
           <Splash />
         ) : (
-          <RouterProvider router={router(customDomain)} />
+          <OpenFeatureProvider>
+            <RouterProvider router={router(customDomain)} />
+          </OpenFeatureProvider>
         )}
         <ToastContainer />
         <ReactQueryDevtools />

packages/commonwealth/client/scripts/helpers/feature-flags.ts

@@ -1,12 +1,25 @@
-// As of 240205, we are moving away from the use of env vars for feature flags,
-// and towards the use of Unleash for all flag management.
+// This is our in memory provider setup. It does not automatically ensure your
+// feature flag is set on our Unleash instance (May not be available on prod).
 //
-// See knowledge_base/Feature-Flags.md for info.
+// See knowledge_base/Feature-Flags.md for more info.
+
+const buildFlag = (env: string) => {
+  return {
+    variants: {
+      on: true,
+      off: false,
+    },
+    disabled: false,
+    defaultVariant: env === 'true' ? 'on' : 'off',
+  };
+};
 
 export const featureFlags = {
-  proposalTemplates: process.env.FLAG_PROPOSAL_TEMPLATES === 'true',
-  communityHomepage: process.env.FLAG_COMMUNITY_HOMEPAGE === 'true',
-  newAdminOnboardingEnabled: process.env.FLAG_NEW_ADMIN_ONBOARDING === 'true',
-  communityStake: process.env.FLAG_COMMUNITY_STAKE === 'true',
-  newSignInModal: process.env.FLAG_NEW_SIGN_IN_MODAL === 'true',
+  proposalTemplates: buildFlag(process.env.FLAG_PROPOSAL_TEMPLATES),
+  communityHomepage: buildFlag(process.env.FLAG_COMMUNITY_HOMEPAGE),
+  newAdminOnboarding: buildFlag(process.env.FLAG_NEW_ADMIN_ONBOARDING),
+  communityStake: buildFlag(process.env.FLAG_COMMUNITY_STAKE),
+  newSignInModal: buildFlag(process.env.FLAG_NEW_SIGN_IN_MODAL),
 };
+
+export type AvailableFeatureFlag = keyof typeof featureFlags;

packages/commonwealth/client/scripts/hooks/openFeature/OpenFeatureProvider.tsx

@@ -0,0 +1,61 @@
+/**
+ * This file was grabbed from https://github.com/open-feature. There was an issue with the react-sdk npm deploy,
+ * so I had copied the code
+ */
+
+import { Client, OpenFeature } from '@openfeature/web-sdk';
+import * as React from 'react';
+
+type ClientOrClientName =
+  | {
+      /**
+       * The name of the client.
+       * @see OpenFeature.setProvider() and overloads.
+       */
+      clientName: string;
+      /**
+       * OpenFeature client to use.
+       */
+      client?: never;
+    }
+  | {
+      /**
+       * OpenFeature client to use.
+       */
+      client: Client;
+      /**
+       * The name of the client.
+       * @see OpenFeature.setProvider() and overloads.
+       */
+      clientName?: never;
+    };
+
+type ProviderProps = {
+  children?: any;
+} & ClientOrClientName;
+
+const Context = React.createContext<Client | undefined>(undefined);
+
+export const OpenFeatureProvider = ({
+  client,
+  clientName,
+  children,
+}: ProviderProps) => {
+  if (!client) {
+    client = OpenFeature.getClient(clientName);
+  }
+
+  return <Context.Provider value={client}>{children}</Context.Provider>;
+};
+
+export const useOpenFeatureClient = () => {
+  const client = React.useContext(Context);
+
+  if (!client) {
+    throw new Error(
+      'No OpenFeature client available - components using OpenFeature must be wrapped with an <OpenFeatureProvider>',
+    );
+  }
+
+  return client;
+};