Bugfix: Liquid asset issuance / circulating / burned amounts are missing decimal point

fixes #112

frontend/src/app/bitcoin.utils.ts

@@ -63,6 +63,68 @@ export function calcSegwitFeeGains(tx: Transaction) {
          };
 }
 
+// https://github.com/shesek/move-decimal-point
+export function moveDec(num: number, n: number) {
+  let frac, int, neg, ref;
+  if (n === 0) {
+    return num;
+  }
+  ref = ('' + num).split('.'), int = ref[0], frac = ref[1];
+  int || (int = '0');
+  frac || (frac = '0');
+  neg = (int[0] === '-' ? '-' : '');
+  if (neg) {
+    int = int.slice(1);
+  }
+  if (n > 0) {
+    if (n > frac.length) {
+      frac += zeros(n - frac.length);
+    }
+    int += frac.slice(0, n);
+    frac = frac.slice(n);
+  } else {
+    n = n * -1;
+    if (n > int.length) {
+      int = (zeros(n - int.length)) + int;
+    }
+    frac = int.slice(n * -1) + frac;
+    int = int.slice(0, n * -1);
+  }
+  while (int[0] === '0') {
+    int = int.slice(1);
+  }
+  while (frac[frac.length - 1] === '0') {
+    frac = frac.slice(0, -1);
+  }
+  return neg + (int || '0') + (frac.length ? '.' + frac : '');
+}
+
+function zeros(n) {
+  return new Array(n + 1).join('0');
+}
+
+// Formats a number for display. Treats the number as a string to avoid rounding errors.
+export const formatNumber = (s, precision = null) => {
+  let [ whole, dec ] = s.toString().split('.');
+
+  // divide numbers into groups of three separated with a thin space (U+202F, "NARROW NO-BREAK SPACE"),
+  // but only when there are more than a total of 5 non-decimal digits.
+  if (whole.length >= 5) {
+    whole = whole.replace(/\B(?=(\d{3})+(?!\d))/g, '\u202F');
+  }
+
+  if (precision != null && precision > 0) {
+    if (dec == null) {
+      dec = '0'.repeat(precision);
+    }
+    else if (dec.length < precision) {
+      dec += '0'.repeat(precision - dec.length);
+    }
+  }
+
+  return whole + (dec != null ? '.' + dec : '');
+};
+
 // Utilities for segwitFeeGains
 const witnessSize = (vin: Vin) => vin.witness.reduce((S, w) => S + (w.length / 2), 0);
 const scriptSigSize = (vin: Vin) => vin.scriptsig ? vin.scriptsig.length / 2 : 0;

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

@@ -41,27 +41,27 @@
             <tbody>
               <tr *ngIf="isNativeAsset">
                 <td>Pegged in</td>
-                <td>{{ asset.chain_stats.peg_in_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td>{{ formatAmount(asset.chain_stats.peg_in_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
               <tr *ngIf="isNativeAsset">
                 <td>Pegged out</td>
-                <td>{{ asset.chain_stats.peg_out_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td>{{ formatAmount(asset.chain_stats.peg_out_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
               <tr *ngIf="!isNativeAsset">
                 <td>Issued amount</td>
-                <td>{{ asset.chain_stats.issued_amount / 100000000| number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td>{{ formatAmount(asset.chain_stats.issued_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
               <tr>
                 <td>Burned amount</td>
-                <td>{{ asset.chain_stats.burned_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td>{{ formatAmount(asset.chain_stats.burned_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
               <tr *ngIf="!isNativeAsset">
                 <td>Circulating amount</td>
-                <td>{{ (asset.chain_stats.issued_amount - asset.chain_stats.burned_amount) / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td>{{ formatAmount(asset.chain_stats.issued_amount - asset.chain_stats.burned_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
               <tr *ngIf="isNativeAsset">
                 <td>Circulating amount</td>
-                <td>{{ (asset.chain_stats.peg_in_amount - asset.chain_stats.burned_amount - asset.chain_stats.peg_out_amount) / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
+                <td>{{ formatAmount(asset.chain_stats.peg_in_amount - asset.chain_stats.burned_amount - asset.chain_stats.peg_out_amount, assetContract[3]) | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
               </tr>
             </tbody>
           </table>

frontend/src/app/components/asset/asset.component.ts

@@ -11,6 +11,7 @@ import { of, merge, Subscription, combineLatest } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
 import { environment } from 'src/environments/environment';
 import { AssetsService } from 'src/app/services/assets.service';
+import { formatNumber, moveDec } from 'src/app/bitcoin.utils';
 
 @Component({
   selector: 'app-asset',
@@ -189,6 +190,10 @@ export class AssetComponent implements OnInit, OnDestroy {
     this.totalConfirmedTxCount = this.asset.chain_stats.tx_count;
   }
 
+  formatAmount(value: number, precision = 0): number | string {
+    return moveDec(value, -precision);
+  }
+
   ngOnDestroy() {
     this.mainSubscription.unsubscribe();
     this.websocketService.stopTrackingAsset();