Merge pull request #257 from gnosis/158-notifications-improvements

Feature #158: Notifications improvements

src/components/ConnectButton/index.jsx

@@ -1,6 +1,5 @@
 // @flow
 import React from 'react'
-import { connect } from 'react-redux'
 import Web3Connect from 'web3connect'
 import Torus from '@toruslabs/torus-embed'
 import WalletConnectProvider from '@walletconnect/web3-provider'
@@ -54,15 +53,11 @@ web3Connect.on('connect', (provider: any) => {
 })
 
 type Props = {
-  registerProvider: Function,
   enqueueSnackbar: Function,
   closeSnackbar: Function,
 }
 
-const ConnectButton = ({
-  registerProvider, ...props
-}: Props) => (
-
+const ConnectButton = (props: Props) => (
   <Button
     color="primary"
     variant="contained"
@@ -76,7 +71,4 @@ const ConnectButton = ({
   </Button>
 )
 
-export default connect(
-  null,
-  { registerProvider: fetchProvider },
-)(ConnectButton)
+export default ConnectButton

src/components/layout/PageFrame/index.jsx

@@ -6,9 +6,10 @@ import SidebarProvider from '~/components/Sidebar'
 import Header from '~/components/Header'
 import Img from '~/components/layout/Img'
 import Notifier from '~/components/Notifier'
-import AlertLogo from './assets/alert.svg'
-import CheckLogo from './assets/check.svg'
-import ErrorLogo from './assets/error.svg'
+import AlertIcon from './assets/alert.svg'
+import CheckIcon from './assets/check.svg'
+import ErrorIcon from './assets/error.svg'
+import InfoIcon from './assets/info.svg'
 import styles from './index.scss'
 
 const notificationStyles = {
@@ -40,11 +41,11 @@ const notificationStyles = {
     boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
   },
   info: {
-    background: '#e8673c',
+    background: '#ffffff',
     fontFamily: 'Averta',
     fontSize: '14px',
     lineHeight: 1.43,
-    color: '#ffffff',
+    color: '#001428',
     minHeight: '58px',
     boxShadow: '0 0 10px 0 rgba(212, 212, 211, 0.59)',
   },
@@ -67,10 +68,10 @@ const PageFrame = ({ children, classes }: Props) => (
         variantInfo: classes.info,
       }}
       iconVariant={{
-        success: <Img src={CheckLogo} alt="Success" />,
-        error: <Img src={ErrorLogo} alt="Error" />,
-        warning: <Img src={AlertLogo} alt="Warning" />,
-        info: '',
+        success: <Img src={CheckIcon} alt="Success" />,
+        error: <Img src={ErrorIcon} alt="Error" />,
+        warning: <Img src={AlertIcon} alt="Warning" />,
+        info: <Img src={InfoIcon} alt="Info" />,
       }}
     >
       <Notifier />

src/logic/notifications/notificationBuilder.js

@@ -8,101 +8,90 @@ import closeSnackbarAction from '~/logic/notifications/store/actions/closeSnackb
 import { type Notification, NOTIFICATIONS } from './notificationTypes'
 
 export type NotificationsQueue = {
-  beforeExecution: Notification,
-  pendingExecution: {
-    noMoreConfirmationsNeeded: Notification,
-    moreConfirmationsNeeded: Notification,
+  beforeExecution: Notification | null,
+  pendingExecution: Notification | null,
+  afterExecution: {
+    noMoreConfirmationsNeeded: Notification | null,
+    moreConfirmationsNeeded: Notification | null,
   },
-  afterExecution: Notification,
-  afterExecutionError: Notification,
-  afterRejection: Notification,
+  afterExecutionError: Notification | null,
+  afterRejection: Notification | null,
 }
 
 const standardTxNotificationsQueue: NotificationsQueue = {
   beforeExecution: NOTIFICATIONS.SIGN_TX_MSG,
-  pendingExecution: {
-    noMoreConfirmationsNeeded: NOTIFICATIONS.TX_PENDING_MSG,
-    moreConfirmationsNeeded: NOTIFICATIONS.TX_PENDING_MORE_CONFIRMATIONS_MSG,
-  },
+  pendingExecution: NOTIFICATIONS.TX_PENDING_MSG,
   afterRejection: NOTIFICATIONS.TX_REJECTED_MSG,
-  afterExecution: NOTIFICATIONS.TX_EXECUTED_MSG,
+  afterExecution: {
+    noMoreConfirmationsNeeded: NOTIFICATIONS.TX_EXECUTED_MSG,
+    moreConfirmationsNeeded: NOTIFICATIONS.TX_EXECUTED_MORE_CONFIRMATIONS_MSG,
+  },
   afterExecutionError: NOTIFICATIONS.TX_FAILED_MSG,
 }
 
 const confirmationTxNotificationsQueue: NotificationsQueue = {
   beforeExecution: NOTIFICATIONS.SIGN_TX_MSG,
-  pendingExecution: {
-    noMoreConfirmationsNeeded: NOTIFICATIONS.TX_CONFIRMATION_PENDING_MSG,
+  pendingExecution: NOTIFICATIONS.TX_CONFIRMATION_PENDING_MSG,
+  afterRejection: NOTIFICATIONS.TX_REJECTED_MSG,
+  afterExecution: {
+    noMoreConfirmationsNeeded: NOTIFICATIONS.TX_CONFIRMATION_EXECUTED_MSG,
     moreConfirmationsNeeded: null,
   },
-  afterRejection: NOTIFICATIONS.TX_REJECTED_MSG,
-  afterExecution: NOTIFICATIONS.TX_CONFIRMATION_EXECUTED_MSG,
   afterExecutionError: NOTIFICATIONS.TX_CONFIRMATION_FAILED_MSG,
 }
 
 const cancellationTxNotificationsQueue: NotificationsQueue = {
   beforeExecution: NOTIFICATIONS.SIGN_TX_MSG,
-  pendingExecution: {
-    noMoreConfirmationsNeeded: NOTIFICATIONS.TX_PENDING_MSG,
-    moreConfirmationsNeeded: NOTIFICATIONS.TX_PENDING_MORE_CONFIRMATIONS_MSG,
-  },
+  pendingExecution: NOTIFICATIONS.TX_PENDING_MSG,
   afterRejection: NOTIFICATIONS.TX_REJECTED_MSG,
-  afterExecution: NOTIFICATIONS.TX_EXECUTED_MSG,
-  afterExecutionError: NOTIFICATIONS.TX_FAILED_MSG,
-}
-
-const ownerChangeTxNotificationsQueue: NotificationsQueue = {
-  beforeExecution: NOTIFICATIONS.SIGN_OWNER_CHANGE_MSG,
-  pendingExecution: {
-    noMoreConfirmationsNeeded: NOTIFICATIONS.OWNER_CHANGE_PENDING_MSG,
-    moreConfirmationsNeeded: NOTIFICATIONS.OWNER_CHANGE_PENDING_MORE_CONFIRMATIONS_MSG,
+  afterExecution: {
+    noMoreConfirmationsNeeded: NOTIFICATIONS.TX_EXECUTED_MSG,
+    moreConfirmationsNeeded: NOTIFICATIONS.TX_EXECUTED_MORE_CONFIRMATIONS_MSG,
   },
-  afterRejection: NOTIFICATIONS.OWNER_CHANGE_REJECTED_MSG,
-  afterExecution: NOTIFICATIONS.OWNER_CHANGE_EXECUTED_MSG,
-  afterExecutionError: NOTIFICATIONS.OWNER_CHANGE_FAILED_MSG,
+  afterExecutionError: NOTIFICATIONS.TX_FAILED_MSG,
 }
 
 const safeNameChangeNotificationsQueue: NotificationsQueue = {
   beforeExecution: null,
-  pendingExecution: {
-    noMoreConfirmationsNeeded: null,
+  pendingExecution: null,
+  afterRejection: null,
+  afterExecution: {
+    noMoreConfirmationsNeeded: NOTIFICATIONS.SAFE_NAME_CHANGED_MSG,
     moreConfirmationsNeeded: null,
   },
-  afterRejection: null,
-  afterExecution: NOTIFICATIONS.SAFE_NAME_CHANGED_MSG,
   afterExecutionError: null,
 }
 
 const ownerNameChangeNotificationsQueue: NotificationsQueue = {
   beforeExecution: null,
-  pendingExecution: {
-    noMoreConfirmationsNeeded: null,
+  pendingExecution: null,
+  afterRejection: null,
+  afterExecution: {
+    noMoreConfirmationsNeeded: NOTIFICATIONS.OWNER_NAME_CHANGE_EXECUTED_MSG,
     moreConfirmationsNeeded: null,
   },
-  afterRejection: null,
-  afterExecution: NOTIFICATIONS.OWNER_NAME_CHANGE_EXECUTED_MSG,
   afterExecutionError: null,
 }
 
-const thresholdChangeTxNotificationsQueue: NotificationsQueue = {
-  beforeExecution: NOTIFICATIONS.SIGN_THRESHOLD_CHANGE_MSG,
-  pendingExecution: {
-    noMoreConfirmationsNeeded: NOTIFICATIONS.THRESHOLD_CHANGE_PENDING_MSG,
-    moreConfirmationsNeeded: NOTIFICATIONS.THRESHOLD_CHANGE_PENDING_MORE_CONFIRMATIONS_MSG,
+const settingsChangeTxNotificationsQueue: NotificationsQueue = {
+  beforeExecution: NOTIFICATIONS.SIGN_SETTINGS_CHANGE_MSG,
+  pendingExecution: NOTIFICATIONS.SETTINGS_CHANGE_PENDING_MSG,
+  afterRejection: NOTIFICATIONS.SETTINGS_CHANGE_REJECTED_MSG,
+  afterExecution: {
+    noMoreConfirmationsNeeded: NOTIFICATIONS.SETTINGS_CHANGE_EXECUTED_MSG,
+    moreConfirmationsNeeded: NOTIFICATIONS.SETTINGS_CHANGE_EXECUTED_MORE_CONFIRMATIONS_MSG,
   },
-  afterRejection: NOTIFICATIONS.THRESHOLD_CHANGE_REJECTED_MSG,
-  afterExecution: NOTIFICATIONS.THRESHOLD_CHANGE_EXECUTED_MSG,
-  afterExecutionError: NOTIFICATIONS.THRESHOLD_CHANGE_FAILED_MSG,
+  afterExecutionError: NOTIFICATIONS.SETTINGS_CHANGE_FAILED_MSG,
 }
 
 const defaultNotificationsQueue: NotificationsQueue = {
   beforeExecution: NOTIFICATIONS.SIGN_TX_MSG,
-  pendingExecution: {
-    noMoreConfirmationsNeeded: NOTIFICATIONS.TX_PENDING_MSG,
-    moreConfirmationsNeeded: NOTIFICATIONS.TX_PENDING_MORE_CONFIRMATIONS_MSG,
-  },
+  pendingExecution: NOTIFICATIONS.TX_PENDING_MSG,
   afterRejection: NOTIFICATIONS.TX_REJECTED_MSG,
-  afterExecution: NOTIFICATIONS.TX_EXECUTED_MSG,
+  afterExecution: {
+    noMoreConfirmationsNeeded: NOTIFICATIONS.TX_EXECUTED_MSG,
+    moreConfirmationsNeeded: NOTIFICATIONS.TX_EXECUTED_MORE_CONFIRMATIONS_MSG,
+  },
   afterExecutionError: NOTIFICATIONS.TX_FAILED_MSG,
 }
 
@@ -122,8 +111,8 @@ export const getNotificationsFromTxType = (txType: string) => {
       notificationsQueue = cancellationTxNotificationsQueue
       break
     }
-    case TX_NOTIFICATION_TYPES.OWNER_CHANGE_TX: {
-      notificationsQueue = ownerChangeTxNotificationsQueue
+    case TX_NOTIFICATION_TYPES.SETTINGS_CHANGE_TX: {
+      notificationsQueue = settingsChangeTxNotificationsQueue
       break
     }
     case TX_NOTIFICATION_TYPES.SAFE_NAME_CHANGE_TX: {
@@ -134,10 +123,6 @@ export const getNotificationsFromTxType = (txType: string) => {
       notificationsQueue = ownerNameChangeNotificationsQueue
       break
     }
-    case TX_NOTIFICATION_TYPES.THRESHOLD_CHANGE_TX: {
-      notificationsQueue = thresholdChangeTxNotificationsQueue
-      break
-    }
     default: {
       notificationsQueue = defaultNotificationsQueue
       break
@@ -151,8 +136,8 @@ export const enhanceSnackbarForAction = (notification: Notification) => ({
   ...notification,
   options: {
     ...notification.options,
-    action: (key) => (
-      <IconButton onClick={() => store.dispatch(closeSnackbarAction(key))}>
+    action: (key: number) => (
+      <IconButton onClick={() => store.dispatch(closeSnackbarAction({ key }))}>
         <IconClose />
       </IconButton>
     ),