Feature 309: Listen for web3connect disconnect event (#324)

* add 'disconnect' event listener for web3connect

* Update web3connect, set preventDuplicate to true for disconnected message

Co-authored-by: Germán Martínez <germartinez@users.noreply.github.com>

package.json

@@ -76,7 +76,7 @@
     "semver": "^7.1.1",
     "squarelink": "^1.1.4",
     "web3": "1.2.4",
-    "web3connect": "^1.0.0-beta.23"
+    "web3connect": "^1.0.0-beta.25"
   },
   "devDependencies": {
     "@babel/cli": "7.7.5",

src/components/ConnectButton/index.jsx

@@ -7,7 +7,7 @@ import Fortmatic from 'fortmatic'
 import Portis from '@portis/web3'
 import Squarelink from 'squarelink'
 import Button from '~/components/layout/Button'
-import { fetchProvider } from '~/logic/wallets/store/actions'
+import { fetchProvider, removeProvider } from '~/logic/wallets/store/actions'
 import { getNetwork } from '~/config'
 import { store } from '~/store'
 
@@ -62,6 +62,10 @@ web3Connect.on('connect', (provider: any) => {
   }
 })
 
+web3Connect.on('disconnect', () => {
+  store.dispatch(removeProvider())
+})
+
 type Props = {
   enqueueSnackbar: Function,
   closeSnackbar: Function,

src/logic/notifications/notificationTypes.js

@@ -89,6 +89,7 @@ export const NOTIFICATIONS: Notifications = {
       variant: SUCCESS,
       persist: false,
       autoHideDuration: shortDuration,
+      preventDuplicate: true,
     },
   },
   UNLOCK_WALLET_MSG: {

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

@@ -1,15 +1,16 @@
 // @flow
 import { createAction } from 'redux-actions'
 import type { Dispatch as ReduxDispatch } from 'redux'
-import { NOTIFICATIONS, showSnackbar } from '~/logic/notifications'
+import { NOTIFICATIONS, enhanceSnackbarForAction } from '~/logic/notifications'
 import { getWeb3, resetWeb3 } from '~/logic/wallets/getWeb3'
+import enqueueSnackbar from '~/logic/notifications/store/actions/enqueueSnackbar'
 
 export const REMOVE_PROVIDER = 'REMOVE_PROVIDER'
 
 const removeProvider = createAction<string, *, *>(REMOVE_PROVIDER)
 
-export default (enqueueSnackbar: Function, closeSnackbar: Function) => (dispatch: ReduxDispatch<*>) => {
-  showSnackbar(NOTIFICATIONS.WALLET_DISCONNECTED_MSG, enqueueSnackbar, closeSnackbar)
+export default () => (dispatch: ReduxDispatch<*>) => {
+  dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.WALLET_DISCONNECTED_MSG)))
 
   const web3 = getWeb3()