From 102acbc392f50cc6d91303ffa15e8161abef1910 Mon Sep 17 00:00:00 2001
From: mmv <mmvsha73@gmail.com>
Date: Wed, 13 Nov 2019 18:41:16 +0400
Subject: [PATCH 1/2] Implement backdrop for wrong network, don't allow to
 close wrong network notification

---
 src/components/layout/Backdrop/index.jsx      | 23 ++++++
 src/components/layout/PageFrame/index.jsx     | 74 ++++++++++++-------
 .../wallets/store/actions/fetchProvider.js    |  5 +-
 3 files changed, 72 insertions(+), 30 deletions(-)
 create mode 100644 src/components/layout/Backdrop/index.jsx

diff --git a/src/components/layout/Backdrop/index.jsx b/src/components/layout/Backdrop/index.jsx
new file mode 100644
index 00000000..8e328a43
--- /dev/null
+++ b/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
diff --git a/src/components/layout/PageFrame/index.jsx b/src/components/layout/PageFrame/index.jsx
index 9c8b1fa8..cd9bed32 100644
--- a/src/components/layout/PageFrame/index.jsx
+++ b/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 AlertLogo from './assets/alert.svg'
 import CheckLogo from './assets/check.svg'
 import ErrorLogo from './assets/error.svg'
@@ -53,33 +58,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={CheckLogo} alt="Success" />,
-        error: <Img src={ErrorLogo} alt="Error" />,
-        warning: <Img src={AlertLogo} alt="Warning" />,
-        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={CheckLogo} alt="Success" />,
+          error: <Img src={ErrorLogo} alt="Error" />,
+          warning: <Img src={AlertLogo} alt="Warning" />,
+          info: '',
+        }}
+      >
+        <Notifier />
+        <SidebarProvider>
+          <Header />
+          {children}
+        </SidebarProvider>
+      </SnackbarProvider>
+    </div>
+  )
+}
+
+export default withStyles(notificationStyles)(
+  connect(
+    (state) => ({
+      currentNetwork: networkSelector(state),
+    }),
+    null,
+  )(PageFrame),
+)
diff --git a/src/logic/wallets/store/actions/fetchProvider.js b/src/logic/wallets/store/actions/fetchProvider.js
index b2c69a31..b9b5df50 100644
--- a/src/logic/wallets/store/actions/fetchProvider.js
+++ b/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()) {

From 90bd1a00d3378cc7dafe97edac20bf3f7e71de16 Mon Sep 17 00:00:00 2001
From: mmv <mmvsha73@gmail.com>
Date: Thu, 14 Nov 2019 11:04:22 +0400
Subject: [PATCH 2/2] Remove console.log in store/index.js

---
 src/store/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index d62321d4..b2dae643 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -37,8 +37,6 @@ export type GlobalState = {
 
 export type GetState = () => GlobalState
 
-console.log({ provider, PROVIDER_REDUCER_ID })
-
 const reducers: Reducer<GlobalState> = combineReducers({
   router: connectRouter(history),
   [PROVIDER_REDUCER_ID]: provider,