update snackbar notifications, add loaders

.eslintignore

@@ -4,4 +4,5 @@ config-overrides.js
 build
 dist 
 vite.config.ts
-.eslintrc.js
+.eslintrc.js
+storybook-static

package.json

@@ -40,7 +40,7 @@
     "is-primitive": "^3.0.1",
     "lodash": "^4.17.19",
     "node-polyfill-webpack-plugin": "^1.1.2",
-    "notistack": "^1.0.0",
+    "notistack": "^3.0.1",
     "patch-package": "^6.4.7",
     "rc-scrollbars": "^1.1.3",
     "react": "^16.13.1",
@@ -76,8 +76,8 @@
     "preview": "vite preview",
     "lint": "eslint --ext .js,.ts,.tsx .",
     "fix": "eslint --fix --fix-type suggestion --ext .js,.ts,.tsx .",
-    "storybook": "start-storybook -p 9009 -c .storybook watch-css -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider  start-storybook -p 9009  -c .storybook watch-css -s public --no-manager-cache",
+    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider  build-storybook -s public ",
     "build": "vite build",
     "update-mainnet-list": "node ./src/fetchMainnetList.js"
   },
@@ -129,6 +129,7 @@
     "@types/storybook__addon-knobs": "^5.2.1",
     "@types/storybook__react": "^5.2.1",
     "@types/yup": "^0.29.3",
+    "cross-env": "^7.0.3",
     "dotenv-webpack": "^7.0.3",
     "eslint-config-standard-with-typescript": "^21.0.1",
     "prettier": "^2.1.0",

src/components/HeaderButton/FaucetButton.tsx

@@ -1,7 +1,6 @@
 import Faucet from '@components/Modals/Faucet/Faucet'
 import { blurContent, unblurContent } from '@consts/uiUtils'
 import { Button } from '@material-ui/core'
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'
 import React from 'react'
 import useStyles from './style'
 

src/components/Snackbar/LoadingSnackbar/LoadingSnackbar.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import LoadingSnackbar from './LoadingSnackbar'
+
+storiesOf('newUi/loadingSnackbar', module).add('default', () => {
+  return (
+    <LoadingSnackbar
+      message='Loading, please wait...'
+      anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
+      hideIconVariant
+      iconVariant={{
+        empty: <div />
+      }}
+      id='id'
+      persist={false}
+      style={{}}
+      variant='pending'
+    />
+  )
+})

src/components/Snackbar/LoadingSnackbar/LoadingSnackbar.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react'
+import icons from '@static/icons'
+import { Box, Grid } from '@material-ui/core'
+import {
+  StyledCircularProgress,
+  StyledCloseButton,
+  StyledContainer,
+  StyledSnackbarContent,
+  StyledTitle
+} from './style'
+import { CustomContentProps, useSnackbar } from 'notistack'
+
+const LoadingSnackbar = React.forwardRef<HTMLDivElement, CustomContentProps>(
+  ({ id, message }, ref) => {
+    const { closeSnackbar } = useSnackbar()
+
+    const handleDismiss = useCallback(() => {
+      closeSnackbar(id)
+    }, [id, closeSnackbar])
+
+    return (
+      <StyledSnackbarContent ref={ref} role='alert'>
+        <StyledContainer>
+          <Grid container alignItems='center'>
+            <Box ml={1}>
+              <StyledCircularProgress size={13} />
+            </Box>
+            <StyledTitle>{message}</StyledTitle>
+          </Grid>
+          <StyledCloseButton onClick={handleDismiss}>
+            <img src={icons.closeSmallIcon}></img>
+          </StyledCloseButton>
+        </StyledContainer>
+      </StyledSnackbarContent>
+    )
+  }
+)
+
+export default LoadingSnackbar

src/components/Snackbar/LoadingSnackbar/style.ts

@@ -0,0 +1,75 @@
+import { colors, typography } from '@static/theme'
+import { CircularProgress, styled, Typography } from '@material-ui/core'
+import { SnackbarContent } from 'notistack'
+
+export const StyledSnackbarContent = styled(SnackbarContent)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: colors.invariant.component,
+  borderStyle: 'solid',
+  borderWidth: 1,
+  borderColor: colors.invariant.component,
+  borderRadius: 10,
+  maxWidth: 330,
+  width: 330,
+  padding: '7px 16px',
+  minWidth: 100,
+  ...typography.body2,
+
+  boxShadow:
+    '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
+
+  '& .MuiCircularProgress-colorPrimary': {
+    color: colors.invariant.textGrey
+  },
+
+  [theme.breakpoints.down('xs')]: {
+    maxWidth: 'none',
+    width: 'auto'
+  }
+}))
+
+export const StyledContainer = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: 'auto',
+  '& div > div': {
+    margin: 0
+  }
+})
+
+export const StyledTitle = styled(Typography)({
+  marginLeft: 8,
+  color: colors.invariant.text,
+  ...typography.body2
+})
+
+export const StyledCloseButton = styled('button')({
+  backgroundColor: 'transparent',
+  border: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 30,
+  width: 'fit-content',
+  cursor: 'pointer',
+  margin: 0,
+  '&:hover': {
+    '& img': {
+      transition: '.2s all ease-in',
+      transform: 'scale(1.2)'
+    }
+  }
+})
+
+export const StyledCircularProgress = styled(CircularProgress)({
+  color: colors.invariant.textGrey,
+  display: 'flex',
+  alignItems: 'center',
+
+  '& SVG': {
+    width: 13,
+    height: 13
+  }
+})

src/components/Snackbar/Snackbar.tsx

@@ -1,27 +1,47 @@
 import React from 'react'
 import { SnackbarProvider } from 'notistack'
-import useStyles from './style'
+import { StyledMaterialDesignContent } from './style'
+import { Color } from '@material-ui/lab/Alert'
+import LoadingSnackbar from './LoadingSnackbar/LoadingSnackbar'
+import { useMediaQuery } from '@material-ui/core'
+import { theme } from '@static/theme'
+
+type ExtraVariants = 'pending'
+
+export type SnackbarVariant = Color | ExtraVariants
+
+declare module 'notistack' {
+  interface VariantOverrides {
+    pending: true
+  }
+}
 
 interface ISnackbarProps {
   children: JSX.Element[]
   maxSnack: number
 }
+
 export const Snackbar: React.FC<ISnackbarProps> = ({ children, maxSnack }) => {
-  const classes = useStyles()
+  const isExSmall = useMediaQuery(theme.breakpoints.down('xs'))
 
   return (
     <SnackbarProvider
-      maxSnack={maxSnack}
-      classes={{
-        variantSuccess: classes.success,
-        variantError: classes.error,
-        variantWarning: classes.warning,
-        variantInfo: classes.info
-      }}
-    >
+      dense
+      maxSnack={isExSmall ? 5 : maxSnack}
+      anchorOrigin={
+        isExSmall
+          ? { vertical: 'top', horizontal: 'left' }
+          : { vertical: 'bottom', horizontal: 'left' }
+      }
+      Components={{
+        success: StyledMaterialDesignContent,
+        error: StyledMaterialDesignContent,
+        info: StyledMaterialDesignContent,
+        warning: StyledMaterialDesignContent,
+        pending: LoadingSnackbar
+      }}>
       {children}
     </SnackbarProvider>
-
   )
 }
 export default Snackbar