Display the votes on the network proposal details page

.changelog/1356.feature.md

@@ -0,0 +1 @@
+Display the votes on the network proposal details page

src/app/components/Proposals/ProposalVoteIndicator.tsx

@@ -0,0 +1,77 @@
+import { FC } from 'react'
+import { TFunction } from 'i18next'
+import { useTranslation } from 'react-i18next'
+import Box from '@mui/material/Box'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import CancelIcon from '@mui/icons-material/Cancel'
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle'
+import { styled } from '@mui/material/styles'
+import { COLORS } from '../../../styles/theme/colors'
+import { ProposalVoteValue } from '../../../types/vote'
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 3,
+  flex: 1,
+  borderRadius: 10,
+  padding: theme.spacing(2, 2, 2, '10px'),
+  fontSize: '12px',
+  minWidth: '85px',
+}))
+
+const StyledIcon = styled(Box)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: '18px',
+})
+
+const getStatuses = (t: TFunction) => ({
+  [ProposalVoteValue.abstain]: {
+    backgroundColor: COLORS.lightSilver,
+    icon: RemoveCircleIcon,
+    iconColor: COLORS.grayMedium,
+    label: t('networkProposal.vote.abstain'),
+    textColor: COLORS.grayExtraDark,
+  },
+  [ProposalVoteValue.yes]: {
+    backgroundColor: COLORS.honeydew,
+    icon: CheckCircleIcon,
+    iconColor: COLORS.eucalyptus,
+    label: t('networkProposal.vote.yes'),
+    textColor: COLORS.grayExtraDark,
+  },
+  [ProposalVoteValue.no]: {
+    backgroundColor: COLORS.linen,
+    icon: CancelIcon,
+    iconColor: COLORS.errorIndicatorBackground,
+    label: t('networkProposal.vote.no'),
+    textColor: COLORS.grayExtraDark,
+  },
+})
+
+type ProposalVoteIndicatorProps = {
+  vote: ProposalVoteValue
+}
+
+export const ProposalVoteIndicator: FC<ProposalVoteIndicatorProps> = ({ vote }) => {
+  const { t } = useTranslation()
+
+  if (!ProposalVoteValue[vote]) {
+    return null
+  }
+
+  const statusConfig = getStatuses(t)[vote]
+  const IconComponent = statusConfig.icon
+
+  return (
+    <StyledBox sx={{ backgroundColor: statusConfig.backgroundColor, color: statusConfig.textColor }}>
+      {statusConfig.label}
+      <StyledIcon sx={{ color: statusConfig.iconColor }}>
+        <IconComponent color="inherit" fontSize="inherit" />
+      </StyledIcon>
+    </StyledBox>
+  )
+}

src/app/components/Proposals/VoteTypePills.tsx

@@ -0,0 +1,64 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import Typography from '@mui/material/Typography'
+import { COLORS } from '../../../styles/theme/colors'
+import { ProposalVoteValue, VoteType } from '../../../types/vote'
+
+type VoteTypePillsProps = {
+  handleChange: (voteType: VoteType) => void
+  value?: VoteType
+}
+
+export const VoteTypePills: FC<VoteTypePillsProps> = ({ handleChange, value }) => {
+  const { t } = useTranslation()
+  const options: { label: string; value: VoteType }[] = [
+    {
+      label: t('networkProposal.vote.all'),
+      value: 'any',
+    },
+    {
+      label: t('networkProposal.vote.yes'),
+      value: ProposalVoteValue.yes,
+    },
+    {
+      label: t('networkProposal.vote.abstain'),
+      value: ProposalVoteValue.abstain,
+    },
+    {
+      label: t('networkProposal.vote.no'),
+      value: ProposalVoteValue.no,
+    },
+  ]
+
+  return (
+    <>
+      {options.map(option => {
+        const selected = option.value === value
+        return (
+          <Chip
+            key={option.value}
+            onClick={() => handleChange(option.value)}
+            clickable
+            color="secondary"
+            label={
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Typography component="span" sx={{ fontSize: 16 }}>
+                  {option.label}
+                </Typography>
+              </Box>
+            }
+            sx={{
+              mr: 3,
+              borderColor: COLORS.brandMedium,
+              backgroundColor: selected ? COLORS.brandMedium : COLORS.brandMedium15,
+              color: selected ? COLORS.white : COLORS.grayExtraDark,
+            }}
+            variant={selected ? 'outlined-selected' : 'outlined'}
+          />
+        )
+      })}
+    </>
+  )
+}

src/app/components/Validators/DeferredValidatorLink.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react'
+import { Network } from '../../../types/network'
+import { Layer, Validator } from '../../../oasis-nexus/api'
+import { SearchScope } from '../../../types/searchScope'
+import { ValidatorLink } from './ValidatorLink'
+
+export const DeferredValidatorLink: FC<{
+  network: Network
+  address: string
+  validator: Validator | undefined
+  isError: boolean
+}> = ({ network, address, validator, isError }) => {
+  const scope: SearchScope = { network, layer: Layer.consensus }
+
+  if (isError) {
+    console.log('Warning: failed to look up validators!')
+  }
+
+  return <ValidatorLink address={address} network={scope.network} name={validator?.media?.name} />
+}

src/app/components/Validators/ValidatorImage.tsx

@@ -4,6 +4,8 @@ import ImageNotSupportedIcon from '@mui/icons-material/ImageNotSupported'
 import { hasValidProtocol } from '../../utils/url'
 import { COLORS } from 'styles/theme/colors'
 import { Circle } from '../Circle'
