fix: leftover review comments #575

curvefi · Jan 8, 2025 · 18a22a8 · 18a22a8
1 parent 901e3f8
commit 18a22a8
Show file tree

Hide file tree

Showing 17 changed files with 72 additions and 82 deletions.
diff --git a/apps/lend/src/globalStyle.ts b/apps/lend/src/globalStyle.ts
@@ -1,5 +1,4 @@
 import { createGlobalStyle } from 'styled-components'
-import { CURVE_ASSETS_URL } from '@/ui/utils'
 
 const GlobalStyle = createGlobalStyle`
   /* || GENERAL STYLES */
@@ -17,11 +16,6 @@ const GlobalStyle = createGlobalStyle`
 
     color: var(--page--text-color);
     background-color: var(--page--background-color);
-    /* background-image: url(${CURVE_ASSETS_URL + '/branding/curve-app-header.webp'});
-    background-size: auto 400px;
-    background-repeat: repeat-x;
-    background-attachment: fixed; */
-    //background-position-y: var(--header-height);
     
     &.scrollSmooth {
       scroll-behavior: smooth;

diff --git a/apps/lend/src/pages/_document.tsx b/apps/lend/src/pages/_document.tsx
@@ -1,6 +1,7 @@
-import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 import { RootCssProperties } from '@ui-kit/themes/typography'
+import { CURVE_LOGO_URL } from '@/ui/utils/utilsConstants'
 
 const injectIpfsPrefix = `
 (function () {
@@ -65,7 +66,7 @@ export default class CurveDocument extends Document {
             property="og:description"
             content="Curve-frontend is a user interface application designed to connect to Curve's deployment of smart contracts."
           />
-          <meta property="og:image" content="https://cdn.jsdelivr.net/gh/curvefi/curve-assets/branding/logo.png" />
+          <meta property="og:image" content={CURVE_LOGO_URL} />
 
           {/* Twitter */}
           <meta property="twitter:card" content="summary" />
@@ -75,7 +76,7 @@ export default class CurveDocument extends Document {
             property="twitter:description"
             content="Curve-frontend is a user interface application designed to connect to Curve's deployment of smart contracts."
           />
-          <meta property="twitter:image" content="https://cdn.jsdelivr.net/gh/curvefi/curve-assets/branding/logo.png" />
+          <meta property="twitter:image" content={CURVE_LOGO_URL} />
 
           <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

diff --git a/apps/loan/src/components/PageLlamaMarkets/LendingMarketsFilters.tsx b/apps/loan/src/components/PageLlamaMarkets/LendingMarketsFilters.tsx
@@ -42,7 +42,7 @@ export const LendingMarketsFilters = ({
   setColumnFilter: (id: string, value: unknown) => void
   data: LendingVault[]
 }) => (
-  <Grid container spacing={Spacing.md} paddingBlock={Spacing.sm}>
+  <Grid container spacing={Spacing.sm}>
     <Grid size={{ mobile: 12, tablet: 4 }}>
       <MultiSelectFilter
         field="blockchainId"

diff --git a/apps/loan/src/components/PageLlamaMarkets/filters/MinimumSliderFilter.tsx b/apps/loan/src/components/PageLlamaMarkets/filters/MinimumSliderFilter.tsx
@@ -52,7 +52,7 @@ export const MinimumSliderFilter = <T extends unknown>({
       )}
       value="" // we actually don't use the value of the select, but it needs to be set to avoid a warning
     >
-      <Stack paddingBlock={3} paddingInline={4} direction="row" spacing={6}>
+      <Stack paddingBlock={3} paddingInline={4} direction="row" spacing={6} alignItems="center">
         <Typography>{format(0)}</Typography>
         <Slider
           data-testid={`slider-${id}`}

diff --git a/apps/loan/src/globalStyle.ts b/apps/loan/src/globalStyle.ts
@@ -1,5 +1,4 @@
 import { createGlobalStyle } from 'styled-components'
-import { CURVE_ASSETS_URL } from '@/ui/utils'
 
 const GlobalStyle = createGlobalStyle`
   /* || GENERAL STYLES */
@@ -17,11 +16,6 @@ const GlobalStyle = createGlobalStyle`
 
     color: var(--page--text-color);
     background-color: var(--page--background-color);
-    /* background-image: url(${CURVE_ASSETS_URL + '/branding/curve-app-header.webp'}); */
-    /* background-size: auto 400px;
-    background-repeat: repeat-x;
-    background-attachment: fixed; */
-    //background-position-y: var(--header-height);
     
     &.scrollSmooth {
       scroll-behavior: smooth;

diff --git a/apps/loan/src/pages/_document.tsx b/apps/loan/src/pages/_document.tsx
@@ -1,6 +1,7 @@
-import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 import { RootCssProperties } from '@ui-kit/themes/typography'
+import { CURVE_LOGO_URL } from '@/ui/utils'
 
 const injectIpfsPrefix = `
 (function () {
@@ -65,7 +66,7 @@ export default class CurveDocument extends Document {
             property="og:description"
             content="Curve-frontend is a user interface application designed to connect to Curve's deployment of smart contracts."
           />
-          <meta property="og:image" content="https://cdn.jsdelivr.net/gh/curvefi/curve-assets/branding/logo.png" />
+          <meta property="og:image" content={CURVE_LOGO_URL} />
 
           {/* Twitter */}
           <meta property="twitter:card" content="summary" />
@@ -75,7 +76,7 @@ export default class CurveDocument extends Document {
             property="twitter:description"
             content="Curve-frontend is a user interface application designed to connect to Curve's deployment of smart contracts."
           />
-          <meta property="twitter:image" content="https://cdn.jsdelivr.net/gh/curvefi/curve-assets/branding/logo.png" />
+          <meta property="twitter:image" content={CURVE_LOGO_URL} />
 
           <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

diff --git a/apps/main/src/globalStyle.ts b/apps/main/src/globalStyle.ts
@@ -1,5 +1,4 @@
 import { createGlobalStyle } from 'styled-components'
-import { CURVE_ASSETS_URL } from '@/ui/utils'
 
 const GlobalStyle = createGlobalStyle`
   /* || GENERAL STYLES */

diff --git a/apps/main/src/pages/_document.tsx b/apps/main/src/pages/_document.tsx
@@ -1,6 +1,7 @@
-import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 import { RootCssProperties } from '@ui-kit/themes/typography'
+import { CURVE_LOGO_URL } from '@/ui/utils'
 
 const injectIpfsPrefix = `
 (function () {
@@ -65,7 +66,7 @@ export default class CurveDocument extends Document {
             property="og:description"
             content="Curve-frontend is a user interface application designed to connect to Curve's deployment of smart contracts."
           />
-          <meta property="og:image" content="https://cdn.jsdelivr.net/gh/curvefi/curve-assets/branding/logo.png" />
+          <meta property="og:image" content={CURVE_LOGO_URL} />
 
           {/* Twitter */}
           <meta property="twitter:card" content="summary" />
@@ -75,7 +76,7 @@ export default class CurveDocument extends Document {
             property="twitter:description"
             content="Curve-frontend is a user interface application designed to connect to Curve's deployment of smart contracts."
           />
-          <meta property="twitter:image" content="https://cdn.jsdelivr.net/gh/curvefi/curve-assets/branding/logo.png" />
+          <meta property="twitter:image" content={CURVE_LOGO_URL} />
 
           <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

diff --git a/packages/curve-ui-kit/src/shared/icons/ChainIcon.tsx b/packages/curve-ui-kit/src/shared/icons/ChainIcon.tsx
@@ -1,4 +1,4 @@
-import { CURVE_ASSETS_URL } from 'ui'
+import { getBlockchainIconUrl } from 'ui'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import { styled } from '@mui/material/styles'
 import Image from 'next/image'
@@ -15,7 +15,7 @@ export const ChainIcon = ({ blockchainId, size }: { blockchainId: string; size:
       data-testid={`chain-icon-${blockchainId}`}
       alt={blockchainId}
       // onError={(evt) => (evt.target as HTMLImageElement).src = src}
-      src={`${CURVE_ASSETS_URL}/chains/${blockchainId}.png`}
+      src={getBlockchainIconUrl(blockchainId)}
       loading="lazy"
       width={defaultSize}
       height={defaultSize}

diff --git a/packages/curve-ui-kit/src/shared/ui/TableFilters.tsx b/packages/curve-ui-kit/src/shared/ui/TableFilters.tsx
@@ -6,7 +6,7 @@ import { ReloadIcon } from '../icons/ReloadIcon'
 import { FilterIcon } from '../icons/FilterIcon'
 import Button from '@mui/material/Button'
 import Link from '@mui/material/Link'
-import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
 import Collapse from '@mui/material/Collapse'
 import { forwardRef, ReactNode, useCallback, useRef, useState } from 'react'
 import { useLocalStorage } from '@ui-kit/hooks/useLocalStorage'
@@ -76,7 +76,7 @@ export const TableFilters = ({
   const [visibilitySettingsOpen, openVisibilitySettings, closeVisibilitySettings] = useSwitch()
   const settingsRef = useRef<HTMLButtonElement>(null)
   return (
-    <Box sx={{ paddingBlock: Spacing.sm, paddingInline: Spacing.md, backgroundColor: (t) => t.design.Layer[1].Fill }}>
+    <Stack sx={{ paddingBlock: Spacing.sm, paddingInline: Spacing.md, backgroundColor: (t) => t.design.Layer[1].Fill }}>
       <Grid container spacing={Column_Spacing}>
         <Grid size={{ tablet: 6, mobile: 12 }}>
           <Typography variant="headingSBold">{title}</Typography>
@@ -112,7 +112,7 @@ export const TableFilters = ({
           onClose={closeVisibilitySettings}
         />
       )}
-    </Box>
+    </Stack>
   )
 }
 

diff --git a/packages/curve-ui-kit/src/themes/components.ts b/packages/curve-ui-kit/src/themes/components.ts
@@ -8,7 +8,8 @@ import { defineMuiSwitch } from './mui-switch'
 import { basicMuiTheme } from './basic-theme'
 import { alpha } from '@mui/system'
 import type { TypographyOptions } from '@mui/material/styles/createTypography'
-import { definedMuiMenuItem } from '@ui-kit/themes/mui-menu-item'
+import { defineMuiMenuItem } from '@ui-kit/themes/mui-menu-item'
+import { TransitionFunction } from '@ui-kit/themes/design/0_primitives'
 
 export const DEFAULT_BAR_SIZE = SizesAndSpaces.ButtonSize.sm
 export const MOBILE_SIDEBAR_WIDTH = { width: '100%', minWidth: 320 } as const
@@ -67,6 +68,7 @@ export const createComponents = (design: DesignSystem, typography: TypographyOpt
         },
         '& .MuiOutlinedInput-notchedOutline': {
           borderWidth: 1,
+          transition: `border-color ${TransitionFunction}`,
         },
         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
           borderColor: design.Inputs.Base.Default.Border.Active,
@@ -84,7 +86,7 @@ export const createComponents = (design: DesignSystem, typography: TypographyOpt
       },
     },
   },
-  MuiMenuItem: definedMuiMenuItem(design),
+  MuiMenuItem: defineMuiMenuItem(design),
   MuiSlider: {
     styleOverrides: {
       thumb: {
@@ -150,6 +152,10 @@ export const createComponents = (design: DesignSystem, typography: TypographyOpt
     },
   },
   MuiPopover: {
+    defaultProps: {
+      marginThreshold: 8, // allows the popover to be closer to the edge of the screen. Default is 16px
+      elevation: 3,
+    },
     styleOverrides: {
       paper: {
         backgroundColor: design.Layer[3].Fill,

diff --git a/packages/curve-ui-kit/src/themes/mui-menu-item.ts b/packages/curve-ui-kit/src/themes/mui-menu-item.ts
@@ -5,7 +5,7 @@ import { handleBreakpoints } from '@ui-kit/themes/basic-theme'
 
 const { ButtonSize, Spacing } = SizesAndSpaces
 
-export const definedMuiMenuItem = (design: DesignSystem): Components['MuiMenuItem'] => ({
+export const defineMuiMenuItem = (design: DesignSystem): Components['MuiMenuItem'] => ({
   styleOverrides: {
     root: handleBreakpoints({
       height: ButtonSize.md,

diff --git a/packages/ui/src/ConnectWalletPrompt/index.tsx b/packages/ui/src/ConnectWalletPrompt/index.tsx
@@ -5,6 +5,7 @@ import Button from '@mui/material/Button'
 import Spinner from '../Spinner'
 
 import { LogoImg } from '../images'
+import { getBackgroundUrl } from '@/utils'
 
 type ConnectWalletPromptProps = {
   connectWallet: () => void
@@ -23,11 +24,7 @@ const ConnectWalletPrompt: React.FC<ConnectWalletPromptProps> = ({
   loadingText,
   theme = 'light',
 }) => {
-  const BackgroundSvg =
-    theme === 'light'
-      ? 'https://cdn.jsdelivr.net/gh/curvefi/curve-assets/branding/curve_illustration-light.svg'
-      : 'https://cdn.jsdelivr.net/gh/curvefi/curve-assets/branding/curve_illustration-dark.svg'
-
+  const BackgroundSvg = getBackgroundUrl(theme)
   return (
     <Wrapper>
       <ImageWrapper>

diff --git a/packages/ui/src/Error404/index.tsx b/packages/ui/src/Error404/index.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components'
 
-import { CURVE_ASSETS_URL } from 'ui/src/utils'
 import { breakpoints } from 'ui/src/utils/responsive'
 import Box from 'ui/src/Box'
 import Image from 'next/image'
+import { NOT_FOUND_IMAGE_URL } from '@/utils'
 
 export function Error404() {
   return (
     <Container variant="secondary">
-      <Image src={`${CURVE_ASSETS_URL}/branding/four-oh-llama.jpg`} alt="404" layout="fill" />
+      <Image src={NOT_FOUND_IMAGE_URL} alt="404" layout="fill" />
       <Title>404</Title>
       <Description>Page not found</Description>
     </Container>

diff --git a/packages/ui/src/utils/utilsConstants.ts b/packages/ui/src/utils/utilsConstants.ts
@@ -1,4 +1,13 @@
-export const CURVE_ASSETS_URL = 'https://cdn.jsdelivr.net/gh/curvefi/curve-assets'
+export const CDN_ROOT_URL = 'https://cdn.jsdelivr.net'
+export const CURVE_CDN_URL = `${CDN_ROOT_URL}/gh/curvefi`
+export const CURVE_ASSETS_URL = `${CURVE_CDN_URL}/curve-assets`
+export const CURVE_LOGO_URL = `${CURVE_ASSETS_URL}/branding/logo.png`
+export const NOT_FOUND_IMAGE_URL = `${CURVE_ASSETS_URL}/branding/four-oh-llama.jpg`
 
 export const getImageBaseUrl = (blockchainId: string) =>
   `${CURVE_ASSETS_URL}/images/assets${blockchainId == 'ethereum' ? '' : `-${blockchainId}`}/`
+
+export const getBlockchainIconUrl = (blockchainId: string) => `${CURVE_ASSETS_URL}/chains/${blockchainId}.png`
+
+export const getBackgroundUrl = (theme: 'light' | 'dark') =>
+  `${CURVE_ASSETS_URL}/curve_illustration-${theme === 'light' ? 'light' : 'dark'}.svg`
diff --git a/packages/ui/src/utils/utilsNetworks.ts b/packages/ui/src/utils/utilsNetworks.ts
@@ -1,5 +1,6 @@
 import { Chain } from 'curve-ui-kit/src/utils'
 import { ethers } from 'ethers'
+import { CDN_ROOT_URL, CURVE_ASSETS_URL, CURVE_CDN_URL, getImageBaseUrl } from '@/utils/utilsConstants'
 
 const NETWORK_BASE_CONFIG_DEFAULT = {
   blocknativeSupport: true,
@@ -9,15 +10,15 @@ const NETWORK_BASE_CONFIG_DEFAULT = {
   gasPricesUrl: '',
   gasPricesDefault: 0,
   integrations: {
-    imageBaseurl: 'https://cdn.jsdelivr.net/gh/curvefi/curve-assets/platforms',
-    listUrl: 'https://cdn.jsdelivr.net/gh/curvefi/curve-external-integrations/integrations-list.json',
-    tagsUrl: 'https://cdn.jsdelivr.net/gh/curvefi/curve-external-integrations/integrations-tags.json',
+    imageBaseurl: `${CURVE_ASSETS_URL}/platforms`,
+    listUrl: `${CURVE_CDN_URL}/curve-external-integrations/integrations-list.json`,
+    tagsUrl: `${CURVE_CDN_URL}/curve-external-integrations/integrations-tags.json`,
   },
   rewards: {
-    baseUrl: 'https://cdn.jsdelivr.net',
-    imageBaseUrl: 'https://cdn.jsdelivr.net/gh/curvefi/curve-assets/platforms',
-    campaignsUrl: 'https://cdn.jsdelivr.net/gh/curvefi/curve-external-reward@latest/campaign-list.json',
-    tagsUrl: 'https://cdn.jsdelivr.net/gh/curvefi/curve-external-reward@latest/reward-tags.json',
+    baseUrl: CDN_ROOT_URL,
+    imageBaseUrl: `${CURVE_ASSETS_URL}/platforms`,
+    campaignsUrl: `${CURVE_CDN_URL}/curve-external-reward@latest/campaign-list.json`,
+    tagsUrl: `${CURVE_CDN_URL}/curve-external-reward@latest/reward-tags.json`,
   },
   orgUIPath: '',
 }
@@ -203,10 +204,7 @@ export function getBaseNetworksConfig(chainId: number, networkConfig: any): Base
     id: id, // TODO: remove id or networkId
     networkId: id,
     hex: ethers.toQuantity(chainId),
-    imageBaseUrl:
-      id === 'ethereum'
-        ? `https://cdn.jsdelivr.net/gh/curvefi/curve-assets/images/assets/`
-        : `https://cdn.jsdelivr.net/gh/curvefi/curve-assets/images/assets-${id}/`,
+    imageBaseUrl: getImageBaseUrl(id),
     logoSrc: `https://cdn.jsdelivr.net/gh/curvefi/curve-assets/chains/${id}.png`,
     logoSrcDark: `https://cdn.jsdelivr.net/gh/curvefi/curve-assets/chains/${id}-dark.png`,
     rpcUrl,

diff --git a/tests/cypress/e2e/loan/llamalend-markets.cy.ts b/tests/cypress/e2e/loan/llamalend-markets.cy.ts
@@ -48,22 +48,19 @@ describe('LlamaLend Markets', () => {
     })
   })
 
-  const sliderTestCase = oneOf(
-    {
-      title: 'liquidity',
-      columnId: 'totalSupplied_usdTotal',
-      expectedFilterText: 'Min Liquidity: $1,029,000',
-      expectedFirstCell: '$2.06M',
-    },
-    {
-      title: 'utilization',
-      columnId: 'utilizationPercent',
-      expectedFilterText: 'Min Utilization: 50.00%',
-      expectedFirstCell: '84.91%',
-    },
-  )
-  it(`should allow filtering by ${sliderTestCase.title}`, () => {
-    const { columnId, expectedFilterText, expectedFirstCell } = sliderTestCase
+  it(`should allow filtering by using a slider`, () => {
+    const { columnId, expectedFilterText, expectedFirstCell } = oneOf(
+      {
+        columnId: 'totalSupplied_usdTotal',
+        expectedFilterText: 'Min Liquidity: $1,029,000',
+        expectedFirstCell: '$2.06M',
+      },
+      {
+        columnId: 'utilizationPercent',
+        expectedFilterText: 'Min Utilization: 50.00%',
+        expectedFirstCell: '84.91%',
+      },
+    )
     cy.viewport(1200, 800) // use fixed viewport to have consistent slider width
     cy.get(`[data-testid="minimum-slider-filter-${columnId}"]`).should('not.exist')
     cy.get(`[data-testid="btn-expand-filters"]`).click()
@@ -90,17 +87,17 @@ describe('LlamaLend Markets', () => {
     ;[chain, otherChain].forEach((c) => cy.get(`[data-testid="chain-icon-${c.toLowerCase()}"]`).should('be.visible'))
   })
 
-  const tokenTestCase = oneOf(
-    { title: 'collateral', iconIndex: 0, columnId: 'assets_collateral_symbol' },
-    { title: 'debt', iconIndex: 1, columnId: 'assets_borrowed_symbol' },
-  )
-  const tokenSelector = `[data-testid="data-table-cell-assets"]:first [data-testid^="token-icon-"]`
-  it(`should allow filtering by ${tokenTestCase.title} token`, () => {
-    const { columnId, iconIndex } = tokenTestCase
+  it(`should allow filtering by token`, () => {
+    const { columnId, iconIndex } = oneOf(
+      { iconIndex: 0, columnId: 'assets_collateral_symbol' },
+      { iconIndex: 1, columnId: 'assets_borrowed_symbol' },
+    )
     cy.get(`[data-testid="btn-expand-filters"]`).click()
     cy.get(`[data-testid="multi-select-filter-${columnId}"]`).click()
     cy.get(`#menu-${columnId} [data-value="CRV"]`).click()
-    cy.get(tokenSelector).eq(iconIndex).should('have.attr', 'data-testid', `token-icon-CRV`)
+    cy.get(`[data-testid="data-table-cell-assets"]:first [data-testid^="token-icon-"]`)
+      .eq(iconIndex)
+      .should('have.attr', 'data-testid', `token-icon-CRV`)
     cy.get(`#menu-${columnId} [data-value="crvUSD"]`).click()
     cy.get(`[data-testid="token-icon-crvUSD"]`).should('be.visible')
   })
@@ -113,11 +110,4 @@ describe('LlamaLend Markets', () => {
     cy.get(`[data-testid="visibility-toggle-${columnId}"]`).click()
     cy.get(headerSelector).should('not.exist')
   })
-
-  it('should toggle the collateral token', () => {
-    cy.get(tokenSelector).should('have.length', 2)
-    cy.get(`[data-testid="btn-visibility-settings"]`).click()
-    cy.get(`[data-testid="visibility-toggle-assets_collateral_symbol"]`).click()
-    cy.get(tokenSelector).should('have.length', 1)
-  })
 })