Fix user traded accounts list.

src/app/_services/transaction.service.ts

@@ -61,10 +61,11 @@ export class TransactionService {
         .pipe(first())
         .subscribe(
           (res) => {
-            transaction.sender = this.getAccountInfo(res);
+            transaction.sender = this.getAccountInfo(res, cacheSize);
           },
           (error) => {
             transaction.sender = defaultAccount;
+            this.userService.addAccount(defaultAccount, cacheSize);
           }
         );
       this.userService
@@ -72,10 +73,11 @@ export class TransactionService {
         .pipe(first())
         .subscribe(
           (res) => {
-            transaction.recipient = this.getAccountInfo(res);
+            transaction.recipient = this.getAccountInfo(res, cacheSize);
           },
           (error) => {
             transaction.recipient = defaultAccount;
+            this.userService.addAccount(defaultAccount, cacheSize);
           }
         );
     } finally {
@@ -100,6 +102,7 @@ export class TransactionService {
           },
           (error) => {
             conversion.sender = conversion.recipient = defaultAccount;
+            this.userService.addAccount(defaultAccount, cacheSize);
           }
         );
     } finally {
@@ -108,8 +111,10 @@ export class TransactionService {
   }
 
   addTransaction(transaction, cacheSize: number): void {
-    const savedIndex = this.transactions.findIndex(tx => tx.tx.txHash === transaction.tx.txHash);
+    const savedIndex = this.transactions.findIndex((tx) => tx.tx.txHash === transaction.tx.txHash);
-    if (savedIndex === 0) { return; }
+    if (savedIndex === 0) {
+      return;
+    }
     if (savedIndex > 0) {
       this.transactions.splice(savedIndex, 1);
     }
@@ -125,9 +130,10 @@ export class TransactionService {
     this.transactionList.next(this.transactions);
   }
 
-  getAccountInfo(account: string): any {
+  getAccountInfo(account: string, cacheSize: number = 100): any {
     const accountInfo = JSON.parse(Envelope.fromJSON(JSON.stringify(account)).unwrap().m.data);
     accountInfo.vcard = vCard.parse(atob(accountInfo.vcard));
+    this.userService.addAccount(accountInfo, cacheSize);
     return accountInfo;
   }
 

src/app/_services/user.service.ts

@@ -210,11 +210,7 @@ export class UserService {
         };
         accountInfo.vcard = vCard.parse(atob(accountInfo.vcard));
         await vcardValidation(accountInfo.vcard);
-        this.accounts.unshift(accountInfo);
+        this.addAccount(accountInfo, limit);
-        if (this.accounts.length > limit) {
-          this.accounts.length = limit;
-        }
-        this.accountsList.next(this.accounts);
         accountSubject.next(accountInfo);
       });
     return accountSubject.asObservable();
@@ -266,4 +262,23 @@ export class UserService {
   getGenders(): Observable<any> {
     return this.httpClient.get(`${environment.cicMetaUrl}/genders`);
   }
+
+  addAccount(account: AccountDetails, cacheSize: number): void {
+    const savedIndex = this.accounts.findIndex(
+      (acc) =>
+        acc.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0] ===
+        account.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0]
+    );
+    if (savedIndex === 0) {
+      return;
+    }
+    if (savedIndex > 0) {
+      this.accounts.splice(savedIndex, 1);
+    }
+    this.accounts.unshift(account);
+    if (this.accounts.length > cacheSize) {
+      this.accounts.length = Math.min(this.accounts.length, cacheSize);
+    }
+    this.accountsList.next(this.accounts);
+  }
 }

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

@@ -252,7 +252,7 @@
                 <mat-icon matSuffix>search</mat-icon>
               </mat-form-field>
 
-              <mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created"
+              <table mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created"
                          #TransactionTableSort="matSort" matSortDirection="asc" matSortDisableClear>
 
                 <ng-container matColumnDef="sender">
@@ -285,10 +285,10 @@
                   </td>
                 </ng-container>
 
-                <mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></mat-header-row>
+                <tr mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></tr>
-                <mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple
+                <tr mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple
-                         (click)="viewTransaction(transaction)"></mat-row>
+                         (click)="viewTransaction(transaction)"></tr>
-              </mat-table>
+              </table>
 
               <mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="transactionsDefaultPageSize"
                              [pageSizeOptions]="transactionsPageSizeOptions" showFirstLastButtons></mat-paginator>

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

@@ -90,10 +90,15 @@ export class AccountDetailsComponent implements OnInit {
       location: ['', Validators.required],
       locationType: ['', Validators.required],
     });
-    this.route.paramMap.subscribe(async (params: Params) => {
+    this.route.paramMap.subscribe((params: Params) => {
       this.accountAddress = add0x(params.get('id'));
       this.bloxbergLink =
         'https://blockexplorer.bloxberg.org/address/' + this.accountAddress + '/transactions';
+      this.blockSyncService.blockSync(this.accountAddress);
+    });
+  }
+
+  async ngOnInit(): Promise<void> {
     (await this.userService.getAccountByAddress(this.accountAddress, 100)).subscribe(
       async (res) => {
         if (res !== undefined) {
@@ -119,7 +124,19 @@ export class AccountDetailsComponent implements OnInit {
         }
       }
     );
-      this.blockSyncService.blockSync(this.accountAddress);
+    this.userService.accountsSubject.subscribe((accounts) => {
+      this.userDataSource = new MatTableDataSource<any>(accounts);
+      this.userDataSource.paginator = this.userTablePaginator;
+      this.userDataSource.sort = this.userTableSort;
+      this.accounts = accounts;
+    });
+
+    this.transactionService.transactionsSubject.subscribe((transactions) => {
+      this.transactionsDataSource = new MatTableDataSource<any>(transactions);
+      this.transactionsDataSource.paginator = this.transactionTablePaginator;
+      this.transactionsDataSource.sort = this.transactionTableSort;
+      this.transactions = transactions;
+      this.cdr.detectChanges();
     });
     this.userService
       .getCategories()
@@ -147,22 +164,6 @@ export class AccountDetailsComponent implements OnInit {
       .subscribe((res) => (this.genders = res));
   }
 
-  ngOnInit(): void {
-    this.userService.accountsSubject.subscribe((accounts) => {
-      this.userDataSource = new MatTableDataSource<any>(accounts);
-      this.userDataSource.paginator = this.userTablePaginator;
-      this.userDataSource.sort = this.userTableSort;
-      this.accounts = accounts;
-    });
-
-    this.transactionService.transactionsSubject.subscribe((transactions) => {
-      this.transactionsDataSource = new MatTableDataSource<any>(transactions);
-      this.transactionsDataSource.paginator = this.transactionTablePaginator;
-      this.transactionsDataSource.sort = this.transactionTableSort;
-      this.transactions = transactions;
-    });
-  }
-
   doTransactionFilter(value: string): void {
     this.transactionsDataSource.filter = value.trim().toLocaleLowerCase();
   }