Merge pull request #1245 from mempool/simon/dashboard-assets

Display top featured assets on Liquid dashboard

frontend/src/app/app.module.ts

@@ -68,6 +68,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component';
 import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component';
+import { AssetCirculationComponent } from './components/asset-circulation/asset-circulation.component';
 import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component';
 import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component';
 
@@ -120,6 +121,7 @@ import { DifficultyChartComponent } from './components/difficulty-chart/difficul
     AssetsNavComponent,
     AssetsFeaturedComponent,
     AssetGroupComponent,
+    AssetCirculationComponent,
     MiningDashboardComponent,
     DifficultyChartComponent,
   ],

frontend/src/app/bitcoin.utils.ts

@@ -69,7 +69,7 @@ export function calcSegwitFeeGains(tx: Transaction) {
 export function moveDec(num: number, n: number) {
   let frac, int, neg, ref;
   if (n === 0) {
-    return num;
+    return num.toString();
   }
   ref = ('' + num).split('.'), int = ref[0], frac = ref[1];
   int || (int = '0');

frontend/src/app/components/asset-circulation/asset-circulation.component.html

@@ -0,0 +1,3 @@
+<ng-container *ngIf="(circulatingAmount$ | async) as circulating">
+  {{ circulating.amount }} <span class="ticker">{{ circulating.ticker }}</span>
+</ng-container>

frontend/src/app/components/asset-circulation/asset-circulation.component.scss

@@ -0,0 +1,3 @@
+.ticker {
+  color: grey;
+}

frontend/src/app/components/asset-circulation/asset-circulation.component.ts

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { moveDec } from 'src/app/bitcoin.utils';
+import { AssetsService } from 'src/app/services/assets.service';
+import { ElectrsApiService } from 'src/app/services/electrs-api.service';
+import { formatNumber } from '@angular/common';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-asset-circulation',
+  templateUrl: './asset-circulation.component.html',
+  styleUrls: ['./asset-circulation.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AssetCirculationComponent implements OnInit {
+  @Input() assetId: string;
+
+  circulatingAmount$: Observable<{ amount: string, ticker: string}>;
+
+  constructor(
+    private electrsApiService: ElectrsApiService,
+    private assetsService: AssetsService,
+    @Inject(LOCALE_ID) private locale: string,
+  ) { }
+
+  ngOnInit(): void {
+    this.circulatingAmount$ = combineLatest([
+      this.electrsApiService.getAsset$(this.assetId),
+      this.assetsService.getAssetsMinimalJson$]
+    )
+    .pipe(
+      map(([asset, assetsMinimal]) => {
+        const assetData = assetsMinimal[asset.asset_id];
+        if (!asset.chain_stats.has_blinded_issuances) {
+          if (asset.asset_id === environment.nativeAssetId) {
+            return {
+              amount: formatNumber(this.formatAmount(asset.chain_stats.peg_in_amount - asset.chain_stats.burned_amount
+              - asset.chain_stats.peg_out_amount, assetData[3]), this.locale, '1.2-2'),
+              ticker: assetData[1]
+            };
+          } else {
+            return {
+              amount: formatNumber(this.formatAmount(asset.chain_stats.issued_amount
+              - asset.chain_stats.burned_amount, assetData[3]), this.locale, '1.2-2'),
+              ticker: assetData[1]
+            };
+          }
+        } else {
+          return {
+            amount: $localize`:@@shared.confidential:Confidential`,
+            ticker: '',
+          };
+        }
+      }),
+    );
+  }
+
+  formatAmount(value: number, precision = 0): number {
+    return parseFloat(moveDec(value, -precision));
+  }
+}

frontend/src/app/dashboard/dashboard.component.html

@@ -16,20 +16,21 @@
       <div class="col">
         <div class="card">
           <div class="card-body">
-            <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
+            <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
           </div>
         </div>
       </div>
       <div class="col">
         <div class="card">
           <div class="card-body">
-            <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
+            <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? mempoolTable : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
           </div>
         </div>
       </div>
     </ng-template>
     <ng-template #expanded>
-      <div class="col card-wrapper" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
+      <ng-container *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
+        <div class="col card-wrapper">
           <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
           <div class="card">
             <div class="card-body">
@@ -37,16 +38,18 @@
             </div>
           </div>
         </div>
-      <div class="col" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
+        <div class="col">
           <app-difficulty></app-difficulty>
         </div>
+      </ng-container>
       <div class="col">
         <div class="card graph-card">
           <div class="card-body pl-0">
             <div style="padding-left: 1.25rem;">
-              <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
+              <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
               <hr>
             </div>
+            <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
               <ng-container *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
                 <div class="mempool-graph">
                   <app-mempool-graph
@@ -58,16 +61,34 @@
                   ></app-mempool-graph>
                 </div>
               </ng-container>
+            </ng-template>
+            <ng-template #liquidPegs>
+              <app-lbtc-pegs-graph [data]="liquidPegsMonth$ | async"></app-lbtc-pegs-graph>
+            </ng-template>
           </div>
         </div>
       </div>
       <div class="col">
         <div class="card graph-card">
           <div class="card-body">
-            <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
+            <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? mempoolTable : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
             <hr>
             <div class="mempool-graph" *ngIf="stateService.network === 'liquid'; else mempoolGraph">
-              <app-lbtc-pegs-graph [data]="liquidPegsMonth$ | async"></app-lbtc-pegs-graph>
+              <table class="table table-borderless table-striped" *ngIf="(featuredAssets$ | async) as featuredAssets else loadingAssetsTable">
+                <tbody>
+                  <tr *ngFor="let group of featuredAssets">
+                    <td class="asset-icon">
+                      <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">
+                        <img class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + group.asset + '/icon'">
+                      </a>
+                    </td>
+                    <td class="asset-title">
+                      <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">{{ group.name }}</a>
+                    </td>
+                    <td class="circulating-amount"><app-asset-circulation [assetId]="group.asset"></app-asset-circulation></td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
             <ng-template #mempoolGraph>
               <div class="mempool-graph" *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
@@ -158,6 +179,27 @@
 
 </div>
 
+<ng-template #loadingAssetsTable>
+  <table class="table table-borderless table-striped asset-table">
+    <tbody>
+      <tr *ngFor="let i of [1,2,3,4]">
+        <td class="asset-icon">
+          <div class="skeleton-loader skeleton-loader-transactions"></div>
+        </td>
+        <td class="asset-title">
+          <div class="skeleton-loader skeleton-loader-transactions"></div>
+        </td>
+        <td class="asset-title d-none d-md-table-cell">
+          <div class="skeleton-loader skeleton-loader-transactions"></div>
+        </td>
+        <td class="asset-title">
+          <div class="skeleton-loader skeleton-loader-transactions"></div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</ng-template>
+
 <ng-template #loadingTransactions>
   <div class="skeleton-loader skeleton-loader-transactions"></div>
 </ng-template>

frontend/src/app/dashboard/dashboard.component.scss

@@ -283,3 +283,25 @@
   margin-right: -2px;
   font-size: 10px;
 }
+
+.assetIcon {
+  width: 40px;
+  height: 40px;
+}
+
+.asset-title {
+  text-align: left;
+  vertical-align: middle;
+}
+
+.asset-icon {
+  width: 65px;
+  height: 65px;
+  vertical-align: middle;
+}
+
+.circulating-amount {
+  text-align: right;
+  width: 100%;
+  vertical-align: middle;
+}

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
-import { combineLatest, merge, Observable, of, timer } from 'rxjs';
+import { combineLatest, merge, Observable, of } from 'rxjs';
 import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
@@ -34,6 +34,7 @@ interface MempoolStatsData {
 })
 export class DashboardComponent implements OnInit {
   collapseLevel: string;
+  featuredAssets$: Observable<any>;
   network$: Observable<string>;
   mempoolBlocksData$: Observable<MempoolBlocksData>;
   mempoolInfoData$: Observable<MempoolInfoData>;
@@ -124,6 +125,19 @@ export class DashboardComponent implements OnInit {
         })
       );
 
+    this.featuredAssets$ = this.apiService.listFeaturedAssets$()
+      .pipe(
+        map((featured) => {
+          const newArray = [];
+          for (const feature of featured) {
+            if (feature.ticker !== 'L-BTC' && feature.asset) {
+              newArray.push(feature);
+            }
+          }
+          return newArray.slice(0, 4);
+        }),
+      );
+
     this.blocks$ = this.stateService.blocks$
       .pipe(
         tap(([block]) => {