Merge pull request #261 from gnosis/202-mainnet-rinkeby-version-works

Feature #202: Display backdrop when user is connected to wrong network

src/components/layout/Backdrop/index.jsx

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import ReactDOM from 'react-dom'
+import Backdrop from '@material-ui/core/Backdrop'
+
+const useStyles = makeStyles({
+  root: {
+    zIndex: 1300,
+  },
+})
+
+const BackdropLayout = ({ isOpen = false }: { isOpen: boolean }) => {
+  if (!isOpen) {
+    return null
+  }
+
+  const classes = useStyles()
+
+  return ReactDOM.createPortal(<Backdrop classes={{ root: classes.root }} open />, document.body)
+}
+
+export default BackdropLayout

src/components/layout/PageFrame/index.jsx

@@ -1,11 +1,16 @@
 // @flow
 import * as React from 'react'
+import { connect } from 'react-redux'
 import { SnackbarProvider } from 'notistack'
 import { withStyles } from '@material-ui/core/styles'
+import { getNetwork } from '~/config'
+import { ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3'
 import SidebarProvider from '~/components/Sidebar'
 import Header from '~/components/Header'
+import Backdrop from '~/components/layout/Backdrop'
 import Img from '~/components/layout/Img'
 import Notifier from '~/components/Notifier'
+import { networkSelector } from '~/logic/wallets/store/selectors'
 import AlertIcon from './assets/alert.svg'
 import CheckIcon from './assets/check.svg'
 import ErrorIcon from './assets/error.svg'
@@ -54,10 +59,17 @@ const notificationStyles = {
 type Props = {
   children: React.Node,
   classes: Object,
+  currentNetwork: string,
 }
 
-const PageFrame = ({ children, classes }: Props) => (
+const desiredNetwork = getNetwork()
+
+const PageFrame = ({ children, classes, currentNetwork }: Props) => {
+  const isWrongNetwork = currentNetwork !== ETHEREUM_NETWORK.UNKNOWN && currentNetwork !== desiredNetwork
+
+  return (
     <div className={styles.frame}>
+      <Backdrop isOpen={isWrongNetwork} />
       <SnackbarProvider
         maxSnack={5}
         anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
@@ -82,5 +94,13 @@ const PageFrame = ({ children, classes }: Props) => (
       </SnackbarProvider>
     </div>
   )
+}
 
-export default withStyles(notificationStyles)(PageFrame)
+export default withStyles(notificationStyles)(
+  connect(
+    (state) => ({
+      currentNetwork: networkSelector(state),
+    }),
+    null,
+  )(PageFrame),
+)

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

@@ -4,9 +4,8 @@ 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, enhanceSnackbarForAction } from '~/logic/notifications'
+import { NOTIFICATIONS, enhanceSnackbarForAction } from '~/logic/notifications'
 import enqueueSnackbar from '~/logic/notifications/store/actions/enqueueSnackbar'
-import closeSnackbar from '~/logic/notifications/store/actions/closeSnackbar'
 
 import addProvider from './addProvider'
 
@@ -35,7 +34,7 @@ const handleProviderNotification = (provider: ProviderProps, dispatch: Function)
   }
 
   if (ETHEREUM_NETWORK_IDS[network] !== getNetwork()) {
-    dispatch(enqueueSnackbar(enhanceSnackbarForAction(NOTIFICATIONS.WRONG_NETWORK_MSG)))
+    dispatch(enqueueSnackbar(NOTIFICATIONS.WRONG_NETWORK_MSG))
     return
   }
   if (ETHEREUM_NETWORK.RINKEBY === getNetwork()) {