diff --git a/packages/context/SidebarProvider.tsx b/packages/context/SidebarProvider.tsx index 72e56176c6..5f99f59074 100644 --- 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 index 0592795d34..70172fde50 100644 --- a/packages/screens/DAppStore/components/RightRail.tsx +++ b/packages/screens/DAppStore/components/RightRail.tsx @@ -7,6 +7,7 @@ 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"; @@ -14,6 +15,7 @@ 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 ( { 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 index ee26e1dc7f..4896bf26cb 100644 --- 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 index 4dc08b1fe9..c58082f197 100644 --- 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 {