refactor: add useVisibleAppLinks hook

Author: 0xAlunara

packages/curve-ui-kit/src/widgets/Header/AppButtonLinks.tsx

@@ -1,32 +1,26 @@
-import { recordEntries } from '@curvefi/prices-api/objects.util'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
-import { useAnalyticsApp } from '@ui-kit/hooks/useFeatureFlags'
-import { APP_LINK, type AppMenuOption, getInternalUrl } from '@ui-kit/shared/routes'
+import { type AppMenuOption, getInternalUrl } from '@ui-kit/shared/routes'
 import { RouterLink } from '@ui-kit/shared/ui/RouterLink'
+import { useVisibleAppLinks } from './useVisibleAppLinks'
 
 type AppNavAppsProps = { currentMenu: AppMenuOption; onChange: (appName: AppMenuOption) => void; networkId: string }
 
-export const AppButtonLinks = ({ currentMenu, onChange, networkId }: AppNavAppsProps) => {
-  const showAnalytics = useAnalyticsApp()
-  const apps = recordEntries(APP_LINK).filter(([app]) => app !== 'analytics' || showAnalytics)
-
-  return (
-    <Box display="flex" alignItems="center" marginX={[2, 3, 4]} gap={2}>
-      {apps.map(([menu, { label, routes }]) => (
-        <Button
-          key={menu}
-          color="navigation"
-          size="small"
-          className={currentMenu === menu ? 'current' : ''}
-          component={RouterLink}
-          onClick={() => onChange(menu as AppMenuOption)}
-          href={getInternalUrl(routes[0].app, networkId)}
-          data-testid={`app-link-${menu}`}
-        >
-          {label}
-        </Button>
-      ))}
-    </Box>
-  )
-}
+export const AppButtonLinks = ({ currentMenu, onChange, networkId }: AppNavAppsProps) => (
+  <Box display="flex" alignItems="center" marginX={[2, 3, 4]} gap={2}>
+    {useVisibleAppLinks().map(([menu, { label, routes }]) => (
+      <Button
+        key={menu}
+        color="navigation"
+        size="small"
+        className={currentMenu === menu ? 'current' : ''}
+        component={RouterLink}
+        onClick={() => onChange(menu as AppMenuOption)}
+        href={getInternalUrl(routes[0].app, networkId)}
+        data-testid={`app-link-${menu}`}
+      >
+        {label}
+      </Button>
+    ))}
+  </Box>
+)

packages/curve-ui-kit/src/widgets/Header/MobileHeader.tsx

@@ -16,6 +16,7 @@ import { SidebarSection } from './SidebarSection'
 import { SocialSidebarSection } from './SocialSidebarSection'
 import { HeaderImplementationProps } from './types'
 import { useMainNavRef } from './useMainNavRef'
+import { useVisibleAppLinks } from './useVisibleAppLinks'
 
 const HIDE_SCROLLBAR = {
   // hide the scrollbar, on mobile it's not needed, and it messes up with the SideBarFooter
@@ -41,19 +42,20 @@ export const MobileHeader = ({
   const toggleSidebar = useCallback(() => setSidebarOpen((isOpen) => !isOpen), [])
   const pathname = usePathname()
   const top = useLayoutStore((state) => state.navHeight)
+  const appLinks = useVisibleAppLinks()
 
   useEffect(() => () => closeSidebar(), [pathname, closeSidebar]) // close when URL changes due to clicking a link
 
   const otherAppSections = useMemo(
     () =>
-      Object.entries(APP_LINK)
+      appLinks
         .filter(([appName]) => appName != currentMenu)
         .map(([appName, { label, routes }]) => ({
           appName,
           title: label,
           pages: routes.map((p) => routeToPage(p, { networkId, pathname })),
         })),
-    [currentMenu, networkId, pathname],
+    [appLinks, currentMenu, networkId, pathname],
   )
   return (
     <AppBar