Notifications context

packages/common-components/src/Icons/icons/MoonStar.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as MoonStarSvg } from "../svgs/moon-star.svg"
+
+export { MoonStarSvg }
+
+export default createSvgIcon(<MoonStarSvg />)

packages/common-components/src/Icons/index.ts

@@ -51,6 +51,7 @@ export { default as JcbCardIcon, JcbCardSvg } from "./icons/JcbCard.icon"
 export { default as MailIcon, MailSvg } from "./icons/Mail.icon"
 export { default as MastercardCardIcon, MastercardCardSvg } from "./icons/MastercardCard.icon"
 export { default as MoonIcon, MoonSvg } from "./icons/Moon.icon"
+export { default as MoonStarIcon, MoonStarSvg } from "./icons/MoonStar.icon"
 export { default as MoreIcon, MoreSvg } from "./icons/More.icon"
 export { default as LockIcon, LockSvg } from "./icons/Lock.icon"
 export { default as KeyIcon, KeySvg } from "./icons/Key.icon"

packages/files-ui/src/App.tsx

@@ -16,6 +16,7 @@ import { FilesApiProvider } from "./Contexts/FilesApiContext"
 import { UserProvider } from "./Contexts/UserContext"
 import { BillingProvider } from "./Contexts/BillingContext"
 import { PosthogProvider } from "./Contexts/PosthogContext"
