From ee692cb69cf59042a2f510c5ba0c8b46b6c1c04c Mon Sep 17 00:00:00 2001
From: alvaro-ricotta <81116391+alvaro-ricotta@users.noreply.github.com>
Date: Wed, 20 Sep 2023 08:50:05 -0300
Subject: [PATCH] Feat/reinitialized network switcher (#1206)

* fixing bridge status

* fixing conflict

* reset connection after SwitchChain network

* wip updating fsbalances

* update network services

* removing debugging

* fixing issue on network switcher

* remove console logs

* remove console logs
---
 .../boba/gateway/src/containers/earn/Earn.js  |   6 +-
 .../boba/gateway/src/containers/home/Home.js  |  11 +-
 .../modals/dao/old/NewProposalModalOldDao.js  | 230 +++++++-----------
 .../switchNetwork/SwitchNetworkModal.js       |   1 -
 .../boba/gateway/src/hooks/useBridgeSetup.ts  |   1 -
 packages/boba/gateway/src/hooks/useOnboard.ts |   1 -
 .../gateway/src/hooks/useWalletConnect.ts     |   2 -
 .../boba/gateway/src/hooks/useWalletSwitch.ts |  15 +-
 .../gateway/src/services/networkService.js    |  33 ++-
 .../gateway/src/services/wallet.service.js    |  18 +-
 10 files changed, 138 insertions(+), 180 deletions(-)

diff --git a/packages/boba/gateway/src/containers/earn/Earn.js b/packages/boba/gateway/src/containers/earn/Earn.js
index 1ab4d442cd..e7221a06bb 100644
--- a/packages/boba/gateway/src/containers/earn/Earn.js
+++ b/packages/boba/gateway/src/containers/earn/Earn.js
@@ -70,6 +70,7 @@ const Earn = () => {
 
   const baseEnabled = useSelector(selectBaseEnabled())
   const accountEnabled = useSelector(selectAccountEnabled())
+  const chainIdChanged = useSelector(selectChainIdChanged())
   const networkName = useSelector(selectActiveNetworkName())
 
   const [showMDO, setShowMDO] = useState(false)
@@ -88,7 +89,7 @@ const Earn = () => {
   useEffect(()=> {
     setLpChoice(networkService.L1orL2 === 'L1' ? 'L1LP' : 'L2LP')
     setPoolTab(activeNetworkName[layer?.toLowerCase()])
-  }, [layer, networkService])
+  }, [layer, networkService, activeNetworkName])
 
 
   useEffect(() => {
@@ -100,7 +101,7 @@ const Earn = () => {
 
       dispatch(fetchBalances())
     }
-  }, [dispatch, baseEnabled, accountEnabled])
+  }, [dispatch, baseEnabled, accountEnabled, activeNetworkName])
 
 
   const getBalance = (address, chain) => {
@@ -116,6 +117,7 @@ const Earn = () => {
 
 
   const selectedPoolInfo = lpChoice === 'L1LP' ? poolInfo.L1LP : poolInfo.L2LP;
+
   const selectedNetworkConfig =
     lpChoice === 'L1LP'
       ? networkService?.networkConfig?.L1?.chainIdHex
diff --git a/packages/boba/gateway/src/containers/home/Home.js b/packages/boba/gateway/src/containers/home/Home.js
index b350a5612a..436c1c4e9f 100644
--- a/packages/boba/gateway/src/containers/home/Home.js
+++ b/packages/boba/gateway/src/containers/home/Home.js
@@ -20,7 +20,8 @@ import { getFS_Saves, getFS_Info } from 'actions/fixedAction'
 
 import { fetchBalances } from 'actions/networkAction'
 
-import { selectAccountEnabled, selectActiveNetwork } from 'selectors'
+import { selectAccountEnabled, selectActiveNetwork, selectBaseEnabled,selectChainIdChanged
+} from 'selectors'
 
 /******** COMPONENTS ********/
 import { PageTitle } from 'components/layout/PageTitle'
@@ -45,9 +46,13 @@ const Home = () => {
   const dispatch = useDispatch()
   const activeNetwork = useSelector(selectActiveNetwork())
   const accountEnabled = useSelector(selectAccountEnabled())
+  const baseEnabled = useSelector(selectBaseEnabled())
+
   useInterval(() => {
     if (accountEnabled /*== MetaMask is connected*/) {
-      dispatch(fetchBalances()) // account specific
+      if(baseEnabled) {
+        dispatch(fetchBalances()) // account specific
+      }
       if (activeNetwork === NETWORK.ETHEREUM) {
         dispatch(getFS_Info())   // account specific
         dispatch(getFS_Saves()) // account specific
@@ -55,6 +60,8 @@ const Home = () => {
     }
   }, POLL_INTERVAL)
 
+
+
   useGoogleAnalytics(); // Invoking GA analysis page view hooks
   useOnboard()
   useNetwork()
diff --git a/packages/boba/gateway/src/containers/modals/dao/old/NewProposalModalOldDao.js b/packages/boba/gateway/src/containers/modals/dao/old/NewProposalModalOldDao.js
index b7a600b0b9..c11323a8e3 100644
--- a/packages/boba/gateway/src/containers/modals/dao/old/NewProposalModalOldDao.js
+++ b/packages/boba/gateway/src/containers/modals/dao/old/NewProposalModalOldDao.js
@@ -10,154 +10,86 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. */
 
-import React, { useState } from 'react'
-import { Box } from '@mui/material'
-
-import { useDispatch, useSelector } from 'react-redux'
-import { closeModal, openAlert } from 'actions/uiAction'
-import Modal from 'components/modal/Modal'
-import Input from 'components/input/Input'
-
-import { createDaoProposal } from 'actions/daoAction'
-import { selectProposalThreshold } from 'selectors'
-import { Button } from 'components/global/button'
-import { ModalTypography } from 'components/global/modalTypography'
-import { Dropdown } from 'components/global/dropdown'
+import React, { useState } from 'react';
+import { Box, Button, Dropdown, Input, Modal, ModalTypography } from 'components/global';
+import { useDispatch, useSelector } from 'react-redux';
+import { closeModal, openAlert } from 'actions/uiAction';
+import { createDaoProposal } from 'actions/daoAction';
+import { selectProposalThreshold } from 'selectors';
 
 const NewProposalModal = ({ open }) => {
-
-  const dispatch = useDispatch()
-
-  const [action, setAction] = useState('')
-  const [votingThreshold, setVotingThreshold] = useState('')
-
-  const [LPfeeMin, setLPfeeMin] = useState('')
-  const [LPfeeMax, setLPfeeMax] = useState('')
-  const [LPfeeOwn, setLPfeeOwn] = useState('')
-
-  const [proposeText, setProposeText] = useState('')
-  const [proposalUri, setProposalUri] = useState('')
-
-  const loading = false //ToDo useSelector(selectLoading([ 'PROPOSAL_DAO/CREATE' ]))
-
-
-  const proposalThreshold = useSelector(selectProposalThreshold)
+  const dispatch = useDispatch();
+
+  const initialFormState = {
+    action: '',
+    votingThreshold: '',
+    LPfeeMin: '',
+    LPfeeMax: '',
+    LPfeeOwn: '',
+    proposeText: '',
+    proposalUri: ''
+  };
+
+  const [formState, setFormState] = useState(initialFormState);
+
+  const {
+    action,
+    votingThreshold,
+    LPfeeMin,
+    LPfeeMax,
+    LPfeeOwn,
+    proposeText,
+    proposalUri,
+  } = formState
+
+  const resetState = () => setFormState(initialFormState);
 
   const onActionChange = (option) => {
-    setVotingThreshold('')
-    setLPfeeMin('')
-    setLPfeeMax('')
-    setLPfeeOwn('')
-    setProposeText('')
-    setProposalUri('')
-    setAction(option.value)
-  }
+    resetState();
+    setFormState(prevState => ({ ...prevState, action: option.value }));
+  };
 
   const handleClose = () => {
-    setVotingThreshold('')
-    setLPfeeMin('')
-    setLPfeeMax('')
-    setLPfeeOwn('')
-    setAction('')
-    setProposeText('')
-    setProposalUri('')
-    dispatch(closeModal('newProposalModal'))
-  }
-
-  const options = [
-    {
-      value: 'change-threshold',
-      label: 'Change Voting Threshold',
-      title: 'Change Voting Threshold',
-    },
-    {
-      value: 'text-proposal',
-      label: 'Freeform Text Proposal',
-      title: 'Freeform Text Proposal',
-    },
-    {
-      value: 'change-lp1-fee',
-      label: 'Change L1 LP fees',
-      title: 'Change L1 LP fees',
-    },
-    {
-      value: 'change-lp2-fee',
-      label: 'Change L2 LP fees',
-      title: 'Change L2 LP fees',
-    },
-  ]
-
-  const customStyles = {
-    option: (provided, state) => ({
-      ...provided,
-      color: state.isSelected ? '#282828' : '#909090',
-    }),
-  }
-
-  const submit = async () => {
-
-    let res = null
-
-    if (action === 'change-threshold') {
-      res = await dispatch(
-        createDaoProposal({
-          action,
-          value: [votingThreshold],
-          text: '', //extra text if any
-      }))
-    } else if (action === 'text-proposal') {
-      res = await dispatch(createDaoProposal({
-        action,
-        text: `${proposeText}@@${proposalUri}`
-      }))
-    } else if (action === 'change-lp1-fee' || action === 'change-lp2-fee') {
-      res = await dispatch(createDaoProposal({
-        action,
-        value: [ Math.round(Number(LPfeeMin) * 10), Math.round(Number(LPfeeMax) * 10), Math.round(Number(LPfeeOwn) * 10) ],
-        text: ''  //extra text if any
-      }))
-    }
-
-    if (res) {
-      dispatch(openAlert(`Proposal has been submitted. It will be listed soon`))
+    resetState();
+    dispatch(closeModal('newProposalModal'));
+  };
+
+  const handleCreateDaoProposal = async (action, value = [], text = '') => {
+    const result = await dispatch(createDaoProposal({ action, value, text }));
+    if (result) {
+      dispatch(openAlert('Proposal has been submitted. It will be listed soon'));
+      handleClose();
     }
-    handleClose()
-  }
+  };
 
-  const disabled = () => {
-    if (action === 'change-threshold') {
-      return !votingThreshold
-    } else if (action === 'text-proposal') {
-      return !proposeText
-    } else if (action === 'change-lp1-fee' || action === 'change-lp2-fee') {
-      if (Number(LPfeeMin) < 0.0 || Number(LPfeeMin) > 5.0) {
-        return true //aka disabled
-      }
-      if (Number(LPfeeMax) < 0.0 || Number(LPfeeMax) > 5.0) {
-        return true //aka disabled
-      }
-      if (Number(LPfeeMax) <= Number(LPfeeMin)) {
-        return true //aka disabled
-      }
-      if (Number(LPfeeOwn) < 0.0 || Number(LPfeeOwn) > 5.0) {
-        return true
-      }
-      if (LPfeeMin === '') {
-        return true
-      }
-      if (LPfeeMax === '') {
-        return true
-      }
-      if (LPfeeOwn === '') {
-        return true
-      }
-      return false
+  const submit = async () => {
+    switch (action) {
+      case 'change-threshold':
+        handleCreateDaoProposal(action, [votingThreshold]);
+        break;
+      case 'text-proposal':
+        handleCreateDaoProposal(action, [], `${proposeText}@@${proposalUri}`);
+        break;
+      case 'change-lp1-fee':
+      case 'change-lp2-fee':
+        handleCreateDaoProposal(action, [
+          Math.round(Number(LPfeeMin) * 10),
+          Math.round(Number(LPfeeMax) * 10),
+          Math.round(Number(LPfeeOwn) * 10)
+        ]);
+        break;
+      default:
+        break;
     }
-  }
-
+  };
 
   return (
-    <Modal open={open} onClose={handleClose} maxWidth="sm" title="Create Proposal">
+    <Modal
+      open={open}
+      onClose={handleClose}
+      maxWidth="sm"
+      title="Create Proposal"
+    >
       <Box>
 
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
@@ -169,8 +101,8 @@ const NewProposalModal = ({ open }) => {
             style={{ zIndex: 2 }}
             onItemSelected={(option)=> onActionChange(option)}
             defaultItem={{
-                value: null,
-                label: 'Choose type of proposal',
+              value: null,
+              label: 'Choose type of proposal',
             }}
             items={options}
           />
@@ -181,14 +113,14 @@ const NewProposalModal = ({ open }) => {
               </ModalTypography>
 
               <Input
-                  label="DAO voting threshold"
-                  placeholder='New voting threshold (e.g. 65000)'
-                  value={votingThreshold}
-                  type="number"
-                  onChange={(i) => setVotingThreshold(i.target.value)}
-                  fullWidth
-                  sx={{ marginBottom: '20px' }}
-            />
+                label="DAO voting threshold"
+                placeholder='New voting threshold (e.g. 65000)'
+                value={votingThreshold}
+                type="number"
+                onChange={(i) => setVotingThreshold(i.target.value)}
+                fullWidth
+                sx={{ marginBottom: '20px' }}
+              />
             </>
           }
           {(action === 'change-lp1-fee' || action === 'change-lp2-fee') &&
@@ -250,7 +182,9 @@ const NewProposalModal = ({ open }) => {
         </Box>
       </Box>
       <Button
-        onClick={() => { submit() }}
+        onClick={() => {
+          submit()
+        }}
         /*tooltip={loading ? "Your transaction is still pending. Please wait for confirmation." : "Click here to submit a new proposal"}*/
         loading={loading}
         disabled={disabled()}
diff --git a/packages/boba/gateway/src/containers/modals/switchNetwork/SwitchNetworkModal.js b/packages/boba/gateway/src/containers/modals/switchNetwork/SwitchNetworkModal.js
index 1db0ac9265..4e7ed8b5e1 100644
--- a/packages/boba/gateway/src/containers/modals/switchNetwork/SwitchNetworkModal.js
+++ b/packages/boba/gateway/src/containers/modals/switchNetwork/SwitchNetworkModal.js
@@ -15,7 +15,6 @@ const SwitchNetworkModal = ({open}) => {
   const network = useSelector(selectNetwork());
   const networkType = useSelector(selectActiveNetworkType())
 
-  console.log('network', network)
 
   const onClick = () => {
     dispatch(setActiveNetwork());
diff --git a/packages/boba/gateway/src/hooks/useBridgeSetup.ts b/packages/boba/gateway/src/hooks/useBridgeSetup.ts
index 8c147cb0ba..2f882dc22a 100644
--- a/packages/boba/gateway/src/hooks/useBridgeSetup.ts
+++ b/packages/boba/gateway/src/hooks/useBridgeSetup.ts
@@ -38,7 +38,6 @@ const useBridgeSetup = () => {
   const layer = useSelector(selectLayer())
   const bridgeType = useSelector(selectBridgeType())
   const token = useSelector(selectTokenToBridge())
-
   useEffect(() => {
     if (bridgeType === BRIDGE_TYPE.TELEPORTATION) {
       // Teleportation
diff --git a/packages/boba/gateway/src/hooks/useOnboard.ts b/packages/boba/gateway/src/hooks/useOnboard.ts
index 01d02741d5..259021faf4 100644
--- a/packages/boba/gateway/src/hooks/useOnboard.ts
+++ b/packages/boba/gateway/src/hooks/useOnboard.ts
@@ -17,7 +17,6 @@ export const useOnboard = () => {
 
   useEffect(() => {
     window.scrollTo(0, 0)
-
     const initBase = async () => {
       const initialized = await networkService.initializeBase({
         networkGateway: activeNetwork,
diff --git a/packages/boba/gateway/src/hooks/useWalletConnect.ts b/packages/boba/gateway/src/hooks/useWalletConnect.ts
index 898ee8e0b3..507d5b6943 100644
--- a/packages/boba/gateway/src/hooks/useWalletConnect.ts
+++ b/packages/boba/gateway/src/hooks/useWalletConnect.ts
@@ -48,12 +48,10 @@ export const useWalletConnect = () => {
       const initialized = await networkService.initializeAccount({
         chainIdChanged,
       })
-
       if (initialized === 'nometamask') {
         dispatch(openModal('noMetaMaskModal'))
         return false
       } else if (initialized === 'wrongnetwork') {
-        dispatch(openModal('wrongNetworkModal'))
         return false
       } else if (initialized === false) {
         dispatch(setEnableAccount(false))
diff --git a/packages/boba/gateway/src/hooks/useWalletSwitch.ts b/packages/boba/gateway/src/hooks/useWalletSwitch.ts
index 5f12e6513c..26a6484dc3 100644
--- a/packages/boba/gateway/src/hooks/useWalletSwitch.ts
+++ b/packages/boba/gateway/src/hooks/useWalletSwitch.ts
@@ -2,7 +2,16 @@ import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { openModal } from 'actions/uiAction'
-import { setConnect, setConnectBOBA, setConnectETH } from 'actions/setupAction'
+import {
+  setBaseState,
+  setEnableAccount,
+  setConnect,
+  setConnectBOBA,
+  setConnectETH,
+} from 'actions/setupAction'
+
+import { setActiveNetwork } from 'actions/networkAction'
+
 import {
   selectActiveNetwork,
   selectActiveNetworkType,
@@ -46,7 +55,9 @@ const useWalletSwitch = () => {
   useEffect(() => {
     if (accountEnabled) {
       if (activeNetwork !== network || activeNetworkType !== networkType) {
-        dispatch(openModal('switchNetworkModal'))
+        dispatch(setActiveNetwork())
+        dispatch(setBaseState(false))
+        dispatch(setEnableAccount(false))
       }
     }
   }, [activeNetwork, activeNetworkType, network, networkType, dispatch])
diff --git a/packages/boba/gateway/src/services/networkService.js b/packages/boba/gateway/src/services/networkService.js
index a4e7507af4..07ab5f90d6 100644
--- a/packages/boba/gateway/src/services/networkService.js
+++ b/packages/boba/gateway/src/services/networkService.js
@@ -650,6 +650,10 @@ class NetworkService {
       const L1ChainId = networkDetail['L1']['chainId']
       const L2ChainId = networkDetail['L2']['chainId']
 
+      if (!this.networkGateway || typeof chainId === 'undefined' || typeof L1ChainId === 'undefined' || typeof L2ChainId === 'undefined') {
+          return;
+      }
+
       // there are numerous possible chains we could be on also, either L1 or L2
       // at this point, we only know whether we want to be on which network etc
 
@@ -661,6 +665,8 @@ class NetworkService {
         return 'wrongnetwork'
       }
 
+
+
       // this should not do anything unless we changed chains
       if (this.L1orL2 === 'L2') {
         await this.getBobaFeeChoice()
@@ -677,6 +683,7 @@ class NetworkService {
 
   async switchChain(targetLayer) {
     // ignore request if we are already on the target layer
+
     if (!targetLayer) {
       return false
     }
@@ -685,7 +692,6 @@ class NetworkService {
       network: this.networkGateway,
       networkType: this.networkType
     })
-
     const targetIDHex = networkDetail[targetLayer].chainIdHex
     const rpcURL = targetLayer === 'L1' ? this.L1Provider.connection.url : networkDetail[targetLayer].rpcUrl
     const chainParam = {
@@ -766,11 +772,10 @@ class NetworkService {
 
 
   async getBalances() {
-
     try {
 
-      let layer1Balances, layer2Balances;
-
+      let layer1Balances;
+      let layer2Balances;
       if (this.network === NETWORK.ETHEREUM) {
         layer1Balances = [
           {
@@ -794,7 +799,10 @@ class NetworkService {
             balance: new BN(0),
           },
         ]
+
+
       } else {
+
         layer1Balances = [
           {
             address: this.addresses.L1_ETH_Address,
@@ -817,7 +825,6 @@ class NetworkService {
             balance: new BN(0),
           },
         ]
-
       }
 
       // Always check ETH
@@ -837,7 +844,10 @@ class NetworkService {
       )
 
       const getERC20Balance = async (token, tokenAddress, layer, provider) => {
-        const balance = await tokenC.attach(tokenAddress).connect(provider).balanceOf(this.account)
+        const balance = await tokenC
+          .attach(tokenAddress)
+          .connect(provider)
+          .balanceOf(this.account)
         return {
           ...token,
           balance: new BN(balance.toString()),
@@ -2067,9 +2077,9 @@ class NetworkService {
         tokenBalance = await this.L1_TEST_Contract.attach(tokenAddress).connect(this.L1Provider).balanceOf(this.addresses.L1LPAddress)
         const tokenInfoFiltered = this.tokenInfo.L1[utils.getAddress(tokenAddress)]
         if (tokenInfo) {
-          tokenSymbol = tokenInfoFiltered.symbol
-          tokenName = tokenInfoFiltered.name
-          decimals = tokenInfoFiltered.decimals
+          tokenSymbol = tokenInfoFiltered?.symbol
+          tokenName = tokenInfoFiltered?.name
+          decimals = tokenInfoFiltered?.decimals
         } else {
           tokenSymbol = await this.L1_TEST_Contract.attach(tokenAddress).connect(this.L1Provider).symbol()
           tokenName = await this.L1_TEST_Contract.attach(tokenAddress).connect(this.L1Provider).name()
@@ -2423,7 +2433,7 @@ class NetworkService {
     }
     if (networkConfig.networkType !== NETWORK_TYPE.TESTNET) {
       if (isDevBuild()) {
-        console.log("DEV: Teleportation is only supported on testnet for now, chainId: ", chainId)
+       /*console.log("DEV: Teleportation is only supported on testnet for now, chainId: ", chainId)*/
       }
       return {teleportationAddr: undefined, networkConfig}
     }
@@ -3661,7 +3671,6 @@ class NetworkService {
           this.account,
           this.addresses.L2LPAddress
         )
-      console.log("L2LP", allowance_BN.toString())
 
       approveStatus = await this.BobaContract
         .connect(this.provider.getSigner())
@@ -3670,13 +3679,11 @@ class NetworkService {
           approvalAmount
         )
       await approveStatus.wait()
-      console.log("L2LP", approveStatus)
     }
 
   }
 
   async getFS_Info() {
-
     if (this.account === null) {
       console.log('NS: getFS_Info() error - called but account === null')
       return
diff --git a/packages/boba/gateway/src/services/wallet.service.js b/packages/boba/gateway/src/services/wallet.service.js
index 2108bde78c..adf2b74834 100644
--- a/packages/boba/gateway/src/services/wallet.service.js
+++ b/packages/boba/gateway/src/services/wallet.service.js
@@ -16,13 +16,12 @@ limitations under the License. */
 
   import { providers, utils } from "ethers"
   import WalletConnectProvider from "@walletconnect/web3-provider"
-  import { rpcUrls } from 'util/network/network.util'
+  import { rpcUrls, CHAIN_ID_LIST, NetworkList } from 'util/network/network.util'
   import store from 'store'
-  import { CHAIN_ID_LIST, NetworkList } from 'util/network/network.util'
+  import { setActiveNetwork, setNetwork } from 'actions/networkAction'
+  import { setBaseState, setEnableAccount } from 'actions/setupAction';
   import { openModal } from 'actions/uiAction';
 
-import { setActiveNetwork, setNetwork } from 'actions/networkAction'
-
   class WalletService {
     constructor() {
       this.provider = null
@@ -59,6 +58,9 @@ import { setActiveNetwork, setNetwork } from 'actions/networkAction'
 
   async listenMetaMask() {
     window.ethereum.on('accountsChanged', () => {
+      //reset connection
+      store.dispatch(setBaseState(false));
+      store.dispatch(setEnableAccount(false));
       window.location.reload()
     })
 
@@ -69,8 +71,8 @@ import { setActiveNetwork, setNetwork } from 'actions/networkAction'
           chain: network,
           icon: networkIcon,
           name
-        } = NetworkList[networkType].find(network => network.chain === chain);
-        store.dispatch({ type: 'SETUP/CHAINIDCHANGED/SET', payload: Number(chainId) });
+        } = NetworkList[ networkType ].find(network => network.chain === chain);
+        store.dispatch({ type: 'SETUP/CHAINIDCHANGED/SET', payload: Number(chainId) })
         store.dispatch(
           setNetwork({
             networkType,
@@ -78,8 +80,8 @@ import { setActiveNetwork, setNetwork } from 'actions/networkAction'
             networkIcon,
             name
           })
-        );
-        store.dispatch(setActiveNetwork());
+        )
+        store.dispatch(setActiveNetwork())
       } else {
         store.dispatch(openModal('UnsupportedNetwork'))
       }