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) }