@arcblock/ux 2.0.7 → 2.1.2

package/lib/Blocklet/utils.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const ActionButton = _styledComponents.default.div.withConfig({
   displayName: "utils__ActionButton",
   componentId: "sc-1po1ir-0"
-})(["background-color:transparent !important;& >:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;border-radius:2px;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}& >:not(.Mui-disabled){background-color:transparent !important;color:", "!important;}& >:not(.Mui-disabled){&:hover{color:", "!important;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+})(["background-color:transparent !important;& >:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;top:0;left:0;border-radius:2px;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}& >:not(.Mui-disabled){background-color:transparent !important;color:", "!important;}& >:not(.Mui-disabled){&:hover{color:", "!important;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 
 var _default = ActionButton;
 exports.default = _default;

package/lib/BlockletNFT/index.js

@@ -64,7 +64,7 @@ function prettySize(_size) {
 const Div = _styledComponents.default.div.withConfig({
   displayName: "BlockletNFT__Div",
   componentId: "sc-19lczgp-0"
-})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #f0f0f0;}}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:0 0 2px 0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__title{height:2.3em;margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.arcblock-blocklet__describe{white-space:normal;height:2.86em;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #f0f0f0;}}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;top:0;left:0;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:0 0 2px 0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__title{height:2.3em;margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.arcblock-blocklet__describe{white-space:normal;height:2.86em;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 
 function BlockletIcon(_ref) {
   let {

package/lib/ClickToCopy/index.js

@@ -19,7 +19,7 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Toast = _interopRequireDefault(require("../Toast"));
+var _Toast = _interopRequireWildcard(require("../Toast"));
 
 var _Util = require("../Util");
 
@@ -59,6 +59,10 @@ function ClickToCopy(props) {
   const onCopy = e => {
     (0, _copyToClipboard.default)(content || e.current.textContent);
     setCopied(true);
+
+    if (width < 600) {
+      _Toast.default.success(copiedTip);
+    }
   };
 
   (0, _react.useEffect)(() => {
@@ -76,7 +80,7 @@ function ClickToCopy(props) {
       }
     };
   });
-  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_Toast.ToastProvider, null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, Object.assign({
     title: copied ? copiedTip : tip
   }, rest, {
     placement: tipPlacement,
@@ -90,10 +94,7 @@ function ClickToCopy(props) {
       fontWeight: 'inherit'
     }, style),
     onClick: () => onCopy(childrenRef)
-  }, children || content, copied && width < 600 && /*#__PURE__*/_react.default.createElement(_Toast.default, {
-    variant: "success",
-    message: copiedTip
-  })));
+  }, children || content)));
 }
 
 ClickToCopy.propTypes = {

package/lib/QRCode/index.js

@@ -54,8 +54,8 @@ function QRCode(_ref) {
 
   const ref = _react.default.useRef(null);
 
-  (0, _react.useEffect)(() => {
-    const qrCode = new _qrCodeStyling.default(_objectSpread(_objectSpread(_objectSpread({}, defaults), {}, {
+  const options = (0, _react.useMemo)(() => {
+    return _objectSpread(_objectSpread(_objectSpread({}, defaults), {}, {
       data,
       width: size,
       height: size
@@ -65,9 +65,18 @@ function QRCode(_ref) {
         crossOrigin: 'anonymous',
         margin: 0
       }
-    }), config));
-    qrCode.append(ref.current);
-  }, [data, size]);
+    }), config);
+  }, [data, size, image, config]);
+  const [qrCode] = (0, _react.useState)(new _qrCodeStyling.default(options));
+  (0, _react.useEffect)(() => {
+    if (ref.current) {
+      qrCode.append(ref.current);
+    }
+  }, [qrCode, ref]);
+  (0, _react.useEffect)(() => {
+    if (!qrCode) return;
+    qrCode.update(options);
+  }, [data, size, image, config]);
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     ref: ref
   }, rest));

package/lib/Toast/index.js

