Account details: add link to validator details

.changelog/1466.trivial.md

@@ -0,0 +1 @@
+Account details: add link to validator details

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,
@@ -57,14 +60,37 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
           <AccountSizeBadge size={account.size} />
         </Box>
       </StyledListTitleWithAvatar>
-      <dd>
-        <AccountLink
-          scope={account}
-          address={account.address}
-          highlightedPartOfName={highlightedPartOfName}
-        />
-        <CopyToClipboard value={account.address} />
-      </dd>
+      {validator ? (
+        <>
+          <dd>
+            <strong>{validator.media?.name}</strong>
+            &nbsp;
+            <ValidatorLink
+              address={account.address}
+              network={account.network}
+              name={t('validator.viewProfile')}
+            />
+          </dd>
+          <dt>{t('common.address')}</dt>
+          <dd>
+            <AccountLink
+              scope={account}
+              address={account.address}
+              highlightedPartOfName={highlightedPartOfName}
+            />
+            <CopyToClipboard value={account.address} />
+          </dd>
+        </>
+      ) : (
+        <dd>
+          <AccountLink
+            scope={account}
+            address={account.address}
+            highlightedPartOfName={highlightedPartOfName}
+          />
+          <CopyToClipboard value={account.address} />
+        </dd>
+      )}
       <dt>
         <strong>{t('account.totalBalance')}</strong>
       </dt>

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>

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, useGetConsensusValidatorsAddress } from '../../../oasis-nexus/api'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { PageLayout } from '../../components/PageLayout'
 import { AddressLoaderData } from '../../utils/route-utils'
@@ -22,13 +22,16 @@ export const ConsensusAccountDetailsPage: FC = () => {
   const accountQuery = useGetConsensusAccountsAddress(network, address)
   const { isError, isLoading, data } = accountQuery
   const account = data?.data
+  const { data: validatorData } = useGetConsensusValidatorsAddress(network, address)
+  const validator = validatorData?.data
   const transactionsLink = useHref('')
   const context: ConsensusAccountDetailsContext = { scope, address }
 
   return (
     <PageLayout>
       <ConsensusAccountDetailsCard
         account={account}
+        validator={validator}
         isError={isError}
         isLoading={isLoading}
         highlightedPartOfName={searchTerm}

src/locales/en/translation.json

@@ -679,6 +679,7 @@
     "totalShare": "Total Share",
     "undelegations": "Undelegations",
     "uptime": "Uptime",
+    "viewProfile": "(View validator profile)",
     "voting": "Voting %",
     "votingPower": "Voting Power"
   }