Merge pull request #1576 from oasisprotocol/mz/validatorNames

Show validator name instead of an address

.changelog/1576.trivial.md

@@ -0,0 +1 @@
+Show validator name instead of an address

src/app/components/Account/ConsensusAccountLink.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react'
+import { Layer, useGetConsensusValidatorsAddressNameMap } from './../../../oasis-nexus/api'
+import { Network } from '../../../types/network'
+import { ValidatorLink } from '../Validators/ValidatorLink'
+import { AccountLink } from './AccountLink'
+
+type ConsensusAccountLinkProps = {
+  address: string
+  alwaysTrim?: boolean
+  labelOnly?: boolean
+  network: Network
+}
+
+export const ConsensusAccountLink: FC<ConsensusAccountLinkProps> = ({
+  address,
+  alwaysTrim = true,
+  labelOnly,
+  network,
+}) => {
+  const { data } = useGetConsensusValidatorsAddressNameMap(network)
+
+  if (data?.data?.[address]) {
+    return <ValidatorLink address={address} network={network} alwaysTrim={alwaysTrim} />
+  }
+
+  return (
+    <AccountLink
+      labelOnly={labelOnly}
+      scope={{ network, layer: Layer.consensus }}
+      address={address}
+      alwaysTrim={alwaysTrim}
+    />
+  )
+}

src/app/components/Transactions/ConsensusTransactions.tsx

@@ -10,9 +10,9 @@ import { Age } from '../Age'
 import { TransactionLink } from './TransactionLink'
 import { ConsensusTransactionMethod } from '../ConsensusTransactionMethod'
 import { BlockLink } from '../Blocks/BlockLink'
-import { AccountLink } from '../Account/AccountLink'
 import { ConsensusAmount } from './ConsensusAmount'
 import { TransferIcon } from '../TransferIcon'
