From 3add6a255b075b9aba5a2471d9f5ef0bdf431807 Mon Sep 17 00:00:00 2001 From: Pearce Date: Thu, 18 Dec 2025 21:06:19 +0100 Subject: [PATCH 1/5] feat: removed temporary slider thumb colors --- .../src/themes/components/slider/mui-slider.ts | 3 +-- .../curve-ui-kit/src/themes/components/slider/utils.ts | 8 -------- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/curve-ui-kit/src/themes/components/slider/mui-slider.ts b/packages/curve-ui-kit/src/themes/components/slider/mui-slider.ts index a6cd401077..73ab28b875 100644 --- a/packages/curve-ui-kit/src/themes/components/slider/mui-slider.ts +++ b/packages/curve-ui-kit/src/themes/components/slider/mui-slider.ts @@ -17,7 +17,6 @@ import { SLIDER_RAIL_GRADIENT_STOPS_VAR, getGradientStopsForBackground, DEFAULT_SLIDER_SIZE, - thumbColorsMap, } from './utils' /** * Generates styles for a pseudo-element that creates a border around the slider @@ -105,7 +104,7 @@ export const defineMuiSlider = (design: DesignSystem): Components['MuiSlider'] = // Add 2px to the thumb width and height to compensate the border width: size.width, height: size.height, - background: `${thumbColorsMap[design.theme]} url(${sliderThumbImage}) center no-repeat`, + background: `${design.Layer.Highlight.Fill} url(${sliderThumbImage}) center no-repeat`, transition: `background ${TransitionFunction}, border ${TransitionFunction}`, border: `1px solid ${design.Color.Neutral[25]}`, borderRadius: 0, diff --git a/packages/curve-ui-kit/src/themes/components/slider/utils.ts b/packages/curve-ui-kit/src/themes/components/slider/utils.ts index 1ce01ddcc1..daa8696e9b 100644 --- a/packages/curve-ui-kit/src/themes/components/slider/utils.ts +++ b/packages/curve-ui-kit/src/themes/components/slider/utils.ts @@ -1,7 +1,6 @@ import { sortBy } from 'lodash' import { SliderProps } from '@mui/material/Slider' import { DesignSystem } from '@ui-kit/themes/design' -import { Blues, Violets } from '@ui-kit/themes/design/0_primitives' import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces' import type { GradientStopsDefinition, @@ -202,10 +201,3 @@ export const createGradientStopsString = (stops: GradientStopsDefinition) => export const orientationToDirection = (orientation: SliderProps['orientation']): 'to right' | 'to top' => getOrientationConfig(orientation).gradientDirection - -// TODO: temporary fix for the "Layers.Highlight.Fill" color difference between codebase and Design -export const thumbColorsMap: Record = { - light: Blues[500], - dark: Blues[50], - chad: Violets[700], -} From abaa49d428f3532b41a22d5028328d12e5e26ae2 Mon Sep 17 00:00:00 2001 From: Pearce Date: Thu, 18 Dec 2025 21:23:28 +0100 Subject: [PATCH 2/5] refactor: replace Button with Link for external and internal links in PoolAlertMessage component --- .../dex/components/pool-alert-messages.tsx | 26 +++++++------------ .../curve-ui-kit/src/shared/ui/Banner.tsx | 2 +- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/apps/main/src/dex/components/pool-alert-messages.tsx b/apps/main/src/dex/components/pool-alert-messages.tsx index 667dfdeb69..6ffd4a7c6f 100644 --- a/apps/main/src/dex/components/pool-alert-messages.tsx +++ b/apps/main/src/dex/components/pool-alert-messages.tsx @@ -1,4 +1,3 @@ -import Button from '@mui/material/Button' import Link from '@mui/material/Link' import Stack from '@mui/material/Stack' import { ArrowTopRightIcon } from '@ui-kit/shared/icons/ArrowTopRightIcon' @@ -22,28 +21,21 @@ export const PoolAlertMessage = ({ children }: { children: React.ReactNode }) => ) export const ExternalLink = ({ href, children }: { href: string; children: React.ReactNode }) => ( - + {children} + ) export const InternalLink = ({ href, children }: { href: string; children: React.ReactNode }) => ( - + ) diff --git a/packages/curve-ui-kit/src/shared/ui/Banner.tsx b/packages/curve-ui-kit/src/shared/ui/Banner.tsx index d7a6cc3378..aee50e6f71 100644 --- a/packages/curve-ui-kit/src/shared/ui/Banner.tsx +++ b/packages/curve-ui-kit/src/shared/ui/Banner.tsx @@ -19,7 +19,7 @@ const { MaxWidth, Spacing, IconSize } = SizesAndSpaces type BannerSeverity = 'info' | 'highlight' | 'warning' | 'alert' type BannerIcons = BannerSeverity | 'llama' -// TODO: use Secondary color for subtitle instead of Primary +// TODO: temporary fix: used secondary color for subtitle instead of primary const BannerSx: Record; subtitle: SxProps; wrapper: SxProps }> = { info: { title: { color: (t) => t.design.Text.TextColors.FilledFeedback.Info.Primary }, From f421d29c3a5453e69c097ebbf280f81fb4ff30fe Mon Sep 17 00:00:00 2001 From: Pearce Date: Fri, 19 Dec 2025 14:42:47 +0100 Subject: [PATCH 3/5] feat: Inline link with text for external and internal links --- .../curve-ui-kit/src/shared/ui/InlineLink.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 packages/curve-ui-kit/src/shared/ui/InlineLink.tsx diff --git a/packages/curve-ui-kit/src/shared/ui/InlineLink.tsx b/packages/curve-ui-kit/src/shared/ui/InlineLink.tsx new file mode 100644 index 0000000000..1efaeabfec --- /dev/null +++ b/packages/curve-ui-kit/src/shared/ui/InlineLink.tsx @@ -0,0 +1,22 @@ +import Link from '@mui/material/Link' +import { Link as TanstackLink } from '@tanstack/react-router' +import { ArrowTopRightIcon } from '../icons/ArrowTopRightIcon' + +/** + * InlineLink component is a link that is displayed inline with text. + * Using either Tanstack Link for internal links or MUI Link for external links (with arrow icon). + */ +export const InlineLink = ({ href, children }: { href: string; children: React.ReactNode }) => { + const isExternal = href.startsWith('http') + return ( + + {children} + {isExternal && } + + ) +} From dff0c692d0a90fc3a5640d39c004634dad5b3a3b Mon Sep 17 00:00:00 2001 From: Pearce Date: Fri, 19 Dec 2025 14:43:11 +0100 Subject: [PATCH 4/5] refactor: usePoolAlert messages with InlineLink --- .../dex/components/pool-alert-messages.tsx | 23 ------------------- apps/main/src/dex/hooks/usePoolAlert.tsx | 15 ++++++------ 2 files changed, 8 insertions(+), 30 deletions(-) diff --git a/apps/main/src/dex/components/pool-alert-messages.tsx b/apps/main/src/dex/components/pool-alert-messages.tsx index 6ffd4a7c6f..89d760bca5 100644 --- a/apps/main/src/dex/components/pool-alert-messages.tsx +++ b/apps/main/src/dex/components/pool-alert-messages.tsx @@ -1,7 +1,4 @@ -import Link from '@mui/material/Link' import Stack from '@mui/material/Stack' -import { ArrowTopRightIcon } from '@ui-kit/shared/icons/ArrowTopRightIcon' -import { RouterLink } from '@ui-kit/shared/ui/RouterLink' import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces' const { Spacing } = SizesAndSpaces @@ -19,23 +16,3 @@ export const PoolAlertMessage = ({ children }: { children: React.ReactNode }) => {children} ) - -export const ExternalLink = ({ href, children }: { href: string; children: React.ReactNode }) => ( - - {children} - -) - -export const InternalLink = ({ href, children }: { href: string; children: React.ReactNode }) => ( - - {children} - -) diff --git a/apps/main/src/dex/hooks/usePoolAlert.tsx b/apps/main/src/dex/hooks/usePoolAlert.tsx index 8f3953e5f3..28bea8fbda 100644 --- a/apps/main/src/dex/hooks/usePoolAlert.tsx +++ b/apps/main/src/dex/hooks/usePoolAlert.tsx @@ -4,7 +4,8 @@ import { PoolAlert, PoolData, PoolDataCache, type UrlParams } from '@/dex/types/ import { useParams } from '@ui-kit/hooks/router' import { t, Trans } from '@ui-kit/lib/i18n' import { getInternalUrl } from '@ui-kit/shared/routes' -import { ExternalLink, InternalLink, PoolAlertMessage } from '../components/pool-alert-messages' +import { InlineLink } from '@ui-kit/shared/ui/InlineLink' +import { PoolAlertMessage } from '../components/pool-alert-messages' const usePoolAlert = (poolData?: PoolData | PoolDataCache) => { const params = useParams() @@ -69,7 +70,7 @@ const usePoolAlert = (poolData?: PoolData | PoolDataCache) => { subtitle: ( This pool has been deprecated. Please use the{' '} - PRISMA/yPRISMA pool instead. + PRISMA/yPRISMA pool instead. ), }, @@ -91,16 +92,16 @@ const usePoolAlert = (poolData?: PoolData | PoolDataCache) => { Please note that exchanges on synthetix synths are expected to be disabled and users can either withdraw liquidity from the underlying token, or redeem their synths to sUSD on{' '} - synthetix.io + synthetix.io

Users are encouraged to exit the pools in order to avoid getting their holdings‘ value diluted with the discountRate For more information please refer to{' '} - + gov.curve.finance - +

@@ -160,7 +161,7 @@ const usePoolAlert = (poolData?: PoolData | PoolDataCache) => {

- Deposit on yieldbasis.com + Deposit on yieldbasis.com

@@ -193,7 +194,7 @@ const usePoolAlert = (poolData?: PoolData | PoolDataCache) => {

Deposit and Swap with wBTC.e will return an error due to an Aave community decision to freeze this asset.{' '} - More details + More details

From fe0cd8f70d763fd7d4c506c80a2bb39ed1ae3af8 Mon Sep 17 00:00:00 2001 From: Pearce Date: Fri, 19 Dec 2025 16:31:59 +0100 Subject: [PATCH 5/5] refactor: minor InlineLInk optimizations --- packages/curve-ui-kit/src/shared/ui/InlineLink.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/curve-ui-kit/src/shared/ui/InlineLink.tsx b/packages/curve-ui-kit/src/shared/ui/InlineLink.tsx index 1efaeabfec..c38b5187cf 100644 --- a/packages/curve-ui-kit/src/shared/ui/InlineLink.tsx +++ b/packages/curve-ui-kit/src/shared/ui/InlineLink.tsx @@ -10,13 +10,12 @@ export const InlineLink = ({ href, children }: { href: string; children: React.R const isExternal = href.startsWith('http') return ( {children} - {isExternal && } + {isExternal && } ) }