Add notification categories

src/components/Header/index.jsx

@@ -14,10 +14,10 @@ import Layout from './component/Layout'
 import actions, { type Actions } from './actions'
 import selector, { type SelectorProps } from './selector'
 
-const SUCCESS = 'SUCCESS'
+export const SUCCESS = 'success'
-const ERROR = 'ERROR'
+export const ERROR = 'error'
-const WARNING = 'WARNING'
+export const WARNING = 'warning'
-const INFO = 'INFO'
+export const INFO = 'info'
 
 export type Variant = SUCCESS | ERROR | WARNING | INFO
 
@@ -49,7 +49,7 @@ class HeaderComponent extends React.PureComponent<Props, State> {
     const { enqueueSnackbar } = this.props
 
     this.setState({ hasError: true })
-    enqueueSnackbar(WALLET_ERROR_MSG, 'error')
+    enqueueSnackbar(WALLET_ERROR_MSG, { variant: ERROR })
 
     logComponentStack(error, info)
   }

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

@@ -3,7 +3,9 @@ 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 { type Variant } from '~/components/Header'
+import {
+  type Variant, SUCCESS, ERROR, WARNING,
+} from '~/components/Header'
 import addProvider from './addProvider'
 
 export const processProviderResponse = (dispatch: ReduxDispatch<*>, provider: ProviderProps) => {
@@ -22,9 +24,12 @@ export const processProviderResponse = (dispatch: ReduxDispatch<*>, provider: Pr
   dispatch(addProvider(walletRecord))
 }
 
-const SUCCESS_MSG = 'Wallet connected sucessfully'
+
+const CONNECT_WALLET_MSG = 'Please connect wallet to continue'
+const CONNECT_WALLET_READ_MODE_MSG = 'You are in read-only mode: Please connect wallet'
 const UNLOCK_MSG = 'Unlock your wallet to connect'
-const WRONG_NETWORK = 'You are connected to wrong network. Please use RINKEBY'
+const WRONG_NETWORK_RINKEBY_MSG = 'Wrong network: Please use Rinkeby'
+const SUCCESS_MSG = 'Wallet connected'
 export const WALLET_ERROR_MSG = 'Error connecting to your wallet'
 
 const handleProviderNotification = (
@@ -34,17 +39,17 @@ const handleProviderNotification = (
   const { loaded, available, network } = provider
 
   if (!loaded) {
-    enqueueSnackbar(WALLET_ERROR_MSG, 'error')
+    enqueueSnackbar(WALLET_ERROR_MSG, { variant: ERROR })
     return
   }
 
   if (ETHEREUM_NETWORK_IDS[network] !== ETHEREUM_NETWORK.RINKEBY) {
-    enqueueSnackbar(WRONG_NETWORK, 'error')
+    enqueueSnackbar(WRONG_NETWORK_RINKEBY_MSG, { variant: ERROR, persist: true })
     return
   }
 
   const msg = available ? SUCCESS_MSG : UNLOCK_MSG
-  const variant = available ? 'success' : 'warning'
+  const variant = { variant: (available ? SUCCESS : WARNING) }
   enqueueSnackbar(msg, variant)
 }
 

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

@@ -1,7 +1,7 @@
 // @flow
 import type { Dispatch as ReduxDispatch } from 'redux'
 import { makeProvider, type ProviderProps, type Provider } from '~/logic/wallets/store/model/provider'
-import { type Variant } from '~/components/Header'
+import { type Variant, INFO } from '~/components/Header'
 import addProvider from './addProvider'
 
 export default (enqueueSnackbar: (message: string, variant: Variant) => void) => async (dispatch: ReduxDispatch<*>) => {
@@ -14,7 +14,7 @@ export default (enqueueSnackbar: (message: string, variant: Variant) => void) =>
   }
 
   const provider: Provider = makeProvider(providerProps)
-  enqueueSnackbar('Wallet disconnected succesfully', 'info')
+  enqueueSnackbar('Wallet disconnected succesfully', { variant: INFO })
 
   dispatch(addProvider(provider))
 }

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

@@ -12,7 +12,8 @@ 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 { type Variant } from '~/components/Header'
+import { type Variant, SUCCESS } from '~/components/Header'
+import { NOTIFICATIONS } from '~/logic/notifications'
 import { styles } from './style'
 
 export const SAFE_NAME_INPUT_TEST_ID = 'safe-name-input'
@@ -33,7 +34,7 @@ const ChangeSafeName = (props: Props) => {
 
   const handleSubmit = (values) => {
     updateSafe({ address: safeAddress, name: values.safeName })
-    enqueueSnackbar('Safe name changed', 'success')
+    enqueueSnackbar(NOTIFICATIONS.SAFE_NAME_CHANGED_MSG, { variant: SUCCESS })
   }
 
   return (

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

@@ -9,10 +9,12 @@ import {
   approveTransaction,
   executeTransaction,
   CALL,
-  type Notifications,
-  DEFAULT_NOTIFICATIONS,
 } from '~/logic/safe/transactions'
-import { type Variant } from '~/components/Header'
+import {
+  type Notifications,
+  NOTIFICATIONS,
+} from '~/logic/notifications'
+import { type Variant, SUCCESS, ERROR } from '~/components/Header'
 
 const createTransaction = (
   safeAddress: string,
@@ -21,7 +23,7 @@ const createTransaction = (
   txData: string = EMPTY_DATA,
   enqueueSnackbar: (message: string, variant: Variant) => void,
   shouldExecute?: boolean,
-  notifications?: Notifications = DEFAULT_NOTIFICATIONS,
+  notifications?: Notifications = NOTIFICATIONS,
 ) => async (dispatch: ReduxDispatch<GlobalState>, getState: GetState<GlobalState>) => {
   const state: GlobalState = getState()
 
@@ -34,16 +36,16 @@ const createTransaction = (
   let txHash
   try {
     if (isExecution) {
-      const showNotification = () => enqueueSnackbar(notifications.BEFORE_EXECUTION_OR_CREATION, 'success')
+      const showNotification = () => enqueueSnackbar(notifications.BEFORE_EXECUTION_OR_CREATION, { variant: SUCCESS })
       txHash = await executeTransaction(showNotification, safeInstance, to, valueInWei, txData, CALL, nonce, from)
-      enqueueSnackbar(notifications.AFTER_EXECUTION, 'success')
+      enqueueSnackbar(notifications.AFTER_EXECUTION, { variant: SUCCESS })
     } else {
-      const showNotification = () => enqueueSnackbar(notifications.BEFORE_EXECUTION_OR_CREATION, 'success')
+      const showNotification = () => enqueueSnackbar(notifications.BEFORE_EXECUTION_OR_CREATION, { variant: SUCCESS })
       txHash = await approveTransaction(showNotification, safeInstance, to, valueInWei, txData, CALL, nonce, from)
-      enqueueSnackbar(notifications.CREATED_MORE_CONFIRMATIONS_NEEDED, 'success')
+      enqueueSnackbar(notifications.CREATED_MORE_CONFIRMATIONS_NEEDED, { variant: SUCCESS })
     }
   } catch (err) {
-    enqueueSnackbar(notifications.ERROR, 'error')
+    enqueueSnackbar(notifications.ERROR, { variant: ERROR })
     console.error(`Error while creating transaction: ${err}`)
   }
 

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

@@ -6,7 +6,7 @@ import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions'
 import { type GlobalState } from '~/store'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 import { approveTransaction, executeTransaction, CALL } from '~/logic/safe/transactions'
-import { type Variant } from '~/components/Header'
+import { type Variant, SUCCESS } from '~/components/Header'
 
 // https://gnosis-safe.readthedocs.io/en/latest/contracts/signatures.html#pre-validated-signatures
 // https://github.com/gnosis/safe-contracts/blob/master/test/gnosisSafeTeamEdition.js#L26
@@ -47,7 +47,7 @@ const processTransaction = (
 
   let txHash
   if (shouldExecute) {
-    const showNotification = () => enqueueSnackbar('Transaction has been submitted', 'success')
+    const showNotification = () => enqueueSnackbar('Transaction has been submitted', { variant: SUCCESS })
     txHash = await executeTransaction(
       showNotification,
       safeInstance,
@@ -59,9 +59,9 @@ const processTransaction = (
       from,
       sigs,
     )
-    enqueueSnackbar('Transaction has been confirmed', 'success')
+    enqueueSnackbar('Transaction has been confirmed', { variant: SUCCESS })
   } else {
-    const showNotification = () => enqueueSnackbar('Approval transaction has been submitted', 'success')
+    const showNotification = () => enqueueSnackbar('Approval transaction has been submitted', { variant: SUCCESS })
     txHash = await approveTransaction(
       showNotification,
       safeInstance,
@@ -72,7 +72,7 @@ const processTransaction = (
       nonce,
       from,
     )
-    enqueueSnackbar('Approval transaction has been confirmed', 'success')
+    enqueueSnackbar('Approval transaction has been confirmed', { variant: SUCCESS })
   }
 
   dispatch(fetchTransactions(safeAddress))