Liquid dashboard assets updates

frontend/src/app/app.module.ts

@@ -67,6 +67,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';
 
 @NgModule({
   declarations: [
@@ -116,6 +117,7 @@ import { AssetGroupComponent } from './components/assets/asset-group/asset-group
     AssetsNavComponent,
     AssetsFeaturedComponent,
     AssetGroupComponent,
+    AssetCirculationComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

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 circulatingAmount">
+  {{ circulatingAmount }}
+</ng-container>

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

@@ -0,0 +1,53 @@
+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<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 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');
+          } else {
+            return formatNumber(this.formatAmount(asset.chain_stats.issued_amount
+              - asset.chain_stats.burned_amount, assetData[3]), this.locale, '1.2-2');
+          }
+        } else {
+          return $localize`:@@shared.confidential:Confidential`;
+        }
+      }),
+    );
+  }
+
+  formatAmount(value: number, precision = 0): number {
+    return parseFloat(moveDec(value, -precision));
+  }
+}

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

@@ -47,7 +47,7 @@
               <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
               <hr>
             </div>
-            <ng-template [ngIf]="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'" [ngIfElse]="liquidAssets">
+            <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidAssets">
               <ng-container *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
                 <div class="mempool-graph">
                   <app-mempool-graph
@@ -71,8 +71,9 @@
                     </td>
                     <td class="asset-title">
                       <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">{{ group.name }}</a>
-                      <span class="asset-ticker"> {{ group.ticker }}</span>
                     </td>
+                    <td class="asset-ticker d-none d-md-table-cell">{{ group.ticker }}</td>
+                    <td class="circulating-amount"><app-asset-circulation [assetId]="group.asset"></app-asset-circulation></td>
                   </tr>
                 </tbody>
               </table>
@@ -180,13 +181,19 @@
 <ng-template #loadingAssetsTable>
   <table class="table table-borderless table-striped asset-table">
     <tbody>
-      <tr *ngFor="let i of [1,2,3,4,5]">
+      <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>

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

@@ -285,8 +285,8 @@
 }
 
 .assetIcon {
-  width: 28px;
+  width: 40px;
-  height: 28px;
+  height: 40px;
 }
 
 .asset-title {
@@ -298,11 +298,16 @@
 }
 
 .asset-icon {
-  width: 54px;
+  width: 65px;
-  height: 52px;
+  height: 65px;
 }
 
 .asset-table {
   width: calc(100% - 20px);
   margin-left: 1.25rem;
 }
+
+.circulating-amount {
+  text-align: right;
+  width: 100%;
+}

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

@@ -127,15 +127,15 @@ export class DashboardComponent implements OnInit {
 
     this.featuredAssets$ = this.apiService.listFeaturedAssets$()
       .pipe(
-        take(5),
         map((featured) => {
+          featured = featured.slice(0, 4);
           for (const feature of featured) {
             if (feature.assets) {
               feature.asset = feature.assets[0];
             }
           }
           return featured;
-        })
+        }),
       );
 
     this.blocks$ = this.stateService.blocks$