feat: JSON Notifications

src/client/components/common/Banner/index.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import styled from 'styled-components';
+
+interface BannerProps {
+  children: React.ReactNode;
+}
+
+export const Banner: FC<BannerProps> = ({ children }) => {
+  return <>{children}</>;
+};

src/client/components/common/index.ts

@@ -1,3 +1,4 @@
+export * from './Banner';
 export * from './Box';
 export * from './Button';
 export * from './Card';

src/client/containers/Layout/index.tsx

@@ -16,7 +16,7 @@ import {
 } from '@store';
 import { useAppTranslation, useAppDispatch, useAppSelector, useWindowDimensions, usePrevious } from '@hooks';
 import { Navigation, Navbar, Footer } from '@components/app';
-import { Modals, Alerts } from '@containers';
+import { Modals, Alerts, NotificationBanner } from '@containers';
 import { getConfig } from '@config';
 import { Network, Route } from '@types';
 
@@ -145,24 +145,27 @@ export const Layout: FC = ({ children }) => {
   }
 
   return (
-    <StyledLayout>
-      <Alerts />
-      <Modals />
-      <Navigation />
-
-      <Content collapsedSidebar={collapsedSidebar} useTabbar={isMobile}>
-        <Navbar
-          title={t(`navigation.${path}`)}
-          walletAddress={selectedAddress}
-          addressEnsName={addressEnsName}
-          onWalletClick={() => dispatch(WalletActions.walletSelect({ network: currentNetwork }))}
-          selectedNetwork={currentNetwork}
-          networkOptions={SUPPORTED_NETWORKS}
-          onNetworkChange={(network) => dispatch(NetworkActions.changeNetwork({ network: network as Network }))}
-        />
-        {children}
-        <Footer />
-      </Content>
-    </StyledLayout>
+    <>
+      <NotificationBanner />
+      <StyledLayout>
+        <Alerts />
+        <Modals />
+        <Navigation />
+
+        <Content collapsedSidebar={collapsedSidebar} useTabbar={isMobile}>
+          <Navbar
+            title={t(`navigation.${path}`)}
+            walletAddress={selectedAddress}
+            addressEnsName={addressEnsName}
+            onWalletClick={() => dispatch(WalletActions.walletSelect({ network: currentNetwork }))}
+            selectedNetwork={currentNetwork}
+            networkOptions={SUPPORTED_NETWORKS}
+            onNetworkChange={(network) => dispatch(NetworkActions.changeNetwork({ network: network as Network }))}
+          />
+          {children}
+          <Footer />
+        </Content>
+      </StyledLayout>
+    </>
   );
 };

src/client/containers/NotificationBanner/index.tsx

@@ -0,0 +1,121 @@
+import { FC } from 'react';
+import { first } from 'lodash';
+import styled from 'styled-components';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+
+import { useAppSelector, useAppDispatch } from '@hooks';
+import { NotificationsActions, NotificationsSelectors } from '@store';
+import { Banner, Markdown, Icon, CloseIcon, InfoIcon, WarningFilledIcon, WarningIcon } from '@components/common';
+
+const StyledCloseIcon = styled(Icon)`
+  width: 1.5rem;
+  height: 1rem;
+  margin-top: 2.5px;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.7;
+    fill: ${({ theme }) => theme.colors.primaryVariant};
+  }
+`;
+
+const StyledSymbol = styled(Icon)`
+  width: 2.5rem;
+  height: 1.6rem;
+  margin-right: -2.5px;
+`;
+
+const StyledMarkdown = styled(Markdown)`
+  a {
+    text-decoration: underline;
+  }
+`;
+
+const StyledNotification = styled.div`
+  display: flex;
+  align-items: center;
+  > * {
+    padding-right: 5px;
+  }
+`;
+
+const StyledNotificationBanner = styled.div`
+  background: ${({ theme }) => theme.colors.surface};
+  height: rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`;
+
+const StyledTransitionGroup = styled(TransitionGroup)`
+  .transition-appear {
+    opacity: 0;
+  }
+  .transition-appear-active {
+    opacity: 1;
+    transition: opacity 800ms;
+  }
+  .transition-enter {
+    opacity: 0;
+  }
+  .transition-enter-active {
+    opacity: 1;
+    transition: opacity 800ms;
+  }
+  .transition-exit {
+    opacity: 1;
+  }
+  .transition-exit-active {
+    opacity: 0;
+    position: absolute;
+    transition: opacity 800ms;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+  }
+`;
+
+export const NotificationBanner: FC = () => {
+  const latestMessage = first(useAppSelector(NotificationsSelectors.selectActiveMessages));
+  const dispatch = useAppDispatch();
+  if (!latestMessage) {
+    return null;
+  }
+
+  let messageSymbol: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string | undefined }>;
+  switch (latestMessage.type) {
+    case 'info':
+      messageSymbol = InfoIcon;
+      break;
+    case 'warning':
+      messageSymbol = WarningFilledIcon;
+      break;
+    case 'critical':
+      messageSymbol = WarningIcon;
+      break;
+    default:
+      messageSymbol = InfoIcon;
+  }
+
+  return (
+    <StyledNotificationBanner>
+      <StyledTransitionGroup>
+        <CSSTransition appear={true} key={latestMessage.id} timeout={800} classNames={'transition'}>
+          <Banner>
+            <StyledNotification>
+              <StyledSymbol Component={messageSymbol} />
+              <StyledMarkdown>{latestMessage.message}</StyledMarkdown>
+              <StyledCloseIcon
+                Component={CloseIcon}
+                onClick={() => dispatch(NotificationsActions.dismissMessage(latestMessage.id))}
+              />
+            </StyledNotification>
+          </Banner>
+        </CSSTransition>
+      </StyledTransitionGroup>
+    </StyledNotificationBanner>
+  );
+};