@@ -3,157 +3,94 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Toast;
+exports.ToastProvider = ToastProvider;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
-
-var _Error = _interopRequireDefault(require("@mui/icons-material/Error"));
-
-var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
-
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-
-var _Warning = _interopRequireDefault(require("@mui/icons-material/Warning"));
+var _notistack = require("notistack");
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
-var _Snackbar = _interopRequireDefault(require("@mui/material/Snackbar"));
-
-var _SnackbarContent = _interopRequireDefault(require("@mui/material/SnackbarContent"));
-
-var _colors = require("@mui/material/colors");
-
-var _styles = require("@mui/styles");
-
-const _excluded = ["className", "message", "onClose", "variant"];
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-const variantIcon = {
-  success: _CheckCircle.default,
-  warning: _Warning.default,
-  error: _Error.default,
-  info: _Info.default
-};
-const useStyles1 = (0, _styles.makeStyles)(theme => ({
-  success: {
-    backgroundColor: _colors.green[600]
-  },
-  error: {
-    backgroundColor: theme.palette.error.dark
-  },
-  info: {
-    backgroundColor: theme.palette.primary.main
-  },
-  warning: {
-    backgroundColor: _colors.amber[700]
-  },
-  icon: {
-    fontSize: 20
-  },
-  iconVariant: {
-    opacity: 0.9,
-    marginRight: theme.spacing(1)
-  },
-  message: {
-    display: 'flex',
-    alignItems: 'center'
-  }
-}));
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function SnackbarContentWrapper(props) {
-  const classes = useStyles1();
+const noop = () => {};
 
-  const {
-    className,
-    message,
-    onClose,
+let _success = noop;
+let _error = noop;
+let _warning = noop;
+let _info = noop;
+
+const genFn = (enqueueSnackbar, variant) => (message, opts) => {
+  enqueueSnackbar(message, _objectSpread({
+    autoHideDuration: 3000,
     variant
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
-
-  const Icon = variantIcon[variant];
-  return /*#__PURE__*/_react.default.createElement(_SnackbarContent.default, Object.assign({
-    className: [classes[variant], className].join(' ').trim(),
-    message: /*#__PURE__*/_react.default.createElement("span", {
-      id: "client-snackbar",
-      className: classes.message
-    }, /*#__PURE__*/_react.default.createElement(Icon, {
-      className: [classes.icon, classes.iconVariant].join(' ').trim()
-    }), message),
-    action: [/*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      key: "close",
-      "aria-label": "close",
-      color: "inherit",
-      onClick: onClose,
-      size: "large"
-    }, /*#__PURE__*/_react.default.createElement(_Close.default, {
-      className: classes.icon
-    }))]
-  }, rest));
-}
+  }, opts));
+}; // eslint-disable-next-line react/prop-types
 
-SnackbarContentWrapper.propTypes = {
-  message: _propTypes.default.string.isRequired,
-  onClose: _propTypes.default.func.isRequired,
-  className: _propTypes.default.string,
-  variant: _propTypes.default.oneOf(['error', 'info', 'success', 'warning'])
-};
-SnackbarContentWrapper.defaultProps = {
-  className: '',
-  variant: 'success'
-};
 
-function Toast(_ref) {
+function ToastProvider(_ref) {
   let {
-    onClose,
-    variant,
-    duration,
-    message
+    children
   } = _ref;
 
-  const [open, setOpen] = _react.default.useState(true);
-
-  const handleClose = (e, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
+  const notistackRef = /*#__PURE__*/_react.default.createRef();
 
-    setOpen(false);
-    onClose();
+  const onClickDismiss = key => () => {
+    notistackRef.current.closeSnackbar(key);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_Snackbar.default, {
-    open: open,
+  return /*#__PURE__*/_react.default.createElement(_notistack.SnackbarProvider, {
     anchorOrigin: {
       vertical: 'top',
       horizontal: 'right'
     },
-    autoHideDuration: duration,
-    onClose: handleClose
-  }, /*#__PURE__*/_react.default.createElement(SnackbarContentWrapper, {
-    onClose: handleClose,
-    variant: variant,
-    message: message
-  }));
+    ref: notistackRef,
+    action: key => /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      key: "close",
+      "aria-label": "close",
+      color: "inherit",
+      onClick: onClickDismiss(key),
+      size: "large"
+    }, /*#__PURE__*/_react.default.createElement(_Close.default, {
+      style: {
+        fontSize: 16
+      }
+    }))
+  }, /*#__PURE__*/_react.default.createElement(Toast, null), children);
+}
+
+function Toast() {
+  const {
+    enqueueSnackbar
+  } = (0, _notistack.useSnackbar)();
+  _success = genFn(enqueueSnackbar, 'success');
+  _error = genFn(enqueueSnackbar, 'error');
+  _warning = genFn(enqueueSnackbar, 'warning');
+  _info = genFn(enqueueSnackbar, 'info');
+  return null;
 }
 
