Refactor token list to use Observables for tracking changes.

src/app/_services/auth.service.ts

@@ -209,7 +209,7 @@ export class AuthService {
     this.trustedUsersList.next(this.trustedUsers);
   }
 
-  getTrustedUsers(): any {
+  getTrustedUsers(): void {
     this.mutableKeyStore.getPublicKeys().forEach((key) => {
       this.addTrustedUser(key.users[0].userId);
     });

src/app/_services/token.service.ts

@@ -4,6 +4,7 @@ import { TokenRegistry } from '@app/_eth';
 import { HttpClient } from '@angular/common/http';
 import { RegistryService } from '@app/_services/registry.service';
 import { Token } from '@app/_models';
+import {BehaviorSubject, Observable, Subject} from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -12,6 +13,9 @@ export class TokenService {
   registry: CICRegistry;
   tokenRegistry: TokenRegistry;
   onload: (status: boolean) => void;
+  tokens: Array<Token> = [];
+  private tokensList: BehaviorSubject<Array<Token>> = new BehaviorSubject<Array<Token>>(this.tokens);
+  tokensSubject: Observable<Array<Token>> = this.tokensList.asObservable();
 
   constructor(private httpClient: HttpClient) {}
 
@@ -25,14 +29,24 @@ export class TokenService {
     };
   }
 
-  async getTokens(): Promise<Array<Token>> {
+  addToken(token: Token): void {
+    const savedIndex = this.tokens.findIndex((tk) => tk.address === token.address);
+    if (savedIndex === 0) {
+      return;
+    }
+    if (savedIndex > 0) {
+      this.tokens.splice(savedIndex, 1);
+    }
+    this.tokens.unshift(token);
+    this.tokensList.next(this.tokens);
+  }
+
+  async getTokens(): Promise<void> {
     const count: number = await this.tokenRegistry.totalTokens();
-    const tokens: Array<Token> = [];
     for (let i = 0; i < count; i++) {
       const token: Token = await this.getTokenByAddress(await this.tokenRegistry.entry(i));
-      tokens.push(token);
+      this.addToken(token);
     }
-    return tokens;
   }
 
   async getTokenByAddress(address: string): Promise<Token> {
@@ -46,9 +60,14 @@ export class TokenService {
     return token;
   }
 
-  async getTokenBySymbol(symbol: string): Promise<Token> {
+  async getTokenBySymbol(symbol: string): Promise<Observable<Token>> {
-    const tokens: Array<Token> = await this.getTokens();
+    const tokenSubject: Subject<Token> = new Subject<Token>();
-    return tokens.find((token) => token.symbol === symbol);
+    await this.getTokens();
+    this.tokensSubject.subscribe((tokens) => {
+      const queriedToken = tokens.find((token) => token.symbol === symbol);
+      tokenSubject.next(queriedToken);
+    });
+    return tokenSubject.asObservable();
   }
 
   async getTokenBalance(address: string): Promise<(address: string) => Promise<number>> {

src/app/pages/tokens/tokens.component.ts

@@ -30,12 +30,15 @@ export class TokensComponent implements OnInit {
   async ngOnInit(): Promise<void> {
     await this.tokenService.init();
     this.tokenService.onload = async (status: boolean): Promise<void> => {
-      this.tokens = await this.tokenService.getTokens();
+      await this.tokenService.getTokens();
-      this.loggingService.sendInfoLevelMessage(this.tokens);
+    };
-      this.dataSource = new MatTableDataSource(this.tokens);
+    this.tokenService.tokensSubject.subscribe((tokens) => {
+      this.loggingService.sendInfoLevelMessage(tokens);
+      this.dataSource = new MatTableDataSource(tokens);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
-    };
+      this.tokens = tokens;
+    });
   }
 
   doFilter(value: string): void {