Merge pull request #1237 from oasisprotocol/mz/paraTimes

Consensus ParaTimes dashboard section

.changelog/1237.trivial.md

@@ -0,0 +1 @@
+Create ParaTimesCard for Consensus dashboard

src/app/components/LayerPicker/LayerMenu.tsx

@@ -112,7 +112,7 @@ export const LayerMenu: FC<LayerMenuProps> = ({
     .filter(layer => !isLayerHidden(layer))
     .map(layer => ({
       layer,
-      enabled: RouteUtils.getEnabledLayersForNetwork(selectedNetwork || network).includes(layer),
+      enabled: RouteUtils.getAllLayersForNetwork(selectedNetwork || network).enabled.includes(layer),
     }))
     .sort(orderByLayer)
 

src/app/components/LayerPicker/index.tsx

@@ -89,7 +89,7 @@ const LayerPickerContent: FC<LayerPickerContentProps> = ({ isOutOfDate, onClose,
   const [selectedNetwork, setSelectedNetwork] = useState<Network>(network)
   const [tabletStep, setTabletStep] = useState<LayerPickerTabletStep>(LayerPickerTabletStep.ParaTimeDetails)
   const selectNetwork = (newNetwork: Network) => {
-    const enabledLayers = RouteUtils.getEnabledLayersForNetwork(newNetwork)
+    const enabledLayers = RouteUtils.getAllLayersForNetwork(newNetwork).enabled
     const targetLayer = enabledLayers.includes(selectedLayer) ? selectedLayer : enabledLayers[0]
     setSelectedNetwork(newNetwork)
     setSelectedLayer(targetLayer)

src/app/components/LearningMaterialsCard/LearningSection.tsx

@@ -1,26 +1,8 @@
 import Paper, { type PaperProps } from '@mui/material/Paper'
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
-import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
-import { styled } from '@mui/material/styles'
 import { FC } from 'react'
 import { COLORS } from 'styles/theme/colors'
-
-const StyledLink = styled(Link)(() => ({
-  width: '44px',
-  height: '44px',
-  borderRadius: '50%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginLeft: 'auto',
-  backgroundColor: COLORS.brandDark,
-  color: COLORS.white,
-  boxShadow: '0px 10px 8px rgba(117, 60, 239, 0.1)',
-  '&:hover, &:focus-visible': {
-    backgroundColor: COLORS.cosmicCobalt,
-  },
-}))
+import { AnchorCircle } from '../StyledLinks'
 
 type LearningSectionProps = PaperProps & {
   description: string
@@ -37,9 +19,7 @@ export const LearningSection: FC<LearningSectionProps> = ({ description, title,
       <Typography variant="body2" sx={{ color: COLORS.grayMedium }}>
         {description}
       </Typography>
-      <StyledLink href={url} rel="noopener noreferrer" target="_blank">
-        <ArrowForwardIcon sx={{ fontSize: 16 }} />
-      </StyledLink>
+      <AnchorCircle url={url} />
     </Paper>
   )
 }

src/app/components/RuntimeStatusIcon/index.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyledBox, statusIcon } from '../StatusIcon'
+
+type RuntimeStatusIconProps = {
+  hasStatus: boolean
+}
+
+export const RuntimeStatusIcon: FC<RuntimeStatusIconProps> = ({ hasStatus }) => {
+  const { t } = useTranslation()
+
+  return (
+    <StyledBox gap={2} success={hasStatus} error={undefined} withText={true}>
+      {hasStatus ? t('paratimes.active') : t('paratimes.inactive')}
+      {hasStatus ? statusIcon.success : statusIcon.failure}
+    </StyledBox>
+  )
+}

src/app/components/Snapshots/Snapshot.tsx

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react'
+import { styled } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
@@ -42,3 +43,13 @@ export const Snapshot: FC<SnapshotProps> = ({ children, header, scope, title })
     </>
   )
 }
+
+export const StyledGrid = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  [theme.breakpoints.down('sm')]: {
+    paddingBottom: theme.spacing(4),
+  },
+  [theme.breakpoints.up('sm')]: {
+    paddingBottom: theme.spacing(5),
+  },
+}))

src/app/components/Snapshots/SnapshotCard.tsx

@@ -15,6 +15,7 @@ export const StyledCard = styled(Card)(({ theme }) => ({
   justifyContent: 'space-between',
   '&': {
     padding: 0,
+    margin: 0,
   },
   height: 186,
 }))

src/app/components/StatusIcon/index.tsx

@@ -23,13 +23,13 @@ const statusFgColor: Record<TxStatus, string> = {
   failure: COLORS.errorIndicatorBackground,
 }
 
