Merge pull request #1738 from curvefi/feat/analytics-app

feat: add new barebones analytics app

Author: 0xAlunara

apps/main/src/analytics/AnalyticsLayout.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from '@tanstack/react-router'
+
+export function AnalyticsLayout() {
+  return <Outlet />
+}

apps/main/src/analytics/components/PageHome/index.tsx

@@ -0,0 +1 @@
+export const PageHome = () => <div data-testid="new-app">hello world</div>

apps/main/src/routes/GlobalLayout.tsx

@@ -32,6 +32,7 @@ const useAppRoutes = (network: NetworkDef) => ({
   dao: APP_LINK.dao.routes,
   llamalend: APP_LINK.llamalend.routes,
   dex: useDexRoutes(network),
+  analytics: APP_LINK.analytics.routes,
 })
 
 const useAppMenu = (app: AppName): AppMenuOption =>
@@ -41,6 +42,7 @@ const useAppMenu = (app: AppName): AppMenuOption =>
     lend: 'llamalend' as const,
     llamalend: 'llamalend' as const,
     dex: 'dex' as const,
+    analytics: 'analytics' as const,
   })[app]
 
 const useAppSupportedNetworks = (allNetworks: NetworkMapping, app: AppName) =>
@@ -50,6 +52,7 @@ const useAppSupportedNetworks = (allNetworks: NetworkMapping, app: AppName) =>
     lend: lendNetworks,
     llamalend: lendNetworks,
     dex: allNetworks,
+    analytics: allNetworks,
   })[app]
 
 // when the mobile drawer is open, we want to ignore the scrollbar and expand the content to full page width

apps/main/src/routes/analytics.routes.tsx

@@ -0,0 +1,39 @@
+import '@/global-extensions'
+import { AnalyticsLayout } from '@/analytics/AnalyticsLayout'
+import { PageHome } from '@/analytics/components/PageHome'
+import Skeleton from '@mui/material/Skeleton'
+import { createRoute } from '@tanstack/react-router'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { rootRoute } from './root.routes'
+import { redirectTo } from './util'
+
+const { MinHeight } = SizesAndSpaces
+
+const analyticsLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'analytics',
+  component: AnalyticsLayout,
+})
+
+const layoutProps = { getParentRoute: () => analyticsLayoutRoute }
+
+export const analyticsRoutes = analyticsLayoutRoute.addChildren([
+  createRoute({
+    path: '/',
+    component: () => <Skeleton width="100%" height={MinHeight.pageContent} />,
+    head: () => ({
+      meta: [{ title: 'Analytics - Curve' }],
+    }),
+    ...layoutProps,
+  }),
+  createRoute({
+    path: '$network',
+    loader: ({ params: { network } }) => redirectTo(`/analytics/${network}/home`),
+    ...layoutProps,
+  }),
+  createRoute({
+    path: '$network/home',
+    component: PageHome,
+    ...layoutProps,
+  }),
+])

apps/main/src/routes/index.tsx

@@ -5,6 +5,7 @@ import { createRoute, createRouter } from '@tanstack/react-router'
 import { t } from '@ui-kit/lib/i18n'
 import { ErrorPage } from '@ui-kit/pages/ErrorPage'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { analyticsRoutes } from './analytics.routes'
 import { crvusdRoutes } from './crvusd.routes'
 import { daoRoutes } from './dao.routes'
 import { dexRoutes } from './dex.routes'