+import { ConsensusAccountLink } from '../Account/ConsensusAccountLink'
 
 type TableConsensusTransaction = Transaction & {
   markAsNew?: boolean
@@ -95,11 +95,10 @@ export const ConsensusTransactions: FC<ConsensusTransactionsProps> = ({
                 pr: 3,
               }}
             >
-              <AccountLink
+              <ConsensusAccountLink
                 labelOnly={!!ownAddress && transaction.sender === ownAddress}
-                scope={transaction}
+                network={transaction.network}
                 address={transaction.sender}
-                alwaysTrim
               />
               {verbose && transaction.to && <TransferIcon />}
             </Box>
@@ -110,11 +109,10 @@ export const ConsensusTransactions: FC<ConsensusTransactionsProps> = ({
           ? [
               {
                 content: transaction.to ? (
-                  <AccountLink
+                  <ConsensusAccountLink
                     labelOnly={!!ownAddress && transaction.to === ownAddress}
-                    scope={transaction}
+                    network={transaction.network}
                     address={transaction.to}
-                    alwaysTrim
                   />
                 ) : null,
                 key: 'to',

src/app/components/Validators/ValidatorLink.tsx

@@ -8,6 +8,7 @@ import Typography from '@mui/material/Typography'
 import { COLORS } from '../../../styles/theme/colors'
 import { Network } from '../../../types/network'
 import { HighlightedText } from '../HighlightedText'
+import { useValidatorName } from '../../hooks/useValidatorName'
 
 type ValidatorLinkProps = {
   address: string
@@ -26,15 +27,22 @@ export const ValidatorLink: FC<ValidatorLinkProps> = ({
 }) => {
   const { isTablet } = useScreenSize()
   const to = RouteUtils.getValidatorRoute(network, address)
+  const validatorName = useValidatorName(network, address)
+
   return (
     <Typography variant="mono" component="span" sx={{ color: COLORS.brandDark, fontWeight: 700 }}>
       {isTablet ? (
-        <TabletValidatorLink address={address} name={name} to={to} highlightedPart={highlightedPart} />
+        <TabletValidatorLink
+          address={address}
+          name={name || validatorName}
+          to={to}
+          highlightedPart={highlightedPart}
+        />
       ) : (
         <DesktopValidatorLink
           address={address}
           alwaysTrim={alwaysTrim}
-          name={name}
+          name={name || validatorName}
           to={to}
           highlightedPart={highlightedPart}
         />
@@ -79,7 +87,11 @@ const DesktopValidatorLink: FC<DesktopValidatorLinkProps> = ({
   highlightedPart,
 }) => {
   if (alwaysTrim) {
-    return <TrimLinkLabel label={address} to={to} />
+    return name ? (
+      <TrimValidatorEndLinkLabel name={name} to={to} highlightedPart={highlightedPart} />
+    ) : (
+      <TrimLinkLabel label={address} to={to} />
+    )
   }
   return (
     <Link component={RouterLink} to={to}>

src/app/hooks/useValidatorName.ts

@@ -0,0 +1,9 @@
+import { Network } from 'types/network'
+import { useGetConsensusValidatorsAddressNameMap } from '../../oasis-nexus/api'
+
+export const useValidatorName = (network: Network, address: string): string | undefined => {
+  const { data } = useGetConsensusValidatorsAddressNameMap(network)
+  const validatorName = data?.data?.[address]
+
+  return validatorName
+}

src/app/pages/ConsensusTransactionDetailPage/index.tsx

@@ -17,7 +17,7 @@ import { BlockLink } from 'app/components/Blocks/BlockLink'
 import { ConsensusTransactionMethod } from 'app/components/ConsensusTransactionMethod'
 import { useFormattedTimestampStringWithDistance } from 'app/hooks/useFormattedTimestamp'
 import { RoundedBalance } from 'app/components/RoundedBalance'
-import { AccountLink } from 'app/components/Account/AccountLink'
+import { ConsensusAccountLink } from 'app/components/Account/ConsensusAccountLink'
 import { getPreciseNumberFormat } from 'locales/getPreciseNumberFormat'
 import { CurrentFiatValue } from '../../components/CurrentFiatValue'
 import { ConsensusTransactionEvents } from '../../components/Transactions/ConsensusTransactionEvents'
@@ -109,17 +109,14 @@ export const ConsensusTransactionDetailView: FC<{
       </dd>
       <dt>{t('common.from')}</dt>
       <dd>
-        <AccountLink scope={transaction} address={transaction.sender} />
+        <ConsensusAccountLink network={transaction.network} address={transaction.sender} alwaysTrim={false} />
         <CopyToClipboard value={transaction.sender} />
       </dd>
       {transaction.to && (
         <>
           <dt>{t('common.to')}</dt>
           <dd>
-            <AccountLink
-              scope={{ layer: transaction.layer, network: transaction.network }}
-              address={transaction.to}
-            />
+            <ConsensusAccountLink network={transaction.network} address={transaction.to} alwaysTrim={false} />
             <CopyToClipboard value={transaction.to} />
           </dd>
         </>

src/app/pages/ProposalDetailsPage/index.tsx

@@ -16,7 +16,7 @@ import { DashboardLink } from '../ParatimeDashboardPage/DashboardLink'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { ProposalStatusIcon } from '../../components/Proposals/ProposalStatusIcon'
 import { TextSkeleton } from '../../components/Skeleton'
-import { AccountLink } from '../../components/Account/AccountLink'
+import { ConsensusAccountLink } from '../../components/Account/ConsensusAccountLink'
 import { HighlightedText } from '../../components/HighlightedText'
 import { ProposalIdLoaderData } from '../../utils/route-utils'
 import { COLORS } from 'styles/theme/colors'
@@ -119,7 +119,7 @@ export const ProposalDetailView: FC<{
 
       <dt>{t('common.submitter')}</dt>
       <dd>
-        <AccountLink scope={proposal} address={proposal.submitter} />
+        <ConsensusAccountLink network={proposal.network} address={proposal.submitter} alwaysTrim={false} />
       </dd>
 
       {(totalVotes || totalVotesLoading || totalVotesProblematic) && (

src/oasis-nexus/api.ts

@@ -1105,6 +1105,35 @@ export type ExtendedValidatorList = generated.ValidatorList & {
   map?: Map<string, generated.Validator>
 }
 
+export type ValidatorAddressNameMap = { [oasisAddress: string]: string | undefined }
+
+export const useGetConsensusValidatorsAddressNameMap: typeof generated.useGetConsensusValidators<
+  AxiosResponse<ValidatorAddressNameMap>
+> = (network, params?, options?) => {
+  return generated.useGetConsensusValidators(network, params, {
+    ...options,
+    query: {
+      staleTime: options?.query?.staleTime ?? 5 * 60 * 1000, // Defaults to 5 minutes
+      ...options?.query,
+    },
+    request: {
+      ...options?.request,
+      transformResponse: [
+        ...arrayify(axios.defaults.transformResponse),
+        (data: generated.ValidatorList, headers, status) => {
+          if (status !== 200) return data
+          const validators: ValidatorAddressNameMap = {}
+          data.validators.forEach(validator => {
+            validators[validator.entity_address] = validator.media?.name
+          })
+          return validators
+        },
+        ...arrayify(options?.request?.transformResponse),
+      ],
+    },
+  })
+}
+
 export const useGetConsensusValidators: typeof generated.useGetConsensusValidators = (
   network,
   params?,