Added fiat balance to address and made fiat balance into a component.

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

@@ -23,7 +23,7 @@
               </tr>
               <tr>
                 <td>Balance</td>
-                <td>{{ (receieved - sent) / 100000000 | number: '1.2-8' }} BTC</td>
+                <td>{{ (receieved - sent) / 100000000 | number: '1.2-8' }} BTC (<app-fiat [value]="receieved - sent"></app-fiat>)</td>
               </tr>
             </tbody>
           </table>

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

@@ -49,6 +49,7 @@ export class AddressComponent implements OnInit, OnDestroy {
         this.error = undefined;
         this.isLoadingAddress = true;
         this.loadedConfirmedTxCount = 0;
+        this.address = null;
         this.isLoadingTransactions = true;
         this.transactions = null;
         document.body.scrollTo(0, 0);

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

@@ -47,7 +47,7 @@
               </tr>
               <tr>
                 <td>Block subsidy</td>
-                <td>{{ blockSubsidy | number: '1.2-2' }} BTC <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * blockSubsidy | currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
+                <td>{{ blockSubsidy | number: '1.2-2' }} BTC <span *ngIf="conversions">(<app-fiat [value]="blockSubsidy"></app-fiat>)</span></td>
               </tr>
               <tr>
                 <td>Status</td>

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

@@ -22,7 +22,6 @@ export class BlockComponent implements OnInit {
   isLoadingTransactions = true;
   error: any;
   blockSubsidy = 50;
-  conversions: any;
 
   constructor(
     private route: ActivatedRoute,
@@ -69,12 +68,6 @@ export class BlockComponent implements OnInit {
 
     this.stateService.blocks$
       .subscribe((block) => this.latestBlock = block);
-
-    this.stateService.conversions$
-      .subscribe((conversions) => {
-        this.conversions = conversions;
-      });
-
   }
 
   setBlockSubsidy() {

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

@@ -32,7 +32,7 @@
             <ng-template [ngIf]="tx.fee">
               <tr>
                 <td>Fees</td>
-                <td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
+                <td>{{ tx.fee | number }} sats (<app-fiat [value]="tx.fee"></app-fiat>)</td>
               </tr>
               <tr>
                 <td>Fees per vByte</td>
@@ -67,7 +67,7 @@
             </ng-template>
             <tr>
               <td>Fees</td>
-              <td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
+              <td>{{ tx.fee | number }} sats (<app-fiat [value]="tx.fee"></app-fiat>)</td>
             </tr>
             <tr>
               <td>Fees per vByte</td>

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

@@ -18,7 +18,6 @@ export class TransactionComponent implements OnInit, OnDestroy {
   tx: Transaction;
   txId: string;
   isLoadingTx = true;
-  conversions: any;
   error: any = undefined;
   latestBlock: Block;
   transactionTime = -1;
@@ -66,9 +65,6 @@ export class TransactionComponent implements OnInit, OnDestroy {
       this.isLoadingTx = false;
     });
 
-    this.stateService.conversions$
-      .subscribe((conversions) => this.conversions = conversions);
-
     this.stateService.blocks$
       .subscribe((block) => this.latestBlock = block);