feat: new mobile menu

apps/lend/src/layout/Header.tsx

@@ -45,13 +45,13 @@ const Header = () => {
 
   const pages: AppPage[] = useMemo(() =>
     _parseRouteAndIsActive([
-      { route: ROUTE.PAGE_MARKETS, label: t`Markets`, groupedTitle: 'markets' },
+      { route: ROUTE.PAGE_MARKETS, label: t`Markets`, groupedTitle: isMdUp ? 'Markets' : 'Llamalend' },
       {
         route: ROUTE.PAGE_INTEGRATIONS,
         label: t`Integrations`,
-        groupedTitle: isMdUp ? 'Others' : 'More', ...!isMdUp && { minWidth: '10rem' }
+        groupedTitle: isMdUp ? 'Others' : 'Llamalend', ...!isMdUp && { minWidth: '10rem' }
       },
-      { route: ROUTE.PAGE_RISK_DISCLAIMER, label: t`Risk Disclaimer`, groupedTitle: isMdUp ? 'risk' : 'More' }
+      { route: ROUTE.PAGE_RISK_DISCLAIMER, label: t`Risk Disclaimer`, groupedTitle: isMdUp ? 'risk' : 'Llamalend' }
     ], rLocalePathname, routerPathname, routerNetwork), [isMdUp, rLocalePathname, routerNetwork, routerPathname])
 
   const handleNetworkChange = useCallback((selectedChainId: ChainId) => {

apps/lend/src/pages/_app.tsx

@@ -103,7 +103,7 @@ function CurveApp({ Component }: AppProps) {
   return (
     <div suppressHydrationWarning>
       {typeof window === 'undefined' || !appLoaded ? null : (
-        <ThemeProvider theme={themeType as string === 'default' ? 'chad' : themeType}>
+        <ThemeProvider theme={themeType as string === 'default' ? 'light' : themeType}>
           <HashRouter>
             <I18nProvider i18n={i18n}>
               <QueryProvider persister={persister} queryClient={queryClient}>

packages/curve-common/src/features/switch-advanced-mode/index.ts

@@ -0,0 +1 @@
+export * from './AdvancedModeSwitcher'

packages/curve-common/src/features/switch-chain/ui/ChainSwitcher.tsx

@@ -1,6 +1,7 @@
 import { MenuItem } from 'curve-ui-kit/src/shared/ui/MenuItem'
 import { FunctionComponent, SVGProps, useCallback, useMemo } from 'react'
 import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import { Box } from 'curve-ui-kit/src/shared/ui/Box'
 import { CompactDropDown } from 'curve-ui-kit/src/shared/ui/CompactDropDown'
 
 export type IconType = FunctionComponent<SVGProps<SVGSVGElement>>
@@ -19,12 +20,12 @@ export type ChainSwitcherProps<TChainId> = {
 }
 
 export const ChainSwitcher = <TChainId extends number>({ options, chainId, onChange, disabled }: ChainSwitcherProps<TChainId>) => {
-  const networkIcons = useMemo(() => options.reduce((acc, option) => ({ ...acc, [option.chainId]: option.icon }), {} as Record<TChainId, IconType>), [options])
+  const networkMapping = useMemo(() => options.reduce((acc, option) => ({ ...acc, [option.chainId]: option }), {} as Record<TChainId, ChainOption<TChainId>>), [options])
 
   const renderChainIcon = useCallback((value: TChainId) => {
-    const Icon: IconType = networkIcons[value]
-    return <Icon width={24} />
-  }, [networkIcons])
+    const { icon: Icon } = networkMapping[value]
+    return (<Icon width={24} />)
+  }, [networkMapping])
 
   return (
       <CompactDropDown<TChainId>

packages/curve-common/src/features/switch-theme/ThemeSwitcherButton.tsx

@@ -0,0 +1,30 @@
+import { FunctionComponent } from 'react'
+import type { Theme } from '@mui/system'
+import { type ThemeSwitcherProps } from './types'
+import { Button } from 'curve-ui-kit/src/shared/ui/Button'
+import { Box } from 'curve-ui-kit/src/shared/ui/Box'
+import { t } from '@lingui/macro'
+import { useThemeToggle } from './useThemeToggle'
+
+export const ThemeSwitcherButton: FunctionComponent<ThemeSwitcherProps> = ({ theme, onChange }) => {
+  const [ component, onClick ] = useThemeToggle({ theme, onChange })
+  const Icon = (
+    <Box sx={{ minWidth: 38 }}>
+      {component}
+    </Box>
+  )
+  return (
+    <Button
+      onClick={onClick}
+      endIcon={Icon}
+      variant="ghost"
+      color="secondary"
+      sx={{
+        fill: (t: Theme) => t.palette.text.secondary,
+        '&:hover': {fill: (t: Theme) => t.palette.primary.contrastText},
+      }}
+    >
+      {t`Mode`}
+    </Button>
+  )
+}

packages/curve-common/src/features/switch-theme/ThemeSwitcherIconButton.tsx

@@ -0,0 +1,14 @@
+import type { FunctionComponent } from 'react'
+import type { Theme } from '@mui/system'
+import IconButton from '@mui/material/IconButton'
+import { ThemeSwitcherProps } from './types'
+import { useThemeToggle } from './useThemeToggle'
+
+export const ThemeSwitcherIconButton: FunctionComponent<ThemeSwitcherProps> = ({ theme, onChange }) => {
+  const [ component, onClick ] = useThemeToggle({ theme, onChange })
+  return (
+   <IconButton onClick={onClick} sx={{minWidth: 38, fill: (t: Theme) => t.palette.primary.main}}>
+     {component}
+   </IconButton>
+  )
+}

packages/curve-common/src/features/switch-theme/index.ts

@@ -0,0 +1,3 @@
+export * from './types'
+export * from './ThemeSwitcherButton'
+export * from './ThemeSwitcherIconButton'

packages/curve-common/src/features/switch-theme/types.tsx

@@ -0,0 +1,14 @@
+import { ChadImg, RCMoon, RCSun } from 'ui'
+import Image from 'next/image'
+import type { ThemeKey } from 'curve-ui-kit/src/shared/lib'
+
+export const themes = [
+  { type: 'light', Component: <RCSun aria-label="Light theme" /> },
+  { type: 'dark', Component: <RCMoon aria-label="Dark theme" /> },
+  { type: 'chad', Component: <Image width={24} src={ChadImg} alt="Fun theme" /> },
+] as const
+
+export type ThemeSwitcherProps = {
+  theme: ThemeKey
+  onChange(themeType: ThemeKey): void
+}

packages/curve-common/src/features/switch-theme/useThemeToggle.tsx

@@ -0,0 +1,12 @@
+import { themes, ThemeSwitcherProps } from './types'
+import { useCallback } from 'react'
+
+export function useThemeToggle({theme, onChange}: ThemeSwitcherProps) {
+  const i = themes.findIndex((t) => t.type === theme)
+  const themeIndex = i === -1 ? 0 : i
+  const onClick = useCallback(() => {
+    const nextIndex = (themeIndex + 1) % themes.length
+    onChange(themes[nextIndex].type)
+  }, [themeIndex, onChange])
+  return [ themes[themeIndex]!.Component, onClick ] as const
+}

packages/curve-common/src/widgets/Header/DesktopHeader.tsx

@@ -0,0 +1,37 @@
+import { AppBar, Toolbar } from '@mui/material'
+import Box from '@mui/material/Box'
+import { ConnectWalletIndicator } from '../../features/connect-wallet'
+import { LanguageSwitcher } from '../../features/switch-language'
+import { ChainSwitcher } from '../../features/switch-chain'
+import { AppButtonLinks } from './AppButtonLinks'
+import { HeaderLogo } from './HeaderLogo'
+import { HeaderStats } from './HeaderStats'
+import { PageTabs } from './PageTabs'
+import { Theme } from '@mui/system'
+import { ThemeSwitcherIconButton } from '../../features/switch-theme'
+import { AdvancedModeSwitcher } from '../../features/switch-advanced-mode'
+import { BaseHeaderProps, toolbarColors } from './types'
+
+export const DesktopHeader = <TChainId extends number>({ currentApp, chains, languages, wallet, pages, appStats, themes: [theme, setTheme], sections, advancedMode: [isAdvancedMode, setAdvancedMode] }: BaseHeaderProps<TChainId>) => (
+  <AppBar color="transparent" position="relative">
+    <Toolbar sx={{ backgroundColor: (t: Theme) => toolbarColors[t.palette.mode][0] }}>
+      <HeaderLogo appName={currentApp} />
+      <AppButtonLinks currentApp="lend" />
+
+      <Box sx={{ flexGrow: 1 }} />
+
+      <Box display="flex" marginLeft={2} justifyContent="flex-end" gap={3}>
+        <AdvancedModeSwitcher advancedMode={isAdvancedMode} onChange={setAdvancedMode} />
+        <LanguageSwitcher {...languages} />
+        <ThemeSwitcherIconButton theme={theme} onChange={setTheme} />
+        <ChainSwitcher {...chains} />
+        <ConnectWalletIndicator {...wallet} />
+      </Box>
+    </Toolbar>
+    <Toolbar sx={{ backgroundColor: (t: Theme) => toolbarColors[t.palette.mode][1] }}>
+      <PageTabs pages={pages} />
+      <Box flexGrow={1} />
+      <HeaderStats appStats={appStats} />
+    </Toolbar>
+  </AppBar>
+);

packages/curve-common/src/widgets/Header/Header.tsx

@@ -1,82 +1,6 @@
-import { AppBar, Toolbar } from '@mui/material'
-import Box from '@mui/material/Box'
-import type { AppName, AppNavSections, AppPage } from 'ui/src/AppNav/types'
-import { ConnectWalletIndicator, ConnectWalletIndicatorProps } from '../../features/connect-wallet'
-import { LanguageSwitcher, LanguageSwitcherProps } from '../../features/switch-language'
-import { ChainSwitcher, ChainSwitcherProps } from '../../features/switch-chain'
-import { AppButtonLinks } from './AppButtonLinks'
-import { Dispatch } from 'react'
-import { ThemeKey } from 'curve-ui-kit/src/shared/lib'
-import { HeaderLogo } from './HeaderLogo'
-import { HeaderStats } from './HeaderStats'
-import { PageTabs } from './PageTabs'
-import { Theme } from '@mui/system'
-import { ThemeSwitcher } from '../../features/switch-theme/ThemeSwitcher'
-import { AdvancedModeSwitcher } from '../../features/switch-advanced-mode/AdvancedModeSwitcher'
+import { HeaderProps } from './types'
+import { DesktopHeader } from './DesktopHeader'
+import { MobileHeader } from './MobileHeader'
 
-interface HeaderProps<TChainId> {
-  currentApp: AppName
-  languages: LanguageSwitcherProps
-  chains: ChainSwitcherProps<TChainId>
-  wallet: ConnectWalletIndicatorProps
-  pages: AppPage[]
-  themes: [ThemeKey, Dispatch<ThemeKey>]
-  appStats: {label: string, value: string}[]
-  sections: AppNavSections
-  advancedMode: [boolean, Dispatch<boolean>]
-  isMdUp: boolean
-}
-
-const APP_NAMES = {
-  main: "Curve",
-  lend: "Llamalend",
-  crvusd: "crvUSD",
-} as const
-
-// TODO: Color should be in theme
-const toolbarColors = {
-  light: ['#eeeceb', '#f4f3f0'],
-  dark: ['#1f1f1f', '#2f2f2f'], // todo
-} as const
-
-
-export const Header = <TChainId extends number>({ currentApp, chains, languages, wallet, pages, appStats, themes: [theme, setTheme], sections, advancedMode: [isAdvancedMode, setAdvancedMode], isMdUp }: HeaderProps<TChainId>) => {
-  return (
-    <AppBar color="transparent" position={"relative"}>
-      <Toolbar sx={{ backgroundColor: (t: Theme) => toolbarColors[t.palette.mode][0] }}>
-        {/*{*/}
-        {/*  !isMdUp && (*/}
-        {/*    <IconButton*/}
-        {/*      onClick={onOpenSidebar}*/}
-        {/*      sx={{*/}
-        {/*        display: {*/}
-        {/*          xs: 'inline-flex',*/}
-        {/*          lg: 'none',*/}
-        {/*        },*/}
-        {/*      }}*/}
-        {/*      data-testid={createTestId('dashboard-menu-trigger')}*/}
-        {/*    >*/}
-        {/*      <MenuIcon fontSize="small" />*/}
-        {/*    </IconButton>*/}
-        {/*}*/}
-        <HeaderLogo appName={APP_NAMES[currentApp]} />
-        {isMdUp && <AppButtonLinks currentApp="lend" />}
-
-        <Box sx={{ flexGrow: 1 }} />
-
-        <Box display="flex" marginLeft={2} justifyContent="flex-end" gap={3}>
-          <AdvancedModeSwitcher advancedMode={isAdvancedMode} onChange={setAdvancedMode} />
-          <LanguageSwitcher {...languages} />
-          <ThemeSwitcher theme={theme} onChange={setTheme} />
-          <ChainSwitcher {...chains} />
-          <ConnectWalletIndicator {...wallet} />
-        </Box>
-      </Toolbar>
-      <Toolbar sx={{ backgroundColor: (t: Theme) => toolbarColors[t.palette.mode][1] }}>
-        <PageTabs pages={pages} />
-        <Box flexGrow={1} />
-        <HeaderStats appStats={appStats} />
-      </Toolbar>
-    </AppBar>
-  );
-};
+export const Header = <TChainId extends number>({ isMdUp, ...props }: HeaderProps<TChainId>) => isMdUp ?
+  <DesktopHeader {...props} /> : <MobileHeader {...props} />;

packages/curve-common/src/widgets/Header/HeaderLogo.tsx

@@ -4,6 +4,8 @@ import { Box } from 'curve-ui-kit/src/shared/ui/Box'
 import { LogoImg, RCLogoText } from 'ui/src/images'
 import { styled } from '@mui/material/styles'
 import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import { APP_NAMES } from './types'
+import { AppName } from 'ui/src/AppNav/types'
 
 const Image = styled('img')({
   width: 30,
@@ -13,7 +15,7 @@ const Image = styled('img')({
 const LogoImageSrc = (LogoImg as unknown as { src: string }).src
 
 export type HeaderLogoProps = {
-  appName?: string
+  appName?: AppName
 }
 
 export const HeaderLogo = ({ appName }: HeaderLogoProps) => (
@@ -23,7 +25,7 @@ export const HeaderLogo = ({ appName }: HeaderLogoProps) => (
       <Box display="inline-flex" flexDirection="column" sx={{ verticalAlign: 'top' }}>
         <Typography variant="headingSBold" sx={{ textTransform: 'uppercase', textDecoration: 'none' }}
                     color="textPrimary">
-          {appName}
+          {APP_NAMES[appName]}
         </Typography>
         <Typography variant="bodyXsRegular" color="grey.600">
           powered by Curve