Add mobile version of ParaTimePicker

oasisprotocol · Jun 9, 2023 · 1cdf7f6 · 1cdf7f6
1 parent 515474f
commit 1cdf7f6
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 52 deletions.
diff --git a/src/app/components/ParaTimePicker/LayerDetails.tsx b/src/app/components/ParaTimePicker/LayerDetails.tsx
@@ -16,6 +16,7 @@ import { docs } from '../../utils/externalLinks'
 import { TextList, TextListItem } from '../TextList'
 import { getLayerLabels, getNetworkIcons } from '../../utils/content'
 import { getNameForScope } from '../../../types/searchScope'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 type LayerDetailsContent = {
   description: string
@@ -79,6 +80,7 @@ const contentMinHeight = '270px'
 export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer }) => {
   const { t } = useTranslation()
   const theme = useTheme()
+  const isTablet = useMediaQuery(theme.breakpoints.down('md'))
   const labels = getNetworkNames(t)
   const layerLabels = getLayerLabels(t)
   const icons = getNetworkIcons()
@@ -91,7 +93,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: isTablet ? 0 : 4, display: 'flex', minHeight: contentMinHeight }}>
       <Box sx={{ pt: 1, pr: 4, color: COLORS.brandDark }}>
         <Circle
           color={COLORS.white}

