diff --git a/packages/react-components/src/AccountNameJudgement.tsx b/packages/page-accounts/src/Sidebar/RegistrarJudgement.tsx similarity index 75% rename from packages/react-components/src/AccountNameJudgement.tsx rename to packages/page-accounts/src/Sidebar/RegistrarJudgement.tsx index 20f36af5f1..b90f2ed48b 100644 --- a/packages/react-components/src/AccountNameJudgement.tsx +++ b/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 { +function RegistrarJudgement ({ address, registrars, toggleJudgement }: Props): React.ReactElement { const { t } = useTranslation(); + const [addresses] = useState(registrars.map(({ address }) => address)); const [judgementAccountId, setJudgementAccountId] = useState(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): > )} {(!!address && isJudgementOpen && isRegistrar && useIdentity) && ( - { 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 }); }