feat: allow to hide dapps behind dev mode

Signed-off-by: Norman Meier <[email protected]>
TERITORI · Aug 1, 2024 · c3ef436 · c3ef436
1 parent cf2c5fc
commit c3ef436
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 23 deletions.
diff --git a/packages/context/SidebarProvider.tsx b/packages/context/SidebarProvider.tsx
@@ -15,12 +15,14 @@ import {
 import { useAppDispatch } from "../store/store";
 import { SIDEBAR_LIST } from "../utils/sidebar";
 
+import { useDeveloperMode } from "@/hooks/useDeveloperMode";
 import { getValuesFromId, SEPARATOR } from "@/utils/dapp-store";
 
 export const useSidebar = () => {
   const isSidebarExpanded = useSelector(selectSidebarExpanded);
   const selectedApps = useSelector(selectCheckedApps);
   const availableApps = useSelector(selectAvailableApps);
+  const [developerMode] = useDeveloperMode();
   const dispatch = useAppDispatch();
   // on mobile sidebar is not expanded on load
   const isMobile = useIsMobile();
@@ -51,31 +53,46 @@ export const useSidebar = () => {
       [key: string]: any;
     };
 
-    selectedApps.map((element) => {
-      const { appId, groupKey } = getValuesFromId(element);
-      if (!availableApps[groupKey]) {
-        return;
-      }
-      const option = availableApps[groupKey].options[appId];
-      if (option === undefined) {
-        return;
-      }
+    selectedApps
+      .filter((element) => {
+        const { appId, groupKey } = getValuesFromId(element);
+        if (!availableApps[groupKey]) {
+          return false;
+        }
+        const option = availableApps[groupKey].options[appId];
+        if (option === undefined) {
+          return false;
+        }
+        if (option.devOnly && !developerMode) {
+          return false;
+        }
+        return true;
+      })
+      .map((element) => {
+        const { appId, groupKey } = getValuesFromId(element);
+        if (!availableApps[groupKey]) {
+          return;
+        }
+        const option = availableApps[groupKey].options[appId];
+        if (option === undefined) {
+          return;
+        }
 
-      dynamicAppsSelection[element] = SIDEBAR_LIST[option.id]
-        ? SIDEBAR_LIST[option.id]
-        : {
-            id: option.id,
-            title: option.title,
-            route: option.route,
-            url: option.url,
-            icon: option.icon,
-          };
-    });
+        dynamicAppsSelection[element] = SIDEBAR_LIST[option.id]
+          ? SIDEBAR_LIST[option.id]
+          : {
+              id: option.id,
+              title: option.title,
+              route: option.route,
+              url: option.url,
+              icon: option.icon,
+            };
+      });
 
     dynamicAppsSelection["dappstore"] = SIDEBAR_LIST["DAppsStore"];
 
     return dynamicAppsSelection;
-  }, [availableApps, selectedApps]);
+  }, [availableApps, selectedApps, developerMode]);
 
   const toggleSidebar = () => {
     dispatch(setSidebarExpanded(!isSidebarExpanded));

diff --git a/packages/screens/DAppStore/components/RightRail.tsx b/packages/screens/DAppStore/components/RightRail.tsx
@@ -7,13 +7,15 @@ import { DAppBox } from "./DAppBox";
 import { BrandText } from "@/components/BrandText";
 import { SVGorImageIcon } from "@/components/SVG/SVGorImageIcon";
 import { GridList } from "@/components/layout/GridList";
+import { useDeveloperMode } from "@/hooks/useDeveloperMode";
 import { selectAvailableApps } from "@/store/slices/dapps-store";
 import { layout } from "@/utils/style/layout";
 import { dAppType } from "@/utils/types/dapp-store";
 
 export const RightRail = ({ searchInput }: { searchInput: string }) => {
   const availableApps = useSelector(selectAvailableApps);
   const { width } = useWindowDimensions();
+  const [developerMode] = useDeveloperMode();
   const isMobile = width < 760;
   return (
     <View
@@ -53,10 +55,14 @@ export const RightRail = ({ searchInput }: { searchInput: string }) => {
                   noFixedHeight
                   keyExtractor={(item) => item.id}
                   data={Object.values(element.options).filter(
-                    (option: dAppType) =>
-                      option.title
+                    (option: dAppType) => {
+                      if (option.devOnly && !developerMode) {
+                        return false;
+                      }
+                      return option.title
                         .toLowerCase()
-                        .includes(searchInput.toLowerCase()),
+                        .includes(searchInput.toLowerCase());
+                    },
                   )}
                   minElemWidth={300}
                   renderItem={({ item: option }, elemWidth) => {

diff --git a/packages/screens/DAppStore/query/getFromFile.ts b/packages/screens/DAppStore/query/getFromFile.ts
@@ -202,6 +202,7 @@ export function getAvailableApps(): dAppGroup {
           groupKey: "top-apps",
           selectedByDefault: false,
           alwaysOn: false,
+          devOnly: true,
         },
         toripunks: {
           id: "toripunks",

diff --git a/packages/utils/types/dapp-store.ts b/packages/utils/types/dapp-store.ts
@@ -13,6 +13,7 @@ export interface dAppType {
   selectedByDefault: boolean;
   alwaysOn: boolean;
   order?: number;
+  devOnly?: boolean;
 }
 
 export interface dAppGroup {