added validator/nominator flags (#4546)

* lighter read to make it more readable on dark mode

* added missing themeprops ref

* ran linter

* undo opacity 1 on non red 'other stake' to keep the focus on the whle number'

* ran linter

* isolate opacity change to format balance error text

* updated settings > metadata layout to be more consistent with the rest

* ran linter

* Update packages/page-settings/src/Metadata/Extensions.tsx

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

* updated ternary condition to get rid of empty string at the end as well as fixed weird indentation on styled components

* added validator flag

* Update packages/react-hooks/src/useAccountInfo.ts

* Update packages/react-hooks/src/useAccountInfo.ts

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

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<Props> | null {
+function Flags ({ flags: { isCouncil, isDevelopment, isExternal, isInjected, isMultisig, isNominator, isProxied, isSociety, isSudo, isTechCommittee, isValidator } }: Props): React.ReactElement<Props> | 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 (
     <div className='ui--AddressMenu-flags'>
+      {isValidator && (
+        <Tag
+          color='theme'
+          label={t<string>('Validator')}
+          size='tiny'
+        />
+      )}
+      {isNominator && (
+        <Tag
+          color='theme'
+          label={t<string>('Nominator')}
+          size='tiny'
+        />
+      )}
       {isExternal && (
         isMultisig
           ? (

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 (
     <div
-      className={`${color}Color${isTag ? ' isTag' : ''} ${size}Size ${className}`}
+      className={`${color === 'theme' ? 'highlight--color-bg highlight--bg' : ''} ${color}Color${isTag ? ' isTag' : ''} ${size}Size ${className}`}
       color={color || 'grey'}
       {...tooltipProps}
     >

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 {

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<DeriveAccountInfo>(api.derive.accounts.info as any, [value]);
   const accountFlags = useCall<DeriveAccountFlags>(api.derive.accounts.flags as any, [value]);
+  const nominator = useCall<Nominations>(api.query.staking.nominators, [value]);
+  const validator = useCall<ValidatorPrefs>(api.query.staking.validators, [value]);
   const [accountIndex, setAccountIndex] = useState<string | undefined>(undefined);
   const [tags, setSortedTags] = useState<string[]>([]);
   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,