feat: add user profile (dev only)

Author: Alunara

apps/dao/src/components/ConnectWallet.tsx

@@ -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()
 
   const loading = isLoading(connectState)
 

apps/dao/src/hooks/usePageOnMount.ts

@@ -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()
+
   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/layout/Header.tsx

@@ -10,9 +10,9 @@ 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 { 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,19 +27,17 @@ 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, theme, setTheme } = useUserProfileStore()
+
   const { rLocalePathname } = getLocaleFromUrl()
   const { params: routerParams, location } = routerProps ?? {}
 
   const routerNetwork = routerParams?.network ?? 'ethereum'
   const routerPathname = location?.pathname ?? ''
 
-  const theme = themeType == 'default' ? 'light' : (themeType as ThemeKey)
   return (
     <NewHeader<ChainId>
       networkName={rNetwork}
@@ -51,14 +49,7 @@ export const Header = ({ sections, BannerProps }: HeaderProps) => {
         () => _parseRouteAndIsActive(APP_LINK.dao.pages, rLocalePathname, routerPathname, routerNetwork),
         [rLocalePathname, routerNetwork, routerPathname],
       )}
-      themes={[
-        theme,
-        useCallback(
-          (selectedThemeType: ThemeKey) =>
-            setAppCache('themeType', selectedThemeType == 'light' ? 'default' : selectedThemeType),
-          [setAppCache],
-        ),
-      ]}
+      themes={[theme, setTheme]}
       ChainProps={{
         theme,
         options: visibleNetworksList,

apps/dao/src/layout/index.tsx

@@ -13,6 +13,7 @@ import useStore from '@/store/useStore'
 
 import Header from '@/layout/Header'
 import { Footer } from 'curve-ui-kit/src/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()
 
   useEffect(() => {
     updateLayoutHeight('globalAlert', globalAlertHeight)

apps/dao/src/pages/_app.tsx

@@ -14,7 +14,7 @@ import { ThemeProvider } from 'curve-ui-kit/src/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,8 @@ function CurveApp({ Component }: AppProps) {
   const onboard = useStore((state) => state.wallet.onboard)
   const isPageVisible = useStore((state) => state.isPageVisible)
 
+  const { locale, setLocale, theme } = useUserProfileStore()
+
   const [appLoaded, setAppLoaded] = useState(false)
 
   const handleResizeListener = useCallback(() => {
@@ -57,8 +58,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 +68,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 +76,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 +144,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/store/createAppSlice.ts

@@ -1,27 +1,22 @@
 import type { GetState, SetState } from 'zustand'
 import type { State } from '@/store/useStore'
 import type { ConnectState } from '@/ui/utils'
-import type { Locale } from '@ui-kit/lib/i18n'
 
 import isEqual from 'lodash/isEqual'
 import produce from 'immer'
 
 import { log } from '@ui-kit/lib'
-import { setStorageValue } from '@/utils'
 
 export type DefaultStateKeys = keyof typeof DEFAULT_STATE
 export type SliceKey = keyof State | ''
 export type StateKey = string
-export type Theme = 'dark' | 'default' | 'chad'
 export type LayoutHeight = {
   globalAlert: number
   mainNav: number
   secondaryNav: number
   footer: number
 }
 
-type AppCacheKeys = 'themeType'
-
 type SliceState = {
   connectState: ConnectState
   curve: CurveApi | null
@@ -31,21 +26,16 @@ type SliceState = {
   isPageVisible: boolean
   layoutHeight: LayoutHeight
   loaded: boolean
-  locale: Locale['value']
-  maxSlippage: string
   routerProps: RouterProps | null
   showScrollButton: boolean
-  themeType: Theme
 }
 
 // prettier-ignore
 export interface AppSlice extends SliceState {
-  setThemeType: (themeType: Theme) => void
   updateConnectState(status: ConnectState['status'], stage: ConnectState['stage'], options?: ConnectState['options']): void
   updateCurveJs(curveApi: CurveApi, prevCurveApi: CurveApi | null, wallet: Wallet | null): Promise<void>
   updateLayoutHeight: (key: keyof LayoutHeight, value: number | null) => void
   updateShowScrollButton(scrollY: number): void
-  setAppCache<T>(key: AppCacheKeys, value: T): void
   updateGlobalStoreByKey: <T>(key: DefaultStateKeys, value: T) => void
 
   setAppStateByActiveKey<T>(sliceKey: SliceKey, key: StateKey, activeKey: string, value: T, showLog?: boolean): void
@@ -62,31 +52,20 @@ const DEFAULT_STATE = {
   isLoadingCurve: true,
   isPageVisible: true,
   loaded: false,
-  locale: 'en' as const,
   pageWidth: null,
   layoutHeight: {
     globalAlert: 0,
     mainNav: 0,
     secondaryNav: 0,
     footer: 0,
   },
-  maxSlippage: '',
   routerProps: null,
   showScrollButton: false,
-  themeType: 'default' as const,
 }
 
 const createAppSlice = (set: SetState<State>, get: GetState<State>): AppSlice => ({
   ...DEFAULT_STATE,
 
-  setThemeType: (themeType: Theme) => {
-    set(
-      produce((state: State) => {
-        state.themeType = themeType
-      }),
-    )
-    setStorageValue('APP_CACHE', { themeType })
-  },
   updateConnectState: (
     status: ConnectState['status'],
     stage: ConnectState['stage'],
@@ -146,12 +125,6 @@ const createAppSlice = (set: SetState<State>, get: GetState<State>): AppSlice =>
       )
     }
   },
-  setAppCache: <T>(key: AppCacheKeys, value: T) => {
-    get().updateGlobalStoreByKey(key, value)
-    setStorageValue('APP_CACHE', {
-      themeType: key === 'themeType' ? value : get().themeType || 'default',
-    })
-  },
   updateGlobalStoreByKey: <T>(key: DefaultStateKeys, value: T) => {
     set(
       produce((state) => {

apps/dao/src/utils/utilsStorage.ts

@@ -1,5 +1,3 @@
-import type { Theme } from '@/store/createAppSlice'
-
 import merge from 'lodash/merge'
 
 import dayjs from '@ui-kit/lib/dayjs'
@@ -24,20 +22,12 @@ export function getStorageValue(key: Key) {
 
   if (key === 'APP_CACHE') {
     return {
-      themeType: getTheme(parsedStoredValue.themeType),
       timestamp: parsedStoredValue.timestamp ?? '',
       walletName: getWalletName(parsedStoredValue.walletName, parsedStoredValue.timestamp),
     }
   }
 }
 
-function getTheme(svThemeType: string | undefined) {
-  if (svThemeType) {
-    const foundThemeType = ['default', 'dark', 'chad'].find((t) => t === svThemeType) as Theme
-    return (foundThemeType || 'default') as Theme
-  }
-}
-
 function getWalletName(walletName: string | undefined, timestamp: string | undefined) {
   const isStaled = walletName && timestamp && dayjs().diff(+timestamp, 'days') > 5
   return isStaled || !walletName ? '' : walletName

apps/lend/src/components/AdvancedSettings.tsx

@@ -17,6 +17,7 @@ import Icon from '@/ui/Icon'
 import IconTooltip from '@/ui/Tooltip/TooltipIcon'
 import ModalDialog, { OpenDialogIconButton } from '@/ui/Dialog'
 import InputProvider, { InputField } from '@/ui/InputComp'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
 
 type FormValues = {
   selected: string
@@ -57,13 +58,14 @@ function getDefaultFormValuesState(formValues: FormValues, propsMaxSlippage: str
 export const AdvancedSettings = ({ className, buttonIcon, maxSlippage }: React.PropsWithChildren<Props>) => {
   const overlayTriggerState = useOverlayTriggerState({})
   const isMobile = useStore((state) => state.isMobile)
-  const updateGlobalStoreByKey = useStore((state) => state.updateGlobalStoreByKey)
+
+  const { setMaxSlippage } = useUserProfileStore()
 
   const [formValues, setFormValues] = useState(DEFAULT_FORM_VALUES)
 
   const handleSave = () => {
     const updatedCustomSlippage = formValues.selected === 'custom' ? formValues.customValue : formValues.selected
-    updateGlobalStoreByKey('maxSlippage', updatedCustomSlippage)
+    setMaxSlippage(updatedCustomSlippage)
     if (isMobile) {
       delayAction(overlayTriggerState.close)
     } else {

apps/lend/src/components/ChartOhlcWrapper/index.tsx

@@ -16,11 +16,10 @@ import PoolActivity from '@/components/ChartOhlcWrapper/PoolActivity'
 import TextCaption from '@/ui/TextCaption'
 import AlertBox from '@/ui/AlertBox'
 import { useOneWayMarket } from '@/entities/chain'
+import { useUserProfileStore } from '@ui-kit/features/user-profile'
 
 const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiveKey, rOwmId }) => {
   const market = useOneWayMarket(rChainId, rOwmId).data
-  const isAdvanceMode = useStore((state) => state.isAdvanceMode)
-  const themeType = useStore((state) => state.themeType)
   const borrowMoreActiveKey = useStore((state) => state.loanBorrowMore.activeKey)
   const loanRepayActiveKey = useStore((state) => state.loanRepay.activeKey)
   const loanCollateralAddActiveKey = useStore((state) => state.loanCollateralAdd.activeKey)
@@ -40,6 +39,8 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
     (state) => state.loanCollateralRemove.detailInfo[loanCollateralRemoveActiveKey]?.prices ?? null,
   )
 
+  const { isAdvancedMode, theme } = useUserProfileStore()
+
   const isMdUp = useStore((state) => state.layout.isMdUp)
   const {
     chartLlammaOhlc,
@@ -377,7 +378,7 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
           chartStatus={currentChart.fetchStatus}
           chartHeight={chartHeight}
           chartExpanded={chartExpanded}
-          themeType={themeType}
+          themeType={theme}
           ohlcData={currentChart.data}
           volumeData={chartLlammaOhlc.volumeData}
           oraclePriceData={oraclePriceData}
@@ -405,7 +406,7 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
       </LpEventsWrapperExpanded>
     </ExpandedWrapper>
   ) : (
-    <Wrapper className={!isAdvanceMode ? 'normal-mode' : ''} chartExpanded={chartExpanded}>
+    <Wrapper className={!isAdvancedMode ? 'normal-mode' : ''} chartExpanded={chartExpanded}>
       <SelectorRow>
         <SelectorButton
           variant={'text'}
@@ -437,7 +438,7 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
           chartStatus={currentChart.fetchStatus}
           chartHeight={chartHeight}
           chartExpanded={false}
-          themeType={themeType}
+          themeType={theme}
           ohlcData={currentChart.data}
           volumeData={chartLlammaOhlc.volumeData}
           oraclePriceData={oraclePriceData}