Populate accounts list with accounts from the network.

src/app/_services/user.service.ts

@@ -3,8 +3,9 @@ import {BehaviorSubject, Observable} from 'rxjs';
 import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import {environment} from '@src/environments/environment';
 import {first} from 'rxjs/operators';
-import {MutableKeyStore, MutablePgpKeyStore, PGPSigner, Signer} from '@app/_helpers';
+import {AccountIndex, MutableKeyStore, MutablePgpKeyStore, PGPSigner, Signer} from '@app/_helpers';
 import {ArgPair, Envelope, Syncable, User} from 'cic-client-meta';
+import {parse} from '@src/assets/js/parse-vcard';
 
 @Injectable({
   providedIn: 'root'
@@ -13,8 +14,9 @@ export class UserService {
   headers: HttpHeaders = new HttpHeaders({'x-cic-automerge': 'client'});
   keystore: MutableKeyStore = new MutablePgpKeyStore();
   signer: Signer = new PGPSigner(this.keystore);
+  accountIndexQuery = new AccountIndex(environment.contractAddress);
 
-  accounts: any = '';
+  accounts: any = [];
   private accountsList = new BehaviorSubject<any>(this.accounts);
   accountsSubject = this.accountsList.asObservable();
 
@@ -148,4 +150,16 @@ export class UserService {
       await syncable.sign();
     });
   }
+
+  async loadAccounts(limit: number, offset: number = 0): Promise<void> {
+    const accountAddresses = await this.accountIndexQuery.last(await this.accountIndexQuery.totalAccounts());
+    for (const accountAddress of accountAddresses.slice(offset, offset + limit)) {
+      this.getAccountDetailsFromMeta(await User.toKey(accountAddress)).pipe(first()).subscribe(res => {
+        const accountInfo = Envelope.fromJSON(JSON.stringify(res)).unwrap().m.data;
+        accountInfo.vcard = parse(atob(accountInfo.vcard));
+        this.accounts.push(accountInfo);
+        this.accountsList.next(this.accounts);
+      });
+    }
+  }
 }

src/app/app.component.ts

@@ -1,8 +1,6 @@
 import {Component, HostListener, OnInit} from '@angular/core';
-import {BlockSyncService, TransactionService} from '@app/_services';
+import {TransactionService} from '@app/_services';
 import {AuthService} from '@app/_services';
-import {AccountIndex} from '@app/_helpers';
-import {environment} from '@src/environments/environment';
 
 @Component({
   selector: 'app-root',
@@ -14,26 +12,17 @@ export class AppComponent implements OnInit {
   readyStateTarget: number = 3;
   readyState: number = 0;
   mediaQuery = window.matchMedia('(max-width: 768px)');
-  accountIndexQuery = new AccountIndex(environment.contractAddress);
 
   constructor(
     private authService: AuthService,
     private transactionService: TransactionService,
-    private blockSyncService: BlockSyncService
   ) {
     this.authService.mutableKeyStore.loadKeyring().then(r => this.authService.getPublicKeys().then());
-    this.blockSyncService.blockSync();
   }
 
   ngOnInit(): void {
     this.mediaQuery.addListener(this.onResize);
     this.onResize(this.mediaQuery);
-    this.queryAccountsIndex(20).then();
-  }
-
-  async queryAccountsIndex(numberOfAccounts: number): Promise<void> {
-    console.log(`Last ${numberOfAccounts} accounts are: `, await this.accountIndexQuery.last(numberOfAccounts));
-    console.log('Total number of accounts: ', await this.accountIndexQuery.totalAccounts());
   }
 
   // Load resize

src/app/pages/accounts/accounts.component.html

@@ -54,45 +54,45 @@
                      matSortDirection="desc" matSortDisableClear>
             <ng-container matColumnDef="name">
               <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{user?.vcard.fn}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="phone">
               <mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{user?.vcard.tel[0].value[0]}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="created">
               <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user.created}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{user?.date_registered | date}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="balance">
               <mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user.balance}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{user?.balance}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="type">
               <mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user.type}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{user?.type}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="status">
               <mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell>
               <mat-cell *matCellDef="let user">
-                <span *ngIf="user.status === 'approved'" class="badge badge-success badge-pill"> {{user.status}} </span>
+                <span *ngIf="user?.status === 'approved'" class="badge badge-success badge-pill"> {{user?.status}} </span>
-                <span *ngIf="user.status === 'unapproved'" class="badge badge-danger badge-pill"> {{user.status}} </span>
+                <span *ngIf="user?.status === 'unapproved'" class="badge badge-danger badge-pill"> {{user?.status}} </span>
               </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="location">
               <mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user.location}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{user?.location.area_name}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="failedPinAttempts">
               <mat-header-cell *matHeaderCellDef mat-sort-header> FAILED PIN ATTEMPTS </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user.failedPinAttempts}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{user?.failedPinAttempts}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="select">

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

@@ -27,7 +27,7 @@ export class AccountsComponent implements OnInit {
     private userService: UserService,
     private router: Router
   ) {
-    this.userService.getAccounts();
+    this.userService.loadAccounts(100).then();
   }
 
   ngOnInit(): void {

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

@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
-import {TransactionService} from '@app/_services';
+import {BlockSyncService, TransactionService} from '@app/_services';
 import {MatTableDataSource} from '@angular/material/table';
 import {SelectionModel} from '@angular/cdk/collections';
 import {MatPaginator} from '@angular/material/paginator';
@@ -24,8 +24,11 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
   @ViewChild(MatSort) sort: MatSort;
 
   constructor(
+    private blockSyncService: BlockSyncService,
     private transactionService: TransactionService,
-  ) { }
+  ) {
+    this.blockSyncService.blockSync();
+  }
 
   ngOnInit(): void {
     this.transactionService.transactionsSubject.subscribe(transactions => {