Onboarding feature flag (#1398)

* refactor: add feature flag * fix: update dependencies * add onboarding to env file
interlay · Jul 4, 2023 · 3473509 · 3473509 · vercel · Jul 4, 2023
1 parent 304517b
commit 3473509
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/.env.dev b/.env.dev
@@ -5,6 +5,7 @@ REACT_APP_FEATURE_FLAG_AMM=enabled
 REACT_APP_FEATURE_FLAG_WALLET=enabled
 REACT_APP_FEATURE_FLAG_BANXA=enabled
 REACT_APP_FEATURE_FLAG_STRATEGIES=enabled
+REACT_APP_FEATURE_FLAG_ONBOARDING=enabled
 
 /* DEVELOPMENT */
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -53,6 +53,7 @@ const App = (): JSX.Element => {
   const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM);
   const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET);
   const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES);
+  const isOnboardingEnabled = useFeatureFlag(FeatureFlags.ONBOARDING);
 
   // Loads the connection to the faucet - only for testnet purposes
   const loadFaucet = React.useCallback(async (): Promise<void> => {
@@ -217,9 +218,11 @@ const App = (): JSX.Element => {
                       <Strategies />
                     </Route>
                   )}
-                  <Route path={PAGES.ONBOARDING}>
-                    <Onboarding />
-                  </Route>
+                  {isOnboardingEnabled && (
+                    <Route path={PAGES.ONBOARDING}>
+                      <Onboarding />
+                    </Route>
+                  )}
                   <Route path={PAGES.ACTIONS}>
                     <Actions />
                   </Route>

diff --git a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx
@@ -67,6 +67,7 @@ const Navigation = ({
   const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM);
   const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET);
   const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES);
+  const isOnboardingEnabled = useFeatureFlag(FeatureFlags.ONBOARDING);
 
   const PRIMARY_NAVIGATION_ITEMS = React.useMemo(
     () => [
@@ -143,7 +144,7 @@ const Navigation = ({
       {
         name: 'nav_onboarding',
         link: PAGES.ONBOARDING,
-        hidden: false,
+        hidden: !isOnboardingEnabled
       },
       {
         name: 'nav_use_wrapped',
@@ -196,7 +197,7 @@ const Navigation = ({
         }
       }
     ],
-    []
+    [isOnboardingEnabled]
   );
 
   return (

diff --git a/src/utils/hooks/use-feature-flag.ts b/src/utils/hooks/use-feature-flag.ts
@@ -4,7 +4,8 @@ enum FeatureFlags {
   WALLET = 'wallet',
   BANXA = 'banxa',
   STRATEGIES = 'strategies',
-  GEOBLOCK = 'geoblock'
+  GEOBLOCK = 'geoblock',
+  ONBOARDING = 'onboarding'
 }
 
 const featureFlags: Record<FeatureFlags, string | undefined> = {
@@ -13,7 +14,8 @@ const featureFlags: Record<FeatureFlags, string | undefined> = {
   [FeatureFlags.WALLET]: process.env.REACT_APP_FEATURE_FLAG_WALLET,
   [FeatureFlags.BANXA]: process.env.REACT_APP_FEATURE_FLAG_BANXA,
   [FeatureFlags.STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES,
-  [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK
+  [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK,
+  [FeatureFlags.ONBOARDING]: process.env.REACT_APP_FEATURE_FLAG_ONBOARDING
 };
 
 const useFeatureFlag = (feature: FeatureFlags): boolean => featureFlags[feature] === 'enabled';