Refactor accelerator dashboard

frontend/src/app/shared/components/btc/btc.component.html

@@ -0,0 +1,8 @@
+<span *ngIf="valueOverride !== undefined">{{ valueOverride }}</span>
+<span *ngIf="valueOverride === undefined">&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ value | number }} </span>
+<span class="symbol">
+  <ng-template [ngIf]="network === 'liquid'">L-</ng-template>
+  <ng-template [ngIf]="network === 'liquidtestnet'">tL-</ng-template>
+  <ng-template [ngIf]="network === 'testnet'">t-</ng-template>
+  <ng-template [ngIf]="network === 'signet'">s-</ng-template>{{ unit }}
+</span>

frontend/src/app/shared/components/btc/btc.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { StateService } from '../../../services/state.service';
+
+@Component({
+  selector: 'app-btc',
+  templateUrl: './btc.component.html',
+  styleUrls: ['./btc.component.scss']
+})
+export class BtcComponent implements OnInit, OnChanges {
+  @Input() satoshis: number;
+  @Input() addPlus = false;
+  @Input() valueOverride: string | undefined = undefined;
+
+  value: number;
+  unit: string;
+
+  network = '';
+  stateSubscription: Subscription;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit() {
+    this.stateSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
+  }
+
+  ngOnDestroy() {
+    if (this.stateSubscription) {
+      this.stateSubscription.unsubscribe();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.satoshis >= 1_000_000) {
+      this.value = (this.satoshis / 100_000_000);
+      this.unit = 'BTC'
+    } else {
+      this.value = Math.round(this.satoshis);
+      this.unit = 'sats'
+    }
+  }
+}