-Toast.propTypes = {
-  message: _propTypes.default.string.isRequired,
-  variant: _propTypes.default.string,
-  duration: _propTypes.default.number,
-  onClose: _propTypes.default.func
+var _default = {
+  success: function success() {
+    return _success(...arguments);
+  },
+  error: function error() {
+    return _error(...arguments);
+  },
+  warning: function warning() {
+    return _warning(...arguments);
+  },
+  info: function info() {
+    return _info(...arguments);
+  }
 };
-Toast.defaultProps = {
-  variant: 'success',
-  duration: 3000,
-  onClose: () => {}
-};
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.0.7",
+  "version": "2.1.2",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "f5be0b3d27f13a1ffe3938a2b21344af6fff7712",
+  "gitHead": "a73064aaab5cde4fa378672c9c037cf427022123",
   "dependencies": {
-    "@arcblock/icons": "^2.0.7",
-    "@arcblock/react-hooks": "^2.0.7",
+    "@arcblock/icons": "^2.1.2",
+    "@arcblock/react-hooks": "^2.1.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -75,6 +75,7 @@
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.21",
     "mdi-material-ui": "^7.2.0",
+    "notistack": "^2.0.5",
     "react-cookie-consent": "^6.4.1",
     "react-helmet": "^6.1.0",
     "react-intersection-observer": "^8.31.1",

package/src/Blocklet/utils.js

@@ -22,6 +22,8 @@ const ActionButton = styled.div`
       position: absolute;
       height: 100%;
       width: 100%;
+      top: 0;
+      left: 0;
       border-radius: 2px;
       background-color: ${props => props.theme.palette.primary.main};
       transform: scale(0.1);

package/src/BlockletNFT/index.js

@@ -86,6 +86,8 @@ const Div = styled.div`
         position: absolute;
         height: 100%;
         width: 100%;
+        top: 0;
+        left: 0;
         background-color: ${props => props.theme.palette.primary.main};
         transform: scale(0.1);
         opacity: 0;

package/src/ClickToCopy/index.js

@@ -7,7 +7,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import styled from 'styled-components';
 
-import Toast from '../Toast';
+import Toast, { ToastProvider } from '../Toast';
 import { mergeProps } from '../Util';
 
 export default function ClickToCopy(props) {
@@ -21,6 +21,9 @@ export default function ClickToCopy(props) {
   const onCopy = e => {
     Copy(content || e.current.textContent);
     setCopied(true);
+    if (width < 600) {
+      Toast.success(copiedTip);
+    }
   };
 
   useEffect(() => {
@@ -39,23 +42,24 @@ export default function ClickToCopy(props) {
   });
 
   return (
-    <Tooltip
-      title={copied ? copiedTip : tip}
-      {...rest}
-      placement={tipPlacement}
-      disableFocusListener>
-      <Container
-        ref={childrenRef}
-        component="span"
-        style={Object.assign(
-          { fontSize: 'inherit', color: 'inherit', fontWeight: 'inherit' },
-          style
-        )}
-        onClick={() => onCopy(childrenRef)}>
-        {children || content}
-        {copied && width < 600 && <Toast variant="success" message={copiedTip} />}
-      </Container>
-    </Tooltip>
+    <ToastProvider>
+      <Tooltip
+        title={copied ? copiedTip : tip}
+        {...rest}
+        placement={tipPlacement}
+        disableFocusListener>
+        <Container
+          ref={childrenRef}
+          component="span"
+          style={Object.assign(
+            { fontSize: 'inherit', color: 'inherit', fontWeight: 'inherit' },
+            style
+          )}
+          onClick={() => onCopy(childrenRef)}>
+          {children || content}
+        </Container>
+      </Tooltip>
+    </ToastProvider>
   );
 }
 

package/src/QRCode/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import QRCodeStyling from '@solana/qr-code-styling';
 
@@ -19,8 +19,8 @@ const defaults = {
 // 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
 function QRCode({ data, size, image, config, ...rest }) {
   const ref = React.useRef(null);
-  useEffect(() => {
-    const qrCode = new QRCodeStyling({
+  const options = useMemo(() => {
+    return {
       ...defaults,
       data,
       width: size,
@@ -33,9 +33,22 @@ function QRCode({ data, size, image, config, ...rest }) {
         },
       }),
       ...config,
-    });
-    qrCode.append(ref.current);
-  }, [data, size]);
+    };
+  }, [data, size, image, config]);
+
+  const [qrCode] = useState(new QRCodeStyling(options));
+
+  useEffect(() => {
+    if (ref.current) {
+      qrCode.append(ref.current);
+    }
+  }, [qrCode, ref]);
+
+  useEffect(() => {
+    if (!qrCode) return;
+    qrCode.update(options);
+  }, [data, size, image, config]);
+
   return <div ref={ref} {...rest} />;
 }
 

package/src/Toast/index.js

@@ -1,118 +1,69 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import ErrorIcon from '@mui/icons-material/Error';
-import InfoIcon from '@mui/icons-material/Info';
-import CloseIcon from '@mui/icons-material/Close';
-import WarningIcon from '@mui/icons-material/Warning';
+import { SnackbarProvider, useSnackbar } from 'notistack';
 import IconButton from '@mui/material/IconButton';
-import Snackbar from '@mui/material/Snackbar';
-import SnackbarContent from '@mui/material/SnackbarContent';
-import { amber, green } from '@mui/material/colors';
-import { makeStyles } from '@mui/styles';
+import CloseIcon from '@mui/icons-material/Close';
 
-const variantIcon = {
-  success: CheckCircleIcon,
-  warning: WarningIcon,
-  error: ErrorIcon,
-  info: InfoIcon,
-};
+const noop = () => {};
 
-const useStyles1 = makeStyles(theme => ({
-  success: {
-    backgroundColor: green[600],
-  },
-  error: {
-    backgroundColor: theme.palette.error.dark,
-  },
-  info: {
-    backgroundColor: theme.palette.primary.main,
-  },
-  warning: {
-    backgroundColor: amber[700],
-  },
-  icon: {
-    fontSize: 20,
-  },
-  iconVariant: {
-    opacity: 0.9,
-    marginRight: theme.spacing(1),
-  },
-  message: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-}));
+let success = noop;
+let error = noop;
+let warning = noop;
+let info = noop;
 
-function SnackbarContentWrapper(props) {
-  const classes = useStyles1();
-  const { className, message, onClose, variant, ...rest } = props;
-  const Icon = variantIcon[variant];
+const genFn = (enqueueSnackbar, variant) => (message, opts) => {
+  enqueueSnackbar(message, {
+    autoHideDuration: 3000,
+    variant,
+    ...opts,
+  });
+};
+
+// eslint-disable-next-line react/prop-types
+function ToastProvider({ children }) {
+  const notistackRef = React.createRef();
+  const onClickDismiss = key => () => {
+    notistackRef.current.closeSnackbar(key);
+  };
 
   return (
-    <SnackbarContent
-      className={[classes[variant], className].join(' ').trim()}
-      message={
-        <span id="client-snackbar" className={classes.message}>
-          <Icon className={[classes.icon, classes.iconVariant].join(' ').trim()} />
-          {message}
-        </span>
-      }
-      action={[
-        <IconButton key="close" aria-label="close" color="inherit" onClick={onClose} size="large">
-          <CloseIcon className={classes.icon} />
-        </IconButton>,
-      ]}
-      {...rest}
-    />
+    <SnackbarProvider
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      ref={notistackRef}
+      action={key => (
+        <IconButton
+          key="close"
+          aria-label="close"
+          color="inherit"
+          onClick={onClickDismiss(key)}
+          size="large">
+          <CloseIcon style={{ fontSize: 16 }} />
+        </IconButton>
+      )}>
+      <Toast />
+      {children}
+    </SnackbarProvider>
   );
 }
 
-SnackbarContentWrapper.propTypes = {
-  message: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  variant: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
-};
-
-SnackbarContentWrapper.defaultProps = {
-  className: '',
-  variant: 'success',
-};
-
-export default function Toast({ onClose, variant, duration, message }) {
-  const [open, setOpen] = React.useState(true);
-
-  const handleClose = (e, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
+function Toast() {
+  const { enqueueSnackbar } = useSnackbar();
 
-    setOpen(false);
-    onClose();
-  };
+  success = genFn(enqueueSnackbar, 'success');
+  error = genFn(enqueueSnackbar, 'error');
+  warning = genFn(enqueueSnackbar, 'warning');
+  info = genFn(enqueueSnackbar, 'info');
 
-  return (
-    <Snackbar
-      open={open}
-      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-      autoHideDuration={duration}
-      onClose={handleClose}>
-      <SnackbarContentWrapper onClose={handleClose} variant={variant} message={message} />
-    </Snackbar>
-  );
+  return null;
 }
 
-Toast.propTypes = {
-  message: PropTypes.string.isRequired,
-  variant: PropTypes.string,
-  duration: PropTypes.number,
-  onClose: PropTypes.func,
-};
+export { ToastProvider };
 
-Toast.defaultProps = {
-  variant: 'success',
-  duration: 3000,
-  onClose: () => {},
+export default {
+  success: (...args) => success(...args),
+  error: (...args) => error(...args),
+  warning: (...args) => warning(...args),
+  info: (...args) => info(...args),
 };