Rework registrar dialog (account filter) (#2613)

packages/page-accounts/src/Sidebar/RegistrarJudgement.tsx

@@ -5,17 +5,13 @@
 import { BareProps } from '@polkadot/react-api/types';
 
 import React, { useEffect, useState } from 'react';
+import { Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 
-import { useTranslation } from './translate';
-import Dropdown from './Dropdown';
-import Input from './Input';
-import InputAddress from './InputAddress';
-import Modal from './Modal';
-import TxButton from './TxButton';
+import { useTranslation } from '../translate';
 
 interface Props extends BareProps {
   address: string;
-  registrars: (string | null)[];
+  registrars: { address: string; index: number }[];
   toggleJudgement: () => void;
 }
 
@@ -28,21 +24,22 @@ const JUDGEMENT_ENUM = [
   { text: 'Low quality', value: 5 }
 ];
 
-function AccountNameJudgement ({ address, registrars, toggleJudgement }: Props): React.ReactElement<Props> {
+function RegistrarJudgement ({ address, registrars, toggleJudgement }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const [addresses] = useState(registrars.map(({ address }) => address));
   const [judgementAccountId, setJudgementAccountId] = useState<string | null>(null);
   const [judgementEnum, setJudgementEnum] = useState(2); // Reasonable
   const [registrarIndex, setRegistrarIndex] = useState(-1);
 
   // find the id of our registrar in the list
   useEffect((): void => {
-    if (registrars && judgementAccountId) {
-      setRegistrarIndex(
-        registrars.indexOf(judgementAccountId)
-      );
-    } else {
-      setRegistrarIndex(-1);
-    }
+    const registrar = registrars.find(({ address }) => judgementAccountId === address);
+
+    setRegistrarIndex(
+      registrar
+        ? registrar.index
+        : -1
+    );
   }, [judgementAccountId, registrars]);
 
   return (
@@ -53,8 +50,10 @@ function AccountNameJudgement ({ address, registrars, toggleJudgement }: Props):
     >
       <Modal.Content>
         <InputAddress
+          filter={addresses}
           label={t('registrar account')}
           onChange={setJudgementAccountId}
+          type='account'
         />
         <Input
           isDisabled
@@ -83,4 +82,4 @@ function AccountNameJudgement ({ address, registrars, toggleJudgement }: Props):
   );
 }
 
-export default React.memo(AccountNameJudgement);
+export default React.memo(RegistrarJudgement);

packages/page-accounts/src/Sidebar/Sidebar.tsx

@@ -10,11 +10,12 @@ import styled from 'styled-components';
 import { useAccountInfo, useApi, useRegistrars, useToggle } from '@polkadot/react-hooks';
 import { classes } from '@polkadot/react-components/util';
 import { colorLink } from '@polkadot/react-components/styles/theme';
-import { AccountNameJudgement, AccountName, AddressMini, AvatarItem, Button, Icon, IconLink, IdentityIcon, Input, InputTags, LinkExternal, Tag, Transfer } from '@polkadot/react-components';
+import { AccountName, AddressMini, AvatarItem, Button, Icon, IconLink, IdentityIcon, Input, InputTags, LinkExternal, Tag, Transfer } from '@polkadot/react-components';
 import { isHex } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import Flags from './Flags';
+import RegistrarJudgement from './RegistrarJudgement';
 
 interface Props extends BareProps {
   address: AccountId | Address | string | Uint8Array;
@@ -350,7 +351,7 @@ function Sidebar ({ address, className, onClose, onUpdateName, style }: Props):
         />
       )}
       {(!!address && isJudgementOpen && isRegistrar && useIdentity) && (
-        <AccountNameJudgement
+        <RegistrarJudgement
           address={address.toString()}
           key='modal-judgement'
           registrars={registrars}

packages/react-components/src/index.tsx

@@ -4,7 +4,6 @@
 
 export { default as AccountIndex } from './AccountIndex';
 export { default as AccountName } from './AccountName';
-export { default as AccountNameJudgement } from './AccountNameJudgement';
 export { default as ActionItem } from './ActionItem';
 export { default as AddressInfo } from './AddressInfo';
 export { default as AddressMini } from './AddressMini';

packages/react-hooks/src/useRegistrars.ts

@@ -11,9 +11,19 @@ import useAccounts from './useAccounts';
 import useApi from './useApi';
 import useCall from './useCall';
 
+interface RegistrarNull {
+  address: string | null;
+  index: number;
+}
+
+interface Registrar {
+  address: string;
+  index: number;
+}
+
 interface State {
   isRegistrar: boolean;
-  registrars: (string | null)[];
+  registrars: Registrar[];
   skipQuery?: boolean;
 }
 
@@ -26,14 +36,17 @@ export default function useRegistrars (skipQuery?: boolean): State {
   // determine if we have a registrar or not - registrars are allowed to approve
   useEffect((): void => {
     if (allAccounts && query) {
-      const registrars = query.map((registrar): string| null =>
-        registrar.isSome
-          ? registrar.unwrap().account.toString()
-          : null
-      );
+      const registrars = query
+        .map((registrar, index): RegistrarNull => ({
+          address: registrar.isSome
+            ? registrar.unwrap().account.toString()
+            : null,
+          index
+        }))
+        .filter((registrar): registrar is Registrar => !!registrar.address);
 
       setState({
-        isRegistrar: registrars.some((registrar) => !!registrar && allAccounts.includes(registrar)),
+        isRegistrar: registrars.some(({ address }) => allAccounts.includes(address)),
         registrars
       });
     }