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
bobanetwork · Sep 20, 2023 · ee692cb · ee692cb
1 parent 462866c
commit ee692cb
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 180 deletions.
diff --git 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
@@ -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,16 +46,22 @@ 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
       }
     }
   }, 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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))