From 3e6dba2d58589cde03a9a84eca8e6e2fd7a25069 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 21 Feb 2022 22:33:03 +0400
Subject: [PATCH] Display asset circulating amount more nicely fixing overflow

fixes #1264
---
 frontend/src/app/app.module.ts                |  2 ++
 .../asset-circulation.component.html          |  5 ++++-
 .../asset-circulation.component.ts            | 10 ++++-----
 .../app/shared/pipes/amount-shortener.pipe.ts | 22 +++++++++++++++++++
 4 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/app/shared/pipes/amount-shortener.pipe.ts

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 9e8fea464..e7fe30c1d 100644
--- a/frontend/src/app/app.module.ts
+++ b/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' }),
diff --git a/frontend/src/app/components/asset-circulation/asset-circulation.component.html b/frontend/src/app/components/asset-circulation/asset-circulation.component.html
index 1c6337721..98d672c55 100644
--- a/frontend/src/app/components/asset-circulation/asset-circulation.component.html
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/app/components/asset-circulation/asset-circulation.component.ts b/frontend/src/app/components/asset-circulation/asset-circulation.component.ts
index d1a56abb0..4d65417e6 100644
--- a/frontend/src/app/components/asset-circulation/asset-circulation.component.ts
+++ b/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: '',
           };
         }
diff --git a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts
new file mode 100644
index 000000000..49b452cd9
--- /dev/null
+++ b/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';
+  }
+}