account-details.component.html

<div class="page-layout blank simple" fusePerfectScrollbar>

  <!-- HEADER -->
  <div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
    fxLayoutAlign.gt-xs="space-between center">

    <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
      <div fxLayout="row" fxLayoutAlign="start center">
        <a [routerLink]="['/dashboard']"><mat-icon class="secondary-text s-18">home</mat-icon></a>
        <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
        <a [routerLink]="['/accounts']" class="secondary-text">{{ 'accounts' | i18n }}</a>
        <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
        <span class="secondary-text">{{ account.accountRS }}</span>
      </div>
      <div class="h1 mt-16">
        <h2>{{ account.accountRS }}</h2>
      </div>
    </div>
  </div>
  <!-- / HEADER -->

  <div class=" p-24">

    <div class="row account-details">
      <div class="qr">
        <img [src]="accountQRCodeURL | async | addNodeUrl" />
      </div>
      <div class="details">
        <h2>{{ account.name || account.accountRS }}</h2>
        <h3>{{ account.account }}</h3>
        <h4>{{ account.balanceNQT | convertNQTString | number: '1.0-6': this.language }} BURST</h4>
      </div>
    </div>

    <mat-tab-group>
      <mat-tab label="{{ 'transactions' | i18n }}">
        <app-transaction-table [dataSource]="dataSource" [account]="account"></app-transaction-table>
      </mat-tab>
      <mat-tab label="{{ 'assets' | i18n }}">
        <table>
          <tr>
            <th>{{ 'asset_name' | i18n }}</th>
            <th>{{ 'quantity' | i18n }} (NQT)</th>
          </tr>
          <tr *ngFor="let row of account['assetBalances']">
            <td>{{row.asset}}</td>
            <td>{{row.balanceQNT || row.unconfirmedBalanceQNT}}</td>
          </tr>
        </table>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>