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 = () => (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {process.env.NODE_ENV === 'development' && }
- >
-)
+const App: React.FC = () => {
+ // Deal with incorrect network
+ useNetworkCheck()
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {process.env.NODE_ENV === 'development' && }
+ >
+ )
+}
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 = () => (
+
+
Please switch to a supported network!
+
{availableNetworksName}
+
+
+
+ Click{' '}
+
+ here
+ {' '}
+ for more information
+
+
+)
+
+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(, {
+ autoClose: false,
+ closeOnClick: false,
+ closeButton: false,
+ })
+
+ return (): void => {
+ promisedToastID.then((toastID) => toast.dismiss(toastID))
+ }
+ }, [networkId])
+}
+
+export default useNetworkCheck