From b99922c15e34174e1295fa0f86c309dd8d97d340 Mon Sep 17 00:00:00 2001
From: Leandro Boscariol <alfetopito@users.noreply.github.com>
Date: Tue, 3 May 2022 07:29:42 -0700
Subject: [PATCH] Disabling onHover and enabling onClick events for
 NetworkSelector on mobile (#503)

---
 .../Header/NetworkSelector/NetworkSelectorMod.tsx          | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx b/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
index 891175a5f8..b7fc43cfa8 100644
--- a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
+++ b/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>