Fix display of all acounts on account details page.

src/app/_services/block-sync.service.ts

@@ -17,7 +17,6 @@ export class BlockSyncService {
   constructor(private transactionService: TransactionService) {}
 
   async blockSync(address: string = null, offset: number = 0, limit: number = 100): Promise<void> {
-    this.transactionService.resetTransactionsList();
     const settings: Settings = new Settings(this.scan);
     const readyStateElements: { network: number } = { network: 2 };
     settings.w3.provider = environment.web3Provider;

src/app/_services/user.service.ts

@@ -198,7 +198,6 @@ export class UserService {
   }
 
   async loadAccounts(limit: number = 100, offset: number = 0): Promise<void> {
-    this.resetAccountsList();
     try {
       const accountRegistry = await RegistryService.getAccountRegistry();
       const accountAddresses: Array<string> = await accountRegistry.last(limit);

src/app/app.component.ts

@@ -9,6 +9,8 @@ import {
   UserService,
 } from '@app/_services';
 import { SwUpdate } from '@angular/service-worker';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
@@ -19,6 +21,8 @@ import { SwUpdate } from '@angular/service-worker';
 export class AppComponent implements OnInit {
   title = 'CICADA';
   mediaQuery: MediaQueryList = window.matchMedia('(max-width: 768px)');
+  url: string;
+  accountDetailsRegex = '/accounts/[a-z,A-Z,0-9]{40}';
 
   constructor(
     private authService: AuthService,
@@ -28,7 +32,8 @@ export class AppComponent implements OnInit {
     private tokenService: TokenService,
     private transactionService: TransactionService,
     private userService: UserService,
-    private swUpdate: SwUpdate
+    private swUpdate: SwUpdate,
+    private router: Router
   ) {
     this.mediaQuery.addEventListener('change', this.onResize);
     this.onResize(this.mediaQuery);
@@ -39,7 +44,24 @@ export class AppComponent implements OnInit {
     await this.tokenService.init();
     await this.userService.init();
     await this.transactionService.init();
-    await this.blockSyncService.blockSync();
+    await this.router.events
+      .pipe(filter((e) => e instanceof NavigationEnd))
+      .forEach(async (routeInfo) => {
+        if (routeInfo instanceof NavigationEnd) {
+          this.url = routeInfo.url;
+          if (!this.url.match(this.accountDetailsRegex) || !this.url.includes('tx')) {
+            await this.blockSyncService.blockSync();
+          }
+          if (!this.url.includes('accounts')) {
+            try {
+              // TODO it feels like this should be in the onInit handler
+              await this.userService.loadAccounts(100);
+            } catch (error) {
+              this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, { error });
+            }
+          }
+        }
+      });
     try {
       const publicKeys = await this.authService.getPublicKeys();
       await this.authService.mutableKeyStore.importPublicKey(publicKeys);
@@ -50,12 +72,6 @@ export class AppComponent implements OnInit {
       });
       // TODO do something to halt user progress...show a sad cicada page 🦗?
     }
-    try {
-      // TODO it feels like this should be in the onInit handler
-      await this.userService.loadAccounts(100);
-    } catch (error) {
-      this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, { error });
-    }
     this.tokenService.load.subscribe(async (status: boolean) => {
       if (status) {
         await this.tokenService.getTokens();

src/app/pages/accounts/account-details/account-details.component.ts

@@ -104,6 +104,7 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
       location: ['', Validators.required],
       locationType: ['', Validators.required],
     });
+    this.transactionService.resetTransactionsList();
     await this.blockSyncService.blockSync(this.accountAddress);
     this.userService.resetAccountsList();
     (await this.userService.getAccountByAddress(this.accountAddress, 100)).subscribe(

src/app/pages/accounts/accounts.component.ts

@@ -8,7 +8,7 @@ import {
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { TokenService, UserService } from '@app/_services';
+import { LoggingService, TokenService, UserService } from '@app/_services';
 import { Router } from '@angular/router';
 import { exportCsv } from '@app/_helpers';
 import { strip0x } from '@src/assets/js/ethtx/dist/hex';
@@ -36,18 +36,25 @@ export class AccountsComponent implements OnInit, AfterViewInit {
   @ViewChild(MatSort) sort: MatSort;
 
   constructor(
+    private loggingService: LoggingService,
     private userService: UserService,
     private router: Router,
     private tokenService: TokenService
   ) {}
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     this.userService.accountsSubject.subscribe((accounts) => {
       this.dataSource = new MatTableDataSource<any>(accounts);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
       this.accounts = accounts;
     });
+    try {
+      // TODO it feels like this should be in the onInit handler
+      await this.userService.loadAccounts(100);
+    } catch (error) {
+      this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, { error });
+    }
     this.userService
       .getAccountTypes()
       .pipe(first())
@@ -60,8 +67,10 @@ export class AccountsComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.dataSource.paginator = this.paginator;
+    if (this.dataSource) {
-    this.dataSource.sort = this.sort;
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
+    }
   }
 
   doFilter(value: string): void {

src/app/pages/transactions/transactions.component.ts

@@ -5,7 +5,7 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
-import { TokenService, TransactionService, UserService } from '@app/_services';
+import { BlockSyncService, TokenService, TransactionService, UserService } from '@app/_services';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -34,12 +34,14 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
   @ViewChild(MatSort) sort: MatSort;
 
   constructor(
+    private blockSyncService: BlockSyncService,
     private transactionService: TransactionService,
     private userService: UserService,
     private tokenService: TokenService
   ) {}
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
+    await this.blockSyncService.blockSync();
     this.transactionService.transactionsSubject.subscribe((transactions) => {
       this.transactionDataSource = new MatTableDataSource<any>(transactions);
       this.transactionDataSource.paginator = this.paginator;
@@ -79,8 +81,10 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.transactionDataSource.paginator = this.paginator;
+    if (this.transactionDataSource) {
-    this.transactionDataSource.sort = this.sort;
+      this.transactionDataSource.paginator = this.paginator;
+      this.transactionDataSource.sort = this.sort;
+    }
   }
 
   downloadCsv(): void {