diff --git a/packages/page-accounts/src/Sidebar/Flags.tsx b/packages/page-accounts/src/Sidebar/Flags.tsx index 830d383028..c3ea9240a8 100644 --- a/packages/page-accounts/src/Sidebar/Flags.tsx +++ b/packages/page-accounts/src/Sidebar/Flags.tsx @@ -13,9 +13,9 @@ interface Props { flags: AddressFlags; } -function Flags ({ flags: { isCouncil, isDevelopment, isExternal, isInjected, isMultisig, isProxied, isSociety, isSudo, isTechCommittee } }: Props): React.ReactElement | null { +function Flags ({ flags: { isCouncil, isDevelopment, isExternal, isInjected, isMultisig, isNominator, isProxied, isSociety, isSudo, isTechCommittee, isValidator } }: Props): React.ReactElement | null { const { t } = useTranslation(); - const hasFlags = isCouncil || isDevelopment || isExternal || isInjected || isMultisig || isProxied || isSociety || isSudo || isTechCommittee; + const hasFlags = isCouncil || isDevelopment || isExternal || isInjected || isMultisig || isProxied || isSociety || isSudo || isTechCommittee || isValidator || isNominator; if (!hasFlags) { return null; @@ -23,6 +23,20 @@ function Flags ({ flags: { isCouncil, isDevelopment, isExternal, isInjected, isM return (
+ {isValidator && ( + ('Validator')} + size='tiny' + /> + )} + {isNominator && ( + ('Nominator')} + size='tiny' + /> + )} {isExternal && ( isMultisig ? ( diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx index a590951346..0716bf2e00 100644 --- a/packages/react-components/src/Tag.tsx +++ b/packages/react-components/src/Tag.tsx @@ -10,7 +10,7 @@ import Tooltip from './Tooltip'; interface Props { className?: string; - color?: 'blue' | 'green' | 'grey' | 'orange' | 'pink' | 'red' | 'yellow'; + color?: 'blue' | 'green' | 'grey' | 'orange' | 'pink' | 'red' | 'yellow' | 'theme'; hover?: React.ReactNode; isTag?: boolean; label: React.ReactNode; @@ -27,7 +27,7 @@ function Tag ({ className = '', color = 'grey', hover, isTag = true, label, size return (
diff --git a/packages/react-hooks/src/types.ts b/packages/react-hooks/src/types.ts index 8769b57683..95b1948e3a 100644 --- a/packages/react-hooks/src/types.ts +++ b/packages/react-hooks/src/types.ts @@ -89,6 +89,8 @@ export interface AddressFlags extends DeriveAccountFlags { isMultisig: boolean; isProxied: boolean; isOwned: boolean; + isValidator: boolean; + isNominator: boolean; } export interface AddressIdentity extends DeriveAccountRegistration { diff --git a/packages/react-hooks/src/useAccountInfo.ts b/packages/react-hooks/src/useAccountInfo.ts index a0d57ba950..68269dc2e4 100644 --- a/packages/react-hooks/src/useAccountInfo.ts +++ b/packages/react-hooks/src/useAccountInfo.ts @@ -2,6 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import type { DeriveAccountFlags, DeriveAccountInfo } from '@polkadot/api-derive/types'; +import type { Nominations, ValidatorPrefs } from '@polkadot/types/interfaces'; import type { KeyringJson$Meta } from '@polkadot/ui-keyring/types'; import type { AddressFlags, AddressIdentity, UseAccountInfo } from './types'; @@ -25,11 +26,13 @@ const IS_NONE = { isInContacts: false, isInjected: false, isMultisig: false, + isNominator: false, isOwned: false, isProxied: false, isSociety: false, isSudo: false, - isTechCommittee: false + isTechCommittee: false, + isValidator: false }; export function useAccountInfo (value: string | null, isContract = false): UseAccountInfo { @@ -38,6 +41,8 @@ export function useAccountInfo (value: string | null, isContract = false): UseAc const { isAddress } = useAddresses(); const accountInfo = useCall(api.derive.accounts.info as any, [value]); const accountFlags = useCall(api.derive.accounts.flags as any, [value]); + const nominator = useCall(api.query.staking.nominators, [value]); + const validator = useCall(api.query.staking.validators, [value]); const [accountIndex, setAccountIndex] = useState(undefined); const [tags, setSortedTags] = useState([]); const [name, setName] = useState(''); @@ -48,6 +53,20 @@ export function useAccountInfo (value: string | null, isContract = false): UseAc const [isEditingName, toggleIsEditingName] = useToggle(); const [isEditingTags, toggleIsEditingTags] = useToggle(); + useEffect((): void => { + validator && setFlags((flags) => ({ + ...flags, + isValidator: !validator.isEmpty + })); + }, [validator]); + + useEffect((): void => { + nominator && setFlags((flags) => ({ + ...flags, + isNominator: !nominator.isEmpty + })); + }, [nominator]); + useEffect((): void => { accountFlags && setFlags((flags) => ({ ...flags,