Notification Banner [WEB-1032]

[xgambitox]

Elevator Pitch App should display important news/events through a page banner

Customer Value Users are informed with custom messages directly through the site

Definition of Done

• Banner component is rendered in all app routes.
• Banner supports 'info' | 'warning' | 'critical' states.
• Banner displays the top most non-dismissed active message available.
• Message can be dismissed by user to display next message.
• Messages support markdown.

Design Approach Create src/client/data/notificationMessages.json, with the following structure:

[
  id: number,
  type: 'info' | 'warning' | 'critical',
  active: boolean,
  message: 'Welcome to <b>Yearn Finance<b>'
]

Add new notifications module to store, with

• getNotificationMessages(), executes on initApp and imports json file and filters active messages, then reducer updates state based on users current persisted dismissed messages.
• dismissMessage(messageId), sets message status to dismissed.

Include notifications module to persistConfig in core/frameworks/redux to persist state on localstorage. Create a Banner functional component in common/components that supports receiving a children component. Create a NotificationBanner component in containers, and use a selector for accessing the first non-dismissed active message. Use Markdown common component. Import container to all main routes.

Additional Context UI/UX will be provided once a contributor starts a draft PR.

[TacosTonight]

Hi, can I be assigned this issue?