Display asset circulating amount more nicely fixing overflow

fixes #1264

frontend/src/app/app.module.ts

@@ -73,6 +73,7 @@ import { MiningDashboardComponent } from './components/mining-dashboard/mining-d
 import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component';
 import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
 import { MiningStartComponent } from './components/mining-start/mining-start.component';
+import { AmountShortenerPipe } from './shared/pipes/amount-shortener.pipe';
 
 @NgModule({
   declarations: [
@@ -128,6 +129,7 @@ import { MiningStartComponent } from './components/mining-start/mining-start.com
     DifficultyChartComponent,
     HashrateChartComponent,
     MiningStartComponent,
+    AmountShortenerPipe,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

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

@@ -1,3 +1,6 @@
 <ng-container *ngIf="(circulatingAmount$ | async) as circulating">
-  {{ circulating.amount }} <span class="ticker">{{ circulating.ticker }}</span>
+  <ng-template [ngIf]="circulating.amount === -1" [ngIfElse]="default" i18n="shared.confidential">Confidential</ng-template>
+  <ng-template #default>
+    <span class="d-inline-block d-md-none">{{ circulating.amount | amountShortener }}</span>
+    <span class="d-none d-md-inline-block">{{ circulating.amount | number: '1.2-2' }}</span>&nbsp;<span class="ticker">{{ circulating.ticker }}</span></ng-template>
 </ng-container>

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<{ amount: string, ticker: string}>;
+  circulatingAmount$: Observable<{ amount: number, ticker: string}>;
 
   constructor(
     private electrsApiService: ElectrsApiService,
@@ -35,20 +35,18 @@ export class AssetCirculationComponent implements OnInit {
         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'),
+              amount: this.formatAmount(asset.chain_stats.peg_in_amount - asset.chain_stats.burned_amount - asset.chain_stats.peg_out_amount, assetData[3]),
               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'),
+              amount: this.formatAmount(asset.chain_stats.issued_amount - asset.chain_stats.burned_amount, assetData[3]),
               ticker: assetData[1]
             };
           }
         } else {
           return {
-            amount: $localize`:@@shared.confidential:Confidential`,
+            amount: -1,
             ticker: '',
           };
         }

frontend/src/app/shared/pipes/amount-shortener.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'amountShortener'
+})
+export class AmountShortenerPipe implements PipeTransform {
+  transform(num: number, ...args: number[]): unknown {
+    const digits = args[0] || 1;
+    const lookup = [
+      { value: 1, symbol: '' },
+      { value: 1e3, symbol: 'k' },
+      { value: 1e6, symbol: 'M' },
+      { value: 1e9, symbol: 'G' },
+      { value: 1e12, symbol: 'T' },
+      { value: 1e15, symbol: 'P' },
+      { value: 1e18, symbol: 'E' }
+    ];
+    const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+    var item = lookup.slice().reverse().find((item) => num >= item.value);
+    return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0';
+  }
+}