Merge pull request #1502 from oasisprotocol/mz/validatorSync

Provide data to validator staking trend chart

.changelog/1502.trivial.md

@@ -0,0 +1 @@
+Provide data to validator staking trend chart

src/app/components/charts/LineChart.tsx

@@ -21,6 +21,8 @@ interface LineChartProps<T extends object> extends Formatters {
   tickMargin?: number
   tooltipActiveDotRadius?: number
   withLabels?: boolean
+  maximumFractionDigits?: number
+  alignDomainToDataPoints?: boolean
 }
 
 const LineChartCmp = <T extends object>({
@@ -33,6 +35,8 @@ const LineChartCmp = <T extends object>({
   tickMargin = 0,
   tooltipActiveDotRadius = 5,
   withLabels,
+  maximumFractionDigits = 0,
+  alignDomainToDataPoints,
 }: LineChartProps<T>): ReactElement => {
   const { t } = useTranslation()
 
@@ -54,7 +58,7 @@ const LineChartCmp = <T extends object>({
           }}
         />
         <YAxis
-          domain={withLabels ? [0, 'auto'] : ['dataMin', 'dataMax']}
+          domain={!alignDomainToDataPoints && withLabels ? [0, 'auto'] : ['dataMin', 'dataMax']}
           axisLine={false}
           interval={0}
           tickLine={false}
@@ -68,6 +72,7 @@ const LineChartCmp = <T extends object>({
               formatParams: {
                 value: {
                   notation: 'compact',
+                  maximumFractionDigits,
                 } satisfies Intl.NumberFormatOptions,
               },
             })

src/app/pages/ValidatorDetailsPage/StakingTrend.tsx

@@ -3,36 +3,55 @@ import { useTranslation } from 'react-i18next'
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
+import { useGetConsensusValidatorsAddressHistory } from '../../../oasis-nexus/api'
+import { SearchScope } from '../../../types/searchScope'
 import { LineChart } from '../../components/charts/LineChart'
-import { SearchScope } from 'types/searchScope'
 import { useScreenSize } from '../../hooks/useScreensize'
 
-export const StakingTrend: FC<{ scope: SearchScope }> = ({ scope }) => {
+const epochsInMonth = 720
+
+type StakingTrendProps = {
+  address: string
+  scope: SearchScope
+}
+
+export const StakingTrend: FC<StakingTrendProps> = ({ address, scope }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
-  // TODO: provide data from the API is ready and sync dataKey value
-  const windows = undefined
+  const historyQuery = useGetConsensusValidatorsAddressHistory(scope.network, address, {
+    limit: epochsInMonth,
+  })
+  const history = historyQuery.data?.data?.history
+  const filteredHistory = history
+    ?.map(item => ({
+      active_balance: item.active_balance,
+      epoch: item.epoch,
+    }))
+    .reverse()
 
   return (
     <Card sx={{ flex: 1 }}>
       <CardHeader disableTypography component="h3" title={t('validator.stakingTrend')} />
       <CardContent sx={{ height: 250 }}>
-        {windows && (
+        {history && filteredHistory && (
           <LineChart
+            alignDomainToDataPoints
             tooltipActiveDotRadius={9}
             cartesianGrid
             strokeWidth={3}
-            dataKey={'volume'}
-            data={windows}
+            dataKey="active_balance"
+            data={filteredHistory}
             margin={{ bottom: 16, top: isMobile ? 0 : 16 }}
             tickMargin={16}
             withLabels
+            maximumFractionDigits={2}
             formatters={{
-              data: (value: number) => value.toLocaleString(),
-              label: (value: string) =>
-                t('common.formattedDateTime', {
-                  timestamp: new Date(value),
+              data: value =>
+                t('common.valueInToken', {
+                  value,
+                  ticker: history[0].ticker,
                 }),
+              label: (value: string) => `${t('common.epoch')}: ${value}`,
             }}
           />
         )}

src/app/pages/ValidatorDetailsPage/index.tsx

@@ -57,7 +57,7 @@ export const ValidatorDetailsPage: FC = () => {
       <ValidatorDetailsCard isLoading={isLoading} validator={validator} />
       <Grid container spacing={4}>
         <StyledGrid item xs={12} md={6}>
-          <StakingTrend scope={scope} />
+          <StakingTrend address={address} scope={scope} />
         </StyledGrid>
         <StyledGrid item xs={12} md={6}>
           <SignedBlocks />

src/oasis-nexus/api.ts

@@ -107,6 +107,12 @@ declare module './generated/api' {
     network: Network
     ticker: Ticker
   }
+
+  export interface ValidatorHistoryPoint {
+    layer: typeof Layer.consensus
+    network: Network
+    ticker: Ticker
+  }
 }
 
 export const isAccountEmpty = (account: RuntimeAccount | Account) => {
@@ -1047,6 +1053,37 @@ export const useGetConsensusValidators: typeof generated.useGetConsensusValidato
   })
 }
 
+export const useGetConsensusValidatorsAddressHistory: typeof generated.useGetConsensusValidatorsAddressHistory =
+  (network, address, params?, options?) => {
+    const ticker = getTokensForScope({ network, layer: Layer.consensus })[0].ticker
+    return generated.useGetConsensusValidatorsAddressHistory(network, address, params, {
+      ...options,
+      request: {
+        ...options?.request,
+        transformResponse: [
+          ...arrayify(axios.defaults.transformResponse),
+          (data: generated.ValidatorHistory, headers, status) => {
+            if (status !== 200) return data
+            return {
+              ...data,
+              history: data.history.map(history => {
+                return {
+                  ...history,
+                  active_balance: history.active_balance
+                    ? fromBaseUnits(history.active_balance, consensusDecimals)
+                    : undefined,
+                  layer: Layer.consensus,
+                  network,
+                  ticker,
+                }
+              }),
+            }
+          },
+          ...arrayify(options?.request?.transformResponse),
+        ],
+      },
+    })
+  }
 export const useGetConsensusAccounts: typeof generated.useGetConsensusAccounts = (
   network,
   params?,