From 11d8ec3c13ae661a11ced62f3a49a1335655f324 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Thu, 17 Oct 2024 12:52:28 +0200 Subject: [PATCH 1/5] Add hooks to fetch validator name --- src/app/hooks/useValidatorName.ts | 17 +++++++++++++++++ src/oasis-nexus/api.ts | 25 +++++++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 src/app/hooks/useValidatorName.ts diff --git a/src/app/hooks/useValidatorName.ts b/src/app/hooks/useValidatorName.ts new file mode 100644 index 000000000..404d7624a --- /dev/null +++ b/src/app/hooks/useValidatorName.ts @@ -0,0 +1,17 @@ +import { Network } from 'types/network' +import { useGetConsensusValidatorsAddressNameMap } from '../../oasis-nexus/api' + +export const useValidatorName = (network: Network, address: string): string | undefined => { + const { data } = useGetConsensusValidatorsAddressNameMap( + network, + {}, + { + query: { + staleTime: 5 * 60 * 1000, // Set cache time to 5 minutes + }, + }, + ) + const validatorName = data?.data?.[address] + + return validatorName +} diff --git a/src/oasis-nexus/api.ts b/src/oasis-nexus/api.ts index 928857c54..75076c332 100644 --- a/src/oasis-nexus/api.ts +++ b/src/oasis-nexus/api.ts @@ -1105,6 +1105,31 @@ 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, + 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?, From ba08d5601a285aeb214724eb11718bc214bdc9a8 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Thu, 17 Oct 2024 13:10:17 +0200 Subject: [PATCH 2/5] Show name when rendering validator link --- .../components/Validators/ValidatorLink.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) 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 ( From 52e452db79ad2bbdcbe4caf91ed9ff4b1c247726 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Thu, 17 Oct 2024 14:22:56 +0200 Subject: [PATCH 3/5] Create ConsensusAccountLink component --- .changelog/1576.trivial.md | 1 + .../Account/ConsensusAccountLink.tsx | 36 +++++++++++++++++++ .../Transactions/ConsensusTransactions.tsx | 12 +++---- 3 files changed, 42 insertions(+), 7 deletions(-) create mode 100644 .changelog/1576.trivial.md create mode 100644 src/app/components/Account/ConsensusAccountLink.tsx 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..614fad565 --- /dev/null +++ b/src/app/components/Account/ConsensusAccountLink.tsx @@ -0,0 +1,36 @@ +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 + labelOnly?: boolean + network: Network +} + +export const ConsensusAccountLink: FC = ({ address, labelOnly, network }) => { + const { data } = useGetConsensusValidatorsAddressNameMap( + network, + {}, + { + query: { + staleTime: 5 * 60 * 1000, // Set cache time to 5 minutes + }, + }, + ) + + 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', From bede916097ca42b503abf4ba11b7cde3a7372967 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Thu, 17 Oct 2024 14:29:03 +0200 Subject: [PATCH 4/5] Move query cacheTime to api layer --- src/app/components/Account/ConsensusAccountLink.tsx | 10 +--------- src/app/hooks/useValidatorName.ts | 10 +--------- src/oasis-nexus/api.ts | 4 ++++ 3 files changed, 6 insertions(+), 18 deletions(-) diff --git a/src/app/components/Account/ConsensusAccountLink.tsx b/src/app/components/Account/ConsensusAccountLink.tsx index 614fad565..3bd839c6a 100644 --- a/src/app/components/Account/ConsensusAccountLink.tsx +++ b/src/app/components/Account/ConsensusAccountLink.tsx @@ -11,15 +11,7 @@ type ConsensusAccountLinkProps = { } export const ConsensusAccountLink: FC = ({ address, labelOnly, network }) => { - const { data } = useGetConsensusValidatorsAddressNameMap( - network, - {}, - { - query: { - staleTime: 5 * 60 * 1000, // Set cache time to 5 minutes - }, - }, - ) + const { data } = useGetConsensusValidatorsAddressNameMap(network) if (data?.data?.[address]) { return diff --git a/src/app/hooks/useValidatorName.ts b/src/app/hooks/useValidatorName.ts index 404d7624a..3aac64cd8 100644 --- a/src/app/hooks/useValidatorName.ts +++ b/src/app/hooks/useValidatorName.ts @@ -2,15 +2,7 @@ import { Network } from 'types/network' import { useGetConsensusValidatorsAddressNameMap } from '../../oasis-nexus/api' export const useValidatorName = (network: Network, address: string): string | undefined => { - const { data } = useGetConsensusValidatorsAddressNameMap( - network, - {}, - { - query: { - staleTime: 5 * 60 * 1000, // Set cache time to 5 minutes - }, - }, - ) + const { data } = useGetConsensusValidatorsAddressNameMap(network) const validatorName = data?.data?.[address] return validatorName diff --git a/src/oasis-nexus/api.ts b/src/oasis-nexus/api.ts index 75076c332..21d50d6c4 100644 --- a/src/oasis-nexus/api.ts +++ b/src/oasis-nexus/api.ts @@ -1112,6 +1112,10 @@ export const useGetConsensusValidatorsAddressNameMap: typeof generated.useGetCon > = (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: [ From 3bd883be9c045c9bc298c269d84a4699ea881111 Mon Sep 17 00:00:00 2001 From: Michal Zielenkiewicz Date: Thu, 17 Oct 2024 15:37:03 +0200 Subject: [PATCH 5/5] Use ConsensusAccountLink in additional views --- src/app/components/Account/ConsensusAccountLink.tsx | 12 +++++++++--- .../pages/ConsensusTransactionDetailPage/index.tsx | 9 +++------ src/app/pages/ProposalDetailsPage/index.tsx | 4 ++-- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/app/components/Account/ConsensusAccountLink.tsx b/src/app/components/Account/ConsensusAccountLink.tsx index 3bd839c6a..16f60252d 100644 --- a/src/app/components/Account/ConsensusAccountLink.tsx +++ b/src/app/components/Account/ConsensusAccountLink.tsx @@ -6,15 +6,21 @@ import { AccountLink } from './AccountLink' type ConsensusAccountLinkProps = { address: string + alwaysTrim?: boolean labelOnly?: boolean network: Network } -export const ConsensusAccountLink: FC = ({ address, labelOnly, network }) => { +export const ConsensusAccountLink: FC = ({ + address, + alwaysTrim = true, + labelOnly, + network, +}) => { const { data } = useGetConsensusValidatorsAddressNameMap(network) if (data?.data?.[address]) { - return + return } return ( @@ -22,7 +28,7 @@ export const ConsensusAccountLink: FC = ({ address, l labelOnly={labelOnly} scope={{ network, layer: Layer.consensus }} address={address} - alwaysTrim + alwaysTrim={alwaysTrim} /> ) } 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) && (