Merge pull request #616 from curvefi/feat/peg-keepers

feat: add peg keepers to crvUSD menu

Author: 0xAlunara

apps/main/src/loan/constants.ts

@@ -10,7 +10,6 @@ export const ROUTE = {
   PAGE_CREATE: '/create',
   PAGE_MANAGE: '/manage',
   PAGE_404: '/404',
-  PAGE_PEGKEEPERS: '/pegkeepers',
 }
 
 export const REFRESH_INTERVAL = {

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

@@ -19,6 +19,7 @@ export const CRVUSD_ROUTES = {
   BETA_PAGE_MARKETS: '/beta-markets',
   PAGE_CRVUSD_STAKING: '/scrvUSD',
   PAGE_DISCLAIMER: '/disclaimer',
+  PAGE_PEGKEEPERS: '/pegkeepers',
 }
 
 export const DAO_ROUTES = {
@@ -50,6 +51,7 @@ export const APP_LINK: Record<AppName, AppRoutes> = {
     pages: [
       { route: CRVUSD_ROUTES.PAGE_MARKETS, label: () => t`Markets` },
       ...(isBeta ? [{ route: CRVUSD_ROUTES.BETA_PAGE_MARKETS, label: () => t`Llama (beta)` }] : []),
+      { route: CRVUSD_ROUTES.PAGE_PEGKEEPERS, label: () => t`Peg Keepers` },
       { route: CRVUSD_ROUTES.PAGE_CRVUSD_STAKING, label: () => t`Savings crvUSD` },
     ],
   },

packages/curve-ui-kit/src/shared/ui/TabsSwitcher.tsx

@@ -43,11 +43,12 @@ export const TabsSwitcher = <T extends string | number>({
     className={`${TABS_VARIANT_CLASSES[variant]} ${TABS_HEIGHT_CLASSES[size]}`}
     {...props}
   >
-    {options.map(({ value, label, ...props }) => (
+    {options.map(({ value, label, sx, ...props }) => (
       <Tab
         key={value}
         value={value}
         label={<Typography variant={textVariant ?? defaultTextVariants[size]}>{label}</Typography>}
+        sx={{ ...sx, whiteSpace: 'nowrap' }}
         {...props}
       />
     ))}

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

@@ -85,7 +85,7 @@ export const DesktopHeader = <TChainId extends number>({
           <Container>
             <PageTabs pages={pages} currentApp={currentApp} selectedApp={selectedApp} networkName={networkName} />
             <Box flexGrow={1} />
-            <Box display="flex" gap={3} alignItems="center">
+            <Box display="flex" gap={3} alignItems="center" sx={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>
               <HeaderStats appStats={appStats} />
             </Box>
           </Container>

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

@@ -9,7 +9,8 @@ export type HeaderStatsProps = {
 export const HeaderStats: FunctionComponent<HeaderStatsProps> = ({ appStats }) =>
   appStats?.map(({ label, value }) => (
     <Box key={label} display="inline-flex" alignItems="baseline">
-      <Typography variant="bodyMRegular" color="grey.600">
+      {/* add ellipsis*/}
+      <Typography variant="bodyMRegular" color="grey.600" sx={{ whiteSpace: 'nowrap' }}>
         {label}:
       </Typography>
       &nbsp;

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

@@ -31,5 +31,7 @@ export const PageTabs: FunctionComponent<PageTabsProps> = ({ pages, currentApp,
       [currentApp, networkName, pages, selectedApp],
     )}
     variant="overlined"
+    muiVariant="standard"
+    sx={{ overflow: 'visible' }}
   />
 )