diff --git a/apps/lend/src/globalStyle.ts b/apps/lend/src/globalStyle.ts index a3fd60755..021fc2464 100644 --- 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 index f65b301ee..7c5869990 100644 --- 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." /> - + {/* Twitter */} @@ -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." /> - + diff --git a/apps/loan/src/components/PageLlamaMarkets/LendingMarketsFilters.tsx b/apps/loan/src/components/PageLlamaMarkets/LendingMarketsFilters.tsx index ca8a7c861..eb4f9072e 100644 --- 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[] }) => ( - + ({ )} value="" // we actually don't use the value of the select, but it needs to be set to avoid a warning > - + {format(0)} - + {/* Twitter */} @@ -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." /> - + diff --git a/apps/main/src/globalStyle.ts b/apps/main/src/globalStyle.ts index 8fb79fcf1..5f3d3420a 100644 --- 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 index f65b301ee..9811c7385 100644 --- 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." /> - + {/* Twitter */} @@ -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." /> - + diff --git a/packages/curve-ui-kit/src/shared/icons/ChainIcon.tsx b/packages/curve-ui-kit/src/shared/icons/ChainIcon.tsx index 18c502781..40c02f7a8 100644 --- 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 index 03ecf2df0..163cd90e9 100644 --- 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(null) return ( - t.design.Layer[1].Fill }}> + t.design.Layer[1].Fill }}> {title} @@ -112,7 +112,7 @@ export const TableFilters = ({ onClose={closeVisibilitySettings} /> )} - + ) } diff --git a/packages/curve-ui-kit/src/themes/components.ts b/packages/curve-ui-kit/src/themes/components.ts index c907a1cc0..8110f988b 100644 --- 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 index f81d9d58e..028c5af3e 100644 --- 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 index 1694fb684..7f463aa40 100644 --- 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 = ({ 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 ( diff --git a/packages/ui/src/Error404/index.tsx b/packages/ui/src/Error404/index.tsx index ade55876e..83dea499b 100644 --- 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 ( - 404 + 404 404 Page not found diff --git a/packages/ui/src/utils/utilsConstants.ts b/packages/ui/src/utils/utilsConstants.ts index 302eb179c..621770fd6 100644 --- 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 index 77b73b3b1..bfbfd9c10 100644 --- 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 index fc80c846b..cf8e868e4 100644 --- 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) - }) })