H #2541 Add ability to automatically switch network in MetaMask when …

…user is on wrong network
Giveth · Sep 22, 2021 · 165d794 · 165d794
1 parent 5ed5652
commit 165d794
Show file tree

Hide file tree

Showing 16 changed files with 141 additions and 218 deletions.
diff --git a/public/img/change-network.gif b/public/img/change-network.gif
diff --git a/src/components/ActionNetworkWarning.jsx b/src/components/ActionNetworkWarning.jsx
@@ -1,30 +1,59 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import NetworkChangeGuide from './NetworkChangeGuide';
+import { Button } from 'antd';
+import Web3 from 'web3';
+import config from '../configuration';
 
 /**
  * It is used to show in modals when user wants to take an action while connected to wrong network.
  */
 
 function ActionNetworkWarning(props) {
-  const { incorrectNetwork, networkName } = props;
+  const { incorrectNetwork, networkName, switchNetwork, web3, isInline } = props;
+  const isMetaMask = web3 && web3.MetaMask;
+
+  const switchNetworkBtn = () =>
+    // Just MetaMask supports changing network
+    isMetaMask && (
+      <div className="my-2">
+        <Button type="primary" ghost className="ml-4 rounded" onClick={switchNetwork}>
+          Switch Network
+        </Button>
+      </div>
+    );
+
   return (
     incorrectNetwork && (
-      <div>
-        <div className="alert alert-warning">
-          <i className="fa fa-exclamation-triangle" />
-          To take this action you need to connect metamask to <strong>{networkName}</strong>{' '}
-          network. Then try again.
+      <div className={isInline ? '' : 'text-center'}>
+        <div className="alert alert-warning d-flex flex-wrap align-items-center">
+          <div className="d-flex align-items-center">
+            <i className="fa fa-exclamation-triangle mr-3" />
+            <div>
+              To enable all actions, please connect your wallet to <strong>{networkName}</strong>{' '}
+              network.
+            </div>
+          </div>
+          {isInline && switchNetworkBtn()}
         </div>
-        {NetworkChangeGuide}
+        {!isInline && switchNetworkBtn()}
       </div>
     )
   );
 }
 
 ActionNetworkWarning.propTypes = {
   incorrectNetwork: PropTypes.bool.isRequired,
-  networkName: PropTypes.string.isRequired,
+  networkName: PropTypes.string,
+  switchNetwork: PropTypes.func,
+  web3: PropTypes.instanceOf(Web3),
+  isInline: PropTypes.bool,
+};
+
+ActionNetworkWarning.defaultProps = {
+  switchNetwork: () => {},
+  web3: undefined,
+  isInline: false,
+  networkName: config.foreignNetworkName,
 };
 
 export default ActionNetworkWarning;
diff --git a/src/components/ChangeOwnershipButton.jsx b/src/components/ChangeOwnershipButton.jsx
@@ -6,7 +6,6 @@ import { Button, Modal, Select, Form, notification } from 'antd';
 import Campaign from 'models/Campaign';
 import { checkBalance, authenticateUser } from '../lib/middleware';
 import { ZERO_ADDRESS } from '../lib/helpers';
-import config from '../configuration';
 import ActionNetworkWarning from './ActionNetworkWarning';
 
 import CampaignService from '../services/CampaignService';
