diff --git a/.changelog/482.feature.md b/.changelog/482.feature.md new file mode 100644 index 0000000000..688a0a6ce2 --- /dev/null +++ b/.changelog/482.feature.md @@ -0,0 +1 @@ +Mobile ParaTime picker diff --git a/src/app/components/ParaTimePicker/LayerMenu.tsx b/src/app/components/ParaTimePicker/LayerMenu.tsx index 7f502fc4e7..e14cbf26b8 100644 --- a/src/app/components/ParaTimePicker/LayerMenu.tsx +++ b/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 = ({ children }) => ( + + {children} + +) + export const DisabledLayerMenuItem: FC = ({ divider, layer }) => { + const { isTablet } = useScreenSize() const { t } = useTranslation() const labels = getLayerLabels(t) @@ -27,7 +38,10 @@ export const DisabledLayerMenuItem: FC = ({ divider, lay {/* Div is needed because we need an element with enabled pointer-events to make Tooltip work */}
- {labels[layer]} + + {labels[layer]} + {isTablet && {t('paraTimePicker.comingSoon')}} +
@@ -70,12 +84,9 @@ export const LayerMenuItem: FC = ({ > {labels[layer]} - - {selectedNetwork === network && activeLayer === layer && t('paraTimePicker.selected')} - + {selectedNetwork === network && activeLayer === layer && ( + {t('paraTimePicker.selected')} + )} {layer === selectedLayer && } diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index b8846e2727..fdab148df1 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -244,6 +244,7 @@ "paraTimePicker": { "chainId": "Chain ID:", "decimal": "Decimal: {{ id }}", + "comingSoon": "(coming soon)", "hex": "Hex: {{ id }}", "less": "Show Less", "more": "Show More",