Moving ticker to circulating amount

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

@@ -1,3 +1,3 @@
-<ng-container *ngIf="(circulatingAmount$ | async) as circulatingAmount">
+<ng-container *ngIf="(circulatingAmount$ | async) as circulating">
-  {{ circulatingAmount }}
+  {{ 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

@@ -16,7 +16,7 @@ import { environment } from 'src/environments/environment';
 export class AssetCirculationComponent implements OnInit {
   @Input() assetId: string;
 
-  circulatingAmount$: Observable<string>;
+  circulatingAmount$: Observable<{ amount: string, ticker: string}>;
 
   constructor(
     private electrsApiService: ElectrsApiService,
@@ -34,14 +34,23 @@ export class AssetCirculationComponent implements OnInit {
         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
+            return {
-              - asset.chain_stats.peg_out_amount, assetData[3]), this.locale, '1.2-2');
+              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 formatNumber(this.formatAmount(asset.chain_stats.issued_amount
+            return {
-              - asset.chain_stats.burned_amount, assetData[3]), this.locale, '1.2-2');
+              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 $localize`:@@shared.confidential:Confidential`;
+          return {
+            amount: $localize`:@@shared.confidential:Confidential`,
+            ticker: '',
+          };
         }
       }),
     );

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

@@ -72,7 +72,6 @@
                     <td class="asset-title">
                       <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">{{ group.name }}</a>
                     </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>

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

@@ -293,10 +293,6 @@
   text-align: left;
 }
 
-.asset-ticker {
-  color: grey;
-}
-
 .asset-icon {
   width: 65px;
   height: 65px;

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 { combineLatest, merge, Observable, of } from 'rxjs';
-import { filter, map, scan, share, switchMap, take, tap } from 'rxjs/operators';
+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';
 import { ApiService } from '../services/api.service';
@@ -128,13 +128,13 @@ export class DashboardComponent implements OnInit {
     this.featuredAssets$ = this.apiService.listFeaturedAssets$()
       .pipe(
         map((featured) => {
-          featured = featured.slice(0, 4);
+          const newArray = [];
           for (const feature of featured) {
-            if (feature.assets) {
+            if (feature.ticker !== 'L-BTC' && feature.asset) {
-              feature.asset = feature.assets[0];
+              newArray.push(feature);
             }
           }
-          return featured;
+          return newArray.slice(0, 4);
         }),
       );