feat: show dialog on unsupported network

src/components/UnsupportedNetworkModal.tsx

@@ -1,3 +1,7 @@
+import { useChainOptions } from "@terra-money/wallet-provider"
+import { AVAILABLE_CHAIN_ID } from "constants/networks"
+import { useNetwork } from "hooks"
+import { useMemo } from "react"
 import styled from "styled-components"
 import Button from "./Button"
 import Modal from "./Modal"
@@ -10,7 +14,6 @@ const ModalContent = styled.div`
   box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.35);
   background-color: #fff;
   padding: 30px 0px;
-
   color: #5c5c5c;
   & > div {
     position: relative;
@@ -26,7 +29,7 @@ const ModalContent = styled.div`
     font-style: normal;
     line-height: 1.71;
     letter-spacing: normal;
-    text-align: left;
+    text-align: center;
     color: #5c5c5c;
   }
 
@@ -54,22 +57,78 @@ const ModalTitle = styled.div`
 const UnsupportedNetworkModal: React.FC<{ isOpen?: boolean }> = ({
   isOpen = false,
 }) => {
+  const network = useNetwork()
+  const chainOptions = useChainOptions()
+  const availableNetworks = useMemo(() => {
+    if (chainOptions?.walletConnectChainIds) {
+      const keys = Object.keys(chainOptions?.walletConnectChainIds).map(Number)
+      return keys
+        .filter((key) =>
+          AVAILABLE_CHAIN_ID.includes(
+            chainOptions?.walletConnectChainIds[key]?.chainID
+          )
+        )
+        .map((key) => chainOptions?.walletConnectChainIds[key])
+    }
+    return []
+  }, [chainOptions])
   return (
     <Modal isOpen={isOpen} close={() => {}} open={() => {}}>
       <ModalContent>
         <div>
           <ModalTitle>Wrong network connection</ModalTitle>
-          <div style={{ marginBottom: 30 }}>
-            Your wallet is connected to the wrong network. Please check your
-            network to access {window.location.host}
+          <div style={{ marginBottom: 20 }}>
+            Your wallet is connected to{" "}
+            <b>
+              {network.name}({network.chainID})
+            </b>
+            . <br />
+            Please change your network setting of the wallet to
+            <div
+              style={{
+                border: "1px solid #eeeeee",
+                borderRadius: 8,
+                padding: 10,
+                marginTop: 10,
+                fontWeight: 700,
+              }}
+            >
+              {availableNetworks
+                .map(
+                  (availableNetwork) =>
+                    `${availableNetwork.name}(${
+                      availableNetwork.chainID?.split("-")?.[0]
+                    })`
+                )
+                .reverse()
+                .join(", ")}
+            </div>
           </div>
           <Button
             size="lg"
             onClick={() => window.location.reload()}
-            style={{ textTransform: "unset", maxWidth: 235, borderRadius: 10 }}
+            style={{
+              textTransform: "unset",
+              maxWidth: 235,
+              borderRadius: 10,
+              marginBottom: 4,
+            }}
           >
             Reload
           </Button>
+          {network?.name !== "classic" && (
+            <div style={{ color: "#aaaaaa", fontSize: 12 }}>
+              Or
+              <br />
+              <a
+                href="https://app.terraswap.io"
+                style={{ fontWeight: 500, fontSize: 13 }}
+              >
+                Go to{" "}
+                <b style={{ textDecoration: "underline" }}>app.terraswap.io</b>
+              </a>
+            </div>
+          )}
         </div>
       </ModalContent>
     </Modal>

src/constants/networks.ts

@@ -6,6 +6,8 @@ export enum NetworkKey {
 }
 type MirrorNetworkInfo = NetworkInfo & NetworkConfig
 
+export const AVAILABLE_CHAIN_ID = ["columbus-5"]
+
 const networks: Record<string, MirrorNetworkInfo> = {
   classic: {
     name: "classic",
@@ -20,7 +22,8 @@ const networks: Record<string, MirrorNetworkInfo> = {
     fee: { gasPrice: "0.00506", amount: "1518", gas: "2000000" }, // 0.000500 UST
     factory: "terra1ulgw0td86nvs4wtpsc80thv6xelk76ut7a7apj",
     service:
-      process.env.REACT_APP_MAINNET_SERVICE_URL || "https://api-classic.terraswap.io/",
+      process.env.REACT_APP_MAINNET_SERVICE_URL ||
+      "https://api-classic.terraswap.io/",
     dashboard: process.env.REACT_APP_MAINNET_DASHBOARD_URL,
     router: "terra19qx5xe6q9ll4w0890ux7lv2p4mf3csd4qvt3ex",
   },

src/layouts/Network.tsx

@@ -1,9 +1,12 @@
-import React, { PropsWithChildren } from "react"
+import React, { PropsWithChildren, useEffect } from "react"
 import { useWallet, WalletStatus } from "@terra-money/wallet-provider"
 import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client"
 import { DefaultOptions } from "@apollo/client"
 import useNetwork from "hooks/useNetwork"
 import Loading from "components/Loading"
+import { useModal } from "components/Modal"
+import UnsupportedNetworkModal from "components/UnsupportedNetworkModal"
+import { AVAILABLE_CHAIN_ID } from "constants/networks"
 
 export const DefaultApolloClientOptions: DefaultOptions = {
   watchQuery: { notifyOnNetworkStatusChange: true },
@@ -13,13 +16,26 @@ export const DefaultApolloClientOptions: DefaultOptions = {
 const Network: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   const { status } = useWallet()
   const network = useNetwork()
+  const unsupportedNetworkModal = useModal()
   const client = new ApolloClient({
     uri: network.mantle,
     cache: new InMemoryCache(),
     connectToDevTools: true,
     defaultOptions: DefaultApolloClientOptions,
   })
 
+  useEffect(() => {
+    const timerId = setTimeout(() => {
+      if (network && !AVAILABLE_CHAIN_ID.includes(network?.chainID)) {
+        unsupportedNetworkModal.open()
+      }
+    }, 10)
+
+    return () => {
+      clearTimeout(timerId)
+    }
+  }, [unsupportedNetworkModal, network])
+
   return (
     <>
       {status === WalletStatus.INITIALIZING ? (
@@ -35,8 +51,11 @@ const Network: React.FC<PropsWithChildren<{}>> = ({ children }) => {
           <Loading />
         </div>
       ) : (
-        <ApolloProvider client={client}>{children}</ApolloProvider>
+        <ApolloProvider client={client}>
+          {!unsupportedNetworkModal.isOpen && children}
+        </ApolloProvider>
       )}
+      <UnsupportedNetworkModal isOpen={unsupportedNetworkModal.isOpen} />
     </>
   )
 }