tiggler Selectors when account is anable only (#1099)

bobanetwork · Aug 10, 2023 · e6b1868 · e6b1868
1 parent bfa5f22
commit e6b1868
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/packages/boba/gateway/src/containers/modals/switchNetwork/SwitchNetworkModal.js b/packages/boba/gateway/src/containers/modals/switchNetwork/SwitchNetworkModal.js
@@ -10,13 +10,12 @@ import { closeModal } from 'actions/uiAction';
 
 import { selectActiveNetworkType, selectNetwork } from 'selectors';
 
-function SwitchNetworkModal({open}) {
-
-  const dispatch = useDispatch();
+const SwitchNetworkModal = ({open}) => {
+  const dispatch = useDispatch()
   const network = useSelector(selectNetwork());
   const networkType = useSelector(selectActiveNetworkType())
 
-  function onClick() {
+  const onClick = () => {
     dispatch(setActiveNetwork());
     // reset baseState to false to trigger initialization on chain change.
     // and trigger the connect to BOBA & ETH base on current chain.
@@ -25,7 +24,7 @@ function SwitchNetworkModal({open}) {
     dispatch(closeModal('switchNetworkModal'));
   }
 
-  function handleClose() {
+  const handleClose = () => {
     dispatch(setConnect(false));
     dispatch(closeModal('switchNetworkModal'));
   }
@@ -38,10 +37,12 @@ function SwitchNetworkModal({open}) {
       title="Switch Network"
       newStyle={true}
     >
-        <Button
-          label={`Switch to ${network} ${networkType === 'Testnet'? networkType: ''} network`}
-          onClick={()=>onClick()}
-        />
+      <Button
+        label={`Switch to ${network} ${
+          networkType === 'Testnet' ? networkType : ''
+        } network`}
+        onClick={() => onClick()}
+      />
     </Modal>
   )
 }

diff --git a/packages/boba/gateway/src/hooks/useWalletSwitch.ts b/packages/boba/gateway/src/hooks/useWalletSwitch.ts
@@ -10,11 +10,14 @@ import {
   selectNetworkType,
   selectBaseEnabled,
   selectLayer,
+  selectAccountEnabled,
 } from 'selectors'
+
 import { LAYER } from 'util/constant'
 
 const useWalletSwitch = () => {
   const dispatch = useDispatch<any>()
+  const accountEnabled = useSelector(selectAccountEnabled())
   const network = useSelector(selectNetwork())
   const activeNetwork = useSelector(selectActiveNetwork())
   const networkType = useSelector(selectNetworkType())
@@ -39,8 +42,10 @@ const useWalletSwitch = () => {
   }, [layer, reconnect, baseEnabled, dispatch])
 
   useEffect(() => {
-    if (activeNetwork !== network || activeNetworkType !== networkType) {
-      dispatch(openModal('switchNetworkModal'))
+    if (accountEnabled) {
+      if (activeNetwork !== network || activeNetworkType !== networkType) {
+        dispatch(openModal('switchNetworkModal'))
+      }
     }
   }, [activeNetwork, activeNetworkType, network, networkType, dispatch])
 }