From d3b700e58b389de2079e3dc018fafde93c5d7cba Mon Sep 17 00:00:00 2001
From: David <david.sato64@gmail.com>
Date: Tue, 27 Oct 2020 13:00:58 +0100
Subject: [PATCH] Network check 2 (#1546)

* deal with incorrect network

* PR changes, thank you to the legend @Velenir

* rel noopener

Update src/hooks/useNetworkCheck.tsx

Co-authored-by: Velenir <Velenir@users.noreply.github.com>

* block toast click close or button

Co-authored-by: Velenir <Velenir@users.noreply.github.com>
---
 src/App.tsx                   | 89 +++++++++++++++++++----------------
 src/hooks/useNetworkCheck.tsx | 56 ++++++++++++++++++++++
 2 files changed, 104 insertions(+), 41 deletions(-)
 create mode 100644 src/hooks/useNetworkCheck.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 9923ed9c7..f10b83618 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,8 @@ import { encodeSymbol } from '@gnosis.pm/dex-js'
 import GlobalStyles from 'styles/global'
 import { ToastContainer } from 'setupToastify'
 
+import useNetworkCheck from 'hooks/useNetworkCheck'
+
 import { assertNonNull } from 'utils'
 
 // Main layout
@@ -132,47 +134,52 @@ function getInitialUrl(): string {
 const initialUrl = getInitialUrl()
 
 // App
-const App: React.FC = () => (
-  <>
-    <Router basename={process.env.BASE_URL}>
-      <Switch>
-        <Route path="/v2">
-          <TradingLayout>
-            <React.Suspense fallback={null}>
-              <Switch>
-                <Route path="/v2" exact component={Trading} />
-                <Route component={NotFound2} />
-              </Switch>
-            </React.Suspense>
-          </TradingLayout>
-        </Route>
-        <Route>
-          <SwapLayout>
-            <GlobalStyles />
-            <ToastContainer />
-            <React.Suspense fallback={null}>
-              <Switch>
-                <PrivateRoute path="/orders" exact component={Orders} />
-                <Route path="/trade/:buy-:sell" component={Trade} />
-                <PrivateRoute path="/liquidity" exact component={Strategies} />
-                <PrivateRoute path="/wallet" exact component={Wallet} />
-                <Route path="/about" exact component={About} />
-                <Route path="/faq" exact component={FAQ} />
-                <Route path="/book" exact component={OrderBook} />
-                <Route path="/connect-wallet" exact component={ConnectWallet} />
-                <Route path="/trades" exact component={Trades} />
-                <Route path="/settings" exact component={Settings} />
-                <Redirect from="/" to={initialUrl} />
-                <Route component={NotFound} />
-              </Switch>
-            </React.Suspense>
-          </SwapLayout>
-        </Route>
-      </Switch>
-    </Router>
-    {process.env.NODE_ENV === 'development' && <Console />}
-  </>
-)
+const App: React.FC = () => {
+  // Deal with incorrect network
+  useNetworkCheck()
+
+  return (
+    <>
+      <Router basename={process.env.BASE_URL}>
+        <Switch>
+          <Route path="/v2">
+            <TradingLayout>
+              <React.Suspense fallback={null}>
+                <Switch>
+                  <Route path="/v2" exact component={Trading} />
+                  <Route component={NotFound2} />
+                </Switch>
+              </React.Suspense>
+            </TradingLayout>
+          </Route>
+          <Route>
+            <SwapLayout>
+              <GlobalStyles />
+              <ToastContainer />
+              <React.Suspense fallback={null}>
+                <Switch>
+                  <PrivateRoute path="/orders" exact component={Orders} />
+                  <Route path="/trade/:buy-:sell" component={Trade} />
+                  <PrivateRoute path="/liquidity" exact component={Strategies} />
+                  <PrivateRoute path="/wallet" exact component={Wallet} />
+                  <Route path="/about" exact component={About} />
+                  <Route path="/faq" exact component={FAQ} />
+                  <Route path="/book" exact component={OrderBook} />
+                  <Route path="/connect-wallet" exact component={ConnectWallet} />
+                  <Route path="/trades" exact component={Trades} />
+                  <Route path="/settings" exact component={Settings} />
+                  <Redirect from="/" to={initialUrl} />
+                  <Route component={NotFound} />
+                </Switch>
+              </React.Suspense>
+            </SwapLayout>
+          </Route>
+        </Switch>
+      </Router>
+      {process.env.NODE_ENV === 'development' && <Console />}
+    </>
+  )
+}
 
 export default hot(
   withGlobalContext(
diff --git a/src/hooks/useNetworkCheck.tsx b/src/hooks/useNetworkCheck.tsx
new file mode 100644
index 000000000..baefa03a5
--- /dev/null
+++ b/src/hooks/useNetworkCheck.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import { toast } from 'toastify'
+
+import { useWalletConnection } from 'hooks/useWalletConnection'
+
+import { Network } from 'types'
+
+const { config: networkIdList } = CONFIG.exchangeContractConfig
+const availableNetworks = new Set(networkIdList.map(({ networkId }) => networkId))
+const availableNetworksName = networkIdList
+  .map(({ networkId: id }, idx, arr) => (idx === arr.length - 1 ? 'or ' : '') + Network[id])
+  .join(', ')
+
+const NetworkErrorMessage: React.FC = () => (
+  <div>
+    <div>Please switch to a supported network!</div>
+    <strong>{availableNetworksName}</strong>
+    <br />
+    <br />
+    <div>
+      Click{' '}
+      <a href="https://github.com/gnosis/dex-react/wiki#-compatible-networks" target="_blank" rel="noopener noreferrer">
+        here
+      </a>{' '}
+      for more information
+    </div>
+  </div>
+)
+
+function runCheckOnValidNetworks(networkId?: number): boolean {
+  if (!networkId) return true
+
+  return availableNetworks.has(networkId)
+}
+
+const useNetworkCheck = (): void => {
+  const { networkId } = useWalletConnection()
+
+  React.useEffect(() => {
+    const isValidOrNonNetwork = runCheckOnValidNetworks(networkId)
+
+    if (isValidOrNonNetwork) return
+
+    const promisedToastID = toast.error(<NetworkErrorMessage />, {
+      autoClose: false,
+      closeOnClick: false,
+      closeButton: false,
+    })
+
+    return (): void => {
+      promisedToastID.then((toastID) => toast.dismiss(toastID))
+    }
+  }, [networkId])
+}
+
+export default useNetworkCheck