feat: legal page with terms/conditions, privacy policy and disclaimers (refactored)

apps/main/src/dex/constants.ts

@@ -9,7 +9,6 @@ export const MAIN_ROUTE = {
   PAGE_LOCKER: '/locker',
   PAGE_INTEGRATIONS: '/integrations',
   PAGE_COMPENSATION: '/compensation',
-  PAGE_DISCLAIMER: '/disclaimer',
   PAGE_404: '/404',
 }
 

apps/main/src/lend/constants.ts

@@ -3,7 +3,6 @@ import { LEND_ROUTES } from '@ui-kit/shared/routes'
 export const ROUTE = {
   ...LEND_ROUTES,
   PAGE_INTEGRATIONS: '/integrations',
-  PAGE_DISCLAIMER: '/disclaimer',
   PAGE_CREATE: '/create',
   PAGE_MANAGE: '/manage',
   PAGE_VAULT: '/vault',

apps/main/src/loan/constants.ts

@@ -6,7 +6,6 @@ export const SCRVUSD_VAULT_ADDRESS = '0x0655977FEb2f289A4aB78af67BAB0d17aAb84367
 export const ROUTE = {
   ...CRVUSD_ROUTES,
   PAGE_INTEGRATIONS: '/integrations',
-  PAGE_DISCLAIMER: '/disclaimer',
   PAGE_CREATE: '/create',
   PAGE_MANAGE: '/manage',
   PAGE_404: '/404',

apps/main/src/routes/crvusd.routes.tsx

@@ -8,7 +8,7 @@ import { CrvUsdClientLayout } from '@/loan/CrvUsdClientLayout'
 import Skeleton from '@mui/material/Skeleton'
 import { createRoute } from '@tanstack/react-router'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-import { Disclaimer } from '@ui-kit/widgets/Disclaimer'
+import { LegalPage } from '@ui-kit/widgets/Legal'
 import { rootRoute } from './root.routes'
 import { redirectTo } from './util'
 
@@ -44,9 +44,14 @@ export const crvusdRoutes = crvusdLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/disclaimer',
-    component: () => <Disclaimer currentApp="crvusd" />,
+    loader: ({ params: { network } }) => redirectTo(`/crvusd/${network}/legal/?tab=disclaimers`),
+    ...layoutProps,
+  }),
+  createRoute({
+    path: '$network/legal',
+    component: () => <LegalPage currentApp="crvusd" />,
     head: () => ({
-      meta: [{ title: 'Risk Disclaimer - Curve' }],
+      meta: [{ title: 'Legal - Curve' }],
     }),
     ...layoutProps,
   }),

apps/main/src/routes/dao.routes.tsx

@@ -10,7 +10,7 @@ import { DaoLayout } from '@/dao/DaoLayout'
 import Skeleton from '@mui/material/Skeleton'
 import { createRoute } from '@tanstack/react-router'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-import { Disclaimer } from '@ui-kit/widgets/Disclaimer/Disclaimer'
+import { LegalPage } from '@ui-kit/widgets/Legal'
 import { rootRoute } from './root.routes'
 import { redirectTo } from './util'
 
@@ -54,9 +54,14 @@ export const daoRoutes = daoLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/disclaimer',
-    component: () => <Disclaimer currentApp="dao" />,
+    loader: ({ params: { network } }) => redirectTo(`/dao/${network}/legal/?tab=disclaimers`),
+    ...layoutProps,
+  }),
+  createRoute({
+    path: '$network/legal',
+    component: () => <LegalPage currentApp="dao" />,
     head: () => ({
-      meta: [{ title: 'Risk Disclaimer - Curve' }],
+      meta: [{ title: 'Legal - Curve DAO' }],
     }),
     ...layoutProps,
   }),

apps/main/src/routes/dex.routes.tsx

@@ -11,7 +11,7 @@ import { DexLayout } from '@/dex/DexLayout'
 import Skeleton from '@mui/material/Skeleton'
 import { createRoute } from '@tanstack/react-router'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-import { Disclaimer } from '@ui-kit/widgets/Disclaimer/Disclaimer'
+import { LegalPage } from '@ui-kit/widgets/Legal'
 import { rootRoute } from './root.routes'
 import { redirectTo } from './util'
 
@@ -79,9 +79,14 @@ export const dexRoutes = dexLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/disclaimer',
-    component: () => <Disclaimer currentApp="dex" />,
+    loader: ({ params: { network } }) => redirectTo(`/dex/${network}/legal/?tab=disclaimers`),
+    ...layoutProps,
+  }),
+  createRoute({
+    path: '$network/legal',
+    component: () => <LegalPage currentApp="dex" />,
     head: () => ({
-      meta: [{ title: 'Risk Disclaimer - Curve' }],
+      meta: [{ title: 'Legal - Curve' }],
     }),
     ...layoutProps,
   }),

apps/main/src/routes/lend.routes.tsx

