Merge branch 'main' into fix/console

Author: DanielSchiavini

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
   extends: ['custom'],
   settings: {
     next: {
-      rootDir: ['apps/*/', 'packages/ui/*/', 'packages/curve-common/*/']
-    }
-  }
+      rootDir: ['apps/*/', 'packages/ui/*/'],
+    },
+  },
 }

README.md

@@ -54,7 +54,6 @@ This repository is organized as follows:
 - `/apps/lend`: Lend [React](https://react.dev/) application.
 - `/tests`: DApp tests
 - `/packages/curve-ui-kit`: Shared UI kit created using Material UI, mapped as `@ui-kit`
-- `/packages/curve-common`: List of features for the DApps, mapped as `@/common`
 
 ## Development Guide
 

apps/dao/lingui.config.js

@@ -0,0 +1 @@
+export { config as default } from '../../lingui.config'

apps/dao/lingui.config.ts

@@ -27,7 +27,7 @@ const nextConfiguration = {
     unoptimized: true,
   },
   trailingSlash: true,
-  transpilePackages: ['curve-common', 'curve-ui-kit'],
+  transpilePackages: ['curve-ui-kit'],
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,

apps/dao/next.config.js

@@ -26,23 +26,19 @@
     "typescript": "*"
   },
   "dependencies": {
-    "@curvefi/api": "^2.65.25",
+    "@curvefi/api": "^2.65.27",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.9.0",
-    "@lingui/react": "^4.6.0",
     "@supercharge/promise-pool": "^2.3.2",
     "bignumber.js": "^9.1.2",
-    "curve-common": "*",
     "curve-ui-kit": "*",
-    "dayjs": "^1.11.7",
     "ethers": "^6.13.4",
     "focus-visible": "5.2.0",
     "fuse.js": "^6.6.2",
     "immer": "^9.0.12",
     "intersection-observer": "^0.12.0",
     "lightweight-charts": "4.1.2",
     "lodash": "4.17.21",
-    "make-plural": "^7.1.0",
     "memoizee": "^0.4.17",
     "next": "^13.5.6",
     "next-images": "^1.8.5",

apps/dao/package.json

@@ -1,5 +1,6 @@
 import { isLoading } from '@/ui/utils'
 import useStore from '@/store/useStore'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
 
 import ConnectWalletPrompt from '@/ui/ConnectWalletPrompt'
 
@@ -12,7 +13,7 @@ type ConnectWalletProps = {
 const ConnectWallet: React.FC<ConnectWalletProps> = ({ description, connectText, loadingText }) => {
   const updateConnectWalletStateKeys = useStore((state) => state.wallet.updateConnectWalletStateKeys)
   const connectState = useStore((state) => state.connectState)
-  const theme = useStore((state) => state.themeType)
+  const theme = useUserProfileStore((state) => state.theme)
 
   const loading = isLoading(connectState)
 

apps/dao/src/components/ConnectWallet.tsx

@@ -0,0 +1,39 @@
+import type { NextPage } from 'next'
+import { useEffect } from 'react'
+import { t } from '@lingui/macro'
+
+import Stack from '@mui/material/Stack'
+
+import DocumentHead from '@/layout/DocumentHead'
+import { scrollToTop } from '@/utils'
+
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { Disclaimer } from '@ui-kit/widgets/Disclaimer'
+
+const { Spacing } = SizesAndSpaces
+
+const Page: NextPage = () => {
+  useEffect(() => {
+    scrollToTop()
+  }, [])
+
+  return (
+    <>
+      <DocumentHead title={t`Risk Disclaimer`} />
+
+      <Stack
+        alignItems="center"
+        gap={Spacing.xl}
+        sx={{
+          marginInline: 'auto',
+          marginBlockStart: Spacing.xl,
+          marginBlockEnd: Spacing.xxl,
+        }}
+      >
+        <Disclaimer />
+      </Stack>
+    </>
+  )
+}
+
+export default Page

apps/dao/src/components/PageDisclaimer/Page.tsx

@@ -14,6 +14,7 @@ import { helpers } from '@/lib/curvejs'
 import { isFailure, isLoading, isSuccess } from '@/ui/utils'
 import networks from '@/networks'
 import useStore from '@/store/useStore'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
 
 function usePageOnMount(params: Params, location: Location, navigate: NavigateFunction, chainIdNotRequired?: boolean) {
   const [{ wallet }, connect, disconnect] = useConnectWallet()
@@ -26,6 +27,8 @@ function usePageOnMount(params: Params, location: Location, navigate: NavigateFu
   const updateCurveJs = useStore((state) => state.updateCurveJs)
   const updateGlobalStoreByKey = useStore((state) => state.updateGlobalStoreByKey)
 
+  const setLocale = useUserProfileStore((state) => state.setLocale)
+
   const walletChainId = getWalletChainId(wallet)
   const walletSignerAddress = getWalletSignerAddress(wallet)
   const parsedParams = parseParams(params, chainIdNotRequired)
@@ -219,7 +222,8 @@ function usePageOnMount(params: Params, location: Location, navigate: NavigateFu
           let data = await import(`@/locales/${rLocale}/messages`)
           dynamicActivate(rLocale, data)
         })()
-        updateAppLocale(rLocale, updateGlobalStoreByKey)
+        setLocale(rLocale)
+        updateAppLocale(rLocale)
         updateWalletLocale(rLocale)
       } else if (walletChainId && curve && curve.chainId === walletChainId && parsedParams.rChainId !== walletChainId) {
         // switch network if url network is not same as wallet

apps/dao/src/hooks/usePageOnMount.ts

@@ -1,18 +1,18 @@
 import React, { useCallback, useMemo, useRef } from 'react'
 import { t } from '@lingui/macro'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { CONNECT_STAGE } from '@/constants'
 import { getLocaleFromUrl, getNetworkFromUrl, getRestFullPathname } from '@/utils/utilsRouter'
 import { _parseRouteAndIsActive, isLoading } from '@/ui/utils'
 import { getWalletSignerAddress, useConnectWallet } from '@ui-kit/features/connect-wallet'
 import networks, { visibleNetworksList } from '@/networks'
 import useLayoutHeight from '@/hooks/useLayoutHeight'
 import useStore from '@/store/useStore'
-import { Header as NewHeader, useHeaderHeight } from '@/common/widgets/Header'
-import { NavigationSection } from '@/common/widgets/Header/types'
-import { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
+import { Header as NewHeader, useHeaderHeight } from '@ui-kit/widgets/Header'
+import { NavigationSection } from '@ui-kit/widgets/Header/types'
 import { APP_LINK } from '@ui-kit/shared/routes'
 import { GlobalBannerProps } from '@/ui/Banner/GlobalBanner'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
 
 type HeaderProps = { sections: NavigationSection[]; BannerProps: GlobalBannerProps }
 
@@ -27,40 +27,29 @@ export const Header = ({ sections, BannerProps }: HeaderProps) => {
   const connectState = useStore((state) => state.connectState)
   const isMdUp = useStore((state) => state.layout.isMdUp)
   const bannerHeight = useStore((state) => state.layoutHeight.globalAlert)
-  const locale = useStore((state) => state.locale)
   const routerProps = useStore((state) => state.routerProps)
-  const themeType = useStore((state) => state.themeType)
-  const setAppCache = useStore((state) => state.setAppCache)
   const updateConnectState = useStore((state) => state.updateConnectState)
 
+  const locale = useUserProfileStore((state) => state.locale)
+
+  const location = useLocation()
   const { rLocalePathname } = getLocaleFromUrl()
-  const { params: routerParams, location } = routerProps ?? {}
+  const { params: routerParams } = routerProps ?? {}
 
   const routerNetwork = routerParams?.network ?? 'ethereum'
   const routerPathname = location?.pathname ?? ''
 
-  const theme = themeType == 'default' ? 'light' : (themeType as ThemeKey)
   return (
     <NewHeader<ChainId>
       networkName={rNetwork}
       mainNavRef={mainNavRef}
-      locale={locale}
       isMdUp={isMdUp}
       currentApp="dao"
       pages={useMemo(
         () => _parseRouteAndIsActive(APP_LINK.dao.pages, rLocalePathname, routerPathname, routerNetwork),
         [rLocalePathname, routerNetwork, routerPathname],
       )}
-      themes={[
-        theme,
-        useCallback(
-          (selectedThemeType: ThemeKey) =>
-            setAppCache('themeType', selectedThemeType == 'light' ? 'default' : selectedThemeType),
-          [setAppCache],
-        ),
-      ]}
       ChainProps={{
-        theme,
         options: visibleNetworksList,
         disabled: isLoading(connectState, CONNECT_STAGE.SWITCH_NETWORK),
         chainId: rChainId,

apps/dao/src/layout/Header.tsx

@@ -1,4 +1,4 @@
-import { Locale } from '@/common/widgets/Header/types'
+import { Locale } from '@ui-kit/widgets/Header/types'
 
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components'
@@ -12,7 +12,8 @@ import { useHeightResizeObserver } from '@/ui/hooks'
 import useStore from '@/store/useStore'
 
 import Header from '@/layout/Header'
-import { Footer } from 'curve-ui-kit/src/widgets/Footer'
+import { Footer } from '@ui-kit/widgets/Footer'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
 
 const BaseLayout = ({ children }: { children: React.ReactNode }) => {
   const [{ wallet }] = useConnectWallet()
@@ -23,7 +24,8 @@ const BaseLayout = ({ children }: { children: React.ReactNode }) => {
   const layoutHeight = useStore((state) => state.layoutHeight)
   const updateConnectState = useStore((state) => state.updateConnectState)
   const updateLayoutHeight = useStore((state) => state.updateLayoutHeight)
-  const locale = useStore((state) => state.locale)
+
+  const locale = useUserProfileStore((state) => state.locale)
 
   useEffect(() => {
     updateLayoutHeight('globalAlert', globalAlertHeight)
@@ -71,7 +73,7 @@ const BaseLayout = ({ children }: { children: React.ReactNode }) => {
         }}
       />
       <Main minHeight={minHeight}>{children}</Main>
-      <Footer networkName={rNetwork} />
+      <Footer appName="dao" networkName={rNetwork} />
     </Container>
   )
 }
@@ -83,6 +85,7 @@ const getSections = (locale: Locale) => [
       { route: 'https://news.curve.fi/', label: t`News` },
       { route: 'https://resources.curve.fi/lending/understanding-lending/', label: t`User Resources` },
       { route: 'https://docs.curve.fi', label: t`Developer Resources` },
+      { route: '/disclaimer', label: t`Risk Disclaimers` },
       { route: 'https://resources.curve.fi/glossary-branding/branding/', label: t`Branding` },
       ...(locale === 'zh-Hans' || locale === 'zh-Hant' ? [{ route: 'https://www.curve.wiki/', label: t`Wiki` }] : []),
     ],

apps/dao/src/layout/index.tsx

@@ -10,11 +10,11 @@ import delay from 'lodash/delay'
 import 'intersection-observer'
 import 'focus-visible'
 import '@/globals.css'
-import { ThemeProvider } from 'curve-ui-kit/src/shared/ui/ThemeProvider'
+import { ThemeProvider } from '@ui-kit/shared/ui/ThemeProvider'
 
 import { dynamicActivate, initTranslation, updateAppLocale } from '@ui-kit/lib/i18n'
 import { connectWalletLocales, initOnboard } from '@ui-kit/features/connect-wallet'
-import { getLocaleFromUrl, getStorageValue } from '@/utils'
+import { getLocaleFromUrl } from '@/utils'
 import { getIsMobile, getPageWidthClassName, isSuccess } from '@/ui/utils'
 import { messages as messagesEn } from '@/locales/en/messages.js'
 import networks from '@/networks'
@@ -25,15 +25,14 @@ import usePageVisibleInterval from '@/hooks/usePageVisibleInterval'
 import Page from '@/layout'
 import GlobalStyle from '@/globalStyle'
 import { ChadCssProperties } from '@ui-kit/themes/typography'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
 
 i18n.load({ en: messagesEn })
 i18n.activate('en')
 
 function CurveApp({ Component }: AppProps) {
   const connectState = useStore((state) => state.connectState)
-  const locale = useStore((state) => state.locale)
   const pageWidth = useStore((state) => state.layout.pageWidth)
-  const themeType = useStore((state) => state.themeType)
   const setPageWidth = useStore((state) => state.layout.setLayoutWidth)
   const updateShowScrollButton = useStore((state) => state.updateShowScrollButton)
   const updateGlobalStoreByKey = useStore((state) => state.updateGlobalStoreByKey)
@@ -47,6 +46,10 @@ function CurveApp({ Component }: AppProps) {
   const onboard = useStore((state) => state.wallet.onboard)
   const isPageVisible = useStore((state) => state.isPageVisible)
 
+  const theme = useUserProfileStore((state) => state.theme)
+  const locale = useUserProfileStore((state) => state.locale)
+  const setLocale = useUserProfileStore((state) => state.setLocale)
+
   const [appLoaded, setAppLoaded] = useState(false)
 
   const handleResizeListener = useCallback(() => {
@@ -57,8 +60,8 @@ function CurveApp({ Component }: AppProps) {
   useEffect(() => {
     if (!pageWidth) return
 
-    document.body.className = `theme-${themeType} ${pageWidth} ${getIsMobile() ? '' : 'scrollSmooth'}`
-    document.body.setAttribute('data-theme', themeType || '')
+    document.body.className = `theme-${theme} ${pageWidth} ${getIsMobile() ? '' : 'scrollSmooth'}`
+    document.body.setAttribute('data-theme', theme)
     document.documentElement.lang = locale
   })
 
@@ -67,12 +70,6 @@ function CurveApp({ Component }: AppProps) {
       updateShowScrollButton(window.scrollY)
     }
 
-    const { themeType } = getStorageValue('APP_CACHE') ?? {}
-
-    // init theme
-    const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    updateGlobalStoreByKey('themeType', themeType ? themeType : darkModeQuery.matches ? 'dark' : 'default')
-
     // init locale
     const { rLocale } = getLocaleFromUrl()
     const parsedLocale = rLocale?.value ?? 'en'
@@ -81,10 +78,11 @@ function CurveApp({ Component }: AppProps) {
       let data = await import(`@/locales/${parsedLocale}/messages`)
       dynamicActivate(parsedLocale, data)
     })()
-    updateAppLocale(parsedLocale, updateGlobalStoreByKey)
+    setLocale(parsedLocale)
+    updateAppLocale(parsedLocale)
 
     // init onboard
-    const onboardInstance = initOnboard(connectWalletLocales, locale, themeType, networks)
+    const onboardInstance = initOnboard(connectWalletLocales, locale, theme, networks)
     updateWalletStoreByKey('onboard', onboardInstance)
 
     const handleVisibilityChange = () => {
@@ -148,8 +146,8 @@ function CurveApp({ Component }: AppProps) {
   )
 
   return (
-    <div suppressHydrationWarning style={{ ...(themeType === 'chad' && ChadCssProperties) }}>
-      <ThemeProvider theme={themeType === 'default' ? 'light' : themeType}>
+    <div suppressHydrationWarning style={{ ...(theme === 'chad' && ChadCssProperties) }}>
+      <ThemeProvider theme={theme}>
         {typeof window === 'undefined' || !appLoaded ? null : (
           <HashRouter>
             <I18nProvider i18n={i18n}>

apps/dao/src/pages/_app.tsx

@@ -12,10 +12,13 @@ const PageAnalytics = dynamic(() => import('@/components/PageAnalytics/Page'), {
 const PageUser = dynamic(() => import('@/components/PageUser/Page'), { ssr: false })
 const PageGauge = dynamic(() => import('@/components/PageGauge/Page'), { ssr: false })
 const PageVeCrv = dynamic(() => import('@/components/PageVeCrv/Page'), { ssr: false })
+const PageDisclaimer = dynamic(() => import('@/components/PageDisclaimer/Page'), { ssr: false })
+
 const App: NextPage = () => {
   const SubRoutes = (
     <>
       <Route path=":network/" element={<PageDao />} />
+      <Route path=":network/disclaimer" element={<PageDisclaimer />} />
       <Route path=":network/proposals" element={<PageDao />} />
       <Route path=":network/proposals/:proposalId" element={<PageProposal />} />
       <Route path=":network/user/:userAddress" element={<PageUser />} />