Merge branch 'master' into simon/alias-search-syntax-error

backend/src/api/mining/mining-routes.ts

@@ -1,13 +1,13 @@
 import { Application, Request, Response } from 'express';
 import config from "../../config";
 import logger from '../../logger';
-import audits from '../audit';
 import BlocksAuditsRepository from '../../repositories/BlocksAuditsRepository';
 import BlocksRepository from '../../repositories/BlocksRepository';
 import DifficultyAdjustmentsRepository from '../../repositories/DifficultyAdjustmentsRepository';
 import HashratesRepository from '../../repositories/HashratesRepository';
 import bitcoinClient from '../bitcoin/bitcoin-client';
 import mining from "./mining";
+import PricesRepository from '../../repositories/PricesRepository';
 
 class MiningRoutes {
   public initRoutes(app: Application) {
@@ -32,9 +32,18 @@ class MiningRoutes {
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/audit/score/:hash', this.$getBlockAuditScore)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/audit/:hash', this.$getBlockAudit)
       .get(config.MEMPOOL.API_URL_PREFIX + 'mining/blocks/timestamp/:timestamp', this.$getHeightFromTimestamp)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'historical-price', this.$getHistoricalPrice)
     ;
   }
 
+  private async $getHistoricalPrice(req: Request, res: Response): Promise<void> {
+    try {
+      res.status(200).send(await PricesRepository.$getHistoricalPrice());
+    } catch (e) {
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
+  }
+
   private async $getPool(req: Request, res: Response): Promise<void> {
     try {
       const stats = await mining.$getPoolStat(req.params.slug);

backend/src/repositories/PricesRepository.ts

@@ -3,6 +3,31 @@ import logger from '../logger';
 import { IConversionRates } from '../mempool.interfaces';
 import priceUpdater from '../tasks/price-updater';
 
+export interface ApiPrice {
+  time?: number,
+  USD: number,
+  EUR: number,
+  GBP: number,
+  CAD: number,
+  CHF: number,
+  AUD: number,
+  JPY: number,
+}
+
+export interface ExchangeRates {
+  USDEUR: number,
+  USDGBP: number,
+  USDCAD: number,
+  USDCHF: number,
+  USDAUD: number,
+  USDJPY: number,
+}
+
+export interface Conversion {
+  prices: ApiPrice[],
+  exchangeRates: ExchangeRates;
+}
+
 class PricesRepository {
   public async $savePrices(time: number, prices: IConversionRates): Promise<void> {
     if (prices.USD === 0) {
@@ -60,6 +85,34 @@ class PricesRepository {
     }
     return rates[0];
   }
+
+  public async $getHistoricalPrice(): Promise<Conversion | null> {
+    try {
+      const [rates]: any[] = await DB.query(`SELECT *, UNIX_TIMESTAMP(time) as time FROM prices ORDER BY time DESC`);
+      if (!rates) {
+        throw Error(`Cannot get average historical price from the database`);
+      }
+
+      // Compute fiat exchange rates
+      const latestPrice: ApiPrice = rates[0];
+      const exchangeRates: ExchangeRates = {
+        USDEUR: Math.round(latestPrice.EUR / latestPrice.USD * 100) / 100,
+        USDGBP: Math.round(latestPrice.GBP / latestPrice.USD * 100) / 100,
+        USDCAD: Math.round(latestPrice.CAD / latestPrice.USD * 100) / 100,
+        USDCHF: Math.round(latestPrice.CHF / latestPrice.USD * 100) / 100,
+        USDAUD: Math.round(latestPrice.AUD / latestPrice.USD * 100) / 100,
+        USDJPY: Math.round(latestPrice.JPY / latestPrice.USD * 100) / 100,
+      };
+
+      return {
+        prices: rates,
+        exchangeRates: exchangeRates
+      };
+    } catch (e) {
+      logger.err(`Cannot fetch averaged historical prices from the db. Reason ${e instanceof Error ? e.message : e}`);
+      return null;
+    }
+  }
 }
 
 export default new PricesRepository();

frontend/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { AppComponent } from './components/app/app.component';
 import { ElectrsApiService } from './services/electrs-api.service';
 import { StateService } from './services/state.service';
 import { CacheService } from './services/cache.service';
+import { PriceService } from './services/price.service';
 import { EnterpriseService } from './services/enterprise.service';
 import { WebsocketService } from './services/websocket.service';
 import { AudioService } from './services/audio.service';
@@ -26,6 +27,7 @@ const providers = [
   ElectrsApiService,
   StateService,
   CacheService,
+  PriceService,
   WebsocketService,
   AudioService,
   SeoService,

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

@@ -1,6 +1,18 @@
 <ng-container *ngIf="!noFiat && (viewFiat$ | async) && (conversions$ | async) as conversions; else viewFiatVin">
+  <span class="fiat" *ngIf="blockConversion; else noblockconversion">
+    {{ addPlus && satoshis >= 0 ? '+' : '' }}
+    {{
+      (
+        (blockConversion.price[currency] > 0 ? blockConversion.price[currency] : null) ??
+        (blockConversion.price['USD'] * blockConversion.exchangeRates['USD' + currency]) ?? 0
+      ) * satoshis / 100000000 | fiatCurrency : digitsInfo : currency
+    }}
+  </span>
+  <ng-template #noblockconversion>
     <span class="fiat">{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ (conversions ? conversions[currency] : 0) * satoshis / 100000000 | fiatCurrency : digitsInfo : currency }}</span>
+  </ng-template>
 </ng-container>
+
   <ng-template #viewFiatVin>
   <ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && (satoshis === undefined || satoshis === null)" [ngIfElse]="default">
     <span i18n="shared.confidential">Confidential</span>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit, OnDestroy, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { StateService } from '../../services/state.service';
 import { Observable, Subscription } from 'rxjs';
+import { Price } from 'src/app/services/price.service';
 
 @Component({
   selector: 'app-amount',
@@ -21,6 +22,7 @@ export class AmountComponent implements OnInit, OnDestroy {
   @Input() digitsInfo = '1.8-8';
   @Input() noFiat = false;
   @Input() addPlus = false;
+  @Input() blockConversion: Price;
 
   constructor(
     private stateService: StateService,

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html

@@ -10,7 +10,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" formControlName="dateSpan"> 24h
         </label>

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss

@@ -78,3 +78,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/block-fees-graph/block-fees-graph.component.html

@@ -10,7 +10,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
           <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]" formControlName="dateSpan"> 1M
         </label>

frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss

@@ -78,3 +78,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts

@@ -4,9 +4,9 @@ import { Observable, Subscription } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
-import { formatCurrency, formatNumber, getCurrencySymbol } from '@angular/common';
+import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../shared/graphs.utils';
+import { download, formatterXAxis } from '../../shared/graphs.utils';
 import { StateService } from '../../services/state.service';
 import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
@@ -92,6 +92,7 @@ export class BlockFeesGraphComponent implements OnInit {
       .pipe(
         startWith(this.radioGroupForm.controls.dateSpan.value),
         switchMap((timespan) => {
+          this.isLoading = true;
           this.storageService.setValue('miningWindowPreference', timespan);
           this.timespan = timespan;
           this.isLoading = true;

frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html

@@ -10,7 +10,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 24h
         </label>

frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss

@@ -78,3 +78,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html

@@ -11,7 +11,7 @@
     </div>  
   
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
           <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> 1M
         </label>
@@ -31,7 +31,7 @@
           <input type="radio" [value]="'3y'" fragment="3y" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> 3Y
         </label>
         <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === 'all'">
-          <input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]"> ALL
+          <input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]" formControlName="dateSpan"> ALL
         </label>
       </div>
     </form>

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss

@@ -78,3 +78,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts

@@ -80,7 +80,7 @@ export class BlockRewardsGraphComponent implements OnInit {
     this.route
       .fragment
       .subscribe((fragment) => {
-        if (['3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
+        if (['1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
           this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
         }
       });

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html

@@ -9,7 +9,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-sizes-weights' | relativeUrl]" formControlName="dateSpan"> 24h
         </label>

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss

@@ -78,3 +78,8 @@
     }
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

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

@@ -124,7 +124,13 @@
       </tr>
       <tr *ngIf="block?.extras?.medianFee != undefined">
         <td class="td-width" i18n="block.median-fee">Median fee</td>
-        <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [value]="block?.extras?.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
+        <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
+          <span class="fiat">
+            <app-fiat [blockConversion]="blockConversion" [value]="block?.extras?.medianFee * 140" digitsInfo="1.2-2"
+              i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes"
+              placement="bottom"></app-fiat>
+          </span>
+        </td>
       </tr>
       <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
         <tr>
@@ -132,13 +138,13 @@
           <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
             <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
             <span class="fiat">
-              <app-fiat [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
+              <app-fiat [blockConversion]="blockConversion" [value]="block.extras.totalFees" digitsInfo="1.0-0"></app-fiat>
             </span>
           </td>
           <ng-template #liquidTotalFees>
             <td>
               <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>&nbsp; <app-fiat
-                [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
+              [blockConversion]="blockConversion" [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>
             </td>
           </ng-template>
         </tr>
@@ -147,7 +153,7 @@
           <td>
             <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
             <span class="fiat">
-              <app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
+              <app-fiat [blockConversion]="blockConversion" [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>
             </span>
           </td>
         </tr>

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

@@ -13,6 +13,7 @@ import { BlockAudit, BlockExtended, TransactionStripped } from '../../interfaces
 import { ApiService } from '../../services/api.service';
 import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
 import { detectWebGL } from '../../shared/graphs.utils';
+import { PriceService, Price } from 'src/app/services/price.service';
 
 @Component({
   selector: 'app-block',
@@ -82,6 +83,9 @@ export class BlockComponent implements OnInit, OnDestroy {
   childChangeSubscription: Subscription;
   auditPrefSubscription: Subscription;
   
+  priceSubscription: Subscription;
+  blockConversion: Price;
+
   @ViewChildren('blockGraphProjected') blockGraphProjected: QueryList<BlockOverviewGraphComponent>;
   @ViewChildren('blockGraphActual') blockGraphActual: QueryList<BlockOverviewGraphComponent>;
 
@@ -94,7 +98,8 @@ export class BlockComponent implements OnInit, OnDestroy {
     private seoService: SeoService,
     private websocketService: WebsocketService,
     private relativeUrlPipe: RelativeUrlPipe,
-    private apiService: ApiService
+    private apiService: ApiService,
+    private priceService: PriceService,
   ) {
     this.webGlEnabled = detectWebGL();
   }
@@ -432,6 +437,19 @@ export class BlockComponent implements OnInit, OnDestroy {
         }
       }
     });
+
+    if (this.priceSubscription) {
+      this.priceSubscription.unsubscribe();
+    }
+    this.priceSubscription = block$.pipe(
+      switchMap((block) => {
+        return this.priceService.getPrices().pipe(
+          tap(() => {
+            this.blockConversion = this.priceService.getPriceForTimestamp(block.timestamp);
+          })
+        );
+      })
+    ).subscribe();
   }
 
   ngAfterViewInit(): void {

frontend/src/app/components/hashrate-chart/hashrate-chart.component.html

@@ -31,7 +31,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 12960" [class.active]="radioGroupForm.get('dateSpan').value === '3m'">
           <input type="radio" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" [attr.data-cy]="'3m'" formControlName="dateSpan"> 3M
         </label>

frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss

@@ -132,3 +132,8 @@
   max-width: 80px;
   margin: 15px auto 3px;
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html

@@ -11,7 +11,7 @@
     </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 25920" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
           <input type="radio" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]" [attr.data-cy]="'6m'" formControlName="dateSpan"> 6M
         </label>

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss

@@ -82,3 +82,8 @@
 .loadingGraphs.widget {
   top: 75%;
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts

@@ -5,7 +5,7 @@ import { delay, map, retryWhen, share, startWith, switchMap, tap } from 'rxjs/op
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { poolsColor } from '../../app.constants';
+import { chartColors, poolsColor } from '../../app.constants';
 import { StorageService } from '../../services/storage.service';
 import { MiningService } from '../../services/mining.service';
 import { download } from '../../shared/graphs.utils';
@@ -173,6 +173,7 @@ export class HashrateChartPoolsComponent implements OnInit {
     this.chartOptions = {
       title: title,
       animation: false,
+      color: chartColors,
       grid: {
         right: this.right,
         left: this.left,

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -40,7 +40,7 @@
     </div>  
     <form [formGroup]="radioGroupForm" class="formRadioGroup"
       *ngIf="!widget && (miningStatsObservable$ | async) as stats">
-      <div class="btn-group btn-group-toggle" name="radioBasic">
+      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
         <label class="btn btn-primary btn-sm" *ngIf="stats.totalBlockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
           <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/pools' | relativeUrl]" [attr.data-cy]="'24h'" formControlName="dateSpan"> 24h
         </label>
@@ -104,7 +104,7 @@
             <img width="25" height="25" src="{{ pool.logo }}" [alt]="pool.name + ' mining pool logo'" onError="this.src = '/resources/mining-pools/default.svg'">
           </td>
           <td class=""><a [routerLink]="[('/mining/pool/' + pool.slug) | relativeUrl]">{{ pool.name }}</a></td>
-          <td class="" *ngIf="this.miningWindowPreference === '24h' && !isLoading">{{ pool.lastEstimatedHashrate }} {{
+          <td class="" *ngIf="this.miningWindowPreference === '24h'">{{ pool.lastEstimatedHashrate }} {{
             miningStats.miningUnits.hashrateUnit }}</td>
           <td class="d-flex justify-content-center">
             {{ pool.blockCount }}<span class="d-none d-md-block">&nbsp;({{ pool.share }}%)</span>

frontend/src/app/components/pool-ranking/pool-ranking.component.scss

@@ -139,3 +139,8 @@
   max-width: 80px;
   margin: 15px auto 3px;
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -79,6 +79,7 @@ export class PoolRankingComponent implements OnInit {
         .pipe(
           startWith(this.radioGroupForm.controls.dateSpan.value), // (trigger when the page loads)
           tap((value) => {
+            this.isLoading = true;
             this.timespan = value;
             if (!this.widget) {
               this.storageService.setValue('miningWindowPreference', value);

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

@@ -469,7 +469,7 @@
     <tbody>
       <tr>
         <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
-        <td>{{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [value]="tx.fee"></app-fiat></span></td>
+        <td>{{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="tx.fee"></app-fiat></span></td>
       </tr>
       <tr>
         <td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>

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

@@ -8,10 +8,11 @@ import {
   retryWhen,
   delay,
   map,
-  mergeMap
+  mergeMap,
+  tap
 } from 'rxjs/operators';
 import { Transaction } from '../../interfaces/electrs.interface';
-import { of, merge, Subscription, Observable, Subject, timer, combineLatest, from, throwError } from 'rxjs';
+import { of, merge, Subscription, Observable, Subject, timer, from, throwError } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { CacheService } from '../../services/cache.service';
 import { WebsocketService } from '../../services/websocket.service';
@@ -21,6 +22,7 @@ import { SeoService } from '../../services/seo.service';
 import { BlockExtended, CpfpInfo } from '../../interfaces/node-api.interface';
 import { LiquidUnblinding } from './liquid-ublinding';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { Price, PriceService } from 'src/app/services/price.service';
 
 @Component({
   selector: 'app-transaction',
@@ -69,7 +71,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   hideFlow: boolean = this.stateService.hideFlow.value;
   overrideFlowPreference: boolean = null;
   flowEnabled: boolean;
-
+  blockConversion: Price;
   tooltipPosition: { x: number, y: number };
 
   @ViewChild('graphContainer')
@@ -85,7 +87,8 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
     private websocketService: WebsocketService,
     private audioService: AudioService,
     private apiService: ApiService,
-    private seoService: SeoService
+    private seoService: SeoService,
+    private priceService: PriceService,
   ) {}
 
   ngOnInit() {
@@ -323,6 +326,13 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
             }
             this.fetchRbfHistory$.next(this.tx.txid);
           }
+
+          this.priceService.getPrices().pipe(
+            tap(() => {
+              this.blockConversion = this.priceService.getPriceForTimestamp(tx.status.block_time);
+            })
+          ).subscribe();
+      
           setTimeout(() => { this.applyFragment(); }, 0);
         },
         (error) => {

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -88,7 +88,7 @@
                   </ng-template>
                   <ng-template #defaultOutput>
                     <span *ngIf="vin.lazy" class="skeleton-loader"></span>
-                    <app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
+                    <app-amount [blockConversion]="tx.price" *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
                   </ng-template>
                 </td>
               </tr>
@@ -216,7 +216,7 @@
                     </ng-template>
                   </ng-template>
                   <ng-template #defaultOutput>
-                    <app-amount [satoshis]="vout.value"></app-amount>
+                    <app-amount [blockConversion]="tx.price" [satoshis]="vout.value"></app-amount>
                   </ng-template>
                 </td>
                 <td class="arrow-td">
@@ -283,7 +283,9 @@
 
     <div class="summary">
       <div class="float-left mt-2-5" *ngIf="!transactionPage && !tx.vin[0].is_coinbase && tx.fee !== -1">
-        {{ tx.fee / (tx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [value]="tx.fee"></app-fiat></span></span>
+        {{ tx.fee / (tx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span
+          class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span class="symbol"
+            i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [blockConversion]="tx.price" [value]="tx.fee"></app-fiat></span></span>
       </div>
       <div class="float-left mt-2-5 grey-info-text" *ngIf="tx.fee === -1" i18n="transactions-list.load-to-reveal-fee-info">Show more inputs to reveal fee data</div>
 
@@ -301,12 +303,12 @@
         <button *ngIf="address === ''; else viewingAddress" type="button" class="btn btn-sm btn-primary mt-2 ml-2" (click)="switchCurrency()">
           <ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && haveBlindedOutputValues(tx)" [ngIfElse]="defaultAmount" i18n="shared.confidential">Confidential</ng-template>
           <ng-template #defaultAmount>
-            <app-amount [satoshis]="getTotalTxOutput(tx)"></app-amount>
+            <app-amount [blockConversion]="tx.price" [satoshis]="getTotalTxOutput(tx)"></app-amount>
           </ng-template>
         </button>
         <ng-template #viewingAddress>
           <button type="button" class="btn btn-sm mt-2 ml-2" (click)="switchCurrency()" [ngClass]="{'btn-success': tx['addressValue'] >= 0, 'btn-danger': tx['addressValue'] < 0}">
-            <app-amount [satoshis]="tx['addressValue']" [addPlus]="true"></app-amount>
+            <app-amount [blockConversion]="tx.price" [satoshis]="tx['addressValue']" [addPlus]="true"></app-amount>
           </button>
         </ng-template>
       </div>

frontend/src/app/components/transactions-list/transactions-list.component.ts

@@ -9,6 +9,7 @@ import { AssetsService } from '../../services/assets.service';
 import { filter, map, tap, switchMap } from 'rxjs/operators';
 import { BlockExtended } from '../../interfaces/node-api.interface';
 import { ApiService } from '../../services/api.service';
+import { PriceService } from 'src/app/services/price.service';
 
 @Component({
   selector: 'app-transactions-list',
@@ -50,6 +51,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
     private apiService: ApiService,
     private assetsService: AssetsService,
     private ref: ChangeDetectorRef,
+    private priceService: PriceService,
   ) { }
 
   ngOnInit(): void {
@@ -147,6 +149,12 @@ export class TransactionsListComponent implements OnInit, OnChanges {
 
           tx['addressValue'] = addressIn - addressOut;
         }
+
+        this.priceService.getPrices().pipe(
+          tap(() => {
+            tx['price'] = this.priceService.getPriceForTimestamp(tx.status.block_time);
+          })
+        ).subscribe();
       });
       const txIds = this.transactions.filter((tx) => !tx._outspends).map((tx) => tx.txid);
       if (txIds.length) {

frontend/src/app/fiat/fiat.component.html

@@ -1 +1,14 @@
-<span class="green-color" *ngIf="(conversions$ | async) as conversions">{{ (conversions ? conversions[currency] : 0) * value / 100000000 | fiatCurrency : digitsInfo : currency }}</span>
+<span class="green-color" *ngIf="blockConversion; else noblockconversion">
+  {{
+    (
+      (blockConversion.price[currency] > 0 ? blockConversion.price[currency] : null) ??
+      (blockConversion.price['USD'] * blockConversion.exchangeRates['USD' + currency]) ?? 0
+    ) * value / 100000000 | fiatCurrency : digitsInfo : currency
+  }}
+</span>
+
+<ng-template #noblockconversion>
+  <span class="green-color" *ngIf="(conversions$ | async) as conversions">
+    {{ (conversions[currency] ?? conversions['USD'] ?? 0) * value / 100000000 | fiatCurrency : digitsInfo : currency }}
+  </span>
+</ng-template>

frontend/src/app/fiat/fiat.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
+import { Price } from '../services/price.service';
 import { StateService } from '../services/state.service';
 
 @Component({
@@ -15,6 +16,7 @@ export class FiatComponent implements OnInit, OnDestroy {
 
   @Input() value: number;
   @Input() digitsInfo = '1.2-2';
+  @Input() blockConversion: Price;
 
   constructor(
     private stateService: StateService,

frontend/src/app/interfaces/electrs.interface.ts

@@ -1,3 +1,4 @@
+import { Price } from '../services/price.service';
 import { IChannel } from './node-api.interface';
 
 export interface Transaction {
@@ -23,6 +24,7 @@ export interface Transaction {
   _deduced?: boolean;
   _outspends?: Outspend[];
   _channels?: TransactionChannels;
+  price?: Price;
 }
 
 export interface TransactionChannels {

frontend/src/app/services/api.service.ts

@@ -6,6 +6,7 @@ import { Observable } from 'rxjs';
 import { StateService } from './state.service';
 import { WebsocketResponse } from '../interfaces/websocket.interface';
 import { Outspend, Transaction } from '../interfaces/electrs.interface';
+import { Conversion } from './price.service';
 
 @Injectable({
   providedIn: 'root'
@@ -303,4 +304,8 @@ export class ApiService {
         (style     !== undefined ? `?style=${style}` : '')
     );
   }
+
+  getHistoricalPrice$(): Observable<Conversion> {
+    return this.httpClient.get<Conversion>( this.apiBaseUrl + this.apiBasePath + '/api/v1/historical-price');
+  }
 }

frontend/src/app/services/price.service.ts

@@ -0,0 +1,121 @@
+import { Injectable } from '@angular/core';
+import { map, Observable, of, shareReplay } from 'rxjs';
+import { ApiService } from './api.service';
+
+// nodejs backend interfaces
+export interface ApiPrice {
+  time?: number,
+  USD: number,
+  EUR: number,
+  GBP: number,
+  CAD: number,
+  CHF: number,
+  AUD: number,
+  JPY: number,
+}
+export interface ExchangeRates {
+  USDEUR: number,
+  USDGBP: number,
+  USDCAD: number,
+  USDCHF: number,
+  USDAUD: number,
+  USDJPY: number,
+}
+export interface Conversion {
+  prices: ApiPrice[],
+  exchangeRates: ExchangeRates;
+}
+
+// frontend interface
+export interface Price {
+  price: ApiPrice,
+  exchangeRates: ExchangeRates,
+}
+export interface ConversionDict {
+  prices: { [timestamp: number]: ApiPrice }
+  exchangeRates: ExchangeRates;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PriceService {
+  historicalPrice: ConversionDict = {
+    prices: null,
+    exchangeRates: null,
+  };
+
+  constructor(
+    private apiService: ApiService
+  ) {
+  }
+
+  getEmptyPrice(): Price {
+    return {
+      price: {
+        USD: 0, EUR: 0, GBP: 0, CAD: 0, CHF: 0, AUD: 0, JPY: 0,
+      },
+      exchangeRates: {
+        USDEUR: 0, USDGBP: 0, USDCAD: 0, USDCHF: 0, USDAUD: 0, USDJPY: 0,
+      },
+    };
+  }
+
+  /**
+   * Fetch prices from the nodejs backend only once
+   */
+  getPrices(): Observable<void> {
+    if (this.historicalPrice.prices) {
+      return of(null);
+    }
+
+    return this.apiService.getHistoricalPrice$().pipe(
+      map((conversion: Conversion) => {
+        if (!this.historicalPrice.prices) {
+          this.historicalPrice.prices = Object();
+        }
+        for (const price of conversion.prices) {
+          this.historicalPrice.prices[price.time] = {
+            USD: price.USD, EUR: price.EUR, GBP: price.GBP, CAD: price.CAD,
+            CHF: price.CHF, AUD: price.AUD, JPY: price.JPY
+          };
+        }
+        this.historicalPrice.exchangeRates = conversion.exchangeRates;
+        return;
+      }),
+      shareReplay(),
+    );
+  }
+
+  /**
+   * Note: The first block with a price we have is block 68952 (using MtGox price history)
+   * 
+   * @param blockTimestamp 
+   */
+  getPriceForTimestamp(blockTimestamp: number): Price | null {
+    const priceTimestamps = Object.keys(this.historicalPrice.prices);
+    priceTimestamps.push(Number.MAX_SAFE_INTEGER.toString());
+    priceTimestamps.sort().reverse();
+    
+    // Small trick here. Because latest blocks have higher timestamps than our
+    // latest price timestamp (we only insert once every hour), we have no price for them.
+    // Therefore we want to fallback to the websocket price by returning an undefined `price` field.
+    // Since this.historicalPrice.prices[Number.MAX_SAFE_INTEGER] does not exists
+    // it will return `undefined` and automatically use the websocket price.
+    // This way we can differenciate blocks without prices like the genesis block
+    // vs ones without a price (yet) like the latest blocks
+
+    for (const t of priceTimestamps) {
+      const priceTimestamp = parseInt(t, 10);
+      if (blockTimestamp > priceTimestamp) {
+        return {
+          price: this.historicalPrice.prices[priceTimestamp],
+          exchangeRates: this.historicalPrice.exchangeRates,
+        };
+      }
+    }
+
+    return this.getEmptyPrice();
+  }
+}
+