Calculator visual results

frontend/src/app/shared/pipes/bitcoinsatoshis.pipe.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'bitcoinsatoshis'
+})
+export class BitcoinsatoshisPipe implements PipeTransform {
+
+  constructor(private sanitizer: DomSanitizer) { }
+
+  transform(value: string): SafeHtml {
+    const newValue = this.insertSpaces(parseFloat(value || '0').toFixed(8));
+    const position = (newValue || '0').search(/[1-9]/);
+
+    const firstPart = newValue.slice(0, position);
+    const secondPart = newValue.slice(position);
+
+    return this.sanitizer.bypassSecurityTrustHtml(
+      `<span class="text-secondary">${firstPart}</span>${secondPart}`
+    );
+  }
+
+  insertSpaces(str: string): string {
+    const length = str.length;
+    return str.slice(0, length - 6) + ' ' + str.slice(length - 6, length - 3) + ' ' + str.slice(length - 3);
+  }
+
+}

frontend/src/app/shared/shared.module.ts

@@ -98,6 +98,7 @@ import { ClockchainComponent } from '../components/clockchain/clockchain.compone
 import { ClockFaceComponent } from '../components/clock-face/clock-face.component';
 import { ClockComponent } from '../components/clock/clock.component';
 import { CalculatorComponent } from '../components/calculator/calculator.component';
+import { BitcoinsatoshisPipe } from '../shared/pipes/bitcoinsatoshis.pipe';
 
 import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-directives/weight-directives';
 
@@ -190,9 +191,11 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     MempoolBlockOverviewComponent,
     ClockchainComponent,
     ClockComponent,
+    CalculatorComponent,
     ClockFaceComponent,
     OnlyVsizeDirective,
-    OnlyWeightDirective
+    OnlyWeightDirective,
+    BitcoinsatoshisPipe
   ],
   imports: [
     CommonModule,