diff --git a/src/components/ConnectButton/index.jsx b/src/components/ConnectButton/index.jsx
index a8dea978..7665536a 100644
--- a/src/components/ConnectButton/index.jsx
+++ b/src/components/ConnectButton/index.jsx
@@ -1,6 +1,5 @@
// @flow
-import React, { useEffect } from 'react'
-import { withSnackbar } from 'notistack'
+import React from 'react'
import { connect } from 'react-redux'
import Web3Connect from 'web3connect'
import Torus from '@toruslabs/torus-embed'
@@ -10,6 +9,7 @@ import Squarelink from 'squarelink'
import Button from '~/components/layout/Button'
import { fetchProvider } from '~/logic/wallets/store/actions'
import { getNetwork } from '~/config'
+import { store } from '~/store'
const PORTIS_DAPP_ID = process.env.REACT_APP_NETWORK === 'mainnet' ? process.env.REACT_APP_PORTIS_ID : '852b763d-f28b-4463-80cb-846d7ec5806b'
const SQUARELINK_CLIENT_ID = process.env.REACT_APP_NETWORK === 'mainnet' ? process.env.REACT_APP_SQUARELINK_ID : '46ce08fe50913cfa1b78'
@@ -47,44 +47,36 @@ export const web3Connect = new Web3Connect.Core({
},
})
+web3Connect.on('connect', (provider: any) => {
+ if (provider) {
+ store.dispatch(fetchProvider(provider))
+ }
+})
+
type Props = {
registerProvider: Function,
enqueueSnackbar: Function,
closeSnackbar: Function,
}
-let web3connectEventListenerAdded = false
-
const ConnectButton = ({
- registerProvider, enqueueSnackbar, closeSnackbar, ...props
-}: Props) => {
- useEffect(() => {
- if (!web3connectEventListenerAdded) {
- web3Connect.on('connect', (provider: any) => {
- if (provider) {
- registerProvider(provider, enqueueSnackbar, closeSnackbar)
- }
- })
- web3connectEventListenerAdded = true
- }
- }, [])
+ registerProvider, ...props
+}: Props) => (
- return (
-
- )
-}
+
+)
export default connect(
null,
{ registerProvider: fetchProvider },
-)(withSnackbar(ConnectButton))
+)(ConnectButton)
diff --git a/src/components/Notifier/actions.js b/src/components/Notifier/actions.js
index 7cfffca1..129203d6 100644
--- a/src/components/Notifier/actions.js
+++ b/src/components/Notifier/actions.js
@@ -1,16 +1,10 @@
// @flow
-import enqueueSnackbar from '~/logic/notifications/store/actions/enqueueSnackbar'
-import closeSnackbar from '~/logic/notifications/store/actions/closeSnackbar'
import removeSnackbar from '~/logic/notifications/store/actions/removeSnackbar'
export type Actions = {
- enqueueSnackbar: typeof enqueueSnackbar,
- closeSnackbar: typeof closeSnackbar,
removeSnackbar: typeof removeSnackbar,
}
export default {
- enqueueSnackbar,
- closeSnackbar,
removeSnackbar,
}
diff --git a/src/components/Notifier/index.js b/src/components/Notifier/index.js
index 6ad573b5..136b1111 100644
--- a/src/components/Notifier/index.js
+++ b/src/components/Notifier/index.js
@@ -9,6 +9,8 @@ import selector from './selector'
type Props = Actions & {
notifications: List,
+ closeSnackbar: Function,
+ enqueueSnackbar: Function,
}
class Notifier extends Component {
diff --git a/src/logic/notifications/notificationBuilder.js b/src/logic/notifications/notificationBuilder.js
index 9b4fe24f..1f237640 100644
--- a/src/logic/notifications/notificationBuilder.js
+++ b/src/logic/notifications/notificationBuilder.js
@@ -3,6 +3,8 @@ import * as React from 'react'
import { IconButton } from '@material-ui/core'
import { Close as IconClose } from '@material-ui/icons'
import { TX_NOTIFICATION_TYPES } from '~/logic/safe/transactions'
+import { store } from '~/store'
+import closeSnackbarAction from '~/logic/notifications/store/actions/closeSnackbar'
import { type Notification, NOTIFICATIONS } from './notificationTypes'
export type NotificationsQueue = {
@@ -145,11 +147,20 @@ export const getNotificationsFromTxType = (txType: string) => {
return notificationsQueue
}
-export const showSnackbar = (
- notification: Notification,
- enqueueSnackbar: Function,
- closeSnackbar: Function,
-) => enqueueSnackbar(notification.message, {
+export const enhanceSnackbarForAction = (notification: Notification) => ({
+ ...notification,
+ options: {
+ ...notification.options,
+ action: (key) => (
+ store.dispatch(closeSnackbarAction(key))}>
+ {console.log(key, notification.message)}
+
+
+ ),
+ },
+})
+
+export const showSnackbar = (notification: Notification, enqueueSnackbar: Function, closeSnackbar: Function) => enqueueSnackbar(notification.message, {
...notification.options,
action: (key) => (
closeSnackbar(key)}>
diff --git a/src/logic/notifications/store/actions/enqueueSnackbar.js b/src/logic/notifications/store/actions/enqueueSnackbar.js
index fb88da5c..bcdd7c87 100644
--- a/src/logic/notifications/store/actions/enqueueSnackbar.js
+++ b/src/logic/notifications/store/actions/enqueueSnackbar.js
@@ -15,6 +15,7 @@ const enqueueSnackbar = (notification: NotificationProps) => (
...notification,
key: new Date().getTime(),
}
+
dispatch(addSnackbar(newNotification))
}
diff --git a/src/logic/wallets/store/actions/fetchProvider.js b/src/logic/wallets/store/actions/fetchProvider.js
index e25e7b8d..b2c69a31 100644
--- a/src/logic/wallets/store/actions/fetchProvider.js
+++ b/src/logic/wallets/store/actions/fetchProvider.js
@@ -4,7 +4,10 @@ import { ETHEREUM_NETWORK_IDS, ETHEREUM_NETWORK, getProviderInfo } from '~/logic
import { getNetwork } from '~/config'
import type { ProviderProps } from '~/logic/wallets/store/model/provider'
import { makeProvider } from '~/logic/wallets/store/model/provider'
-import { NOTIFICATIONS, showSnackbar } from '~/logic/notifications'
+import { NOTIFICATIONS, showSnackbar, enhanceSnackbarForAction } from '~/logic/notifications'
+import enqueueSnackbar from '~/logic/notifications/store/actions/enqueueSnackbar'
+import closeSnackbar from '~/logic/notifications/store/actions/closeSnackbar'
+
import addProvider from './addProvider'
export const processProviderResponse = (dispatch: ReduxDispatch<*>, provider: ProviderProps) => {
@@ -23,24 +26,20 @@ export const processProviderResponse = (dispatch: ReduxDispatch<*>, provider: Pr
dispatch(addProvider(walletRecord))
}
-const handleProviderNotification = (
- provider: ProviderProps,
- enqueueSnackbar: Function,
- closeSnackbar: Function,
-) => {
+const handleProviderNotification = (provider: ProviderProps, dispatch: Function) => {
const { loaded, network, available } = provider
if (!loaded) {
- showSnackbar(NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG, enqueueSnackbar, closeSnackbar)
+ dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG)))
return
}
if (ETHEREUM_NETWORK_IDS[network] !== getNetwork()) {
- showSnackbar(NOTIFICATIONS.WRONG_NETWORK_MSG, enqueueSnackbar, closeSnackbar)
+ dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.WRONG_NETWORK_MSG)))
return
}
if (ETHEREUM_NETWORK.RINKEBY === getNetwork()) {
- showSnackbar(NOTIFICATIONS.RINKEBY_VERSION_MSG, enqueueSnackbar, closeSnackbar)
+ dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.RINKEBY_VERSION_MSG)))
}
if (available) {
@@ -49,16 +48,14 @@ const handleProviderNotification = (
// 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.
- showSnackbar(NOTIFICATIONS.WALLET_CONNECTED_MSG, enqueueSnackbar, closeSnackbar)
+ dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.WALLET_CONNECTED_MSG)))
} else {
- showSnackbar(NOTIFICATIONS.UNLOCK_WALLET_MSG, enqueueSnackbar, closeSnackbar)
+ dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.UNLOCK_WALLET_MSG)))
}
}
-export default (provider: Object, enqueueSnackbar: Function, closeSnackbar: Function) => async (
- dispatch: ReduxDispatch<*>,
-) => {
+export default (provider: Object) => async (dispatch: ReduxDispatch<*>) => {
const providerInfo: ProviderProps = await getProviderInfo(provider)
- await handleProviderNotification(providerInfo, enqueueSnackbar, closeSnackbar)
+ await handleProviderNotification(providerInfo, dispatch)
processProviderResponse(dispatch, providerInfo)
}