Merge pull request #1670 from oasisprotocol/mz/fixes

Consensus pre-release fixes
oasisprotocol · Dec 18, 2024 · 09656f9 · 09656f9
2 parents 8491213 + 495db80
commit 09656f9
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 17 deletions.
diff --git a/.changelog/1670.bugfix.md b/.changelog/1670.bugfix.md
@@ -0,0 +1,7 @@
+Consensus pre-release fixes
+
+- Improve Consensus ParaTime cards for testnet
+- Adjust validator commission bounds check
+- Show rounded value in balance distribution card
+- Improve useRedirectIfSingleResult to handle validators
+- Increase number of validators rendered in a list
diff --git a/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx b/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx
@@ -1,5 +1,6 @@
 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'
@@ -21,6 +22,18 @@ const StyledInnerGrid = styled(Grid)(({ theme }) => ({
   },
 }))
 
+const StyledBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  [theme.breakpoints.down('md')]: {
+    flexDirection: 'column',
+    gap: theme.spacing(4),
+  },
+  [theme.breakpoints.up('md')]: {
+    flexDirection: 'row',
+    gap: theme.spacing(5),
+  },
+}))
+
 type ParaTimesCardProps = { scope: SearchScope }
 
 export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
@@ -31,6 +44,8 @@ export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
   const disabledRuntimes = disabled.filter(shouldIncludeLayer) as Runtime[]
   const runtimesNumber = enabledRuntimes.length + disabledRuntimes.length
   const [firstEnabledRuntime, ...restEnabledRuntimes] = enabledRuntimes
+  const spaceForSecondaryParaTimes = enabledRuntimes.length > 2
+
   return (
     <Card>
       <CardHeader
@@ -46,17 +61,19 @@ export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
       />
       <CardContent>
         <Grid container spacing={5}>
-          <Grid xs={12} md={6}>
+          <Grid xs={12} md={spaceForSecondaryParaTimes ? 5 : 6}>
             <EnabledRuntimePreview prominentItem network={scope.network} runtime={firstEnabledRuntime} />
           </Grid>
-          <Grid xs={12} md={6} container>
-            <StyledInnerGrid xs={12} md={8}>
-              {!!restEnabledRuntimes.length &&
-                restEnabledRuntimes.map(runtime => (
-                  <EnabledRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
-                ))}
+          <Grid xs={12} md={spaceForSecondaryParaTimes ? 7 : 6} container>
+            <StyledInnerGrid xs={12} md={spaceForSecondaryParaTimes ? 9 : 8}>
+              <StyledBox>
+                {!!restEnabledRuntimes.length &&
+                  restEnabledRuntimes.map(runtime => (
+                    <EnabledRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
+                  ))}
+              </StyledBox>
             </StyledInnerGrid>
-            <StyledInnerGrid xs={12} md={4}>
+            <StyledInnerGrid xs={12} md={spaceForSecondaryParaTimes ? 3 : 4}>
               {!!disabledRuntimes.length &&
                 disabledRuntimes.map(runtime => <DisabledRuntimePreview key={runtime} runtime={runtime} />)}
             </StyledInnerGrid>

diff --git a/src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx b/src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx
@@ -72,6 +72,7 @@ const StyledDisabledRuntime = styled(Box)(({ theme }) => ({
 }))
 
 const StyledEnabledRuntime = styled(Box)(({ theme }) => ({
+  flex: 1,
   height: '100%',
   paddingTop: theme.spacing(3),
   paddingBottom: theme.spacing(3),

diff --git a/src/app/pages/SearchResultsPage/useRedirectIfSingleResult.ts b/src/app/pages/SearchResultsPage/useRedirectIfSingleResult.ts
@@ -5,7 +5,7 @@ import { RouteUtils } from '../../utils/route-utils'
 import { isItemInScope, SearchScope } from '../../../types/searchScope'
 import { Network } from '../../../types/network'
 import { exhaustedTypeWarning } from '../../../types/errors'
-import { RuntimeAccount } from '../../../oasis-nexus/api'
+import { RuntimeAccount, useGetConsensusValidatorsAddressNameMap } from '../../../oasis-nexus/api'
 import { SearchParams } from '../../components/Search/search-utils'
 
 /** If search only finds one result then redirect to it */
@@ -15,7 +15,7 @@ export function useRedirectIfSingleResult(
   results: SearchResults,
 ) {
   const navigate = useNavigate()
-
+  const { data: validatorsData } = useGetConsensusValidatorsAddressNameMap(results[0].network)
   const { searchTerm, accountNameFragment, evmAccount, consensusAccount } = searchParams
 
   let shouldRedirect = results.length === 1
@@ -40,7 +40,9 @@ export function useRedirectIfSingleResult(
         )
         break
       case 'account':
-        redirectTo = RouteUtils.getAccountRoute(item, (item as RuntimeAccount).address_eth ?? item.address)
+        redirectTo = validatorsData?.data?.[item.address]
+          ? RouteUtils.getValidatorRoute(item.network, item.address)
+          : RouteUtils.getAccountRoute(item, (item as RuntimeAccount).address_eth ?? item.address)
         if (
           accountNameFragment && // Is there anything to highlight?
           !(

diff --git a/src/app/pages/ValidatorDetailsPage/BalanceDistributionCard.tsx b/src/app/pages/ValidatorDetailsPage/BalanceDistributionCard.tsx
@@ -47,10 +47,11 @@ export const BalanceDistributionCard: FC<BalanceDistributionCardProps> = ({ vali
             <>
               {t('validator.totalEscrow')}
               <Typography sx={{ fontSize: 10 }}>
-                {t('common.valueInToken', {
-                  ...getPreciseNumberFormat(validator.escrow.active_balance),
-                  ticker: validator.ticker,
-                })}
+                <RoundedBalance
+                  compactLargeNumbers
+                  value={validator.escrow.active_balance}
+                  ticker={validator.ticker}
+                />
               </Typography>
               <RoundedBalance
                 compactLargeNumbers

diff --git a/src/app/pages/ValidatorDetailsPage/index.tsx b/src/app/pages/ValidatorDetailsPage/index.tsx
@@ -161,7 +161,7 @@ export const ValidatorDetailsView: FC<{
           </dd>
           <dt>{t('validator.commissionBounds')}</dt>
           <dd>
-            {validator.current_commission_bound && validator.current_commission_bound.epoch_start ? (
+            {validator.current_commission_bound ? (
               <>
                 <ValidatorCommission commission={validator.current_commission_bound.lower} />~
                 <ValidatorCommission commission={validator.current_commission_bound.upper} />

diff --git a/src/app/pages/ValidatorsPage/index.tsx b/src/app/pages/ValidatorsPage/index.tsx
@@ -5,7 +5,6 @@ import { useScreenSize } from '../../hooks/useScreensize'
 import { PageLayout } from '../../components/PageLayout'
 import { SubPageCard } from '../../components/SubPageCard'
 import { useGetConsensusValidators } from '../../../oasis-nexus/api'
-import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as PAGE_SIZE } from '../../config'
 import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
 import { AppErrors } from '../../../types/errors'
 import { TableLayout, TableLayoutButton } from '../../components/TableLayoutButton'
@@ -16,6 +15,8 @@ import { CardHeaderWithCounter } from '../../components/CardHeaderWithCounter'
 import { ValidatorDetailsView } from '../ValidatorDetailsPage'
 import { VerticalList } from '../../components/VerticalList'
 
+const PAGE_SIZE = 100
+
 export const ValidatorsPage: FC = () => {
   const [tableView, setTableView] = useState<TableLayout>(TableLayout.Horizontal)
   const { isMobile } = useScreenSize()