diff --git a/packages/uiweb/src/lib/components/notification/index.tsx b/packages/uiweb/src/lib/components/notification/index.tsx index 02a010ef0..a8751c65e 100644 --- a/packages/uiweb/src/lib/components/notification/index.tsx +++ b/packages/uiweb/src/lib/components/notification/index.tsx @@ -3,19 +3,19 @@ import * as React from 'react'; import styled, { css } from 'styled-components'; import { MediaHelper, convertTimeStamp, extractTimeStamp } from '../../utilities'; -import IPFSIcon from '../ipfsicon'; import Loader from '../loader/loader'; import ImageOverlayComponent from '../overlay'; import { ParseMarkdownText } from '../parsetext'; import chainDetails from './chainDetails'; import { DecryptButton, useDecrypt } from './decrypt'; -import ActionButton from './styled/ActionButton'; import { useDivOffsetWidth } from '../../hooks'; import { LinkIcon } from '../../icons/Link'; import type { INotificationItemTheme } from './theme'; import { getCustomTheme } from './theme'; +import { Button } from '../reusables'; +import { CloseIcon } from '../../icons/Close'; export { baseTheme as notificationBaseTheme, darkTheme as notificationDarkTheme, @@ -54,10 +54,12 @@ export type NotificationItemProps = { notificationBody: string | undefined; cta: string | undefined; app: string | undefined; + isToast?: boolean; icon: string | undefined; image: string | undefined; url: string | undefined; isSpam?: boolean; + onClose?: () => void; subscribeFn?: () => Promise; isSubscribedFn?: () => Promise; theme?: string | undefined; @@ -79,6 +81,10 @@ type OffsetWidthType = { offsetWidth: number; }; +type FontSizeType = { + fontSize: string; +}; + type CustomThemeProps = { themeObject: INotificationItemTheme; }; @@ -100,6 +106,7 @@ export const NotificationItem: React.FC = ({ app, icon, image, + isToast = false, url, isSpam, //for rendering the spam conterpart of the notification component isSubscribedFn, //A function for getting if a user is subscribed to the channel in question @@ -109,6 +116,7 @@ export const NotificationItem: React.FC = ({ customTheme, isSecret, decryptFn, + onClose, }) => { const { notificationBody: parsedBody, timeStamp } = extractTimeStamp(notificationBody || ''); const themeObject = getCustomTheme(theme, customTheme!); @@ -118,7 +126,7 @@ export const NotificationItem: React.FC = ({ isSecret ); - const isCtaURLValid = MediaHelper.validURL(notifCta); + const isCtaURLValid = MediaHelper.validURL(notifCta) && !isToast; const isChannelURLValid = MediaHelper.validURL(url); // store the image to be displayed in this state variable @@ -127,12 +135,6 @@ export const NotificationItem: React.FC = ({ const [isSubscribed, setIsSubscribed] = React.useState(true); //use this to confirm if this is s const [divRef, offsetWidth] = useDivOffsetWidth(); - const showMetaInfo = isSecret || timeStamp; - // console.log({ - // chainName, - // rightIcon, - // ai: ChainImages['CHAIN_ICONS'] - // }) const gotToCTA = (e: React.SyntheticEvent) => { e.stopPropagation(); if (!isCtaURLValid) return; @@ -192,9 +194,9 @@ export const NotificationItem: React.FC = ({ timestamp={timeStamp} offsetWidth={offsetWidth} ref={divRef} + cta={isCtaURLValid} themeObject={themeObject!} > - {/* header that only pops up on small devices */} = ({ alt="" /> - {app} + + {app} + + + {timeStamp ? {convertTimeStamp(timeStamp)} : null} - {chainName && chainDetails[chainName] ? ( - - {chainDetails[chainName].icon} - - ) : null} + + {chainName && chainDetails[chainName] ? ( + + {chainDetails[chainName].icon} + + ) : null} + {isToast && onClose && ( + + + + )} + - {/* header that only pops up on small devices */} {/* content of the component */} {/* section for media content */} {notifImage && @@ -231,6 +246,7 @@ export const NotificationItem: React.FC = ({ (!MediaHelper.isMediaSupportedVideo(notifImage) ? ( setImageOverlay(notifImage || '')} @@ -242,7 +258,10 @@ export const NotificationItem: React.FC = ({ ) : // if its a youtube url, RENDER THIS MediaHelper.isMediaYoutube(notifImage) ? ( - +