create notifications component

packages/yoroi-extension/app/UI/common/hooks/useStrings.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { defineMessages } from 'react-intl';
+import { useIntl } from '../../context/IntlProvider';
+
+export const messages = Object.freeze(
+  defineMessages({
+    clickToView: {
+      id: 'notifications.description.clickToView',
+      defaultMessage: 'Click to view',
+    },
+  })
+);
+
+export const useStrings = () => {
+  const { intl } = useIntl();
+  return React.useRef({
+    clickToView: intl.formatMessage(messages.clickToView),
+  }).current;
+};

packages/yoroi-extension/app/UI/components/notifications/NotificationToast.tsx

@@ -0,0 +1,74 @@
+import { IconButton, styled, Box, Typography } from '@mui/material';
+import React from 'react';
+import { useStrings } from '../../common/hooks/useStrings';
+import { Icon } from '../icons/index';
+
+enum NotificationTypes {
+  Income = "Income",
+  Cancelled = "Cancelled",
+  Outcome = "Outcome",
+  Rewards = "Rewards"
+}
+
+interface Props {
+  text: string;
+  type: NotificationTypes;
+  onClick(): void;
+  onClose(): void;
+}
+
+const IconWrapper = styled(IconButton)(({ theme }: any) => ({
+  '& svg': {
+    '& path': {
+      fill: theme.palette.ds.el_gray_medium,
+    },
+  },
+}));
+
+const SNotificationContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  borderRadius: '8px',
+  width: '446px',
+  paddingTop: '16px',
+  paddingBottom: '16px',
+  backgroundColor: theme.palette["ds"].bg_color_contrast_high,
+  boxShadow: theme.palette["ds"].light_shadow_notification,
+}));
+
+export default function NotificationToast({ onClick, onClose, text, type }: Props) {
+  const strings = useStrings();
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    console.log("clicked");
+    onClick();
+  }
+
+  const handleClose = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onClose();
+    console.log("closed");
+  }
+
+  return (
+    <Box id="notif-toast" sx={{ position: 'fixed', top: 10, right: 10, zIndex: 9999 }}>
+      <SNotificationContainer onClick={handleClick}>
+        <Box px="16px" flexShrink={0} sx={{ cursor: 'pointer', alignSelf: 'center' }}>
+          <Box borderRadius="50%" bgcolor="ds.secondary_100" width="40px" height="40px" display="flex" alignItems="center" justifyContent="center">
+            {type === NotificationTypes.Rewards ? <Icon.Staking fill='#08C29D' /> : <Icon.ChipArrowDown fill='#08C29D' />}
+          </Box>
+        </Box>
+        <Box sx={{ flexGrow: 1, cursor: "pointer" }}>
+          <Typography mb="2px" component="div" variant="body1" fontWeight={500} color="ds.text_gray_medium">{text}</Typography>
+          <Typography component="div" variant='body2' color="ds.text_gray_low">{strings.clickToView}</Typography>
+        </Box>
+        <Box px="12px" flexShrink={0}>
+          <IconWrapper onClick={handleClose} sx={{ padding: 0 }}>
+            <Icon.CloseIcon fill='#6B7384' />
+          </IconWrapper>
+        </Box>
+      </SNotificationContainer>
+    </Box>
+  );
+};

packages/yoroi-extension/app/styles/themes/base-palettes/dark-palette.js

@@ -59,4 +59,5 @@ export const darkPalette = {
   special_web_bg_sidebar: 'rgba(0, 0, 0, 0.16)',
   light_shadow_dropdown_words: `0px 3px 10px rgba(24, 26, 30, 0.08)`, // dropdown shadow
   light_shadow_dropdown_menu: `0px 4px 10px rgba(24, 26, 30, 0.16)`,
+  light_shadow_notification: `-1px 8px 20px 0px rgba(138, 146, 163, 0.1)`,
 };

packages/yoroi-extension/app/styles/themes/base-palettes/light-palette.js

@@ -58,4 +58,5 @@ export const lightPalette = {
   special_web_bg_sidebar: '#1F232ECC',
   light_shadow_dropdown_words: `0px 3px 10px rgba(24, 26, 30, 0.08)`,
   light_shadow_dropdown_menu: `0px 4px 10px rgba(24, 26, 30, 0.16)`,
+  light_shadow_notification: `-1px 8px 20px 0px rgba(138, 146, 163, 0.1)`,
 };

packages/yoroi-extension/app/styles/themes/themed-palettes/dark.js

@@ -26,6 +26,7 @@ export const dark: DSColorPalette = {
   bg_color_min: darkPalette.gray_100, // upper surface
   bg_color_contrast_high: darkPalette.gray_50 , // dropdown idle item
   bg_color_contrast_min: darkPalette.gray_100, // dropdown selected\highlighted item
+  bg_color_notification: darkPalette.gray_50, // dropdown selected\highlighted item
 
   el_primary_max: darkPalette.primary_700, // hover'nd pressed state, actianable elements
   el_primary_medium: darkPalette.primary_600, // actionable elements

packages/yoroi-extension/app/styles/themes/themed-palettes/light.js

@@ -26,6 +26,7 @@ export const light: DSColorPalette = {
   bg_color_min: lightPalette.gray_100, // upper surface
   bg_color_contrast_high: lightPalette.gray_min , // dropdown idle item
   bg_color_contrast_min: lightPalette.gray_100, // dropdown selected\highlighted surface
+  bg_color_notification: lightPalette.gray_50,
 
   el_primary_max: lightPalette.primary_600, // hover'nd pressed state, actianable elements
   el_primary_medium: lightPalette.primary_500, // actionable elements

packages/yoroi-extension/app/styles/themes/types.js

@@ -63,6 +63,7 @@ export type DSColorPalette = {|
   bg_color_min: string,
   bg_color_contrast_min: string,
   bg_color_contrast_high: string,
+  bg_color_notification: string,
   el_primary_max: string,
   el_primary_medium: string,
   el_primary_min: string,
@@ -79,4 +80,5 @@ export type DSColorPalette = {|
   mobile_bg_blur: string,
   light_shadow_dropdown_words: string,
   light_shadow_dropdown_menu: string,
+  light_shadow_notification: string,
 |};