Query transaction participants from meta service.

src/app/_services/transaction.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import {map} from 'rxjs/operators';
+import {first, map} from 'rxjs/operators';
 import {BehaviorSubject, Observable} from 'rxjs';
 import {environment} from '@src/environments/environment';
-import {User} from 'cic-client-meta';
+import {Envelope, User} from 'cic-client-meta';
 import {UserService} from '@app/_services/user.service';
 import { AccountIndex } from '@app/_helpers';
 import { Keccak } from 'sha3';
@@ -14,6 +14,7 @@ import {toValue} from '@src/assets/js/ethtx/dist/tx';
 import * as secp256k1 from 'secp256k1';
 import {AuthService} from '@app/_services/auth.service';
 const Web3 = require('web3');
+const vCard = require('vcard-parser');
 
 @Injectable({
   providedIn: 'root'
@@ -46,28 +47,21 @@ export class TransactionService {
       }));
   }
 
-  setTransaction(transaction, cacheSize: number): Promise<void> {
+  async setTransaction(transaction, cacheSize: number): Promise<void> {
     const cachedTransaction = this.transactions.find(cachedTx => cachedTx.tx.txHash === transaction.tx.txHash);
     if (cachedTransaction) { return; }
     transaction.type = 'transaction';
-    this.getUser(transaction.from).then(async () => {
+    transaction.sender = await this.getUser(transaction.from);
-      transaction.sender = this.userInfo;
+    transaction.recipient = await this.getUser(transaction.to);
-      this.getUser(transaction.to).then(async () => {
-        transaction.recipient = this.userInfo;
     await this.addTransaction(transaction, cacheSize);
-      });
-    });
   }
 
-  setConversion(conversion, cacheSize): void {
+  async setConversion(conversion, cacheSize): Promise<void> {
     const cachedConversion = this.transactions.find(cachedTx => cachedTx.tx.txHash === conversion.tx.txHash);
     if (cachedConversion) { return; }
     conversion.type = 'conversion';
-    this.getUser(conversion.trader).then(async () => {
+    conversion.sender = conversion.recipient = await this.getUser(conversion.trader);
-      conversion.sender = this.userInfo;
-      conversion.recipient = this.userInfo;
     await this.addTransaction(conversion, cacheSize);
-    });
   }
 
   async addTransaction(transaction, cacheSize: number): Promise<void> {
@@ -76,12 +70,16 @@ export class TransactionService {
       this.transactions.length = cacheSize;
     }
     this.transactionList.next(this.transactions);
-    console.log('Last 10 accounts are: ', await this.request.last(10));
-    console.log('Total number of accounts: ', await this.request.totalAccounts());
   }
 
-  async getUser(address: string): Promise<void> {
+  async getUser(address: string): Promise<any> {
-    this.userInfo = this.userService.getUser(await User.toKey(address));
+    return this.userService.getAccountDetailsFromMeta(await User.toKey(address)).pipe(first()).subscribe(res => {
+      const account = Envelope.fromJSON(JSON.stringify(res)).unwrap();
+      const accountInfo = account.m.data;
+      accountInfo.vcard = vCard.parse(atob(accountInfo.vcard));
+      this.userInfo = accountInfo;
+      return accountInfo;
+    });
   }
 
   async transferRequest(tokenAddress: string, senderAddress: string, recipientAddress: string, value: number): Promise<any> {

src/app/app.component.ts

@@ -50,12 +50,12 @@ export class AppComponent {
   @HostListener('window:cic_transfer', ['$event'])
   cicTransfer(event: CustomEvent): void {
     const transaction = event.detail.tx;
-    this.transactionService.setTransaction(transaction, 100);
+    this.transactionService.setTransaction(transaction, 100).then();
   }
 
   @HostListener('window:cic_convert', ['$event'])
   cicConvert(event: CustomEvent): void {
     const conversion = event.detail.tx;
-    this.transactionService.setConversion(conversion, 100);
+    this.transactionService.setConversion(conversion, 100).then();
   }
 }

src/app/pages/transactions/transaction-details/transaction-details.component.html

@@ -12,12 +12,12 @@
           <h4>Exchange: </h4>
           <ul class="list-group list-group-flush">
             <li class="list-group-item">
-              <span>Sender: {{transaction.sender?.vcard.fn}}</span><br><br>
+              <span>Sender: {{transaction.sender?.vcard.fn[0].value}}</span><br><br>
               <span>Sender Address: {{transaction.from}}</span><br><br>
               <button mat-raised-button color="primary" class="btn btn-outline-info" routerLink="/accounts/1">View Sender</button>
             </li>
             <li class="list-group-item">
-              <span>Recipient: {{transaction.recipient?.vcard.fn}}</span><br><br>
+              <span>Recipient: {{transaction.recipient?.vcard.fn[0].value}}</span><br><br>
               <span>Recipient Address: {{transaction.to}}</span><br><br>
               <button mat-raised-button color="primary" class="btn btn-outline-info" routerLink="/accounts/1">View Recipient</button>
             </li>
@@ -70,7 +70,7 @@
       <h3>Exchange: </h3>
       <ul class="list-group list-group-flush">
         <li class="list-group-item">
-          <span><strong>Trader: {{transaction.sender?.vcard.fn}}</strong></span>
+          <span><strong>Trader: {{transaction.sender?.vcard.fn[0].value}}</strong></span>
         </li>
         <li class="list-group-item">
           <span>Trader Address: {{transaction.trader}}</span>

src/app/pages/transactions/transactions.component.html

@@ -68,22 +68,22 @@
 
             <ng-container matColumnDef="sender">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Sender </mat-header-cell>
-              <mat-cell *matCellDef="let transaction"> {{transaction.sender?.vcard.fn}} </mat-cell>
+              <mat-cell *matCellDef="let transaction"> {{transaction.sender?.vcard.fn[0].value}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="senderLocation">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Sender Location </mat-header-cell>
-              <mat-cell *matCellDef="let transaction"> Miyani </mat-cell>
+              <mat-cell *matCellDef="let transaction"> {{transaction.sender?.location.area_name}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="recipient">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </mat-header-cell>
-              <mat-cell *matCellDef="let transaction"> {{transaction.recipient?.vcard.fn}} </mat-cell>
+              <mat-cell *matCellDef="let transaction"> {{transaction.recipient?.vcard.fn[0].value}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="recipientLocation">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Recipient Location </mat-header-cell>
-              <mat-cell *matCellDef="let transaction"> Kayaba </mat-cell>
+              <mat-cell *matCellDef="let transaction"> {{transaction.recipient?.location.area_name}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="token">