Merge branch 'develop' of github.com:curvefi/curve-frontend into header

.github/workflows/storybook.yaml

@@ -0,0 +1,42 @@
+name: Storybook
+description: Builds and deploys Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+
+      - name: 'Build'
+        working-directory: packages/curve-ui-kit
+        run: |
+          yarn install --immutable
+          yarn build:storybook
+
+      - name: 'upload'
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: packages/curve-ui-kit/storybook-static
+          name: 'github-pages'
+
+      - id: deploy
+        name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4
+        with:
+          token: ${{ github.token }}

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

@@ -17,7 +17,7 @@ import styled from 'styled-components'
 import { formatNumber } from '@/ui/utils'
 
 import ChartTooltip, { TipContent, TipIcon, TipTitle } from '@/components/ChartTooltip'
-import { ThemeKey } from '@ui-kit/shared/lib'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 interface Props {
   data: { name: string; curr: number[]; new: number[]; oraclePrice: string; oraclePriceBand: number | null }[]

apps/lend/src/layout/Header.tsx

@@ -10,10 +10,14 @@ import networks, { visibleNetworksList } from '@/networks'
 import useStore from '@/store/useStore'
 import { useTvl } from '@/entities/chain'
 import { Header as NewHeader } from '@/common/widgets/Header'
-import { ThemeKey } from '@ui-kit/shared/lib'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { type Theme } from '@mui/system'
+import type { ThemeKey } from '@ui-kit/themes/basic-theme'
 import type { Locale, NavigationSection } from '@/common/widgets/Header/types'
 
-type HeaderProps = { chainId: ChainId, sections: NavigationSection[] }
+type HeaderProps = { chainId: ChainId; sections: NavigationSection[] }
+
+const isMdUpQuery = (theme: Theme) => theme.breakpoints.up('tablet')
 
 const Header = ({ chainId, sections }: HeaderProps) => {
   const [{ wallet }] = useConnectWallet()
@@ -23,14 +27,14 @@ const Header = ({ chainId, sections }: HeaderProps) => {
 
   const connectState = useStore((state) => state.connectState)
   const isAdvancedMode = useStore((state) => state.isAdvanceMode)
-  const isMdUp = useStore((state) => state.layout.isMdUp)
   const locale = useStore((state) => state.locale)
   const updateGlobalStoreByKey = useStore((state) => state.updateGlobalStoreByKey)
   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 { data: tvl } = useTvl(chainId);
+  const isMdUp = useMediaQuery(isMdUpQuery, { noSsr: true })
+  const { data: tvl } = useTvl(chainId)
 
   const { params: routerParams, location } = routerProps ?? {}
   const routerPathname = location?.pathname ?? ''
@@ -45,61 +49,91 @@ const Header = ({ chainId, sections }: HeaderProps) => {
         useCallback((isAdvanced) => setAppCache('isAdvanceMode', isAdvanced), [setAppCache]),
       ]}
       currentApp="lend"
-      pages={useMemo(() =>
-        _parseRouteAndIsActive([
-          { route: ROUTE.PAGE_MARKETS, label: t`Markets`, groupedTitle: isMdUp ? 'Markets' : 'Llamalend' },
-          {
-            route: ROUTE.PAGE_INTEGRATIONS,
-            label: t`Integrations`,
-            groupedTitle: isMdUp ? 'Others' : 'Llamalend', ...!isMdUp && { minWidth: '10rem' }
-          },
-          { route: ROUTE.PAGE_RISK_DISCLAIMER, label: t`Risk Disclaimer`, groupedTitle: isMdUp ? 'risk' : 'Llamalend' }
-        ], rLocalePathname, routerPathname, routerNetwork), [isMdUp, rLocalePathname, routerNetwork, routerPathname])}
+      pages={useMemo(
+        () =>
+          _parseRouteAndIsActive(
+            [
+              { route: ROUTE.PAGE_MARKETS, label: t`Markets`, groupedTitle: isMdUp ? 'Markets' : 'Llamalend' },
+              {
+                route: ROUTE.PAGE_INTEGRATIONS,
+                label: t`Integrations`,
+                groupedTitle: isMdUp ? 'Others' : 'Llamalend',
+                ...(!isMdUp && { minWidth: '10rem' }),
+              },
+              {
+                route: ROUTE.PAGE_RISK_DISCLAIMER,
+                label: t`Risk Disclaimer`,
+                groupedTitle: isMdUp ? 'risk' : 'Llamalend',
+              },
+            ],
+            rLocalePathname,
+            routerPathname,
+            routerNetwork,
+          ),
+        [isMdUp, rLocalePathname, routerNetwork, routerPathname],
+      )}
       themes={[
         themeType,
         useCallback((selectedThemeType: ThemeKey) => setAppCache('themeType', selectedThemeType), [setAppCache]),
       ]}
       LanguageProps={{
         locale,
         locales: DEFAULT_LOCALES,
-        onChange: useCallback((selectedLocale: Key) => {
-          const { rNetwork } = getNetworkFromUrl()
-          updateAppLocale(selectedLocale as Locale, updateGlobalStoreByKey)
-          navigate(`${selectedLocale === 'en' ? '' : `/${selectedLocale}`}/${rNetwork}/${getRestFullPathname()}`)
-        }, [updateGlobalStoreByKey, navigate]),
+        onChange: useCallback(
+          (selectedLocale: Key) => {
+            const { rNetwork } = getNetworkFromUrl()
+            updateAppLocale(selectedLocale as Locale, updateGlobalStoreByKey)
+            navigate(`${selectedLocale === 'en' ? '' : `/${selectedLocale}`}/${rNetwork}/${getRestFullPathname()}`)
+          },
+          [updateGlobalStoreByKey, navigate],
+        ),
       }}
       ChainProps={{
         options: visibleNetworksList,
         disabled: isLoading(connectState, CONNECT_STAGE.SWITCH_NETWORK),
         chainId: chainId,
-        onChange: useCallback((selectedChainId: ChainId) => {
-          if (chainId !== selectedChainId) {
-            const network = networks[selectedChainId as ChainId].id
-            const [currPath] = window.location.hash.split('?')
+        onChange: useCallback(
+          (selectedChainId: ChainId) => {
+            if (chainId !== selectedChainId) {
+              const network = networks[selectedChainId as ChainId].id
+              const [currPath] = window.location.hash.split('?')
 
-            if (currPath.endsWith('markets')) {
-              // include search params when in market list page
-              navigate(`${rLocalePathname}/${network}/${getRestFullPathname()}`)
-            } else {
-              navigate(`${rLocalePathname}/${network}/${getRestPartialPathname()}`)
-            }
+              if (currPath.endsWith('markets')) {
+                // include search params when in market list page
+                navigate(`${rLocalePathname}/${network}/${getRestFullPathname()}`)
+              } else {
+                navigate(`${rLocalePathname}/${network}/${getRestPartialPathname()}`)
+              }
 
-            updateConnectState('loading', CONNECT_STAGE.SWITCH_NETWORK, [chainId, selectedChainId])
-          }
-        }, [chainId, rLocalePathname, updateConnectState, navigate]),
+              updateConnectState('loading', CONNECT_STAGE.SWITCH_NETWORK, [chainId, selectedChainId])
+            }
+          },
+          [chainId, rLocalePathname, updateConnectState, navigate],
+        ),
       }}
       WalletProps={{
-        onConnectWallet: useCallback(() => updateConnectState('loading', CONNECT_STAGE.CONNECT_WALLET, ['']), [updateConnectState]),
-        onDisconnectWallet: useCallback(() => updateConnectState('loading', CONNECT_STAGE.DISCONNECT_WALLET), [updateConnectState]),
+        onConnectWallet: useCallback(
+          () => updateConnectState('loading', CONNECT_STAGE.CONNECT_WALLET, ['']),
+          [updateConnectState],
+        ),
+        onDisconnectWallet: useCallback(
+          () => updateConnectState('loading', CONNECT_STAGE.DISCONNECT_WALLET),
+          [updateConnectState],
+        ),
         walletAddress: getWalletSignerAddress(wallet),
         disabled: isLoading(connectState, CONNECT_STAGE.SWITCH_NETWORK),
         label: t`Connect Wallet`,
       }}
-      appStats={[{ label: 'TVL', value: tvl && formatNumber(tvl, { ...FORMAT_OPTIONS.USD, showDecimalIfSmallNumberOnly: true }) || '' }]}
+      appStats={[
+        {
+          label: 'TVL',
+          value: (tvl && formatNumber(tvl, { ...FORMAT_OPTIONS.USD, showDecimalIfSmallNumberOnly: true })) || '',
+        },
+      ]}
       sections={sections}
       translations={{
-        advanced: t`Advanced Mode`,
-        advancedMode: t`Advanced`,
+        advanced: t`Advanced`,
+        advancedMode: t`Advanced Mode`,
         theme: t`Mode`,
         language: t`Language`,
         otherApps: t`Other Apps`,

apps/lend/src/store/createAppSlice.ts

@@ -8,7 +8,7 @@ import { REFRESH_INTERVAL } from '@/constants'
 import { log } from '@/shared/lib/logging'
 import { setStorageValue } from '@/utils/utilsStorage'
 import isEqual from 'lodash/isEqual'
-import { ThemeKey } from '@ui-kit/shared/lib'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 import { LocaleValue } from '@/common/features/switch-language'
 
 export type DefaultStateKeys = keyof typeof DEFAULT_STATE

apps/lend/src/types/global.d.ts

@@ -9,7 +9,7 @@ import type lendingApi from '@curvefi/lending-api'
 import type { TooltipProps } from '@/ui/Tooltip/types'
 
 import { TITLE } from '@/constants'
-import { ThemeKey } from '@ui-kit/shared/lib'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 declare global {
   interface Window {

apps/lend/src/utils/utilsStorage.ts

@@ -1,6 +1,6 @@
 import merge from 'lodash/merge'
 import dayjs from 'dayjs'
-import { ThemeKey } from '@ui-kit/shared/lib'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 export const APP_STORAGE = {
   APP_CACHE: 'lend-app-cache',

apps/loan/src/components/PageCrvUsdStaking/UserInformation/index.tsx

@@ -3,10 +3,10 @@ import { t } from '@lingui/macro'
 import Image from 'next/image'
 
 import { RCCrvUSDLogoSM, RCScrvUSDLogoSM, RCYieldGrowth } from 'ui/src/images'
-import { APP_LINK } from '@/ui/AppNav'
 
 import Icon from '@/ui/Icon'
 import { ExternalLink } from '@/ui/Link'
+import { APP_LINK } from '@/common/widgets/Header/constants'
 
 type UserInformationProps = {
   className?: string

apps/loan/src/layout/Header.tsx

@@ -10,8 +10,8 @@ import networks, { visibleNetworksList } from '@/networks'
 import useLayoutHeight from '@/hooks/useLayoutHeight'
 import useStore from '@/store/useStore'
 import { Header as NewHeader } from '@/common/widgets/Header'
-import { ThemeKey } from 'curve-ui-kit/src/shared/lib'
 import { NavigationSection } from '@/common/widgets/Header/types'
+import { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 type HeaderProps = { sections: NavigationSection[] }
 

apps/loan/tsconfig.json

@@ -7,6 +7,7 @@
       "@/ui": ["../../../packages/ui/src/index.ts"],
       "@/shared/ui/*": ["../../../packages/ui/src/shared/ui/*"],
       "@/ui/*": ["../../../packages/ui/src/*"],
+      "@ui-kit/*": ["../../../packages/curve-ui-kit/src/*"],
       "@/images": ["../../../packages/ui/src/images/index.ts"],
       "@/images/*": ["../../../packages/ui/src/images/*"],
       "@/common/*": ["../../../packages/curve-common/src/*"],

apps/main/src/layout/default/Header.tsx

@@ -11,8 +11,8 @@ import networks, { visibleNetworksList } from '@/networks'
 import useLayoutHeight from '@/hooks/useLayoutHeight'
 import useStore from '@/store/useStore'
 import { Header as NewHeader } from '@/common/widgets/Header'
-import { ThemeKey } from 'curve-ui-kit/src/shared/lib'
 import { NavigationSection } from '@/common/widgets/Header/types'
+import type { ThemeKey } from '@ui-kit/themes/basic-theme'
 
 type HeaderProps = { sections: NavigationSection[] }
 

apps/main/tsconfig.json

@@ -7,6 +7,7 @@
       "@/ui": ["../../../packages/ui/src/index.ts"],
       "@/shared/ui/*": ["../../../packages/ui/src/shared/ui/*"],
       "@/ui/*": ["../../../packages/ui/src/*"],
+      "@ui-kit/*": ["../../../packages/curve-ui-kit/src/*"],
       "@/images": ["../../../packages/ui/src/images/index.ts"],
       "@/images/*": ["../../../packages/ui/src/images/*"],
       "@/common/*": ["../../../packages/curve-common/src/*"],

packages/curve-common/src/features/connect-wallet/ui/ConnectWalletButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'curve-ui-kit/src/shared/ui/Button'
+import Button from '@mui/material/Button'
 import type { SxProps, Theme } from '@mui/system'
 
 export type ConnectWalletButtonProps = {

packages/curve-common/src/features/connect-wallet/ui/ConnectedWalletLabel.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import { Button } from 'curve-ui-kit/src/shared/ui/Button'
+import Button from '@mui/material/Button'
 import { Address, AddressLabel } from 'curve-ui-kit/src/shared/ui/AddressLabel'
 
 import type { SxProps, Theme } from '@mui/system'

packages/curve-common/src/features/switch-advanced-mode/AdvancedModeSwitcher.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react'
 import Switch from '@mui/material/Switch'
 import Box from '@mui/material/Box'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import Typography from '@mui/material/Typography'
 
 type AdvancedModeSwitcherProps = {
   label?: string,
@@ -10,15 +10,16 @@ type AdvancedModeSwitcherProps = {
 }
 
 export const AdvancedModeSwitcher: FunctionComponent<AdvancedModeSwitcherProps> = ({ advancedMode, onChange, label }) => (
-  <Box display="inline-flex" marginRight={4} alignItems="center">
+  <Box display="inline-flex" alignItems="center">
     <Switch
       checked={advancedMode}
       onChange={() => onChange(!advancedMode)}
       color="primary"
       inputProps={{ ...label && { 'aria-label': label } }}
+      size="small"
     />
     {label && (
-      <Typography variant="headingXsBold" display="inline-block" sx={{ textTransform: 'uppercase', lineHeight: '37px' }}>
+      <Typography variant="headingXsBold" display="inline-block" sx={{ marginLeft: 3, marginRight: 4, textTransform: 'uppercase', lineHeight: '37px' }}>
         {label}
       </Typography>
     )}

packages/curve-common/src/features/switch-chain/ui/ChainSwitcher.tsx

@@ -1,6 +1,6 @@
-import { MenuItem } from 'curve-ui-kit/src/shared/ui/MenuItem'
+import MenuItem from '@mui/material/MenuItem'
 import { FunctionComponent, SVGProps, useCallback, useMemo } from 'react'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import Typography from '@mui/material/Typography'
 import { CompactDropDown } from 'curve-ui-kit/src/shared/ui/CompactDropDown'
 
 export type IconType = FunctionComponent<SVGProps<SVGSVGElement>>
@@ -23,7 +23,7 @@ export const ChainSwitcher = <TChainId extends number>({ options, chainId, onCha
 
   const renderChainIcon = useCallback((value: TChainId) => {
     const { icon: Icon } = networkMapping[value]
-    return (<Icon width={24} />)
+    return (<Icon width={32} />)
   }, [networkMapping])
 
   if (options.length <= 1) {
@@ -37,12 +37,12 @@ export const ChainSwitcher = <TChainId extends number>({ options, chainId, onCha
         variant="standard"
         disabled={disabled}
         renderValue={renderChainIcon}
-        sx={{marginTop: 2}}
-        disableUnderline
+        inputProps={{ sx: { paddingY: 0 } }}
+        MenuProps={{ MenuListProps: { sx: { paddingY: 0 } } }}
       >
         {
           options.map(({ chainId: id, icon: Icon, label }) => (
-            <MenuItem key={id} value={id}>
+            <MenuItem key={id} value={id} divider>
               <Icon width={28} />
               <Typography sx={{ marginLeft: 4 }} variant="bodySRegular">
                 {label}

packages/curve-common/src/features/switch-language/ui/LanguageSwitcher.tsx

@@ -1,5 +1,5 @@
-import { MenuItem } from 'curve-ui-kit/src/shared/ui/MenuItem'
-import { Typography } from 'curve-ui-kit/src/shared/ui/Typography'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
 import { CompactDropDown } from 'curve-ui-kit/src/shared/ui/CompactDropDown'
 
 export type LocaleValue = 'en' | 'zh-Hans' | 'zh-Hant' | 'pseudo'
@@ -16,8 +16,10 @@ export type LanguageSwitcherProps = {
 }
 
 export const LanguageSwitcher = ({ locales, locale, onChange }: LanguageSwitcherProps) => locales.length > 1 && (
-  <CompactDropDown<LocaleValue> value={locale} onChange={onChange} //inputProps
-                                >
+  <CompactDropDown<LocaleValue>
+    value={locale} onChange={onChange}
+    inputProps={{ sx: { padding: 3 } }}
+  >
     {locales.map((languageOption) => (
       <MenuItem key={languageOption.value} value={languageOption.value}>
         <Typography fontWeight="bold">{languageOption.name}</Typography>

packages/curve-common/src/features/switch-theme/types.tsx

@@ -1,6 +1,6 @@
 import { ChadImg, RCMoon, RCSun } from 'ui'
 import Image from 'next/image'
-import type { ThemeKey } from 'curve-ui-kit/src/shared/lib'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 const DEFAULT_SIZE = 24
 export const themes = [