From 59838ea0188ea6de3b67ab069ac37ec1336b395e Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Fri, 28 Jun 2024 19:25:25 +0200
Subject: [PATCH] Account details: add link to validator details

---
 .changelog/1466.trivial.md                          |  1 +
 .../Account/ConsensusAccountDetailsView.tsx         | 13 ++++++++++++-
 .../ConsensusAccountDetailsCard.tsx                 |  5 ++++-
 src/app/pages/ConsensusAccountDetailsPage/index.tsx |  5 ++++-
 4 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 .changelog/1466.trivial.md

diff --git a/.changelog/1466.trivial.md b/.changelog/1466.trivial.md
new file mode 100644
index 0000000000..4c40e2df61
--- /dev/null
+++ b/.changelog/1466.trivial.md
@@ -0,0 +1 @@
+Account details: add link to validator details
diff --git a/src/app/components/Account/ConsensusAccountDetailsView.tsx b/src/app/components/Account/ConsensusAccountDetailsView.tsx
index 416f1d0fee..c707884a1c 100644
--- 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,6 +13,7 @@ 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),
@@ -20,6 +21,7 @@ export const StyledListTitle = styled('dt')(({ theme }) => ({
 
 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
index bb9008449e..5ae4c1d1a3 100644
--- a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx
+++ b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx
@@ -1,11 +1,12 @@
 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
@@ -13,6 +14,7 @@ type ConsensusAccountDetailsCardProps = {
 
 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
index c4fae03d87..d81640794c 100644
--- 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}