diff --git a/apps/main/src/dex/components/MonadBannerAlert.tsx b/apps/main/src/dex/components/MonadBannerAlert.tsx index 2052a63fb3..bb069672ce 100644 --- a/apps/main/src/dex/components/MonadBannerAlert.tsx +++ b/apps/main/src/dex/components/MonadBannerAlert.tsx @@ -1,6 +1,6 @@ -import { Banner } from '@ui-kit/shared/ui/Banner' import { Stack } from '@mui/material' import { t } from '@ui-kit/lib/i18n' +import { Banner } from '@ui-kit/shared/ui/Banner' import { PoolUrlParams } from '../types/main.types' const MonadBannerAlert = ({ params }: { params: PoolUrlParams }) => { diff --git a/apps/main/src/dex/components/PagePool/index.tsx b/apps/main/src/dex/components/PagePool/index.tsx index b27745e184..2fb5ad3140 100644 --- a/apps/main/src/dex/components/PagePool/index.tsx +++ b/apps/main/src/dex/components/PagePool/index.tsx @@ -17,10 +17,10 @@ import usePoolAlert from '@/dex/hooks/usePoolAlert' import useTokensMapper from '@/dex/hooks/useTokensMapper' import { getUserPoolActiveKey } from '@/dex/store/createUserSlice' import useStore from '@/dex/store/useStore' +import type { PoolUrlParams } from '@/dex/types/main.types' import { getChainPoolIdActiveKey } from '@/dex/utils' import { getPath } from '@/dex/utils/utilsRouter' import { ManageGauge } from '@/dex/widgets/manage-gauge' -import type { PoolUrlParams } from '@/dex/types/main.types' import Stack from '@mui/material/Stack' import AlertBox from '@ui/AlertBox' import { AppFormContentWrapper } from '@ui/AppForm' diff --git a/packages/curve-ui-kit/src/hooks/useLocalStorage.ts b/packages/curve-ui-kit/src/hooks/useLocalStorage.ts index 6d1a057fbe..482b5b0c19 100644 --- a/packages/curve-ui-kit/src/hooks/useLocalStorage.ts +++ b/packages/curve-ui-kit/src/hooks/useLocalStorage.ts @@ -1,5 +1,5 @@ import lodash from 'lodash' -import { useMemo } from 'react' +import { useCallback, useMemo } from 'react' import type { Address } from '@curvefi/prices-api' import type { VisibilityVariants } from '@ui-kit/shared/ui/DataTable/visibility.types' import { defaultReleaseChannel, ReleaseChannel } from '@ui-kit/utils' @@ -7,9 +7,6 @@ import { type MigrationOptions, useStoredState } from './useStoredState' const { kebabCase } = lodash -// old keys that are not used anymore - clean them up -window.localStorage.removeItem('phishing-warning-dismissed') - function getFromLocalStorage(storageKey: string): T | null { if (typeof window === 'undefined') { return null @@ -72,3 +69,18 @@ export const useFavoriteMarkets = () => { const initialValue = useMemo(() => [], []) return useLocalStorage('favoriteMarkets', initialValue) } + +export const useDismissBanner = (bannerKey: string, expirationTime: number) => { + const [dismissedAt, setDismissedAt] = useLocalStorage(bannerKey, null) + + const shouldShowBanner = useMemo( + () => dismissedAt == null || Date.now() - dismissedAt >= expirationTime, // Show if dismissed more than the expiration time + [dismissedAt, expirationTime], + ) + + const dismissBanner = useCallback(() => { + setDismissedAt(Date.now()) + }, [setDismissedAt]) + + return { shouldShowBanner, dismissBanner } +} diff --git a/packages/curve-ui-kit/src/shared/ui/Banner.tsx b/packages/curve-ui-kit/src/shared/ui/Banner.tsx index 191e8fcb16..76275a8bf3 100644 --- a/packages/curve-ui-kit/src/shared/ui/Banner.tsx +++ b/packages/curve-ui-kit/src/shared/ui/Banner.tsx @@ -6,88 +6,80 @@ import Card from '@mui/material/Card' import IconButton from '@mui/material/IconButton' import LinkMui from '@mui/material/Link' import Stack from '@mui/material/Stack' -import Typography, { type TypographyProps } from '@mui/material/Typography' +import Typography from '@mui/material/Typography' import { t } from '@ui-kit/lib/i18n' import { ArrowTopRightIcon } from '@ui-kit/shared/icons/ArrowTopRightIcon' import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces' -import { ChangeTheme, InvertTheme } from './ThemeProvider' -type BannerSeverity = 'default' | 'highlight' | 'warning' | 'alert' +type BannerSeverity = 'info' | 'highlight' | 'warning' | 'alert' -const WrapperSx: Record> = { - default: { - border: (t) => `1px solid ${t.design.Layer.Highlight.Outline}`, - backgroundColor: (t) => t.design.Layer[1].Fill, +const BannerSx: Record; subtitle: SxProps; wrapper: SxProps }> = { + info: { + title: { color: (t) => t.design.Text.TextColors.FilledFeedback.Info.Primary }, + subtitle: { color: (t) => t.design.Text.TextColors.FilledFeedback.Info.Secondary }, + wrapper: { + border: (t) => `1px solid ${t.design.Layer.Highlight.Outline}`, + backgroundColor: (t) => t.design.Layer[1].Fill, + }, + }, + alert: { + title: { color: (t) => t.design.Text.TextColors.FilledFeedback.Alert.Primary }, + subtitle: { color: (t) => t.design.Text.TextColors.FilledFeedback.Alert.Secondary }, + wrapper: { backgroundColor: (t) => t.design.Layer.Feedback.Error }, + }, + warning: { + title: { color: (t) => t.design.Text.TextColors.FilledFeedback.Warning.Primary }, + subtitle: { color: (t) => t.design.Text.TextColors.FilledFeedback.Warning.Secondary }, + wrapper: { backgroundColor: (t) => t.design.Layer.Feedback.Warning }, }, highlight: { - border: (t) => `1px solid ${t.design.Layer.Highlight.Outline}`, - backgroundColor: (t) => t.design.Color.Primary[800], + title: { color: (t) => t.design.Text.TextColors.FilledFeedback.Highlight.Primary }, + subtitle: { color: (t) => t.design.Text.TextColors.FilledFeedback.Highlight.Secondary }, + wrapper: { backgroundColor: (t) => t.design.Layer.Feedback.Info }, }, - alert: { backgroundColor: (t) => t.design.Layer.Feedback.Error }, - warning: { backgroundColor: (t) => t.design.Layer.Feedback.Warning }, } -const TitleColor: Record = { - default: 'textHighlight', - alert: 'textPrimary', - warning: 'textPrimary', - highlight: 'textPrimary', -} +const { MaxWidth, Spacing } = SizesAndSpaces -const TitleInverted: Record = { - default: false, - alert: true, - warning: false, - highlight: true, +export type BannerProps = { + onClick?: () => void + buttonText?: string + children: ReactNode + severity?: BannerSeverity + learnMoreUrl?: string + subtitle?: ReactNode + testId?: string } -const { MaxWidth, Spacing } = SizesAndSpaces - /** * Banner message component used to display important information with different severity levels. - * This is not complete yet: it doesn't support a subtitle or a close button from the design system. */ export const Banner = ({ onClick, buttonText, children, - severity = 'default', + severity = 'info', learnMoreUrl, - color, -}: { - onClick?: () => void - buttonText?: string - children: ReactNode - severity?: BannerSeverity - learnMoreUrl?: string - color?: TypographyProps['color'] -}) => ( + subtitle, + testId, +}: BannerProps) => ( - - - + + + {children} - - - {/* fixme: currently using light theme on dark theme */} - + {learnMoreUrl && (