+import { NotificationsProvider } from "./Contexts/NotificationsContext"
 
 if (
  process.env.NODE_ENV === "production" &&
@@ -121,19 +122,21 @@ const App = () => {
  enableLogging={directAuthNetwork !== "mainnet"}
  network={directAuthNetwork}
  >
- <UserProvider>
- <FilesProvider>
- <BillingProvider>
- <Router>
- <PosthogProvider>
- <AppWrapper>
- <FilesRoutes />
- </AppWrapper>
- </PosthogProvider>
- </Router>
- </BillingProvider>
- </FilesProvider>
- </UserProvider>
+ <NotificationsProvider>
+ <UserProvider>
+ <FilesProvider>
+ <BillingProvider>
+ <Router>
+ <PosthogProvider>
+ <AppWrapper>
+ <FilesRoutes />
+ </AppWrapper>
+ </PosthogProvider>
+ </Router>
+ </BillingProvider>
+ </FilesProvider>
+ </UserProvider>
+ </NotificationsProvider>
  </ThresholdKeyProvider>
  </FilesApiProvider>
  </Web3Provider>

packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx

@@ -4,6 +4,9 @@ import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import { Notification } from "./NotificationsDropdown"
+import { Trans } from "@lingui/macro"
+import { MoonStarIcon } from "@chainsafe/common-components"
+import clsx from "clsx"
 dayjs.extend(relativeTime)
 
 const useStyles = makeStyles(({ palette, constants }: ITheme) =>
@@ -13,18 +16,28 @@ const useStyles = makeStyles(({ palette, constants }: ITheme) =>
  display: "flex",
  alignItems: "center",
  cursor: "pointer",
- backgroundColor: "initial",
+ backgroundColor: palette.additional["gray"][2],
+ "&.empty": {
+ display: "flex",
+ flexDirection: "column",
+ padding: `${constants.generalUnit * 3 }px ${constants.generalUnit * 1.5}px`,
+ color: palette.additional["gray"][7]
+ },
  "&:hover": {
  backgroundColor: palette.additional["gray"][3]
  },
- "svg": {
- fill: palette.additional["gray"][9]
+ "& svg>path": {
+ stroke: palette.additional["gray"][7]
  },
  borderBottom: `1px solid ${palette.additional["gray"][5]}`,
- ":last-child": {
+ "&:last-child": {
  border: "none"
  }
  },
+ icon: {
+ transition: "none",
+ marginBottom: constants.generalUnit
+ },
  notificationTitle: {
  color: palette.additional["gray"][9],
  paddingRight: constants.generalUnit * 1.5,
@@ -53,6 +66,14 @@ const NotificationList = ({ notifications }: INotificationListProps) => {
  className={classes.scrollContent}
  >
  <div>
+ {notifications.length === 0 && (
+ <div className={clsx(classes.notificationBody, "empty")}>
+ <MoonStarIcon className={classes.icon} />
+ <Typography variant="h4" >
+ <Trans>There are no notifications!</Trans>
+ </Typography>
+ </div>
+ )}
  {notifications.map((n, i) => (
  <div
  key={i}

packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx

@@ -31,6 +31,7 @@ const useStyles = makeStyles(({ palette, constants }: ITheme) =>
 )
 
 export interface Notification {
+ id: string
  title: string
  createdAt: number
  onClick?: () => void
@@ -49,6 +50,7 @@ const NotificationsDropdown = ({ notifications }: INotificationsDropdownProps) =
  dropdown={<NotificationList notifications={notifications}/>}
  hideIndicator={true}
  anchor="bottom-right"
+ autoclose
  >
  <Button variant="tertiary">
  <div className={classes.notificationsButton}>

packages/files-ui/src/Components/Layouts/AppHeader.tsx

@@ -17,6 +17,7 @@ import { CSFTheme } from "../../Themes/types"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
 import TeamModal from "../Elements/TeamModal"
 import NotificationsDropdown from "../Elements/Notifications/NotificationsDropdown"
+import { useNotifications } from "../../Contexts/NotificationsContext"
 
 const useStyles = makeStyles(
  ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
@@ -145,6 +146,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
  const classes = useStyles()
  const { isLoggedIn, secured } = useFilesApi()
  const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey()
+ const { notifications } = useNotifications()
  const [searchActive, setSearchActive] = useState(false)
  const [isTeamModalOpen, setIsTeamModalOpen] = useState(false)
 
@@ -204,7 +206,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
  </section>
  <section>
  <NotificationsDropdown
- notifications={[]}
+ notifications={notifications}
  />
  </section>
  </section>

packages/files-ui/src/Contexts/NotificationsContext.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode, useState } from "react"
+import { Notification } from "../Components/Elements/Notifications/NotificationsDropdown"
+
+type NotificationsContextProps = {
+ children: ReactNode | ReactNode[]
+}
+
+interface INotificationsContext {
+ notifications: Notification[]
+ addNotification: (notification: Omit<Notification, "id">) => void
+ removeNotification: (id: string) => void
+}
+
+const NotificationsContext = React.createContext<INotificationsContext | undefined>(
+ undefined
+)
+
+const NotificationsProvider = ({ children }: NotificationsContextProps) => {
+ const [notifications, setNotifications] = useState<Notification[]>([])
+
+ const addNotification = (notification: Omit<Notification, "id">) => {
+ setNotifications([...notifications, {
+ id: (notifications.length + 1).toString(),
+ ...notification
+ }])
+ }
+
+ const removeNotification = (id: string) => {
+ setNotifications(notifications.filter((notification) => notification.id !== id))
+ }
+
+ return (
+ <NotificationsContext.Provider
+ value={{
+ notifications,
+ addNotification,
+ removeNotification
+ }}
+ >
+ {children}
+ </NotificationsContext.Provider>
+ )
+}
+
+const useNotifications = () => {
+ const context = React.useContext(NotificationsContext)
+ if (context === undefined) {
+ throw new Error("useNotifications must be used within a BillingProvider")
+ }
+ return context
+}
+
+export { NotificationsProvider, useNotifications }

packages/files-ui/src/locales/de/messages.po

@@ -889,6 +889,9 @@ msgstr ""
 msgid "Theme"
 msgstr "Farbschema"
 
+msgid "There are no notifications!"
+msgstr ""
+
 msgid "There was an error authenticating"
 msgstr "Es gab einen Fehler bei der Authentifizierung"
 

packages/files-ui/src/locales/en/messages.po

@@ -892,6 +892,9 @@ msgstr "The username is too long"
 msgid "Theme"
 msgstr "Theme"
 
+msgid "There are no notifications!"
+msgstr "There are no notifications!"
+
 msgid "There was an error authenticating"
 msgstr "There was an error authenticating"
 

packages/files-ui/src/locales/es/messages.po

@@ -893,6 +893,9 @@ msgstr ""
 msgid "Theme"
 msgstr "Tema"
 
+msgid "There are no notifications!"
+msgstr ""
+
 msgid "There was an error authenticating"
 msgstr "Hubo un error de autenticación."