Liquid dashboard assets updates

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;
-  height: 28px;
+  width: 40px;
+  height: 40px;
 }
 
 .asset-title {
@@ -298,11 +298,16 @@
 }
 
 .asset-icon {
-  width: 54px;
-  height: 52px;
+  width: 65px;
+  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$