diff --git a/src/app/components/ParaTimePicker/LayerMenu.tsx b/src/app/components/ParaTimePicker/LayerMenu.tsx
@@ -105,7 +105,7 @@ export const LayerMenu: FC<LayerMenuProps> = ({
     .sort(orderByLayer)
 
   return (
-    <MenuList>
+    <MenuList sx={{ pt: 0 }}>
       {options.map((option, index) => {
         if (!option.enabled) {
           return (

diff --git a/src/app/components/ParaTimePicker/NetworkMenu.tsx b/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}

diff --git a/src/app/components/ParaTimePicker/index.tsx b/src/app/components/ParaTimePicker/index.tsx
@@ -8,7 +8,7 @@ import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrow
 import Divider from '@mui/material/Divider'
 import IconButton from '@mui/material/IconButton'
 import Grid from '@mui/material/Unstable_Grid2'
-import { Logotype } from './../PageLayout/Logotype'
+import { Logotype } from '../PageLayout/Logotype'
 import { COLORS } from '../../../styles/theme/colors'
 import { Network } from '../../../types/network'
 import { Layer } from '../../../oasis-indexer/api'
@@ -19,7 +19,9 @@ import { LayerMenu } from './LayerMenu'
 import { LayerDetails } from './LayerDetails'
 import HighlightOff from '@mui/icons-material/HighlightOff'
 import { RouteUtils } from '../../utils/route-utils'
-import { styled } from '@mui/material/styles'
+import { styled, useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
 
 type ParaTimePickerProps = {
   onClose: () => void
@@ -39,76 +41,169 @@ export const ParaTimePicker: FC<ParaTimePickerProps> = ({ onClose, onConfirm, op
   </ParaTimePickerDrawer>
 )
 
+const StyledParaTimePickerContent = styled(Box)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    flex: 1,
+  },
+}))
+
+const StyledContent = styled(Box)(({ theme }) => ({
+  flex: 1,
+  [theme.breakpoints.down('md')]: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+}))
+
+const TabletBackButton = styled(Button)({
+  color: COLORS.brandDark,
+  width: 'fit-content',
+  textTransform: 'capitalize',
+  textDecoration: 'none',
+})
+
+const TabletActionBar = styled(Box)(({ theme }) => ({
+  minHeight: '50px',
+}))
+
+const ActionBar = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-around',
+  [theme.breakpoints.up('md')]: {
+    justifyContent: 'flex-end',
+    gap: theme.spacing(4),
+  },
+}))
+
 type ParaTimePickerContentProps = Omit<ParaTimePickerProps, 'open'>
 
+enum ParaTimePickerTabletStep {
+  Network,
+  ParaTime,
+  ParaTimeDetails,
+}
+
 const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConfirm }) => {
+  const theme = useTheme()
+  const isTablet = useMediaQuery(theme.breakpoints.down('md'))
   const { t } = useTranslation()
   const { network, layer } = useRequiredScopeParam()
-  const [showNetworkMenu, setShowNetworkMenu] = useState(network !== Network.mainnet)
+  const [showNetworkMenu, setShowNetworkMenu] = useState(isTablet || network !== Network.mainnet)
   const [selectedLayer, setSelectedLayer] = useState<Layer>(layer)
   const [selectedNetwork, setSelectedNetwork] = useState<Network>(network)
+  const [tabletStep, setTabletStep] = useState<ParaTimePickerTabletStep>(ParaTimePickerTabletStep.Network)
   const selectNetwork = (newNetwork: Network) => {
     setSelectedNetwork(newNetwork)
     setSelectedLayer(RouteUtils.getEnabledLayersForNetwork(newNetwork)[0])
   }
 
   return (
-    <Box>
-      <Box sx={{ mb: 5, color: 'red', position: 'relative' }}>
-        <Logotype color={COLORS.brandExtraDark} showText={true} />
-        <HighlightOff
-          htmlColor={COLORS.brandExtraDark}
-          onClick={onClose}
-          fontSize={'large'}
+    <StyledParaTimePickerContent>
+      {!isTablet && (
+        <Box sx={{ mb: 5, color: 'red', position: 'relative' }}>
+          <Logotype color={COLORS.brandExtraDark} showText={true} />
+          <HighlightOff
+            htmlColor={COLORS.brandExtraDark}
+            onClick={onClose}
+            fontSize={'large'}
+            sx={{
+              position: 'absolute',
+              right: 0,
+            }}
+          />
+        </Box>
+      )}
+      <TabletActionBar>
+        {isTablet && tabletStep === ParaTimePickerTabletStep.ParaTime && (
+          <TabletBackButton
+            variant="text"
+            startIcon={<KeyboardArrowLeft />}
+            onClick={() => {
+              setTabletStep(ParaTimePickerTabletStep.Network)
+            }}
+          >
+            {t('paraTimePicker.selectNetwork')}
+          </TabletBackButton>
+        )}
+        {isTablet && tabletStep === ParaTimePickerTabletStep.ParaTimeDetails && (
+          <TabletBackButton
+            variant="text"
+            startIcon={<KeyboardArrowLeft />}
+            onClick={() => {
+              setTabletStep(ParaTimePickerTabletStep.ParaTime)
+            }}
+          >
+            {t('paraTimePicker.selectParatime')}
+          </TabletBackButton>
+        )}
+      </TabletActionBar>
+      {!isTablet && (
+        <IconButton
+          aria-label={t('paraTimePicker.toggleNetworkMenu')}
+          onClick={() => setShowNetworkMenu(!showNetworkMenu)}
           sx={{
-            position: 'absolute',
-            right: 0,
+            color: COLORS.brandDark,
+            ml: 3,
+            width: 'fit-content',
           }}
-        />
-      </Box>
-      <IconButton
-        aria-label={t('paraTimePicker.toggleNetworkMenu')}
-        onClick={() => setShowNetworkMenu(!showNetworkMenu)}
-        sx={{
-          color: COLORS.brandDark,
-          ml: 3,
-        }}
-      >
-        {showNetworkMenu ? <KeyboardDoubleArrowLeftIcon /> : <KeyboardDoubleArrowRightIcon />}
-      </IconButton>
-      <Divider />
-      <Box>
+        >
+          {showNetworkMenu ? <KeyboardDoubleArrowLeftIcon /> : <KeyboardDoubleArrowRightIcon />}
+        </IconButton>
+      )}
+      {(!isTablet || (isTablet && tabletStep !== ParaTimePickerTabletStep.ParaTimeDetails)) && <Divider />}
+      <StyledContent>
         <Grid container>
-          {!showNetworkMenu && (
+          {!showNetworkMenu && !isTablet && (
             <Grid xs={1} sx={{ maxWidth: '40px' }}>
               <NetworkMenuIcon network={selectedNetwork} />
             </Grid>
           )}
-          {showNetworkMenu && (
-            <Grid xs={4} md={3}>
+          {((!isTablet && showNetworkMenu) ||
+            (isTablet && tabletStep === ParaTimePickerTabletStep.Network)) && (
+            <Grid xs={12} md={3}>
               <NetworkMenu
                 activeNetwork={network}
                 selectedNetwork={selectedNetwork}
-                setSelectedNetwork={selectNetwork}
+                setSelectedNetwork={network => {
+                  selectNetwork(network)
+                  setTabletStep(ParaTimePickerTabletStep.ParaTime)
+                }}
               />
             </Grid>
           )}
-          <Grid xs={4} md={3}>
-            <LayerMenu
-              activeLayer={layer}
-              network={network}
-              selectedLayer={selectedLayer}
-              selectedNetwork={selectedNetwork}
-              setSelectedLayer={setSelectedLayer}
-            />
-          </Grid>
-          <Grid xs={showNetworkMenu ? 4 : 7} md={6}>
-            <LayerDetails activeLayer={layer} selectedLayer={selectedLayer} network={selectedNetwork} />
-          </Grid>
+          {(!isTablet || (isTablet && tabletStep === ParaTimePickerTabletStep.ParaTime)) && (
+            <Grid xs={12} md={3}>
+              <LayerMenu
+                activeLayer={layer}
+                network={network}
+                selectedLayer={selectedLayer}
+                selectedNetwork={selectedNetwork}
+                setSelectedLayer={layer => {
+                  setSelectedLayer(layer)
+                  setTabletStep(ParaTimePickerTabletStep.ParaTimeDetails)
+                }}
+              />
+            </Grid>
+          )}
+          {(!isTablet || (isTablet && tabletStep === ParaTimePickerTabletStep.ParaTimeDetails)) && (
+            <Grid xs={12} md={showNetworkMenu ? 4 : 7} lg={6}>
+              <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' }}>
+        <ActionBar>
+          <Button
+            onClick={onClose}
+            color="secondary"
+            variant="outlined"
+            sx={{ textTransform: 'capitalize' }}
+            size="large"
+          >
             {t('common.cancel')}
           </Button>
 
@@ -117,11 +212,12 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
             disabled={selectedNetwork === network && selectedLayer === layer}
             color="primary"
             variant="contained"
+            size="large"
           >
             {t('common.select')}
           </Button>
-        </Box>
-      </Box>
-    </Box>
+        </ActionBar>
+      </StyledContent>
+    </StyledParaTimePickerContent>
   )
 }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -236,6 +236,8 @@
     "rpcWebSockets": "RPC WebSockets endpoint: {{ endpoint }}",
     "selected": "(currently active)",
     "toggleNetworkMenu": "Toggle networks menu",
+    "selectNetwork": "Select Network",
+    "selectParatime": "Select ParaTime",
     "mainnet": {
       "emerald": "The Emerald ParaTime is our official EVM Compatible ParaTime providing smart contract environment with full EVM compatibility.",
       "sapphire": "The Sapphire ParaTime is our official confidential EVM Compatible ParaTime providing a smart contract development environment with EVM compatibility."

diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
@@ -500,13 +500,17 @@ export const defaultTheme = createTheme({
           padding: `${theme.spacing(4)} 5%`,
         }),
         modal: ({ theme }) => ({
-          [theme.breakpoints.down('sm')]: {
+          [theme.breakpoints.down('md')]: {
             [`& .${modalClasses.backdrop}`]: {
-              display: 'none',
+              background: 'transparent',
             },
           },
         }),
         paper: ({ theme }) => ({
+          [theme.breakpoints.down('md')]: {
+            height: `calc(100vh - var(--app-build-banner-height) - var(--app-network-offline-banner-height) - var(--app-runtime-offline-banner-height) - 82px)`,
+            top: `calc(var(--app-build-banner-height) + var(--app-network-offline-banner-height) + var(--app-runtime-offline-banner-height) + 82px)`,
+          },
           [theme.breakpoints.down('sm')]: {
             height: `calc(100vh - var(--app-build-banner-height) - var(--app-network-offline-banner-height) - var(--app-runtime-offline-banner-height) - ${theme.spacing(
               6,