Merge pull request #1741 from curvefi/pool-alert-banner

feat: Pool alert banner

Author: 0xPearce

apps/main/src/dex/components/MonadBannerAlert.tsx

@@ -21,6 +21,7 @@ import useStore from '@/dex/store/useStore'
 import { getChainPoolIdActiveKey } from '@/dex/utils'
 import { getPath } from '@/dex/utils/utilsRouter'
 import { ManageGauge } from '@/dex/widgets/manage-gauge'
+import { notFalsy } from '@curvefi/prices-api/objects.util'
 import Stack from '@mui/material/Stack'
 import AlertBox from '@ui/AlertBox'
 import { AppFormContentWrapper } from '@ui/AppForm'
@@ -45,7 +46,7 @@ import { t } from '@ui-kit/lib/i18n'
 import { REFRESH_INTERVAL } from '@ui-kit/lib/model'
 import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-import MonadBannerAlert from '../MonadBannerAlert'
+import { PoolAlertBanner } from '../PoolAlertBanner'
 
 const DEFAULT_SEED: Seed = { isSeed: null, loaded: false }
 const { MaxWidth } = SizesAndSpaces
@@ -204,10 +205,15 @@ const Transfer = (pageTransferProps: PageTransferProps) => {
       </StyledExternalLink>
     </AppPageFormTitleWrapper>
   )
-
   return (
     <>
-      <MonadBannerAlert chainId={rChainId} poolIdOrAddress={rPoolIdOrAddress} />
+      {poolAlert?.banner && (
+        <PoolAlertBanner
+          alertType={poolAlert.alertType}
+          banner={poolAlert.banner}
+          poolAlertBannerKey={notFalsy('pool-alert-banner-dismissed', params.network, params.poolIdOrAddress).join('-')}
+        />
+      )}
       <AppPageFormContainer isAdvanceMode={true}>
         <AppPageFormsWrapper className="grid-transfer">
           <Stack

apps/main/src/dex/components/PagePool/index.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from 'react'
+import { createPortal } from 'react-dom'
+import { useIsDesktop } from '@ui-kit/hooks/useBreakpoints'
+import { useDismissBanner } from '@ui-kit/hooks/useLocalStorage'
+import { Banner, BannerProps } from '@ui-kit/shared/ui/Banner'
+import { AlertType, PoolAlert } from '../types/main.types'
+
+const ONE_DAY_MS = 24 * 60 * 60 * 1000 // 24 hours in milliseconds
+
+/** Maps AlertType to BannerSeverity  */
+const alertTypeToBannerSeverity: Record<AlertType, BannerProps['severity']> = {
+  error: 'alert',
+  danger: 'alert',
+  warning: 'warning',
+  info: 'info',
+  '': 'info',
+}
+
+export const PoolAlertBanner = ({
+  banner,
+  poolAlertBannerKey,
+  alertType,
+}: {
+  banner: NonNullable<PoolAlert['banner']>
+  poolAlertBannerKey: string
+  alertType: AlertType
+}) => {
+  const { shouldShowBanner, dismissBanner } = useDismissBanner(poolAlertBannerKey, ONE_DAY_MS)
+  const isDesktop = useIsDesktop()
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- isDesktop triggers re-query when header changes (desktop ↔ mobile)
+  const portalTarget = useMemo(() => document.getElementsByTagName('header')[0], [isDesktop])
+  const severity = alertTypeToBannerSeverity[alertType]
+
+  return (
+    shouldShowBanner &&
+    portalTarget &&
+    createPortal(
+      <Banner subtitle={banner.subtitle} severity={severity} onClick={dismissBanner} learnMoreUrl={banner.learnMoreUrl}>
+        {banner.title}
+      </Banner>,
+      portalTarget,
+    )
+  )
+}

apps/main/src/dex/components/PoolAlertBanner.tsx

@@ -0,0 +1,49 @@
+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'
+import { RouterLink } from '@ui-kit/shared/ui/RouterLink'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { Spacing } = SizesAndSpaces
+
+export const PoolAlertMessage = ({ children }: { children: React.ReactNode }) => (
+  <Stack
+    alignItems="flex-start"
+    spacing={Spacing.sm}
+    sx={{
+      '& a': {
+        wordBreak: 'break-word',
+      },
+    }}
+  >
+    {children}
+  </Stack>
+)
+
+export const ExternalLink = ({ href, children }: { href: string; children: React.ReactNode }) => (
+  <Button
+    color="ghost"
+    size="extraSmall"
+    component={Link}
+    sx={{ color: 'currentColor', textUnderlineOffset: '2px', '&:hover': { textDecoration: 'underline' } }}
+    endIcon={<ArrowTopRightIcon fontSize={'small'} />}
+    href={href}
+    target="_blank"
+    rel="noreferrer noopener"
+  >
+    {children}
+  </Button>
+)
+
+export const InternalLink = ({ href, children }: { href: string; children: React.ReactNode }) => (
+  <Button
+    color="ghost"
+    size="extraSmall"
+    component={RouterLink}
+    href={href}
+    sx={{ color: 'currentColor', textUnderlineOffset: '2px', '&:hover': { textDecoration: 'underline' } }}
+  >
+    {children}
+  </Button>
+)