Enqueue Snackbar in Safe settings

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

@@ -1,11 +1,11 @@
 // @flow
 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import { withSnackbar } from 'notistack'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Field from '~/components/forms/Field'
 import Heading from '~/components/layout/Heading'
-import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
 import { composeValidators, required, minMaxLength } from '~/components/forms/validator'
 import TextField from '~/components/forms/TextField'
 import GnoForm from '~/components/forms/GnoForm'
@@ -22,17 +22,17 @@ type Props = {
   safeAddress: string,
   safeName: string,
   updateSafe: Function,
-  openSnackbar: Function,
+  enqueueSnackbar: Function,
 }
 
 const ChangeSafeName = (props: Props) => {
   const {
-    classes, safeAddress, safeName, updateSafe, openSnackbar,
+    classes, safeAddress, safeName, updateSafe, enqueueSnackbar,
   } = props
 
   const handleSubmit = (values) => {
     updateSafe({ address: safeAddress, name: values.safeName })
-    openSnackbar('Safe name changed', 'success')
+    enqueueSnackbar('Safe name changed', 'success')
   }
 
   return (
@@ -80,10 +80,4 @@ const ChangeSafeName = (props: Props) => {
   )
 }
 
-const withSnackbar = (props) => (
-  <SharedSnackbarConsumer>
-    {({ openSnackbar }) => <ChangeSafeName {...props} openSnackbar={openSnackbar} />}
-  </SharedSnackbarConsumer>
-)
-
-export default withStyles(styles)(withSnackbar)
+export default withStyles(styles)(withSnackbar(ChangeSafeName))

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

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react'
 import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
-import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
+import { withSnackbar } from 'notistack'
 import Modal from '~/components/Modal'
 import { type Owner } from '~/routes/safe/store/models/owner'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
@@ -29,6 +29,7 @@ type Props = {
   network: string,
   addSafeOwner: Function,
   createTransaction: Function,
+  enqueueSnackbar: Function,
 }
 type ActiveScreen = 'selectOwner' | 'selectThreshold' | 'reviewAddOwner'
 
@@ -36,14 +37,14 @@ export const sendAddOwner = async (
   values: Object,
   safeAddress: string,
   ownersOld: List<Owner>,
-  openSnackbar: Function,
+  enqueueSnackbar: Function,
   createTransaction: Function,
   addSafeOwner: Function,
 ) => {
   const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
   const txData = gnosisSafe.contract.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI()
 
-  const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar)
+  const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, enqueueSnackbar)
 
   if (txHash) {
     addSafeOwner({ safeAddress, ownerName: values.ownerName, ownerAddress: values.ownerAddress })
@@ -61,6 +62,7 @@ const AddOwner = ({
   network,
   createTransaction,
   addSafeOwner,
+  enqueueSnackbar,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('selectOwner')
   const [values, setValues] = useState<Object>({})
@@ -98,14 +100,10 @@ const AddOwner = ({
     setActiveScreen('reviewAddOwner')
   }
 
-  return (
-    <>
-      <SharedSnackbarConsumer>
-        {({ openSnackbar }) => {
   const onAddOwner = async () => {
     onClose()
     try {
-              sendAddOwner(values, safeAddress, owners, openSnackbar, createTransaction, addSafeOwner)
+      sendAddOwner(values, safeAddress, owners, enqueueSnackbar, createTransaction, addSafeOwner)
     } catch (error) {
       // eslint-disable-next-line
       console.log('Error while removing an owner ' + error)
@@ -147,10 +145,6 @@ const AddOwner = ({
       </>
     </Modal>
   )
-        }}
-      </SharedSnackbarConsumer>
-    </>
-  )
 }
 
-export default withStyles(styles)(AddOwner)
+export default withStyles(styles)(withSnackbar(AddOwner))

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

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react'
 import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
-import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
+import { withSnackbar } from 'notistack'
 import Modal from '~/components/Modal'
 import { type Owner } from '~/routes/safe/store/models/owner'
 import { getGnosisSafeInstanceAt, SENTINEL_ADDRESS } from '~/logic/contracts/safeContracts'
@@ -31,7 +31,9 @@ type Props = {
   network: string,
   createTransaction: Function,
   removeSafeOwner: Function,
+  enqueueSnackbar: Function,
 }
+
 type ActiveScreen = 'checkOwner' | 'selectThreshold' | 'reviewRemoveOwner'
 
 export const sendRemoveOwner = async (
@@ -40,7 +42,7 @@ export const sendRemoveOwner = async (
   ownerAddressToRemove: string,
   ownerNameToRemove: string,
   ownersOld: List<Owner>,
-  openSnackbar: Function,
+  enqueueSnackbar: Function,
   createTransaction: Function,
   removeSafeOwner: Function,
 ) => {
@@ -54,7 +56,7 @@ export const sendRemoveOwner = async (
     .removeOwner(prevAddress, ownerAddressToRemove, values.threshold)
     .encodeABI()
 
-  const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar)
+  const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, enqueueSnackbar)
 
   if (txHash) {
     removeSafeOwner({ safeAddress, ownerAddress: ownerAddressToRemove })
@@ -74,6 +76,7 @@ const RemoveOwner = ({
   network,
   createTransaction,
   removeSafeOwner,
+  enqueueSnackbar,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('checkOwner')
   const [values, setValues] = useState<Object>({})
@@ -104,10 +107,6 @@ const RemoveOwner = ({
     setActiveScreen('reviewRemoveOwner')
   }
 
-  return (
-    <>
-      <SharedSnackbarConsumer>
-        {({ openSnackbar }) => {
   const onRemoveOwner = () => {
     onClose()
     sendRemoveOwner(
@@ -116,7 +115,7 @@ const RemoveOwner = ({
       ownerAddress,
       ownerName,
       owners,
-              openSnackbar,
+      enqueueSnackbar,
       createTransaction,
       removeSafeOwner,
     )
@@ -165,10 +164,6 @@ const RemoveOwner = ({
       </>
     </Modal>
   )
-        }}
-      </SharedSnackbarConsumer>
-    </>
-  )
 }
 
-export default withStyles(styles)(RemoveOwner)
+export default withStyles(styles)(withSnackbar(RemoveOwner))

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

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react'
 import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
-import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
+import { withSnackbar } from 'notistack'
 import Modal from '~/components/Modal'
 import { getGnosisSafeInstanceAt, SENTINEL_ADDRESS } from '~/logic/contracts/safeContracts'
 import OwnerForm from './screens/OwnerForm'
@@ -29,6 +29,7 @@ type Props = {
   threshold: string,
   createTransaction: Function,
   replaceSafeOwner: Function,
+  enqueueSnackbar: Function,
 }
 type ActiveScreen = 'checkOwner' | 'reviewReplaceOwner'
 
@@ -36,7 +37,7 @@ export const sendReplaceOwner = async (
   values: Object,
   safeAddress: string,
   ownerAddressToRemove: string,
-  openSnackbar: Function,
+  enqueueSnackbar: Function,
   createTransaction: Function,
   replaceSafeOwner: Function,
 ) => {
@@ -50,7 +51,7 @@ export const sendReplaceOwner = async (
     .swapOwner(prevAddress, ownerAddressToRemove, values.ownerAddress)
     .encodeABI()
 
-  const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar)
+  const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, enqueueSnackbar)
 
   if (txHash) {
     replaceSafeOwner({
@@ -75,6 +76,7 @@ const ReplaceOwner = ({
   threshold,
   createTransaction,
   replaceSafeOwner,
+  enqueueSnackbar,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('checkOwner')
   const [values, setValues] = useState<Object>({})
@@ -96,10 +98,6 @@ const ReplaceOwner = ({
     setActiveScreen('reviewReplaceOwner')
   }
 
-  return (
-    <>
-      <SharedSnackbarConsumer>
-        {({ openSnackbar }) => {
   const onReplaceOwner = () => {
     onClose()
     try {
@@ -107,7 +105,7 @@ const ReplaceOwner = ({
         values,
         safeAddress,
         ownerAddress,
-                openSnackbar,
+        enqueueSnackbar,
         createTransaction,
         replaceSafeOwner,
       )
@@ -153,10 +151,6 @@ const ReplaceOwner = ({
       </>
     </Modal>
   )
-        }}
-      </SharedSnackbarConsumer>
-    </>
-  )
 }
 
-export default withStyles(styles)(ReplaceOwner)
+export default withStyles(styles)(withSnackbar(ReplaceOwner))

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

@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import { List } from 'immutable'
-import { SharedSnackbarConsumer } from '~/components/SharedSnackBar'
+import { withSnackbar } from 'notistack'
 import Heading from '~/components/layout/Heading'
 import Button from '~/components/layout/Button'
 import Bold from '~/components/layout/Bold'
@@ -22,10 +22,11 @@ type Props = {
   createTransaction: Function,
   safeAddress: string,
   granted: boolean,
+  enqueueSnackbar: Function,
 }
 
 const ThresholdSettings = ({
-  owners, threshold, classes, createTransaction, safeAddress, granted,
+  owners, threshold, classes, createTransaction, safeAddress, granted, enqueueSnackbar,
 }: Props) => {
   const [isModalOpen, setModalOpen] = useState(false)
 
@@ -33,15 +34,11 @@ const ThresholdSettings = ({
     setModalOpen((prevOpen) => !prevOpen)
   }
 
-  return (
-    <>
-      <SharedSnackbarConsumer>
-        {({ openSnackbar }) => {
   const onChangeThreshold = async (newThreshold) => {
     const safeInstance = await getGnosisSafeInstanceAt(safeAddress)
     const txData = safeInstance.contract.methods.changeThreshold(newThreshold).encodeABI()
 
-            createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar)
+    createTransaction(safeAddress, safeAddress, 0, txData, enqueueSnackbar)
   }
 
   return (
@@ -89,10 +86,6 @@ const ThresholdSettings = ({
       </Modal>
     </>
   )
-        }}
-      </SharedSnackbarConsumer>
-    </>
-  )
 }
 
-export default withStyles(styles)(ThresholdSettings)
+export default withStyles(styles)(withSnackbar(ThresholdSettings))