How to use the @polkadot/ui-keyring/observable/accounts.subject function in @polkadot/ui-keyring

useEffect(() => {
    const allAddressessub = combineLatest([
      // eslint-disable-next-line @typescript-eslint/unbound-method
      accountObservable.subject.pipe(map(Object.values)),
      // eslint-disable-next-line @typescript-eslint/unbound-method
      addressObservable.subject.pipe(map(Object.values))
    ])
      .pipe(map(flatten))
      .subscribe(setAllAddresses);

    return (): void => {
      allAddressessub.unsubscribe();
    };
  }, []);

useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/unbound-method
    const accountsSub = accounts.subject.pipe(map(Object.values)).subscribe(values => {
      const stash = values.filter(value =>
        fromNullable(value.json.meta.tags)
          .map(tags => tags.includes('stash'))
          .getOrElse(undefined)
      )[0];

      const _messageToSign = fromNullable(stash)
        .map(stash => `Pay KSMs to the Kusama account: ${stash.json.address}`)
        .getOrElse('');

      setMessageToSign(_messageToSign);
    });

    return (): void => accountsSub.unsubscribe();
  }, []);

useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/unbound-method
    const accountsSub = accounts.subject.pipe(map(Object.values)).subscribe(values => {
      const _controller = values.filter(value => value.json.meta.tags && value.json.meta.tags.includes('controller'))[0];
      const _stash = values.filter(value => value.json.meta.tags && value.json.meta.tags.includes('stash'))[0];

      setController(_controller);
      setStash(_stash);
    });

    return (): void => accountsSub.unsubscribe();
  }, []);

useEffect(() => {
    const accountsSub = accounts.subject
      // eslint-disable-next-line @typescript-eslint/unbound-method
      .pipe(map(Object.values), map(head))
      .subscribe(setDefaultAccount);

    return (): void => accountsSub.unsubscribe();
  }, [api]);

useEffect(() => {
    const subscription = combineLatest([
      keyringAccounts.subject,
      keyringAddresses.subject
    ]).subscribe(([acc, add]) => {
      setAccounts(acc);
      setAddresses(add);
    });

    return (): void => subscription.unsubscribe();
  }, []);

renderMyAccounts () {
    const { api } = this.context;
    const { match: { params: { currentAddress } } } = this.props;

    return (
      
        {accountObservable.subject.pipe(
          map((allAccounts: SubjectInfo) =>
            !allAccounts
              ? this.renderEmpty()
              : Object.values(allAccounts).map((account: SingleAddress) =>
                
                  
                  
                        {account.json.meta.name}

private accountsSubscribe (url: string, id: string, port: chrome.runtime.Port): boolean {
    const cb = createSubscription<'pub(accounts.subscribe)'>(id, port);
    const subscription = accountsObservable.subject.subscribe((accounts: SubjectInfo): void =>
      cb(transformAccounts(accounts))
    );

    port.onDisconnect.addListener((): void => {
      unsubscribe(id);
      subscription.unsubscribe();
    });

    return true;
  }

renderAllAccountsFromKeyring () {
    return (
      
        {accountObservable.subject.pipe(
          map((allAccounts: SubjectInfo) =>
            Object.values(allAccounts).map((account: SingleAddress) =>
              
                
                
                      {account.json.meta.name}
                    
                  }
                  orientation='horizontal'
                  size='small'
                />
              
            )

private accountsSubscribe (id: string, port: chrome.runtime.Port): boolean {
    const cb = createSubscription<'pri(accounts.subscribe)'>(id, port);
    const subscription = accountsObservable.subject.subscribe((accounts: SubjectInfo): void =>
      cb(transformAccounts(accounts))
    );

    port.onDisconnect.addListener((): void => {
      unsubscribe(id);
      subscription.unsubscribe();
    });

    return true;
  }

useEffect((): () => void => {
    const subscription = accountObservable.subject.subscribe((accounts): void => {
      if (mounted.current) {
        const allAccounts = accounts ? Object.keys(accounts) : [];
        const hasAccounts = allAccounts.length !== 0;

        setState({ allAccounts, hasAccounts });
      }
    });

    return (): void => {
      subscription.unsubscribe();
    };
  }, []);