Add display of token balance together with token amount.

src/app/_services/token.service.ts

@@ -14,8 +14,11 @@ export class TokenService {
   tokenRegistry: TokenRegistry;
   onload: (status: boolean) => void;
   tokens: Array<Token> = [];
-  private tokensList: BehaviorSubject<Array<Token>> = new BehaviorSubject<Array<Token>>(this.tokens);
+  private tokensList: BehaviorSubject<Array<Token>> = new BehaviorSubject<Array<Token>>(
+    this.tokens
+  );
   tokensSubject: Observable<Array<Token>> = this.tokensList.asObservable();
+  load: BehaviorSubject<any> = new BehaviorSubject<any>(false);
 
   constructor(private httpClient: HttpClient) {}
 
@@ -25,6 +28,7 @@ export class TokenService {
       this.tokenRegistry = new TokenRegistry(
         await this.registry.getContractAddressByName('TokenRegistry')
       );
+      this.load.next(true);
       this.onload(this.tokenRegistry !== undefined);
     };
   }
@@ -71,7 +75,17 @@ export class TokenService {
   }
 
   async getTokenBalance(address: string): Promise<(address: string) => Promise<number>> {
-    const sarafuToken = await this.registry.addToken(await this.tokenRegistry.entry(0));
+    const token = await this.registry.getTokenBySymbol('TokenRegistry', 'GFT');
-    return await sarafuToken.methods.balanceOf(address).call();
+    return await token.methods.balanceOf(address).call();
+  }
+
+  async getTokenName(): Promise<string> {
+    const token = await this.registry.getTokenBySymbol('TokenRegistry', 'GFT');
+    return await token.methods.name().call();
+  }
+
+  async getTokenSymbol(): Promise<string> {
+    const token = await this.registry.getTokenBySymbol('TokenRegistry', 'GFT');
+    return await token.methods.symbol().call();
   }
 }

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

@@ -33,7 +33,7 @@
           <h3>
             <strong> {{account?.vcard?.fn[0].value}} </strong>
           </h3>
-          <span class="ml-auto"><strong>Balance:</strong> {{account?.balance | tokenRatio}} SRF</span>
+          <span class="ml-auto"><strong>Balance:</strong> {{account?.balance | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
           <span class="ml-2"><strong>Created:</strong> {{account?.date_registered | unixDate}}</span>
           <span class="ml-2"><strong>Address:</strong>
             <a href="{{bloxbergLink}}" target="_blank"> {{accountAddress}} </a>
@@ -218,7 +218,7 @@
               <tbody>
               <tr>
                 <td>{{account?.vcard?.fn[0].value}}</td>
-                <td>{{account?.balance | tokenRatio}}</td>
+                <td>{{account?.balance | tokenRatio}} {{ tokenSymbol | uppercase }}</td>
                 <td>{{account?.date_registered | unixDate}}</td>
                 <td>
                   <span class="badge badge-success badge-pill">
@@ -274,8 +274,8 @@
                 <ng-container matColumnDef="value">
                   <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
                   <td mat-cell *matCellDef="let transaction">
-                    <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}}</span>
+                    <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
-                    <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}}</span>
+                    <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
                   </td>
                 </ng-container>
 
@@ -348,7 +348,7 @@
 
                 <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 | tokenRatio}} {{tokenSymbol | uppercase}} </mat-cell>
                 </ng-container>
 
                 <ng-container matColumnDef="location">

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

