From b1f0ecb6b5f90b9604c50cc4f39925c0fe33524e Mon Sep 17 00:00:00 2001
From: Ran Cohen <ran@bancor.network>
Date: Thu, 22 Sep 2022 18:11:20 -0400
Subject: [PATCH 1/3] added wrong network indication

---
 src/App.tsx                                   |  2 +
 .../walletConnect/WalletConnectButton.tsx     | 19 ++++++++-
 .../walletConnect/useWalletConnect.ts         |  2 +
 .../wrongNetwork/WrongNetworkModal.tsx        | 42 +++++++++++++++++++
 src/utils/helperFunctions.ts                  | 11 ++++-
 5 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 src/elements/wrongNetwork/WrongNetworkModal.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 0a46acda..34bc0250 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,6 +29,7 @@ import { setUser } from 'services/observables/user';
 import { BancorRouter } from 'router/BancorRouter';
 import { handleRestrictedWalletCheck } from 'services/restrictedWallets';
 import { RestrictedWallet } from 'pages/RestrictedWallet';
+import { WrongNetworkModal } from 'elements/wrongNetwork/WrongNetworkModal';
 
 const handleModeChange = (_: MediaQueryListEvent) => {
   const darkMode = store.getState().user.darkMode;
@@ -108,6 +109,7 @@ export const App = () => {
 
       <MobileBottomNav />
       <NotificationAlerts />
+      <WrongNetworkModal unsupportedNetwork={unsupportedNetwork} />
     </BrowserRouter>
   );
 };
diff --git a/src/elements/walletConnect/WalletConnectButton.tsx b/src/elements/walletConnect/WalletConnectButton.tsx
index aad5d77b..240f6d58 100644
--- a/src/elements/walletConnect/WalletConnectButton.tsx
+++ b/src/elements/walletConnect/WalletConnectButton.tsx
@@ -6,6 +6,9 @@ import { ReactNode } from 'react';
 import { Image } from 'components/image/Image';
 import { shortenString } from 'utils/pureFunctions';
 import { ReactComponent as IconWallet } from 'assets/icons/wallet.svg';
