From ef229b20b060af53775cac80103fb8f3b722e45b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Fri, 27 Sep 2019 12:00:04 +0200 Subject: [PATCH] Add dimiss notification button --- src/components/Header/index.jsx | 10 +++---- .../notifications/notificationBuilder.js | 16 ++++++++++ .../wallets/store/actions/fetchProvider.js | 29 ++++++++++--------- .../wallets/store/actions/removeProvider.js | 6 ++-- .../Settings/ChangeSafeName/index.jsx | 7 +++-- .../ManageOwners/EditOwnerModal/index.jsx | 6 ++-- .../safe/store/actions/createTransaction.js | 25 +++++++++------- .../safe/store/actions/processTransaction.js | 26 +++++++++-------- 8 files changed, 76 insertions(+), 49 deletions(-) diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 3c173314..c4b53361 100644 --- a/src/components/Header/index.jsx +++ b/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 { } 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 () => { diff --git a/src/logic/notifications/notificationBuilder.js b/src/logic/notifications/notificationBuilder.js index f528f24f..85d4dfdb 100644 --- a/src/logic/notifications/notificationBuilder.js +++ b/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) => ( + closeSnackbar(key)}> + + + ), +}) diff --git a/src/logic/wallets/store/actions/fetchProvider.js b/src/logic/wallets/store/actions/fetchProvider.js index 82a4f378..f12fdf00 100644 --- a/src/logic/wallets/store/actions/fetchProvider.js +++ b/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) } diff --git a/src/logic/wallets/store/actions/removeProvider.js b/src/logic/wallets/store/actions/removeProvider.js index cb2e6120..ac81f7d6 100644 --- a/src/logic/wallets/store/actions/removeProvider.js +++ b/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)) } diff --git a/src/routes/safe/components/Settings/ChangeSafeName/index.jsx b/src/routes/safe/components/Settings/ChangeSafeName/index.jsx index 90c392fb..95ca1c05 100644 --- a/src/routes/safe/components/Settings/ChangeSafeName/index.jsx +++ b/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 ( diff --git a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx index 96147765..186b386d 100644 --- a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx +++ b/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() } diff --git a/src/routes/safe/store/actions/createTransaction.js b/src/routes/safe/store/actions/createTransaction.js index bc06da1e..de5eee45 100644 --- a/src/routes/safe/store/actions/createTransaction.js +++ b/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) diff --git a/src/routes/safe/store/actions/processTransaction.js b/src/routes/safe/store/actions/processTransaction.js index 7164f54a..0e481946 100644 --- a/src/routes/safe/store/actions/processTransaction.js +++ b/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)