Tune the behavior of the Paratime picker

src/app/components/ParaTimePicker/LayerDetails.tsx

@@ -15,6 +15,7 @@ import { Link as RouterLink } from 'react-router-dom'
 import { docs } from '../../utils/externalLinks'
 import { TextList, TextListItem } from '../TextList'
 import { getLayerLabels, getNetworkIcons } from '../../utils/content'
+import { getNameForScope } from '../../../types/searchScope'
 
 type LayerDetailsContent = {
   description: string
@@ -68,26 +69,21 @@ const getDetails = (t: TFunction): Details => ({
 
 type LayerDetailsProps = {
   activeLayer: Layer
-  hoveredLayer?: Layer
   network: Network
-  selectedLayer?: Layer
+  selectedLayer: Layer
 }
 
 // Prevent modal height from changing height when switching between layers
 const contentMinHeight = '270px'
 
-export const LayerDetails: FC<LayerDetailsProps> = ({
-  activeLayer,
-  hoveredLayer,
-  network,
-  selectedLayer,
-}) => {
+export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer }) => {
   const { t } = useTranslation()
   const theme = useTheme()
   const labels = getNetworkNames(t)
   const layerLabels = getLayerLabels(t)
   const icons = getNetworkIcons()
-  const layer = hoveredLayer || selectedLayer || activeLayer
+  const layer = selectedLayer
+
   const details = getDetails(t)[network][layer]
 
   if (!details) {
@@ -118,7 +114,7 @@ export const LayerDetails: FC<LayerDetailsProps> = ({
           }}
         >
           <Typography sx={{ fontSize: 24, color: COLORS.brandDark, fontWeight: 700, mr: 3 }} component="span">
-            {layerLabels[layer]} {labels[network]}
+            {getNameForScope(t, { network, layer })}
           </Typography>
           <Typography sx={{ fontSize: 10, color: COLORS.paraTimeStatus, mr: 3 }} component="span">
             {t('common.paraTimeOnline')}

src/app/components/ParaTimePicker/LayerMenu.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Typography from '@mui/material/Typography'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
@@ -33,12 +33,15 @@ export const DisabledLayerMenuItem: FC<BaseLayerMenuItemProps> = ({ divider, lay
   )
 }
 
-type LayerMenuItemProps = LayerMenuProps & BaseLayerMenuItemProps
+type LayerMenuItemProps = LayerMenuProps &
+  BaseLayerMenuItemProps & {
+    hoveredLayer?: Layer
+    setHoveredLayer: (layer?: Layer) => void
+  }
 
 export const LayerMenuItem: FC<LayerMenuItemProps> = ({
   activeLayer,
   divider,
-  hoveredLayer,
   layer,
   network,
   selectedLayer,
@@ -54,12 +57,14 @@ export const LayerMenuItem: FC<LayerMenuItemProps> = ({
     <MenuItem
       divider={divider}
       onMouseEnter={() => {
-        if (layer !== selectedLayer) {
-          setSelectedLayer(undefined)
-        }
         setHoveredLayer(layer)
       }}
-      onClick={() => setSelectedLayer(layer)}
+      onMouseLeave={() => {
+        setHoveredLayer()
+      }}
+      onClick={() => {
+        setSelectedLayer(layer)
+      }}
       selected={activeLayerSelection}
     >
       <ListItemText>
@@ -71,36 +76,33 @@ export const LayerMenuItem: FC<LayerMenuItemProps> = ({
           {selectedNetwork === network && activeLayer === layer && t('paraTimePicker.selected')}
         </Typography>
       </ListItemText>
-      {activeLayerSelection && <KeyboardArrowRightIcon />}
+      {layer === selectedLayer && <KeyboardArrowRightIcon />}
     </MenuItem>
   )
 }
 type LayerMenuProps = {
   activeLayer: Layer
-  hoveredLayer?: Layer
   network: Network
   selectedLayer?: Layer
-  selectedNetwork?: Network
-  setHoveredLayer: (layer?: Layer) => void
-  setSelectedLayer: (layer?: Layer) => void
+  selectedNetwork: Network
+  setSelectedLayer: (layer: Layer) => void
 }
 
 const menuSortOrder: Record<Layer, number> = {
   [Layer.consensus]: 1,
-  [Layer.emerald]: 2,
-  [Layer.sapphire]: 3,
+  [Layer.sapphire]: 2,
+  [Layer.emerald]: 3,
   [Layer.cipher]: 4,
 }
 
 export const LayerMenu: FC<LayerMenuProps> = ({
   activeLayer,
-  hoveredLayer,
   network,
   selectedLayer,
   selectedNetwork,
-  setHoveredLayer,
   setSelectedLayer,
 }) => {
+  const [hoveredLayer, setHoveredLayer] = useState<undefined | Layer>()
   const options = Object.values(Layer)
     .map(layer => ({
       layer,

src/app/components/ParaTimePicker/NetworkMenu.tsx

@@ -16,12 +16,13 @@ import { getNetworkIcons } from '../../utils/content'
 type NetworkMenuItemProps = Omit<NetworkMenuProps, 'options'> & {
   divider: boolean
   network: Network
+  hoveredNetwork?: Network
+  setHoveredNetwork: (network?: Network) => void
 }
 
 export const NetworkMenuItem: FC<NetworkMenuItemProps> = ({
   activeNetwork,
   divider,
-  hoveredNetwork,
   network,
   selectedNetwork,
   setHoveredNetwork,
@@ -37,9 +38,14 @@ export const NetworkMenuItem: FC<NetworkMenuItemProps> = ({
       divider={divider}
       onMouseEnter={() => {
         setHoveredNetwork(network)
-        setSelectedNetwork(network)
+      }}
+      onMouseLeave={() => {
+        setHoveredNetwork(undefined)
       }}
       selected={activeNetworkSelection}
+      onClick={() => {
+        setSelectedNetwork(network)
+      }}
     >
       <ListItemIcon>{icons[network]}</ListItemIcon>
       <ListItemText>
@@ -53,45 +59,45 @@ export const NetworkMenuItem: FC<NetworkMenuItemProps> = ({
           </Typography>
         )}
       </ListItemText>
-      {activeNetworkSelection && <KeyboardArrowRightIcon />}
+      {network === selectedNetwork && <KeyboardArrowRightIcon />}
     </MenuItem>
   )
 }
 
 type NetworkMenuProps = {
   activeNetwork: Network
-  hoveredNetwork?: Network
-  network: Network
   selectedNetwork?: Network
-  setHoveredNetwork: (network?: Network) => void
-  setSelectedNetwork: (network?: Network) => void
+  setSelectedNetwork: (network: Network) => void
 }
 
-export const NetworkMenu: FC<NetworkMenuProps> = ({
-  activeNetwork,
-  hoveredNetwork,
-  network,
-  selectedNetwork,
-  setHoveredNetwork,
-  setSelectedNetwork,
-}) => {
+export const NetworkMenu: FC<NetworkMenuProps> = ({ activeNetwork, selectedNetwork, setSelectedNetwork }) => {
   const { t } = useTranslation()
-  const [expandNetworkMenu, setExpandNetworkMenu] = useState(network !== Network.mainnet)
+  const [expandNetworkMenu, setExpandNetworkMenu] = useState(activeNetwork !== Network.mainnet)
+  const [hoveredNetwork, setHoveredNetwork] = useState<undefined | Network>()
   const options: Network[] = RouteUtils.getEnabledNetworks()
-  const filteredOptions = options.filter(option => option !== Network.mainnet)
+
+  const shouldAlwaysShow = (net: Network) =>
+    net === Network.mainnet || net === activeNetwork || net === selectedNetwork
+  const shouldSometimesHide = (net: Network) => !shouldAlwaysShow(net)
+
+  const stableOptions = options.filter(shouldAlwaysShow)
+  const filteredOptions = options.filter(shouldSometimesHide)
 
   return (
     <>
       <MenuList>
-        <NetworkMenuItem
-          activeNetwork={activeNetwork}
-          divider
-          hoveredNetwork={hoveredNetwork}
-          selectedNetwork={selectedNetwork}
-          setHoveredNetwork={setHoveredNetwork}
-          setSelectedNetwork={setSelectedNetwork}
-          network={Network.mainnet}
-        />
+        {stableOptions.map((network, index) => (
+          <NetworkMenuItem
+            activeNetwork={activeNetwork}
+            divider={index !== stableOptions.length - 1}
+            key={network}
+            hoveredNetwork={hoveredNetwork}
+            selectedNetwork={selectedNetwork}
+            setHoveredNetwork={setHoveredNetwork}
+            setSelectedNetwork={setSelectedNetwork}
+            network={network}
+          />
+        ))}
         <Collapse orientation="vertical" in={expandNetworkMenu}>
           {filteredOptions.map((network, index) => (
             <NetworkMenuItem
@@ -107,14 +113,16 @@ export const NetworkMenu: FC<NetworkMenuProps> = ({
           ))}
         </Collapse>
       </MenuList>
-      <Button
-        onClick={() => setExpandNetworkMenu(!expandNetworkMenu)}
-        size="small"
-        variant="text"
-        sx={{ ml: '48px' }}
-      >
-        {expandNetworkMenu ? t('paraTimePicker.less') : t('paraTimePicker.more')}
-      </Button>
+      {!!filteredOptions.length && (
+        <Button
+          onClick={() => setExpandNetworkMenu(!expandNetworkMenu)}
+          size="small"
+          variant="text"
+          sx={{ ml: '48px' }}
+        >
+          {expandNetworkMenu ? t('paraTimePicker.less') : t('paraTimePicker.more')}
+        </Button>
+      )}
     </>
   )
 }

src/app/components/ParaTimePicker/index.tsx

@@ -17,6 +17,8 @@ import { NetworkMenuIcon } from './NetworkMenuIcon'
 import { NetworkMenu } from './NetworkMenu'
 import { LayerMenu } from './LayerMenu'
 import { LayerDetails } from './LayerDetails'
+import HighlightOff from '@mui/icons-material/HighlightOff'
+import { RouteUtils } from '../../utils/route-utils'
 
 type ParaTimePickerProps = {
   onClose: () => void
@@ -36,15 +38,26 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
   const { t } = useTranslation()
   const { network, layer } = useRequiredScopeParam()
   const [showNetworkMenu, setShowNetworkMenu] = useState(network !== Network.mainnet)
-  const [selectedLayer, setSelectedLayer] = useState<undefined | Layer>()
-  const [selectedNetwork, setSelectedNetwork] = useState<undefined | Network>(network)
-  const [hoveredLayer, setHoveredLayer] = useState<undefined | Layer>()
-  const [hoveredNetwork, setHoveredNetwork] = useState<undefined | Network>()
+  const [selectedLayer, setSelectedLayer] = useState<Layer>(layer)
+  const [selectedNetwork, setSelectedNetwork] = useState<Network>(network)
+  const selectNetwork = (newNetwork: Network) => {
+    setSelectedNetwork(newNetwork)
+    setSelectedLayer(RouteUtils.getEnabledLayersForNetwork(network)[0])
+  }
 
   return (
     <Box>
-      <Box sx={{ mb: 5, color: 'red' }}>
+      <Box sx={{ mb: 5, color: 'red', position: 'relative' }}>
         <Logotype color={COLORS.brandExtraDark} />
+        <HighlightOff
+          htmlColor={COLORS.brandExtraDark}
+          onClick={onClose}
+          fontSize={'large'}
+          sx={{
+            position: 'absolute',
+            right: 0,
+          }}
+        />
       </Box>
       <IconButton
         aria-label={t('paraTimePicker.toggleNetworkMenu')}
@@ -57,62 +70,57 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
         {showNetworkMenu ? <KeyboardDoubleArrowLeftIcon /> : <KeyboardDoubleArrowRightIcon />}
       </IconButton>
       <Divider />
-      <Box
-        onMouseLeave={() => {
-          setHoveredNetwork(undefined)
-        }}
-      >
+      <Box>
         <Grid container>
           {!showNetworkMenu && (
             <Grid xs={1} sx={{ maxWidth: '40px' }}>
-              <NetworkMenuIcon network={selectedNetwork || network} />
+              <NetworkMenuIcon network={selectedNetwork} />
             </Grid>
           )}
           {showNetworkMenu && (
             <Grid xs={4} md={3}>
               <NetworkMenu
                 activeNetwork={network}
-                hoveredNetwork={hoveredNetwork}
-                network={network}
                 selectedNetwork={selectedNetwork}
-                setHoveredNetwork={setHoveredNetwork}
-                setSelectedNetwork={setSelectedNetwork}
+                setSelectedNetwork={selectNetwork}
               />
             </Grid>
           )}
           <Grid xs={4} md={3}>
             <LayerMenu
               activeLayer={layer}
-              hoveredLayer={hoveredLayer}
               network={network}
               selectedLayer={selectedLayer}
               selectedNetwork={selectedNetwork}
-              setHoveredLayer={setHoveredLayer}
               setSelectedLayer={setSelectedLayer}
             />
           </Grid>
           <Grid xs={showNetworkMenu ? 4 : 7} md={6}>
-            <LayerDetails
-              activeLayer={layer}
-              hoveredLayer={hoveredLayer}
-              selectedLayer={selectedLayer}
-              network={selectedNetwork || network}
-            />
+            <LayerDetails activeLayer={layer} selectedLayer={selectedLayer} network={selectedNetwork} />
           </Grid>
         </Grid>
 
         <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 4 }}>
-          <Button onClick={onClose} color="secondary" variant="outlined" sx={{ textTransform: 'capitalize' }}>
-            {t('common.cancel')}
-          </Button>
-          <Button
-            onClick={() => onConfirm(selectedNetwork!, selectedLayer!)}
-            disabled={!selectedLayer || !selectedNetwork}
-            color="primary"
-            variant="contained"
-          >
-            {t('common.select')}
-          </Button>
+          {selectedLayer && (
+            <Button
+              onClick={onClose}
+              color="secondary"
+              variant="outlined"
+              sx={{ textTransform: 'capitalize' }}
+            >
+              {t('common.cancel')}
+            </Button>
+          )}
+          {selectedLayer && (
+            <Button
+              onClick={() => onConfirm(selectedNetwork!, selectedLayer!)}
+              disabled={selectedNetwork === network && selectedLayer === layer}
+              color="primary"
+              variant="contained"
+            >
+              {t('common.select')}
+            </Button>
+          )}
         </Box>
       </Box>
     </Box>