Merge pull request #685 from bancorprotocol/feature/incorrect_network

Wrong network indication
bancorprotocol · Oct 19, 2022 · d990110 · d990110
2 parents be27a82 + b543283
commit d990110
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 10 deletions.
diff --git a/src/elements/walletConnect/WalletConnectButton.tsx b/src/elements/walletConnect/WalletConnectButton.tsx
@@ -6,6 +6,12 @@ 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,
+  requestSwitchChain,
+} from 'utils/helperFunctions';
+import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
 
 const LoginButton = ({
   loggedIn,
@@ -35,6 +41,8 @@ export const WalletConnectButton = ({
   selectedWallet,
 }: UseWalletConnect) => {
   const loggedIn = !!selectedWallet && !!account;
+  const { chainId } = useWeb3React();
+  const unsupportedNetwork = isUnsupportedNetwork(chainId);
 
   return loggedIn ? (
     <PopoverV3
@@ -43,8 +51,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={{
@@ -60,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/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/pages/UnsupportedNetwork.tsx b/src/pages/UnsupportedNetwork.tsx
@@ -1,9 +1,40 @@
-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';
+import { isMobile } from 'react-device-detect';
 
 export const UnsupportedNetwork = () => {
-  return <DisabledWarning title={title} description={description} />;
+  return (
+    <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">
+        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={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"
+          >
+            <IconSearch className="w-20 h-20" />
+            Learn How
+          </Navigate>
+        </Button>
+        <Button
+          variant={ButtonVariant.Primary}
+          size={isMobile ? ButtonSize.Small : ButtonSize.Meduim}
+          onClick={() => requestSwitchChain()}
+        >
+          Switch Network
+        </Button>
+      </div>
+    </div>
+  );
 };
diff --git 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,