Merge branch 'main' into feat/table-settings

apps/dao/lingui.config.js

@@ -15,6 +15,7 @@ module.exports = {
         'src/pages',
         'src/store',
         '../../packages/curve-ui-kit',
+        '../../packages/curve-common',
       ],
     },
   ],

apps/lend/src/layout/Header.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 import { t } from '@lingui/macro'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { CONNECT_STAGE } from '@/constants'

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

@@ -31,7 +31,6 @@ export const Header = ({ sections, BannerProps }: HeaderProps) => {
   const themeType = useStore((state) => state.themeType)
   const setThemeType = useStore((state) => state.setThemeType)
   const getNetworkConfigFromApi = useStore((state) => state.getNetworkConfigFromApi)
-  const routerProps = useStore((state) => state.routerProps)
   const updateConnectState = useStore((state) => state.updateConnectState)
   const networks = useStore((state) => state.networks.networks)
   const visibleNetworksList = useStore((state) => state.networks.visibleNetworksList)
@@ -42,10 +41,8 @@ export const Header = ({ sections, BannerProps }: HeaderProps) => {
   const routerCached = useStore((state) => state.storeCache.routerFormValues[rChainId])
 
   const location = useLocation()
-  const { params: routerParams } = routerProps ?? {}
   const network = networks[rChainId]
   const routerPathname = location?.pathname ?? ''
-  const routerNetwork = routerParams?.network
   const restPartialPathname = useRestPartialPathname()
 
   const theme = themeType == 'default' ? 'light' : (themeType as ThemeKey)

packages/curve-common/src/widgets/Header/DesktopHeader.tsx

@@ -52,7 +52,7 @@ export const DesktopHeader = <TChainId extends number>({
             <Box display="flex" marginLeft={2} justifyContent="flex-end" gap={3} alignItems="center">
               {advancedMode && <AdvancedModeSwitcher advancedMode={advancedMode} label={t`Advanced`} />}
               <ThemeSwitcherButton theme={theme} onChange={setTheme} label={t`Mode`} />
-              <ChainSwitcher {...ChainProps} />
+              <ChainSwitcher {...ChainProps} headerHeight={height} />
               <ConnectWalletIndicator {...WalletProps} />
             </Box>
           </Container>

packages/curve-common/src/widgets/Header/MobileHeader.tsx

@@ -64,7 +64,7 @@ export const MobileHeader = <TChainId extends number>({
         <Toolbar sx={(t) => ({ paddingBlock, zIndex: t.zIndex.drawer + 1 })}>
           <MobileTopBar
             isLite={isLite}
-            ChainProps={ChainProps}
+            ChainProps={{ ...ChainProps, headerHeight: height }}
             currentApp={currentApp}
             isSidebarOpen={isSidebarOpen}
             toggleSidebar={toggleSidebar}

packages/curve-common/src/widgets/Header/types.ts

@@ -34,7 +34,7 @@ export type BaseHeaderProps<TChainId = number> = {
   mainNavRef: RefObject<HTMLDivElement>
   currentApp: AppName
   isLite?: boolean
-  ChainProps: ChainSwitcherProps<TChainId>
+  ChainProps: Omit<ChainSwitcherProps<TChainId>, 'headerHeight'>
   WalletProps: ConnectWalletIndicatorProps
   BannerProps: GlobalBannerProps
   height: string

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

@@ -11,6 +11,10 @@ import { ChainSwitcherIcon } from './ChainSwitcherIcon'
 import { ChainList } from './ChainList'
 import { ChainSettings } from './ChainSettings'
 import { useLocalStorage } from '@ui-kit/hooks/useLocalStorage'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+import { Duration } from 'curve-ui-kit/src/themes/design/0_primitives'
+import Container from '@mui/material/Container'
 
 export type ChainOption<TChainId> = {
   chainId: TChainId
@@ -26,31 +30,46 @@ export type ChainSwitcherProps<TChainId> = {
   onChange: (chainId: TChainId) => void
   disabled?: boolean
   theme: ThemeKey
+  headerHeight: string
 }
 
 export const ChainSwitcher = <TChainId extends number>({
   options,
   chainId,
   onChange,
   disabled,
+  headerHeight,
 }: ChainSwitcherProps<TChainId>) => {
   const [isOpen, , close, toggle] = useSwitch()
+  const [isSnackbarOpen, openSnackbar, hideSnackbar] = useSwitch()
   const [isSettingsOpen, openSettings, closeSettings] = useSwitch()
   const [showTestnets, setShowTestnets] = useLocalStorage<boolean>('showTestnets', false)
   const selectedNetwork = useMemo(() => options.find((o) => o.chainId === chainId) ?? options[0], [options, chainId])
 
   useEffect(() => () => close(), [chainId, close]) // close on chain change
 
-  if (options.length <= 1) {
-    return null
-  }
-
+  const onClick = options.length > 1 ? toggle : openSnackbar
   return (
     <>
-      <IconButton size="small" disabled={disabled} onClick={toggle} data-testid="btn-change-chain">
+      <IconButton size="small" disabled={disabled} onClick={onClick} data-testid="btn-change-chain">
         <ChainSwitcherIcon chain={selectedNetwork} />
-        <KeyboardArrowDownIcon />
+        {options.length > 1 && <KeyboardArrowDownIcon />}
       </IconButton>
+
+      <Snackbar
+        open={isSnackbarOpen}
+        onClose={hideSnackbar}
+        anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
+        sx={{ top: headerHeight }}
+        autoHideDuration={Duration.Snackbar}
+      >
+        <Container sx={{ justifyContent: 'end', marginTop: 4 }}>
+          <Alert variant="filled" severity="warning" data-testid="alert-eth-only">
+            {t`This application is only available on the Ethereum Mainnet`}
+          </Alert>
+        </Container>
+      </Snackbar>
+
       {isOpen != null && (
         <ModalDialog
           open={isOpen}

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

@@ -11,9 +11,9 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 import { SizesAndSpaces } from 'curve-ui-kit/src/themes/design/1_sizes_spaces'
 import { TypographyVariantKey, TYPOGRAPHY_VARIANTS } from 'curve-ui-kit/src/themes/typography'
 import { abbreviateNumber, scaleSuffix } from 'curve-ui-kit/src/utils'
+import { Duration } from '../../themes/design/0_primitives'
 
 const { Spacing } = SizesAndSpaces
-const COPY_ALERT_DURATION = 6000
 
 // Correspond to flexbox align items values.
 export const ALIGNMENTS = ['start', 'center', 'end'] as const
@@ -83,6 +83,8 @@ type Props = {
   label: string
   /** Optional tooltip content shown next to the label */
   tooltip?: string
+  /** The text to display when the value is copied to the clipboard */
+  copyText?: string
 
   /** The actual metric value to display */
   value: number
@@ -113,6 +115,7 @@ type Props = {
 export const Metric = ({
   label,
   tooltip,
+  copyText,
 
   value,
   formatter = (value: number) => formatValue(value, decimals),
@@ -224,9 +227,9 @@ export const Metric = ({
         </Typography>
       )}
 
-      <Snackbar open={openCopyAlert} autoHideDuration={COPY_ALERT_DURATION} onClose={() => setOpenCopyAlert(false)}>
+      <Snackbar open={openCopyAlert} onClose={() => setOpenCopyAlert(false)} autoHideDuration={Duration.Snackbar}>
         <Alert variant="filled" severity="success">
-          Copied metric value: {value}
+          {copyText}: {value}
         </Alert>
       </Snackbar>
     </Box>

packages/curve-ui-kit/src/shared/ui/stories/Metric.stories.ts

@@ -65,6 +65,7 @@ const meta: Meta<typeof Metric> = {
     value: 26539422,
     decimals: 1,
     label: 'Metrics label',
+    copyText: 'Copied metric value',
     unit: 'dollar',
   },
 }

packages/curve-ui-kit/src/themes/design/0_primitives.ts

@@ -99,4 +99,8 @@ export const Sizing = {
   '800': '5.5rem', // 88px
 } as const
 
+export const Duration = {
+  Snackbar: 6000,
+}
+
 export const TransitionFunction = `ease-out 0.256s`

packages/curve-ui-kit/src/themes/design/2_theme.ts

@@ -146,7 +146,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
   const Feedback = {
     Success: Greens[300],
     Info: Layer[3].Fill,
-    Warning: Reds[300],
+    Warning: Reds[400],
     Error: Reds[500],
   } as const
   return {
@@ -743,7 +743,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
   const Feedback = {
     Success: Greens[400],
     Info: Layer[3].Fill,
-    Warning: Reds[300],
+    Warning: Reds[400],
     Error: Reds[500],
   } as const
   return {

packages/external-rewards/src/campaign-list.json

@@ -76,5 +76,8 @@
   },
   {
     "campaign": "Babylon.json"
+  },
+  {
+    "campaign": "Vnx.json"
   }
 ]

packages/external-rewards/src/campaigns/Vnx.json

@@ -0,0 +1,33 @@
+{
+  "campaignName": "VNX Points",
+  "platform": "VNX",
+  "description": "Points for providing liquidity.",
+  "platformImageId": "vnx.png",
+  "dashboardLink": "https://vnx.community/dashboard",
+  "pools": [
+    {
+      "id": "null",
+      "action": "lp",
+      "description": "null",
+      "campaignStart": "0",
+      "campaignEnd": "1770000000",
+      "address": "0xda73dc70d5ca3f51b0000c308abcd358b5f3fefe",
+      "network": "fraxtal",
+      "multiplier": "2x",
+      "tags": ["points"],
+      "lock": "false"
+    },
+    {
+      "id": "null",
+      "action": "lp",
+      "description": "null",
+      "campaignStart": "0",
+      "campaignEnd": "1770000000",
+      "address": "0x77146b0a1d08b6844376df6d9da99ba7f1b19e71",
+      "network": "fraxtal",
+      "multiplier": "2x",
+      "tags": ["points"],
+      "lock": "false"
+    }
+  ]
+}

packages/external-rewards/src/campaigns/index.ts

@@ -24,6 +24,7 @@ import MindNetwork from './MindNetwork.json'
 import DTrinity from './DTrinity.json'
 import YieldFi from './YieldFi.json'
 import Babylon from './Babylon.json'
+import Vnx from './Vnx.json'
 
 export {
   DLCLink,
@@ -52,4 +53,5 @@ export {
   DTrinity,
   YieldFi,
   Babylon,
+  Vnx,
 }

tests/cypress/e2e/all/header.cy.ts

@@ -67,7 +67,8 @@ describe('Header', () => {
 
     it('should change chains', () => {
       if (['loan', 'dao'].includes(Cypress.env('APP'))) {
-        cy.get(`[data-testid='btn-change-chain']`).should('not.exist')
+        cy.get(`[data-testid='btn-change-chain']`).click()
+        cy.get(`[data-testid='alert-eth-only']`).should('be.visible')
         cy.get("[data-testid='app-link-main']").invoke('attr', 'href').should('eq', `${mainAppUrl}/#/ethereum`)
         return
       }
@@ -128,7 +129,8 @@ describe('Header', () => {
 
     it('should change chains', () => {
       if (['loan', 'dao'].includes(Cypress.env('APP'))) {
-        cy.get(`[data-testid='btn-change-chain']`).should('not.exist')
+        cy.get(`[data-testid='btn-change-chain']`).click()
+        cy.get(`[data-testid='alert-eth-only']`).should('be.visible')
         cy.get(`[data-testid='menu-toggle']`).click()
         cy.get(`[data-testid='sidebar-item-pools']`)
           .invoke('attr', 'href')