Account details: add link to validator details.

(This is relevant when we are displaying a consensus account that belongs to a validator.)
oasisprotocol · Jun 28, 2024 · 93929b8 · 93929b8
1 parent 3091d78
commit 93929b8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/app/components/Account/ConsensusAccountDetailsView.tsx b/src/app/components/Account/ConsensusAccountDetailsView.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { CardEmptyState } from '../CardEmptyState'
-import { Account } from '../../../oasis-nexus/api'
+import { Account, Validator } from '../../../oasis-nexus/api'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { TextSkeleton } from '../Skeleton'
 import { StyledDescriptionList, StyledListTitleWithAvatar } from '../StyledDescriptionList'
@@ -13,13 +13,15 @@ import { AccountSizeBadge } from '../AccountSizeBadge'
 import { AccountLink } from './AccountLink'
 import { CopyToClipboard } from '../CopyToClipboard'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
+import { ValidatorLink } from '../Validators/ValidatorLink'
 
 export const StyledListTitle = styled('dt')(({ theme }) => ({
   marginLeft: theme.spacing(4),
 }))
 
 type ConsensusAccountDetailsViewProps = {
   account?: Account
+  validator?: Validator
   isError?: boolean
   isLoading?: boolean
   showLayer?: boolean
@@ -29,6 +31,7 @@ type ConsensusAccountDetailsViewProps = {
 
 export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> = ({
   account,
+  validator,
   isError,
   isLoading,
   showLayer,
@@ -65,6 +68,14 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
         />
         <CopyToClipboard value={account.address} />
       </dd>
+      {validator && (
+        <>
+          <dt>{t('validator.title')}</dt>
+          <dd>
+            <ValidatorLink address={account.address} network={account.network} name={validator.media?.name} />
+          </dd>
+        </>
+      )}
       <dt>
         <strong>{t('account.totalBalance')}</strong>
       </dt>

diff --git a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx
@@ -1,18 +1,20 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Account } from '../../../oasis-nexus/api'
+import { Account, Validator } from '../../../oasis-nexus/api'
 import { SubPageCard } from '../../components/SubPageCard'
 import { ConsensusAccountDetailsView } from '../../components/Account/ConsensusAccountDetailsView'
 
 type ConsensusAccountDetailsCardProps = {
   account: Account | undefined
+  validator: Validator | undefined
   isError: boolean
   isLoading: boolean
   highlightedPartOfName?: string | undefined
 }
 
 export const ConsensusAccountDetailsCard: FC<ConsensusAccountDetailsCardProps> = ({
   account,
+  validator,
   isError,
   isLoading,
   highlightedPartOfName,
@@ -25,6 +27,7 @@ export const ConsensusAccountDetailsCard: FC<ConsensusAccountDetailsCardProps> =
         isError={isError}
         isLoading={isLoading}
         account={account}
+        validator={validator}
         highlightedPartOfName={highlightedPartOfName}
       />
     </SubPageCard>

diff --git a/src/app/pages/ConsensusAccountDetailsPage/index.tsx b/src/app/pages/ConsensusAccountDetailsPage/index.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useHref, useLoaderData } from 'react-router-dom'
 import Grid from '@mui/material/Grid'
-import { useGetConsensusAccountsAddress } from '../../../oasis-nexus/api'
+import { useGetConsensusAccountsAddress, useValidatorMap } from '../../../oasis-nexus/api'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { PageLayout } from '../../components/PageLayout'
 import { AddressLoaderData } from '../../utils/route-utils'
@@ -20,15 +20,18 @@ export const ConsensusAccountDetailsPage: FC = () => {
   const { network } = scope
   const { address, searchTerm } = useLoaderData() as AddressLoaderData
   const accountQuery = useGetConsensusAccountsAddress(network, address)
+  const { map: validators } = useValidatorMap(network)
   const { isError, isLoading, data } = accountQuery
   const account = data?.data
   const transactionsLink = useHref('')
   const context: ConsensusAccountDetailsContext = { scope, address }
+  const validator = validators.get(address)
 
   return (
     <PageLayout>
       <ConsensusAccountDetailsCard
         account={account}
+        validator={validator}
         isError={isError}
         isLoading={isLoading}
         highlightedPartOfName={searchTerm}