+import { HighlightedText } from '../HighlightedText'
+import Box from '@mui/material/Box'
 
 const StyledImage = styled('img')({
   width: '28px',
@@ -15,9 +17,10 @@ type ValidatorImageProps = {
   address: string
   name: string | undefined
   logotype: string | undefined
+  highlightedPart?: string | undefined
 }
 
-export const ValidatorImage: FC<ValidatorImageProps> = ({ address, name, logotype }) => {
+export const ValidatorImage: FC<ValidatorImageProps> = ({ address, name, logotype, highlightedPart }) => {
   return (
     <>
       {logotype && hasValidProtocol(logotype) ? (
@@ -27,6 +30,13 @@ export const ValidatorImage: FC<ValidatorImageProps> = ({ address, name, logotyp
           <ImageNotSupportedIcon sx={{ color: COLORS.grayMedium, fontSize: 18 }} />
         </Circle>
       )}
+      {name ? (
+        <Box sx={{ display: 'inline' }}>
+          <HighlightedText text={name} pattern={highlightedPart} />
+        </Box>
+      ) : (
+        address
+      )}{' '}
     </>
   )
 }

src/app/components/Validators/ValidatorLink.tsx

@@ -61,7 +61,7 @@ const DesktopValidatorLink: FC<DesktopValidatorLinkProps> = ({ address, name, to
   }
   return (
     <Link component={RouterLink} to={to}>
-      {name || address}
+      {name ?? address}
     </Link>
   )
 }

src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx

@@ -0,0 +1,111 @@
+import { FC } from 'react'
+import { useParams } from 'react-router-dom'
+import { useRequiredScopeParam } from '../../hooks/useScopeParam'
+import { SubPageCard } from '../../components/SubPageCard'
+import { TablePaginationProps } from '../../components/Table/TablePagination'
+import { useTranslation } from 'react-i18next'
+import { Table, TableCellAlign, TableColProps } from '../../components/Table'
+import { ExtendedVote, ProposalVoteValue } from '../../../types/vote'
+import { PAGE_SIZE, useAllVotes, useDisplayedVotes, useWantedVoteType } from './hooks'
+import { ProposalVoteIndicator } from '../../components/Proposals/ProposalVoteIndicator'
+import { DeferredValidatorLink } from '../../components/Validators/DeferredValidatorLink'
+import { CardHeaderWithResponsiveActions } from '../../components/CardHeaderWithResponsiveActions'
+import { VoteTypePills } from '../../components/Proposals/VoteTypePills'
+import { AppErrors } from '../../../types/errors'
+import { ErrorBoundary } from '../../components/ErrorBoundary'
+
+type ProposalVotesProps = {
+  isLoading: boolean
+  votes: ExtendedVote[] | undefined
+  limit: number
+  pagination: TablePaginationProps
+}
+
+const ProposalVotes: FC<ProposalVotesProps> = ({ isLoading, votes, limit, pagination }) => {
+  const { t } = useTranslation()
+  const scope = useRequiredScopeParam()
+
+  const tableColumns: TableColProps[] = [
+    { key: 'index', content: <></>, width: '50px' },
+    { key: 'voter', content: t('common.voter'), align: TableCellAlign.Left },
+    { key: 'vote', content: t('common.vote'), align: TableCellAlign.Right },
+  ]
+  const tableRows = votes?.map(vote => {
+    return {
+      key: `vote-${vote.index}`,
+      data: [
+        {
+          key: 'index',
+          content: `#${vote.index}`,
+        },
+        {
+          key: 'voter',
+          content: (
+            <DeferredValidatorLink
+              network={scope.network}
+              address={vote.address}
+              isError={vote.haveValidatorsFailed}
+              validator={vote.validator}
+            />
+          ),
+        },
+        {
+          key: 'vote',
+          content: <ProposalVoteIndicator vote={vote.vote as ProposalVoteValue} />,
+          align: TableCellAlign.Right,
+        },
+      ],
+    }
+  })
+  return (
+    <Table
+      name={t('common.votes')}
+      columns={tableColumns}
+      rows={tableRows}
+      rowsNumber={limit}
+      isLoading={isLoading}
+      pagination={pagination}
+    />
+  )
+}
+
+export const ProposalVotesView: FC = () => {
+  const { network } = useRequiredScopeParam()
+  const proposalId = parseInt(useParams().proposalId!, 10)
+
+  const { isLoading } = useAllVotes(network, proposalId)
+  const displayedVotes = useDisplayedVotes(network, proposalId)
+
+  if (!isLoading && displayedVotes.tablePaginationProps.selectedPage > 1 && !displayedVotes.data?.length) {
+    throw AppErrors.PageDoesNotExist
+  }
+
+  return (
+    <ProposalVotes
+      isLoading={isLoading}
+      votes={displayedVotes.data}
+      limit={PAGE_SIZE}
+      pagination={displayedVotes.tablePaginationProps}
+    />
+  )
+}
+
+export const ProposalVotesCard: FC = () => {
+  const { t } = useTranslation()
+
+  const { wantedVoteType, setWantedVoteType } = useWantedVoteType()
+
+  return (
+    <SubPageCard>
+      <CardHeaderWithResponsiveActions
+        action={<VoteTypePills handleChange={setWantedVoteType} value={wantedVoteType} />}
+        disableTypography
+        component="h3"
+        title={t('common.votes')}
+      />
+      <ErrorBoundary light={true}>
+        <ProposalVotesView />
+      </ErrorBoundary>
+    </SubPageCard>
+  )
+}