Feature Flag Config (#335)

* Added  feature flag config 
* Added env config

package.json

@@ -37,6 +37,7 @@
     "graphql-request": "^3.4.0",
     "hex-to-rgba": "^2.0.1",
     "jsonschema": "^1.4.0",
+    "launchdarkly-react-client-sdk": "2.27.0",
     "mixpanel-browser": "^2.42.0",
     "notistack": "^1.0.3",
     "react": "^17.0.1",

src/App.tsx

@@ -1,29 +1,26 @@
-import React from "react";
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Redirect,
-} from "react-router-dom";
-import mixpanel from "mixpanel-browser";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { Box, makeStyles, ThemeProvider } from "@material-ui/core";
-import { SnackbarProvider } from "notistack";
+import React from 'react';
+import { withLDProvider } from 'launchdarkly-react-client-sdk';
+import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom';
+import mixpanel from 'mixpanel-browser';
+import {QueryClient, QueryClientProvider} from 'react-query';
+import {Box, makeStyles, ThemeProvider} from '@material-ui/core';
+import {SnackbarProvider} from 'notistack';
 
-import { DAOExplorerRouter } from "modules/explorer/router";
-import { DAOCreate } from "modules/creator";
-import { CreatorProvider } from "modules/creator/state";
-import ScrollToTop from "modules/common/ScrollToTop";
-import { theme } from "theme";
+import {DAOExplorerRouter} from 'modules/explorer/router';
+import {DAOCreate} from 'modules/creator';
+import {CreatorProvider} from 'modules/creator/state';
+import ScrollToTop from 'modules/common/ScrollToTop';
+import {theme} from 'theme';
 
-import "App.css";
-import { TZKTSubscriptionsProvider } from "services/bakingBad/context/TZKTSubscriptions";
-import { Landing } from "modules/home/Landing";
-import { WarningFooter } from "modules/common/WarningFooter";
-import { ActionSheetProvider } from "modules/explorer/context/ActionSheets";
-import { legacyTheme } from "theme/legacy";
-import { Footer } from "modules/common/Footer";
-import { FAQ } from "modules/home/FAQ";
+import 'App.css';
+import {TZKTSubscriptionsProvider} from 'services/bakingBad/context/TZKTSubscriptions';
+import {Landing} from 'modules/home/Landing';
+import {WarningFooter} from 'modules/common/WarningFooter';
+import {ActionSheetProvider} from 'modules/explorer/context/ActionSheets';
+import {legacyTheme} from 'theme/legacy';
+import {Footer} from 'modules/common/Footer';
+import {FAQ} from 'modules/home/FAQ';
+import { EnvKey, getEnv } from 'services/config';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -66,16 +63,20 @@ const styles = makeStyles({
   },
 });
 
