Merge pull request #482 from oasisprotocol/ml/mobile-paratime-picker

Mobile ParaTime picker

.changelog/482.feature.md

@@ -0,0 +1 @@
+Mobile ParaTime picker

src/app/components/PageLayout/Header.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useEffect, useRef } from 'react'
 import AppBar from '@mui/material/AppBar'
 import Grid from '@mui/material/Unstable_Grid2'
 import useScrollTrigger from '@mui/material/useScrollTrigger'
@@ -8,18 +8,35 @@ import { NetworkSelector } from './NetworkSelector'
 import Box from '@mui/material/Box'
 import { useScopeParam } from '../../hooks/useScopeParam'
 import { useScreenSize } from '../../hooks/useScreensize'
+import useResizeObserver from 'use-resize-observer'
 
 export const Header: FC = () => {
   const theme = useTheme()
-  const { isMobile } = useScreenSize()
+  const { isMobile, isTablet } = useScreenSize()
   const scope = useScopeParam()
   const scrollTrigger = useScrollTrigger({
     disableHysteresis: true,
     threshold: 0,
   })
+  const headerRef = useRef<HTMLDivElement | null>(null)
+
+  const { height: headerHeight } = useResizeObserver<Element>({
+    ref: headerRef,
+  })
+
+  useEffect(() => {
+    if (!isTablet) {
+      return
+    }
+
+    if (headerRef.current !== null) {
+      document.body.style.setProperty('--app-header-height', `${headerHeight?.toFixed(2) || 0}px`)
+    }
+  }, [isTablet, headerHeight])
 
   return (
     <AppBar
+      ref={headerRef}
       position="sticky"
       sx={{
         transitionProperty: 'background-color',

src/app/components/PageLayout/index.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode } from 'react'
+import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from 'react'
 import { Header } from './Header'
 import { Footer } from './Footer'
 import Box from '@mui/material/Box'
@@ -10,6 +10,7 @@ import { NetworkOfflineBanner, RuntimeOfflineBanner } from '../OfflineBanner'
 import { Search } from '../Search'
 import { useIsApiOffline } from '../OfflineBanner/hook'
 import { Network } from '../../../types/network'
+import useResizeObserver from 'use-resize-observer'
 
 interface PageLayoutProps {
   mobileFooterAction?: ReactNode
@@ -24,12 +25,29 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
   const { isMobile, isTablet } = useScreenSize()
   const scope = useScopeParam()
   const isApiOffline = useIsApiOffline(scope?.network || Network.mainnet)
+  const bannersRef = useRef<HTMLDivElement | null>(null)
+
+  const { height: bannersHeight } = useResizeObserver<Element>({
+    ref: bannersRef,
+  })
+
+  useEffect(() => {
+    if (!isTablet) {
+      return
+    }
+
+    if (bannersRef.current !== null) {
+      document.body.style.setProperty('--app-banners-height', `${bannersHeight?.toFixed(2) || 0}px`)
+    }
+  }, [isTablet, bannersHeight])
 
   return (
     <>
-      <BuildBanner />
-      <NetworkOfflineBanner />
-      {scope && <RuntimeOfflineBanner />}
+      <Box ref={bannersRef}>
+        <BuildBanner />
+        <NetworkOfflineBanner />
+        {scope && <RuntimeOfflineBanner />}
+      </Box>
       <Box
         sx={{
           minHeight: '100vh',

src/app/components/ParaTimePicker/LayerDetails.tsx

@@ -17,6 +17,7 @@ import { getLayerLabels, getNetworkIcons } from '../../utils/content'
 import { getNameForScope } from '../../../types/searchScope'
 import { useRuntimeFreshness } from '../OfflineBanner/hook'
 import { LayerStatus } from '../LayerStatus'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 type LayerDetailsContent = {
   description: string
@@ -80,6 +81,7 @@ const contentMinHeight = '270px'
 export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer }) => {
   const { t } = useTranslation()
   const theme = useTheme()
+  const { isTablet } = useScreenSize()
   const labels = getNetworkNames(t)
   const layerLabels = getLayerLabels(t)
   const icons = getNetworkIcons()
@@ -92,7 +94,7 @@ export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer })
   }
 
   return (
-    <Box sx={{ px: 5, py: 4, display: 'flex', minHeight: contentMinHeight }}>
+    <Box sx={{ px: isTablet ? 2 : 5, py: 4, display: 'flex', minHeight: contentMinHeight }}>
       <Box sx={{ pt: 1, pr: 4, color: COLORS.brandDark }}>
         <Circle
           color={COLORS.white}

src/app/components/ParaTimePicker/LayerMenu.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, PropsWithChildren, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Typography from '@mui/material/Typography'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
@@ -12,13 +12,24 @@ import { getLayerLabels } from '../../utils/content'
 import { RouteUtils } from '../../utils/route-utils'
 import { Network } from '../../../types/network'
 import { orderByLayer } from '../../../types/layers'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 type BaseLayerMenuItemProps = {
   divider: boolean
   layer: Layer
 }
 
+const LayerMenuItemCaption: FC<PropsWithChildren> = ({ children }) => (
+  <Typography
+    component="span"
+    sx={{ fontSize: '10px', fontStyle: 'italic', color: COLORS.grayMedium, ml: 2 }}
+  >
+    {children}
+  </Typography>
+)
+
 export const DisabledLayerMenuItem: FC<BaseLayerMenuItemProps> = ({ divider, layer }) => {
+  const { isTablet } = useScreenSize()
   const { t } = useTranslation()
   const labels = getLayerLabels(t)
 
@@ -27,7 +38,10 @@ export const DisabledLayerMenuItem: FC<BaseLayerMenuItemProps> = ({ divider, lay
       {/* Div is needed because we need an element with enabled pointer-events to make Tooltip work */}
       <div>
         <MenuItem disabled divider={divider}>
-          <ListItemText>{labels[layer]}</ListItemText>
+          <ListItemText>
+            {labels[layer]}
+            {isTablet && <LayerMenuItemCaption>{t('paraTimePicker.comingSoon')}</LayerMenuItemCaption>}
+          </ListItemText>
         </MenuItem>
       </div>
     </Tooltip>
@@ -70,12 +84,9 @@ export const LayerMenuItem: FC<LayerMenuItemProps> = ({
     >
       <ListItemText>
         {labels[layer]}
-        <Typography
-          component="span"
-          sx={{ fontSize: '10px', fontStyle: 'italic', color: COLORS.grayMedium, ml: 2 }}
-        >
-          {selectedNetwork === network && activeLayer === layer && t('paraTimePicker.selected')}
-        </Typography>
+        {selectedNetwork === network && activeLayer === layer && (
+          <LayerMenuItemCaption>{t('paraTimePicker.selected')}</LayerMenuItemCaption>
+        )}
       </ListItemText>
       {layer === selectedLayer && <KeyboardArrowRightIcon />}
     </MenuItem>
@@ -105,7 +116,7 @@ export const LayerMenu: FC<LayerMenuProps> = ({
     .sort(orderByLayer)
 
   return (
-    <MenuList>
+    <MenuList sx={{ pt: 0 }}>
       {options.map((option, index) => {
         if (!option.enabled) {
           return (

src/app/components/ParaTimePicker/NetworkMenu.tsx

@@ -85,7 +85,7 @@ export const NetworkMenu: FC<NetworkMenuProps> = ({ activeNetwork, selectedNetwo
 
   return (
     <>
-      <MenuList>
+      <MenuList sx={{ pt: 0 }}>
         {stableOptions.map((network, index) => (
           <NetworkMenuItem
             activeNetwork={activeNetwork}