✨ Settings

components/AdvancedSwitch/index.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import { Box, BoxProps, Typography } from '@mui/material';
+import { useCustomTheme } from 'contexts/ThemeContext';
+import { useTranslation } from 'react-i18next';
+import Switch from 'components/Switch';
+
+type Props = {
+  sx?: BoxProps['sx'];
+  fontSize?: number;
+};
+
+const AdvancedViewSwitch: FC<Props> = ({ sx, fontSize = 14 }) => {
+  const { t } = useTranslation();
+  const { view, setView } = useCustomTheme();
+
+  return (
+    <Box display="flex" alignItems="center" justifyContent="space-between" gap={1} sx={sx}>
+      <Typography fontSize={fontSize}>{t('Advanced view')}</Typography>
+      <Switch
+        checked={view === 'advanced'}
+        onChange={() => setView(view === 'advanced' ? 'simple' : 'advanced')}
+        inputProps={{
+          'aria-label': t('Switch to {{view}} view', { view: view === 'advanced' ? t('simple') : t('advanced') }),
+          'data-testid': 'switch-markets-view',
+        }}
+      />
+    </Box>
+  );
+};
+
+export default AdvancedViewSwitch;

components/DropdownMenu/index.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactNode, useCallback, useState } from 'react';
-import { Box, Button, Menu, type MenuProps, MenuItem } from '@mui/material';
+import { Box, Button, Menu, type MenuProps, MenuItem, ButtonProps } from '@mui/material';
 import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 
 interface Props<T> extends Pick<MenuProps, 'anchorOrigin' | 'transformOrigin'> {
@@ -10,6 +10,7 @@ interface Props<T> extends Pick<MenuProps, 'anchorOrigin' | 'transformOrigin'> {
   renderOption: (value: T) => ReactNode;
   'data-testid'?: string;
   disabled?: boolean;
+  buttonSx?: ButtonProps['sx'];
 }
 
 function InnerButton({ children }: PropsWithChildren) {
@@ -53,6 +54,7 @@ const DropdownMenu = <T,>({
   anchorOrigin = { vertical: 'top', horizontal: 'left' },
   transformOrigin = { vertical: 'top', horizontal: 'left' },
   disabled = false,
+  buttonSx,
 }: Props<T>) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
@@ -74,7 +76,7 @@ const DropdownMenu = <T,>({
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
-        sx={{ borderRadius: '16px', p: 1, ml: -1 }}
+        sx={{ borderRadius: '16px', p: 1, ml: -1, ...buttonSx }}
         data-testid={testId}
         disabled={disabled}
       >

components/Footer/index.tsx

@@ -3,10 +3,8 @@ import { Box, Typography } from '@mui/material';
 import TwitterIcon from '@mui/icons-material/Twitter';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import { globals } from 'styles/theme';
-import SwitchTheme from 'components/SwitchTheme';
 import { DiscordIcon } from 'components/Icons';
 import { useTranslation } from 'react-i18next';
-import SelectLanguage from 'components/SelectLanguage';
 import { useWeb3 } from 'hooks/useWeb3';
 import { optimism, mainnet } from 'wagmi/chains';
 const { onlyDesktopFlex } = globals;
@@ -76,8 +74,6 @@ const Footer = () => {
             <a target="_blank" rel="noreferrer noopener" href="https://discord.gg/exactly">
               <DiscordIcon fontSize="small" sx={{ fill: ({ palette }) => palette.figma.grey[600] }} />
             </a>
-            <SelectLanguage />
-            <SwitchTheme />
           </Box>
         </Box>
       </Box>

components/MobileMenu/index.tsx

@@ -10,7 +10,6 @@ import { Box } from '@mui/system';
 import Image from 'next/image';
 import useRouter from 'hooks/useRouter';
 import Link from 'next/link';
-import Switch from 'components/Switch';
 import { DiscordIcon } from 'components/Icons';
 import QueryStatsIcon from '@mui/icons-material/QueryStats';
 import SwitchTheme from 'components/SwitchTheme';
@@ -24,12 +23,12 @@ import { mainnet, optimism } from 'wagmi/chains';
 import { useWeb3 } from 'hooks/useWeb3';
 import SecondaryChain from 'components/SecondaryChain';
 import { RewardsButton } from 'components/RewardsModal';
-import { useCustomTheme } from 'contexts/ThemeContext';
 import { isE2E } from 'utils/client';
 
 import RemoveCircleOutlineRoundedIcon from '@mui/icons-material/RemoveCircleOutlineRounded';
 import MonitorHeartRoundedIcon from '@mui/icons-material/MonitorHeartRounded';
 import GppGoodRoundedIcon from '@mui/icons-material/GppGoodRounded';
+import AdvancedViewSwitch from 'components/AdvancedSwitch';
 
 type Props = {
   open: boolean;
@@ -50,7 +49,6 @@ function MobileMenu({ open, handleClose }: Props) {
       {
         title: t('Markets'),
         pathname: '/',
-        component: <AdvancedViewSwitch />,
         icon: <BarChartRoundedIcon sx={{ fontSize: 20 }} />,
       },
       {
@@ -126,25 +124,22 @@ function MobileMenu({ open, handleClose }: Props) {
               {t('Menu')}
             </Typography>
             <Box display="flex" flexDirection="column" gap={2}>
-              {headers.map(({ title, pathname, component, icon }) => (
+              {headers.map(({ title, pathname, icon }) => (
                 <Box key={`mobile_tabs_${title}`} display="flex" flexDirection="column" gap={2}>
-                  <Box display="flex" justifyContent="space-between">
-                    <Link href={{ pathname, query }} onClick={handleClose}>
-                      <Box display="flex" gap={1} alignItems="center">
-                        {icon}
-                        <Typography
-                          sx={{
-                            textDecoration: currentPathname === pathname ? 'underline' : 'none',
-                            fontWeight: 700,
-                            fontSize: 24,
-                          }}
-                        >
-                          {title}
-                        </Typography>
-                      </Box>
-                    </Link>
-                    {component}
-                  </Box>
+                  <Link href={{ pathname, query }} onClick={handleClose}>
+                    <Box display="flex" gap={1} alignItems="center">
+                      {icon}
+                      <Typography
+                        sx={{
+                          textDecoration: currentPathname === pathname ? 'underline' : 'none',
+                          fontWeight: 700,
+                          fontSize: 24,
+                        }}
+                      >
+                        {title}
+                      </Typography>
+                    </Box>
+                  </Link>
                 </Box>
               ))}
             </Box>
@@ -155,6 +150,19 @@ function MobileMenu({ open, handleClose }: Props) {
               </>
             )}
             <Divider sx={{ my: 1.5 }} />
+            <Typography fontFamily="fontFamilyMonospaced" fontSize={14} color="figma.grey.500" fontWeight={600}>
+              {t('Settings')}
+            </Typography>
+            <AdvancedViewSwitch sx={{ width: '100%' }} fontSize={16} />
+            <Box width="100%" display="flex" alignItems="center" justifyContent="space-between" gap={1}>
+              <Typography fontSize={16}>{t('Theme')}</Typography>
+              <SwitchTheme />
+            </Box>
+            <Box width="100%" display="flex" alignItems="center" justifyContent="space-between" gap={1}>
+              <Typography fontSize={16}>{t('Language')}</Typography>
+              <SelectLanguage />
+            </Box>
+            <Divider sx={{ my: 1.5 }} />
             <Typography fontFamily="fontFamilyMonospaced" fontSize={14} color="figma.grey.500" fontWeight={600}>
               {t('Links')}
             </Typography>
@@ -177,14 +185,10 @@ function MobileMenu({ open, handleClose }: Props) {
               <QueryStatsIcon fontSize="small" sx={{ color: 'figma.grey.500', my: 'auto' }} />
             </LinkItem>
           </Box>
-          <Box display="flex" justifyContent="space-between" alignItems="center" mt={2}>
+          <Box mt={4}>
             <Typography fontSize={14} sx={{ color: 'figma.grey.300' }}>
               © Exactly {date.getFullYear()}
             </Typography>
-            <Box>
-              <SelectLanguage />
-              <SwitchTheme />
-            </Box>
           </Box>
         </Box>
       </Slide>
@@ -203,22 +207,4 @@ const LinkItem: FC<PropsWithChildren & { title: string; href: string }> = ({ chi
   </a>
 );
 
-const AdvancedViewSwitch: FC = () => {
-  const { t } = useTranslation();
-  const { view, setView } = useCustomTheme();
-  return (
-    <Box display="flex" alignItems="center" justifyContent="space-between" gap={1}>
-      <Typography fontSize={14}>{t('Advanced view')}</Typography>
-      <Switch
-        checked={view === 'advanced'}
-        onChange={() => setView(view === 'advanced' ? 'simple' : 'advanced')}
-        inputProps={{
-          'aria-label': t('Switch to {{view}} view', { view: view === 'advanced' ? t('simple') : t('advanced') }),
-          'data-testid': 'switch-markets-view',
-        }}
-      />
-    </Box>
-  );
-};
-
 export default MobileMenu;

components/Navbar/index.tsx

@@ -32,6 +32,7 @@ import { useModal } from 'contexts/ModalContext';
 import MoreMenu from './MoreMenu';
 import ExtraFinance from 'components/ExtraFinance';
 import { isE2E } from 'utils/client';
+import Settings from 'components/Settings';
 
 const { onlyMobile, onlyDesktopFlex } = globals;
 
@@ -215,6 +216,7 @@ function Navbar() {
               {isOPMainnet && <ExtraFinance />}
               {!isMobile && !isEthereum && <RewardsButton />}
               <Wallet />
+              {!isMobile && <Settings />}
             </Box>
           </Box>
           <IconButton

components/SelectLanguage/index.tsx

@@ -53,6 +53,7 @@ function SelectLanguage() {
           {o === lng && <CheckIcon sx={sx} />}
         </>
       )}
+      buttonSx={{ minHeight: 26, maxHeight: 26 }}
     />
   );
 }

components/Settings/index.tsx

@@ -0,0 +1,79 @@
+import { Box, IconButton, Menu, MenuItem, Typography } from '@mui/material';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import AdvancedViewSwitch from 'components/AdvancedSwitch';
+import SwitchTheme from 'components/SwitchTheme';
+import SelectLanguage from 'components/SelectLanguage';
+
+const Settings = () => {
+  const { t } = useTranslation();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
+  return (
+    <>
+      <IconButton
+        id="settings"
+        aria-controls={open ? 'basic-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleClick}
+        size="small"
+        sx={{ outline: '1px solid', width: '32px', height: '32px', borderRadius: '50%', p: '0px' }}
+      >
+        <SettingsRoundedIcon sx={{ fontSize: 20 }} />
+      </IconButton>
+      <Menu
+        id="settings-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'settings-menu',
+        }}
+        slotProps={{
+          paper: {
+            sx: {
+              marginTop: 1,
+              padding: ({ spacing }) => spacing(0, 1, 0, 1),
+              boxShadow: ({ palette: _palette }) =>
+                _palette.mode === 'light' ? '0px 4px 12px rgba(175, 177, 182, 0.2)' : '',
+              borderRadius: '16px',
+              minWidth: 250,
+            },
+          },
+        }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+      >
+        <MenuItem sx={{ borderRadius: '8px', p: 1 }}>
+          <AdvancedViewSwitch sx={{ width: '100%' }} />
+        </MenuItem>
+        <MenuItem sx={{ borderRadius: '8px', p: 1 }}>
+          <Box width="100%" display="flex" alignItems="center" justifyContent="space-between" gap={1}>
+            <Typography fontSize={14}>{t('Theme')}</Typography>
+            <SwitchTheme />
+          </Box>
+        </MenuItem>
+        <MenuItem sx={{ borderRadius: '8px', p: 1 }}>
+          <Box width="100%" display="flex" alignItems="center" justifyContent="space-between" gap={1}>
+            <Typography fontSize={14}>{t('Language')}</Typography>
+            <SelectLanguage />
+          </Box>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default Settings;

components/dashboard/DashboardContent/DashboardMobile/index.tsx

@@ -58,8 +58,8 @@ const DashboardMobile: FC<Props> = ({ type }) => {
                   action: isDeposit ? t('deposited') : t('borrowed'),
                 })}
               >
-                {(depositedAmount &&
-                  borrowedAmount &&
+                {(depositedAmount !== undefined &&
+                  borrowedAmount !== undefined &&
                   `${formatNumber(
                     formatUnits(isDeposit ? depositedAmount : borrowedAmount, getMarketAccount(symbol)?.decimals ?? 18),
                     symbol,

components/dashboard/DashboardContent/index.tsx

@@ -34,7 +34,7 @@ function DashboardContent() {
 
   const { isConnected, impersonateActive } = useWeb3();
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMobileOrTablet = useMediaQuery(theme.breakpoints.down('md'));
 
   const allTabs = useMemo(
     () => [
@@ -64,7 +64,7 @@ function DashboardContent() {
     return <ConnectYourWallet />;
   }
 
-  if (isMobile) {
+  if (isMobileOrTablet) {
     return (
       <Box my={2}>
         <MobileTabs

components/markets/MarketsTables/index.tsx

@@ -21,7 +21,7 @@ import usePreviousValue from 'hooks/usePreviousValue';
 import useAnalytics from 'hooks/useAnalytics';
 import { MAX_UINT256, WEI_PER_ETHER } from 'utils/const';
 
-const { onlyMobile, onlyDesktop } = globals;
+const { smOrLess, mdOrMore } = globals;
 
 // sorts rows based on defaultRows symbol order
 const sortByDefault = (defaultRows: TableRow[], toSort: TableRow[]) =>
@@ -213,7 +213,7 @@ const MarketTables: FC = () => {
         borderRadius="0px 0px 6px 6px"
         bgcolor="components.bg"
         borderTop="4px solid #34C53A"
-        display={onlyDesktop}
+        display={mdOrMore}
       >
         <Typography variant="h6" mb={2} ml={1.5}>
           {t('Variable Interest Rate')}
@@ -229,14 +229,14 @@ const MarketTables: FC = () => {
         borderRadius="0px 0px 6px 6px"
         bgcolor="components.bg"
         borderTop="4px solid #008CF4"
-        display={onlyDesktop}
+        display={mdOrMore}
       >
         <Typography variant="h6" mb={2} ml={1.5}>
           {t('Fixed Interest Rate')}
         </Typography>
         <PoolTable isLoading={isLoading} headers={fixedHeaders} rows={fixedRows} rateType="fixed" />
       </Grid>
-      <Box display={onlyMobile} my={2}>
+      <Box display={smOrLess} my={2}>
         <MobileTabs
           tabs={[
             {