Add dimiss notification button

src/components/Header/index.jsx

@@ -5,7 +5,7 @@ import { withSnackbar } from 'notistack'
 import { logComponentStack, type Info } from '~/utils/logBoundaries'
 import { getProviderInfo } from '~/logic/wallets/getWeb3'
 import type { ProviderProps } from '~/logic/wallets/store/model/provider'
-import { NOTIFICATIONS } from '~/logic/notifications'
+import { NOTIFICATIONS, showSnackbar } from '~/logic/notifications'
 import ProviderAccesible from './component/ProviderInfo/ProviderAccesible'
 import UserDetails from './component/ProviderDetails/UserDetails'
 import ProviderDisconnected from './component/ProviderInfo/ProviderDisconnected'
@@ -39,20 +39,20 @@ class HeaderComponent extends React.PureComponent<Props, State> {
   }
 
   componentDidCatch(error: Error, info: Info) {
-    const { enqueueSnackbar } = this.props
+    const { enqueueSnackbar, closeSnackbar } = this.props
 
     this.setState({ hasError: true })
-    enqueueSnackbar(NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG.message, NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG.options)
+    showSnackbar(NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG, enqueueSnackbar, closeSnackbar)
 
     logComponentStack(error, info)
   }
 
   onDisconnect = () => {
-    const { removeProvider, enqueueSnackbar } = this.props
+    const { removeProvider, enqueueSnackbar, closeSnackbar } = this.props
 
     clearInterval(this.providerListener)
 
-    removeProvider(enqueueSnackbar)
+    removeProvider(enqueueSnackbar, closeSnackbar)
   }
 
   onConnect = async () => {

src/logic/notifications/notificationBuilder.js

@@ -1,4 +1,7 @@
 // @flow
+import * as React from 'react'
+import { IconButton } from '@material-ui/core'
+import { Close as IconClose } from '@material-ui/icons'
 import { NOTIFIED_TRANSACTIONS } from '~/logic/safe/transactions'
 import { type Notification, NOTIFICATIONS } from './notificationTypes'
 
@@ -141,3 +144,16 @@ export const getNofiticationsFromTxType = (txType: string) => {
 
   return notificationsQueue
 }
+
+export const showSnackbar = (
+  notification: Notification,
+  enqueueSnackbar: Function,
+  closeSnackbar: Function,
+) => enqueueSnackbar(notification.message, {
+  ...notification.options,
+  action: (key) => (
+    <IconButton onClick={() => closeSnackbar(key)}>
+      <IconClose />
+    </IconButton>
+  ),
+})

src/logic/wallets/store/actions/fetchProvider.js

@@ -3,7 +3,7 @@ import type { Dispatch as ReduxDispatch } from 'redux'
 import { ETHEREUM_NETWORK_IDS, ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3'
 import type { ProviderProps } from '~/logic/wallets/store/model/provider'
 import { makeProvider } from '~/logic/wallets/store/model/provider'
-import { NOTIFICATIONS } from '~/logic/notifications'
+import { NOTIFICATIONS, showSnackbar } from '~/logic/notifications'
 // import enqueueSnackbar as enqueueSnackbarAction from '~/logic/notifications/store/actions/enqueueSnackbar'
 // import closeSnackbar as closeSnackbarAction from '~/logic/notifications/store/actions/closeSnackbar'
 import addProvider from './addProvider'
@@ -24,22 +24,24 @@ export const processProviderResponse = (dispatch: ReduxDispatch<*>, provider: Pr
   dispatch(addProvider(walletRecord))
 }
 
-const handleProviderNotification = (dispatch: ReduxDispatch<*>, provider: ProviderProps, enqueueSnackbar: Function) => {
+const handleProviderNotification = (
+  dispatch: ReduxDispatch<*>,
+  provider: ProviderProps,
+  enqueueSnackbar: Function,
+  closeSnackbar: Function,
+) => {
   const { loaded, available, network } = provider
 
   if (!loaded) {
-    enqueueSnackbar(NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG.message, NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG.options)
+    showSnackbar(NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG, enqueueSnackbar, closeSnackbar)
     return
   }
 
   if (ETHEREUM_NETWORK_IDS[network] !== ETHEREUM_NETWORK.RINKEBY) {
-    enqueueSnackbar(
-      NOTIFICATIONS.WRONG_NETWORK_RINKEBY_MSG.message,
-      NOTIFICATIONS.WRONG_NETWORK_RINKEBY_MSG.options,
-    )
+    showSnackbar(NOTIFICATIONS.WRONG_NETWORK_RINKEBY_MSG, enqueueSnackbar, closeSnackbar)
     return
   }
-  enqueueSnackbar(NOTIFICATIONS.RINKEBY_VERSION_MSG.message, NOTIFICATIONS.RINKEBY_VERSION_MSG.options)
+  showSnackbar(NOTIFICATIONS.RINKEBY_VERSION_MSG, enqueueSnackbar, closeSnackbar)
 
   if (available) {
     // NOTE:
@@ -47,14 +49,15 @@ const handleProviderNotification = (dispatch: ReduxDispatch<*>, provider: Provid
     // you SHOULD pass your own `key` in the options. `key` can be any sequence
     // of number or characters, but it has to be unique to a given snackbar.
 
-    // dispatch(enqueueSnackbarAction(NOTIFICATIONS.WALLET_CONNECTED_MSG))
-    enqueueSnackbar(NOTIFICATIONS.WALLET_CONNECTED_MSG.message, NOTIFICATIONS.WALLET_CONNECTED_MSG.options)
+    showSnackbar(NOTIFICATIONS.WALLET_CONNECTED_MSG, enqueueSnackbar, closeSnackbar)
   } else {
-    enqueueSnackbar(NOTIFICATIONS.UNLOCK_WALLET_MSG.message, NOTIFICATIONS.UNLOCK_WALLET_MSG.options)
+    showSnackbar(NOTIFICATIONS.UNLOCK_WALLET_MSG, enqueueSnackbar, closeSnackbar)
   }
 }
 
-export default (provider: ProviderProps, enqueueSnackbar: Function) => (dispatch: ReduxDispatch<*>) => {
-  handleProviderNotification(dispatch, provider, enqueueSnackbar)
+export default (provider: ProviderProps, enqueueSnackbar: Function, closeSnackbar: Function) => (
+  dispatch: ReduxDispatch<*>,
+) => {
+  handleProviderNotification(dispatch, provider, enqueueSnackbar, closeSnackbar)
   processProviderResponse(dispatch, provider)
 }

src/logic/wallets/store/actions/removeProvider.js

@@ -1,10 +1,10 @@
 // @flow
 import type { Dispatch as ReduxDispatch } from 'redux'
 import { makeProvider, type ProviderProps, type Provider } from '~/logic/wallets/store/model/provider'
-import { NOTIFICATIONS } from '~/logic/notifications'
+import { NOTIFICATIONS, showSnackbar } from '~/logic/notifications'
 import addProvider from './addProvider'
 
-export default (enqueueSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => {
+export default (enqueueSnackbar: Function, closeSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => {
   const providerProps: ProviderProps = {
     name: '',
     available: false,
@@ -14,7 +14,7 @@ export default (enqueueSnackbar: Function) => async (dispatch: ReduxDispatch<*>)
   }
 
   const provider: Provider = makeProvider(providerProps)
-  enqueueSnackbar(NOTIFICATIONS.WALLET_DISCONNECTED_MSG.message, NOTIFICATIONS.WALLET_DISCONNECTED_MSG.options)
+  showSnackbar(NOTIFICATIONS.WALLET_DISCONNECTED_MSG, enqueueSnackbar, closeSnackbar)
 
   dispatch(addProvider(provider))
 }

src/routes/safe/components/Settings/ChangeSafeName/index.jsx

@@ -12,7 +12,7 @@ import GnoForm from '~/components/forms/GnoForm'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
-import { getNofiticationsFromTxType } from '~/logic/notifications'
+import { getNofiticationsFromTxType, showSnackbar } from '~/logic/notifications'
 import { NOTIFIED_TRANSACTIONS } from '~/logic/safe/transactions'
 import { styles } from './style'
 
@@ -25,18 +25,19 @@ type Props = {
   safeName: string,
   updateSafe: Function,
   enqueueSnackbar: Function,
+  closeSnackbar: Function,
 }
 
 const ChangeSafeName = (props: Props) => {
   const {
-    classes, safeAddress, safeName, updateSafe, enqueueSnackbar,
+    classes, safeAddress, safeName, updateSafe, enqueueSnackbar, closeSnackbar,
   } = props
 
   const handleSubmit = (values) => {
     updateSafe({ address: safeAddress, name: values.safeName })
 
     const notification = getNofiticationsFromTxType(NOTIFIED_TRANSACTIONS.SAFE_NAME_CHANGE_TX)
-    enqueueSnackbar(notification.afterExecution.message, notification.afterExecution.options)
+    showSnackbar(notification.afterExecution, enqueueSnackbar, closeSnackbar)
   }
 
   return (

src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx

@@ -16,7 +16,7 @@ import TextField from '~/components/forms/TextField'
 import Paragraph from '~/components/layout/Paragraph'
 import Identicon from '~/components/Identicon'
 import { composeValidators, required, minMaxLength } from '~/components/forms/validator'
-import { getNofiticationsFromTxType } from '~/logic/notifications'
+import { getNofiticationsFromTxType, showSnackbar } from '~/logic/notifications'
 import { NOTIFIED_TRANSACTIONS } from '~/logic/safe/transactions'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import Modal from '~/components/Modal'
@@ -41,6 +41,7 @@ type Props = {
   selectedOwnerName: string,
   editSafeOwner: Function,
   enqueueSnackbar: Function,
+  closeSnackbar: Function,
 }
 
 const EditOwnerComponent = ({
@@ -53,12 +54,13 @@ const EditOwnerComponent = ({
   editSafeOwner,
   network,
   enqueueSnackbar,
+  closeSnackbar,
 }: Props) => {
   const handleSubmit = (values) => {
     editSafeOwner({ safeAddress, ownerAddress, ownerName: values.ownerName })
 
     const notification = getNofiticationsFromTxType(NOTIFIED_TRANSACTIONS.OWNER_NAME_CHANGE_TX)
-    enqueueSnackbar(notification.afterExecution.message, notification.afterExecution.options)
+    showSnackbar(notification.afterExecution, enqueueSnackbar, closeSnackbar)
 
     onClose()
   }

src/routes/safe/store/actions/createTransaction.js

@@ -14,7 +14,12 @@ import {
   TX_TYPE_EXECUTION,
   saveTxToHistory,
 } from '~/logic/safe/transactions'
-import { getNofiticationsFromTxType, type NotificationsQueue } from '~/logic/notifications'
+import {
+  type Notification,
+  type NotificationsQueue,
+  getNofiticationsFromTxType,
+  showSnackbar,
+} from '~/logic/notifications'
 import { getErrorMessage } from '~/test/utils/ethereumErrors'
 import { ZERO_ADDRESS } from '~/logic/wallets/ethAddresses'
 
@@ -43,10 +48,7 @@ const createTransaction = (
   )}000000000000000000000000000000000000000000000000000000000000000001`
 
   const notificationsQueue: NotificationsQueue = getNofiticationsFromTxType(notifiedTransaction)
-  const beforeExecutionKey = enqueueSnackbar(
-    notificationsQueue.beforeExecution.message,
-    notificationsQueue.beforeExecution.options,
-  )
+  const beforeExecutionKey = showSnackbar(notificationsQueue.beforeExecution, enqueueSnackbar, closeSnackbar)
   let pendingExecutionKey
 
   let txHash
@@ -69,12 +71,13 @@ const createTransaction = (
       .once('transactionHash', (hash) => {
         txHash = hash
         closeSnackbar(beforeExecutionKey)
-        pendingExecutionKey = enqueueSnackbar(
-          (shouldExecute)
+        const pendingExecutionNotification: Notification = {
+          message: isExecution
             ? notificationsQueue.pendingExecution.single.message
             : notificationsQueue.pendingExecution.multiple.message,
-          notificationsQueue.pendingExecution.single.options,
-        )
+          options: notificationsQueue.pendingExecution.single.options,
+        }
+        pendingExecutionKey = showSnackbar(pendingExecutionNotification, enqueueSnackbar, closeSnackbar)
       })
       .on('error', (error) => {
         console.error('Tx error: ', error)
@@ -93,7 +96,7 @@ const createTransaction = (
           isExecution ? TX_TYPE_EXECUTION : TX_TYPE_CONFIRMATION,
         )
         if (isExecution) {
-          enqueueSnackbar(notificationsQueue.afterExecution.message, notificationsQueue.afterExecution.options)
+          showSnackbar(notificationsQueue.afterExecution, enqueueSnackbar, closeSnackbar)
         }
 
         return receipt.transactionHash
@@ -101,7 +104,7 @@ const createTransaction = (
   } catch (err) {
     closeSnackbar(beforeExecutionKey)
     closeSnackbar(pendingExecutionKey)
-    enqueueSnackbar(notificationsQueue.afterExecutionError.message, notificationsQueue.afterExecutionError.options)
+    showSnackbar(notificationsQueue.afterExecutionError, enqueueSnackbar, closeSnackbar)
 
     const executeDataUsedSignatures = safeInstance.contract.methods
       .execTransaction(to, valueInWei, txData, CALL, 0, 0, 0, ZERO_ADDRESS, ZERO_ADDRESS, sigs)

src/routes/safe/store/actions/processTransaction.js

@@ -6,7 +6,6 @@ import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions'
 import { type GlobalState } from '~/store'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 import {
-  type NotificationsQueue,
   getApprovalTransaction,
   getExecutionTransaction,
   CALL,
@@ -14,7 +13,12 @@ import {
   TX_TYPE_EXECUTION,
   TX_TYPE_CONFIRMATION,
 } from '~/logic/safe/transactions'
-import { getNofiticationsFromTxType } from '~/logic/notifications'
+import {
+  type Notification,
+  type NotificationsQueue,
+  getNofiticationsFromTxType,
+  showSnackbar,
+} from '~/logic/notifications'
 import { getErrorMessage } from '~/test/utils/ethereumErrors'
 
 // https://gnosis-safe.readthedocs.io/en/latest/contracts/signatures.html#pre-validated-signatures
@@ -65,10 +69,7 @@ const processTransaction = (
   }
 
   const notificationsQueue: NotificationsQueue = getNofiticationsFromTxType(notifiedTransaction)
-  const beforeExecutionKey = enqueueSnackbar(
-    notificationsQueue.beforeExecution.message,
-    notificationsQueue.beforeExecution.options,
-  )
+  const beforeExecutionKey = showSnackbar(notificationsQueue.beforeExecution, enqueueSnackbar, closeSnackbar)
   let pendingExecutionKey
 
   let txHash
@@ -100,10 +101,11 @@ const processTransaction = (
       .once('transactionHash', (hash) => {
         txHash = hash
         closeSnackbar(beforeExecutionKey)
-        pendingExecutionKey = enqueueSnackbar(
-          notificationsQueue.pendingExecution.single.message,
-          notificationsQueue.pendingExecution.single.options,
-        )
+        const notification: Notification = {
+          message: notificationsQueue.pendingExecution.single.message,
+          options: notificationsQueue.pendingExecution.single.options,
+        }
+        pendingExecutionKey = showSnackbar(notification, enqueueSnackbar, closeSnackbar)
       })
       .on('error', (error) => {
         console.error('Processing transaction error: ', error)
@@ -121,14 +123,14 @@ const processTransaction = (
           from,
           shouldExecute ? TX_TYPE_EXECUTION : TX_TYPE_CONFIRMATION,
         )
-        enqueueSnackbar(notificationsQueue.afterExecution.message, notificationsQueue.afterExecution.options)
+        showSnackbar(notificationsQueue.afterExecution, enqueueSnackbar, closeSnackbar)
 
         return receipt.transactionHash
       })
   } catch (err) {
     closeSnackbar(beforeExecutionKey)
     closeSnackbar(pendingExecutionKey)
-    enqueueSnackbar(notificationsQueue.afterExecutionError.message, notificationsQueue.afterExecutionError.options)
+    showSnackbar(notificationsQueue.afterExecutionError, enqueueSnackbar, closeSnackbar)
 
     const executeData = safeInstance.contract.methods.approveHash(txHash).encodeABI()
     const errMsg = await getErrorMessage(safeInstance.address, 0, executeData, from)