@@ -6,7 +6,7 @@ import PageVault from '@/lend/components/PageVault/Page'
 import Skeleton from '@mui/material/Skeleton'
 import { createRoute } from '@tanstack/react-router'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-import { Disclaimer } from '@ui-kit/widgets/Disclaimer'
+import { LegalPage } from '@ui-kit/widgets/Legal'
 import { LendLayout } from '../lend/LendLayout'
 import { rootRoute } from './root.routes'
 import { redirectTo } from './util'
@@ -37,9 +37,14 @@ export const lendRoutes = lendLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/disclaimer',
-    component: () => <Disclaimer currentApp="lend" />,
+    loader: ({ params: { network } }) => redirectTo(`/lend/${network}/legal/?tab=disclaimers`),
+    ...layoutProps,
+  }),
+  createRoute({
+    path: '$network/legal',
+    component: () => <LegalPage currentApp="lend" />,
     head: () => ({
-      meta: [{ title: 'Risk Disclaimer - Curve Lend' }],
+      meta: [{ title: 'Legal - Curve Lend' }],
     }),
     ...layoutProps,
   }),

apps/main/src/routes/llamalend.routes.tsx

@@ -1,7 +1,7 @@
 import Integrations from '@/lend/components/PageIntegrations/Page'
 import { LlamaMarketsList } from '@/llamalend/features/market-list/LlamaMarketsList'
 import { createRoute, Outlet } from '@tanstack/react-router'
-import { Disclaimer } from '@ui-kit/widgets/Disclaimer'
+import { LegalPage } from '@ui-kit/widgets/Legal'
 import { rootRoute } from './root.routes'
 import { redirectTo } from './util'
 
@@ -21,9 +21,14 @@ export const llamalendRoutes = llamalendLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/disclaimer',
-    component: () => <Disclaimer currentApp="llamalend" />,
+    loader: ({ params: { network } }) => redirectTo(`/llamalend/${network}/legal/?tab=disclaimers`),
+    ...layoutProps,
+  }),
+  createRoute({
+    path: '$network/legal',
+    component: () => <LegalPage currentApp="llamalend" />,
     head: () => ({
-      meta: [{ title: 'Risk Disclaimer - Curve Llamalend' }],
+      meta: [{ title: 'Legal - Curve Llamalend' }],
     }),
     ...layoutProps,
   }),

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