-const statusIcon: Record<TxStatus, ReactNode> = {
+export const statusIcon: Record<TxStatus, ReactNode> = {
   unknown: <HelpIcon color="inherit" fontSize="inherit" />,
   success: <CheckCircleIcon color="success" fontSize="inherit" />,
   failure: <CancelIcon color="error" fontSize="inherit" />,
 }
 
-const StyledBox = styled(Box, {
+export const StyledBox = styled(Box, {
   shouldForwardProp: prop => prop !== 'success' && prop !== 'withText',
 })(({ success, withText }: StatusIconProps) => {
   const status: TxStatus = success === undefined ? 'unknown' : success ? 'success' : 'failure'
@@ -39,7 +39,7 @@ const StyledBox = styled(Box, {
     justifyContent: 'center',
     alignItems: 'center',
     width: withText ? undefined : '28px',
-    height: '28px',
+    minHeight: '28px',
     fontSize: '15px',
     backgroundColor: statusBgColor[status],
     color: statusFgColor[status],

src/app/components/StyledDescriptionList/index.tsx

@@ -18,7 +18,7 @@ interface Props {
   descriptionWidth?: string
 }
 
-const InlineDescriptionList = styled('dl', {
+export const InlineDescriptionList = styled('dl', {
   shouldForwardProp: prop => prop !== 'titleWidth' && prop !== 'descriptionWidth',
 })<Props>`
   display: grid;

src/app/components/StyledLinks/index.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+import { styled } from '@mui/material/styles'
+import Link from '@mui/material/Link'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+import { COLORS } from 'styles/theme/colors'
+
+const styles = {
+  width: '44px',
+  height: '44px',
+  borderRadius: '50%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginLeft: 'auto',
+  backgroundColor: COLORS.brandDark,
+  color: COLORS.white,
+  boxShadow: '0px 10px 8px rgba(117, 60, 239, 0.1)',
+  '&:hover, &:focus-visible': {
+    backgroundColor: COLORS.cosmicCobalt,
+  },
+}
+const StyledAnchor = styled(Link)(() => styles)
+
+type AnchorCircleProps = {
+  url: string
+}
+
+export const AnchorCircle: FC<AnchorCircleProps> = ({ url }) => {
+  return (
+    <StyledAnchor href={url} rel="noopener noreferrer" target="_blank">
+      <ArrowForwardIcon sx={{ fontSize: 16 }} />
+    </StyledAnchor>
+  )
+}
+
+const StyledRouterLink = styled(RouterLink)(() => styles)
+
+type RouterLinkCircleProps = {
+  to: string
+}
+
+export const RouterLinkCircle: FC<RouterLinkCircleProps> = ({ to }) => {
+  return (
+    <StyledRouterLink to={to}>
+      <ArrowForwardIcon sx={{ fontSize: 16 }} />
+    </StyledRouterLink>
+  )
+}

src/app/pages/ConsensusDashboardPage/ConsensusSnapshot.tsx

@@ -1,18 +1,12 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Grid from '@mui/material/Grid'
-import { styled } from '@mui/material/styles'
 import { SearchScope } from '../../../types/searchScope'
-import { Snapshot } from '../../components/Snapshots/Snapshot'
+import { Snapshot, StyledGrid } from '../../components/Snapshots/Snapshot'
 import { SnapshotEpoch } from './SnapshotEpoch'
 import { SnapshotDelegators } from './SnapshotDelegators'
 import { SnapshotValidators } from './SnapshotValidators'
 import { SnapshotStaked } from './SnapshotStaked'
 
-const StyledGrid = styled(Grid)(() => ({
-  display: 'flex',
-}))
-
 export const ConsensusSnapshot: FC<{ scope: SearchScope }> = ({ scope }) => {
   const { t } = useTranslation()
 

src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx

@@ -0,0 +1,79 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import { styled } from '@mui/material/styles'
+import { Layer, Runtime } from '../../../oasis-nexus/api'
+import { isNotOnHiddenLayer } from '../../../types/layers'
+import { COLORS } from '../../../styles/theme/colors'
+import { CardHeaderWithCounter } from '../../components/CardHeaderWithCounter'
+import { RouteUtils } from '../../utils/route-utils'
+import { SearchScope } from '../../../types/searchScope'
+import { EnabledRuntimePreview, InactiveRuntimePreview } from './RuntimePreview'
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  [theme.breakpoints.up('md')]: {
+    paddingRight: theme.spacing(4),
+    paddingLeft: theme.spacing(4),
+  },
+  [theme.breakpoints.down('md')]: {
+    flexDirection: 'column',
+  },
+  '> div:not(:last-child)': {
+    [theme.breakpoints.down('md')]: {
+      paddingBottom: theme.spacing(4),
+      borderBottom: `1px solid ${COLORS.grayMediumLight}`,
+    },
+    [theme.breakpoints.up('md')]: {
+      paddingRight: theme.spacing(5),
+      marginRight: theme.spacing(5),
+      borderRight: `1px solid ${COLORS.grayMediumLight}`,
+    },
+  },
+}))
+
+function shouldIncludeLayer(layer: Layer) {
+  return layer !== Layer.consensus && isNotOnHiddenLayer({ layer })
+}
+
+type ParaTimesCardProps = { scope: SearchScope }
+
+export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
+  const { t } = useTranslation()
+  const { network } = scope
+  const { enabled, disabled } = RouteUtils.getAllLayersForNetwork(network)
+  const enabledOasisRuntimes = enabled.filter(shouldIncludeLayer) as Runtime[]
+  const disabledOasisRuntimes = disabled.filter(shouldIncludeLayer) as Runtime[]
+  const runtimesNumber = enabledOasisRuntimes.length + disabledOasisRuntimes.length
+
+  return (
+    <Card>
+      <CardHeader
+        disableTypography
+        component="h3"
+        title={
+          <CardHeaderWithCounter
+            label={t('paratimes.listTitle')}
+            totalCount={runtimesNumber}
+            isTotalCountClipped={false}
+          />
+        }
+      />
+      <CardContent>
+        <StyledBox>
+          {!!enabledOasisRuntimes.length &&
+            enabledOasisRuntimes.map(runtime => (
+              <EnabledRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
+            ))}
+          {!!disabledOasisRuntimes.length &&
+            disabledOasisRuntimes.map(runtime => (
+              <InactiveRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
+            ))}
+        </StyledBox>
+      </CardContent>
+    </Card>
+  )
+}