@polkadot/types/interfaces#Registration TypeScript Examples

extractRegistrationEntry = (key: StorageKey, exposure: Option<Registration>): {accountId: string; judgements: Vec<RegistrationJudgement>; info: IdentityInfo} => {
  const registration = exposure as Option<Registration>
  const accountId = key.args.map((k) => k.toHuman()).toString()
  const judgements = registration.unwrap().judgements
  const info = registration.unwrap().info 
  
  return {
    accountId: accountId,
    judgements: judgements,
    info: info
  }
}

private _getIdentity = async (accountId: string): Promise<Option<Registration>> =>{
      return await this.api.query.identity.identityOf(accountId)
    }

function IdentityMain ({ address, className = '', onClose }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
  const { api } = useApi();
  const identityOpt = useCall<Option<Registration>>(api.query.identity.identityOf, [address]);
  const [{ info, okAll, okDisplay, okEmail, okLegal, okRiot, okTwitter, okWeb }, setInfo] = useState<ValueState>({ info: {}, okAll: false });
  const [hasEmail, setHasEmail] = useState(false);
  const [hasLegal, setHasLegal] = useState(false);
  const [hasRiot, setHasRiot] = useState(false);
  const [hasTwitter, setHasTwitter] = useState(false);
  const [hasWeb, setHasWeb] = useState(false);
  const [valDisplay, setValDisplay] = useState(() => (getAddressMeta(address).name || '').replace(/\(.*\)/, '').trim());
  const [valEmail, setValEmail] = useState('');
  const [valLegal, setValLegal] = useState('');
  const [valRiot, setValRiot] = useState('');
  const [valTwitter, setValTwitter] = useState('');
  const [valWeb, setValWeb] = useState('');
  const [gotPreviousIdentity, setGotPreviousIdentity] = useState(false);

  useEffect((): void => {
    if (identityOpt && identityOpt.isSome) {
      const { info } = identityOpt.unwrap();

      setData(info.display, null, setValDisplay);
      setData(info.email, setHasEmail, setValEmail);
      setData(info.legal, setHasLegal, setValLegal);
      setData(info.riot, setHasRiot, setValRiot);
      setData(info.twitter, setHasTwitter, setValTwitter);
      setData(info.web, setHasWeb, setValWeb);

      [info.display, info.email, info.legal, info.riot, info.twitter, info.web].some((info: Data) => {
        if (info.isRaw) {
          setGotPreviousIdentity(true);

          return true;
        } else {
          return false;
        }
      });
    }
  }, [identityOpt]);

  useEffect((): void => {
    const okDisplay = checkValue(true, valDisplay, 1, [], [], []);
    const okEmail = checkValue(hasEmail, valEmail, 3, ['@'], WHITESPACE, []);
    const okLegal = checkValue(hasLegal, valLegal, 1, [], [], []);
    const okRiot = checkValue(hasRiot, valRiot, 6, [':'], WHITESPACE, ['@', '~']);
    const okTwitter = checkValue(hasTwitter, valTwitter, 3, [], WHITESPACE, ['@']);
    const okWeb = checkValue(hasWeb, valWeb, 8, ['.'], WHITESPACE, ['https://', 'http://']);

    setInfo({
      info: {
        display: { [okDisplay ? 'raw' : 'none']: valDisplay || null },
        email: { [okEmail && hasEmail ? 'raw' : 'none']: okEmail && hasEmail ? valEmail : null },
        legal: { [okLegal && hasLegal ? 'raw' : 'none']: okLegal && hasLegal ? valLegal : null },
        riot: { [okRiot && hasRiot ? 'raw' : 'none']: okRiot && hasRiot ? valRiot : null },
        twitter: { [okTwitter && hasTwitter ? 'raw' : 'none']: okTwitter && hasTwitter ? valTwitter : null },
        web: { [okWeb && hasWeb ? 'raw' : 'none']: okWeb && hasWeb ? valWeb : null }
      },
      okAll: okDisplay && okEmail && okLegal && okRiot && okTwitter && okWeb,
      okDisplay,
      okEmail,
      okLegal,
      okRiot,
      okTwitter,
      okWeb
    });
  }, [hasEmail, hasLegal, hasRiot, hasTwitter, hasWeb, valDisplay, valEmail, valLegal, valRiot, valTwitter, valWeb]);

  return (
    <Modal
      className={className}
      header={t<string>('Register identity')}
    >
      <Modal.Content>
        <Input
          autoFocus
          help={t<string>('The name that will be displayed in your accounts list.')}
          isError={!okDisplay}
          label={t<string>('display name')}
          maxLength={32}
          onChange={setValDisplay}
          placeholder={t('My On-Chain Name')}
          value={valDisplay}
        />
        <WrapToggle
          onChange={setHasLegal}
          value={hasLegal}
        >
          <Input
            help={t<string>('The legal name for this identity.')}
            isDisabled={!hasLegal}
            isError={!okLegal}
            label={t<string>('legal name')}
            maxLength={32}
            onChange={setValLegal}
            placeholder={t('Full Legal Name')}
            value={hasLegal ? valLegal : '<none>'}
          />
        </WrapToggle>
        <WrapToggle
          onChange={setHasEmail}
          value={hasEmail}
        >
          <Input
            help={t<string>('The email address associated with this identity.')}
            isDisabled={!hasEmail}
            isError={!okEmail}
            label={t<string>('email')}
            maxLength={32}
            onChange={setValEmail}
            placeholder={t('[email protected]')}
            value={hasEmail ? valEmail : '<none>'}
          />
        </WrapToggle>
        <WrapToggle
          onChange={setHasWeb}
          value={hasWeb}
        >
          <Input
            help={t<string>('An URL that is linked to this identity.')}
            isDisabled={!hasWeb}
            isError={!okWeb}
            label={t<string>('web')}
            maxLength={32}
            onChange={setValWeb}
            placeholder={t('https://example.com')}
            value={hasWeb ? valWeb : '<none>'}
          />
        </WrapToggle>
        <WrapToggle
          onChange={setHasTwitter}
          value={hasTwitter}
        >
          <Input
            help={t<string>('The twitter name for this identity.')}
            isDisabled={!hasTwitter}
            isError={!okTwitter}
            label={t<string>('twitter')}
            onChange={setValTwitter}
            placeholder={t('@YourTwitterName')}
            value={hasTwitter ? valTwitter : '<none>'}
          />
        </WrapToggle>
        <WrapToggle
          onChange={setHasRiot}
          value={hasRiot}
        >
          <Input
            help={t<string>('a riot name linked to this identity')}
            isDisabled={!hasRiot}
            isError={!okRiot}
            label={t<string>('riot name')}
            maxLength={32}
            onChange={setValRiot}
            placeholder={t('@yourname:matrix.org')}
            value={hasRiot ? valRiot : '<none>'}
          />
        </WrapToggle>
        <InputBalance
          defaultValue={api.consts.identity?.basicDeposit}
          help={t<string>('Total amount of fund that will be reserved. These funds are returned when the identity is cleared')}
          isDisabled
          label={t<string>('total deposit')}
        />
      </Modal.Content>
      <Modal.Actions onCancel={onClose}>
        <TxButton
          accountId={address}
          icon={'trash-alt'}
          isDisabled={!gotPreviousIdentity}
          label={t<string>('Clear Identity')}
          onStart={onClose}
          tx={api.tx.identity.clearIdentity}
        />
        <TxButton
          accountId={address}
          isDisabled={!okAll}
          label={t<string>('Set Identity')}
          onStart={onClose}
          params={[info]}
          tx={api.tx.identity.setIdentity}
        />
      </Modal.Actions>
    </Modal>
  );
}