From 5e99f5208c59adeb44d5728f2601d3e2b2497fdd 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   | 44 +++++++++++++++----
 .../ConsensusAccountDetailsCard.tsx           |  5 ++-
 .../ConsensusAccountDetailsPage/index.tsx     |  5 ++-
 src/locales/en/translation.json               |  1 +
 5 files changed, 45 insertions(+), 11 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 000000000..4c40e2df6
--- /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 416f1d0fe..347bf0bfe 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,
@@ -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>
diff --git a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx
index bb9008449..5ae4c1d1a 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 c4fae03d8..20dcaca1e 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, useGetConsensusValidatorsAddress } from '../../../oasis-nexus/api'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { PageLayout } from '../../components/PageLayout'
 import { AddressLoaderData } from '../../utils/route-utils'
@@ -22,6 +22,8 @@ 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 }
 
@@ -29,6 +31,7 @@ export const ConsensusAccountDetailsPage: FC = () => {
     <PageLayout>
       <ConsensusAccountDetailsCard
         account={account}
+        validator={validator}
         isError={isError}
         isLoading={isLoading}
         highlightedPartOfName={searchTerm}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index b6e195b42..3fea12f82 100644
--- a/src/locales/en/translation.json
+++ b/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"
   }