-if (!process.env.REACT_APP_MIXPANEL_TOKEN) {
-  throw new Error("REACT_APP_MIXPANEL_TOKEN env variable is missing");
+
+const MIXPANEL_TOKEN = getEnv(EnvKey.REACT_APP_MIXPANEL_TOKEN)
+const MIXPANEL_DEBUG_ENABLED = getEnv(EnvKey.REACT_APP_MIXPANEL_DEBUG_ENABLED)
+
+if (!MIXPANEL_TOKEN) {
+  throw new Error(`${EnvKey.REACT_APP_MIXPANEL_TOKEN} env variable is missing`);
 }
 
-if (!process.env.REACT_APP_MIXPANEL_DEBUG_ENABLED) {
-  throw new Error("REACT_APP_MIXPANEL_DEBUG_ENABLED env variable is missing");
+if (!MIXPANEL_DEBUG_ENABLED) {
+  throw new Error(`${EnvKey.REACT_APP_MIXPANEL_DEBUG_ENABLED} env variable is missing`);
 }
 
-mixpanel.init(process.env.REACT_APP_MIXPANEL_TOKEN, {
-  debug: process.env.REACT_APP_MIXPANEL_DEBUG_ENABLED == "true",
+mixpanel.init(MIXPANEL_TOKEN, {
+  debug: MIXPANEL_DEBUG_ENABLED === "true",
 });
 mixpanel.track("Visit");
 
@@ -137,4 +138,11 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+
+const env = getEnv(EnvKey.REACT_APP_ENV)
+
+export default withLDProvider({
+  clientSideID: env === "PROD" ?
+    getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_PROD) :
+    getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_DEV),
+})(App);

src/modules/home/Landing.tsx

@@ -1,24 +1,12 @@
-import {
-  Box,
-  Button,
-  Grid,
-  Link,
-  styled,
-  Theme,
-  Typography,
-  useMediaQuery,
-  useTheme,
-  SvgIcon,
-} from "@material-ui/core";
-import React from "react";
-import { Header } from "./LandingHeader";
-import HomebaseLogo from "assets/logos/homebase_logo.svg";
-import Vector1 from "assets/vectors/Vector1.svg";
-import Vector2 from "assets/vectors/Vector2.svg";
-import hexToRgba from "hex-to-rgba";
-import GitHubIcon from "@material-ui/icons/GitHub";
-import { ReactComponent as DiscordIcon } from "assets/logos/discord.svg";
-import { MainButton } from "../common/MainButton";
+import {Box, Grid, Link, styled, SvgIcon, Theme, Typography, useMediaQuery, useTheme} from '@material-ui/core';
+import React from 'react';
+import {Header} from './LandingHeader';
+import HomebaseLogo from 'assets/logos/homebase_logo.svg';
+import Vector1 from 'assets/vectors/Vector1.svg';
+import Vector2 from 'assets/vectors/Vector2.svg';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import {ReactComponent as DiscordIcon} from 'assets/logos/discord.svg';
+import {MainButton} from '../common/MainButton';
 
 const StyledToolbar = styled(Grid)({
   padding: "22px 37px",

src/services/agora/index.ts

@@ -1 +1,3 @@
-export const API_URL = `${process.env.REACT_APP_CORS_PROXY_URL}/https://forum.tezosagora.org`;
+import { EnvKey, getEnv } from 'services/config';
+
+export const API_URL = `${getEnv(EnvKey.REACT_APP_CORS_PROXY_URL)}/https://forum.tezosagora.org`;

src/services/beacon/utils.ts

@@ -2,6 +2,7 @@ import { NetworkType } from "@airgap/beacon-types";
 import { BeaconWallet } from "@taquito/beacon-wallet";
 import { MichelCodecPacker, TezosToolkit } from "@taquito/taquito";
 import { Tzip16Module } from "@taquito/tzip16";
+import { EnvKey, getEnv } from 'services/config';
 
 export type Network = "mainnet" | "ghostnet"
 
@@ -17,8 +18,7 @@ export const getTezosNetwork = (): Network => {
     return storageNetwork as Network
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const envNetwork = process.env.REACT_APP_NETWORK!.toString().toLowerCase() as Network
+  const envNetwork = getEnv(EnvKey.REACT_APP_NETWORK).toString().toLowerCase() as Network
 
   if(!envNetwork) {
     throw new Error("No Network ENV set")

src/services/config/constants.ts

@@ -0,0 +1,16 @@
+export enum EnvKey {
+  REACT_APP_ENV = "REACT_APP_ENV",
+  REACT_APP_NETWORK = "REACT_APP_NETWORK",
+  REACT_APP_HASURA_URL = "REACT_APP_HASURA_URL",
+  REACT_APP_HASURA_ADMIN_SECRET = "REACT_APP_HASURA_ADMIN_SECRET",
+  REACT_APP_CORS_PROXY_URL = "REACT_APP_CORS_PROXY_URL",
+  REACT_APP_MIXPANEL_TOKEN = "REACT_APP_MIXPANEL_TOKEN",
+  REACT_APP_MIXPANEL_DEBUG_ENABLED = "REACT_APP_MIXPANEL_DEBUG_ENABLED",
+  REACT_APP_LAUNCH_DARKLY_SDK_DEV = "REACT_APP_LAUNCH_DARKLY_SDK_DEV",
+  REACT_APP_LAUNCH_DARKLY_SDK_PROD = "REACT_APP_LAUNCH_DARKLY_SDK_PROD"
+}
+
+export enum FeatureFlag {
+  lambdaDao = "lambdaDao"
+}
+

src/services/config/env.ts

@@ -0,0 +1,5 @@
+import { EnvKey } from './constants';
+
+export const getEnv = (envKey: EnvKey): string => {
+  return process.env[envKey] ?? ""
+}

src/services/config/hooks/featureFlags.ts

@@ -0,0 +1,7 @@
+import { useFlags } from 'launchdarkly-react-client-sdk';
+import { FeatureFlag } from 'services/config/constants';
+
+export const useFeatureFlag = (featureFlag: FeatureFlag) => {
+  const flags = useFlags()
+  return flags[featureFlag] ?? false
+}

src/services/config/hooks/index.ts

@@ -0,0 +1 @@
+export * from './featureFlags'

src/services/config/index.ts

@@ -0,0 +1,3 @@
+export * from './constants'
+export * from './env'
+export * from './hooks'

src/services/indexer/graphql.ts

@@ -1,19 +1,21 @@
 import { GraphQLClient } from "graphql-request";
+import { EnvKey, getEnv } from 'services/config';
 
-if (!process.env.REACT_APP_HASURA_URL) {
-  throw new Error("REACT_APP_HASURA_URL is not set");
-}
 
-if (!process.env.REACT_APP_HASURA_ADMIN_SECRET) {
-  throw new Error("REACT_APP_HASURA_ADMIN_SECRET is not set");
+const BASE_URL = getEnv(EnvKey.REACT_APP_HASURA_URL);
+const HASURA_ADMIN_SECRET = getEnv(EnvKey.REACT_APP_HASURA_ADMIN_SECRET);
+
+if (!BASE_URL) {
+  throw new Error(`${EnvKey.REACT_APP_HASURA_URL} env variable is missing`);
 }
 
-const BASE_URL = process.env.REACT_APP_HASURA_URL;
-const HASURA_ADMIN_SECRET = process.env.REACT_APP_HASURA_ADMIN_SECRET;
+if (!HASURA_ADMIN_SECRET) {
+  throw new Error(`${EnvKey.REACT_APP_HASURA_ADMIN_SECRET} env variable is missing`);
+}
 
 export const client = new GraphQLClient(BASE_URL, {
   headers: {
     "content-type": "application/json",
     "x-hasura-admin-secret": HASURA_ADMIN_SECRET,
   },
-});
+});

yarn.lock

@@ -3422,7 +3422,7 @@ base-x@^3.0.2:
   dependencies:
     safe-buffer "^5.0.1"
 
-base64-js@^1.0.2, base64-js@^1.3.1:
+base64-js@^1.0.2, base64-js@^1.3.0, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
@@ -8205,6 +8205,32 @@ last-call-webpack-plugin@^3.0.0:
     lodash "^4.17.5"
     webpack-sources "^1.1.0"
 
+[email protected]:
+  version "2.22.1"
+  resolved "https://registry.yarnpkg.com/launchdarkly-js-client-sdk/-/launchdarkly-js-client-sdk-2.22.1.tgz#e6064c79bc575eea0aa4364be41754d54d89ae6a"
+  integrity sha512-EAdw7B8w4m/WZGmHHLj9gbYBP6lCqJs5TQDCM9kWJOnvHBz7DJIxOdqazNMDn5AzBxfvaMG7cpLms+Cur5LD5g==
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    launchdarkly-js-sdk-common "3.6.0"
+
+[email protected]:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/launchdarkly-js-sdk-common/-/launchdarkly-js-sdk-common-3.6.0.tgz#d146be5bbd86a019c4bedc52e66c37a1ffa7bb3d"
+  integrity sha512-wCdBoBiYXlP64jTrC0dOXY2B345LSJO/IvitbdW4kBKmJ1DkeufpqV0s5DBlwE0RLzDmaQx3mRTmcoNAIhIoaA==
+  dependencies:
+    base64-js "^1.3.0"
+    fast-deep-equal "^2.0.1"
+    uuid "^3.3.2"
+
+[email protected]:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/launchdarkly-react-client-sdk/-/launchdarkly-react-client-sdk-2.27.0.tgz#18a2f470e3af166d25d2252e4a14f092378fc2cb"
+  integrity sha512-I2mmY5OHbc8bHkfYlt131cRXjSolCzbMtt0lMeN7vC5vMWnjNnLCT08YRrqromnNgPNUtg/7kwPEUTOmUCFqiA==
+  dependencies:
+    hoist-non-react-statics "^3.3.2"
+    launchdarkly-js-client-sdk "2.22.1"
+    lodash.camelcase "^4.3.0"
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -8352,6 +8378,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"