src/client/containers/index.ts

@@ -2,3 +2,4 @@ export * from './Layout';
 export * from './Alerts';
 export * from './Modals';
 export * from './Themable';
+export * from './NotificationBanner';

src/client/data/notificationMessages.json

@@ -0,0 +1 @@
+[]

src/core/frameworks/redux/index.ts

@@ -3,7 +3,12 @@ import { createLogger } from 'redux-logger';
 import { save, load, clear } from 'redux-localstorage-simple';
 import { merge, cloneDeep, get } from 'lodash';
 
-import rootReducer, { themeInitialState, walletInitialState, settingsInitialState } from '@store/modules';
+import rootReducer, {
+  themeInitialState,
+  walletInitialState,
+  settingsInitialState,
+  notificationsInitialState,
+} from '@store/modules';
 import { enableDevTools } from '@utils';
 import { DIContainer } from '@types';
 
@@ -12,10 +17,11 @@ export const getStore = (extraArgument?: any) => {
     theme: cloneDeep(themeInitialState),
     wallet: cloneDeep(walletInitialState),
     settings: cloneDeep(settingsInitialState),
+    notifications: cloneDeep(notificationsInitialState),
   };
   const persistConfig = {
     namespace: 'yearn',
-    states: ['theme', 'wallet.name', 'settings', 'network'],
+    states: ['theme', 'wallet.name', 'settings', 'network', 'notifications.dismissedMessageIds'],
   };
   const logger = createLogger({ collapsed: true });
   const middlewareOptions = {

src/core/store/modules/app/app.actions.ts

@@ -10,6 +10,7 @@ import { TokensActions } from '../tokens/tokens.actions';
 import { VaultsActions } from '../vaults/vaults.actions';
 import { LabsActions } from '../labs/labs.actions';
 import { IronBankActions } from '../ironBank/ironBank.actions';
+import { NotificationsActions } from '../notifications/notifications.actions';
 
 /* -------------------------------------------------------------------------- */
 /*                                 Clear State                                */
@@ -44,6 +45,9 @@ const initApp = createAsyncThunk<void, void, ThunkAPI>('app/initApp', async (_ar
   } else if (wallet.name) {
     await dispatch(WalletActions.walletSelect({ walletName: wallet.name, network: network.current }));
   }
+
+  await dispatch(NotificationsActions.getNotificationMessages());
+
   // TODO use when sdk ready
   // dispatch(initSubscriptions());
 });

src/core/store/modules/index.ts

@@ -53,6 +53,10 @@ import { SettingsSelectors } from './settings/settings.selectors';
 import userReducer, { userInitialState } from './user/user.reducer';
 import { UserActions } from './user/user.actions';
 import { UserSelectors } from './user/user.selectors';