@@ -64,6 +64,7 @@ export class AccountDetailsComponent implements OnInit {
   matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
   submitted: boolean = false;
   bloxbergLink: string;
+  tokenSymbol: string;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -113,7 +114,7 @@ export class AccountDetailsComponent implements OnInit {
           this.loggingService.sendInfoLevelMessage(this.account);
           const fullName = this.account.vcard?.fn[0].value.split(' ');
           this.accountInfoForm.patchValue({
-            firstName: fullName[0],
+            firstName: fullName[0].split(',')[0],
             lastName: fullName.slice(1).join(' '),
             phoneNumber: this.account.vcard?.tel[0].value,
             age: this.account.age,
@@ -189,6 +190,11 @@ export class AccountDetailsComponent implements OnInit {
       .getGenders()
       .pipe(first())
       .subscribe((res) => (this.genders = res));
+    this.tokenService.load.subscribe(async (status) => {
+      if (status) {
+        this.tokenSymbol = await this.tokenService.getTokenSymbol();
+      }
+    });
   }
 
   doTransactionFilter(value: string): void {
@@ -220,7 +226,7 @@ export class AccountDetailsComponent implements OnInit {
     }
     const accountKey = await this.userService.changeAccountInfo(
       this.accountAddress,
-      this.accountInfoFormStub.firstName.value + ' ' + this.accountInfoFormStub.lastName.value,
+      this.accountInfoFormStub.firstName.value + ', ' + this.accountInfoFormStub.lastName.value,
       this.accountInfoFormStub.phoneNumber.value,
       this.accountInfoFormStub.age.value,
       this.accountInfoFormStub.type.value,

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

@@ -30,7 +30,7 @@
               <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewRecipient()">View Recipient</button>
             </li>
             <li class="list-group-item">
-              <span>Amount: SRF {{transaction.value | tokenRatio}}</span>
+              <span>Amount: {{transaction.value | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
             </li>
           </ul>
           <h4 class="mt-2">Token: </h4>
@@ -43,10 +43,10 @@
               </span>
             </li>
             <li class="list-group-item">
-              <span>Name: Sarafu Token</span>
+              <span>Name: {{ tokenName }}</span>
             </li>
             <li class="list-group-item">
-              <span>Symbol: SRF</span>
+              <span>Symbol: {{ tokenSymbol | uppercase }}</span>
             </li>
           </ul>
         </div>
@@ -109,10 +109,10 @@
               <span>Name: {{transaction.sourceToken.name}}</span>
             </li>
             <li class="list-group-item">
-              <span>Symbol: {{transaction.sourceToken.symbol}}</span>
+              <span>Symbol: {{transaction.sourceToken.symbol | uppercase}}</span>
             </li>
             <li class="list-group-item">
-              <span>Amount: {{transaction.sourceToken.symbol + ' ' + transaction.fromValue}}</span>
+              <span>Amount: {{transaction.fromValue}} {{transaction.sourceToken.symbol | uppercase}}</span>
             </li>
           </ul>
         </div>
@@ -130,10 +130,10 @@
               <span>Name: {{transaction.destinationToken.name}}</span>
             </li>
             <li class="list-group-item">
-              <span>Symbol: {{transaction.destinationToken.symbol}}</span>
+              <span>Symbol: {{transaction.destinationToken.symbol | uppercase}}</span>
             </li>
             <li class="list-group-item">
-              <span>Amount: {{transaction.destinationToken.symbol + ' ' + transaction.toValue}}</span>
+              <span>Amount: {{transaction.toValue}} {{transaction.destinationToken.symbol | uppercase}}</span>
             </li>
           </ul>
         </div>

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

@@ -7,7 +7,7 @@ import {
   Output,
 } from '@angular/core';
 import { Router } from '@angular/router';
-import { TransactionService } from '@app/_services';
+import { TokenService, TransactionService } from '@app/_services';
 import { copyToClipboard } from '@app/_helpers';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { strip0x } from '@src/assets/js/ethtx/dist/hex';
@@ -26,15 +26,19 @@ export class TransactionDetailsComponent implements OnInit {
   senderBloxbergLink: string;
   recipientBloxbergLink: string;
   traderBloxbergLink: string;
+  tokenName: string;
+  tokenSymbol: string;
 
   constructor(
     private router: Router,
     private transactionService: TransactionService,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    private tokenService: TokenService
   ) {}
 
   async ngOnInit(): Promise<void> {
     await this.transactionService.init();
+    await this.tokenService.init();
     if (this.transaction?.type === 'conversion') {
       this.traderBloxbergLink =
         'https://blockexplorer.bloxberg.org/address/' + this.transaction?.trader + '/transactions';
@@ -44,6 +48,12 @@ export class TransactionDetailsComponent implements OnInit {
       this.recipientBloxbergLink =
         'https://blockexplorer.bloxberg.org/address/' + this.transaction?.to + '/transactions';
     }
+    this.tokenService.load.subscribe(async (status) => {
+      if (status) {
+        this.tokenSymbol = await this.tokenService.getTokenSymbol();
+        this.tokenName = await this.tokenService.getTokenName();
+      }
+    });
   }
 
   async viewSender(): Promise<void> {

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

@@ -59,8 +59,8 @@
             <ng-container matColumnDef="value">
               <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
               <td mat-cell *matCellDef="let transaction">
-                <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}}</span>
+                <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
-                <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}}</span>
+                <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
               </td>
             </ng-container>
 

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

@@ -5,7 +5,7 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
-import { BlockSyncService, 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';
@@ -28,6 +28,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
   transaction: Transaction;
   transactionsType: string = 'all';
   transactionsTypes: Array<string>;
+  tokenSymbol: string;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -35,7 +36,8 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
   constructor(
     private blockSyncService: BlockSyncService,
     private transactionService: TransactionService,
-    private userService: UserService
+    private userService: UserService,
+    private tokenService: TokenService
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -46,6 +48,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
       this.transactions = transactions;
     });
     await this.blockSyncService.init();
+    await this.tokenService.init();
     await this.transactionService.init();
     await this.userService.init();
     await this.blockSyncService.blockSync();
@@ -53,6 +56,11 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
       .getTransactionTypes()
       .pipe(first())
       .subscribe((res) => (this.transactionsTypes = res));
+    this.tokenService.load.subscribe(async (status) => {
+      if (status) {
+        this.tokenSymbol = await this.tokenService.getTokenSymbol();
+      }
+    });
   }
 
   viewTransaction(transaction): void {

src/app/shared/_pipes/token-ratio.pipe.ts

@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({ name: 'tokenRatio' })
 export class TokenRatioPipe implements PipeTransform {
-  transform(value: any, ...args): any {
+  transform(value: any = 0, ...args): any {
     return Number(value) / Math.pow(10, 6);
   }
 }