@@ -31,6 +30,7 @@ const noCoownerOption = {
 const ChangeOwnershipButton = props => {
   const {
     state: { balance, isForeignNetwork, validProvider, web3 },
+    actions: { switchNetwork },
   } = useContext(Web3Context);
   const {
     state: { currentUser },
@@ -103,16 +103,19 @@ const ChangeOwnershipButton = props => {
           </div>
         )}
         {validProvider && (
-          <ActionNetworkWarning
-            incorrectNetwork={!isForeignNetwork}
-            networkName={config.foreignNetworkName}
-          />
-        )}
-        {isForeignNetwork && (
-          <Form onFinish={submit}>
+          <Fragment>
             <p>
               Changing ownership for<strong> {campaign.title}</strong>
             </p>
+            <ActionNetworkWarning
+              incorrectNetwork={!isForeignNetwork}
+              switchNetwork={switchNetwork}
+              web3={web3}
+            />
+          </Fragment>
+        )}
+        {isForeignNetwork && (
+          <Form onFinish={submit}>
             <div className="label mb-2">Select a new co-owner:</div>
             {formIsReady && (
               <Fragment>

diff --git a/src/components/DelegateMultipleButton.jsx b/src/components/DelegateMultipleButton.jsx
@@ -25,8 +25,7 @@ const modalStyles = {
  */
 const DelegateMultipleButton = props => {
   const {
-    state: { isForeignNetwork, validProvider, balance, web3 },
-    actions: { displayForeignNetRequiredWarning },
+    state: { balance, web3 },
   } = useContext(Web3Context);
 
   const {
@@ -49,13 +48,7 @@ const DelegateMultipleButton = props => {
     <Fragment>
       <Button
         className="ant-btn-delegate"
-        onClick={() => {
-          if (validProvider && !isForeignNetwork) {
-            displayForeignNetRequiredWarning();
-          } else {
-            openDialog().then();
-          }
-        }}
+        onClick={openDialog}
         block
         size={props.size}
         style={props.style}

diff --git a/src/components/DelegateMultipleButtonModal.jsx b/src/components/DelegateMultipleButtonModal.jsx
@@ -39,6 +39,7 @@ const ModalContent = props => {
   } = useContext(UserContext);
   const {
     state: { isForeignNetwork, validProvider, isEnabled: Web3ContextIsEnabled, web3 },
+    actions: { switchNetwork },
   } = useContext(Web3Context);
   const {
     actions: { delegationPending, delegationSuccessful, delegationFailed },
@@ -340,11 +341,6 @@ const ModalContent = props => {
 
   const modalContent = (
     <div id="delegate-multiple-modal">
-      <p>
-        You are delegating donations to
-        {!trace && <strong> {campaign.title}</strong>}
-        {trace && <strong> {trace.title}</strong>}
-      </p>
       <Fragment>
         {isLimitedDelegateCount() && (
           <div className="alert alert-warning">
@@ -488,22 +484,32 @@ const ModalContent = props => {
   const isContextReady =
     !whiteListIsLoading && !userContextIsLoading && Web3ContextIsEnabled && isCommunitiesFetched;
 
+  const modalBody = isContextReady ? modalContent : modalLoading;
+
   return (
-    <React.Fragment>
+    <Fragment>
       {!validProvider && (
         <div className="alert alert-warning">
           <i className="fa fa-exclamation-triangle" />
           It is recommended that you install <a href="https://metamask.io/">MetaMask</a> to donate
         </div>
       )}
       {validProvider && (
-        <ActionNetworkWarning
-          incorrectNetwork={!isForeignNetwork}
-          networkName={config.foreignNetworkName}
-        />
-      )}{' '}
-      {isContextReady ? validProvider && isForeignNetwork && modalContent : modalLoading}
-    </React.Fragment>
+        <Fragment>
+          <p>
+            You are delegating donations to
+            {!trace && <strong> {campaign.title}</strong>}
+            {trace && <strong> {trace.title}</strong>}
+          </p>
+          <ActionNetworkWarning
+            incorrectNetwork={!isForeignNetwork}
+            switchNetwork={switchNetwork}
+            web3={web3}
+          />
+        </Fragment>
+      )}
+      {isForeignNetwork && modalBody}
+    </Fragment>
   );
 };
 

diff --git a/src/components/DonateButtonModal.jsx b/src/components/DonateButtonModal.jsx
@@ -81,6 +81,7 @@ const DonateButtonModal = props => {
   } = useContext(UserContext);
   const {
     state: { isHomeNetwork, validProvider, balance: NativeTokenBalance, web3 },
+    actions: { switchNetwork },
   } = useContext(Web3Context);
   const {
     actions: { donationPending, donationSuccessful, donationFailed },
@@ -690,6 +691,8 @@ const DonateButtonModal = props => {
             <ActionNetworkWarning
               incorrectNetwork={!isCorrectNetwork}
               networkName={config.homeNetworkName}
+              switchNetwork={switchNetwork}
+              web3={web3}
             />
           )}
 

diff --git a/src/components/NetworkChangeGuide.jsx b/src/components/NetworkChangeGuide.jsx
diff --git a/src/components/NetworkWarningModal.jsx b/src/components/NetworkWarningModal.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal } from 'antd';
+import Web3 from 'web3';
 import ActionNetworkWarning from './ActionNetworkWarning';
-import config from '../configuration';
 
 const NetworkWarningModal = props => {
-  const { show, closeModal, networkName } = props;
+  const { show, closeModal, switchNetwork, web3 } = props;
   return (
     <Modal
       visible={show}
@@ -19,35 +19,21 @@ const NetworkWarningModal = props => {
         </Button>,
       ]}
     >
-      <div>
-        <ActionNetworkWarning incorrectNetwork networkName={networkName} />
-      </div>
+      <ActionNetworkWarning incorrectNetwork switchNetwork={switchNetwork} web3={web3} />
     </Modal>
   );
 };
 
 NetworkWarningModal.propTypes = {
   show: PropTypes.bool.isRequired,
   closeModal: PropTypes.func.isRequired,
-  networkName: PropTypes.string.isRequired,
+  switchNetwork: PropTypes.func,
+  web3: PropTypes.instanceOf(Web3),
 };
 
-const ForeignRequiredModal = props => {
-  return <NetworkWarningModal networkName={config.foreignNetworkName} {...props} />;
-};
-const HomeRequiredModal = props => {
-  return <NetworkWarningModal networkName={config.foreignNetworkName} {...props} />;
-};
-
-ForeignRequiredModal.propTypes = {
-  show: PropTypes.bool.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  buttonLabel: PropTypes.string.isRequired,
-};
-HomeRequiredModal.propTypes = {
-  show: PropTypes.bool.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  buttonLabel: PropTypes.string.isRequired,
+NetworkWarningModal.defaultProps = {
+  switchNetwork: () => {},
+  web3: undefined,
 };
 
-export { ForeignRequiredModal, HomeRequiredModal };
+export default NetworkWarningModal;
diff --git a/src/components/ViewNetworkWarning.jsx b/src/components/ViewNetworkWarning.jsx
diff --git a/src/components/views/MyCampaigns.jsx b/src/components/views/MyCampaigns.jsx
@@ -1,22 +1,20 @@
 import React, { Fragment, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import Pagination from 'react-js-pagination';
-
-import ViewNetworkWarning from 'components/ViewNetworkWarning';
-import { Context as Web3Context } from 'contextProviders/Web3Provider';
-import config from 'configuration';
 import { Helmet } from 'react-helmet';
 
+import { Context as Web3Context } from '../../contextProviders/Web3Provider';
+import { Context as UserContext } from '../../contextProviders/UserProvider';
 import Loader from '../Loader';
 import { convertEthHelper, getTruncatedText } from '../../lib/helpers';
 import CampaignService from '../../services/CampaignService';
 import Campaign from '../../models/Campaign';
 import AuthenticationWarning from '../AuthenticationWarning';
-import { Context as UserContext } from '../../contextProviders/UserProvider';
 import CancelCampaignButton from '../CancelCampaignButton';
 import EditCampaignButton from '../EditCampaignButton';
 import ErrorHandler from '../../lib/ErrorHandler';
 import Web3ConnectWarning from '../Web3ConnectWarning';
+import ActionNetworkWarning from '../ActionNetworkWarning';
 
 /**
  * The my campaings view
@@ -26,7 +24,8 @@ function MyCampaigns() {
     state: { currentUser },
   } = useContext(UserContext);
   const {
-    state: { isForeignNetwork },
+    state: { isForeignNetwork, web3 },
+    actions: { switchNetwork },
   } = useContext(Web3Context);
 
   const [isLoading, setLoading] = useState(true);
@@ -107,9 +106,11 @@ function MyCampaigns() {
 
             <AuthenticationWarning />
 
-            <ViewNetworkWarning
+            <ActionNetworkWarning
               incorrectNetwork={!isForeignNetwork}
-              networkName={config.foreignNetworkName}
+              switchNetwork={switchNetwork}
+              web3={web3}
+              isInline
             />
 
             {isLoading && <Loader className="fixed" />}