Validator names in consolidate page (#418)

Author: AgeManning

src/components/EffectiveBalanceDisplay/EffectiveBalanceDisplay.tsx

@@ -5,6 +5,8 @@ import formatEthAddress from '../../../utilities/formatEthAddress'
 import { formatLocalCurrency } from '../../../utilities/formatLocalCurrency'
 import { EFFECTIVE_BALANCE, MAX_EFFECTIVE_BALANCE } from '../../constants/constants'
 import useProcessEffectiveBalance from '../../hooks/useProcessEffectiveBalance'
+import { useValidatorAliases } from '../../hooks/useValidatorAliases'
+import useValidatorName from '../../hooks/useValidatorName'
 import { ValidatorInfo } from '../../types/validator'
 import IdenticonIcon from '../IdenticonIcon/IdenticonIcon'
 import Tooltip from '../ToolTip/Tooltip'
@@ -28,7 +30,9 @@ const EffectiveBalanceDisplay: FC<EffectiveBalanceDisplayProps> = ({
   maxEffectiveBalance,
 }) => {
   const { t } = useTranslation()
-  const { pubKey, withdrawalAddress, name, effectiveBalance, balance } = validator
+  const { pubKey, withdrawalAddress, effectiveBalance, balance } = validator
+  const { aliases } = useValidatorAliases()
+  const validatorName = useValidatorName(validator, aliases || {})
   const tooltipStyle = useMemo(() => ({ fontSize: '11px' }), [])
   const formattedPubKey = formatEthAddress(pubKey, 7, 7)
   const newBalance = balance + supplementAmount
@@ -94,7 +98,7 @@ const EffectiveBalanceDisplay: FC<EffectiveBalanceDisplayProps> = ({
     <div className='flex sm:space-x-4'>
       <IdenticonIcon size={70} type='CIRCULAR' hash={pubKey} />
       <div className='space-y-1'>
-        <Typography>{name}</Typography>
+        <Typography>{validatorName}</Typography>
         <Tooltip place='top-start' style={tooltipStyle} id={`tool-display-${pubKey}`} text={pubKey}>
           <Typography type='text-caption' color='text-dark400' darkMode='dark:text-dark500'>
             {formattedPubKey}

src/components/ValidatorManagement/ConsolidateView/Steps/SelectSourceStep/SelectSourceRow.tsx

@@ -1,6 +1,8 @@
 import { AnimationControls, motion } from 'framer-motion'
 import { FC, useMemo } from 'react'
 import formatEthAddress from '../../../../../../utilities/formatEthAddress'
+import { useValidatorAliases } from '../../../../../hooks/useValidatorAliases'
+import useValidatorName from '../../../../../hooks/useValidatorName'
 import { ValidatorInfo } from '../../../../../types/validator'
 import CheckBox from '../../../../CheckBox/CheckBox'
 import Tooltip from '../../../../ToolTip/Tooltip'
@@ -22,7 +24,9 @@ const SelectSourceRow: FC<SelectSourceRowProps> = ({
   animControls,
   animIndex,
 }) => {
-  const { pubKey, balance, name, withdrawalAddress } = source
+  const { pubKey, balance, withdrawalAddress } = source
+  const { aliases } = useValidatorAliases()
+  const validatorName = useValidatorName(source, aliases || {})
   const selectSource = () => onSelect(source)
   const formattedBalance = Math.round(balance)
   const formattedPubKey = formatEthAddress(pubKey)
@@ -42,7 +46,7 @@ const SelectSourceRow: FC<SelectSourceRowProps> = ({
         <div className='flex items-center space-x-3 border-r-style pr-4'>
           <CheckBox id={pubKey} readOnly checked={isSelected} />
           <div className='h-6 w-6 hidden xl:block rounded-full bg-gradient-to-r from-primary to-tertiary' />
-          <Typography type='text-caption'>{name}</Typography>
+          <Typography type='text-caption'>{validatorName}</Typography>
         </div>
         <div className='border-r-style hidden md:block lg:hidden xl:block self-stretch flex items-center px-4'>
           <Tooltip

src/components/ValidatorManagement/ConsolidateView/Steps/SelectSourceStep/SelectedChip.tsx

@@ -1,4 +1,6 @@
 import { FC } from 'react'
+import { useValidatorAliases } from '../../../../../hooks/useValidatorAliases'
+import useValidatorName from '../../../../../hooks/useValidatorName'
 import { ValidatorInfo } from '../../../../../types/validator'
 import Typography from '../../../../Typography/Typography'
 
@@ -8,13 +10,15 @@ export interface SelectedChipProps {
 }
 
 const SelectedChip: FC<SelectedChipProps> = ({ validator, onRemove }) => {
-  const { pubKey, name } = validator
+  const { pubKey } = validator
+  const { aliases } = useValidatorAliases()
+  const validatorName = useValidatorName(validator, aliases || {})
   const removeSource = () => onRemove(pubKey)
 
   return (
     <div className='bg-primary_10 mr-4 mb-4 flex items-center rounded p-1 space-x-2'>
       <div className='h-4 w-4 hidden lg:block rounded-full bg-gradient-to-r from-primary to-tertiary' />
-      <Typography type='text-caption2'>{name}</Typography>
+      <Typography type='text-caption2'>{validatorName}</Typography>
       <i
         onClick={removeSource}
         role='button'

src/components/ValidatorManagement/ConsolidateView/Steps/SelectTargetStep/SelectTargetRow.tsx

@@ -2,6 +2,8 @@ import clsx from 'clsx'
 import { AnimationControls, motion } from 'framer-motion'
 import { FC, memo, useCallback, useMemo } from 'react'
 import formatEthAddress from '../../../../../../utilities/formatEthAddress'
+import { useValidatorAliases } from '../../../../../hooks/useValidatorAliases'
+import useValidatorName from '../../../../../hooks/useValidatorName'
 import { ValidatorInfo } from '../../../../../types/validator'
 import Tooltip from '../../../../ToolTip/Tooltip'
 import Typography from '../../../../Typography/Typography'
@@ -17,7 +19,9 @@ interface SelectTargetRowProps {
 
 const SelectTargetRow: FC<SelectTargetRowProps> = memo(
   ({ validator, onSelect, isActive, animControls, animIndex }) => {
-    const { pubKey, name, withdrawalAddress, effectiveBalance } = validator
+    const { pubKey, withdrawalAddress, effectiveBalance } = validator
+    const { aliases } = useValidatorAliases()
+    const validatorName = useValidatorName(validator, aliases || {})
     const handleSelect = useCallback(() => onSelect(validator), [validator, onSelect])
     const initialAnim = useMemo(() => ({ y: -20, opacity: 0 }), [])
 
@@ -56,7 +60,7 @@ const SelectTargetRow: FC<SelectTargetRowProps> = memo(
         <div className='flex items-center space-x-2'>
           <div className={nameGroupClasses}>
             <div className={iconClasses} />
-            <Typography type='text-caption'>{name}</Typography>
+            <Typography type='text-caption'>{validatorName}</Typography>
           </div>
           <div className={pubKeyGroupClasses}>
             <Tooltip

src/components/ValidatorManagement/ConsolidateView/Steps/SubmitConsolidationStep/ConsolidationRequest.tsx

@@ -2,6 +2,8 @@ import { dataSlice, getAddress } from 'ethers'
 import React, { FC } from 'react'
 import addClassString from '../../../../../../utilities/addClassString'
 import { Status } from '../../../../../constants/enums'
+import { useValidatorAliases } from '../../../../../hooks/useValidatorAliases'
+import useValidatorName from '../../../../../hooks/useValidatorName'
 import { ConsolidationTx } from '../../../../../types'
 import { ValidatorInfo } from '../../../../../types/validator'
 import Consolidate from '../../../../ConsolidateValidator/Consolidate'
@@ -26,7 +28,9 @@ const ConsolidationRequest: FC<ConsolidationRequestProps> = ({
   onSubmitRequest,
   requestData,
 }) => {
-  const { name, index, withdrawalAddress } = validator
+  const { index, withdrawalAddress } = validator
+  const { aliases } = useValidatorAliases()
+  const validatorName = useValidatorName(validator, aliases || {})
   const { status } = requestData || {}
 
   const statusIconClass = addClassString('', [
@@ -40,7 +44,7 @@ const ConsolidationRequest: FC<ConsolidationRequestProps> = ({
       <div className='flex items-center @425:space-x-4'>
         <div className='h-8 w-8 hidden @425:block rounded-full bg-gradient-to-r from-primary to-tertiary' />
         <div className='flex items-center mr-4 lg:mr-0 space-x-2 border-r-style pr-4'>
-          <Typography type='text-caption1'>{name}</Typography>
+          <Typography type='text-caption1'>{validatorName}</Typography>
           <Typography type='text-caption1'>{index}</Typography>
         </div>
         <WithdrawalAddressPill