diff --git a/.changelog/1576.trivial.md b/.changelog/1576.trivial.md new file mode 100644 index 000000000..12fcdae53 --- /dev/null +++ b/.changelog/1576.trivial.md @@ -0,0 +1 @@ +Show validator name instead of an address diff --git a/src/app/components/Account/ConsensusAccountLink.tsx b/src/app/components/Account/ConsensusAccountLink.tsx new file mode 100644 index 000000000..16f60252d --- /dev/null +++ b/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 = ({ + address, + alwaysTrim = true, + labelOnly, + network, +}) => { + const { data } = useGetConsensusValidatorsAddressNameMap(network) + + if (data?.data?.[address]) { + return + } + + return ( + + ) +} diff --git a/src/app/components/Transactions/ConsensusTransactions.tsx b/src/app/components/Transactions/ConsensusTransactions.tsx index 334ba3c8b..8547d784b 100644 --- a/src/app/components/Transactions/ConsensusTransactions.tsx +++ b/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 = ({ pr: 3, }} > - {verbose && transaction.to && } @@ -110,11 +109,10 @@ export const ConsensusTransactions: FC = ({ ? [ { content: transaction.to ? ( - ) : null, key: 'to', diff --git a/src/app/components/Validators/ValidatorLink.tsx b/src/app/components/Validators/ValidatorLink.tsx index 85f11dd30..add3f1bcd 100644 --- a/src/app/components/Validators/ValidatorLink.tsx +++ b/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 = ({ }) => { const { isTablet } = useScreenSize() const to = RouteUtils.getValidatorRoute(network, address) + const validatorName = useValidatorName(network, address) + return ( {isTablet ? ( - + ) : ( @@ -79,7 +87,11 @@ const DesktopValidatorLink: FC = ({ highlightedPart, }) => { if (alwaysTrim) { - return + return name ? ( + + ) : ( + + ) } return ( diff --git a/src/app/hooks/useValidatorName.ts b/src/app/hooks/useValidatorName.ts new file mode 100644 index 000000000..3aac64cd8 --- /dev/null +++ b/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 +} diff --git a/src/app/pages/ConsensusTransactionDetailPage/index.tsx b/src/app/pages/ConsensusTransactionDetailPage/index.tsx index af16f7814..3d54e7a80 100644 --- a/src/app/pages/ConsensusTransactionDetailPage/index.tsx +++ b/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<{
{t('common.from')}
- +
{transaction.to && ( <>
{t('common.to')}
- +
diff --git a/src/app/pages/ProposalDetailsPage/index.tsx b/src/app/pages/ProposalDetailsPage/index.tsx index 9f66f6e07..0a524a410 100644 --- a/src/app/pages/ProposalDetailsPage/index.tsx +++ b/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<{
{t('common.submitter')}
- +
{(totalVotes || totalVotesLoading || totalVotesProblematic) && ( diff --git a/src/oasis-nexus/api.ts b/src/oasis-nexus/api.ts index 928857c54..21d50d6c4 100644 --- a/src/oasis-nexus/api.ts +++ b/src/oasis-nexus/api.ts @@ -1105,6 +1105,35 @@ export type ExtendedValidatorList = generated.ValidatorList & { map?: Map } +export type ValidatorAddressNameMap = { [oasisAddress: string]: string | undefined } + +export const useGetConsensusValidatorsAddressNameMap: typeof generated.useGetConsensusValidators< + AxiosResponse +> = (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?,