@@ -8,7 +8,6 @@ const OldRoutes: Record<AppName, string[]> = {
   crvusd: [
     CRVUSD_ROUTES.PAGE_MARKETS,
     CRVUSD_ROUTES.PAGE_CRVUSD_STAKING,
-    CRVUSD_ROUTES.PAGE_DISCLAIMER,
     CRVUSD_ROUTES.PAGE_PSR,
     CRVUSD_ROUTES.PAGE_INTEGRATIONS,
   ],
@@ -20,7 +19,6 @@ const OldRoutes: Record<AppName, string[]> = {
     DEX_ROUTES.PAGE_POOLS,
     DEX_ROUTES.PAGE_SWAP,
     DEX_ROUTES.PAGE_COMPENSATION,
-    DEX_ROUTES.PAGE_DISCLAIMER,
   ],
   dao: [
     DAO_ROUTES.PAGE_PROPOSALS,
@@ -29,8 +27,8 @@ const OldRoutes: Record<AppName, string[]> = {
     DAO_ROUTES.PAGE_ANALYTICS,
     DAO_ROUTES.PAGE_VECRV,
   ],
-  lend: [LEND_ROUTES.PAGE_MARKETS, LEND_ROUTES.PAGE_DISCLAIMER, LEND_ROUTES.PAGE_INTEGRATIONS],
-  llamalend: [LLAMALEND_ROUTES.PAGE_MARKETS, LLAMALEND_ROUTES.PAGE_DISCLAIMER, LLAMALEND_ROUTES.PAGE_INTEGRATIONS],
+  lend: [LEND_ROUTES.PAGE_MARKETS, LEND_ROUTES.PAGE_INTEGRATIONS],
+  llamalend: [LLAMALEND_ROUTES.PAGE_MARKETS, LLAMALEND_ROUTES.PAGE_INTEGRATIONS],
 }
 
 /**

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

@@ -1,8 +1,8 @@
 import { t } from '@ui-kit/lib/i18n'
 import { AppPage, AppRoute, AppRoutes } from '@ui-kit/widgets/Header/types'
 
-export const PAGE_DISCLAIMER = '/disclaimer'
 export const PAGE_INTEGRATIONS = '/integrations'
+export const PAGE_LEGAL = '/legal'
 
 export const DEX_ROUTES = {
   PAGE_SWAP: '/swap',
@@ -11,27 +11,27 @@ export const DEX_ROUTES = {
   PAGE_DASHBOARD: '/dashboard',
   PAGE_DEPLOY_GAUGE: '/deploy-gauge',
   PAGE_COMPENSATION: '/compensation',
-  PAGE_DISCLAIMER,
+  PAGE_LEGAL,
   PAGE_INTEGRATIONS,
 }
 
 export const LEND_ROUTES = {
   PAGE_MARKETS: '/markets',
-  PAGE_DISCLAIMER,
+  PAGE_LEGAL,
   PAGE_INTEGRATIONS,
 }
 
 export const CRVUSD_ROUTES = {
   PAGE_MARKETS: '/markets',
   PAGE_CRVUSD_STAKING: '/scrvUSD',
-  PAGE_DISCLAIMER,
+  PAGE_LEGAL,
   PAGE_PSR: '/psr',
   PAGE_INTEGRATIONS,
 }
 
 export const LLAMALEND_ROUTES = {
   PAGE_MARKETS: '/markets',
-  PAGE_DISCLAIMER,
+  PAGE_LEGAL,
   PAGE_INTEGRATIONS,
 }
 
@@ -43,7 +43,7 @@ export const DAO_ROUTES = {
   PAGE_ANALYTICS: '/analytics',
   PAGE_USER: '/user',
   DISCUSSION: 'https://gov.curve.finance/',
-  PAGE_DISCLAIMER,
+  PAGE_LEGAL,
   PAGE_INTEGRATIONS,
 }
 

packages/curve-ui-kit/src/themes/components/tabs/mui-tabs.ts

@@ -127,6 +127,9 @@ export const defineMuiTabs = ({
       minHeight: 0, // It's 48px by default in Mui, but we want it smaller
       [`&.${contained}`]: {
         '& .MuiTab-root': tabVariant(Contained),
+        '& .MuiTab-root:not(.Mui-selected):not(:last-child)': {
+          marginRight: '1px',
+        },
         [`&.${small} .MuiTab-root`]: tabPadding('xs', 'xs', 'md', 'md'),
         [`&.${medium} .MuiTab-root`]: tabPadding('md', 'xs', 'lg', 'lg'),
       },

packages/curve-ui-kit/src/widgets/Footer/Sections.tsx

@@ -20,19 +20,6 @@ import { TelegramRUIcon } from '@ui-kit/shared/icons/TelegramRUIcon'
 import { XIcon } from '@ui-kit/shared/icons/XIcon'
 import { AppName } from '@ui-kit/shared/routes'
 
-function getDisclaimersTab(appName: AppName) {
-  if (appName === 'lend') {
-    return '?tab=lend'
-  }
-  if (appName !== 'crvusd') {
-    return ''
-  }
-  if (typeof window !== 'undefined' && window.location.href.toLocaleLowerCase().includes('scrvusd')) {
-    return '?tab=scrvusd'
-  }
-  return '?tab=crvusd'
-}
-
 export const getSections = (appName: AppName) => [
   {
     title: t`Community`,
@@ -104,8 +91,8 @@ export const getSections = (appName: AppName) => [
         icon: <GitHubIcon />,
       },
       {
-        label: t`Risk Disclaimers`,
-        href: `disclaimer/${getDisclaimersTab(appName)}`,
+        label: t`Legal`,
+        href: `legal/`,
         icon: <RiskDisclaimersIcon />,
       },
       {

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

@@ -4,7 +4,7 @@ import { WagmiConnectModal } from '@ui-kit/features/connect-wallet/ui/WagmiConne
 import { usePathname } from '@ui-kit/hooks/router'
 import { useIsDesktop } from '@ui-kit/hooks/useBreakpoints'
 import { isChinese, t } from '@ui-kit/lib/i18n'
-import { type AppName, getInternalUrl, PAGE_DISCLAIMER, PAGE_INTEGRATIONS, routeToPage } from '@ui-kit/shared/routes'
+import { type AppName, getInternalUrl, PAGE_INTEGRATIONS, PAGE_LEGAL, routeToPage } from '@ui-kit/shared/routes'
 import { PhishingWarningModal } from '@ui-kit/widgets/Header/PhishingWarningModal'
 import { DesktopHeader } from './DesktopHeader'
 import { MobileHeader } from './MobileHeader'
@@ -40,7 +40,7 @@ const getSections = (currentApp: AppName, networkId: string): NavigationSection[
       { href: 'https://news.curve.finance/', label: t`News` },
       { href: 'https://resources.curve.finance/lending/understanding-lending/', label: t`User Resources` },
       { href: 'https://docs.curve.finance', label: t`Developer Resources` },
-      { href: getInternalUrl(currentApp, networkId, PAGE_DISCLAIMER), label: t`Risk Disclaimers` },
+      { href: getInternalUrl(currentApp, networkId, PAGE_LEGAL), label: t`Legal` },
       { href: getInternalUrl(currentApp, networkId, PAGE_INTEGRATIONS), label: t`Integrations` },
       { href: 'https://resources.curve.finance/glossary-branding/branding/', label: t`Branding` },
       ...(isChinese() ? [{ href: 'https://www.curve.wiki/', label: t`Wiki` }] : []),