@@ -33,6 +34,7 @@ export const router = createRouter({
   scrollRestoration: true,
   routeTree: rootRoute.addChildren([
     indexRoute,
+    analyticsRoutes,
     crvusdRoutes,
     daoRoutes,
     dexRoutes,

packages/curve-ui-kit/src/features/connect-wallet/lib/types.ts

@@ -45,7 +45,9 @@ export const AppLibs = {
   dex: 'curveApi',
   lend: 'llamaApi',
   llamalend: 'llamaApi',
-} satisfies Record<AppName, LibKey>
+  // Technically this app doesn't need a lib, but making this optional opens a can of worms. Refactor later.
+  analytics: 'curveApi',
+} satisfies Record<AppName, LibKey | undefined>
 type AppLibMap = typeof AppLibs
 
 export type AppLib<A extends AppName> = Libs[AppLibMap[A]]

packages/curve-ui-kit/src/hooks/useFeatureFlags.ts

@@ -38,3 +38,6 @@ export const useNewBandsChart = useBetaChannel
 
 /** New card for managing soft liquidations */
 export const useManageSoftLiquidation = useAlphaChannel
+
+/** Entire new app containing in-depth analyses for knowledgeable users */
+export const useAnalyticsApp = useAlphaChannel

packages/curve-ui-kit/src/shared/route-redirects.ts

@@ -1,7 +1,14 @@
 import { type ParsedLocation } from '@tanstack/router-core'
 import { type AppName, AppNames, CRVUSD_ROUTES, DAO_ROUTES, DEX_ROUTES, LEND_ROUTES, LLAMALEND_ROUTES } from './routes'
 
-const defaultPages = { dex: 'swap', lend: 'markets', crvusd: 'markets', dao: 'proposals', llamalend: 'markets' }
+const defaultPages = {
+  dex: 'swap',
+  lend: 'markets',
+  crvusd: 'markets',
+  dao: 'proposals',
+  llamalend: 'markets',
+  analytics: 'home',
+}
 const oldOrigins = ['lend', 'crvusd', 'dao'] as const
 
 // old redirects that were hardcoded in the react-router routes. The network name gets added in the redirect.
@@ -30,6 +37,7 @@ const OldRoutes: Record<AppName, string[]> = {
   ],
   lend: [LEND_ROUTES.PAGE_MARKETS, LEND_ROUTES.PAGE_INTEGRATIONS],
   llamalend: [LLAMALEND_ROUTES.PAGE_MARKETS, LLAMALEND_ROUTES.PAGE_INTEGRATIONS],
+  analytics: [],
 }
 
 /**

packages/curve-ui-kit/src/shared/routes.ts

@@ -47,10 +47,14 @@ export const DAO_ROUTES = {
   PAGE_INTEGRATIONS,
 } as const
 
-export const AppNames = ['dex', 'lend', 'crvusd', 'dao', 'llamalend'] as const
+export const ANALYTICS_ROUTES = {
+  PAGE_HOME: '/home',
+}
+
+export const AppNames = ['dex', 'lend', 'crvusd', 'dao', 'llamalend', 'analytics'] as const
 export type AppName = (typeof AppNames)[number]
 
-export const AppMenuOptions = ['dex', 'llamalend', 'dao'] as const
+export const AppMenuOptions = ['dex', 'llamalend', 'dao', 'analytics'] as const
 export type AppMenuOption = (typeof AppMenuOptions)[number]
 
 export const APP_LINK: Record<AppMenuOption, AppRoutes> = {
@@ -81,6 +85,10 @@ export const APP_LINK: Record<AppMenuOption, AppRoutes> = {
       { app: 'dao', route: DAO_ROUTES.DISCUSSION, label: () => t`Discussion`, target: '_blank' },
     ],
   },
+  analytics: {
+    label: 'Analytics',
+    routes: [{ app: 'analytics', route: ANALYTICS_ROUTES.PAGE_HOME, label: () => t`Home` }],
+  },
 }
 
 /** Returns the full pathname for a given app and network */

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

@@ -1,13 +1,14 @@
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
-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) => (
   <Box display="flex" alignItems="center" marginX={[2, 3, 4]} gap={2}>
-    {Object.entries(APP_LINK).map(([menu, { label, routes }]) => (
+    {useVisibleAppLinks().map(([menu, { label, routes }]) => (
       <Button
         key={menu}
         color="navigation"