Enqueue Snackbar in provider notifications

src/components/Header/index.jsx

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import { connect } from 'react-redux'
-import { useSnackbar } from 'notistack'
+import { withSnackbar } from 'notistack'
 import { logComponentStack, type Info } from '~/utils/logBoundaries'
 import { WALLET_ERROR_MSG } from '~/logic/wallets/store/actions'
 import { getProviderInfo } from '~/logic/wallets/getWeb3'
@@ -18,7 +18,7 @@ type Variant = 'success' | 'error' | 'warning' | 'info'
 
 type Props = Actions &
   SelectorProps & {
-    openSnackbar: (message: string, variant: Variant) => void,
+    enqueueSnackbar: (message: string, variant: Variant) => void,
   }
 
 type State = {
@@ -41,31 +41,33 @@ class HeaderComponent extends React.PureComponent<Props, State> {
   }
 
   componentDidCatch(error: Error, info: Info) {
-    const { openSnackbar } = this.props
+    const { enqueueSnackbar } = this.props
+
     this.setState({ hasError: true })
-    openSnackbar(WALLET_ERROR_MSG, 'error')
+    enqueueSnackbar(WALLET_ERROR_MSG, 'error')
 
     logComponentStack(error, info)
   }
 
   onDisconnect = () => {
-    const { removeProvider, openSnackbar } = this.props
+    const { removeProvider, enqueueSnackbar } = this.props
+
     clearInterval(this.providerListener)
 
-    removeProvider(openSnackbar)
+    removeProvider(enqueueSnackbar)
   }
 
   onConnect = async () => {
-    const { fetchProvider, openSnackbar } = this.props
+    const { fetchProvider, enqueueSnackbar } = this.props
 
     clearInterval(this.providerListener)
     let currentProvider: ProviderProps = await getProviderInfo()
-    fetchProvider(currentProvider, openSnackbar)
+    fetchProvider(currentProvider, enqueueSnackbar)
 
     this.providerListener = setInterval(async () => {
       const newProvider: ProviderProps = await getProviderInfo()
       if (JSON.stringify(currentProvider) !== JSON.stringify(newProvider)) {
-        fetchProvider(newProvider, openSnackbar)
+        fetchProvider(newProvider, enqueueSnackbar)
       }
       currentProvider = newProvider
     }, 2000)
@@ -113,15 +115,7 @@ class HeaderComponent extends React.PureComponent<Props, State> {
   }
 }
 
-const Header = connect(
+export default connect(
   selector,
   actions,
-)(HeaderComponent)
+)(withSnackbar(HeaderComponent))
-
-const HeaderSnack = () => {
-  const { enqueueSnackbar } = useSnackbar()
-
-  return <Header openSnackbar={enqueueSnackbar} />
-}
-
-export default HeaderSnack

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

@@ -26,25 +26,25 @@ const UNLOCK_MSG = 'Unlock your wallet to connect'
 const WRONG_NETWORK = 'You are connected to wrong network. Please use RINKEBY'
 export const WALLET_ERROR_MSG = 'Error connecting to your wallet'
 
-const handleProviderNotification = (openSnackbar: Function, provider: ProviderProps) => {
+const handleProviderNotification = (enqueueSnackbar: Function, provider: ProviderProps) => {
   const { loaded, available, network } = provider
 
   if (!loaded) {
-    openSnackbar(WALLET_ERROR_MSG, 'error')
+    enqueueSnackbar(WALLET_ERROR_MSG, 'error')
     return
   }
 
   if (ETHEREUM_NETWORK_IDS[network] !== ETHEREUM_NETWORK.RINKEBY) {
-    openSnackbar(WRONG_NETWORK, 'error')
+    enqueueSnackbar(WRONG_NETWORK, 'error')
     return
   }
 
   const msg = available ? SUCCESS_MSG : UNLOCK_MSG
   const variant = available ? 'success' : 'warning'
-  openSnackbar(msg, variant)
+  enqueueSnackbar(msg, variant)
 }
 
-export default (provider: ProviderProps, openSnackbar: Function) => (dispatch: ReduxDispatch<*>) => {
+export default (provider: ProviderProps, enqueueSnackbar: Function) => (dispatch: ReduxDispatch<*>) => {
-  handleProviderNotification(openSnackbar, provider)
+  handleProviderNotification(enqueueSnackbar, provider)
   processProviderResponse(dispatch, provider)
 }

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

@@ -3,7 +3,7 @@ import type { Dispatch as ReduxDispatch } from 'redux'
 import { makeProvider, type ProviderProps, type Provider } from '~/logic/wallets/store/model/provider'
 import addProvider from './addProvider'
 
-export default (openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => {
+export default (enqueueSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => {
   const providerProps: ProviderProps = {
     name: '',
     available: false,
@@ -13,7 +13,7 @@ export default (openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) =>
   }
 
   const provider: Provider = makeProvider(providerProps)
-  openSnackbar('Wallet disconnected succesfully', 'info')
+  enqueueSnackbar('Wallet disconnected succesfully', 'info')
 
   dispatch(addProvider(provider))
 }