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>
gnosis · Oct 27, 2020 · d3b700e · d3b700e
1 parent 7cf152c
commit d3b700e
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 41 deletions.
diff --git 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
@@ -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