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,33 +59,48 @@ const notificationStyles = {
 type Props = {
   children: React.Node,
   classes: Object,
+  currentNetwork: string,
 }
 
-const PageFrame = ({ children, classes }: Props) => (
-  <div className={styles.frame}>
-    <SnackbarProvider
-      maxSnack={5}
-      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-      classes={{
-        variantSuccess: classes.success,
-        variantError: classes.error,
-        variantWarning: classes.warning,
-        variantInfo: classes.info,
-      }}
-      iconVariant={{
-        success: <Img src={CheckIcon} alt="Success" />,
-        error: <Img src={ErrorIcon} alt="Error" />,
-        warning: <Img src={AlertIcon} alt="Warning" />,
-        info: <Img src={InfoIcon} alt="Info" />,
-      }}
-    >
-      <Notifier />
-      <SidebarProvider>
-        <Header />
-        {children}
-      </SidebarProvider>
-    </SnackbarProvider>
-  </div>
-)
+const desiredNetwork = getNetwork()
 
-export default withStyles(notificationStyles)(PageFrame)
+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' }}
+        classes={{
+          variantSuccess: classes.success,
+          variantError: classes.error,
+          variantWarning: classes.warning,
+          variantInfo: classes.info,
+        }}
+        iconVariant={{
+          success: <Img src={CheckIcon} alt="Success" />,
+          error: <Img src={ErrorIcon} alt="Error" />,
+          warning: <Img src={AlertIcon} alt="Warning" />,
+          info: <Img src={InfoIcon} alt="Info" />,
+        }}
+      >
+        <Notifier />
+        <SidebarProvider>
+          <Header />
+          {children}
+        </SidebarProvider>
+      </SnackbarProvider>
+    </div>
+  )
+}
+
+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()) {