Display top featured assets on Liquid dashboard

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

@@ -47,6 +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-container *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
                 <div class="mempool-graph">
                   <app-mempool-graph
@@ -58,6 +59,24 @@
                   ></app-mempool-graph>
                 </div>
               </ng-container>
+            </ng-template>
+            <ng-template #liquidAssets>
+              <table class="table table-borderless table-striped asset-table" *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>
+                      <span class="asset-ticker"> {{ group.ticker }}</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </ng-template>
           </div>
         </div>
       </div>
@@ -158,6 +177,21 @@
 
 </div>
 
+<ng-template #loadingAssetsTable>
+  <table class="table table-borderless table-striped asset-table">
+    <tbody>
+      <tr *ngFor="let i of [1,2,3,4,5]">
+        <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>
+      </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,26 @@
   margin-right: -2px;
   font-size: 10px;
 }
+
+.assetIcon {
+  width: 28px;
+  height: 28px;
+}
+
+.asset-title {
+  text-align: left;
+}
+
+.asset-ticker {
+  color: grey;
+}
+
+.asset-icon {
+  width: 54px;
+  height: 52px;
+}
+
+.asset-table {
+  width: calc(100% - 20px);
+  margin-left: 1.25rem;
+}

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
 import { combineLatest, merge, Observable, of, timer } from 'rxjs';
-import { filter, map, scan, share, switchMap, tap } from 'rxjs/operators';
+import { filter, map, scan, share, switchMap, take, tap } from 'rxjs/operators';
 import { BlockExtended, OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
@@ -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(
+        take(5),
+        map((featured) => {
+          for (const feature of featured) {
+            if (feature.assets) {
+              feature.asset = feature.assets[0];
+            }
+          }
+          return featured;
+        })
+      );
+
     this.blocks$ = this.stateService.blocks$
       .pipe(
         tap(([block]) => {