+import { useWeb3React } from '@web3-react/core';
+import { isUnsupportedNetwork } from 'utils/helperFunctions';
+import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
 
 const LoginButton = ({
   loggedIn,
@@ -35,6 +38,8 @@ export const WalletConnectButton = ({
   selectedWallet,
 }: UseWalletConnect) => {
   const loggedIn = !!selectedWallet && !!account;
+  const { chainId } = useWeb3React();
+  const unsupportedNetwork = isUnsupportedNetwork(chainId);
 
   return loggedIn ? (
     <PopoverV3
@@ -43,8 +48,18 @@ export const WalletConnectButton = ({
       showArrow={false}
       buttonElement={() => (
         <LoginButton loggedIn>
-          <Image src={selectedWallet.icon} alt="Wallet Logo" className="w-20" />
-          <span className="mx-10">{shortenString(account)}</span>
+          {unsupportedNetwork ? (
+            <WarningIcon className="w-15 h-15 text-error" />
+          ) : (
+            <Image
+              src={selectedWallet.icon}
+              alt="Wallet Logo"
+              className="w-20"
+            />
+          )}
+          <span className="mx-10">
+            {unsupportedNetwork ? 'Wrong Network' : shortenString(account)}
+          </span>
         </LoginButton>
       )}
       options={{
diff --git a/src/elements/walletConnect/useWalletConnect.ts b/src/elements/walletConnect/useWalletConnect.ts
index 2ee64c72..ce79c742 100644
--- a/src/elements/walletConnect/useWalletConnect.ts
+++ b/src/elements/walletConnect/useWalletConnect.ts
@@ -15,6 +15,7 @@ import { useDispatch } from 'react-redux';
 import { openNewTab, wait } from 'utils/pureFunctions';
 import { setUser } from 'services/observables/user';
 import { isForkAvailable } from 'services/web3/config';
+import { requestSwitchChain } from 'utils/helperFunctions';
 
 export interface UseWalletConnect {
   isOpen: boolean;
@@ -94,6 +95,7 @@ export const useWalletConnect = (): UseWalletConnect => {
           );
           await wait(500);
           setIsPending(false);
+          requestSwitchChain();
         } catch (e: any) {
           console.error('failed to connect wallet. ', e.message);
           setIsError(true);
diff --git a/src/elements/wrongNetwork/WrongNetworkModal.tsx b/src/elements/wrongNetwork/WrongNetworkModal.tsx
new file mode 100644
index 00000000..b0ca10c7
--- /dev/null
+++ b/src/elements/wrongNetwork/WrongNetworkModal.tsx
@@ -0,0 +1,42 @@
+import { ModalV3 } from 'components/modal/ModalV3';
+import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
+import { Button, ButtonVariant } from 'components/button/Button';
+import { ReactComponent as IconSearch } from 'assets/icons/search.svg';
+import { useEffect, useState } from 'react';
+import { Navigate } from 'components/navigate/Navigate';
+
+export const WrongNetworkModal = ({
+  unsupportedNetwork,
+}: {
+  unsupportedNetwork: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    setIsOpen(unsupportedNetwork);
+  }, [unsupportedNetwork]);
+
+  return (
+    <>
+      <ModalV3 setIsOpen={setIsOpen} isOpen={isOpen}>
+        <div className="flex flex-col items-center gap-15 pb-40 px-40 text-center">
+          <WarningIcon className="w-40 h-40 text-error" />
+          <div className="text-[22px]">Wrong network</div>
+          <div className="text-secondary mb-36">
+            Please connect to a supported network in the dropdown menu or in
+            your wallet
+          </div>
+          <Button variant={ButtonVariant.Secondary}>
+            <Navigate
+              to="https://support.bancor.network/hc/en-us/articles/5463892405010-MetaMask-Setup-Guide"
+              className="flex items-center justify-center gap-12"
+            >
+              <IconSearch className="w-20 h-20" />
+              Learn How
+            </Navigate>
+          </Button>
+        </div>
+      </ModalV3>
+    </>
+  );
+};
diff --git a/src/utils/helperFunctions.ts b/src/utils/helperFunctions.ts
index 0c8ee2b2..aeaf0537 100644
--- a/src/utils/helperFunctions.ts
+++ b/src/utils/helperFunctions.ts
@@ -1,5 +1,5 @@
 import BigNumber from 'bignumber.js';
-import { BigNumber as BigNumberEther } from 'ethers';
+import { BigNumber as BigNumberEther, utils } from 'ethers';
 import numeral from 'numeral';
 import { EthNetworks } from 'services/web3/types';
 import { shrinkToken } from 'utils/formulas';
@@ -104,6 +104,15 @@ export const isUnsupportedNetwork = (
   return !!network && !EthNetworks[network];
 };
 
+export const requestSwitchChain = async (
+  network: EthNetworks = EthNetworks.Mainnet
+) => {
+  await window.ethereum.request({
+    method: 'wallet_switchEthereumChain',
+    params: [{ chainId: utils.hexValue(network) }],
+  });
+};
+
 export const calculateBntNeededToOpenSpace = (
   bntBalance: string,
   tknBalance: string,

From bb54300e31e5c4667ffd787853ec48bf7434f2bf Mon Sep 17 00:00:00 2001
From: Ran Cohen <ran@bancor.network>
Date: Tue, 11 Oct 2022 14:01:45 +0300
Subject: [PATCH 2/3] removed the modal and added switch network button

---
 src/App.tsx                                   |  2 -
 .../walletConnect/WalletConnectButton.tsx     | 13 +++++-
 .../wrongNetwork/WrongNetworkModal.tsx        | 42 -------------------
 src/pages/UnsupportedNetwork.tsx              | 39 ++++++++++++++---
 4 files changed, 44 insertions(+), 52 deletions(-)
 delete mode 100644 src/elements/wrongNetwork/WrongNetworkModal.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 34bc0250..0a46acda 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,7 +29,6 @@ import { setUser } from 'services/observables/user';
 import { BancorRouter } from 'router/BancorRouter';
 import { handleRestrictedWalletCheck } from 'services/restrictedWallets';
 import { RestrictedWallet } from 'pages/RestrictedWallet';
-import { WrongNetworkModal } from 'elements/wrongNetwork/WrongNetworkModal';
 
 const handleModeChange = (_: MediaQueryListEvent) => {
   const darkMode = store.getState().user.darkMode;
@@ -109,7 +108,6 @@ export const App = () => {
 
       <MobileBottomNav />
       <NotificationAlerts />
-      <WrongNetworkModal unsupportedNetwork={unsupportedNetwork} />
     </BrowserRouter>
   );
 };
diff --git a/src/elements/walletConnect/WalletConnectButton.tsx b/src/elements/walletConnect/WalletConnectButton.tsx
index 240f6d58..d1536b43 100644
--- a/src/elements/walletConnect/WalletConnectButton.tsx
+++ b/src/elements/walletConnect/WalletConnectButton.tsx
@@ -7,7 +7,10 @@ import { Image } from 'components/image/Image';
 import { shortenString } from 'utils/pureFunctions';
 import { ReactComponent as IconWallet } from 'assets/icons/wallet.svg';
 import { useWeb3React } from '@web3-react/core';
-import { isUnsupportedNetwork } from 'utils/helperFunctions';
+import {
+  isUnsupportedNetwork,
+  requestSwitchChain,
+} from 'utils/helperFunctions';
 import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
 
 const LoginButton = ({
@@ -75,7 +78,13 @@ export const WalletConnectButton = ({
       }}
     >
       <div>
-        Ethereum Network
+        {unsupportedNetwork ? (
+          <button className="text-error" onClick={() => requestSwitchChain()}>
+            Switch network →
+          </button>
+        ) : (
+          'Ethereum Network'
+        )}
         <hr className="border-silver dark:border-grey my-15" />
         <button
           onClick={() => handleWalletButtonClick()}
diff --git a/src/elements/wrongNetwork/WrongNetworkModal.tsx b/src/elements/wrongNetwork/WrongNetworkModal.tsx
deleted file mode 100644
index b0ca10c7..00000000
--- a/src/elements/wrongNetwork/WrongNetworkModal.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ModalV3 } from 'components/modal/ModalV3';
-import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
-import { Button, ButtonVariant } from 'components/button/Button';
-import { ReactComponent as IconSearch } from 'assets/icons/search.svg';
-import { useEffect, useState } from 'react';
-import { Navigate } from 'components/navigate/Navigate';
-
-export const WrongNetworkModal = ({
-  unsupportedNetwork,
-}: {
-  unsupportedNetwork: boolean;
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    setIsOpen(unsupportedNetwork);
-  }, [unsupportedNetwork]);
-
-  return (
-    <>
-      <ModalV3 setIsOpen={setIsOpen} isOpen={isOpen}>
-        <div className="flex flex-col items-center gap-15 pb-40 px-40 text-center">
-          <WarningIcon className="w-40 h-40 text-error" />
-          <div className="text-[22px]">Wrong network</div>
-          <div className="text-secondary mb-36">
-            Please connect to a supported network in the dropdown menu or in
-            your wallet
-          </div>
-          <Button variant={ButtonVariant.Secondary}>
-            <Navigate
-              to="https://support.bancor.network/hc/en-us/articles/5463892405010-MetaMask-Setup-Guide"
-              className="flex items-center justify-center gap-12"
-            >
-              <IconSearch className="w-20 h-20" />
-              Learn How
-            </Navigate>
-          </Button>
-        </div>
-      </ModalV3>
-    </>
-  );
-};
diff --git a/src/pages/UnsupportedNetwork.tsx b/src/pages/UnsupportedNetwork.tsx
index 2731e23c..34453d40 100644
--- a/src/pages/UnsupportedNetwork.tsx
+++ b/src/pages/UnsupportedNetwork.tsx
@@ -1,9 +1,36 @@
-import { DisabledWarning } from 'components/disabledWarning/DisabledWarning';
-
-const title = 'Unsupported network';
-const description =
-  'In order to proceed, please change your wallets network settings to Ethereum Mainnet.';
+import { Navigate } from 'components/navigate/Navigate';
+import { Button, ButtonSize, ButtonVariant } from 'components/button/Button';
+import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
+import { ReactComponent as IconSearch } from 'assets/icons/search.svg';
+import { requestSwitchChain } from 'utils/helperFunctions';
 
 export const UnsupportedNetwork = () => {
-  return <DisabledWarning title={title} description={description} />;
+  return (
+    <div className="flex flex-col items-center justify-center gap-15 h-screen text-center">
+      <WarningIcon className="w-40 h-40 text-error" />
+      <div className="text-[22px]">Wrong network</div>
+      <div className="text-secondary mb-36">
+        Please connect to a supported network in the dropdown menu or in your
+        wallet
+      </div>
+      <div className="flex items-center gap-15">
+        <Button variant={ButtonVariant.Secondary} size={ButtonSize.Meduim}>
+          <Navigate
+            to="https://support.bancor.network/hc/en-us/articles/5463892405010-MetaMask-Setup-Guide"
+            className="flex items-center justify-center gap-12"
+          >
+            <IconSearch className="w-20 h-20" />
+            Learn How
+          </Navigate>
+        </Button>
+        <Button
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Meduim}
+          onClick={() => requestSwitchChain()}
+        >
+          Switch Network
+        </Button>
+      </div>
+    </div>
+  );
 };

From b543283feb409da8d84ae967ce533e804426b7d8 Mon Sep 17 00:00:00 2001
From: Ran Cohen <ran@bancor.network>
Date: Tue, 11 Oct 2022 15:51:58 +0300
Subject: [PATCH 3/3] ui adjusted

---
 src/pages/UnsupportedNetwork.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/UnsupportedNetwork.tsx b/src/pages/UnsupportedNetwork.tsx
index 34453d40..32c37749 100644
--- a/src/pages/UnsupportedNetwork.tsx
+++ b/src/pages/UnsupportedNetwork.tsx
@@ -3,10 +3,11 @@ import { Button, ButtonSize, ButtonVariant } from 'components/button/Button';
 import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
 import { ReactComponent as IconSearch } from 'assets/icons/search.svg';
 import { requestSwitchChain } from 'utils/helperFunctions';
+import { isMobile } from 'react-device-detect';
 
 export const UnsupportedNetwork = () => {
   return (
-    <div className="flex flex-col items-center justify-center gap-15 h-screen text-center">
+    <div className="flex flex-col items-center justify-center gap-15 p-15 h-screen text-center">
       <WarningIcon className="w-40 h-40 text-error" />
       <div className="text-[22px]">Wrong network</div>
       <div className="text-secondary mb-36">
@@ -14,7 +15,10 @@ export const UnsupportedNetwork = () => {
         wallet
       </div>
       <div className="flex items-center gap-15">
-        <Button variant={ButtonVariant.Secondary} size={ButtonSize.Meduim}>
+        <Button
+          variant={ButtonVariant.Secondary}
+          size={isMobile ? ButtonSize.Small : ButtonSize.Meduim}
+        >
           <Navigate
             to="https://support.bancor.network/hc/en-us/articles/5463892405010-MetaMask-Setup-Guide"
             className="flex items-center justify-center gap-12"
@@ -25,7 +29,7 @@ export const UnsupportedNetwork = () => {
         </Button>
         <Button
           variant={ButtonVariant.Primary}
-          size={ButtonSize.Meduim}
+          size={isMobile ? ButtonSize.Small : ButtonSize.Meduim}
           onClick={() => requestSwitchChain()}
         >
           Switch Network