+// Notification State
+import notificationsReducer, { notificationsInitialState } from './notifications/notifications.reducer';
+import { NotificationsActions } from './notifications/notifications.actions';
+import { NotificationsSelectors } from './notifications/notifications.selectors';
 
 const rootReducer: Reducer<RootState> = combineReducers({
   app: appReducer,
@@ -68,6 +72,7 @@ const rootReducer: Reducer<RootState> = combineReducers({
   labs: labsReducer,
   settings: settingsReducer,
   user: userReducer,
+  notifications: notificationsReducer,
 });
 
 export default rootReducer;
@@ -87,6 +92,7 @@ export {
   LabsActions,
   SettingsActions,
   UserActions,
+  NotificationsActions,
 };
 
 // Selectors
@@ -103,6 +109,7 @@ export {
   SettingsSelectors,
   LabsSelectors,
   UserSelectors,
+  NotificationsSelectors,
 };
 
 // initialState
@@ -120,4 +127,5 @@ export {
   labsInitialState,
   settingsInitialState,
   userInitialState,
+  notificationsInitialState,
 };

src/core/store/modules/notifications/notifications.actions.ts

@@ -0,0 +1,28 @@
+import { createAction, createAsyncThunk } from '@reduxjs/toolkit';
+
+import { ThunkAPI } from '@frameworks/redux';
+import { Message } from '@types';
+import notificationMessages from '@client/data/notificationMessages.json';
+
+const dismissMessage = createAction<number>('notifications/dismissMessage');
+
+/* -------------------------------------------------------------------------- */
+/*                                 Fetch Data                                 */
+/* -------------------------------------------------------------------------- */
+const importedNotifications = notificationMessages as Message[];
+
+const getNotificationMessages = createAsyncThunk<Message[], void, ThunkAPI>(
+  'notifications/getNotificationMessages',
+  async () => {
+    return importedNotifications;
+  }
+);
+
+/* -------------------------------------------------------------------------- */
+/*                                   Exports                                  */
+/* -------------------------------------------------------------------------- */
+
+export const NotificationsActions = {
+  getNotificationMessages,
+  dismissMessage,
+};

src/core/store/modules/notifications/notifications.reducer.ts

@@ -0,0 +1,42 @@
+import { createReducer } from '@reduxjs/toolkit';
+
+import { initialStatus, NotificationsState } from '@types';
+
+import { NotificationsActions } from './notifications.actions';
+
+export const notificationsInitialState: NotificationsState = {
+  messages: [],
+  dismissedMessageIds: [],
+  statusMap: {
+    getNotificationMessages: { ...initialStatus },
+  },
+};
+
+const { getNotificationMessages, dismissMessage } = NotificationsActions;
+
+const notificationsReducer = createReducer(notificationsInitialState, (builder) => {
+  builder
+    .addCase(dismissMessage, (state, actions) => {
+      state.dismissedMessageIds = [...state.dismissedMessageIds, actions.payload];
+    })
+
+    /* -------------------------------------------------------------------------- */
+    /*                                 Fetch Data                                 */
+    /* -------------------------------------------------------------------------- */
+    .addCase(getNotificationMessages.pending, (state) => {
+      state.statusMap.getNotificationMessages = { loading: true };
+    })
+
+    .addCase(getNotificationMessages.rejected, (state, { error }) => {
+      state.statusMap.getNotificationMessages = { loading: false, error: error.message };
+    })
+
+    .addCase(getNotificationMessages.fulfilled, (state, { payload: messages }) => {
+      state.messages = messages.filter((message) => {
+        return message.active === true;
+      });
+      state.statusMap.getNotificationMessages = {};
+    });
+});
+
+export default notificationsReducer;

src/core/store/modules/notifications/notifications.selectors.ts

@@ -0,0 +1,23 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+import { RootState, Message } from '@types';
+
+/* ---------------------------------- State --------------------------------- */
+const selectDismissedMessageIds = (state: RootState) => state.notifications.dismissedMessageIds;
+const selectMessages = (state: RootState) => state.notifications.messages;
+const selectActiveMessages = createSelector<RootState, Message[], Number[], Message[]>(
+  [selectMessages, selectDismissedMessageIds],
+  (messages, dismissedMessageIds) => {
+    const activeMessages = messages.filter((message) => {
+      return !dismissedMessageIds.includes(message.id);
+    });
+    return activeMessages;
+  }
+);
+
+/* --------------------------------- Exports -------------------------------- */
+export const NotificationsSelectors = {
+  selectDismissedMessageIds,
+  selectMessages,
+  selectActiveMessages,
+};

src/core/types/Notifications.ts

@@ -0,0 +1,8 @@
+export type Classification = 'info' | 'warning' | 'critical';
+
+export interface Message {
+  id: number;
+  type: Classification;
+  active: boolean;
+  message: string;
+}