Disabling onHover and enabling onClick events for NetworkSelector on …

…mobile (#503)

src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx

@@ -30,6 +30,7 @@ import { UnsupportedChainIdError, useWeb3React } from 'web3-react-core'
 import { useAddPopup, useRemovePopup } from 'state/application/hooks'
 import { useEffect } from 'react'
 import { getExplorerBaseUrl } from 'utils/explorer'
+import { isMobile } from 'utils/userAgent'
 
 /* const ActiveRowLinkList = styled.div`
   display: flex;
@@ -298,6 +299,10 @@ export default function NetworkSelector() {
   const addPopup = useAddPopup()
   const removePopup = useRemovePopup()
 
+  // mod: When on mobile, disable on hover and enable on click events
+  const onHoverEvent = () => !isMobile && toggle()
+  const onClickEvent = () => isMobile && toggle()
+
   useEffect(() => {
     const POPUP_KEY = chainId?.toString()
 
@@ -391,7 +396,7 @@ export default function NetworkSelector() {
   }
 
   return (
-    <SelectorWrapper ref={node as any} onMouseEnter={toggle} onMouseLeave={toggle}>
+    <SelectorWrapper ref={node as any} onMouseEnter={onHoverEvent} onMouseLeave={onHoverEvent} onClick={onClickEvent}>
       {/*<SelectorControls onClick={conditionalToggle} interactive={showSelector}>
         <SelectorLogo interactive={showSelector} src={info.logoUrl || mainnetInfo.logoUrl} />*/}
       <SelectorControls interactive>