diff --git a/client/src/components/molecules/NetworkSwitcher.module.scss b/client/src/components/molecules/NetworkSwitcher.module.scss index 0f25406..24c91b5 100644 --- a/client/src/components/molecules/NetworkSwitcher.module.scss +++ b/client/src/components/molecules/NetworkSwitcher.module.scss @@ -28,11 +28,11 @@ .networkList { position: absolute; border: 1px solid $brand-grey-lighter; - padding: 8px; border-radius: $border-radius; max-width: 200px; display: none; margin: 0; + padding: 0; width: 100%; } @@ -55,6 +55,7 @@ cursor: pointer; font-size: $font-size-mini; text-align: left; + padding: 4px; } .networkList li span { @@ -64,6 +65,7 @@ .networkList li:hover { color: $brand-violet; font-size: $font-size-mini; + background-color: $brand-grey-lighter; } .networkList li:before { diff --git a/client/src/components/molecules/NetworkSwitcher.tsx b/client/src/components/molecules/NetworkSwitcher.tsx index 295c0fa..90f905c 100644 --- a/client/src/components/molecules/NetworkSwitcher.tsx +++ b/client/src/components/molecules/NetworkSwitcher.tsx @@ -1,4 +1,4 @@ -import React, { useState, useContext, useEffect } from 'react' +import React, { useState, useContext, useEffect, useRef } from 'react' import { urlq } from '../../utils/utils' import { CONNECTIONS } from '../../config' import { User } from '../../context' @@ -21,8 +21,19 @@ export const oceanConfig = /* NETWORK SWITCHER */ export function NetworkSwitcher() { + const node: any = useRef() const [isToggled, setIsToggled] = useState(false) - /* + + useEffect(() => { + // Handle click outside to collapse Network switcher dropdown + // add listener when mounted + document.addEventListener('mousedown', handleTogle) + // return function when unmounted + return () => { + document.removeEventListener('mousedown', handleTogle) + } + }, []) + /* useEffect(() => { if (networkUrlParam !== '') { switchNetwork(networkUrlParam) @@ -30,24 +41,30 @@ export function NetworkSwitcher() { }, []) */ - const handleTogle = () => { - setIsToggled(!isToggled) + const handleTogle = (e: any) => { + const isClickedInside = node.current.contains(e.target) + setIsToggled(isClickedInside) } - const { network } = useContext(User) + const { network, isBurner } = useContext(User) - const switchNetwork = (networkName: string): any => + console.log(isBurner) + + const switchNetwork = (networkName: string): any => { // Force page to get refreshed - (window.location.href = `${window.location.origin}?network=${networkName}`) - //userContext.switchNetwork(networkName, getNetworkConfig(networkName)) + window.location.href = `${window.location.origin}?network=${networkName}` + //userContext.switchNetwork(networkName, getNetworkConfig(networkName)) + setIsToggled(false) // for the case without force page refresh + } - return ( + return !isBurner ? null : (